TW-1577 Activity page optimization and caching

jest.config.ts

@@ -14,7 +14,7 @@ const config = {
     '.+\\.tsx$': 'ts-jest'
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  setupFiles: ['dotenv/config', '@temple-wallet/jest-webextension-mock'],
+  setupFiles: ['dotenv/config', '@temple-wallet/jest-webextension-mock', 'fake-indexeddb/auto'],
   setupFilesAfterEnv: ['./jest.setup.js']
 };
 

package.json

@@ -114,6 +114,7 @@
     "clsx": "1.1.1",
     "constate": "3.3.2",
     "copy-webpack-plugin": "11.0.0",
+    "core-js": "^3.40.0",
     "create-file-webpack": "^1.0.2",
     "cross-env": "7.0.3",
     "crypto-browserify": "3.12.0",
@@ -123,7 +124,7 @@
     "date-fns": "2.15.0",
     "debounce": "^1.2.1",
     "debounce-promise": "3.1.2",
-    "dexie": "3.1.0-alpha.9",
+    "dexie": "^4.0.11",
     "dotenv": "8.2.0",
     "ed25519-hd-key": "1.1.2",
     "effector": "21.2.0",
@@ -216,6 +217,7 @@
     "zip-a-folder": "^3"
   },
   "devDependencies": {
+    "fake-indexeddb": "^6.0.0",
     "source-map": "^0.7.4",
     "text-decoding": "^1.0.0"
   },

src/app/hooks/use-no-category-evm-assets-loading.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import { dispatch } from 'app/store';
+import { refreshNoCategoryEvmAssetsMetadataActions } from 'app/store/evm/no-category-assets-metadata/actions';
+import { useEvmNoCategoryAssetsMetadataLoadingSelector } from 'app/store/evm/no-category-assets-metadata/selectors';
+import { NO_CATEGORY_ASSETS_METADATA_SYNC_INTERVAL } from 'lib/fixed-times';
+import { useInterval, useUpdatableRef } from 'lib/ui/hooks';
+import { useAllEvmChains } from 'temple/front';
+
+export const useNoCategoryEvmAssetsLoading = (publicKeyHash: HexString) => {
+  const allEvmChains = useAllEvmChains();
+  const rpcUrls = useMemo(
+    () => Object.fromEntries(Object.entries(allEvmChains).map(([chainId, { rpcBaseURL }]) => [chainId, rpcBaseURL])),
+    [allEvmChains]
+  );
+  const loading = useEvmNoCategoryAssetsMetadataLoadingSelector();
+  const loadingRef = useUpdatableRef(loading);
+
+  useInterval(
+    () => {
+      !loadingRef.current &&
+        dispatch(
+          refreshNoCategoryEvmAssetsMetadataActions.submit({
+            associatedAccountPkh: publicKeyHash,
+            rpcUrls
+          })
+        );
+    },
+    [publicKeyHash, rpcUrls, loadingRef],
+    NO_CATEGORY_ASSETS_METADATA_SYNC_INTERVAL,
+    false
+  );
+};

src/app/hooks/use-no-category-tezos-assets-loading.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+import { dispatch } from 'app/store';
+import { refreshNoCategoryTezosAssetsMetadataActions } from 'app/store/tezos/no-category-assets-metadata/actions';
+import { useNoCategoryTezosAssetsMetadataLoadingSelector } from 'app/store/tezos/no-category-assets-metadata/selectors';
+import { NO_CATEGORY_ASSETS_METADATA_SYNC_INTERVAL } from 'lib/fixed-times';
+import { useInterval, useUpdatableRef } from 'lib/ui/hooks';
+import { useAllTezosChains } from 'temple/front';
+
+export const useNoCategoryTezosAssetsLoading = (publicKeyHash: string) => {
+  const allTezosChains = useAllTezosChains();
+  const rpcUrls = useMemo(
+    () => Object.fromEntries(Object.entries(allTezosChains).map(([chainId, { rpcBaseURL }]) => [chainId, rpcBaseURL])),
+    [allTezosChains]
+  );
+  const loading = useNoCategoryTezosAssetsMetadataLoadingSelector();
+  const loadingRef = useUpdatableRef(loading);
+
+  useInterval(
+    () => {
+      !loadingRef.current &&
+        dispatch(
+          refreshNoCategoryTezosAssetsMetadataActions.submit({
+            associatedAccountPkh: publicKeyHash,
+            rpcUrls
+          })
+        );
+    },
+    [loadingRef, publicKeyHash, rpcUrls],
+    NO_CATEGORY_ASSETS_METADATA_SYNC_INTERVAL
+  );
+};

