diff --git a/components/portfolio/CurrenciesTable.tsx b/components/portfolio/CurrenciesTable.tsx
index 541f31691..22fee932d 100644
--- a/components/portfolio/CurrenciesTable.tsx
+++ b/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: (
-
- ),
- asset: (
-
- ),
- balance: amount.div(ZTG).toFixed(3),
- button: (
-
- {
+ 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: (
+
+ ),
+ asset: (
+
-
- ),
- };
- });
+ ),
+ balance: amount.div(ZTG).toFixed(3),
+ button: (
+
+
+
+ ),
+ };
+ });
+ }, [constants, balances, sorting]);
return (
diff --git a/lib/hooks/queries/useCurrencyBalances.ts b/lib/hooks/queries/useCurrencyBalances.ts
index 87e4db47f..9c77f8e14 100644
--- a/lib/hooks/queries/useCurrencyBalances.ts
+++ b/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();
diff --git a/yarn.lock b/yarn.lock
index f563b8e18..b541d6717 100644
--- a/yarn.lock
+++ b/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"