From 513ca95797764d5c2a1d29a63a96587aa0a09a73 Mon Sep 17 00:00:00 2001
From: weatherstar <weather@onekey.so>
Date: Tue, 17 Dec 2024 09:46:19 +0800
Subject: [PATCH] Fix/wallet issues OK-33767 (#6356)

* chore: temp

* Update Dialog.tsx

* Update Dialog.tsx

* fix: fix focus hooks

* Update index.tsx

* fix: lint

* fix: lint

---------

Co-authored-by: huhuanming <huanming@onekey.so>
---
 .../pages/TokenDetails/TokenDetailsHeader.tsx |  6 ++++
 .../TokenDetails/TokenDetailsHistory.tsx      |  7 +++-
 .../AssetDetails/pages/TokenDetails/index.tsx | 36 ++++++++++++-------
 .../Gallery/Components/stories/Dialog.tsx     |  3 --
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx
index 8bc01871d2d..b2911bf56cb 100644
--- a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx
+++ b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx
@@ -9,6 +9,7 @@ import {
   Stack,
   XStack,
   YStack,
+  useTabIsRefreshingFocused,
 } from '@onekeyhq/components';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import NumberSizeableTextWrapper from '@onekeyhq/kit/src/components/NumberSizeableTextWrapper';
@@ -58,6 +59,7 @@ function TokenDetailsHeader(props: IProps) {
     tokenInfo,
     isAllNetworks,
     indexedAccountId,
+    isTabView,
   } = props;
   const navigation = useAppNavigation();
 
@@ -77,6 +79,8 @@ function TokenDetailsHeader(props: IProps) {
     deriveType,
   });
 
+  const { isFocused } = useTabIsRefreshingFocused();
+
   const { result: tokenDetails, isLoading: isLoadingTokenDetails } =
     usePromiseResult(
       async () => {
@@ -91,6 +95,8 @@ function TokenDetailsHeader(props: IProps) {
       [accountId, networkId, tokenInfo.address],
       {
         watchLoading: true,
+        overrideIsFocused: (isPageFocused) =>
+          isPageFocused && (isTabView ? isFocused : true),
       },
     );
 
diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx
index 8bbb1470816..eeae31da978 100644
--- a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx
+++ b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx
@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 
+import { useTabIsRefreshingFocused } from '@onekeyhq/components';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { TxHistoryListView } from '@onekeyhq/kit/src/components/TxHistoryListView';
 import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
@@ -19,9 +20,11 @@ import type { IProps } from '.';
 function TokenDetailsHistory(props: IProps) {
   const navigation = useAppNavigation();
 
-  const { accountId, networkId, tokenInfo, ListHeaderComponent } = props;
+  const { accountId, networkId, tokenInfo, ListHeaderComponent, isTabView } =
+    props;
 
   const [historyInit, setHistoryInit] = useState(false);
+  const { isFocused } = useTabIsRefreshingFocused();
 
   /**
    * since some tokens are slow to load history,
@@ -46,6 +49,8 @@ function TokenDetailsHistory(props: IProps) {
     {
       watchLoading: true,
       pollingInterval: POLLING_INTERVAL_FOR_HISTORY,
+      overrideIsFocused: (isPageFocused) =>
+        isPageFocused && (isTabView ? isFocused : true),
     },
   );
 
diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx
index 20f691fb367..c14d575a6b2 100644
--- a/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx
+++ b/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx
@@ -4,6 +4,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useRoute } from '@react-navigation/core';
 import { isEmpty } from 'lodash';
 import { useIntl } from 'react-intl';
+import { useWindowDimensions } from 'react-native';
 
 import type {
   IActionListSection,
@@ -18,6 +19,7 @@ import {
   Tab,
   getFontToken,
   useClipboard,
+  useMedia,
   useThemeValue,
 } from '@onekeyhq/components';
 import { HeaderIconButton } from '@onekeyhq/components/src/layouts/Navigation/Header';
@@ -165,6 +167,16 @@ function TokenDetailsView() {
     [fontColor],
   );
 
+  const { gtMd } = useMedia();
+  const { width } = useWindowDimensions();
+
+  const contentItemWidth = useMemo(() => {
+    if (platformEnv.isNative) {
+      return undefined;
+    }
+    return gtMd ? 640 : width;
+  }, [gtMd, width]);
+
   const listViewContentContainerStyle = useMemo(() => ({ pt: '$5' }), []);
   const tabs = useMemo(() => {
     if (accountId && networkId && walletId) {
@@ -221,13 +233,12 @@ function TokenDetailsView() {
     ) {
       if (tabs && !isEmpty(tabs)) {
         return (
-          <Tab.Page
+          <Tab
+            disableRefresh
             data={tabs}
-            contentItemWidth={platformEnv.isNative ? undefined : (640 as any)}
+            contentItemWidth={contentItemWidth as any}
             initialScrollIndex={0}
-            focusable
             showsVerticalScrollIndicator={false}
-            windowSize={tabs.length}
           />
         );
       }
@@ -248,18 +259,19 @@ function TokenDetailsView() {
       />
     );
   }, [
-    listViewContentContainerStyle,
+    isLoading,
+    vaultSettings?.mergeDeriveAssetsEnabled,
+    isAllNetworks,
+    walletId,
     accountId,
+    networkId,
     deriveInfo,
     deriveType,
-    isAllNetworks,
-    isLoading,
-    networkId,
-    tabs,
     tokenInfo,
-    vaultSettings?.mergeDeriveAssetsEnabled,
-    walletId,
-    account,
+    account?.indexedAccountId,
+    listViewContentContainerStyle,
+    tabs,
+    contentItemWidth,
   ]);
 
   return (
diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Dialog.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Dialog.tsx
index 53765bcd0d0..3dc0c22935f 100644
--- a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Dialog.tsx
+++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/Dialog.tsx
@@ -44,9 +44,6 @@ const CustomFooter = ({
   index: number;
   form: UseFormReturn<any>;
 }) => {
-  // test Navigation Container hooks
-  const isFocused = useIsFocused();
-  console.log('isFocused', isFocused);
   const dialog = useDialogInstance();
   return (
     <XStack gap="$4" justifyContent="center">