From e6269acade041e2baf35f25cf5d3ca00a1d1b133 Mon Sep 17 00:00:00 2001 From: truemiller Date: Thu, 21 Nov 2024 18:00:38 +0000 Subject: [PATCH 1/3] refactor: update YourWalletPage to use updated types, contexts, hooks --- frontend/components/YourWalletPage/index.tsx | 113 +++++++++++++++---- 1 file changed, 88 insertions(+), 25 deletions(-) diff --git a/frontend/components/YourWalletPage/index.tsx b/frontend/components/YourWalletPage/index.tsx index e2486f04..8a6a1b2f 100644 --- a/frontend/components/YourWalletPage/index.tsx +++ b/frontend/components/YourWalletPage/index.tsx @@ -1,16 +1,28 @@ import { CloseOutlined } from '@ant-design/icons'; -import { Button, ConfigProvider, Flex, ThemeConfig, Typography } from 'antd'; +import { + Button, + ConfigProvider, + Flex, + Skeleton, + ThemeConfig, + Typography, +} from 'antd'; +import { isEmpty, isNil } from 'lodash'; import { useMemo } from 'react'; import { AddressLink } from '@/components/AddressLink'; import { CardTitle } from '@/components/Card/CardTitle'; import { InfoBreakdownList } from '@/components/InfoBreakdown'; import { CardFlex } from '@/components/styled/CardFlex'; +import { getNativeTokenSymbol } from '@/config/tokens'; +import { ChainId } from '@/enums/Chain'; import { Pages } from '@/enums/Pages'; +import { TokenSymbol } from '@/enums/Token'; import { useBalanceContext } from '@/hooks/useBalanceContext'; import { usePageState } from '@/hooks/usePageState'; -import { useServices } from '@/hooks/useServices'; -import { useWallet } from '@/hooks/useWallet'; +import { useMasterWalletContext } from '@/hooks/useWallet'; +import { type Address } from '@/types/Address'; +import { Optional } from '@/types/Util'; import { balanceFormat } from '@/utils/numberFormatters'; import { Container, infoBreakdownParentStyle } from './styles'; @@ -25,10 +37,15 @@ const yourWalletTheme: ThemeConfig = { }, }; -const YourWalletTitle = () => ; +const YourWalletTitle = () => ; const Address = () => { - const { masterSafeAddress } = useWallet(); + const { masterSafes } = useMasterWalletContext(); + + if (!masterSafes) return ; + if (isEmpty(masterSafes)) return null; + + const masterSafeAddress = masterSafes[0].address; // TODO: handle multiple safes in future return ( @@ -48,29 +65,37 @@ const Address = () => { }; const OlasBalance = () => { - const { masterSafeBalance: safeBalance, totalOlasStakedBalance } = - useBalanceContext(); + const { masterSafes } = useMasterWalletContext(); + const { walletBalances, totalStakedOlasBalance } = useBalanceContext(); + + const masterSafeOlasBalance: number = walletBalances + ?.filter((balance) => balance.symbol === TokenSymbol.OLAS) + .reduce((acc, balance) => acc + balance.balance, 0); + const olasBalances = useMemo(() => { return [ { title: 'Available', - value: balanceFormat(safeBalance?.OLAS ?? 0, 2), + value: balanceFormat(masterSafeOlasBalance ?? 0, 2), }, { title: 'Staked', - value: balanceFormat(totalOlasStakedBalance ?? 0, 2), + value: balanceFormat(totalStakedOlasBalance ?? 0, 2), }, ]; - }, [safeBalance?.OLAS, totalOlasStakedBalance]); + }, [masterSafeOlasBalance, totalStakedOlasBalance]); + + if (!masterSafes) return ; + if (isEmpty(masterSafes)) return null; return ( - OLAS + {TokenSymbol.OLAS} ({ left: item.title, leftClassName: 'text-light', - right: `${item.value} OLAS`, + right: `${item.value} ${TokenSymbol.OLAS}`, }))} parentStyle={infoBreakdownParentStyle} /> @@ -78,17 +103,38 @@ const OlasBalance = () => { ); }; -const XdaiBalance = () => { - const { masterSafeBalance: safeBalance } = useBalanceContext(); +const MasterSafeNativeBalance = () => { + const { masterSafes, masterEoa } = useMasterWalletContext(); + const { walletBalances } = useBalanceContext(); + + const masterSafeNativeBalance: Optional = useMemo(() => { + if (isNil(masterSafes)) return; + if (isNil(walletBalances)) return; + + if (isEmpty(masterSafes)) return 0; + if (isEmpty(walletBalances)) return 0; + + const masterSafe = masterSafes[0]; // TODO: handle multiple safes in future + + return walletBalances + .filter( + ({ walletAddress }) => + walletAddress === masterSafe.address || // TODO: handle multiple safes in future + walletAddress === masterEoa?.address, + ) + .reduce((acc, balance) => acc + balance.balance, 0); + }, [masterEoa?.address, masterSafes, walletBalances]); + + const nativeTokenSymbol = getNativeTokenSymbol(ChainId.Gnosis); return ( XDAI, + left: {getNativeTokenSymbol(ChainId.Gnosis)}, leftClassName: 'text-light', - right: `${balanceFormat(safeBalance?.ETH, 2)} XDAI`, + right: `${balanceFormat(masterSafeNativeBalance, 2)} ${nativeTokenSymbol}`, }, ]} parentStyle={infoBreakdownParentStyle} @@ -97,9 +143,27 @@ const XdaiBalance = () => { ); }; -const Signer = () => { - const { masterEoaAddress } = useWallet(); - const { masterEoaBalance: eoaBalance } = useBalanceContext(); +const MasterEoaSignerNativeBalance = () => { + const { masterEoa } = useMasterWalletContext(); + const { walletBalances } = useBalanceContext(); + + const masterEoaBalance = useMemo(() => { + if (isNil(masterEoa)) return; + if (isNil(walletBalances)) return; + + return walletBalances + .filter( + ( + { walletAddress, isNative }, // TODO: support chainId grouping, for multi-agent + ) => walletAddress === masterEoa.address && isNative, + ) + .reduce((acc, balance) => acc + balance.balance, 0); + }, [masterEoa, walletBalances]); + + const nativeTokenSymbol = useMemo( + () => getNativeTokenSymbol(ChainId.Gnosis), + [], + ); // TODO: support multi chain return ( @@ -109,11 +173,11 @@ const Signer = () => { left: ( ), leftClassName: 'text-light', - right: `${balanceFormat(eoaBalance?.ETH, 2)} XDAI`, + right: `${balanceFormat(masterEoaBalance, 2)} ${nativeTokenSymbol}`, }, ]} parentStyle={infoBreakdownParentStyle} @@ -124,7 +188,6 @@ const Signer = () => { export const YourWalletPage = () => { const { goto } = usePageState(); - const { service } = useServices(); return ( @@ -142,9 +205,9 @@ export const YourWalletPage = () => {
- - - {service && } + + + From 2af6dc125573764aede389599dff55ec258c8b11 Mon Sep 17 00:00:00 2001 From: truemiller Date: Thu, 21 Nov 2024 18:04:43 +0000 Subject: [PATCH 2/3] refactor: specify type for masterEoaBalance in YourWalletPage component --- frontend/components/YourWalletPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/YourWalletPage/index.tsx b/frontend/components/YourWalletPage/index.tsx index 8a6a1b2f..2b67d6cf 100644 --- a/frontend/components/YourWalletPage/index.tsx +++ b/frontend/components/YourWalletPage/index.tsx @@ -147,7 +147,7 @@ const MasterEoaSignerNativeBalance = () => { const { masterEoa } = useMasterWalletContext(); const { walletBalances } = useBalanceContext(); - const masterEoaBalance = useMemo(() => { + const masterEoaBalance: Optional = useMemo(() => { if (isNil(masterEoa)) return; if (isNil(walletBalances)) return; From 2ae151a166162410f3125987ed635b270d12bfc5 Mon Sep 17 00:00:00 2001 From: truemiller Date: Thu, 21 Nov 2024 18:55:35 +0000 Subject: [PATCH 3/3] fix: review comments --- frontend/components/YourWalletPage/index.tsx | 23 +++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/components/YourWalletPage/index.tsx b/frontend/components/YourWalletPage/index.tsx index 2b67d6cf..d63aa58c 100644 --- a/frontend/components/YourWalletPage/index.tsx +++ b/frontend/components/YourWalletPage/index.tsx @@ -18,7 +18,10 @@ import { getNativeTokenSymbol } from '@/config/tokens'; import { ChainId } from '@/enums/Chain'; import { Pages } from '@/enums/Pages'; import { TokenSymbol } from '@/enums/Token'; -import { useBalanceContext } from '@/hooks/useBalanceContext'; +import { + useBalanceContext, + useMasterBalances, +} from '@/hooks/useBalanceContext'; import { usePageState } from '@/hooks/usePageState'; import { useMasterWalletContext } from '@/hooks/useWallet'; import { type Address } from '@/types/Address'; @@ -105,25 +108,25 @@ const OlasBalance = () => { const MasterSafeNativeBalance = () => { const { masterSafes, masterEoa } = useMasterWalletContext(); - const { walletBalances } = useBalanceContext(); + const { masterWalletBalances } = useMasterBalances(); const masterSafeNativeBalance: Optional = useMemo(() => { if (isNil(masterSafes)) return; - if (isNil(walletBalances)) return; + if (isNil(masterWalletBalances)) return; if (isEmpty(masterSafes)) return 0; - if (isEmpty(walletBalances)) return 0; + if (isEmpty(masterWalletBalances)) return 0; const masterSafe = masterSafes[0]; // TODO: handle multiple safes in future - return walletBalances + return masterWalletBalances .filter( ({ walletAddress }) => walletAddress === masterSafe.address || // TODO: handle multiple safes in future walletAddress === masterEoa?.address, ) .reduce((acc, balance) => acc + balance.balance, 0); - }, [masterEoa?.address, masterSafes, walletBalances]); + }, [masterEoa?.address, masterSafes, masterWalletBalances]); const nativeTokenSymbol = getNativeTokenSymbol(ChainId.Gnosis); @@ -145,20 +148,20 @@ const MasterSafeNativeBalance = () => { const MasterEoaSignerNativeBalance = () => { const { masterEoa } = useMasterWalletContext(); - const { walletBalances } = useBalanceContext(); + const { masterWalletBalances } = useMasterBalances(); const masterEoaBalance: Optional = useMemo(() => { if (isNil(masterEoa)) return; - if (isNil(walletBalances)) return; + if (isNil(masterWalletBalances)) return; - return walletBalances + return masterWalletBalances .filter( ( { walletAddress, isNative }, // TODO: support chainId grouping, for multi-agent ) => walletAddress === masterEoa.address && isNative, ) .reduce((acc, balance) => acc + balance.balance, 0); - }, [masterEoa, walletBalances]); + }, [masterEoa, masterWalletBalances]); const nativeTokenSymbol = useMemo( () => getNativeTokenSymbol(ChainId.Gnosis),