From 53a4418ba6c91a5af577f88480815707857459ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?= Date: Mon, 29 Apr 2024 13:27:30 +0200 Subject: [PATCH 1/2] sort balances descending when first fetched, but keep sorting on subsequent renders/balance updates --- components/portfolio/CurrenciesTable.tsx | 114 +++++++++++++---------- lib/hooks/queries/useCurrencyBalances.ts | 17 +++- yarn.lock | 9 +- 3 files changed, 82 insertions(+), 58 deletions(-) diff --git a/components/portfolio/CurrenciesTable.tsx b/components/portfolio/CurrenciesTable.tsx index 541f31691..d104db4b9 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, + matchesCurrencyBalanceId, 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) => matchesCurrencyBalanceId(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..909c42bb2 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 matchesCurrencyBalanceId = ( + 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" From 9d9f182d75ea706288c1c58039389e98ed71dbb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?= Date: Mon, 29 Apr 2024 13:29:43 +0200 Subject: [PATCH 2/2] eqCurrencyBalanceId --- components/portfolio/CurrenciesTable.tsx | 4 ++-- lib/hooks/queries/useCurrencyBalances.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/portfolio/CurrenciesTable.tsx b/components/portfolio/CurrenciesTable.tsx index d104db4b9..22fee932d 100644 --- a/components/portfolio/CurrenciesTable.tsx +++ b/components/portfolio/CurrenciesTable.tsx @@ -5,7 +5,7 @@ import { useChainConstants } from "lib/hooks/queries/useChainConstants"; import { CurrencyBalance, currencyBalanceId, - matchesCurrencyBalanceId, + eqCurrencyBalanceId, useCurrencyBalances, } from "lib/hooks/queries/useCurrencyBalances"; import DepositButton from "./DepositButton"; @@ -145,7 +145,7 @@ const CurrenciesTable = ({ address }: { address: string }) => { const tableData: TableData[] | undefined = useMemo(() => { return sorting - ?.map((id) => balances?.find((b) => matchesCurrencyBalanceId(id, b))) + ?.map((id) => balances?.find((b) => eqCurrencyBalanceId(id, b))) .filter(isNotNull) .map((balance) => { const amount = diff --git a/lib/hooks/queries/useCurrencyBalances.ts b/lib/hooks/queries/useCurrencyBalances.ts index 909c42bb2..9c77f8e14 100644 --- a/lib/hooks/queries/useCurrencyBalances.ts +++ b/lib/hooks/queries/useCurrencyBalances.ts @@ -26,7 +26,7 @@ export const currencyBalanceId = ( ): CurrencyBalanceId => `${balance.sourceChain}-${balance.symbol}-${balance.chain}` as CurrencyBalanceId; -export const matchesCurrencyBalanceId = ( +export const eqCurrencyBalanceId = ( id: CurrencyBalanceId, balance: CurrencyBalance, ) => currencyBalanceId(balance) === id;