src/app/pages/Send/form/SelectAssetButton.tsx

@@ -9,7 +9,7 @@ import { EvmAssetIconWithNetwork, TezosTokenIconWithNetwork } from 'app/template
 import { EvmBalance, TezosBalance } from 'app/templates/Balance';
 import { setAnotherSelector, setTestID, TestIDProperty } from 'lib/analytics';
 import { T } from 'lib/i18n';
-import { getAssetSymbol, useEvmAssetMetadata, useTezosAssetMetadata } from 'lib/metadata';
+import { getAssetSymbol, useEvmCategorizedAssetMetadata, useCategorizedTezosAssetMetadata } from 'lib/metadata';
 import { EvmChain, OneOfChains, TezosChain } from 'temple/front';
 import { TempleChainKind } from 'temple/types';
 
@@ -53,7 +53,7 @@ interface TezosContentProps {
 }
 
 const TezosContent = memo<TezosContentProps>(({ network, accountPkh, assetSlug }) => {
-  const metadata = useTezosAssetMetadata(assetSlug, network.chainId);
+  const metadata = useCategorizedTezosAssetMetadata(assetSlug, network.chainId);
 
   return (
     <>
@@ -84,7 +84,7 @@ interface EvmContentProps {
 }
 
 const EvmContent = memo<EvmContentProps>(({ network, accountPkh, assetSlug }) => {
-  const assetMetadata = useEvmAssetMetadata(assetSlug, network.chainId);
+  const assetMetadata = useEvmCategorizedAssetMetadata(assetSlug, network.chainId);
 
   return (
     <>

src/app/pages/Send/form/TezosForm.tsx

@@ -12,7 +12,7 @@ import { useTezosAssetBalance } from 'lib/balances';
 import { RECOMMENDED_ADD_TEZ_GAS_FEE } from 'lib/constants';
 import { useAssetFiatCurrencyPrice } from 'lib/fiat-currency';
 import { toLocalFixed, t } from 'lib/i18n';
-import { useTezosAssetMetadata, getAssetSymbol } from 'lib/metadata';
+import { useCategorizedTezosAssetMetadata, getAssetSymbol } from 'lib/metadata';
 import { validateRecipient as validateAddress } from 'lib/temple/front';
 import { isValidTezosAddress, isTezosContractAddress } from 'lib/tezos';
 import { useSafeState } from 'lib/ui/hooks';
@@ -46,7 +46,7 @@ export const TezosForm: FC<Props> = ({ chainId, assetSlug, onSelectAssetClick, o
 
   if (!account || !network) throw new DeadEndBoundaryError();
 
-  const assetMetadata = useTezosAssetMetadata(assetSlug, chainId);
+  const assetMetadata = useCategorizedTezosAssetMetadata(assetSlug, chainId);
 
   if (!assetMetadata) throw new Error('Metadata not found');
 

src/app/pages/Send/hooks/use-evm-estimation-data.ts

@@ -4,7 +4,7 @@ import BigNumber from 'bignumber.js';
 
 import { toastError } from 'app/toaster';
 import { isNativeTokenAddress } from 'lib/apis/temple/endpoints/evm/api.utils';
-import { useEvmAssetMetadata } from 'lib/metadata';
+import { useEvmCategorizedAssetMetadata } from 'lib/metadata';
 import { useTypedSWR } from 'lib/swr';
 import { checkZeroBalance } from 'lib/utils/check-zero-balance';
 import { estimate as genericEstimate } from 'temple/evm/estimate';
@@ -22,7 +22,7 @@ export const useEvmEstimationData = (
   toFilled?: boolean,
   amount?: string
 ) => {
-  const assetMetadata = useEvmAssetMetadata(assetSlug, network.chainId);
+  const assetMetadata = useEvmCategorizedAssetMetadata(assetSlug, network.chainId);
 
   const estimate = useCallback(async () => {
     try {

src/app/pages/Send/modals/ConfirmSend/EvmContent.tsx

@@ -12,7 +12,7 @@ import { useEvmEstimationForm } from 'app/templates/TransactionTabs/use-evm-esti
 import { toastError, toastSuccess } from 'app/toaster';
 import { EVM_TOKEN_SLUG } from 'lib/assets/defaults';
 import { useEvmAssetBalance } from 'lib/balances/hooks';
-import { useEvmAssetMetadata } from 'lib/metadata';
+import { useEvmCategorizedAssetMetadata } from 'lib/metadata';
 import { useTempleClient } from 'lib/temple/front';
 import { ZERO } from 'lib/utils/numbers';
 
@@ -34,7 +34,7 @@ export const EvmContent: FC<EvmContentProps> = ({ data, onClose }) => {
 
   const { value: balance = ZERO } = useEvmAssetBalance(assetSlug, accountPkh, network);
   const { value: ethBalance = ZERO } = useEvmAssetBalance(EVM_TOKEN_SLUG, accountPkh, network);
-  const assetMetadata = useEvmAssetMetadata(assetSlug, network.chainId);
+  const assetMetadata = useEvmCategorizedAssetMetadata(assetSlug, network.chainId);
 
   const [latestSubmitError, setLatestSubmitError] = useState<string | nullish>(null);
 

src/app/pages/Send/modals/ConfirmSend/TezosContent.tsx

@@ -12,7 +12,7 @@ import { toastError, toastSuccess } from 'app/toaster';
 import { TEZ_TOKEN_SLUG } from 'lib/assets';
 import { toTransferParams } from 'lib/assets/contract.utils';
 import { useTezosAssetBalance } from 'lib/balances';
-import { useTezosAssetMetadata } from 'lib/metadata';
+import { useCategorizedTezosAssetMetadata } from 'lib/metadata';
 import { transferImplicit, transferToContract } from 'lib/michelson';
 import { useTypedSWR } from 'lib/swr';
 import { loadContract } from 'lib/temple/contract';
@@ -31,7 +31,7 @@ interface TezosContentProps {
 export const TezosContent: FC<TezosContentProps> = ({ data, onClose }) => {
   const { account, network, assetSlug, to, amount, onConfirm } = data;
 
-  const assetMetadata = useTezosAssetMetadata(assetSlug, network.chainId);
+  const assetMetadata = useCategorizedTezosAssetMetadata(assetSlug, network.chainId);
 
   if (!assetMetadata) throw new Error('Metadata not found');
 

src/app/pages/Token/PageTitle.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 
 import { useEvmTokenMetadataSelector } from 'app/store/evm/tokens-metadata/selectors';
 import { setAnotherSelector, setTestID } from 'lib/analytics';
-import { getAssetSymbol, useTezosAssetMetadata } from 'lib/metadata';
+import { getAssetSymbol, useCategorizedTezosAssetMetadata } from 'lib/metadata';
 import { isEvmNativeTokenSlug } from 'lib/utils/evm.utils';
 import { useEvmChainByChainId } from 'temple/front/chains';
 
@@ -20,7 +20,7 @@ interface EvmProps extends BaseProps {
 }
 
 export const TezosPageTitle = memo<TezosProps>(({ assetSlug, tezosChainId }) => {
-  const assetMetadata = useTezosAssetMetadata(assetSlug, tezosChainId);
+  const assetMetadata = useCategorizedTezosAssetMetadata(assetSlug, tezosChainId);
   const assetSymbol = getAssetSymbol(assetMetadata);
 
   return <BaseTitle assetSymbol={assetSymbol} />;

src/app/pages/Token/index.tsx

@@ -14,7 +14,7 @@ import { ActivityListContainer, EvmActivityList, TezosActivityList } from 'app/t
 import { AdvertisingBanner } from 'app/templates/advertising/advertising-banner/advertising-banner';
 import { ExploreActionButtonsBar } from 'app/templates/ExploreActionButtons';
 import { isTezAsset } from 'lib/assets';
-import { useEvmAssetMetadata, useTezosAssetMetadata } from 'lib/metadata';
+import { useEvmCategorizedAssetMetadata, useCategorizedTezosAssetMetadata } from 'lib/metadata';
 import { useBooleanState } from 'lib/ui/hooks';
 import { HistoryAction, navigate, useLocation } from 'lib/woozie';
 import { TempleChainKind } from 'temple/types';
@@ -64,7 +64,7 @@ const TezosTokenPage: FC<TezosTokenPageProps> = ({ chainId, assetSlug }) => {
 
   const [infoModalOpen, setInfoModalOpen, setInfoModalClosed] = useBooleanState(false);
 
-  const assetMetadata = useTezosAssetMetadata(assetSlug, chainId);
+  const assetMetadata = useCategorizedTezosAssetMetadata(assetSlug, chainId);
 
   const pageProps = useMemo<PageLayoutProps>(
     () => ({
@@ -119,7 +119,7 @@ interface EvmTokenPageProps {
 const EvmTokenPage: FC<EvmTokenPageProps> = ({ chainId, assetSlug }) => {
   const [infoModalOpen, setInfoModalOpen, setInfoModalClosed] = useBooleanState(false);
 
-  const assetMetadata = useEvmAssetMetadata(assetSlug, chainId);
+  const assetMetadata = useEvmCategorizedAssetMetadata(assetSlug, chainId);
 
   const pageProps = useMemo<PageLayoutProps>(
     () => ({

src/app/root-hooks/index.tsx

@@ -8,6 +8,8 @@ import { useConversionTracking } from 'app/hooks/use-conversion-tracking';
 import { useTokensApyLoading } from 'app/hooks/use-load-tokens-apy.hook';
 import { useLongRefreshLoading } from 'app/hooks/use-long-refresh-loading.hook';
 import { useMetadataRefresh } from 'app/hooks/use-metadata-refresh';
+import { useNoCategoryEvmAssetsLoading } from 'app/hooks/use-no-category-evm-assets-loading';
+import { useNoCategoryTezosAssetsLoading } from 'app/hooks/use-no-category-tezos-assets-loading';
 import { useShowAgreementsSync } from 'app/hooks/use-show-agreements-sync';
 import { useStorageAnalytics } from 'app/hooks/use-storage-analytics';
 import { useUserAnalyticsAndAdsSettings } from 'app/hooks/use-user-analytics-and-ads-settings.hook';
@@ -72,6 +74,7 @@ const AppReadyRootHooks = memo(() => {
 
 const TezosAccountHooks = memo<{ publicKeyHash: string }>(({ publicKeyHash }) => {
   useCollectiblesDetailsLoading(publicKeyHash);
+  useNoCategoryTezosAssetsLoading(publicKeyHash);
 
   return (
     <>
@@ -82,10 +85,14 @@ const TezosAccountHooks = memo<{ publicKeyHash: string }>(({ publicKeyHash }) =>
   );
 });
 
-const EvmAccountHooks = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) => (
-  <>
-    <AppEvmTokensExchangeRatesLoading publicKeyHash={publicKeyHash} />
-    <AppEvmTokensMetadataLoading publicKeyHash={publicKeyHash} />
-    <AppEvmBalancesLoading publicKeyHash={publicKeyHash} />
-  </>
-));
+const EvmAccountHooks = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) => {
+  useNoCategoryEvmAssetsLoading(publicKeyHash);
+
+  return (
+    <>
+      <AppEvmTokensExchangeRatesLoading publicKeyHash={publicKeyHash} />
+      <AppEvmTokensMetadataLoading publicKeyHash={publicKeyHash} />
+      <AppEvmBalancesLoading publicKeyHash={publicKeyHash} />
+    </>
+  );
+});

src/app/store/evm/balances/epics.ts

@@ -17,7 +17,7 @@ const loadEvmBalanceOnChainEpic: Epic = action$ =>
 
       return from(evmOnChainBalancesRequestsExecutor.executeRequest(payload)).pipe(
         switchMap(balance =>
-          forkJoin([Promise.resolve(balance), evmOnChainBalancesRequestsExecutor.queueIsEmpty(network.chainId)])
+          forkJoin([Promise.resolve(balance), evmOnChainBalancesRequestsExecutor.poolIsEmpty(network.chainId)])
         ),
         switchMap(([balance, queueIsEmpty]) => {
           const updateBalanceObservable = of(

src/app/store/evm/balances/utils.ts

@@ -6,7 +6,7 @@ import { isNativeTokenAddress } from 'lib/apis/temple/endpoints/evm/api.utils';
 import { toTokenSlug } from 'lib/assets';
 import { EVM_TOKEN_SLUG } from 'lib/assets/defaults';
 import { fetchEvmRawBalance } from 'lib/evm/on-chain/balance';
-import { EvmRpcRequestsExecutor, ExecutionQueueCallbacks } from 'lib/evm/on-chain/utils/evm-rpc-requests-executor';
+import { EvmRpcRequestsExecutor } from 'lib/evm/on-chain/utils/evm-rpc-requests-executor';
 import { isPositiveCollectibleBalance, isPositiveTokenBalance } from 'lib/utils/evm.utils';
 
 import { LoadOnChainBalancePayload } from './actions';
@@ -37,12 +37,8 @@ export const getTokenSlugBalanceRecord = (data: BalanceItem[], chainId: number)
     return acc;
   }, {});
 
-class EvmOnChainBalancesRequestsExecutor extends EvmRpcRequestsExecutor<
-  LoadOnChainBalancePayload & ExecutionQueueCallbacks<BigNumber>,
-  BigNumber,
-  number
-> {
-  protected getQueueKey(payload: LoadOnChainBalancePayload) {
+class EvmOnChainBalancesRequestsExecutor extends EvmRpcRequestsExecutor<LoadOnChainBalancePayload, BigNumber, number> {
+  protected getRequestsPoolKey(payload: LoadOnChainBalancePayload) {
     return payload.network.chainId;
   }
 

src/app/store/evm/no-category-assets-metadata/actions.ts

@@ -0,0 +1,20 @@
+import { createActions } from 'lib/store';
+
+import { ChainId, NoCategoryAssetMetadata } from './state';
+
+export type AssetsMetadataInput = Record<ChainId, StringRecord<NoCategoryAssetMetadata | undefined>>;
+
+export const loadNoCategoryEvmAssetsMetadataActions = createActions<
+  {
+    rpcUrl: string;
+    associatedAccountPkh: HexString;
+    chainId: number;
+    slugs: string[];
+  },
+  { records: AssetsMetadataInput; associatedAccountPkh: HexString; poolsAreEmpty: boolean }
+>('evm/no-category-assets-metadata/LOAD');
+
+export const refreshNoCategoryEvmAssetsMetadataActions = createActions<
+  { associatedAccountPkh: HexString; rpcUrls: Record<number, string> },
+  { records: AssetsMetadataInput; poolsAreEmpty: boolean }
+>('evm/no-category-assets-metadata/REFRESH_MULTIPLE');