From ab1488b9cb882f186b2f50b77c4e1eec36034702 Mon Sep 17 00:00:00 2001 From: Hodor Date: Wed, 4 Dec 2024 18:23:32 +0800 Subject: [PATCH 1/3] feat: update custom network --- src/background/controller/wallet.ts | 2 + src/background/service/customTestnet.ts | 50 +++++++-- .../components/SelectChainItem.tsx | 16 ++- src/ui/component/TestnetChainLogo/index.tsx | 2 +- src/ui/models/chains.ts | 13 ++- src/ui/utils/token.ts | 2 +- src/ui/views/ApprovalManagePage/index.tsx | 3 +- .../views/CommonPopup/AssetList/AssetList.tsx | 8 +- .../CustomTestnetAssetListContainer.tsx | 19 +++- .../CustomTestnetTokenItem.tsx | 9 +- .../CustomTestnetAssetList/index.tsx | 3 + .../AssetList/TestnetChainList.tsx | 106 ++++++++++++++++++ .../components/AddFromChainList.tsx | 27 ++++- .../components/CustomTestnetItem.tsx | 10 +- src/ui/views/History/index.tsx | 10 +- src/ui/views/Swap/Component/Main.tsx | 1 + .../TestnetTranasctionHistory.tsx | 46 ++++++++ src/ui/views/TransactionHistory/style.less | 3 +- 18 files changed, 287 insertions(+), 43 deletions(-) create mode 100644 src/ui/views/CommonPopup/AssetList/TestnetChainList.tsx create mode 100644 src/ui/views/TransactionHistory/TestnetTranasctionHistory.tsx diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index ee792908e2d..0803f446b24 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -132,6 +132,7 @@ import Browser from 'webextension-polyfill'; import SafeApiKit from '@safe-global/api-kit'; import { hashSafeMessage } from '@safe-global/protocol-kit'; import { userGuideService } from '../service/userGuide'; +import { sleep } from '@/ui/views/HDManager/utils'; const stashKeyrings: Record = {}; @@ -4812,6 +4813,7 @@ export class WalletController extends BaseController { isAddedCustomTestnetToken = customTestnetService.hasToken; getCustomTestnetTx = customTestnetService.getTx; getCustomTestnetTxReceipt = customTestnetService.getTransactionReceipt; + getCustomTestnetLogos = () => customTestnetService.fetchLogos; // getCustomTestnetTokenListWithBalance = customTestnetService.getTokenListWithBalance; getUsedCustomTestnetChainList = async () => { diff --git a/src/background/service/customTestnet.ts b/src/background/service/customTestnet.ts index 672046b2ccf..e3765e9782f 100644 --- a/src/background/service/customTestnet.ts +++ b/src/background/service/customTestnet.ts @@ -66,6 +66,7 @@ export interface CustomTestnetTokenBase { export interface CustomTestnetToken extends CustomTestnetTokenBase { amount: number; rawAmount: string; + logo?: string; } export type CutsomTestnetServiceStore = { @@ -89,6 +90,14 @@ class CustomTestnetService { chains: Record = {}; + logos: Record< + string, + { + chain_logo_url: string; + token_logo_url?: string; + } + > = {}; + init = async () => { const storage = await createPersistStore({ name: 'customTestnet', @@ -102,10 +111,9 @@ class CustomTestnetService { const client = createClientByChain(chain); this.chains[chain.id] = client; }); - updateChainStore({ - testnetList: Object.values(this.store.customTestnet).map((item) => { - return createTestnetChain(item); - }), + this.syncChainList(); + this.fetchLogos().then(() => { + this.syncChainList(); }); }; add = async (chain: TestnetChainBase) => { @@ -207,7 +215,14 @@ class CustomTestnetService { getList = () => { const list = Object.values(this.store.customTestnet).map((item) => { - return createTestnetChain(item); + const res = createTestnetChain(item); + + if (this.logos?.[res.id]) { + res.logo = this.logos[res.id].chain_logo_url; + res.nativeTokenLogo = this.logos[res.id].token_logo_url || ''; + } + + return res; }); return list; @@ -257,6 +272,7 @@ class CustomTestnetService { id: chain.nativeTokenAddress, chainId: chain.id, rawAmount: '0', + logo: this.logos?.[chain.id]?.token_logo_url, }), }; }) @@ -273,6 +289,7 @@ class CustomTestnetService { id: chain.nativeTokenAddress, chainId: chain.id, rawAmount: '0', + logo: this.logos?.[chain.id]?.token_logo_url, }), }; }); @@ -444,7 +461,7 @@ class CustomTestnetService { chainId: number; address: string; tokenId?: string | null; - }) => { + }): Promise => { const [balance, tokenInfo] = await Promise.all([ this.getBalance({ chainId, @@ -463,6 +480,10 @@ class CustomTestnetService { ...tokenInfo, amount: new BigNumber(balance.toString()).div(10 ** decimals).toNumber(), rawAmount: balance.toString(), + logo: + tokenId?.replace('custom_', '') === String(chainId) + ? this.logos?.[chainId]?.token_logo_url + : undefined, }; }; @@ -641,6 +662,19 @@ class CustomTestnetService { testnetList: testnetList, }); }; + + fetchLogos = async () => { + try { + const { data } = await axios.get( + 'https://static.debank.com/supported_testnet_chains.json' + ); + this.logos = data; + return data; + } catch (e) { + console.error(e); + return {}; + } + }; } export const customTestnetService = new CustomTestnetService(); @@ -677,8 +711,8 @@ export const createTestnetChain = (chain: TestnetChainBase): TestnetChain => { nativeTokenDecimals: 18, nativeTokenLogo: '', scanLink: chain.scanLink || '', - logo: `data:image/svg+xml;utf8,${encodeURIComponent( - chain.name.substring(0, 3) + logo: `data:image/svg+xml;utf8,${encodeURIComponent( + chain.name.trim().substring(0, 1) )}`, eip: { 1559: false, diff --git a/src/ui/component/ChainSelector/components/SelectChainItem.tsx b/src/ui/component/ChainSelector/components/SelectChainItem.tsx index b3f968101bb..d5521b4f47d 100644 --- a/src/ui/component/ChainSelector/components/SelectChainItem.tsx +++ b/src/ui/component/ChainSelector/components/SelectChainItem.tsx @@ -95,10 +95,18 @@ export const SelectChainItem = forwardRef( >
{data.isTestnet ? ( - + data.logo ? ( + + ) : ( + + ) ) : ( <> {showRPCStatus ? ( diff --git a/src/ui/component/TestnetChainLogo/index.tsx b/src/ui/component/TestnetChainLogo/index.tsx index e7d65ecd398..f717b571e4d 100644 --- a/src/ui/component/TestnetChainLogo/index.tsx +++ b/src/ui/component/TestnetChainLogo/index.tsx @@ -17,7 +17,7 @@ export const TestnetChainLogo = ({ className )} > - {name.substring(0, 3)} + {name.trim().substring(0, 1)}
); }; diff --git a/src/ui/models/chains.ts b/src/ui/models/chains.ts index 9eda3105de0..3bb05281032 100644 --- a/src/ui/models/chains.ts +++ b/src/ui/models/chains.ts @@ -73,12 +73,15 @@ export const chains = createModel()({ }, effects: (dispatch) => ({ init(_: void, store) { - store.app.wallet.getCustomTestnetList().then((testnetList) => { - updateChainStore({ - testnetList: testnetList, + store.app.wallet + .getCustomTestnetLogos() + .then(() => store.app.wallet.getCustomTestnetList()) + .then((testnetList) => { + updateChainStore({ + testnetList: testnetList, + }); + this.setField({ testnetList }); }); - this.setField({ testnetList }); - }); getMainnetListFromLocal().then((mainnetList) => { if (mainnetList.length) { updateChainStore({ diff --git a/src/ui/utils/token.ts b/src/ui/utils/token.ts index f5a619a61b3..2ae1c4f3f59 100644 --- a/src/ui/utils/token.ts +++ b/src/ui/utils/token.ts @@ -199,7 +199,7 @@ export const customTestnetTokenToTokenItem = ( is_wallet: false, is_scam: false, is_suspicious: false, - logo_url: '', + logo_url: token.logo || '', name: token.symbol, optimized_symbol: token.symbol, price: 0, diff --git a/src/ui/views/ApprovalManagePage/index.tsx b/src/ui/views/ApprovalManagePage/index.tsx index d1f5f3a80cb..a5f7196c9af 100644 --- a/src/ui/views/ApprovalManagePage/index.tsx +++ b/src/ui/views/ApprovalManagePage/index.tsx @@ -997,7 +997,8 @@ const ApprovalManagePage = () => { const { t } = useTranslation(); - const { isShowTestnet, selectedTab, onTabChange } = useSwitchNetTab(); + const { selectedTab, onTabChange } = useSwitchNetTab(); + const isShowTestnet = false; const { isDarkTheme } = useThemeMode(); const [chain, setChain] = React.useState(); diff --git a/src/ui/views/CommonPopup/AssetList/AssetList.tsx b/src/ui/views/CommonPopup/AssetList/AssetList.tsx index 8ca5ec06c65..4c4a91c3ac3 100644 --- a/src/ui/views/CommonPopup/AssetList/AssetList.tsx +++ b/src/ui/views/CommonPopup/AssetList/AssetList.tsx @@ -14,6 +14,7 @@ import { Button } from 'antd'; import { SpecialTokenListPopup } from './components/TokenButton'; import { useRabbySelector } from '@/ui/store'; import useSortToken from '@/ui/hooks/useSortTokens'; +import { TestnetChainList } from './TestnetChainList'; export const AssetList = ({ visible, @@ -121,7 +122,12 @@ export const AssetList = ({
- + +
); diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx index 64719074fbb..e051f514399 100644 --- a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx +++ b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx @@ -2,7 +2,7 @@ import { useRabbySelector } from '@/ui/store'; import { isSameAddress, useWallet } from '@/ui/utils'; import { useRequest } from 'ahooks'; import { Input } from 'antd'; -import React from 'react'; +import React, { useMemo } from 'react'; import { TokenListSkeleton, TokenListViewSkeleton, @@ -22,16 +22,14 @@ interface Props { className?: string; visible: boolean; onEmptyAssets: (isEmpty: boolean) => void; - isTestnet?: boolean; - onRefresh?: () => void; + selectChainId?: string | null; } export const CustomTestnetAssetListContainer: React.FC = ({ className, visible, onEmptyAssets, - isTestnet = false, - onRefresh, + selectChainId, }) => { const { t } = useTranslation(); const [search, setSearch] = React.useState(''); @@ -67,7 +65,7 @@ export const CustomTestnetAssetListContainer: React.FC = ({ const wallet = useWallet(); - const { data: list, loading, mutate, refreshAsync } = useRequest( + const { data: _list, loading, mutate, refreshAsync } = useRequest( async () => { return wallet.getCustomTestnetTokenList({ address: currentAccount!.address, @@ -86,6 +84,15 @@ export const CustomTestnetAssetListContainer: React.FC = ({ } ); + const list = useMemo(() => { + if (!selectChainId) { + return _list; + } + return _list?.filter((item) => { + return String(item.chainId) === selectChainId; + }); + }, [_list, selectChainId]); + if (!isFetched && !search) { return ; } diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx index 85c712d7209..e8c771a6260 100644 --- a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx +++ b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx @@ -23,7 +23,7 @@ const TokenItemAsset: React.FC = ({ item }) => {
{item.symbol} = ({ item }) => {
- +
{item.symbol} - +
+
+ {chain?.name} +
); diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/index.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/index.tsx index 6c1bbd24725..dfe294a621d 100644 --- a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/index.tsx +++ b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/index.tsx @@ -9,9 +9,11 @@ import { useHistory } from 'react-router-dom'; export const CustomTestnetAssetList = ({ visible, onClose, + selectChainId, }: { visible: boolean; onClose?(): void; + selectChainId?: string | null; }) => { const { t } = useTranslation(); @@ -50,6 +52,7 @@ export const CustomTestnetAssetList = ({ className="mt-12" visible={visible} onEmptyAssets={setIsTestnetEmptyAssets} + selectChainId={selectChainId} /> diff --git a/src/ui/views/CommonPopup/AssetList/TestnetChainList.tsx b/src/ui/views/CommonPopup/AssetList/TestnetChainList.tsx new file mode 100644 index 00000000000..2e758dcf536 --- /dev/null +++ b/src/ui/views/CommonPopup/AssetList/TestnetChainList.tsx @@ -0,0 +1,106 @@ +import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow'; +import { useRabbySelector } from '@/ui/store'; +import { useCommonPopupView } from '@/ui/utils'; +import clsx from 'clsx'; +import { sortBy } from 'lodash'; +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const COUNT = 5; + +export const TestnetChainList = ({ + onChange, +}: { + onChange(id: string | null): void; +}) => { + const { data, visible } = useCommonPopupView(); + const chainList = useRabbySelector((store) => + sortBy(store.chains.testnetList, (item) => item.name) + ); + const [showMore, setShowMore] = React.useState(false); + const [activeChainId, setActiveChainId] = React.useState(null); + const { t } = useTranslation(); + + const handleSelectChain = (id?: string) => { + if (!id || activeChainId === id) { + setActiveChainId(null); + onChange(null); + } else { + setActiveChainId(id); + onChange(id); + } + }; + + const renderChainList = useMemo(() => { + return showMore ? chainList : chainList.slice(0, COUNT); + }, [showMore, chainList]); + + React.useEffect(() => { + if (!visible) { + setShowMore(false); + handleSelectChain(); + } + }, [visible]); + + const moreLen = chainList.length - COUNT; + + // if (balanceLoading) { + // return ( + // + // ); + // } + + return ( +
+ {renderChainList.map((item) => { + const inactive = + activeChainId !== null && activeChainId !== String(item.id); + return ( +
{ + handleSelectChain(item.network); + }} + > + {item.name} +
+ {item.name} +
+
+ ); + })} + {!showMore && moreLen > COUNT ? ( +
{ + setShowMore(true); + }} + > + {moreLen > 1 + ? t('page.dashboard.assets.unfoldChainPlural', { moreLen }) + : t('page.dashboard.assets.unfoldChain')} +
+ ) : null} +
+ ); +}; diff --git a/src/ui/views/CustomTestnet/components/AddFromChainList.tsx b/src/ui/views/CustomTestnet/components/AddFromChainList.tsx index a2c83e1abd7..cf742c318eb 100644 --- a/src/ui/views/CustomTestnet/components/AddFromChainList.tsx +++ b/src/ui/views/CustomTestnet/components/AddFromChainList.tsx @@ -86,8 +86,20 @@ export const AddFromChainList = ({ const ref = useRef(null); const search = useDebounce(_search, { wait: 500 }); + const { data: logos, runAsync: runFetchLogos } = useRequest( + () => { + return wallet.getCustomTestnetLogos(); + }, + { + cacheKey: 'custom-testnet-logos', + cacheTime: 30000, + staleTime: 30000, + } + ); + const { loading, data, loadingMore } = useInfiniteScroll( async (data) => { + // const logos = await runFetchLogos().catch(() => ({})); const res = await wallet.openapi.searchChainList({ start: data?.start || 0, limit: 50, @@ -96,13 +108,17 @@ export const AddFromChainList = ({ return { list: res.chain_list.map((item) => { - return createTestnetChain({ + const res = createTestnetChain({ name: item.name, id: item.chain_id, nativeTokenSymbol: item.native_currency.symbol, rpcUrl: item.rpc || '', scanLink: item.explorer || '', }); + if (logos?.[res.id]) { + res.logo = logos?.[res.id].chain_logo_url; + } + return res; }), start: res.page.start + res.page.limit, total: res.page.total, @@ -118,17 +134,22 @@ export const AddFromChainList = ({ } ); - const { data: usedList, loading: isLoadingUsed } = useRequest(() => { + const { data: usedList, loading: isLoadingUsed } = useRequest(async () => { + // const logos = await runFetchLogos().catch(() => ({})); return wallet.getUsedCustomTestnetChainList().then((list) => { return sortBy( list.map((item) => { - return createTestnetChain({ + const res = createTestnetChain({ name: item.name, id: item.chain_id, nativeTokenSymbol: item.native_currency.symbol, rpcUrl: item.rpc || '', scanLink: item.explorer || '', }); + if (logos?.[res.id]) { + res.logo = logos?.[res.id].chain_logo_url; + } + return res; }), 'name' ); diff --git a/src/ui/views/CustomTestnet/components/CustomTestnetItem.tsx b/src/ui/views/CustomTestnet/components/CustomTestnetItem.tsx index 3ffb5280357..aa524a8ac59 100644 --- a/src/ui/views/CustomTestnet/components/CustomTestnetItem.tsx +++ b/src/ui/views/CustomTestnet/components/CustomTestnetItem.tsx @@ -46,7 +46,15 @@ export const CustomTestnetItem = ({ onClick?.(item); }} > - + {item.logo ? ( + + ) : ( + + )}
{item.name} diff --git a/src/ui/views/History/index.tsx b/src/ui/views/History/index.tsx index f0526da5b91..29a39da5729 100644 --- a/src/ui/views/History/index.tsx +++ b/src/ui/views/History/index.tsx @@ -11,6 +11,7 @@ import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon'; import { Empty, PageHeader } from 'ui/component'; import { HistoryList } from './components/HistoryList'; import './style.less'; +import { TestnetTransactionHistory } from '../TransactionHistory/TestnetTranasctionHistory'; const Null = () => null; @@ -50,14 +51,7 @@ const History = () => { - - {t('global.notSupportTesntnet')} -
- } - className="pt-[108px]" - > +
diff --git a/src/ui/views/Swap/Component/Main.tsx b/src/ui/views/Swap/Component/Main.tsx index 2f7f247728d..9b1aeca32dc 100644 --- a/src/ui/views/Swap/Component/Main.tsx +++ b/src/ui/views/Swap/Component/Main.tsx @@ -502,6 +502,7 @@ export const Main = () => { onChange={switchChain} disabledTips={getDisabledTips} supportChains={SWAP_SUPPORT_CHAINS} + hideTestnetTab={true} chainRenderClassName={clsx('text-[16px] font-medium rounded-[4px]')} /> diff --git a/src/ui/views/TransactionHistory/TestnetTranasctionHistory.tsx b/src/ui/views/TransactionHistory/TestnetTranasctionHistory.tsx new file mode 100644 index 00000000000..a95cd66c3b0 --- /dev/null +++ b/src/ui/views/TransactionHistory/TestnetTranasctionHistory.tsx @@ -0,0 +1,46 @@ +import { Account } from '@/background/service/preference'; +import { findChainByID } from '@/utils/chain'; +import { useRequest } from 'ahooks'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Empty } from 'ui/component'; +import { useWallet } from 'ui/utils'; +import { TransactionItem } from './components/TransactionItem'; +import './style.less'; + +export const TestnetTransactionHistory = () => { + const wallet = useWallet(); + const { t } = useTranslation(); + + const { data: completeList, loading } = useRequest(async () => { + const account = await wallet.syncGetCurrentAccount()!; + const { completeds } = await wallet.getTransactionHistory(account.address); + return completeds.filter((item) => findChainByID(item?.chainId)?.isTestnet); + }); + + if (loading) { + return null; + } + + return ( +
+ {completeList?.length ? ( +
+ {completeList.map((item) => ( + + ))} +
+ ) : ( + + )} +
+ ); +}; diff --git a/src/ui/views/TransactionHistory/style.less b/src/ui/views/TransactionHistory/style.less index 947df808689..4df8a37176f 100644 --- a/src/ui/views/TransactionHistory/style.less +++ b/src/ui/views/TransactionHistory/style.less @@ -78,13 +78,14 @@ } } } - .tx-id { + .tx-id.tx-id { display: flex; justify-content: space-between; font-size: 12px; color: var(--r-neutral-foot, #babec5); margin-bottom: 14px; line-height: 14px; + text-decoration: none; } .tx-footer { margin-top: 16px; From a5d5b0048c7b5d5fa82967a9a64f99ab65cf834b Mon Sep 17 00:00:00 2001 From: Hodor Date: Thu, 5 Dec 2024 15:03:21 +0800 Subject: [PATCH 2/3] chore: fix some bugs --- src/background/controller/wallet.ts | 2 +- src/background/service/customTestnet.ts | 5 +-- src/ui/component/TokenSelector/style.less | 15 ++++---- .../CustomTestnetTokenItem.tsx | 4 +-- .../CustomTestnetTokenDetail.tsx | 4 +-- .../components/AddFromChainList.tsx | 36 +++++++++++++------ .../components/CustomTestnetItem.tsx | 2 +- 7 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index cfa31f76f14..323d7dd3b8a 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -4816,7 +4816,7 @@ export class WalletController extends BaseController { isAddedCustomTestnetToken = customTestnetService.hasToken; getCustomTestnetTx = customTestnetService.getTx; getCustomTestnetTxReceipt = customTestnetService.getTransactionReceipt; - getCustomTestnetLogos = () => customTestnetService.fetchLogos; + getCustomTestnetLogos = customTestnetService.fetchLogos; // getCustomTestnetTokenListWithBalance = customTestnetService.getTokenListWithBalance; getUsedCustomTestnetChainList = async () => { diff --git a/src/background/service/customTestnet.ts b/src/background/service/customTestnet.ts index e3765e9782f..628bf57e4c7 100644 --- a/src/background/service/customTestnet.ts +++ b/src/background/service/customTestnet.ts @@ -481,7 +481,7 @@ class CustomTestnetService { amount: new BigNumber(balance.toString()).div(10 ** decimals).toNumber(), rawAmount: balance.toString(), logo: - tokenId?.replace('custom_', '') === String(chainId) + !tokenId || tokenId?.replace('custom_', '') === String(chainId) ? this.logos?.[chainId]?.token_logo_url : undefined, }; @@ -594,6 +594,7 @@ class CustomTestnetService { id: null, chainId: item.id, symbol: item.nativeTokenSymbol, + logo: this.logos?.[item.id]?.token_logo_url, }; } ); @@ -711,7 +712,7 @@ export const createTestnetChain = (chain: TestnetChainBase): TestnetChain => { nativeTokenDecimals: 18, nativeTokenLogo: '', scanLink: chain.scanLink || '', - logo: `data:image/svg+xml;utf8,${encodeURIComponent( + logo: `data:image/svg+xml;utf8,${encodeURIComponent( chain.name.trim().substring(0, 1) )}`, eip: { diff --git a/src/ui/component/TokenSelector/style.less b/src/ui/component/TokenSelector/style.less index 2ca0be15693..c86dd1a3b5a 100644 --- a/src/ui/component/TokenSelector/style.less +++ b/src/ui/component/TokenSelector/style.less @@ -14,7 +14,7 @@ } } .ant-drawer-close .anticon.anticon-close > svg { - color: var(--r-neutral-foot, #6A7587); + color: var(--r-neutral-foot, #6a7587); } .header { font-weight: 500; @@ -51,7 +51,7 @@ padding: 0 @token-selector-px; justify-content: flex-end; align-items: center; - color: var(--r-neutral-foot, #6A7587); + color: var(--r-neutral-foot, #6a7587); font-size: 12px; line-height: 14px; span { @@ -94,7 +94,7 @@ white-space: nowrap; font-size: 12px; line-height: 15px; - color: var(--r-neutral-body, #3E495E); + color: var(--r-neutral-body, #3e495e); margin-left: 12px; max-width: 100%; } @@ -104,7 +104,7 @@ text-align: left; font-size: 12px; line-height: 14px; - color: var(--r-neutral-body, #3E495E); + color: var(--r-neutral-body, #3e495e); } &:nth-child(3) { width: 100px; @@ -125,7 +125,7 @@ cursor: initial; font-size: 12px; line-height: 14px; - color: var(--r-neutral-foot, #6A7587); + color: var(--r-neutral-foot, #6a7587); height: 35px; align-items: center; margin-bottom: 8px; @@ -139,7 +139,7 @@ & > div { font-size: 12px; line-height: 14px; - color: var(--r-neutral-foot, #6A7587); + color: var(--r-neutral-foot, #6a7587); font-weight: normal; &:nth-last-child(1) { flex: 1; @@ -191,13 +191,14 @@ align-items: center; border-radius: 4px; - color: var(--r-neutral-body, #D3D8E0); + color: var(--r-neutral-body, #d3d8e0); background: var(--r-neutral-card-2, rgba(255, 255, 255, 0.06)); } img.filter-item__chain-logo { width: 14px; height: 14px; + border-radius: 1000px; } .filter-item__chain-close { diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx index e8c771a6260..627bfb018f7 100644 --- a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx +++ b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetTokenItem.tsx @@ -19,7 +19,7 @@ const TokenItemAsset: React.FC = ({ item }) => { id: item.chainId, }); return ( - +
= ({ item }) => {
{item.symbol}
-
+
{chain?.name}
diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx index 2c0a3a8594f..98f46dbad85 100644 --- a/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx +++ b/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx @@ -90,7 +90,7 @@ export const CustomTestnetTokenDetail = ({
@@ -101,7 +101,7 @@ export const CustomTestnetTokenDetail = ({
{!isNativeToken ? ( diff --git a/src/ui/views/CustomTestnet/components/AddFromChainList.tsx b/src/ui/views/CustomTestnet/components/AddFromChainList.tsx index cf742c318eb..e810529660e 100644 --- a/src/ui/views/CustomTestnet/components/AddFromChainList.tsx +++ b/src/ui/views/CustomTestnet/components/AddFromChainList.tsx @@ -99,7 +99,6 @@ export const AddFromChainList = ({ const { loading, data, loadingMore } = useInfiniteScroll( async (data) => { - // const logos = await runFetchLogos().catch(() => ({})); const res = await wallet.openapi.searchChainList({ start: data?.start || 0, limit: 50, @@ -115,9 +114,6 @@ export const AddFromChainList = ({ rpcUrl: item.rpc || '', scanLink: item.explorer || '', }); - if (logos?.[res.id]) { - res.logo = logos?.[res.id].chain_logo_url; - } return res; }), start: res.page.start + res.page.limit, @@ -135,7 +131,6 @@ export const AddFromChainList = ({ ); const { data: usedList, loading: isLoadingUsed } = useRequest(async () => { - // const logos = await runFetchLogos().catch(() => ({})); return wallet.getUsedCustomTestnetChainList().then((list) => { return sortBy( list.map((item) => { @@ -146,9 +141,6 @@ export const AddFromChainList = ({ rpcUrl: item.rpc || '', scanLink: item.explorer || '', }); - if (logos?.[res.id]) { - res.logo = logos?.[res.id].chain_logo_url; - } return res; }), 'name' @@ -157,7 +149,8 @@ export const AddFromChainList = ({ }); const isLoading = loading || isLoadingUsed; - const list = useMemo(() => { + + const _list = useMemo(() => { if (search) { return data?.list || []; } @@ -166,6 +159,24 @@ export const AddFromChainList = ({ }); }, [data?.list, usedList, search]); + const list = useMemo(() => { + return _list.map((item) => { + if (logos?.[item.id]) { + item.logo = logos?.[item.id].chain_logo_url; + } + return item; + }); + }, [_list, logos]); + + const realUsedList = useMemo(() => { + return usedList?.map((item) => { + if (logos?.[item.id]) { + item.logo = logos?.[item.id].chain_logo_url; + } + return item; + }); + }, [usedList, logos]); + const isEmpty = useMemo(() => { if (isLoading) { return false; @@ -207,9 +218,12 @@ export const AddFromChainList = ({
) : (
- {usedList?.length && !search ? ( + {realUsedList?.length && !search ? (
- +
) : null} ) : ( From b7c9fbf1f3928758a5518aa8f457e6a20cb401ac Mon Sep 17 00:00:00 2001 From: Hodor Date: Thu, 5 Dec 2024 18:08:06 +0800 Subject: [PATCH 3/3] chore: fix some bugs --- src/background/service/customTestnet.ts | 2 +- src/ui/component/TestnetChainLogo/index.tsx | 2 +- src/ui/models/chains.ts | 4 ++-- src/ui/views/Bridge/Component/BridgeToken.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/background/service/customTestnet.ts b/src/background/service/customTestnet.ts index 628bf57e4c7..9b5b12cf414 100644 --- a/src/background/service/customTestnet.ts +++ b/src/background/service/customTestnet.ts @@ -713,7 +713,7 @@ export const createTestnetChain = (chain: TestnetChainBase): TestnetChain => { nativeTokenLogo: '', scanLink: chain.scanLink || '', logo: `data:image/svg+xml;utf8,${encodeURIComponent( - chain.name.trim().substring(0, 1) + chain.name.trim().substring(0, 1).toUpperCase() )}`, eip: { 1559: false, diff --git a/src/ui/component/TestnetChainLogo/index.tsx b/src/ui/component/TestnetChainLogo/index.tsx index f717b571e4d..16142a95de5 100644 --- a/src/ui/component/TestnetChainLogo/index.tsx +++ b/src/ui/component/TestnetChainLogo/index.tsx @@ -17,7 +17,7 @@ export const TestnetChainLogo = ({ className )} > - {name.trim().substring(0, 1)} + {name.trim().substring(0, 1).toUpperCase()}
); }; diff --git a/src/ui/models/chains.ts b/src/ui/models/chains.ts index 3bb05281032..a5793933e24 100644 --- a/src/ui/models/chains.ts +++ b/src/ui/models/chains.ts @@ -17,6 +17,7 @@ import { import type { AccountState } from './account'; import { Chain } from '@debank/common'; import { TestnetChain } from '@/background/service/customTestnet'; +import { sleep } from '../utils'; type IState = { currentConnection: ConnectedSite | null | undefined; @@ -73,8 +74,7 @@ export const chains = createModel()({ }, effects: (dispatch) => ({ init(_: void, store) { - store.app.wallet - .getCustomTestnetLogos() + Promise.race([store.app.wallet.getCustomTestnetLogos(), sleep(3000)]) .then(() => store.app.wallet.getCustomTestnetList()) .then((testnetList) => { updateChainStore({ diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx index f009a7d0114..d8cf08c0b0d 100644 --- a/src/ui/views/Bridge/Component/BridgeToken.tsx +++ b/src/ui/views/Bridge/Component/BridgeToken.tsx @@ -224,7 +224,7 @@ export const BridgeToken = ({ ) : ( {useValue} )} - {isToken && !!value && ( + {!valueLoading && isToken && !!value && ( openFeePopup(true)} viewBox="0 0 14 14"