feat: group address

_raw/locales/en/messages.json

@@ -690,7 +690,11 @@
       "backup-seed-phrase": "Backup Seed Phrase",
       "delete-all-addresses-but-keep-the-seed-phrase": "Delete all addresses, but keep the seed phrase",
       "delete-all-addresses-and-the-seed-phrase": "Delete all addresses and the seed phrase",
-      "seed-phrase-delete-title": "Delete seed phrase?"
+      "seed-phrase-delete-title": "Delete seed phrase?",
+      "sort-by-balance": "Sort by balance",
+      "sort-by-address-type": "Sort by address type",
+      "sort-by-address-note": "Sort by address note",
+      "sort-address": "Sort Address"
     },
     "dashboard": {
       "home": {

_raw/locales/zh_CN/messages.json

@@ -809,7 +809,11 @@
       "seed-phrase-delete-title": "删除助记词？",
       "update-balance-data": "刷新所有余额",
       "watch-address": "观察地址",
-      "whitelisted-address": "白名单地址"
+      "whitelisted-address": "白名单地址",
+      "sort-by-balance": "按地址金额排序",
+      "sort-by-address-type": "按地址类型排序",
+      "sort-by-address-note": "按地址备注首字母排序",
+      "sort-address": "地址排序"
     },
     "receive": {
       "title": "在 {{chain}} 上接收{{token}}",

src/constant/index.ts

@@ -641,7 +641,7 @@ export const KEYRING_PURPLE_LOGOS = {
 };
 
 export const KEYRINGS_LOGOS = {
-  [KEYRING_CLASS.MNEMONIC]: LogoMnemonic,
+  [KEYRING_CLASS.MNEMONIC]: IconMnemonicWhite,
   [KEYRING_CLASS.PRIVATE_KEY]: LogoPrivateKey,
   [KEYRING_CLASS.WATCH]: IconWatchWhite,
   [HARDWARE_KEYRING_TYPES.BitBox02.type]: IconBitBox02WithBorder,

src/ui/views/AddressManagement/SortInput.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { useRabbySelector } from '@/ui/store';
+import { Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+import IconSearch from 'ui/assets/search.svg';
+import { AddressSortPopup } from './SortPopup';
+import { useSwitch } from '@/ui/utils/switch';
+
+import { ReactComponent as IconSortByUsd } from '@/ui/assets/address/sort-by-usd.svg';
+import { ReactComponent as IconSortByType } from '@/ui/assets/address/sort-by-type.svg';
+import { ReactComponent as IconSortByAlphabet } from '@/ui/assets/address/sort-by-alphabet.svg';
+import { AddressSortStore } from '@/background/service/preference';
+
+export const AddressSortIconMapping: Record<
+  AddressSortStore['sortType'],
+  React.FC<React.SVGProps<SVGSVGElement>>
+> = {
+  usd: IconSortByUsd,
+  addressType: IconSortByType,
+  alphabet: IconSortByAlphabet,
+};
+
+export const SortInput = ({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}) => {
+  const { t } = useTranslation();
+  const sortType = useRabbySelector(
+    (s) => s.preference.addressSortStore.sortType
+  );
+  const { on, turnOff, turnOn } = useSwitch(false);
+
+  const SortIcon = useMemo(() => {
+    const Icon = AddressSortIconMapping[sortType];
+    return <Icon viewBox="0 0 20 20" className="w-16 h-16" />;
+  }, [sortType]);
+
+  return (
+    <>
+      <div className="sort-input">
+        <div className="sort" onClick={turnOn}>
+          {/* <img className="w-16 h-16" src={AddressSortIconMapping[sortType]} /> */}
+          {SortIcon}
+        </div>
+        <Input
+          className="search-input"
+          placeholder={t('page.manageAddress.search')}
+          prefix={<img src={IconSearch} className="w-16 h-16" />}
+          suffix={null}
+          onChange={onChange}
+          value={value}
+          allowClear
+        />
+      </div>
+      <AddressSortPopup open={on} onCancel={turnOff} />
+    </>
+  );
+};

src/ui/views/AddressManagement/SortPopup.tsx

@@ -7,11 +7,9 @@ import ImgChecked from '@/ui/assets/address/checked.svg';
 
 import { useRabbyDispatch, useRabbySelector } from '@/ui/store';
 import { AddressSortStore } from '@/background/service/preference';
+import { useTranslation } from 'react-i18next';
 
-export const AddressSortIconMapping: Record<
-  AddressSortStore['sortType'],
-  string
-> = {
+const AddressSortImgMapping: Record<AddressSortStore['sortType'], string> = {
   usd: ImgSortByUsd,
   addressType: ImgSortByType,
   alphabet: ImgSortByAlphabet,
@@ -24,6 +22,7 @@ export const AddressSortPopup = ({
   open: boolean;
   onCancel: () => void;
 }) => {
+  const { t } = useTranslation();
   const sortType = useRabbySelector(
     (s) => s.preference.addressSortStore.sortType
   );
@@ -38,22 +37,22 @@ export const AddressSortPopup = ({
       [
         {
           key: 'usd',
-          label: '按地址金额排序',
+          label: t('page.manageAddress.sort-by-balance'),
         },
         {
           key: 'addressType',
-          label: '按地址类型排序',
+          label: t('page.manageAddress.sort-by-address-type'),
         },
         {
           key: 'alphabet',
-          label: '按地址备注首字母排序',
+          label: t('page.manageAddress.sort-by-address-note'),
         },
       ] as const,
     []
   );
   return (
     <Popup
-      title={'地址排序'}
+      title={t('page.manageAddress.sort-address')}
       closable
       visible={open}
       height={258}
@@ -65,7 +64,7 @@ export const AddressSortPopup = ({
             key={e.key}
             py={13}
             bgColor="var(--r-neutral-card-2, #F2F4F7)"
-            leftIcon={AddressSortIconMapping[e.key]}
+            leftIcon={AddressSortImgMapping[e.key]}
             onClick={handleChange(e.key)}
             className="text-14 text-r-neutral-title-1 font-normal"
             leftIconClassName="mr-12 w-20"

src/ui/views/AddressManagement/index.tsx

@@ -6,7 +6,6 @@ import { PageHeader } from 'ui/component';
 import AddressItem from './AddressItem';
 import IconPinned from 'ui/assets/icon-pinned.svg';
 import IconPinnedFill from 'ui/assets/icon-pinned-fill.svg';
-import IconSearch from 'ui/assets/search.svg';
 
 import './style.less';
 import { obj2query } from '@/ui/utils/url';
@@ -20,17 +19,18 @@ import { ReactComponent as IconRight } from '@/ui/assets/address/right.svg';
 
 import { groupBy } from 'lodash';
 import { KEYRING_CLASS } from '@/constant';
-import { Input, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { useRequest } from 'ahooks';
 import { SessionStatusBar } from '@/ui/component/WalletConnect/SessionStatusBar';
 import { LedgerStatusBar } from '@/ui/component/ConnectStatus/LedgerStatusBar';
 import { GridPlusStatusBar } from '@/ui/component/ConnectStatus/GridPlusStatusBar';
 import useDebounceValue from '@/ui/hooks/useDebounceValue';
 import LessPalette from '@/ui/style/var-defs';
-import { AddressSortIconMapping, AddressSortPopup } from './SortPopup';
+// import { AddressSortIconMapping, AddressSortPopup } from './SortPopup';
 import { useSwitch } from '@/ui/utils/switch';
 import { getWalletScore } from '../ManageAddress/hooks';
 import { IDisplayedAccountWithBalance } from '@/ui/models/accountToDisplay';
+import { SortInput } from './SortInput';
 
 function NoAddressUI() {
   const { t } = useTranslation();
@@ -433,6 +433,17 @@ const AddressManagement = () => {
     }
   }, []);
 
+  const getItemSize = React.useCallback(
+    (i: number) => {
+      if (addressSortStore.sortType === 'addressType') {
+        return 56 * (filteredAccounts as typeof accountsList[])[i].length + 16;
+      }
+
+      return i !== sortedAccountsList.length - 1 ? 64 : 78;
+    },
+    [filteredAccounts, sortedAccountsList, addressSortStore.sortType]
+  );
+
   return (
     <div className="page-address-management px-0 overflow-hidden">
       <PageHeader className="pt-[24px] mx-[20px]">
@@ -516,34 +527,10 @@ const AddressManagement = () => {
             </AddressItem>
           </div>
           <div className="flex justify-between items-center text-gray-subTitle text-13 px-20 py-16">
-            <div className="search-address-wrapper">
-              <Input
-                className="radius-6px pl-0"
-                placeholder={t('page.manageAddress.search')}
-                prefix={
-                  <div className="flex items-center justify-center">
-                    <div
-                      className={clsx(
-                        'relative w-32 flex items-center justify-center cursor-pointer',
-                        'after:absolute after:w-[0.5px] after:h-32 after:right-0 after:top-[50%] after:translate-y-[-50%] after:bg-r-neutral-line'
-                      )}
-                      onClick={turnOn}
-                    >
-                      <img
-                        className="w-16 h-16"
-                        src={AddressSortIconMapping[addressSortStore.sortType]}
-                      />
-                    </div>
-                    <img src={IconSearch} className="ml-8 w-16 h-16" />
-                  </div>
-                }
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                value={searchKeyword}
-                allowClear
-              />
-
-              <AddressSortPopup open={on} onCancel={turnOff} />
-            </div>
+            <SortInput
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+            />
             <div
               className="flex items-center cursor-pointer"
               onClick={gotoManageAddress}
@@ -567,16 +554,7 @@ const AddressManagement = () => {
             width="100%"
             itemData={filteredAccounts}
             itemCount={filteredAccounts.length}
-            itemSize={(i) => {
-              if (addressSortStore.sortType === 'addressType') {
-                return (
-                  56 * (filteredAccounts as typeof accountsList[])[i].length +
-                  16
-                );
-              }
-
-              return i !== sortedAccountsList.length - 1 ? 64 : 78;
-            }}
+            itemSize={getItemSize}
             className="scroll-container"
           >
             {Row}