Sort balances descending when first fetched and keep

components/portfolio/CurrenciesTable.tsx

@@ -4,6 +4,8 @@ import { ZTG } from "lib/constants";
 import { useChainConstants } from "lib/hooks/queries/useChainConstants";
 import {
   CurrencyBalance,
+  currencyBalanceId,
+  eqCurrencyBalanceId,
   useCurrencyBalances,
 } from "lib/hooks/queries/useCurrencyBalances";
 import DepositButton from "./DepositButton";
@@ -15,6 +17,9 @@ import TransferButton from "./TransferButton";
 import { AssetId } from "@zeitgeistpm/sdk";
 import { convertDecimals } from "lib/util/convert-decimals";
 import { isWSX } from "lib/constants";
+import { useMemo } from "react";
+import { usePrevious } from "lib/hooks/usePrevious";
+import { isNotNull } from "@zeitgeistpm/utility/dist/null";
 
 const columns: TableColumn[] = [
   {
@@ -120,58 +125,71 @@ const MoveButton = ({
 };
 
 const CurrenciesTable = ({ address }: { address: string }) => {
-  const { data: allBalances } = useCurrencyBalances(address);
+  const { data: allBalances, isFetched } = useCurrencyBalances(address);
   const { data: constants } = useChainConstants();
+  const wasFetched = usePrevious(isFetched);
 
-  // filter WSX assets depending on client
-  const balances = isWSX
-    ? allBalances?.filter((b) => b.symbol === "WSX")
-    : allBalances?.filter((b) => b.symbol !== "WSX");
+  const balances = useMemo(() => {
+    return isWSX
+      ? allBalances?.filter((b) => b.symbol === "WSX")
+      : allBalances?.filter((b) => b.symbol !== "WSX");
+  }, [isWSX, allBalances]);
 
-  const tableData: TableData[] | undefined = balances
-    ?.sort((a, b) => b.balance.minus(a.balance).toNumber())
-    .map((balance) => {
-      const amount =
-        balance.chain === "Zeitgeist"
-          ? balance.balance
-          : convertDecimals(balance.balance, balance.decimals, 10);
-      return {
-        chain: (
-          <ImageAndText
-            name={balance.chain}
-            imagePath={CHAIN_IMAGES[balance.chain]}
-          />
-        ),
-        asset: (
-          <ImageAndText
-            name={balance.symbol}
-            imagePath={lookupAssetImagePath(
-              balance.foreignAssetId != null
-                ? {
-                    ForeignAsset: balance.foreignAssetId,
-                  }
-                : null,
-            )}
-          />
-        ),
-        balance: amount.div(ZTG).toFixed(3),
-        button: (
-          <div className="flex gap-3">
-            <MoveButton
-              chain={balance.chain}
-              sourceChain={balance.sourceChain}
-              token={balance.symbol}
-              foreignAssetId={balance.foreignAssetId ?? 0}
-              balance={amount}
-              nativeToken={constants?.tokenSymbol ?? ""}
-              existentialDeposit={balance.existentialDeposit}
-              allBalanceDetails={balances}
-              assetDecimals={balance.decimals}
+  // set sort order only once when data is first fetched
+  // sort by balance descending, but keep sorting on subsequent renders/balance updates.
+  const sorting = useMemo(() => {
+    return balances
+      ?.sort((a, b) => b.balance.minus(a.balance).toNumber())
+      .map((b) => currencyBalanceId(b));
+  }, [isFetched && !wasFetched]);
+
+  const tableData: TableData[] | undefined = useMemo(() => {
+    return sorting
+      ?.map((id) => balances?.find((b) => eqCurrencyBalanceId(id, b)))
+      .filter(isNotNull)
+      .map((balance) => {
+        const amount =
+          balance.chain === "Zeitgeist"
+            ? balance.balance
+            : convertDecimals(balance.balance, balance.decimals, 10);
+        return {
+          chain: (
+            <ImageAndText
+              name={balance.chain}
+              imagePath={CHAIN_IMAGES[balance.chain]}
+            />
+          ),
+          asset: (
+            <ImageAndText
+              name={balance.symbol}
+              imagePath={lookupAssetImagePath(
+                balance.foreignAssetId != null
+                  ? {
+                      ForeignAsset: balance.foreignAssetId,
+                    }
+                  : null,
+              )}
             />
-          </div>
-        ),
-      };
-    });
+          ),
+          balance: amount.div(ZTG).toFixed(3),
+          button: (
+            <div className="flex gap-3">
+              <MoveButton
+                chain={balance.chain}
+                sourceChain={balance.sourceChain}
+                token={balance.symbol}
+                foreignAssetId={balance.foreignAssetId ?? 0}
+                balance={amount}
+                nativeToken={constants?.tokenSymbol ?? ""}
+                existentialDeposit={balance.existentialDeposit}
+                allBalanceDetails={balances!}
+                assetDecimals={balance.decimals}
+              />
+            </div>
+          ),
+        };
+      });
+  }, [constants, balances, sorting]);
 
   return (
     <div>

lib/hooks/queries/useCurrencyBalances.ts

@@ -7,8 +7,7 @@ import { calculateFreeBalance } from "lib/util/calc-free-balance";
 import { useSdkv2 } from "../useSdkv2";
 import { useChainConstants } from "./useChainConstants";
 import { useForeignAssetBalances } from "./useForeignAssetBalances";
-
-export const currencyBalanceRootKey = "currency-balances";
+import Opaque from "ts-opaque";
 
 export type CurrencyBalance = {
   symbol: string;
@@ -20,6 +19,20 @@ export type CurrencyBalance = {
   decimals: number;
 };
 
+export type CurrencyBalanceId = Opaque<"CurrencyBalance.Id", string>;
+
+export const currencyBalanceId = (
+  balance: CurrencyBalance,
+): CurrencyBalanceId =>
+  `${balance.sourceChain}-${balance.symbol}-${balance.chain}` as CurrencyBalanceId;
+
+export const eqCurrencyBalanceId = (
+  id: CurrencyBalanceId,
+  balance: CurrencyBalance,
+) => currencyBalanceId(balance) === id;
+
+export const currencyBalanceRootKey = "currency-balances";
+
 export const useCurrencyBalances = (address: string) => {
   const [sdk, id] = useSdkv2();
   const { apis } = useCrossChainApis();

yarn.lock

@@ -3207,7 +3207,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@scure/base@npm:^1.1.1":
+"@scure/base@npm:^1.1.1, @scure/base@npm:~1.1.4":
   version: 1.1.6
   resolution: "@scure/base@npm:1.1.6"
   checksum: d6deaae91deba99e87939af9e55d80edba302674983f32bba57f942e22b1726a83c62dc50d8f4370a5d5d35a212dda167fb169f4b0d0c297488d8604608fc3d3
@@ -3228,13 +3228,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@scure/base@npm:~1.1.4":
-  version: 1.1.6
-  resolution: "@scure/base@npm:1.1.6"
-  checksum: d6deaae91deba99e87939af9e55d80edba302674983f32bba57f942e22b1726a83c62dc50d8f4370a5d5d35a212dda167fb169f4b0d0c297488d8604608fc3d3
-  languageName: node
-  linkType: hard
-
 "@scure/bip32@npm:1.3.1":
   version: 1.3.1
   resolution: "@scure/bip32@npm:1.3.1"