show small balances button

Author: mgrabina

src/components/lists/ListWrapper.tsx

@@ -18,6 +18,7 @@ interface ListWrapperProps {
   wrapperSx?: BoxProps['sx'];
   tooltipOpen?: boolean;
   paperSx?: PaperProps['sx'];
+  topInfoSx?: BoxProps['sx'];
 }
 
 export const ListWrapper = ({
@@ -32,6 +33,7 @@ export const ListWrapper = ({
   wrapperSx,
   tooltipOpen,
   paperSx,
+  topInfoSx,
 }: ListWrapperProps) => {
   const [isCollapse, setIsCollapse] = useState(
     localStorageName ? localStorage.getItem(localStorageName) === 'true' : false
@@ -170,6 +172,7 @@ export const ListWrapper = ({
             px: { xs: 4, xsm: 6 },
             pb: { xs: collapsed && !noData ? 6 : 2, xsm: collapsed && !noData ? 6 : 0 },
             overflowX: tooltipOpen ? 'hidden' : 'auto',
+            ...topInfoSx,
           }}
         >
           {topInfo}

src/locales/el/messages.js

@@ -1835,6 +1835,10 @@ msgstr "Bridge history"
 msgid "Borrow balance after switch"
 msgstr "Borrow balance after switch"
 
+#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
+msgid "Show assets with small balance"
+msgstr "Show assets with small balance"
+
 #: src/components/transactions/Bridge/BridgeModalContent.tsx
 msgid "Asset has been successfully sent to CCIP contract. You can check the status of the transactions below"
 msgstr "Asset has been successfully sent to CCIP contract. You can check the status of the transactions below"
@@ -3269,7 +3273,7 @@ msgstr "APY"
 msgid "Asset cannot be migrated because you have isolated collateral in {marketName} v3 Market which limits borrowable assets. You can manage your collateral in <0>{marketName} V3 Dashboard</0>"
 msgstr "Asset cannot be migrated because you have isolated collateral in {marketName} v3 Market which limits borrowable assets. You can manage your collateral in <0>{marketName} V3 Dashboard</0>"
 
-#: src/modules/dashboard/DashboardListTopPanel.tsx
+#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx
 msgid "Show assets with 0 balance"
 msgstr "Show assets with 0 balance"
 

src/locales/en/messages.js

@@ -1,9 +1,6 @@
-import { Trans } from '@lingui/macro';
-import { Box, Checkbox, FormControlLabel } from '@mui/material';
+import { Box, Checkbox, FormControlLabel, SxProps } from '@mui/material';
 import { FaucetButton } from 'src/components/FaucetButton';
 import { useRootStore } from 'src/store/root';
-import { DASHBOARD } from 'src/utils/events';
-import { ENABLE_TESTNET, STAGING_ENV } from 'src/utils/marketsAndNetworksConfig';
 
 import { BridgeButton } from '../../components/BridgeButton';
 import { toggleLocalStorageClick } from '../../helpers/toggle-local-storage-click';
@@ -13,13 +10,23 @@ interface DashboardListTopPanelProps extends Pick<NetworkConfig, 'bridge'> {
   value: boolean;
   onClick: (value: boolean) => void;
   localStorageName: string;
+  eventName: string;
+  label: React.ReactNode;
+  showFaucet: boolean;
+  showBridge: boolean;
+  sx?: SxProps;
 }
 
 export const DashboardListTopPanel = ({
   value,
   onClick,
   localStorageName,
   bridge,
+  eventName,
+  label,
+  showFaucet,
+  showBridge,
+  sx,
 }: DashboardListTopPanelProps) => {
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -33,22 +40,23 @@ export const DashboardListTopPanel = ({
         px: { xs: 4, xsm: 6 },
         py: 2,
         pl: { xs: '18px', xsm: '27px' },
+        ...sx,
       }}
     >
       <FormControlLabel
         sx={{ mt: { xs: bridge ? 2 : 0, xsm: 0 } }}
         control={<Checkbox sx={{ p: '6px' }} />}
         checked={value}
         onChange={() => {
-          trackEvent(DASHBOARD.SHOW_ASSETS_0_BALANCE, {});
+          trackEvent(eventName, {});
 
           toggleLocalStorageClick(value, onClick, localStorageName);
         }}
-        label={<Trans>Show assets with 0 balance</Trans>}
+        label={label}
       />
 
-      {(STAGING_ENV || ENABLE_TESTNET) && <FaucetButton />}
-      {!ENABLE_TESTNET && <BridgeButton bridge={bridge} />}
+      {showFaucet && <FaucetButton />}
+      {showBridge && <BridgeButton bridge={bridge} />}
     </Box>
   );
 };

src/locales/en/messages.po

@@ -1,14 +1,14 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
 import { Trans } from '@lingui/macro';
-import { Typography, useMediaQuery, useTheme } from '@mui/material';
-import { Fragment, useState } from 'react';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Fragment, useMemo, useState } from 'react';
 import { ListColumn } from 'src/components/lists/ListColumn';
 import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
 import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
 import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { useRootStore } from 'src/store/root';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
-import { GENERAL } from 'src/utils/events';
+import { DASHBOARD, GENERAL } from 'src/utils/events';
 
 import { CollateralSwitchTooltip } from '../../../../components/infoTooltips/CollateralSwitchTooltip';
 import { CollateralTooltip } from '../../../../components/infoTooltips/CollateralTooltip';
@@ -23,6 +23,7 @@ import {
 import { amountToUsd } from '../../../../utils/utils';
 import { ListTopInfoItem } from '../../../dashboard/lists/ListTopInfoItem';
 import { DashboardContentNoData } from '../../DashboardContentNoData';
+import { DashboardListTopPanel } from '../../DashboardListTopPanel';
 import { ListButtonsColumn } from '../ListButtonsColumn';
 import { ListLoader } from '../ListLoader';
 import { SuppliedPositionsListItem } from './SuppliedPositionsListItem';
@@ -58,6 +59,8 @@ const head = [
   },
 ];
 
+export const SMALL_BALANCE_THRESHOLD = 0.001;
+
 export const SuppliedPositionsList = () => {
   const { user, loading, marketReferencePriceInUsd } = useAppDataContext();
   const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
@@ -67,33 +70,42 @@ export const SuppliedPositionsList = () => {
   const [sortDesc, setSortDesc] = useState(false);
   const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
 
-  const suppliedPositions =
-    user?.userReservesData
-      .filter((userReserve) => {
-        if (userReserve.underlyingBalance === '0') return false;
+  const localStorageName = 'showSuppliedSmallBalanceAssets';
+  const [isShowSmallBalanceAssets, setIsShowSmallBalanceAssets] = useState(
+    localStorage.getItem(localStorageName) === 'true'
+  );
+
+  const suppliedPositions = useMemo(() => {
+    return (
+      user?.userReservesData
+        .filter((userReserve) => {
+          if (userReserve.underlyingBalance === '0') return false;
 
-        // Filter out dust amounts < $0.01 USD
-        const balanceUSD = amountToUsd(
-          userReserve.underlyingBalance,
-          userReserve.reserve.formattedPriceInMarketReferenceCurrency,
-          marketReferencePriceInUsd
-        );
+          if (isShowSmallBalanceAssets) return true;
 
-        return Number(balanceUSD) >= 0.01;
-      })
-      .map((userReserve) => ({
-        ...userReserve,
-        supplyAPY: userReserve.reserve.supplyAPY, // Note: added only for table sort
-        reserve: {
-          ...userReserve.reserve,
-          ...(userReserve.reserve.isWrappedBaseAsset
-            ? fetchIconSymbolAndName({
-                symbol: currentNetworkConfig.baseAssetSymbol,
-                underlyingAsset: API_ETH_MOCK_ADDRESS.toLowerCase(),
-              })
-            : {}),
-        },
-      })) || [];
+          // Filter out dust amounts < $0.01 USD
+          const balanceUSD = amountToUsd(
+            userReserve.underlyingBalance,
+            userReserve.reserve.formattedPriceInMarketReferenceCurrency,
+            marketReferencePriceInUsd
+          );
+          return Number(balanceUSD) >= SMALL_BALANCE_THRESHOLD;
+        })
+        .map((userReserve) => ({
+          ...userReserve,
+          supplyAPY: userReserve.reserve.supplyAPY, // Note: added only for table sort
+          reserve: {
+            ...userReserve.reserve,
+            ...(userReserve.reserve.isWrappedBaseAsset
+              ? fetchIconSymbolAndName({
+                  symbol: currentNetworkConfig.baseAssetSymbol,
+                  underlyingAsset: API_ETH_MOCK_ADDRESS.toLowerCase(),
+                })
+              : {}),
+          },
+        })) || []
+    );
+  }, [isShowSmallBalanceAssets]);
 
   // Transform to the DashboardReserve schema so the sort utils can work with it
   const preSortedReserves = suppliedPositions as DashboardReserve[];
@@ -143,6 +155,20 @@ export const SuppliedPositionsList = () => {
       }
       localStorageName="suppliedAssetsDashboardTableCollapse"
       noData={!sortedReserves.length}
+      subChildrenComponent={
+        <Box>
+          <DashboardListTopPanel
+            value={isShowSmallBalanceAssets}
+            onClick={setIsShowSmallBalanceAssets}
+            localStorageName={localStorageName}
+            bridge={currentNetworkConfig.bridge}
+            eventName={DASHBOARD.SHOW_ASSETS_SMALL_BALANCE}
+            label={<Trans>Show assets with small balance</Trans>}
+            showFaucet={false}
+            showBridge={false}
+          />
+        </Box>
+      }
       topInfo={
         <>
           {!!sortedReserves.length && (

src/locales/es/messages.js

@@ -12,7 +12,9 @@ import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { useWrappedTokens } from 'src/hooks/useWrappedTokens';
 import { useRootStore } from 'src/store/root';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
+import { DASHBOARD } from 'src/utils/events';
 import { displayGhoForMintableMarket } from 'src/utils/ghoUtilities';
+import { ENABLE_TESTNET, STAGING_ENV } from 'src/utils/marketsAndNetworksConfig';
 
 import { ListWrapper } from '../../../../components/lists/ListWrapper';
 import { Link, ROUTES } from '../../../../components/primitives/Link';
@@ -286,6 +288,10 @@ export const SupplyAssetsList = () => {
               onClick={setIsShowZeroAssets}
               localStorageName={localStorageName}
               bridge={bridge}
+              eventName={DASHBOARD.SHOW_ASSETS_0_BALANCE}
+              label={<Trans>Show assets with 0 balance</Trans>}
+              showFaucet={STAGING_ENV || ENABLE_TESTNET}
+              showBridge={!ENABLE_TESTNET}
             />
           )}
         </>

src/locales/fr/messages.js

@@ -41,6 +41,7 @@ export const DASHBOARD = {
   NOTIFY_DASHBOARD: 'Notify dashboard', // done
   TILE_VISBILITY: 'Tile visibility',
   SHOW_ASSETS_0_BALANCE: 'Show assets with zero balance dashboard', // done
+  SHOW_ASSETS_SMALL_BALANCE: 'Show assets with small balance dashboard',
   SELECT_V3_ETH_MARKET: 'Clicks a V3 ETH market from dashboard', // done
 };