feat:AddressBook Modal & Search in Account Selecter (#2782)

OneKeyHQ · Mar 30, 2023 · e668f4c · e668f4c
1 parent 3982d7c
commit e668f4c
Show file tree

Hide file tree

Showing 16 changed files with 370 additions and 322 deletions.
diff --git a/packages/kit-bg/src/services/ServiceMigrate.ts b/packages/kit-bg/src/services/ServiceMigrate.ts
@@ -376,9 +376,12 @@ class ServiceMigrate extends ServiceBase {
           },
         })
         .then((resp) => resp.data)
-        .catch(() => ({
-          success: false,
-        }));
+        .catch((error) => {
+          debugLogger.migrate.error('sendDataToServer :', error);
+          return {
+            success: false,
+          };
+        });
       return success;
     } catch (error) {
       debugLogger.migrate.error('sendDataToServer encrypt:', error);

diff --git a/...omponents/NetworkAccountSelector/modals/NetworkAccountSelectorModal/AccountList/index.tsx b/...omponents/NetworkAccountSelector/modals/NetworkAccountSelectorModal/AccountList/index.tsx
@@ -20,7 +20,7 @@ import { shortenAddress } from '@onekeyhq/components/src/utils';
 import type { IAccount } from '@onekeyhq/engine/src/types';
 
 import backgroundApiProxy from '../../../../../background/instance/backgroundApiProxy';
-import { useNetwork } from '../../../../../hooks';
+import { useDebounce, useNetwork } from '../../../../../hooks';
 import { useActiveWalletAccount } from '../../../../../hooks/redux';
 import { ACCOUNT_SELECTOR_AUTO_SCROLL_DELAY_ACCOUNT } from '../../../../Header/AccountSelectorChildren/accountSelectorConsts';
 import { AccountSectionLoadingSkeleton } from '../../../../Header/AccountSelectorChildren/RightAccountSection';
@@ -40,6 +40,24 @@ import SectionHeader from './SectionHeader';
 import type { useAccountSelectorInfo } from '../../../hooks/useAccountSelectorInfo';
 import type { INetworkAccountSelectorAccountListSectionData } from '../../../hooks/useAccountSelectorSectionData';
 
+export function searchAccount(
+  accounts: INetworkAccountSelectorAccountListSectionData[],
+  terms: string,
+): INetworkAccountSelectorAccountListSectionData[] {
+  return accounts
+    .map((item) => {
+      const searchResult = item.data.filter(
+        (account) =>
+          account.name.includes(terms) || account.address.includes(terms),
+      );
+      return {
+        ...item,
+        data: searchResult,
+      };
+    })
+    .filter(({ data }) => data.length > 0);
+}
+
 type EmptyAccountStateProps = {
   walletId: string;
   networkId: string;
@@ -168,9 +186,13 @@ function DerivationSectionHeader({
 
 function AccountList({
   accountSelectorInfo,
+  searchValue,
 }: {
   accountSelectorInfo: ReturnType<typeof useAccountSelectorInfo>;
+  searchValue: string;
 }) {
+  const terms = useDebounce(searchValue, 500).toLowerCase();
+
   const {
     selectedNetworkId,
     selectedNetwork,
@@ -184,8 +206,12 @@ function AccountList({
     INetworkAccountSelectorAccountListSectionData[]
   >([]);
   useEffect(() => {
-    setDataSource(data);
-  }, [data]);
+    if (terms.length && data.length > 0) {
+      setDataSource(searchAccount(data, terms));
+    } else {
+      setDataSource(data);
+    }
+  }, [data, terms]);
 
   const hasMoreDerivationPath = useMemo(() => data.length > 1, [data]);
 

diff --git a/...NetworkAccountSelector/modals/NetworkAccountSelectorModal/NetworkAccountSelectorModal.tsx b/...NetworkAccountSelector/modals/NetworkAccountSelectorModal/NetworkAccountSelectorModal.tsx
@@ -9,6 +9,7 @@ import {
   Modal,
   Pressable,
   ScrollView,
+  Searchbar,
   Typography,
 } from '@onekeyhq/components';
 
@@ -20,6 +21,51 @@ import Header from './Header';
 import { NetWorkExtraInfo } from './NetworkExtraInfo';
 import SideChainSelector from './SideChainSelector';
 
+import type { useAccountSelectorInfo } from '../../hooks/useAccountSelectorInfo';
+
+function LazyDisplayContentView({
+  showSideChainSelector,
+  showCustomLegacyHeader,
+  accountSelectorInfo,
+}: {
+  showSideChainSelector: boolean;
+  showCustomLegacyHeader: boolean;
+  accountSelectorInfo: ReturnType<typeof useAccountSelectorInfo>;
+}) {
+  const [search, setSearch] = useState('');
+
+  return (
+    <Box flex={1} flexDirection="row">
+      {showSideChainSelector ? (
+        <SideChainSelector accountSelectorInfo={accountSelectorInfo} />
+      ) : null}
+      <Box alignSelf="stretch" flex={1}>
+        <Header
+          accountSelectorInfo={accountSelectorInfo}
+          showCustomLegacyHeader={showCustomLegacyHeader}
+        />
+        <Box px="16px" mb="16px">
+          <Searchbar
+            w="full"
+            value={search}
+            onChangeText={setSearch}
+            onClear={() => setSearch('')}
+          />
+        </Box>
+        <ScrollView>
+          <AccountList
+            accountSelectorInfo={accountSelectorInfo}
+            searchValue={search}
+          />
+          <NetWorkExtraInfo
+            accountId={accountSelectorInfo.activeAccount?.id}
+            networkId={accountSelectorInfo.selectedNetworkId}
+          />
+        </ScrollView>
+      </Box>
+    </Box>
+  );
+}
 function NetworkAccountSelectorModal() {
   const intl = useIntl();
 
@@ -71,24 +117,11 @@ function NetworkAccountSelectorModal() {
       height="560px"
     >
       <LazyDisplayView delay={0}>
-        <Box flex={1} flexDirection="row">
-          {showSideChainSelector ? (
-            <SideChainSelector accountSelectorInfo={accountSelectorInfo} />
-          ) : null}
-          <Box alignSelf="stretch" flex={1}>
-            <Header
-              accountSelectorInfo={accountSelectorInfo}
-              showCustomLegacyHeader={showCustomLegacyHeader}
-            />
-            <ScrollView>
-              <AccountList accountSelectorInfo={accountSelectorInfo} />
-              <NetWorkExtraInfo
-                accountId={accountSelectorInfo.activeAccount?.id}
-                networkId={accountSelectorInfo.selectedNetworkId}
-              />
-            </ScrollView>
-          </Box>
-        </Box>
+        <LazyDisplayContentView
+          accountSelectorInfo={accountSelectorInfo}
+          showSideChainSelector={showSideChainSelector}
+          showCustomLegacyHeader={showCustomLegacyHeader}
+        />
       </LazyDisplayView>
     </Modal>
   );

diff --git a/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabMe.ts b/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabMe.ts
@@ -1,7 +1,6 @@
 import { withTabLayout } from '@onekeyhq/components/src/Layout/withTabLayout';
 
 import { toFocusedLazy } from '../../../../../components/LazyRenderWhenFocus';
-import AddressBook from '../../../../../views/AddressBook/Listing';
 import OnekeyLiteDetail from '../../../../../views/Hardware/OnekeyLite/Detail';
 import MeScreen from '../../../../../views/Me';
 import VolumeHaptic from '../../../../../views/Me/GenaralSection/VolumeHaptic';
@@ -38,11 +37,6 @@ const config: TabRouteConfig = {
       name: HomeRoutes.Protected,
       component: Protected,
     },
-    {
-      name: HomeRoutes.AddressBook,
-      component: AddressBook,
-      i18nTitle: 'title__address_book',
-    },
     {
       name: HomeRoutes.WalletSwitch,
       component: WalletSwitch,

diff --git a/packages/kit/src/routes/Root/Modal/AddressBook.tsx b/packages/kit/src/routes/Root/Modal/AddressBook.tsx
@@ -2,6 +2,7 @@ import { useIsVerticalLayout } from '@onekeyhq/components';
 
 import EditAddress from '../../../views/AddressBook/EditAddress';
 import EnterAddress from '../../../views/AddressBook/EnterAddress';
+import AddressBookModal from '../../../views/AddressBook/Listing';
 import NewAddress from '../../../views/AddressBook/NewAddress';
 import PickAddress from '../../../views/AddressBook/PickAddress';
 import { AddressBookRoutes } from '../../../views/AddressBook/routes';
@@ -29,6 +30,10 @@ const modalRoutes = [
     name: AddressBookRoutes.EnterAddressRoute,
     component: EnterAddress,
   },
+  {
+    name: AddressBookRoutes.NewPickAddressRoute,
+    component: AddressBookModal,
+  },
 ];
 
 const AddressBookModalStack = () => {

diff --git a/packages/kit/src/routes/routesEnum.ts b/packages/kit/src/routes/routesEnum.ts
@@ -59,7 +59,6 @@ export enum HomeRoutes {
   // ****  Me Tab
   ScreenOnekeyLiteDetail = 'OnekeyLiteDetailScreen',
   Protected = 'Protected',
-  AddressBook = 'AddressBook',
   WalletSwitch = 'WalletSwitch',
   VolumeHaptic = 'VolumeHaptic',
   CloudBackup = 'CloudBackup',

diff --git a/packages/kit/src/routes/types.ts b/packages/kit/src/routes/types.ts
@@ -127,7 +127,6 @@ export type HomeRoutesParams = {
     onItemSelect?: (item: MatchDAppItemType) => void;
   };
   [HomeRoutes.Protected]: undefined;
-  [HomeRoutes.AddressBook]: undefined;
   [HomeRoutes.SwapHistory]: undefined;
   [HomeRoutes.VolumeHaptic]: undefined;
   [HomeRoutes.CloudBackup]: undefined;