TW-1578: [evm] Fix lots of failing node requests on large accounts (#…

…1222)

src/app/pages/Collectibles/CollectiblesTab/components/EvmChainCollectiblesTab.tsx

@@ -7,6 +7,7 @@ import { useEvmChainByChainId } from 'temple/front/chains';
 
 import { EvmCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface EvmChainCollectiblesTabProps {
   chainId: number;
@@ -22,6 +23,8 @@ export const EvmChainCollectiblesTab = memo<EvmChainCollectiblesTabProps>(({ cha
   const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
     useEvmChainCollectiblesListingLogic(publicKeyHash, chainId, manageActive);
 
+  useEvmCollectiblesMetadataLoading(publicKeyHash);
+
   const contentElement = useMemo(
     () => (
       <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>

src/app/pages/Collectibles/CollectiblesTab/components/EvmCollectiblesTab.tsx

@@ -8,6 +8,7 @@ import { useEthereumMainnetChain } from 'temple/front';
 
 import { EvmCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface EvmCollectiblesTabProps {
   publicKeyHash: HexString;
@@ -22,6 +23,8 @@ export const EvmCollectiblesTab = memo<EvmCollectiblesTabProps>(({ publicKeyHash
   const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
     useEvmAccountCollectiblesListingLogic(publicKeyHash, manageActive);
 
+  useEvmCollectiblesMetadataLoading(publicKeyHash);
+
   const contentElement = useMemo(
     () => (
       <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>

src/app/pages/Collectibles/CollectiblesTab/components/MultiChainCollectiblesTab.tsx

@@ -8,6 +8,7 @@ import { TempleChainKind } from 'temple/types';
 
 import { EvmCollectibleItem, TezosCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface MultiChainCollectiblesTabProps {
   accountTezAddress: string;
@@ -23,6 +24,8 @@ export const MultiChainCollectiblesTab = memo<MultiChainCollectiblesTabProps>(
     const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
       useAccountCollectiblesListingLogic(accountTezAddress, accountEvmAddress, manageActive);
 
+    useEvmCollectiblesMetadataLoading(accountEvmAddress);
+
     const contentElement = useMemo(
       () => (
         <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>

src/app/root-hooks/evm/collectibles-metadata-loading.ts → src/app/pages/Collectibles/CollectiblesTab/components/evm-meta-loading.ts

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { dispatch } from 'app/store';
 import { setEvmCollectiblesMetadataLoading } from 'app/store/evm/actions';
@@ -14,7 +14,10 @@ import { isSupportedChainId } from 'lib/apis/temple/endpoints/evm/api.utils';
 import { fetchEvmCollectiblesMetadataFromChain } from 'lib/evm/on-chain/metadata';
 import { useEnabledEvmChains } from 'temple/front';
 
-export const AppEvmCollectiblesMetadataLoading = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) => {
+/** TODO: Might wanna tune this loading logic either via pagination or queueing.
+ * Pagination for Collectibles is planned for the future.
+ */
+export const useEvmCollectiblesMetadataLoading = (publicKeyHash: HexString) => {
   const evmChains = useEnabledEvmChains();
   const isLoading = useEvmCollectiblesMetadataLoadingSelector();
 
@@ -61,6 +64,4 @@ export const AppEvmCollectiblesMetadataLoading = memo<{ publicKeyHash: HexString
       })
     ).then(() => void dispatch(setEvmCollectiblesMetadataLoading(false)));
   }, [evmChains, storedCollectiblesRecord, publicKeyHash]);
-
-  return null;
-});
+};

src/app/root-hooks/index.tsx

@@ -22,7 +22,6 @@ import { useAccountAddressForEvm, useAccountAddressForTezos } from 'temple/front
 import { AppTezosAssetsLoading } from './assets-loading';
 import { AppTezosBalancesLoading } from './balances-loading';
 import { AppEvmBalancesLoading } from './evm/balances-loading';
-import { AppEvmCollectiblesMetadataLoading } from './evm/collectibles-metadata-loading';
 import { AppEvmTokensExchangeRatesLoading } from './evm/tokens-exchange-rates-loading';
 import { AppEvmTokensMetadataLoading } from './evm/tokens-metadata-loading';
 import { AppTezosTokensMetadataLoading } from './metadata-loading';
@@ -87,7 +86,6 @@ const EvmAccountHooks = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) =
   <>
     <AppEvmTokensExchangeRatesLoading publicKeyHash={publicKeyHash} />
     <AppEvmTokensMetadataLoading publicKeyHash={publicKeyHash} />
-    <AppEvmCollectiblesMetadataLoading publicKeyHash={publicKeyHash} />
     <AppEvmBalancesLoading publicKeyHash={publicKeyHash} />
   </>
 ));

src/lib/balances/hooks.ts

@@ -245,7 +245,8 @@ function useEvmAssetRawBalance(
       refreshBalanceOnChain();
     },
     [usingStore, refreshBalanceOnChain],
-    EVM_BALANCES_SYNC_INTERVAL
+    EVM_BALANCES_SYNC_INTERVAL,
+    false
   );
 
   if (usingStore)

src/temple/evm/index.ts

@@ -1,16 +1,24 @@
 import memoizee from 'memoizee';
-import { Transport, Chain, createPublicClient, http, PublicClient } from 'viem';
+import { Transport, Chain, createPublicClient, http, PublicClient, HttpTransportConfig } from 'viem';
 
 import { rejectOnTimeout } from 'lib/utils';
 import { EvmChain } from 'temple/front';
 import { MAX_MEMOIZED_TOOLKITS } from 'temple/misc';
 
 import { getViemChainsList } from './utils';
 
+/** See: https://viem.sh/docs/clients/transports/http */
+const READ_ONLY_CLIENT_TRANSPORT_CONFIG: HttpTransportConfig = {
+  /** Defaults to 3 */
+  retryCount: 1,
+  /** Defaults to 150 */
+  retryDelay: 300
+};
+
 export const getReadOnlyEvm = memoizee(
   (rpcUrl: string): PublicClient =>
     createPublicClient({
-      transport: http(rpcUrl)
+      transport: http(rpcUrl, READ_ONLY_CLIENT_TRANSPORT_CONFIG)
     }),
   { max: MAX_MEMOIZED_TOOLKITS }
 );