feat: improve refresh ux of home balance section.

.eslintrc

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -18,7 +18,10 @@
       {
         "endOfLine": "auto"
       }
-    ]
+    ],
+    "react-hooks/exhaustive-deps": ["off", {
+      "additionalHooks": "(useWallet)"
+    }]
   },
   "env": {
     "browser": true,

package.json

@@ -174,6 +174,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "2.5.4",
     "file-loader": "6.2.0",
     "fs-extra": "10.0.0",

src/background/controller/wallet.ts

@@ -113,9 +113,9 @@ import HdKeyring from '@rabby-wallet/eth-hd-keyring';
 import CoinbaseKeyring from '@rabby-wallet/eth-coinbase-keyring/dist/coinbase-keyring';
 import { customTestnetService } from '../service/customTestnet';
 import { getKeyringBridge, hasBridge } from '../service/keyring/bridge';
-import { http } from '../utils/http';
 import { syncChainService } from '../service/syncChain';
 import { matomoRequestEvent } from '@/utils/matomo-request';
+import { BALANCE_LOADING_TIMES } from '@/constant/timeout';
 
 const stashKeyrings: Record<string | number, any> = {};
 
@@ -1047,28 +1047,50 @@ export class WalletController extends BaseController {
     }
   };
 
-  private getTotalBalanceCached = cached(async (address) => {
-    const data = await openapiService.getTotalBalance(address);
-    preferenceService.updateAddressBalance(address, data);
-    return data;
-    // 5s
-  }, 5000);
-
-  private getTestnetTotalBalanceCached = cached(async (address) => {
-    const testnetData = await testnetOpenapiService.getTotalBalance(address);
-    preferenceService.updateTestnetAddressBalance(address, testnetData);
-    return testnetData;
-  }, 5000);
+  private getTotalBalanceCached = cached(
+    'getTotalBalanceCached',
+    async (address: string) => {
+      const data = await openapiService.getTotalBalance(address);
+      preferenceService.updateAddressBalance(address, data);
+      return data;
+    },
+    BALANCE_LOADING_TIMES.TIMEOUT
+  );
+
+  private getTestnetTotalBalanceCached = cached(
+    'getTestnetTotalBalanceCached',
+    async (address: string) => {
+      const testnetData = await testnetOpenapiService.getTotalBalance(address);
+      preferenceService.updateTestnetAddressBalance(address, testnetData);
+      return testnetData;
+    },
+    BALANCE_LOADING_TIMES.TIMEOUT
+  );
 
   getAddressBalance = async (
     address: string,
     force = false,
     isTestnet = false
   ) => {
     if (isTestnet) {
-      return this.getTestnetTotalBalanceCached([address], address, force);
+      return this.getTestnetTotalBalanceCached.fn([address], address, force);
     }
-    return this.getTotalBalanceCached([address], address, force);
+    return this.getTotalBalanceCached.fn([address], address, force);
+  };
+
+  forceExpireAddressBalance = (address: string, isTestnet = false) => {
+    if (isTestnet) {
+      return this.getTestnetTotalBalanceCached.forceExpire(address);
+    }
+    return this.getTotalBalanceCached.forceExpire(address);
+  };
+
+  isAddressBalanceExpired = (address: string, isTestnet = false) => {
+    if (isTestnet) {
+      return this.getTestnetTotalBalanceCached.isExpired(address);
+    }
+
+    return this.getTotalBalanceCached.isExpired(address);
   };
 
   getAddressCacheBalance = (address: string | undefined, isTestnet = false) => {
@@ -1079,12 +1101,24 @@ export class WalletController extends BaseController {
     return preferenceService.getAddressBalance(address);
   };
 
-  private getNetCurveCached = cached(async (address) => {
-    return openapiService.getNetCurve(address);
-  }, 5000);
+  private getNetCurveCached = cached(
+    'getNetCurveCached',
+    async (address) => {
+      return openapiService.getNetCurve(address);
+    },
+    BALANCE_LOADING_TIMES.TIMEOUT
+  );
+
+  getNetCurve = (address: string, force = false) => {
+    return this.getNetCurveCached.fn([address], address, force);
+  };
+
+  forceExpireNetCurve = (address: string) => {
+    return this.getNetCurveCached.forceExpire(address);
+  };
 
-  getNetCurve = (address, force = false) => {
-    return this.getNetCurveCached([address], address, force);
+  isNetCurveExpired = (address: string) => {
+    return this.getNetCurveCached.isExpired(address);
   };
 
   setHasOtherProvider = (val: boolean) =>
@@ -3620,29 +3654,35 @@ export class WalletController extends BaseController {
    * disable approval management and transaction history when level is 1
    * disable total balance refresh and level 1 content when level is 2
    */
-  getAPIConfig = cached(async () => {
-    interface IConfig {
-      data: {
-        level: number;
-        authorized: {
-          enable: boolean;
-        };
-        balance: {
-          enable: boolean;
-        };
-        history: {
-          enable: boolean;
+  getAPIConfig = cached(
+    'getAPIConfig',
+    async () => {
+      interface IConfig {
+        data: {
+          level: number;
+          authorized: {
+            enable: boolean;
+          };
+          balance: {
+            enable: boolean;
+          };
+          history: {
+            enable: boolean;
+          };
         };
-      };
-    }
-    try {
-      const config = await fetch('https://static.debank.com/rabby/config.json');
-      const { data } = (await config.json()) as IConfig;
-      return data.level;
-    } catch (e) {
-      return 0;
-    }
-  }, 10000);
+      }
+      try {
+        const config = await fetch(
+          'https://static.debank.com/rabby/config.json'
+        );
+        const { data } = (await config.json()) as IConfig;
+        return data.level;
+      } catch (e) {
+        return 0;
+      }
+    },
+    10000
+  ).fn;
 
   rabbyPointVerifyAddress = async (params?: {
     code?: string;
@@ -3771,4 +3811,5 @@ autoLockService.onAutoLock = async () => {
     method: EVENTS.LOCK_WALLET,
   });
 };
+
 export default wallet;

src/background/index.ts

@@ -5,7 +5,13 @@ import browser from 'webextension-polyfill';
 import { ethErrors } from 'eth-rpc-errors';
 import { WalletController } from 'background/controller/wallet';
 import { Message } from '@/utils/message';
-import { CHAINS, CHAINS_ENUM, EVENTS, KEYRING_CATEGORY_MAP } from 'consts';
+import {
+  CHAINS,
+  CHAINS_ENUM,
+  EVENTS,
+  EVENTS_IN_BG,
+  KEYRING_CATEGORY_MAP,
+} from 'consts';
 import { storage } from './webapi';
 import {
   permissionService,
@@ -35,8 +41,8 @@ import createSubscription from './controller/provider/subscriptionManager';
 import buildinProvider from 'background/utils/buildinProvider';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import { setPopupIcon, wait } from './utils';
-import { getSentryEnv } from '@/utils/env';
+import { setPopupIcon } from './utils';
+import { appIsDev, getSentryEnv } from '@/utils/env';
 import { matomoRequestEvent } from '@/utils/matomo-request';
 import { testnetOpenapiService } from './service/openapi';
 import fetchAdapter from '@vespaiach/axios-fetch-adapter';
@@ -104,6 +110,13 @@ async function restoreAppState() {
   startEnableUser();
   walletController.syncMainnetChainList();
 
+  eventBus.addEventListener(EVENTS_IN_BG.ON_TX_COMPLETED, ({ address }) => {
+    if (!address) return;
+
+    walletController.forceExpireAddressBalance(address);
+    walletController.forceExpireNetCurve(address);
+  });
+
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'getBackgroundReady') {
       sendResponse({

src/background/service/transactionWatcher.ts

@@ -5,7 +5,7 @@ import {
 } from 'background/service';
 import { createPersistStore, isSameAddress } from 'background/utils';
 import { notification } from 'background/webapi';
-import { CHAINS, CHAINS_ENUM } from 'consts';
+import { CHAINS, CHAINS_ENUM, EVENTS_IN_BG } from 'consts';
 import { format, getTxScanLink } from '@/utils';
 import eventBus from '@/eventBus';
 import { EVENTS } from '@/constant';
@@ -135,6 +135,12 @@ class TransactionWatcher {
       method: EVENTS.TX_COMPLETED,
       params: { address, hash },
     });
+
+    eventBus.emit(EVENTS_IN_BG.ON_TX_COMPLETED, {
+      address,
+      hash,
+      status: txReceipt.status,
+    });
   };
 
   // fetch pending txs status every 5s

src/background/utils/alarms.ts

@@ -2,3 +2,4 @@ export const ALARMS_AUTO_LOCK = 'ALARMS_AUTO_LOCK';
 export const ALARMS_RPC_CACHE = 'ALARMS_RPC_CACHE';
 export const ALARMS_RELOAD_TX = 'ALARMS_RELOAD_TX';
 export const ALARMS_SYNC_CHAINS = 'ALARMS_SYNC_CHAINS';
+export const ALARMS_REFRESH_BALANCE = 'ALARMS_REFRESH_BALANCE';

src/background/utils/cache.ts

@@ -1,15 +1,28 @@
+import { IExtractFromPromise } from '@/ui/utils/type';
+import { appIsDev } from '@/utils/env';
+
 // cached any function with a key and a timer
-export const cached = <T>(
-  fn: (...args: any[]) => Promise<T>,
-  timer = 3 * 60 * 1000
+export const cached = <T extends (...args: any[]) => Promise<any>>(
+  name: string,
+  fn: T,
+  timeout = 3 * 60 * 1000
 ) => {
   const cache: {
     [key: string]: {
       expire: number;
-      value: T;
+      value: IExtractFromPromise<ReturnType<T>>;
     };
   } = {};
-  return async (args: any[], key: string, force: boolean) => {
+
+  if (appIsDev) {
+    globalThis[`${name}_cache`] = cache;
+  }
+
+  const wrappedFn = async (
+    args: Parameters<T>,
+    key: string,
+    force: boolean
+  ): Promise<IExtractFromPromise<ReturnType<T>>> => {
     const now = Date.now();
 
     if (!force && cache[key] && cache[key].expire > now) {
@@ -18,10 +31,24 @@ export const cached = <T>(
 
     const res = await fn(...args);
     cache[key] = {
-      expire: now + timer,
+      expire: now + timeout,
       value: res,
     };
 
     return res;
   };
+
+  const isExpired = (key: string) => {
+    return !cache[key] || cache[key].expire < Date.now();
+  };
+
+  const forceExpire = (key: string) => {
+    delete cache[key];
+  };
+
+  return {
+    fn: wrappedFn,
+    isExpired,
+    forceExpire,
+  };
 };

src/constant/index.ts

@@ -490,6 +490,11 @@ export const EVENTS = {
   },
   LOCK_WALLET: 'LOCK_WALLET',
   RELOAD_TX: 'RELOAD_TX',
+  // FORCE_EXPIRE_ADDRESS_BALANCE: 'FORCE_EXPIRE_ADDRESS_BALANCE',
+};
+
+export const EVENTS_IN_BG = {
+  ON_TX_COMPLETED: 'ON_TX_COMPLETED',
 };
 
 export enum WALLET_BRAND_TYPES {

src/constant/timeout.ts

@@ -1,5 +1,26 @@
+import { appIsDebugPkg, appIsDev } from '@/utils/env';
+
 /**
  * When calling signatures, it is not possible to receive event messages in time, 
  if the UI has not been initialized
  */
 export const SIGN_TIMEOUT = 100;
+
+export const DEFT_BALANCE_LOADING_TIMEOUT_PROD = 10 * 60 * 1e3;
+export const BALANCE_LOADING_TIMES = appIsDev
+  ? {
+      CHECK_INTERVAL: 2 * 1e3,
+      TIMEOUT: 60 * 1e3,
+      DELAY_AFTER_TX_COMPLETED: 1 * 60 * 1e3,
+    }
+  : appIsDebugPkg
+  ? {
+      CHECK_INTERVAL: 2 * 1e3,
+      TIMEOUT: 90 * 1e3,
+      DELAY_AFTER_TX_COMPLETED: 1 * 60 * 1e3,
+    }
+  : {
+      CHECK_INTERVAL: 2 * 1e3,
+      TIMEOUT: DEFT_BALANCE_LOADING_TIMEOUT_PROD,
+      DELAY_AFTER_TX_COMPLETED: 5 * 60 * 1e3,
+    };

src/ui/hooks/useBalanceChange.ts

@@ -1,3 +1,5 @@
+/* eslint "react-hooks/exhaustive-deps": ["error"] */
+/* eslint-enable react-hooks/exhaustive-deps */
 import { useMemo } from 'react';
 
 import { ExplainTxResponse } from '@/background/service/openapi';
@@ -17,9 +19,9 @@ export default function useBalanceChange({
 }: {
   balance_change?: ExplainTxResponse['balance_change'] | null;
 }) {
-  if (!balance_change) return getDefaultValues();
-
   return useMemo(() => {
+    if (!balance_change) return getDefaultValues();
+
     const hasNFTChange =
       balance_change.receive_nft_list.length > 0 ||
       balance_change.send_nft_list.length > 0;