chore: add legacy switch to menu (#2967)

Author: sammdec

src/components/MarketSwitcher.tsx

@@ -10,6 +10,7 @@ import {
   InputAdornment,
   Popover,
   SvgIcon,
+  Switch,
   TextField,
   Tooltip,
   Typography,
@@ -185,6 +186,7 @@ const getMarketOrder = (marketId: CustomMarket): number => {
 export const MarketSwitcher = () => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
+  const [showLegacy, setShowLegacy] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
   const open = Boolean(anchorEl);
 
@@ -489,8 +491,13 @@ export const MarketSwitcher = () => {
         />
       </Box>
 
-      {/* Scrollable content */}
-      <Box sx={{ overflowY: 'auto', flex: 1, pb: 1 }}>
+      {/* Content (scrolls on mobile, extends on desktop) */}
+      <Box
+        sx={{
+          pb: 1,
+          ...(mobile && { overflowY: 'auto', flex: 1 }),
+        }}
+      >
         {/* Favourites */}
         {pinned.length > 0 && (
           <Box>
@@ -520,7 +527,9 @@ export const MarketSwitcher = () => {
             <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 1.5 }}>
               {ethereum.map((id) => renderGridItem(id, mobile))}
             </Box>
-            <Divider sx={{ my: 1 }} />
+            {(other.length > 0 || l2.length > 0 || (showLegacy && legacy.length > 0)) && (
+              <Divider sx={{ my: 1 }} />
+            )}
           </Box>
         )}
 
@@ -531,7 +540,7 @@ export const MarketSwitcher = () => {
             <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 1.5 }}>
               {other.map((id) => renderGridItem(id, mobile))}
             </Box>
-            <Divider sx={{ my: 1 }} />
+            {(l2.length > 0 || (showLegacy && legacy.length > 0)) && <Divider sx={{ my: 1 }} />}
           </Box>
         )}
 
@@ -542,12 +551,12 @@ export const MarketSwitcher = () => {
             <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 1.5 }}>
               {l2.map((id) => renderGridItem(id, mobile))}
             </Box>
-            <Divider sx={{ my: 1 }} />
+            {showLegacy && legacy.length > 0 && <Divider sx={{ my: 1 }} />}
           </Box>
         )}
 
         {/* Legacy */}
-        {legacy.length > 0 && (
+        {showLegacy && legacy.length > 0 && (
           <Box>
             {sectionHeader(<Trans>Legacy</Trans>)}
             <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 1.5 }}>
@@ -565,6 +574,35 @@ export const MarketSwitcher = () => {
           </Box>
         )}
       </Box>
+
+      {/* Legacy markets toggle */}
+      <Box
+        sx={{
+          borderTop: '1px solid',
+          borderColor: 'divider',
+          px: '24px',
+          py: 1,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: '14px',
+            fontWeight: 500,
+            letterSpacing: '0.15px',
+            color: 'text.secondary',
+          }}
+        >
+          <Trans>Show legacy markets</Trans>
+        </Typography>
+        <Switch
+          checked={showLegacy}
+          onChange={(e) => setShowLegacy(e.target.checked)}
+          inputProps={{ 'aria-label': t`Show legacy markets` }}
+        />
+      </Box>
     </>
   );
 
@@ -722,7 +760,6 @@ export const MarketSwitcher = () => {
               elevation: 0,
               sx: {
                 width: 535,
-                maxHeight: 520,
                 overflow: 'hidden',
                 display: 'flex',
                 flexDirection: 'column',

src/locales/el/messages.js

@@ -4216,6 +4216,11 @@ msgstr "Isolated Debt Ceiling"
 msgid "Protocol supply cap is at 100% for this asset. Further supply unavailable."
 msgstr "Protocol supply cap is at 100% for this asset. Further supply unavailable."
 
+#: src/components/MarketSwitcher.tsx
+#: src/components/MarketSwitcher.tsx
+msgid "Show legacy markets"
+msgstr "Show legacy markets"
+
 #: src/layouts/SupportModal.tsx
 msgid "Submission did not work, please try again later or contact wecare@avara.xyz"
 msgstr "Submission did not work, please try again later or contact wecare@avara.xyz"