feat(suite): display skeleton on token fiat values in account sidebar when fiat rates are loading

Author: vojtatranta

packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItem.tsx

@@ -42,6 +42,7 @@ interface AccountItemProps {
     isGroup?: boolean;
     tokens?: Account['tokens'];
     dataTestKey?: string;
+    isFiatLoading?: boolean;
     onClick?: () => void;
 }
 
@@ -58,6 +59,7 @@ export const AccountItem = forwardRef(
             customFiatValue,
             isGroup,
             dataTestKey,
+            isFiatLoading,
             onClick,
         }: AccountItemProps,
         ref: Ref<HTMLDivElement>,
@@ -90,6 +92,7 @@ export const AccountItem = forwardRef(
 
         const content = (
             <AccountRow
+                isFiatLoading={Boolean(isFiatLoading)}
                 isSelected={isSelected}
                 isGroup={isGroup}
                 isGroupSelected={isGroupSelected}

packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx

@@ -46,6 +46,7 @@ type ItemContentProps = {
     index?: number;
     formattedBalance: string;
     dataTestKey?: string;
+    isFiatLoading?: boolean;
 };
 
 const FiatValueRenderComponent = ({ value }: { value: JSX.Element | null }) => {
@@ -65,6 +66,7 @@ export const AccountItemContent = ({
     index,
     formattedBalance,
     dataTestKey,
+    isFiatLoading,
 }: ItemContentProps) => {
     const { FiatAmountFormatter } = useFormatters();
     const localCurrency = useSelector(selectLocalCurrency);
@@ -91,12 +93,16 @@ export const AccountItemContent = ({
                 </AccountLabelContainer>
                 {customFiatValue && !isTestnet(symbol) ? (
                     <HiddenPlaceholder>
-                        <FiatAmountFormatter
-                            value={customFiatValue}
-                            currency={localCurrency}
-                            minimumFractionDigits={0}
-                            maximumFractionDigits={0}
-                        />
+                        {isFiatLoading ? (
+                            <SkeletonRectangle animate={shouldAnimate} />
+                        ) : (
+                            <FiatAmountFormatter
+                                value={customFiatValue}
+                                currency={localCurrency}
+                                minimumFractionDigits={0}
+                                maximumFractionDigits={0}
+                            />
+                        )}
                     </HiddenPlaceholder>
                 ) : (
                     <FiatValue

packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountRow.tsx

@@ -25,6 +25,7 @@ type AccountRowProps = {
     accountType: AccountType;
     index?: number;
     formattedBalance: string;
+    isFiatLoading?: boolean;
 };
 
 const Wrapper = styled(NavigationItemBase)<{
@@ -61,6 +62,7 @@ export const AccountRow = forwardRef<HTMLDivElement, AccountRowProps>(
             accountType,
             index,
             formattedBalance,
+            isFiatLoading,
         },
         ref,
     ) => (
@@ -86,6 +88,7 @@ export const AccountRow = forwardRef<HTMLDivElement, AccountRowProps>(
                 index={index}
                 formattedBalance={formattedBalance}
                 dataTestKey={dataTestKey}
+                isFiatLoading={Boolean(isFiatLoading)}
             />
         </Wrapper>
     ),

packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItemsGroup.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 import { selectCurrentFiatRates } from '@suite-common/wallet-core';
 import {
+    areTokenFiatRatesLoading,
     getAccountTokensFiatBalance,
     getAccountTotalStakingBalance,
 } from '@suite-common/wallet-utils';
@@ -61,7 +62,10 @@ export const AccountItemsGroup = ({
     const localCurrency = useSelector(selectLocalCurrency);
     const rates = useSelector(selectCurrentFiatRates);
 
-    const tokensFiatBalance = getAccountTokensFiatBalance(account, localCurrency, rates, tokens);
+    const isFiatLoading = areTokenFiatRatesLoading(account, localCurrency, rates ?? {});
+    const tokensFiatBalance = isFiatLoading
+        ? (0).toFixed()
+        : getAccountTokensFiatBalance(account, localCurrency, rates, tokens);
 
     const tokensRoutes = ['wallet-tokens', 'wallet-tokens-hidden'];
 
@@ -104,6 +108,7 @@ export const AccountItemsGroup = ({
                         customFiatValue={tokensFiatBalance}
                         tokens={tokens}
                         dataTestKey={`${dataTestKey}/tokens`}
+                        isFiatLoading={isFiatLoading}
                     />
                 )}
             </Column>

suite-common/wallet-utils/src/accountUtils.ts

@@ -577,33 +577,42 @@ export const enhanceHistory = ({
     txids,
 });
 
-export const getAccountTokensFiatBalance = (
+export const areTokenFiatRatesLoading = (
     account: Account,
     localCurrency: string,
-    rates?: RatesByKey,
-    tokens?: Account['tokens'],
-) => {
-    let totalBalance = new BigNumber(0);
-
-    // sum fiat value of all tokens
-    tokens?.forEach(t => {
+    rates: RatesByKey,
+) =>
+    (account.tokens ?? []).some(token => {
         const tokenFiatRateKey = getFiatRateKey(
             account.symbol,
             localCurrency as FiatCurrencyCode,
-            t.contract as TokenAddress,
+            token.contract as TokenAddress,
         );
 
-        const tokenFiatRate = rates?.[tokenFiatRateKey];
-        if (tokenFiatRate?.rate && t.balance) {
-            const tokenBalance = toFiatCurrency(t.balance, tokenFiatRate.rate, 2);
-            if (tokenBalance) {
-                totalBalance = totalBalance.plus(tokenBalance);
-            }
-        }
+        return rates?.[tokenFiatRateKey]?.isLoading;
     });
 
-    return totalBalance.toFixed();
-};
+export const getAccountTokensFiatBalance = (
+    account: Account,
+    localCurrency: string,
+    rates?: RatesByKey,
+    tokens?: Account['tokens'],
+) =>
+    (tokens ?? [])
+        .reduce((total, token) => {
+            const tokenFiatRateKey = getFiatRateKey(
+                account.symbol,
+                localCurrency as FiatCurrencyCode,
+                token.contract as TokenAddress,
+            );
+
+            const tokenFiatRate = rates?.[tokenFiatRateKey];
+
+            return tokenFiatRate?.rate && token.balance
+                ? total.plus(toFiatCurrency(token.balance, tokenFiatRate.rate, 2) ?? 0)
+                : total;
+        }, new BigNumber(0))
+        .toFixed();
 
 export const getAssetTokensFiatBalance = (
     accounts: Account[],