feat: add switch that hides assets with <$100k supply

src/locales/en/messages.po

@@ -468,6 +468,10 @@ msgstr "To continue, you need to grant smart contracts permission to move your f
 msgid "View all votes"
 msgstr "View all votes"
 
+#: src/modules/markets/MarketAssetsListContainer.tsx
+msgid "Show assets <$100k supply"
+msgstr "Show assets <$100k supply"
+
 #: pages/reserve-overview.page.tsx
 msgid "Overview"
 msgstr "Overview"
@@ -1919,10 +1923,6 @@ msgstr "Funds in the Safety Module"
 msgid "If the error continues to happen,<0/> you may report it to this"
 msgstr "If the error continues to happen,<0/> you may report it to this"
 
-#: src/modules/markets/MarketAssetsListContainer.tsx
-msgid "Show Frozen or paused assets"
-msgstr "Show Frozen or paused assets"
-
 #: src/modules/reserve-overview/Gho/SavingsGho.tsx
 #: src/modules/sGho/SGhoDepositPanel.tsx
 #: src/modules/staking/GhoStakingPanel.tsx
@@ -4000,6 +4000,10 @@ msgstr "You {action} <0/> {symbol}"
 msgid "Discord channel"
 msgstr "Discord channel"
 
+#: src/modules/markets/MarketAssetsListContainer.tsx
+msgid "Show frozen/paused assets"
+msgstr "Show frozen/paused assets"
+
 #: src/ui-config/errorMapping.tsx
 msgid "The caller of the function is not an AToken"
 msgstr "The caller of the function is not an AToken"

src/modules/markets/MarketAssetsListContainer.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro';
-import { Box, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Divider, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useState } from 'react';
 import { AssetCategoryMultiSelect } from 'src/components/AssetCategoryMultiselect';
 import { ListWrapper } from 'src/components/lists/ListWrapper';
@@ -59,6 +59,8 @@ export const MarketAssetsListContainer = () => {
 
   const displayGhoBanner = shouldDisplayGhoBanner(currentMarket, searchTerm);
 
+  const [showLowLiquidityToggle, setShowLowLiquidityToggle] = useState(false);
+
   const filteredData = supplyReserves
     // Filter out any hidden assets
     .filter((res) => !isAssetHidden(currentMarketData.market, res.underlyingToken.address))
@@ -85,6 +87,8 @@ export const MarketAssetsListContainer = () => {
           )
         )
     )
+    // Filter out low-liquidity assets (<$100k supply) unless toggle is enabled
+    .filter((res) => showLowLiquidityToggle || Number(res.size.usd) >= 100_000)
     // Add initial sorting by total supplied in USD descending
     .sort((a, b) => {
       const aValue = Number(a.size.usd) || 0;
@@ -176,43 +180,32 @@ export const MarketAssetsListContainer = () => {
       {/* Unfrozen assets list */}
       <MarketAssetsList reserves={unfrozenReserves} loading={loading} />
 
-      {/* Frozen or paused assets list */}
-      {frozenOrPausedReserves.length > 0 && (
+      {showFrozenMarketsToggle && frozenOrPausedReserves.length > 0 && (
         <Box sx={{ mt: 10, px: { xs: 4, xsm: 6 } }}>
-          <Typography variant="h4" mb={4}>
-            <Trans>Show Frozen or paused assets</Trans>
-
-            <Switch
-              checked={showFrozenMarketsToggle}
-              onChange={handleChange}
-              inputProps={{ 'aria-label': 'controlled' }}
-            />
-          </Typography>
-          {showFrozenMarketsToggle && (
-            <Warning severity="info">
-              <Trans>
-                These assets are temporarily frozen or paused by Aave community decisions, meaning
-                that further supply / borrow, or rate swap of these assets are unavailable.
-                Withdrawals and debt repayments are allowed. Follow the{' '}
-                <Link
-                  onClick={() => {
-                    trackEvent(GENERAL.EXTERNAL_LINK, {
-                      link: 'Frozen Market Markets Page',
-                      frozenMarket: currentNetworkConfig.name,
-                    });
-                  }}
-                  href="https://governance.aave.com"
-                  underline="always"
-                >
-                  Aave governance forum
-                </Link>{' '}
-                for further updates.
-              </Trans>
-            </Warning>
-          )}
+          <Warning severity="info">
+            <Trans>
+              These assets are temporarily frozen or paused by Aave community decisions, meaning
+              that further supply / borrow, or rate swap of these assets are unavailable.
+              Withdrawals and debt repayments are allowed. Follow the{' '}
+              <Link
+                onClick={() => {
+                  trackEvent(GENERAL.EXTERNAL_LINK, {
+                    link: 'Frozen Market Markets Page',
+                    frozenMarket: currentNetworkConfig.name,
+                  });
+                }}
+                href="https://governance.aave.com"
+                underline="always"
+              >
+                Aave governance forum
+              </Link>{' '}
+              for further updates.
+            </Trans>
+          </Warning>
         </Box>
       )}
-      {showFrozenMarketsToggle && (
+
+      {showFrozenMarketsToggle && frozenOrPausedReserves.length > 0 && (
         <MarketAssetsList reserves={frozenOrPausedReserves} loading={loading} />
       )}
 
@@ -228,6 +221,48 @@ export const MarketAssetsListContainer = () => {
           }
         />
       )}
+
+      <Box
+        sx={{
+          mt: 6,
+          px: { xs: 4, xsm: 6 },
+          py: 3,
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          alignItems: { xs: 'flex-start', sm: 'center' },
+          gap: { xs: 1, sm: 3 },
+        }}
+      >
+        {frozenOrPausedReserves.length > 0 && (
+          <>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant="subheader1">
+                <Trans>Show frozen/paused assets</Trans>
+              </Typography>
+              <Switch
+                checked={showFrozenMarketsToggle}
+                onChange={handleChange}
+                inputProps={{ 'aria-label': 'show frozen or paused assets' }}
+              />
+            </Box>
+            <Divider
+              orientation={sm ? 'horizontal' : 'vertical'}
+              flexItem
+              sx={{ width: { xs: '100%', sm: 'auto' } }}
+            />
+          </>
+        )}
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Typography variant="subheader1">
+            <Trans>{'Show assets <$100k supply'}</Trans>
+          </Typography>
+          <Switch
+            checked={showLowLiquidityToggle}
+            onChange={() => setShowLowLiquidityToggle((prev) => !prev)}
+            inputProps={{ 'aria-label': 'show assets under 100k supply' }}
+          />
+        </Box>
+      </Box>
     </ListWrapper>
   );
 };