wip

__tests__/migration/contactMigration.test.ts

@@ -55,6 +55,10 @@ const data: { preference: PreferenceStore; contactBook } = {
     walletSavedList: [],
     watchAddressPreference: {},
     testnetBalanceMap: {},
+    addressSortStore: {
+      search: '',
+      sortType: 'usd',
+    },
   },
   contactBook: {
     '0x10b26700b0a2d3f5ef12fa250aba818ee3b43bf4': {
@@ -188,6 +192,10 @@ test('should migrate when no alians', () => {
       walletSavedList: [],
       watchAddressPreference: {},
       testnetBalanceMap: {},
+      addressSortStore: {
+        search: '',
+        sortType: 'usd',
+      },
     },
     contactBook: {
       '0x10b26700b0a2d3f5ef12fa250aba818ee3b43bf4': {
@@ -316,6 +324,10 @@ test('should migrate when no contacts', () => {
       walletSavedList: [],
       watchAddressPreference: {},
       testnetBalanceMap: {},
+      addressSortStore: {
+        search: '',
+        sortType: 'usd',
+      },
     },
     contactBook: {},
   };

src/background/controller/wallet.ts

@@ -1110,6 +1110,9 @@ export class WalletController extends BaseController {
   getLastSelectedGasTopUpChain = preferenceService.getLastSelectedGasTopUpChain;
   setLastSelectedGasTopUpChain = preferenceService.setLastSelectedGasTopUpChain;
 
+  getAddressSortStoreValue = preferenceService.getAddressSortStoreValue;
+  setAddressSortStoreValue = preferenceService.setAddressSortStoreValue;
+
   getLastSelectedSwapChain = swapService.getSelectedChain;
   setLastSelectedSwapChain = swapService.setSelectedChain;
   getSwap = swapService.getSwap;

src/background/service/preference.ts

@@ -91,8 +91,20 @@ export interface PreferenceStore {
   autoLockTime?: number;
   hiddenBalance?: boolean;
   isShowTestnet?: boolean;
+  addressSortStore: AddressSortStore;
 }
 
+export interface AddressSortStore {
+  search: string;
+  sortType: 'usd' | 'addressType' | 'alphabet';
+  lastCurrent?: string;
+}
+
+const defaultAddressSortStore: AddressSortStore = {
+  search: '',
+  sortType: 'usd',
+};
+
 class PreferenceService {
   store!: PreferenceStore;
   popupOpen = false;
@@ -133,8 +145,14 @@ class PreferenceService {
         collectionStarred: [],
         hiddenBalance: false,
         isShowTestnet: false,
+        addressSortStore: {
+          ...defaultAddressSortStore,
+        },
       },
     });
+    //lifetime in background
+    this.store.addressSortStore = { ...defaultAddressSortStore };
+
     if (
       !this.store.locale ||
       !LANGS.find((item) => item.code === this.store.locale)
@@ -691,6 +709,19 @@ class PreferenceService {
   resetCurrentCoboSafeAddress = async () => {
     this.setCurrentAccount(this.currentCoboSafeAddress ?? null);
   };
+
+  getAddressSortStoreValue = (key: keyof AddressSortStore) =>
+    this.store.addressSortStore[key];
+
+  setAddressSortStoreValue = <K extends keyof AddressSortStore>(
+    key: K,
+    value: AddressSortStore[K]
+  ) => {
+    this.store.addressSortStore = {
+      ...this.store.addressSortStore,
+      [key]: value,
+    };
+  };
 }
 
 export default new PreferenceService();

src/ui/component/AddressList/style.less

@@ -124,6 +124,40 @@
 }
 .address-wrap-with-padding {
   .address-wrap;
+  margin-bottom: 0;
+
+  &.group:nth-child(n + 2) {
+    .rabby-address-item-container .rabby-address-item {
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        content: '';
+        width: 100%;
+        height: 0;
+        border-top: 0.5px solid var(--r-neutral-line, #d3d8e0);
+      }
+    }
+  }
+
+  &.group:nth-child(1) {
+    .rabby-address-item-container .rabby-address-item {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+    }
+  }
+  &.group:nth-last-child(1) {
+    .rabby-address-item-container .rabby-address-item {
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+
+  &.group .rabby-address-item-container .rabby-address-item {
+    border-radius: 0;
+  }
+
   &:nth-last-child(1) {
     padding-bottom: 200px;
   }

src/ui/models/preference.ts

@@ -1,7 +1,11 @@
 import { createModel } from '@rematch/core';
 import { RootModel } from '.';
 import { TokenItem } from 'background/service/openapi';
-import { GasCache, addedToken } from 'background/service/preference';
+import {
+  AddressSortStore,
+  GasCache,
+  addedToken,
+} from 'background/service/preference';
 import { CHAINS_ENUM } from 'consts';
 import i18n from '@/i18n';
 
@@ -22,6 +26,7 @@ interface PreferenceState {
   autoLockTime: number;
   hiddenBalance: boolean;
   isShowTestnet: boolean;
+  addressSortStore: AddressSortStore;
 }
 
 export const preference = createModel<RootModel>()({
@@ -44,6 +49,7 @@ export const preference = createModel<RootModel>()({
     autoLockTime: 0,
     hiddenBalance: false,
     isShowTestnet: false,
+    addressSortStore: {} as AddressSortStore,
   } as PreferenceState,
 
   reducers: {
@@ -179,6 +185,19 @@ export const preference = createModel<RootModel>()({
       dispatch.preference.getPreference('locale');
     },
 
+    async getAddressSortStoreValue(key: keyof AddressSortStore, store?) {
+      const value = await store.app.wallet.getAddressSortStoreValue(key);
+      return value;
+    },
+
+    async setAddressSortStoreValue<K extends keyof AddressSortStore>(
+      { key, value }: { key: K; value: AddressSortStore[K] },
+      store?
+    ) {
+      await store.app.wallet.setAddressSortStoreValue(key, value);
+      dispatch.preference.getPreference('addressSortStore');
+    },
+
     // async setOpenapiHost(value: string, store?) {
     //   dispatch.preference.setField({
     //     isShowTestnet: value,

src/ui/views/AddressManagement/SortPopup.tsx

@@ -0,0 +1,81 @@
+import { Item, Popup } from '@/ui/component';
+import React, { useMemo } from 'react';
+import ImgSortByUsd from '@/ui/assets/address/sort-by-usd.svg';
+import ImgSortByType from '@/ui/assets/address/sort-by-type.svg';
+import ImgSortByAlphabet from '@/ui/assets/address/sort-by-alphabet.svg';
+import ImgChecked from '@/ui/assets/address/checked.svg';
+
+import { useRabbyDispatch, useRabbySelector } from '@/ui/store';
+import { AddressSortStore } from '@/background/service/preference';
+
+export const AddressSortIconMapping: Record<
+  AddressSortStore['sortType'],
+  string
+> = {
+  usd: ImgSortByUsd,
+  addressType: ImgSortByType,
+  alphabet: ImgSortByAlphabet,
+};
+
+export const AddressSortPopup = ({
+  open,
+  onCancel,
+}: {
+  open: boolean;
+  onCancel: () => void;
+}) => {
+  const sortType = useRabbySelector(
+    (s) => s.preference.addressSortStore.sortType
+  );
+  const dispath = useRabbyDispatch();
+  const handleChange = (value: AddressSortStore['sortType']) => () => {
+    dispath.preference.setAddressSortStoreValue({ key: 'sortType', value });
+    onCancel?.();
+  };
+
+  const arr = useMemo(
+    () =>
+      [
+        {
+          key: 'usd',
+          label: '按地址金额排序',
+        },
+        {
+          key: 'addressType',
+          label: '按地址类型排序',
+        },
+        {
+          key: 'alphabet',
+          label: '按地址备注首字母排序',
+        },
+      ] as const,
+    []
+  );
+  return (
+    <Popup
+      title={'地址排序'}
+      closable
+      visible={open}
+      height={258}
+      onCancel={onCancel}
+    >
+      <div className="flex flex-col gap-8">
+        {arr.map((e) => (
+          <Item
+            key={e.key}
+            py={13}
+            bgColor="var(--r-neutral-card-2, #F2F4F7)"
+            leftIcon={AddressSortIconMapping[e.key]}
+            onClick={handleChange(e.key)}
+            className="text-14 text-r-neutral-title-1 font-normal"
+            leftIconClassName="mr-12 w-20"
+            rightIcon={sortType === e.key ? ImgChecked : null}
+            rightIconClassName="w-20"
+          >
+            {e.label}
+          </Item>
+        ))}
+      </div>
+    </Popup>
+  );
+};