From fcaac619d1b5853c2d9df09ef4973f4492ec0db2 Mon Sep 17 00:00:00 2001 From: DMY <147dmy@gmail.com> Date: Mon, 11 Sep 2023 12:35:28 +0800 Subject: [PATCH] feat: group address --- _raw/locales/en/messages.json | 6 +- _raw/locales/zh_CN/messages.json | 6 +- src/constant/index.ts | 2 +- src/ui/assets/address/sort-by-alphabet.svg | 17 +++--- src/ui/assets/address/sort-by-type.svg | 21 +++---- src/ui/assets/address/sort-by-usd.svg | 15 +++-- .../assets/walletlogo/IconMnemonic-white.svg | 10 ++- src/ui/views/AddressManagement/SortInput.tsx | 61 +++++++++++++++++++ src/ui/views/AddressManagement/SortPopup.tsx | 17 +++--- src/ui/views/AddressManagement/index.tsx | 60 ++++++------------ src/ui/views/AddressManagement/style.less | 48 +++++++++++++++ 11 files changed, 180 insertions(+), 83 deletions(-) create mode 100644 src/ui/views/AddressManagement/SortInput.tsx diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json index 47ae9ad3124..81928783b9c 100644 --- a/_raw/locales/en/messages.json +++ b/_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": { diff --git a/_raw/locales/zh_CN/messages.json b/_raw/locales/zh_CN/messages.json index 791525aaa6f..efc91d94e36 100644 --- a/_raw/locales/zh_CN/messages.json +++ b/_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}}", diff --git a/src/constant/index.ts b/src/constant/index.ts index d4e83e15be4..6f0b9a91952 100644 --- a/src/constant/index.ts +++ b/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, diff --git a/src/ui/assets/address/sort-by-alphabet.svg b/src/ui/assets/address/sort-by-alphabet.svg index 471abc1543c..47b35ba4136 100644 --- a/src/ui/assets/address/sort-by-alphabet.svg +++ b/src/ui/assets/address/sort-by-alphabet.svg @@ -1,11 +1,10 @@ - - + - + + - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/ui/assets/address/sort-by-type.svg b/src/ui/assets/address/sort-by-type.svg index d6b75e2168a..c364a683b39 100644 --- a/src/ui/assets/address/sort-by-type.svg +++ b/src/ui/assets/address/sort-by-type.svg @@ -1,23 +1,22 @@ - - + + + stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" /> - - + + + stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" /> - + - - \ No newline at end of file + \ No newline at end of file diff --git a/src/ui/assets/address/sort-by-usd.svg b/src/ui/assets/address/sort-by-usd.svg index 65d14e3c07b..54d9bfcaadf 100644 --- a/src/ui/assets/address/sort-by-usd.svg +++ b/src/ui/assets/address/sort-by-usd.svg @@ -1,17 +1,16 @@ - - + + - + - - + - - \ No newline at end of file + \ No newline at end of file diff --git a/src/ui/assets/walletlogo/IconMnemonic-white.svg b/src/ui/assets/walletlogo/IconMnemonic-white.svg index bd653db5ae9..667675bb0e0 100644 --- a/src/ui/assets/walletlogo/IconMnemonic-white.svg +++ b/src/ui/assets/walletlogo/IconMnemonic-white.svg @@ -1,4 +1,10 @@ - - + + + + \ No newline at end of file diff --git a/src/ui/views/AddressManagement/SortInput.tsx b/src/ui/views/AddressManagement/SortInput.tsx new file mode 100644 index 00000000000..56067fa8e78 --- /dev/null +++ b/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> +> = { + usd: IconSortByUsd, + addressType: IconSortByType, + alphabet: IconSortByAlphabet, +}; + +export const SortInput = ({ + value, + onChange, +}: { + value: string; + onChange: React.ChangeEventHandler; +}) => { + 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 ; + }, [sortType]); + + return ( + <> +
+
+ {/* */} + {SortIcon} +
+ } + suffix={null} + onChange={onChange} + value={value} + allowClear + /> +
+ + + ); +}; diff --git a/src/ui/views/AddressManagement/SortPopup.tsx b/src/ui/views/AddressManagement/SortPopup.tsx index dafa9972c42..27f86aa81b4 100644 --- a/src/ui/views/AddressManagement/SortPopup.tsx +++ b/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 = { 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 ( { } }, []); + 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 (
@@ -516,34 +527,10 @@ const AddressManagement = () => {
-
- -
- -
- -
- } - onChange={(e) => setSearchKeyword(e.target.value)} - value={searchKeyword} - allowClear - /> - - -
+ setSearchKeyword(e.target.value)} + />
{ 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} diff --git a/src/ui/views/AddressManagement/style.less b/src/ui/views/AddressManagement/style.less index e1728396e9f..8b99728366a 100644 --- a/src/ui/views/AddressManagement/style.less +++ b/src/ui/views/AddressManagement/style.less @@ -250,3 +250,51 @@ overflow: auto; } } + +.sort-input { + display: inline-flex; + border-radius: 6px; + border: 0.5px solid var(--r-neutral-line, #d3d8e0); + background: var(--r-neutral-card-1, #fff); + width: 160px; + height: 32px; + transition: width 0.3s; + padding-right: 4px; + + &:has(> .search-input:hover), + &:has(> .ant-input-affix-wrapper-focused) { + width: 220px; + border-color: var(--r-blue-default, #7084ff); + } + + .sort { + width: 32px; + height: 32px; + padding: 8px; + cursor: pointer; + color: var(--r-neutral-foot); + border-right: 0.5px solid var(--r-neutral-line, #d3d8e0); + + &:hover { + color: var(--r-blue-default, #7084ff); + } + + .icon { + width: 16px; + height: 16px; + } + } + + .search-input { + padding-left: 8px; + border: none; + font-size: 13px; + font-weight: 500; + + &:placeholder-shown { + font-size: 12px; + font-weight: 400; + color: var(--r-neutral-foot); + } + } +}