fix: fix the issue where the Bitcoin details page cannot scroll norma…

…lly. (#6263)
OneKeyHQ · Nov 22, 2024 · ea0c095 · ea0c095
1 parent 68a1bbc
commit ea0c095
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/packages/kit/src/components/TxHistoryListView/index.tsx b/packages/kit/src/components/TxHistoryListView/index.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import type { ReactElement } from 'react';
 
 import { useIntl } from 'react-intl';
+import { useWindowDimensions } from 'react-native';
 
 import type { IListViewProps } from '@onekeyhq/components';
 import {
@@ -11,6 +12,7 @@ import {
   XStack,
   renderNestedScrollView,
 } from '@onekeyhq/components';
+import { useSafeAreaInsets } from '@onekeyhq/components/src/hooks';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { formatDate } from '@onekeyhq/shared/src/utils/dateUtils';
@@ -108,6 +110,9 @@ function TxHistoryListView(props: IProps) {
     searchKey,
   });
 
+  const { bottom, top } = useSafeAreaInsets();
+  const { height: screenHeight } = useWindowDimensions();
+
   const sections = useMemo(
     () =>
       convertToSectionGroups({
@@ -170,24 +175,24 @@ function TxHistoryListView(props: IProps) {
       contentContainerStyle={{
         ...contentContainerStyle,
       }}
-      h="100%"
+      h={platformEnv.isNative ? screenHeight - top - bottom - 90 : '100%'}
       onLayout={onLayout}
       sections={sections}
       ListEmptyComponent={searchKey ? EmptySearch : EmptyHistory}
       estimatedItemSize={platformEnv.isNative ? 60 : 56}
       renderItem={renderItem}
       renderSectionHeader={renderSectionHeader}
       ListFooterComponent={ListFooterComponent}
-      ListHeaderComponent={ListHeaderComponent}
+      ListHeaderComponent={
+        showHeader && data?.length > 0 ? (
+          <TxHistoryListHeader filteredHistory={filteredHistory} />
+        ) : (
+          ListHeaderComponent
+        )
+      }
       keyExtractor={(tx, index) =>
         (tx as IAccountHistoryTx).id || index.toString(10)
       }
-      {...(showHeader &&
-        data?.length > 0 && {
-          ListHeaderComponent: (
-            <TxHistoryListHeader filteredHistory={filteredHistory} />
-          ),
-        })}
     />
   );
 }

diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHistory.tsx
@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
 
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
@@ -24,8 +25,14 @@ function TokenDetailsHistory(
 ) {
   const navigation = useAppNavigation();
 
-  const { accountId, networkId, tokenInfo, historyInit, setHistoryInit } =
-    props;
+  const {
+    accountId,
+    networkId,
+    tokenInfo,
+    historyInit,
+    setHistoryInit,
+    ListHeaderComponent,
+  } = props;
 
   /**
    * since some tokens are slow to load history,
@@ -106,6 +113,7 @@ function TokenDetailsHistory(
         isLoading={isLoadingTokenHistory}
         data={tokenHistory ?? []}
         onPressHistory={handleHistoryItemPress}
+        ListHeaderComponent={ListHeaderComponent as React.ReactElement}
       />
     </ProviderJotaiContextHistoryList>
   );

diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsView.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsView.tsx
@@ -6,6 +6,7 @@ import { Empty, Stack } from '@onekeyhq/components';
 import { AccountSelectorCreateAddressButton } from '@onekeyhq/kit/src/components/AccountSelector/AccountSelectorCreateAddressButton';
 import type { IDBAccount } from '@onekeyhq/kit-bg/src/dbs/local/types';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import TokenDetailsHeader from './TokenDetailsHeader';
 import TokenDetailsHistory from './TokenDetailsHistory';
@@ -60,6 +61,27 @@ function TokenDetailsViews(props: IProps) {
       </Stack>
     );
   }
+  if (platformEnv.isNative) {
+    return (
+      <>
+        <TokenDetailsHistory
+          {...props}
+          accountId={currentAccountId}
+          setHistoryInit={setHistoryInit}
+          historyInit={historyInit}
+          ListHeaderComponent={
+            <TokenDetailsHeader
+              {...props}
+              accountId={currentAccountId}
+              setOverviewInit={setOverviewInit}
+              overviewInit={overviewInit}
+              historyInit={historyInit}
+            />
+          }
+        />
+      </>
+    );
+  }
   return (
     <>
       <TokenDetailsHeader

diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/index.tsx
@@ -4,7 +4,11 @@ import { useRoute } from '@react-navigation/core';
 import { isEmpty } from 'lodash';
 import { useIntl } from 'react-intl';
 
-import type { IActionListSection, IListViewProps } from '@onekeyhq/components';
+import type {
+  IActionListSection,
+  IListViewProps,
+  ISectionListProps,
+} from '@onekeyhq/components';
 import {
   ActionList,
   Page,
@@ -54,6 +58,7 @@ export type IProps = {
   isAllNetworks?: boolean;
   listViewContentContainerStyle?: IListViewProps<IAccountHistoryTx>['contentContainerStyle'];
   indexedAccountId?: string;
+  ListHeaderComponent?: ISectionListProps<any>['ListHeaderComponent'];
 };
 
 function TokenDetails() {