feat: gho asset sorting

src/layouts/MainLayout.tsx

@@ -15,6 +15,7 @@ export function MainLayout({ children }: { children: ReactNode }) {
         learnMoreLink="https://governance.aave.com/t/arfc-gho-cross-chain-launch/17616"
         buttonText="Learn More"
         notifyText="Users can now bridge GHO to Arbitrum with CCIP ✨"
+        storageKey="ccip-notify"
       />
       <AppHeader />
       <Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>

src/layouts/TopBarNotify.tsx

@@ -12,11 +12,17 @@ import { useRootStore } from 'src/store/root';
 
 interface TopBarNotifyProps {
   notifyText: ReactNode;
+  storageKey: string;
   learnMoreLink?: string;
   buttonText?: string;
 }
 
-export default function TopBarNotify({ notifyText, learnMoreLink, buttonText }: TopBarNotifyProps) {
+export default function TopBarNotify({
+  notifyText,
+  storageKey,
+  learnMoreLink,
+  buttonText,
+}: TopBarNotifyProps) {
   const { breakpoints } = useTheme();
   const md = useMediaQuery(breakpoints.down('md'));
 
@@ -25,14 +31,17 @@ export default function TopBarNotify({ notifyText, learnMoreLink, buttonText }:
   const [mobileDrawerOpen] = useRootStore((state) => [state.mobileDrawerOpen]);
 
   useEffect(() => {
-    const warningBarOpen = localStorage.getItem('warningBarOpen');
+    // remove previous key
+    localStorage.removeItem('warningBarOpen');
+
+    const warningBarOpen = localStorage.getItem(storageKey);
     if (warningBarOpen && warningBarOpen === 'false') {
       setShowWarning(false);
     }
   }, []);
 
   const handleClose = () => {
-    localStorage.setItem('warningBarOpen', 'false');
+    localStorage.setItem(storageKey, 'false');
     setShowWarning(false);
   };
 

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx

@@ -14,6 +14,7 @@ import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
 import {
   displayGhoForMintableMarket,
   findAndFilterMintableGhoReserve,
+  GHO_SYMBOL,
 } from 'src/utils/ghoUtilities';
 import { GENERAL } from 'src/utils/mixPanelEvents';
 
@@ -30,6 +31,7 @@ import {
   DASHBOARD_LIST_COLUMN_WIDTHS,
   DashboardReserve,
   handleSortDashboardReserves,
+  sortPriorityReserve,
 } from '../../../../utils/dashboardSortUtils';
 import {
   assetCanBeBorrowedByUser,
@@ -160,12 +162,8 @@ export const BorrowAssetsList = () => {
     borrowReserves,
     currentMarket
   );
-  const sortedReserves = handleSortDashboardReserves(
-    sortDesc,
-    sortName,
-    'asset',
-    filteredReserves as unknown as DashboardReserve[]
-  );
+  const sorted = sortPriorityReserve(GHO_SYMBOL, filteredReserves as unknown as DashboardReserve[]);
+  const sortedReserves = handleSortDashboardReserves(sortDesc, sortName, 'asset', sorted);
   const borrowDisabled = !sortedReserves.length && !ghoReserve;
 
   const RenderHeader: React.FC = () => {

src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx

@@ -13,7 +13,7 @@ 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 { displayGhoForMintableMarket } from 'src/utils/ghoUtilities';
+import { displayGhoForMintableMarket, GHO_SYMBOL } from 'src/utils/ghoUtilities';
 
 import { ListWrapper } from '../../../../components/lists/ListWrapper';
 import { Link, ROUTES } from '../../../../components/primitives/Link';
@@ -26,6 +26,7 @@ import {
   DASHBOARD_LIST_COLUMN_WIDTHS,
   DashboardReserve,
   handleSortDashboardReserves,
+  sortPriorityReserve,
 } from '../../../../utils/dashboardSortUtils';
 import { DashboardListTopPanel } from '../../DashboardListTopPanel';
 import { ListButtonsColumn } from '../ListButtonsColumn';
@@ -187,14 +188,16 @@ export const SupplyAssetsList = () => {
   });
 
   // Filter out reserves
-  const supplyReserves: unknown = isShowZeroAssets
-    ? sortedSupplyReserves
-    : filteredSupplyReserves.length >= 1
-    ? filteredSupplyReserves
-    : sortedSupplyReserves;
+  let supplyReserves: unknown;
+  if (isShowZeroAssets || filteredSupplyReserves.length === 0) {
+    supplyReserves = sortedSupplyReserves;
+  } else {
+    supplyReserves = filteredSupplyReserves;
+  }
 
   // Transform to the DashboardReserve schema so the sort utils can work with it
-  const preSortedReserves = supplyReserves as DashboardReserve[];
+  let preSortedReserves = supplyReserves as DashboardReserve[];
+  preSortedReserves = sortPriorityReserve(GHO_SYMBOL, preSortedReserves);
   const sortedReserves = handleSortDashboardReserves(
     sortDesc,
     sortName,

src/modules/markets/MarketAssetsListContainer.tsx

@@ -74,7 +74,14 @@ export const MarketAssetsListContainer = () => {
   const marketFrozen = !reserves.some((reserve) => !reserve.isFrozen);
   const showFrozenMarketWarning =
     marketFrozen && ['Harmony', 'Fantom', 'Ethereum AMM'].includes(currentMarketData.marketTitle);
+
   const unfrozenReserves = filteredData.filter((r) => !r.isFrozen && !r.isPaused);
+  const priorityReserveIndex = unfrozenReserves.findIndex((r) => r.symbol === GHO_SYMBOL);
+  if (priorityReserveIndex > -1) {
+    const [priorityReserve] = unfrozenReserves.splice(priorityReserveIndex, 1);
+    unfrozenReserves.unshift(priorityReserve);
+  }
+
   const [showFrozenMarketsToggle, setShowFrozenMarketsToggle] = useState(false);
 
   const handleChange = () => {

src/utils/__tests__/dashboardSortUtils.spec.ts

@@ -0,0 +1,77 @@
+import { sortPriorityReserve } from '../dashboardSortUtils';
+import { GHO_SYMBOL } from '../ghoUtilities';
+
+describe('dashboardSortUtils', () => {
+  it('should place the priority reserve at the top if wallet balance is non-zero', () => {
+    const mockPositions = [
+      {
+        reserve: { symbol: 'ETH' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: 'wBTC' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: GHO_SYMBOL },
+        walletBalanceUSD: '1',
+      },
+    ];
+
+    const result = sortPriorityReserve(GHO_SYMBOL, mockPositions);
+    expect(result[0].reserve.symbol).toEqual(GHO_SYMBOL);
+  });
+  it('should place the priority reserve at the top when all balances are zero', () => {
+    const mockPositions = [
+      {
+        reserve: { symbol: 'ETH' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: 'BTC' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: GHO_SYMBOL },
+        walletBalanceUSD: '0',
+      },
+    ];
+
+    const result = sortPriorityReserve(GHO_SYMBOL, mockPositions);
+    expect(result[0].reserve.symbol).toEqual(GHO_SYMBOL);
+  });
+  it('should place the priority reserve after all non-zero balance items if the wallet balance is zero', () => {
+    const mockPositions = [
+      {
+        reserve: { symbol: 'ETH' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: 'BTC' },
+        walletBalanceUSD: '1',
+      },
+      {
+        reserve: { symbol: GHO_SYMBOL },
+        walletBalanceUSD: '0',
+      },
+    ];
+
+    const result = sortPriorityReserve(GHO_SYMBOL, mockPositions);
+    expect(result[1].reserve.symbol).toEqual(GHO_SYMBOL);
+  });
+  it('should return the same positions if the priority reserve is not found', () => {
+    const mockPositions = [
+      {
+        reserve: { symbol: 'ETH' },
+        walletBalanceUSD: '0',
+      },
+      {
+        reserve: { symbol: 'BTC' },
+        walletBalanceUSD: '0',
+      },
+    ];
+
+    const result = sortPriorityReserve(GHO_SYMBOL, mockPositions);
+    expect(result).toEqual(mockPositions);
+  });
+});

src/utils/dashboardSortUtils.ts

@@ -29,6 +29,34 @@ export type DashboardReserve = DashboardReserveData & {
   reserve: ComputedReserveData;
 };
 
+// Narrowing down the type to only the necessary fields to simplify testing
+type Positions = { reserve: Pick<DashboardReserve['reserve'], 'symbol'> } & Pick<
+  DashboardReserve,
+  'walletBalanceUSD'
+>;
+export const sortPriorityReserve = (priorityReserveSymbol: string, positions: Positions[]) => {
+  const priorityReserve = positions.find(
+    (position) => position.reserve.symbol === priorityReserveSymbol
+  );
+  if (!priorityReserve) {
+    return positions as DashboardReserve[];
+  }
+
+  let reserves = positions.filter((item) => item !== priorityReserve);
+
+  if (priorityReserve.walletBalanceUSD !== '0') {
+    // Insert at the top if the wallet balance is non-zero
+    reserves.unshift(priorityReserve);
+  } else {
+    // Insert after all non-zero items first, then the priority reserve, then all zero items
+    const nonZeroItems = reserves.filter((item) => +item.walletBalanceUSD !== 0);
+    const zeroItems = reserves.filter((item) => +item.walletBalanceUSD === 0);
+    reserves = [...nonZeroItems, priorityReserve, ...zeroItems];
+  }
+
+  return reserves as DashboardReserve[];
+};
+
 export const handleSortDashboardReserves = (
   sortDesc: boolean,
   sortName: string,