Fix account balance discrepancies

src/__swaps__/screens/Swap/providers/swap-provider.tsx

@@ -300,24 +300,20 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
         }
       }
 
-      queryClient.invalidateQueries([
-        // old user assets invalidation (will cause a re-fetch)
-        {
-          queryKey: userAssetsQueryKey({
-            address: parameters.quote.from,
-            currency: nativeCurrency,
-            connectedToHardhat,
-          }),
-        },
-        // new swaps user assets invalidations
-        {
-          queryKey: swapsUserAssetsQueryKey({
-            address: parameters.quote.from as Address,
-            currency: nativeCurrency,
-            testnetMode: !!connectedToHardhat,
-          }),
-        },
-      ]);
+      queryClient.invalidateQueries(
+        userAssetsQueryKey({
+          address: parameters.quote.from,
+          currency: nativeCurrency,
+          connectedToHardhat,
+        })
+      );
+      queryClient.invalidateQueries(
+        swapsUserAssetsQueryKey({
+          address: parameters.quote.from as Address,
+          currency: nativeCurrency,
+          testnetMode: !!connectedToHardhat,
+        })
+      );
 
       swapsStore.getState().addRecentSwap(parameters.assetToBuy as ExtendedAnimatedAssetWithColors);
       clearCustomGasSettings(chainId);

src/components/DappBrowser/control-panel/ControlPanel.tsx

@@ -43,9 +43,8 @@ import { RouteProp, useRoute } from '@react-navigation/native';
 import { toHex } from 'viem';
 import { RainbowNetworks } from '@/networks';
 import * as i18n from '@/languages';
-import { convertAmountToNativeDisplay } from '@/helpers/utilities';
-import { useDispatch, useSelector } from 'react-redux';
-import store, { AppState } from '@/redux/store';
+import { useDispatch } from 'react-redux';
+import store from '@/redux/store';
 import { getDappHost } from '@/utils/connectedApps';
 import WebView from 'react-native-webview';
 import { Navigation, useNavigation } from '@/navigation';
@@ -64,6 +63,7 @@ import { getRemoteConfig } from '@/model/remoteConfig';
 import { SWAPS_V2, useExperimentalFlag } from '@/config';
 import { swapsStore } from '@/state/swaps/swapsStore';
 import { userAssetsStore } from '@/state/assets/userAssets';
