Fix account balance discrepancies

src/components/change-wallet/AddressRow.tsx

@@ -22,10 +22,8 @@ import { EditWalletContextMenuActions } from '@/screens/ChangeWalletSheet';
 import { toChecksumAddress } from '@/handlers/web3';
 import { IS_IOS, IS_ANDROID } from '@/env';
 import { ContextMenu } from '../context-menu';
-import { convertAmountToNativeDisplay } from '@/helpers/utilities';
-import { useSelector } from 'react-redux';
-import { AppState } from '@/redux/store';
 import { useForegroundColor } from '@/design-system';
+import { useAssetsBalanceForAddress } from '@/hooks/useAssetsBalanceForAddress';
 
 const maxAccountLabelWidth = deviceUtils.dimensions.width - 88;
 const NOOP = () => undefined;
@@ -121,22 +119,25 @@ interface AddressRowProps {
 }
 
 export default function AddressRow({ contextMenuActions, data, editMode, onPress }: AddressRowProps) {
-  const nativeCurrency = useSelector((state: AppState) => state.settings.nativeCurrency);
   const notificationsEnabled = useExperimentalFlag(NOTIFICATIONS);
 
-  const { address, balance, color: accountColor, ens, image: accountImage, isSelected, isReadOnly, isLedger, label, walletId } = data;
+  const { address, color: accountColor, ens, image: accountImage, isSelected, isReadOnly, isLedger, label, walletId } = data;
+
+  const { display, isLoading } = useAssetsBalanceForAddress(address);
 
   const { colors, isDarkMode } = useTheme();
 
   const labelQuaternary = useForegroundColor('labelQuaternary');
 
-  const cleanedUpBalance = useMemo(() => {
-    if (balance) {
-      return convertAmountToNativeDisplay(balance, nativeCurrency);
+  const balanceOrNoBalance = useMemo(() => {
+    if (display) {
+      return display;
+    } else if (isLoading) {
+      return lang.t('wallet.change_wallet.loading');
     } else {
       return lang.t('wallet.change_wallet.no_balance');
     }
-  }, [balance, nativeCurrency]);
+  }, [isLoading, display]);
 
   const cleanedUpLabel = useMemo(() => removeFirstEmojiFromString(label), [label]);
 
@@ -254,7 +255,7 @@ export default function AddressRow({ contextMenuActions, data, editMode, onPress
               <StyledTruncatedText color={colors.dark} testID={`change-wallet-address-row-label-${walletName}`}>
                 {walletName}
               </StyledTruncatedText>
-              <StyledBottomRowText color={labelQuaternary}>{cleanedUpBalance}</StyledBottomRowText>
+              <StyledBottomRowText color={labelQuaternary}>{balanceOrNoBalance}</StyledBottomRowText>
             </ColumnWithMargins>
           </Row>
           <Column style={sx.rightContent}>

src/components/contacts/ContactRow.js

@@ -17,6 +17,7 @@ import { margin } from '@/styles';
 import { addressHashedColorIndex, addressHashedEmoji } from '@/utils/profileUtils';
 import * as i18n from '@/languages';
 import { convertAmountToNativeDisplay } from '@/helpers/utilities';
+import { useAssetsBalanceForAddress } from '@/hooks/useAssetsBalanceForAddress';
 
 const ContactAddress = styled(TruncatedAddress).attrs(({ theme: { colors }, lite }) => ({
   align: 'left',
@@ -58,17 +59,20 @@ const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props },
   const profilesEnabled = useExperimentalFlag(PROFILES);
   const { width: deviceWidth } = useDimensions();
   const { onAddOrUpdateContacts } = useContacts();
-  const { nativeCurrency } = useAccountSettings();
   const { colors } = useTheme();
-  const { accountType, balance, ens, image, label, network, onPress, showcaseItem, testID } = props;
+  const { accountType, ens, image, label, network, onPress, showcaseItem, testID } = props;
+
+  const { display, isLoading } = useAssetsBalanceForAddress(address);
 
   const cleanedUpBalance = useMemo(() => {
-    if (balance) {
-      return convertAmountToNativeDisplay(balance, nativeCurrency);
+    if (display) {
+      return display;
+    } else if (isLoading) {
+      return i18n.t(i18n.l.wallet.change_wallet.loading);
     } else {
       return i18n.t(i18n.l.wallet.change_wallet.no_balance);
     }
-  }, [balance, nativeCurrency]);
+  }, [display, isLoading]);
 
   // show avatar for contact rows that are accounts, not contacts
   const avatar = accountType !== 'contacts' ? returnStringFirstEmoji(label) || profileUtils.addressHashedEmoji(address) : null;

src/helpers/buildWalletSections.tsx

@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect';
 import { buildBriefCoinsList, buildBriefUniqueTokenList } from './assets';
-import { add, convertAmountToNativeDisplay } from './utilities';
 import { NativeCurrencyKey, ParsedAddressAsset } from '@/entities';
 import { queryClient } from '@/react-query';
 import { positionsQueryKey } from '@/resources/defi/PositionsQuery';
@@ -39,6 +38,8 @@ const EMPTY_WALLET_CONTENT = [
 const ONLY_NFTS_CONTENT = [{ type: 'ETH_CARD', uid: 'eth-card' }];
 
 const sortedAssetsSelector = (state: any) => state.sortedAssets;
+const accountBalanceSelector = (state: any) => state.accountBalance;
+const isLoadingBalanceSelector = (state: any) => state.isLoadingBalance;
 const hiddenCoinsSelector = (state: any) => state.hiddenCoins;
 const isCoinListEditedSelector = (state: any) => state.isCoinListEdited;
 const isLoadingUserAssetsSelector = (state: any) => state.isLoadingUserAssets;
@@ -105,23 +106,15 @@ const withPositionsSection = (isLoadingUserAssets: boolean) => {
 const withBriefBalanceSection = (
   sortedAssets: ParsedAddressAsset[],
   isLoadingUserAssets: boolean,
+  accountBalance: string | undefined,
+  isLoadingBalance: boolean,
   nativeCurrency: NativeCurrencyKey,
   isCoinListEdited: boolean,
   pinnedCoins: any,
   hiddenCoins: any,
-  collectibles: any,
-  nftSort: string
+  collectibles: any
 ) => {
-  const { briefAssets, totalBalancesValue } = buildBriefCoinsList(sortedAssets, nativeCurrency, isCoinListEdited, pinnedCoins, hiddenCoins);
-
-  const { accountAddress: address } = store.getState().settings;
-  const positionsObj: RainbowPositions | undefined = queryClient.getQueryData(positionsQueryKey({ address, currency: nativeCurrency }));
-
-  const positionsTotal = positionsObj?.totals?.total?.amount || '0';
-
-  const totalBalanceWithPositionsValue = add(totalBalancesValue, positionsTotal);
-
-  const totalValue = convertAmountToNativeDisplay(totalBalanceWithPositionsValue, nativeCurrency);
+  const { briefAssets } = buildBriefCoinsList(sortedAssets, nativeCurrency, isCoinListEdited, pinnedCoins, hiddenCoins);
 
   const hasTokens = briefAssets?.length;
   const hasNFTs = collectibles?.length;
@@ -133,8 +126,8 @@ const withBriefBalanceSection = (
     {
       type: 'PROFILE_STICKY_HEADER',
       uid: 'assets-profile-header-compact',
-      value: totalValue,
-      isLoadingUserAssets,
+      value: accountBalance,
+      isLoadingUserAssets: isLoadingBalance,
     },
     {
       type: 'PROFILE_AVATAR_ROW_SPACE_BEFORE',
@@ -162,7 +155,7 @@ const withBriefBalanceSection = (
           {
             type: 'PROFILE_BALANCE_ROW',
             uid: 'profile-balance',
-            value: totalValue,
+            value: accountBalance,
           },
           {
             type: 'PROFILE_BALANCE_ROW_SPACE_AFTER',
@@ -172,13 +165,13 @@ const withBriefBalanceSection = (
     {
       type: 'PROFILE_ACTION_BUTTONS_ROW',
       uid: 'profile-action-buttons',
-      value: totalValue,
+      value: accountBalance,
     },
     hasTokens
       ? {
           type: 'PROFILE_ACTION_BUTTONS_ROW_SPACE_AFTER',
           uid: 'profile-action-buttons-space-after',
-          value: totalValue,
+          value: accountBalance,
         }
       : { type: 'BIG_EMPTY_WALLET_SPACER', uid: 'big-empty-wallet-spacer-1' },
   ];
@@ -226,6 +219,8 @@ const briefBalanceSectionSelector = createSelector(
   [
     sortedAssetsSelector,
     isLoadingUserAssetsSelector,
+    accountBalanceSelector,
+    isLoadingBalanceSelector,
     nativeCurrencySelector,
     isCoinListEditedSelector,
     pinnedCoinsSelector,

src/hooks/useAssetsBalanceForAddress.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { Address } from 'viem';
+
+import { selectUserAssetsBalance, selectorFilterByUserChains } from '@/__swaps__/screens/Swap/resources/_selectors/assets';
+import { useUserAssets } from '@/__swaps__/screens/Swap/resources/assets';
+import { EthereumAddress, ParsedAddressAsset } from '@/entities';
+import useAccountSettings from './useAccountSettings';
+import { convertAmountToNativeDisplay } from '@/helpers/utilities';
+import useCoinListEditOptions from './useCoinListEditOptions';
+
+export function useAssetsBalanceForAddress(address: EthereumAddress) {
+  const { nativeCurrency } = useAccountSettings();
+  const { hiddenCoinsObj: hidden } = useCoinListEditOptions();
+  const isHidden = useCallback(
+    (asset: ParsedAddressAsset) => {
+      return !!hidden[asset.address];
+    },
+    [hidden]
+  );
+
+  const { data: totalAssetsBalance, isLoading } = useUserAssets(
+    {
+      address: address as Address,
+      currency: nativeCurrency,
+    },
+    {
+      select: data =>
+        selectorFilterByUserChains({
+          data,
+          selector: data => selectUserAssetsBalance(data, asset => isHidden(asset as unknown as ParsedAddressAsset)),
+        }),
+    }
+  );
+
+  return {
+    amount: totalAssetsBalance,
+    display: totalAssetsBalance ? convertAmountToNativeDisplay(totalAssetsBalance, nativeCurrency) : undefined,
+    isLoading,
+  };
+}

src/hooks/useUserAssetsBalance.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { add, convertAmountToNativeDisplay } from '@/helpers/utilities';
+import useAccountSettings from './useAccountSettings';
+import { userAssetsStore } from '@/state/assets/userAssets';
+
+export function useUserAssetsBalance() {
+  const { nativeCurrency } = useAccountSettings();
+  const getUserAssets = userAssetsStore(state => state.getUserAssets);
+
+  const amount = useMemo(() => {
+    return getUserAssets().reduce((prev, curr) => add(prev, curr.balance.amount), '0');
+  }, [getUserAssets]);
+
+  return {
+    amount,
+    display: convertAmountToNativeDisplay(amount, nativeCurrency),
+  };
+}

src/hooks/useWalletSectionsData.ts

@@ -11,6 +11,7 @@ import { buildBriefWalletSectionsSelector } from '@/helpers/buildWalletSections'
 import { useSortedUserAssets } from '@/resources/assets/useSortedUserAssets';
 import { useLegacyNFTs } from '@/resources/nfts';
 import useNftSort from './useNFTsSortBy';
+import { useAssetsBalanceForAddress } from './useAssetsBalanceForAddress';
 
 export default function useWalletSectionsData({
   type,
@@ -27,6 +28,9 @@ export default function useWalletSectionsData({
   } = useLegacyNFTs({
     address: accountAddress,
   });
+
+  const { display: accountBalance, isLoading: isLoadingBalance } = useAssetsBalanceForAddress(accountAddress);
+
   const { showcaseTokens } = useShowcaseTokens();
   const { hiddenTokens } = useHiddenTokens();
   const { isReadOnlyWallet } = useWallets();
@@ -48,6 +52,8 @@ export default function useWalletSectionsData({
       pinnedCoins,
       sendableUniqueTokens,
       sortedAssets,
+      accountBalance,
+      isLoadingBalance,
       // @ts-expect-error ts-migrate(2698) FIXME: Spread types may only be created from object types... Remove this comment to see the full error message
       ...isWalletEthZero,
       hiddenTokens,
@@ -65,6 +71,7 @@ export default function useWalletSectionsData({
       hasNFTs,
       isEmpty,
       isLoadingUserAssets,
+      isLoadingBalance,
       isWalletEthZero,
       briefSectionsData,
     };
@@ -78,6 +85,8 @@ export default function useWalletSectionsData({
     pinnedCoins,
     sendableUniqueTokens,
     sortedAssets,
+    accountBalance,
+    isLoadingBalance,
     isWalletEthZero,
     hiddenTokens,
     isReadOnlyWallet,

src/languages/en_US.json

@@ -2482,6 +2482,7 @@
       "buy": "Buy",
       "change_wallet": {
         "no_balance": "No Balance",
+        "loading": "Loading balance",
         "balance_eth": "%{balanceEth} ETH",
         "watching": "Watching",
         "ledger": "Ledger"

src/screens/WalletScreen/index.tsx

@@ -74,7 +74,7 @@ const WalletScreen: React.FC<any> = ({ navigation, route }) => {
   }, [currentNetwork, revertToMainnet]);
 
   const walletReady = useSelector(({ appState: { walletReady } }: AppState) => walletReady);
-  const { isWalletEthZero, isLoadingUserAssets, briefSectionsData: walletBriefSectionsData } = useWalletSectionsData();
+  const { isWalletEthZero, isLoadingUserAssets, isLoadingBalance, briefSectionsData: walletBriefSectionsData } = useWalletSectionsData();
 
   useEffect(() => {
     // This is the fix for Android wallet creation problem.
@@ -86,7 +86,7 @@ const WalletScreen: React.FC<any> = ({ navigation, route }) => {
     if (isWelcomeScreen) {
       removeFirst();
     }
-  }, [dangerouslyGetState, removeFirst]);
+  }, [dangerouslyGetParent, dangerouslyGetState, removeFirst]);
 
   useEffect(() => {
     const initializeAndSetParams = async () => {
@@ -132,8 +132,8 @@ const WalletScreen: React.FC<any> = ({ navigation, route }) => {
           {/* @ts-expect-error JavaScript component */}
           <AssetList
             accentColor={highContrastAccentColor}
-            disableRefreshControl={isLoadingUserAssetsAndAddress}
-            isLoading={IS_ANDROID && isLoadingUserAssetsAndAddress}
+            disableRefreshControl={isLoadingUserAssetsAndAddress || isLoadingBalance}
+            isLoading={IS_ANDROID && (isLoadingUserAssetsAndAddress || isLoadingBalance)}
             isWalletEthZero={isWalletEthZero}
             network={currentNetwork}
             walletBriefSectionsData={walletBriefSectionsData}