fix: improve native balance fetch logic on the UX

MetaMask · Feb 8, 2024 · bb9a9fb · bb9a9fb
1 parent 34f9da1
commit bb9a9fb
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 92 deletions.
diff --git a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx b/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx
@@ -9,7 +9,7 @@ import AccountBalance from '../../../component-library/components-temp/Accounts/
 import { BadgeVariant } from '../../../component-library/components/Badges/Badge';
 import TagUrl from '../../../component-library/components/Tags/TagUrl';
 import { useStyles } from '../../../component-library/hooks';
-import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
 import { selectProviderConfig } from '../../../selectors/networkController';
 import { selectIdentities } from '../../../selectors/preferencesController';
 import {
@@ -49,7 +49,7 @@ const ApproveTransactionHeader = ({
   const { styles } = useStyles(stylesheet, {});
   const { addressBalance } = useAddressBalance(asset, from, dontWatchAsset);
 
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
 
   const identities = useSelector(selectIdentities);
   const activeAddress = toChecksumAddress(from);
@@ -83,7 +83,7 @@ const ApproveTransactionHeader = ({
     setIsOriginMMSDKRemoteConn(
       origin.startsWith(AppConstants.MM_SDK.SDK_REMOTE_ORIGIN),
     );
-  }, [accounts, identities, activeAddress, origin]);
+  }, [accountsByChainId, identities, activeAddress, origin]);
 
   const networkImage = getNetworkImageSource({
     networkType: providerConfig.type,

diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -26,7 +26,7 @@ import {
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
-import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
 import { selectContractBalances } from '../../../selectors/tokenBalancesController';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import Logger from '../../../util/Logger';
@@ -36,6 +36,7 @@ import {
   hexToBN,
   renderFromTokenMinimalUnit,
   renderFromWei,
+  toHexadecimal,
   weiToFiat,
 } from '../../../util/number';
 import { getEther } from '../../../util/transactions';
@@ -65,7 +66,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const [timePeriod, setTimePeriod] = React.useState<TimePeriod>('1d');
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate);
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
   const primaryCurrency = useSelector(
     (state: RootStateOrAny) => state.settings.primaryCurrency,
   );
@@ -165,9 +166,13 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
 
   let balance, balanceFiat;
   if (asset.isETH) {
-    balance = renderFromWei(accounts[selectedAddress]?.balance);
+    balance = renderFromWei(
+      accountsByChainId[toHexadecimal(chainId)][selectedAddress]?.balance,
+    );
     balanceFiat = weiToFiat(
-      hexToBN(accounts[selectedAddress].balance),
+      hexToBN(
+        accountsByChainId[toHexadecimal(chainId)][selectedAddress]?.balance,
+      ),
       conversionRate,
       currentCurrency,
     );

diff --git a/app/components/UI/Ramp/hooks/useBalance.ts b/app/components/UI/Ramp/hooks/useBalance.ts
@@ -1,19 +1,22 @@
 import { hexToBN } from '@metamask/controller-utils';
 import { useSelector } from 'react-redux';
 import { NATIVE_ADDRESS } from '../../../../constants/on-ramp';
-import { selectAccounts } from '../../../../selectors/accountTrackerController';
+import { selectAccountsByChainId } from '../../../../selectors/accountTrackerController';
 import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../../selectors/currencyRateController';
 import { selectSelectedAddress } from '../../../../selectors/preferencesController';
 import { selectContractBalances } from '../../../../selectors/tokenBalancesController';
 import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
+import { selectChainId } from '../../../../selectors/networkController';
+
 import { safeToChecksumAddress } from '../../../../util/address';
 import {
   balanceToFiat,
   renderFromTokenMinimalUnit,
   renderFromWei,
+  toHexadecimal,
   weiToFiat,
 } from '../../../../util/number';
 
@@ -24,7 +27,8 @@ interface Asset {
 
 export default function useBalance(asset?: Asset) {
   const assetAddress = safeToChecksumAddress(asset?.address);
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
+  const chainId = useSelector(selectChainId);
   const selectedAddress = useSelector(selectSelectedAddress);
   const conversionRate = useSelector(selectConversionRate);
   const currentCurrency = useSelector(selectCurrentCurrency);
@@ -37,8 +41,13 @@ export default function useBalance(asset?: Asset) {
 
   let balance, balanceFiat, balanceBN;
   if (assetAddress === NATIVE_ADDRESS) {
-    balance = renderFromWei(accounts[selectedAddress]?.balance);
-    balanceBN = hexToBN(accounts[selectedAddress].balance);
+    balance = renderFromWei(
+      accountsByChainId[toHexadecimal(chainId)][selectedAddress]?.balance,
+    );
+
+    balanceBN = hexToBN(
+      accountsByChainId[toHexadecimal(chainId)][selectedAddress]?.balance,
+    );
     balanceFiat = weiToFiat(balanceBN, conversionRate, currentCurrency);
   } else {
     const exchangeRate =

diff --git a/app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts b/app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts
@@ -14,17 +14,19 @@ import useThunkDispatch from '../../../hooks/useThunkDispatch';
 import { useRampSDK } from '../sdk';
 import { getNotificationDetails, stateHasOrder } from '../utils';
 import useAnalytics from './useAnalytics';
-import { hexToBN } from '../../../../util/number';
-import { selectAccounts } from '../../../../selectors/accountTrackerController';
+import { hexToBN, toHexadecimal } from '../../../../util/number';
+import { selectAccountsByChainId } from '../../../../selectors/accountTrackerController';
 import Routes from '../../../../constants/navigation/Routes';
+import { selectChainId } from '../../../../selectors/networkController';
 
 function useHandleSuccessfulOrder() {
   const { selectedChainId, selectedAddress } = useRampSDK();
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const dispatchThunk = useThunkDispatch();
   const trackEvent = useAnalytics();
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
+  const chainIdFromProvider = useSelector(selectChainId);
 
   const addTokenToTokensController = useCallback(
     async (token: CryptoCurrency) => {
@@ -108,8 +110,16 @@ function useHandleSuccessfulOrder() {
             provider_onramp: (order?.data as Order)?.provider?.name,
             chain_id_destination: selectedChainId,
             has_zero_currency_destination_balance: false,
-            has_zero_native_balance: accounts[selectedAddress]?.balance
-              ? (hexToBN(accounts[selectedAddress].balance) as any)?.isZero?.()
+            has_zero_native_balance: accountsByChainId[
+              toHexadecimal(chainIdFromProvider)
+            ][selectedAddress]?.balance
+              ? (
+                  hexToBN(
+                    accountsByChainId[toHexadecimal(chainIdFromProvider)][
+                      selectedAddress
+                    ].balance,
+                  ) as any
+                )?.isZero?.()
               : undefined,
             currency_source: (order?.data as Order)?.fiatCurrency.symbol,
             currency_destination: (order?.data as Order)?.cryptoCurrency.symbol,
@@ -118,7 +128,8 @@ function useHandleSuccessfulOrder() {
       });
     },
     [
-      accounts,
+      chainIdFromProvider,
+      accountsByChainId,
       addTokenToTokensController,
       dispatchThunk,
       handleDispatchUserWalletProtection,

diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
@@ -99,6 +99,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
   const [tokenToRemove, setTokenToRemove] = useState<TokenI>();
   const [isAddTokenEnabled, setIsAddTokenEnabled] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
+
   const [isNetworkRampSupported, isNativeTokenRampSupported] = useRampNetwork();
 
   const actionSheet = useRef<ActionSheet>();
@@ -229,6 +230,8 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
     // render balances according to primary currency
     let mainBalance, secondaryBalance;
+    mainBalance = TOKEN_BALANCE_LOADING;
+
     if (primaryCurrency === 'ETH') {
       mainBalance = balanceValueFormatted;
       secondaryBalance = balanceFiat;

diff --git a/app/components/Views/ActivityView/index.js b/app/components/Views/ActivityView/index.js
@@ -14,7 +14,7 @@ import { useTheme } from '../../../util/theme';
 import Routes from '../../../constants/navigation/Routes';
 import AnalyticsV2 from '../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const styles = StyleSheet.create({
@@ -28,17 +28,18 @@ const ActivityView = () => {
   const navigation = useNavigation();
   const selectedAddress = useSelector(selectSelectedAddress);
   const hasOrders = useSelector((state) => getHasOrders(state) || false);
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
 
   const openAccountSelector = useCallback(() => {
     navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
       screen: Routes.SHEET.ACCOUNT_SELECTOR,
     });
     // Track Event: "Opened Acount Switcher"
     AnalyticsV2.trackEvent(MetaMetricsEvents.BROWSER_OPEN_ACCOUNT_SWITCH, {
-      number_of_accounts: Object.keys(accounts ?? {}).length,
+      number_of_accounts: Object.keys(accountsByChainId[selectedAddress] ?? {})
+        .length,
     });
-  }, [navigation, accounts]);
+  }, [navigation, accountsByChainId, selectedAddress]);
 
   useEffect(
     () => {

diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx
@@ -66,11 +66,16 @@ const NetworkSelector = () => {
   const networkConfigurations = useSelector(selectNetworkConfigurations);
 
   const onNetworkChange = (type: string) => {
-    const { NetworkController, CurrencyRateController, TransactionController } =
-      Engine.context;
+    const {
+      NetworkController,
+      CurrencyRateController,
+      TransactionController,
+      AccountTrackerController,
+    } = Engine.context;
 
     CurrencyRateController.setNativeCurrency('ETH');
     NetworkController.setProviderType(type);
+    AccountTrackerController.refresh();
 
     setTimeout(async () => {
       await TransactionController.updateIncomingTransactions();

diff --git a/...components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx b/...components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx
@@ -32,6 +32,7 @@ const RevealPrivateKey = () => {
   const navigation = useNavigation();
 
   const accounts = useSelector(selectAccounts);
+
   const identities = useSelector(selectIdentities);
   const selectedAddress = useSelector(selectSelectedAddress);
 

diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
@@ -14,7 +14,12 @@ import { baseStyles } from '../../../styles/common';
 import Tokens from '../../UI/Tokens';
 import { getWalletNavbarOptions } from '../../UI/Navbar';
 import { strings } from '../../../../locales/i18n';
-import { renderFromWei, weiToFiat, hexToBN } from '../../../util/number';
+import {
+  renderFromWei,
+  weiToFiat,
+  hexToBN,
+  toHexadecimal,
+} from '../../../util/number';
 import Engine from '../../../core/Engine';
 import CollectibleContracts from '../../UI/CollectibleContracts';
 import Analytics from '../../../core/Analytics/Analytics';
@@ -42,7 +47,7 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
-import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const createStyles = ({ colors, typography }: Theme) =>
@@ -88,10 +93,12 @@ const Wallet = ({ navigation }: any) => {
   const theme = useTheme();
   const styles = createStyles(theme);
   const { colors } = theme;
+
   /**
-   * Map of accounts to information objects including balances
+   * Map of accountsByChain to information objects including balances
    */
-  const accounts = useSelector(selectAccounts);
+  const accountsByChainId = useSelector(selectAccountsByChainId);
+
   /**
    * ETH to current currency conversion rate
    */
@@ -188,7 +195,7 @@ const Wallet = ({ navigation }: any) => {
       });
     },
     /* eslint-disable-next-line */
-    [navigation],
+    [navigation, providerConfig.chainId],
   );
 
   useEffect(() => {
@@ -236,8 +243,15 @@ const Wallet = ({ navigation }: any) => {
   const renderContent = useCallback(() => {
     let balance: any = 0;
     let assets = tokens;
-    if (accounts[selectedAddress]) {
-      balance = renderFromWei(accounts[selectedAddress].balance);
+
+    if (
+      accountsByChainId[toHexadecimal(providerConfig.chainId)][selectedAddress]
+    ) {
+      balance = renderFromWei(
+        accountsByChainId[toHexadecimal(providerConfig.chainId)][
+          selectedAddress
+        ].balance,
+      );
 
       assets = [
         {
@@ -247,7 +261,11 @@ const Wallet = ({ navigation }: any) => {
           isETH: true,
           balance,
           balanceFiat: weiToFiat(
-            hexToBN(accounts[selectedAddress].balance) as any,
+            hexToBN(
+              accountsByChainId[toHexadecimal(providerConfig.chainId)][
+                selectedAddress
+              ].balance,
+            ) as any,
             conversionRate,
             currentCurrency,
           ),
@@ -291,7 +309,6 @@ const Wallet = ({ navigation }: any) => {
     );
   }, [
     renderTabBar,
-    accounts,
     conversionRate,
     currentCurrency,
     navigation,
@@ -300,6 +317,8 @@ const Wallet = ({ navigation }: any) => {
     ticker,
     tokens,
     styles,
+    providerConfig.chainId,
+    accountsByChainId,
   ]);
   const renderLoader = useCallback(
     () => (

diff --git a/app/core/Engine.ts b/app/core/Engine.ts
@@ -839,6 +839,13 @@ class Engine {
         getSelectedAddress: () => preferencesController.state.selectedAddress,
         getMultiAccountBalancesEnabled: () =>
           preferencesController.state.isMultiAccountBalancesEnabled,
+        onNetworkStateChange: (listener) =>
+          this.controllerMessenger.subscribe(
+            AppConstants.NETWORK_STATE_CHANGE_EVENT,
+            listener,
+          ),
+        getCurrentChainId: () =>
+          toHexadecimal(networkController.state.providerConfig.chainId),
       }),
       new AddressBookController(),
       assetsContractController,
@@ -1209,21 +1216,28 @@ class Engine {
       TokenBalancesController,
       TokenRatesController,
       TokensController,
+      NetworkController,
     } = this.context;
     const { selectedAddress } = PreferencesController.state;
     const { currentCurrency } = CurrencyRateController.state;
+    const networkProvider = NetworkController.state.providerConfig;
     const conversionRate =
       CurrencyRateController.state.conversionRate === null
         ? 0
         : CurrencyRateController.state.conversionRate;
-    const { accounts } = AccountTrackerController.state;
+    const { accountsByChainId } = AccountTrackerController.state;
+
     const { tokens } = TokensController.state;
     let ethFiat = 0;
     let tokenFiat = 0;
     const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
-    if (accounts[selectedAddress]) {
+    if (
+      accountsByChainId[toHexadecimal(networkProvider.chainId)][selectedAddress]
+    ) {
       ethFiat = weiToFiatNumber(
-        accounts[selectedAddress].balance,
+        accountsByChainId[toHexadecimal(networkProvider.chainId)][
+          selectedAddress
+        ].balance,
         conversionRate,
         decimalsToShow,
       );

diff --git a/app/selectors/accountTrackerController.ts b/app/selectors/accountTrackerController.ts
@@ -14,6 +14,12 @@ export const selectAccounts = createSelector(
     accountTrackerControllerState.accounts,
 );
 
+export const selectAccountsByChainId = createSelector(
+  selectAccountTrackerControllerState,
+  (accountTrackerControllerState: AccountTrackerState) =>
+    accountTrackerControllerState.accountsByChainId,
+);
+
 export const selectAccountsLength = createSelector(
   selectAccounts,
   (accounts: { [address: string]: AccountInformation }) =>