+import { greaterThan } from '@/helpers/utilities';
 
 const PAGES = {
   HOME: 'home',
@@ -88,7 +88,6 @@ export const ControlPanel = () => {
   const {
     params: { activeTabRef },
   } = useRoute<RouteProp<ControlPanelParams, 'ControlPanel'>>();
-  const nativeCurrency = useSelector((state: AppState) => state.settings.nativeCurrency);
   const walletsWithBalancesAndNames = useWalletsWithBalancesAndNames();
   const activeTabUrl = useBrowserStore(state => state.getActiveTabUrl());
   const activeTabHost = getDappHost(activeTabUrl || '') || DEFAULT_TAB_URL;
@@ -140,33 +139,29 @@ export const ControlPanel = () => {
     const bluetoothWallets: ControlPanelMenuItemProps[] = [];
     const readOnlyWallets: ControlPanelMenuItemProps[] = [];
 
-    const accountBalances: Record<string, number> = {};
+    const accountBalances: Record<string, string> = {};
 
     Object.values(walletsWithBalancesAndNames).forEach(wallet => {
       wallet.addresses
         .filter(account => account.visible)
         .forEach(account => {
+          const balanceText = account.balances ? account.balances.totalBalanceDisplay : i18n.t(i18n.l.wallet.change_wallet.loading_balance);
+
           const item: ControlPanelMenuItemProps = {
             IconComponent: account.image ? (
               <ListAvatar url={account.image} />
             ) : (
               <ListEmojiAvatar address={account.address} color={account.color} label={account.label} />
             ),
             label: removeFirstEmojiFromString(account.label) || address(account.address, 6, 4),
-            secondaryLabel:
-              // eslint-disable-next-line no-nested-ternary
-              wallet.type === WalletTypes.readOnly
-                ? i18n.t(i18n.l.wallet.change_wallet.watching)
-                : account.balance
-                  ? convertAmountToNativeDisplay(account.balance, nativeCurrency)
-                  : i18n.t(i18n.l.wallet.change_wallet.no_balance),
+            secondaryLabel: wallet.type === WalletTypes.readOnly ? i18n.t(i18n.l.wallet.change_wallet.watching) : balanceText,
             uniqueId: account.address,
             color: colors.avatarBackgrounds[account.color],
             imageUrl: account.image || undefined,
             selected: account.address === currentAddress,
           };
 
-          accountBalances[account.address] = Number(account.balance);
+          accountBalances[account.address] = account.balances?.totalBalanceAmount;
 
           if ([WalletTypes.mnemonic, WalletTypes.seed, WalletTypes.privateKey].includes(wallet.type)) {
             sortedWallets.push(item);
@@ -178,13 +173,13 @@ export const ControlPanel = () => {
         });
     });
 
-    sortedWallets.sort((a, b) => accountBalances[b.uniqueId] - accountBalances[a.uniqueId]);
-    bluetoothWallets.sort((a, b) => accountBalances[b.uniqueId] - accountBalances[a.uniqueId]);
+    sortedWallets.sort((a, b) => (greaterThan(accountBalances[b.uniqueId], accountBalances[a.uniqueId]) ? 1 : -1));
+    bluetoothWallets.sort((a, b) => (greaterThan(accountBalances[b.uniqueId], accountBalances[a.uniqueId]) ? 1 : -1));
 
     const sortedItems = [...sortedWallets, ...bluetoothWallets, ...readOnlyWallets];
 
     return sortedItems;
-  }, [walletsWithBalancesAndNames, currentAddress, nativeCurrency]);
+  }, [walletsWithBalancesAndNames, currentAddress]);
 
   const { testnetsEnabled } = store.getState().settings;
 

src/components/asset-list/RecyclerAssetList2/core/RowRenderer.tsx

@@ -111,7 +111,7 @@ function rowRenderer(type: CellType, { uid }: { uid: string }, _: unknown, exten
         <ProfileRowWrapper>
           <ProfileBalanceRow
             totalValue={(data as AssetsHeaderExtraData).value}
-            isLoadingUserAssets={(data as AssetsHeaderExtraData).isLoadingUserAssets}
+            isLoadingBalance={(data as AssetsHeaderExtraData).isLoadingBalance}
           />
         </ProfileRowWrapper>
       );

src/components/asset-list/RecyclerAssetList2/core/ViewTypes.ts

@@ -54,9 +54,9 @@ export type AssetListHeaderExtraData = {
 };
 
 export type AssetsHeaderExtraData = {
-  type: CellType.PROFILE_STICKY_HEADER;
+  type: CellType.PROFILE_BALANCE_ROW;
   value: string;
-  isLoadingUserAssets: boolean;
+  isLoadingBalance: boolean;
 };
 export type CoinExtraData = { type: CellType.COIN; uniqueId: string };
 export type NFTExtraData = {

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileBalanceRow.tsx

@@ -4,13 +4,13 @@ import { Box, Heading } from '@/design-system';
 
 export const ProfileBalanceRowHeight = 24;
 
-export function ProfileBalanceRow({ totalValue, isLoadingUserAssets }: { totalValue: string; isLoadingUserAssets: boolean }) {
+export function ProfileBalanceRow({ totalValue, isLoadingBalance }: { totalValue: string; isLoadingBalance: boolean }) {
   const placeholderHeight = ProfileBalanceRowHeight;
   const placeholderWidth = 200;
 
   return (
     <>
-      {isLoadingUserAssets ? (
+      {isLoadingBalance ? (
         <Box height={{ custom: placeholderHeight }} width={{ custom: placeholderWidth }}>
           <Skeleton>
             <FakeText height={placeholderHeight} width={placeholderWidth} />

src/components/backup/useCreateBackup.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-promise-executor-return */
-import { useCallback, useState } from 'react';
-import { backupAllWalletsToCloud, getLocalBackupPassword, saveLocalBackupPassword } from '@/model/backup';
+import { useCallback, useMemo, useState } from 'react';
+import { backupAllWalletsToCloud, findLatestBackUp, getLocalBackupPassword, saveLocalBackupPassword } from '@/model/backup';
 import { useCloudBackups } from './CloudBackupProvider';
 import { cloudPlatform } from '@/utils/platform';
 import { analytics } from '@/analytics';
@@ -34,7 +34,8 @@ export const useCreateBackup = ({ walletId, navigateToRoute }: UseCreateBackupPr
 
   const { fetchBackups } = useCloudBackups();
   const walletCloudBackup = useWalletCloudBackup();
-  const { latestBackup, wallets } = useWallets();
+  const { wallets } = useWallets();
+  const latestBackup = useMemo(() => findLatestBackUp(wallets), [wallets]);
   const [loading, setLoading] = useState<useCreateBackupStateType>('none');
 
   const [password, setPassword] = useState('');

src/components/change-wallet/AddressRow.tsx

@@ -22,9 +22,6 @@ 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';
 
 const maxAccountLabelWidth = deviceUtils.dimensions.width - 88;
@@ -121,22 +118,15 @@ 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, balances, color: accountColor, ens, image: accountImage, isSelected, isReadOnly, isLedger, label, walletId } = data;
 
   const { colors, isDarkMode } = useTheme();
 
   const labelQuaternary = useForegroundColor('labelQuaternary');
 
-  const cleanedUpBalance = useMemo(() => {
-    if (balance) {
-      return convertAmountToNativeDisplay(balance, nativeCurrency);
-    } else {
-      return lang.t('wallet.change_wallet.no_balance');
-    }
-  }, [balance, nativeCurrency]);
+  const balanceText = balances ? balances.totalBalanceDisplay : lang.t('wallet.change_wallet.loading_balance');
 
   const cleanedUpLabel = useMemo(() => removeFirstEmojiFromString(label), [label]);
 
@@ -254,7 +244,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}>{balanceText}</StyledBottomRowText>
             </ColumnWithMargins>
           </Row>
           <Column style={sx.rightContent}>

src/components/contacts/ContactRow.js

@@ -11,12 +11,11 @@ import useExperimentalFlag, { PROFILES } from '@/config/experimentalHooks';
 import { fetchReverseRecord } from '@/handlers/ens';
 import { ENS_DOMAIN } from '@/helpers/ens';
 import { isENSAddressFormat, isValidDomainFormat } from '@/helpers/validators';
-import { useAccountSettings, useContacts, useDimensions, useENSAvatar } from '@/hooks';
+import { useContacts, useDimensions, useENSAvatar } from '@/hooks';
 import styled from '@/styled-thing';
 import { margin } from '@/styles';
 import { addressHashedColorIndex, addressHashedEmoji } from '@/utils/profileUtils';
 import * as i18n from '@/languages';
-import { convertAmountToNativeDisplay } from '@/helpers/utilities';
 
 const ContactAddress = styled(TruncatedAddress).attrs(({ theme: { colors }, lite }) => ({
   align: 'left',
@@ -58,17 +57,10 @@ 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, balances, ens, image, label, network, onPress, showcaseItem, testID } = props;
 
-  const cleanedUpBalance = useMemo(() => {
-    if (balance) {
-      return convertAmountToNativeDisplay(balance, nativeCurrency);
-    } else {
-      return i18n.t(i18n.l.wallet.change_wallet.no_balance);
-    }
-  }, [balance, nativeCurrency]);
+  const balanceText = balances ? balances.totalBalanceDisplay : i18n.t(i18n.l.wallet.change_wallet.loading_balance);
 
   // show avatar for contact rows that are accounts, not contacts
   const avatar = accountType !== 'contacts' ? returnStringFirstEmoji(label) || profileUtils.addressHashedEmoji(address) : null;
@@ -141,7 +133,7 @@ const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props },
                 </ContactName>
               )}
               <BottomRowText color={colors.alpha(colors.blueGreyDark, 0.5)} letterSpacing="roundedMedium" weight="medium">
-                {cleanedUpBalance}
+                {balanceText}
               </BottomRowText>
             </Fragment>
           ) : (

src/components/ens-profile/ActionButtons/MoreButton.tsx

@@ -6,7 +6,7 @@ import { MenuActionConfig } from 'react-native-ios-context-menu';
 import { showDeleteContactActionSheet } from '../../contacts';
 import More from '../MoreButton/MoreButton';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
-import { useClipboard, useContacts, useWallets, useWatchWallet } from '@/hooks';
+import { useClipboard, useContacts, useSwitchWallet, useWallets, useWatchWallet } from '@/hooks';
 import { useNavigation } from '@/navigation';
 import { RAINBOW_PROFILES_BASE_URL } from '@/references';
 import Routes from '@/navigation/routesNames';
@@ -24,7 +24,8 @@ const ACTIONS = {
 };
 
 export default function MoreButton({ address, ensName }: { address?: string; ensName?: string }) {
-  const { switchToWalletWithAddress, selectedWallet } = useWallets();
+  const { selectedWallet } = useWallets();
+  const { switchToWalletWithAddress } = useSwitchWallet();
   const { isWatching } = useWatchWallet({ address });
   const { navigate } = useNavigation();
   const { setClipboard } = useClipboard();

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,9 +38,11 @@ const EMPTY_WALLET_CONTENT = [
 const ONLY_NFTS_CONTENT = [{ type: 'ETH_CARD', uid: 'eth-card' }];
 
 const sortedAssetsSelector = (state: any) => state.sortedAssets;
+const accountBalanceDisplaySelector = (state: any) => state.accountBalanceDisplay;
 const hiddenCoinsSelector = (state: any) => state.hiddenCoins;
 const isCoinListEditedSelector = (state: any) => state.isCoinListEdited;
 const isLoadingUserAssetsSelector = (state: any) => state.isLoadingUserAssets;
+const isLoadingBalanceSelector = (state: any) => state.isLoadingBalance;
 const isReadOnlyWalletSelector = (state: any) => state.isReadOnlyWallet;
 const nativeCurrencySelector = (state: any) => state.nativeCurrency;
 const pinnedCoinsSelector = (state: any) => state.pinnedCoins;
@@ -105,23 +106,15 @@ const withPositionsSection = (isLoadingUserAssets: boolean) => {
 const withBriefBalanceSection = (
   sortedAssets: ParsedAddressAsset[],
   isLoadingUserAssets: boolean,
+  isLoadingBalance: boolean,
+  accountBalanceDisplay: string | undefined,
   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,6 @@ const withBriefBalanceSection = (
     {
       type: 'PROFILE_STICKY_HEADER',
       uid: 'assets-profile-header-compact',
-      value: totalValue,
-      isLoadingUserAssets,
     },
     {
       type: 'PROFILE_AVATAR_ROW_SPACE_BEFORE',
@@ -156,13 +147,14 @@ const withBriefBalanceSection = (
       type: 'PROFILE_NAME_ROW_SPACE_AFTER',
       uid: 'profile-name-space-after',
     },
-    ...(!hasTokens && !isLoadingUserAssets
+    ...(!hasTokens && !isLoadingUserAssets && !isLoadingBalance
       ? []
       : [
           {
             type: 'PROFILE_BALANCE_ROW',
             uid: 'profile-balance',
-            value: totalValue,
+            value: accountBalanceDisplay,
+            isLoadingBalance,
           },
           {
             type: 'PROFILE_BALANCE_ROW_SPACE_AFTER',
@@ -172,13 +164,13 @@ const withBriefBalanceSection = (
     {
       type: 'PROFILE_ACTION_BUTTONS_ROW',
       uid: 'profile-action-buttons',
-      value: totalValue,
+      value: accountBalanceDisplay,
     },
     hasTokens
       ? {
           type: 'PROFILE_ACTION_BUTTONS_ROW_SPACE_AFTER',
           uid: 'profile-action-buttons-space-after',
-          value: totalValue,
+          value: accountBalanceDisplay,
         }
       : { type: 'BIG_EMPTY_WALLET_SPACER', uid: 'big-empty-wallet-spacer-1' },
   ];
@@ -226,6 +218,8 @@ const briefBalanceSectionSelector = createSelector(
   [
     sortedAssetsSelector,
     isLoadingUserAssetsSelector,
+    isLoadingBalanceSelector,
+    accountBalanceDisplaySelector,
     nativeCurrencySelector,
     isCoinListEditedSelector,
     pinnedCoinsSelector,

src/hooks/index.ts

@@ -94,6 +94,7 @@ export { default as useSwapSettings } from './useSwapSettings';
 export { default as useSwapDerivedOutputs } from './useSwapDerivedOutputs';
 export { default as useSwapDerivedValues } from './useSwapDerivedValues';
 export { default as useSwapRefuel } from './useSwapRefuel';
+export { default as useSwitchWallet } from './useSwitchWallet';
 export { default as useTimeout } from './useTimeout';
 export { default as useTransactionConfirmation } from './useTransactionConfirmation';
 export { default as usePendingTransactions } from './usePendingTransactions';