feat(suite): added reusable hook for total portfolio balance

trezor · Dec 27, 2024 · 214bfd0 · 214bfd0
1 parent d0f1208
commit 214bfd0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/packages/suite/src/hooks/wallet/useTotalFiatBalance.ts b/packages/suite/src/hooks/wallet/useTotalFiatBalance.ts
@@ -0,0 +1,28 @@
+import { FiatCurrencyCode } from '@suite-common/suite-config/src/fiat';
+import { Account, RatesByKey } from '@suite-common/wallet-types';
+import { getTotalFiatBalance } from '@suite-common/wallet-utils/src/accountUtils';
+
+import { useSelector } from 'src/hooks/suite';
+import { getTokens } from 'src/utils/wallet/tokenUtils';
+
+export const useTotalFiatBalance = (
+    accounts: Account[],
+    localCurrency: FiatCurrencyCode,
+    rates?: RatesByKey,
+) => {
+    const tokenDefinitions = useSelector(state => state.tokenDefinitions);
+    const deviceAccounts: Account[] = accounts.map(account => {
+        const coinDefinitions = tokenDefinitions?.[account.symbol]?.coin;
+        const tokens = getTokens(account.tokens ?? [], account.symbol, coinDefinitions);
+
+        return { ...account, tokens: tokens.shownWithBalance };
+    });
+
+    const totalFiatBalance = getTotalFiatBalance({
+        deviceAccounts,
+        localCurrency,
+        rates,
+    }).toString();
+
+    return totalFiatBalance;
+};
diff --git a/packages/suite/src/views/dashboard/PortfolioCard/PortfolioCard.tsx b/packages/suite/src/views/dashboard/PortfolioCard/PortfolioCard.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 
 import { Dropdown, Card, Tooltip, Column } from '@trezor/components';
 import { spacings } from '@trezor/theme';
-import { getTotalFiatBalance } from '@suite-common/wallet-utils';
 import { selectCurrentFiatRates } from '@suite-common/wallet-core';
 import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
 
@@ -15,8 +14,7 @@ import { useFastAccounts } from 'src/hooks/wallet';
 import { goto } from 'src/actions/suite/routerActions';
 import { setFlag } from 'src/actions/suite/suiteActions';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
-import { getTokens } from 'src/utils/wallet/tokenUtils';
-import { Account } from 'src/types/wallet';
+import { useTotalFiatBalance } from 'src/hooks/wallet/useTotalFiatBalance';
 
 import { PortfolioCardHeader } from './PortfolioCardHeader';
 import { PortfolioCardException } from './PortfolioCardException';
@@ -49,24 +47,8 @@ export const PortfolioCard = memo(() => {
     const dispatch = useDispatch();
     const { device } = useDevice();
 
-    const tokenDefinitions = useSelector(state => state.tokenDefinitions);
-    const deviceAccounts: Account[] = accounts.map(account => {
-        const coinDefinitions = tokenDefinitions?.[account.symbol]?.coin;
-        const tokens = getTokens({
-            tokens: account.tokens ?? [],
-            symbol: account.symbol,
-            tokenDefinitions: coinDefinitions,
-        });
-
-        return { ...account, tokens: tokens.shownWithBalance };
-    });
-
     const isDeviceEmpty = useMemo(() => accounts.every(a => a.empty), [accounts]);
-    const fiatAmount = getTotalFiatBalance({
-        deviceAccounts,
-        localCurrency,
-        rates: currentFiatRates,
-    }).toString();
+    const walletBalance = useTotalFiatBalance(accounts, localCurrency, currentFiatRates);
 
     const discoveryStatus = getDiscoveryStatus();
 
@@ -162,7 +144,7 @@ export const PortfolioCard = memo(() => {
                     <PortfolioCardHeader
                         showGraphControls={showGraphControls}
                         hideBorder={!body}
-                        fiatAmount={fiatAmount}
+                        fiatAmount={walletBalance}
                         localCurrency={localCurrency}
                         isWalletEmpty={isWalletEmpty}
                         isWalletLoading={isWalletLoading}

diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/WalletInstance.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/WalletInstance.tsx
@@ -8,7 +8,7 @@ import {
     createDiscoveryThunk,
 } from '@suite-common/wallet-core';
 import { Card, Icon, Tooltip, Row, Column, Text, Divider, Box } from '@trezor/components';
-import { getAllAccounts, getTotalFiatBalance } from '@suite-common/wallet-utils';
+import { getAllAccounts } from '@suite-common/wallet-utils';
 import { spacings, negativeSpacings } from '@trezor/theme';
 
 import { WalletLabeling, Translation, MetadataLabeling } from 'src/components/suite';
@@ -19,6 +19,7 @@ import { METADATA_LABELING } from 'src/actions/suite/constants';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { FiatHeader } from 'src/components/wallet/FiatHeader';
 import { redirectAfterWalletSelectedThunk } from 'src/actions/wallet/addWalletThunk';
+import { useTotalFiatBalance } from 'src/hooks/wallet/useTotalFiatBalance';
 
 import { useWalletLabeling } from '../../../../components/suite/labeling/WalletLabeling';
 import { EjectConfirmation, EjectConfirmationDisableViewOnly } from './EjectConfirmation';
@@ -55,11 +56,9 @@ export const WalletInstance = ({
     const { defaultAccountLabelString } = useWalletLabeling();
 
     const deviceAccounts = getAllAccounts(instance.state, accounts);
-    const instanceBalance = getTotalFiatBalance({
-        deviceAccounts,
-        localCurrency,
-        rates: currentFiatRates,
-    });
+
+    const walletBalance = useTotalFiatBalance(deviceAccounts, localCurrency, currentFiatRates);
+
     const isSelected = enabled && selected && !!discoveryProcess;
     const { walletLabel } = useSelector(state =>
         selectLabelingDataForWallet(state, instance.state),
@@ -174,7 +173,7 @@ export const WalletInstance = ({
                     </Text>
 
                     <FiatHeader
-                        amount={instanceBalance.toString()}
+                        amount={walletBalance}
                         size="medium"
                         localCurrency={localCurrency}
                     />