Add debug

builds.yml

@@ -310,4 +310,4 @@ env:
   # Enable/disable why did you render debug tool: https://github.com/welldone-software/why-did-you-render
   # This should NEVER be enabled in production since it slows down react
   ###
-  - ENABLE_WHY_DID_YOU_RENDER: false
+  - ENABLE_WHY_DID_YOU_RENDER: true

ui/components/multichain/account-list-item/account-list-item.js

@@ -109,12 +109,20 @@ const AccountListItem = ({
     shouldShowFiat && (isMainnet || (isTestnet && showFiatInTestnets));
 
   const itemRef = useRef(null);
+  /*
   const isItemInViewport = useInViewport(itemRef);
 
-  console.log(`${account.metadata.name} in view? `, isItemInViewport.inViewport);
-
-  const accountTotalFiatBalances =
-    useMultichainAccountTotalFiatBalance(account, true, true);
+  console.log(
+    `${account.metadata.name} in view? `,
+    isItemInViewport.inViewport,
+  );
+  */
+  const accountTotalFiatBalances = /*useMultichainAccountTotalFiatBalance(
+    account,
+    true,
+    !isItemInViewport.inViewport,
+    account.metadata.name,
+  )*/ {orderedTokenList: [], totalBalance: ''};
   const mappedOrderedTokenList = accountTotalFiatBalances.orderedTokenList.map(
     (item) => ({
       avatarValue: item.iconUrl,
@@ -155,6 +163,8 @@ const AccountListItem = ({
     currentTabOrigin && currentTabIsConnectedToSelectedAddress;
   const isSingleAccount = accountsCount === 1;
 
+  return <div>{account.metadata.name}</div>;
+
   return (
     <Box
       display={Display.Flex}

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -286,7 +286,7 @@ export const AccountListMenu = ({
     fuse.setCollection(filteredAccounts);
     searchResults = fuse.search(searchQuery);
   }
-  searchResults = mergeAccounts(searchResults, filteredAccounts);
+  searchResults = useMemo(() => mergeAccounts(searchResults, filteredAccounts), [searchResults, filteredAccounts]);
 
   const title = useMemo(
     () => getActionTitle(t as (text: string) => string, actionMode),
@@ -320,6 +320,8 @@ export const AccountListMenu = ({
     [dispatch, onClose, trackEvent],
   );
 
+  console.log('AccountListMenu is rendering');
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />

ui/components/multichain/app-header/app-header-locked-content.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -21,6 +21,9 @@ export const AppHeaderLockedContent = ({
   const history = useHistory();
 
   const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+  const metaFoxOnClick = useCallback(() => {
+    history.push(DEFAULT_ROUTE);
+  }, [history]);
 
   return (
     <>
@@ -43,12 +46,7 @@ export const AppHeaderLockedContent = ({
           data-testid="network-display"
         />
       </div>
-      <MetafoxLogo
-        unsetIconHeight
-        onClick={async () => {
-          history.push(DEFAULT_ROUTE);
-        }}
-      />
+      <MetafoxLogo unsetIconHeight onClick={metaFoxOnClick} />
     </>
   );
 };

ui/components/multichain/notifications-page/notifications-page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import { useSelector } from 'react-redux';
 ///: END:ONLY_INCLUDE_IF
@@ -30,6 +30,10 @@ export function NotificationsPage({ children }: NotificationsPageProps) {
   const theme = useSelector((state) => getTheme(state));
   ///: END:ONLY_INCLUDE_IF
 
+  const metaFoxOnClick = useCallback(() => {
+    history.push(DEFAULT_ROUTE);
+  }, [history]);
+
   return (
     <div className="main-container" data-testid="notifications-page">
       <Box
@@ -42,7 +46,7 @@ export function NotificationsPage({ children }: NotificationsPageProps) {
       >
         <MetafoxLogo
           unsetIconHeight
-          onClick={() => history.push(DEFAULT_ROUTE)}
+          onClick={metaFoxOnClick}
           ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
           theme={theme}
           ///: END:ONLY_INCLUDE_IF

ui/hooks/useAccountTotalFiatBalance.js

@@ -28,6 +28,7 @@ export const useAccountTotalFiatBalance = (
   account,
   shouldHideZeroBalanceTokens,
   preventRunning = false,
+  accountName,
 ) => {
   const currentChainId = useSelector(getCurrentChainId);
   const conversionRate = useSelector(getConversionRate);
@@ -61,6 +62,7 @@ export const useAccountTotalFiatBalance = (
     includeFailedTokens: true,
     hideZeroBalanceTokens: shouldHideZeroBalanceTokens,
     preventRunning,
+    accountName,
   });
 
   if (preventRunning) {

ui/hooks/useMultichainAccountTotalFiatBalance.ts

@@ -25,7 +25,8 @@ export const EMPTY_VALUES = {
 export const useMultichainAccountTotalFiatBalance = (
   account: InternalAccount,
   shouldHideZeroBalanceTokens: boolean = false,
-  preventRunning = false,
+  preventRunning: boolean = false,
+  accountName: string = '',
 ): {
   formattedFiat: string;
   totalFiatBalance: string;
@@ -42,7 +43,12 @@ export const useMultichainAccountTotalFiatBalance = (
   orderedTokenList: { iconUrl: string; symbol: string; fiatBalance: string }[];
 } => {
   if (isEvmAccountType(account.type)) {
-    return useAccountTotalFiatBalance(account, shouldHideZeroBalanceTokens, preventRunning);
+    return useAccountTotalFiatBalance(
+      account,
+      shouldHideZeroBalanceTokens,
+      preventRunning,
+      accountName,
+    );
   }
 
   const currentCurrency = useMultichainSelector(

ui/hooks/useTokenTracker.js

@@ -13,6 +13,7 @@ export function useTokenTracker({
   includeFailedTokens = false,
   hideZeroBalanceTokens = false,
   preventRunning = false,
+  accountName,
 }) {
   const { chainId, rpcUrl } = useSelector(getProviderConfig);
   const { address: selectedAddress } = useSelector(
@@ -30,6 +31,13 @@ export function useTokenTracker({
 
   const updateBalances = useCallback(
     (tokenWithBalances) => {
+      if (preventRunning) {
+        console.log('Bailing out of useTokenTracker! [updateBalances] for ', accountName);
+        return;
+      }
+
+      console.log(`Updating balances for ${accountName}`);
+
       const matchingTokens = hideZeroBalanceTokens
         ? tokenWithBalances.filter((token) => Number(token.balance) > 0)
         : tokenWithBalances;
@@ -49,7 +57,7 @@ export function useTokenTracker({
       setLoading(false);
       setError(null);
     },
-    [hideZeroBalanceTokens, memoizedTokens],
+    [hideZeroBalanceTokens, memoizedTokens, preventRunning, accountName],
   );
 
   const showError = useCallback((err) => {
@@ -70,6 +78,16 @@ export function useTokenTracker({
     (usersAddress, tokenList) => {
       // clear out previous tracker, if it exists.
       teardownTracker();
+      if (preventRunning) {
+        console.log('Bailing out of useTokenTracker! [buildTracker]', accountName);
+        return;
+      }
+      else {
+        console.log('Creating new TokenTracker for ', accountName);
+      }
+
+      console.log(`Updating buildTracker for ${accountName}`);
+
       tokenTracker.current = new TokenTracker({
         userAddress: usersAddress,
         provider: global.ethereumProvider,
@@ -83,7 +101,14 @@ export function useTokenTracker({
       tokenTracker.current.on('error', showError);
       tokenTracker.current.updateBalances();
     },
-    [updateBalances, includeFailedTokens, showError, teardownTracker],
+    [
+      updateBalances,
+      includeFailedTokens,
+      showError,
+      teardownTracker,
+      preventRunning,
+      accountName,
+    ],
   );
 
   // Effect to remove the tracker when the component is removed from DOM
@@ -98,10 +123,12 @@ export function useTokenTracker({
   // Effect to set loading state and initialize tracker when values change
   useEffect(() => {
     if (preventRunning) {
-      console.log("Bailing out of useTokenTracker!")
+      console.log('Bailing out of useTokenTracker! [useEffect]', accountName);
       return;
     }
 
+    console.log(`Updating useEffect for ${accountName}`);
+
     // This effect will only run initially and when:
     // 1. chainId is updated,
     // 2. rpc url is changd,
@@ -134,6 +161,7 @@ export function useTokenTracker({
     updateBalances,
     buildTracker,
     preventRunning,
+    accountName,
   ]);
 
   return { loading, tokensWithBalances, error };