feat: optimize balance and history api query (#3088)

Author: qwang1113

packages/engine/src/apiProxyUtils.ts

@@ -1,3 +1,4 @@
+import debugLogger from '@onekeyhq/shared/src/logger/debugLogger';
 import { RestfulRequest } from '@onekeyhq/shared/src/request/RestfulRequest';
 
 import { getFiatEndpoint } from './endpoint';
@@ -41,6 +42,7 @@ export const getBalancesFromApi = async ({
   if (tokenAddresses?.length) {
     query.contract_addresses = tokenAddresses;
   }
+  debugLogger.http.info('getBalancesFromApi', query);
   return (await req
     .get('/token/balances', query)
     .then((res) => res.json())) as TokenBalancesResponse;

packages/kit-bg/src/services/ServiceHistory.ts

@@ -20,6 +20,7 @@ import {
   backgroundMethod,
 } from '@onekeyhq/shared/src/background/backgroundDecorators';
 import { HISTORY_CONSTS } from '@onekeyhq/shared/src/engine/engineConsts';
+import debugLogger from '@onekeyhq/shared/src/logger/debugLogger';
 
 import ServiceBase from './ServiceBase';
 
@@ -107,6 +108,12 @@ class ServiceHistory extends ServiceBase {
         this.backgroundApi.dispatch(setIsPasswordLoadedInVault(isLoaded));
     }
 
+    debugLogger.http.info('fetchOnChainHistory', {
+      networkId,
+      accountId,
+      tokenIdOnNetwork,
+    });
+
     return vault.fetchOnChainHistory({
       // TODO limit=50
       localHistory,

packages/kit/src/hooks/useVisibilityFocused.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+
+import { useFocusEffect } from '@react-navigation/core';
+
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+
+export const useVisibilityFocused = () => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const onBlur = useCallback(() => setIsFocused(false), []);
+  const onFocus = useCallback(() => setIsFocused(true), []);
+
+  const visibilityStateListener = useCallback(() => {
+    if (document.visibilityState === 'hidden') {
+      onBlur();
+    }
+    if (document.visibilityState === 'visible') {
+      onFocus();
+    }
+  }, [onFocus, onBlur]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onFocus();
+
+      if (platformEnv.isRuntimeBrowser) {
+        document.addEventListener('visibilitychange', visibilityStateListener);
+        if (!platformEnv.isDesktop) {
+          window.addEventListener('blur', onBlur);
+          window.addEventListener('focus', onFocus);
+        }
+      }
+
+      return () => {
+        onBlur();
+        if (platformEnv.isRuntimeBrowser) {
+          document.removeEventListener(
+            'visibilitychange',
+            visibilityStateListener,
+          );
+          if (!platformEnv.isDesktop) {
+            window.removeEventListener('blur', onBlur);
+            window.removeEventListener('focus', onFocus);
+          }
+        }
+      };
+    }, [visibilityStateListener, onBlur, onFocus]),
+  );
+
+  return isFocused;
+};

packages/kit/src/views/TxHistory/TxHistoryListView.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useIsFocused } from '@react-navigation/native';
 import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
@@ -24,6 +23,7 @@ import debugLogger from '@onekeyhq/shared/src/logger/debugLogger';
 import backgroundApiProxy from '../../background/instance/backgroundApiProxy';
 import { useAppSelector } from '../../hooks';
 import useFormatDate from '../../hooks/useFormatDate';
+import { useVisibilityFocused } from '../../hooks/useVisibilityFocused';
 import { wait } from '../../utils/helper';
 import { useIsAtHomeTab } from '../../utils/routeUtils';
 import { TxListItemView } from '../TxDetail/TxListItemView';
@@ -245,6 +245,8 @@ function TxHistoryListViewComponent({
   const { serviceHistory } = backgroundApiProxy;
   const refreshHistoryTs = useAppSelector((s) => s.refresher.refreshHistoryTs);
 
+  const isFocused = useVisibilityFocused();
+
   const fetchHistoryTx = useCallback(
     async (options: { refresh?: boolean } = {}): Promise<IHistoryTx[]> => {
       const { refresh = true } = options;
@@ -279,7 +281,6 @@ function TxHistoryListViewComponent({
     () => fetchHistoryTx({ refresh: false }),
     [fetchHistoryTx],
   );
-  const isFocused = useIsFocused();
 
   const shouldDoRefresh = useMemo((): boolean => {
     if (!accountId || !networkId) {

packages/kit/src/views/Wallet/AssetsList/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { useFocusEffect, useNavigation } from '@react-navigation/core';
+import { useNavigation } from '@react-navigation/core';
 import { omit } from 'lodash';
 import { useDebounce } from 'use-debounce';
 
@@ -27,8 +27,11 @@ import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import backgroundApiProxy from '../../../background/instance/backgroundApiProxy';
 import { useAccountTokens, useActiveSideAccount } from '../../../hooks';
+import { useStatus } from '../../../hooks/redux';
 import { useAccountTokenLoading } from '../../../hooks/useTokens';
+import { useVisibilityFocused } from '../../../hooks/useVisibilityFocused';
 import { OverviewDefiThumbnal } from '../../Overview/Thumbnail';
+import { WalletHomeTabEnum } from '../type';
 
 import AssetsListHeader from './AssetsListHeader';
 import { EmptyListOfAccount } from './EmptyList';
@@ -127,15 +130,6 @@ function AssetsList({
     },
   );
 
-  const visibilityStateListener = useCallback(() => {
-    if (document.visibilityState === 'hidden') {
-      stopRefresh();
-    }
-    if (document.visibilityState === 'visible') {
-      startRefresh();
-    }
-  }, [startRefresh, stopRefresh]);
-
   useEffect(() => {
     const { serviceOverview } = backgroundApiProxy;
     serviceOverview.subscribe();
@@ -145,42 +139,20 @@ function AssetsList({
     }
   }, [networkId, accountId, startRefresh, stopRefresh]);
 
-  useFocusEffect(
-    useCallback(() => {
-      const { serviceToken } = backgroundApiProxy;
+  const { homeTabName } = useStatus();
+
+  const isFocused = useVisibilityFocused();
+
+  useEffect(() => {
+    if (isFocused && homeTabName === WalletHomeTabEnum.Tokens) {
       if (!account || !network) {
         return;
       }
-      serviceToken.fetchAccountTokens({
-        includeTop50TokensQuery: true,
-        networkId: network?.id,
-        accountId: account?.id,
-      });
-
       startRefresh();
-      if (platformEnv.isRuntimeBrowser) {
-        document.addEventListener('visibilitychange', visibilityStateListener);
-        if (!platformEnv.isDesktop) {
-          window.addEventListener('blur', stopRefresh);
-          window.addEventListener('focus', startRefresh);
-        }
-      }
-
-      return () => {
-        stopRefresh();
-        if (platformEnv.isRuntimeBrowser) {
-          document.removeEventListener(
-            'visibilitychange',
-            visibilityStateListener,
-          );
-          if (!platformEnv.isDesktop) {
-            window.removeEventListener('blur', stopRefresh);
-            window.removeEventListener('focus', startRefresh);
-          }
-        }
-      };
-    }, [account, network, visibilityStateListener, startRefresh, stopRefresh]),
-  );
+    } else {
+      stopRefresh();
+    }
+  }, [isFocused, startRefresh, stopRefresh, account, network, homeTabName]);
 
   const onTokenCellPress = useCallback(
     (item: Token) => {