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

packages/web/components/table/asset-balances.tsx

@@ -156,22 +156,29 @@ export const AssetBalancesTable: FunctionComponent<{
     [assetPagesData]
   );
 
+  const { watchListDenoms, toggleWatchAssetDenom } = useUserWatchlist();
+
   const filteredAssetsData = useMemo(() => {
     return assetsData
       .map((asset) => {
         const isDust = asset?.usdValue?.toDec()?.lte(DUST_THRESHOLD);
         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,