From fefd94912542d0fae4f15b5965dff885a7428e07 Mon Sep 17 00:00:00 2001
From: Matt Upham <30577966+mattupham@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:24:08 -0700
Subject: [PATCH] fix(portfolio): ordering favorites (#3857)

* fix(portfolio): ordering favorites, update withdraw / deposit button on mobile

* fix(portfolio): update table to collapse asset actions less than 1024px

* build(asset-balances): remove ts-expect-error
---
 .../web/components/table/asset-balances.tsx   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/table/asset-balances.tsx b/packages/web/components/table/asset-balances.tsx
index 92d895596a..877fad8db0 100644
--- a/packages/web/components/table/asset-balances.tsx
+++ b/packages/web/components/table/asset-balances.tsx
@@ -156,6 +156,8 @@ export const AssetBalancesTable: FunctionComponent<{
     [assetPagesData]
   );
 
+  const { watchListDenoms, toggleWatchAssetDenom } = useUserWatchlist();
+
   const filteredAssetsData = useMemo(() => {
     return assetsData
       .map((asset) => {
@@ -163,15 +165,20 @@ export const AssetBalancesTable: FunctionComponent<{
         if (hideDust && isDust) return null;
         return asset;
       })
-      .filter((asset) => asset !== null);
-  }, [assetsData, hideDust]);
+      .filter((asset): asset is AssetRow => asset !== null)
+      .sort((a, b) => {
+        const aIsFavorite = watchListDenoms.includes(a.coinDenom);
+        const bIsFavorite = watchListDenoms.includes(b.coinDenom);
+        if (aIsFavorite && !bIsFavorite) return -1;
+        if (!aIsFavorite && bIsFavorite) return 1;
+        return 0;
+      });
+  }, [assetsData, hideDust, watchListDenoms]);
 
   const hiddenDustCount = assetsData.length - filteredAssetsData.length;
 
   const noSearchResults = Boolean(searchQuery) && !filteredAssetsData.length;
 
-  const { watchListDenoms, toggleWatchAssetDenom } = useUserWatchlist();
-
   // Define columns
   const columns = useMemo(() => {
     const columnHelper = createColumnHelper<AssetRow>();
@@ -243,14 +250,15 @@ export const AssetBalancesTable: FunctionComponent<{
   /** Columns collapsed for screen size responsiveness. */
   const collapsedColumns = useMemo(() => {
     const collapsedColIds: string[] = [];
-    if (width < Breakpoint.lg) collapsedColIds.push("price");
-    if (width < Breakpoint.md) collapsedColIds.push("assetActions");
+    if (width < Breakpoint.lg) {
+      collapsedColIds.push("price");
+      collapsedColIds.push("assetActions");
+    }
     return columns.filter(({ id }) => id && !collapsedColIds.includes(id));
   }, [columns, width]);
 
   const table = useReactTable({
     data: filteredAssetsData,
-    // @ts-expect-error
     columns: collapsedColumns,
     manualSorting: true,
     manualFiltering: true,