feat: update custom network

src/background/controller/wallet.ts

@@ -133,6 +133,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<string | number, any> = {};
 
@@ -4815,6 +4816,7 @@ export class WalletController extends BaseController {
   isAddedCustomTestnetToken = customTestnetService.hasToken;
   getCustomTestnetTx = customTestnetService.getTx;
   getCustomTestnetTxReceipt = customTestnetService.getTransactionReceipt;
+  getCustomTestnetLogos = customTestnetService.fetchLogos;
   // getCustomTestnetTokenListWithBalance = customTestnetService.getTokenListWithBalance;
 
   getUsedCustomTestnetChainList = async () => {

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<string, Client> = {};
 
+  logos: Record<
+    string,
+    {
+      chain_logo_url: string;
+      token_logo_url?: string;
+    }
+  > = {};
+
   init = async () => {
     const storage = await createPersistStore<CutsomTestnetServiceStore>({
       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<CustomTestnetToken> => {
     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 || tokenId?.replace('custom_', '') === String(chainId)
+          ? this.logos?.[chainId]?.token_logo_url
+          : undefined,
     };
   };
 
@@ -573,6 +594,7 @@ class CustomTestnetService {
           id: null,
           chainId: item.id,
           symbol: item.nativeTokenSymbol,
+          logo: this.logos?.[item.id]?.token_logo_url,
         };
       }
     );
@@ -641,6 +663,19 @@ class CustomTestnetService {
       testnetList: testnetList,
     });
   };
+
+  fetchLogos = async () => {
+    try {
+      const { data } = await axios.get<typeof this.logos>(
+        '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 +712,8 @@ export const createTestnetChain = (chain: TestnetChainBase): TestnetChain => {
     nativeTokenDecimals: 18,
     nativeTokenLogo: '',
     scanLink: chain.scanLink || '',
-    logo: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%236A7587'></circle><text x='16' y='17' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='12' font-weight='400'>${encodeURIComponent(
-      chain.name.substring(0, 3)
+    logo: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='%236A7587'></circle><text x='14' y='15' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='16' font-weight='500'>${encodeURIComponent(
+      chain.name.trim().substring(0, 1).toUpperCase()
     )}</text></svg>`,
     eip: {
       1559: false,

src/ui/component/ChainSelector/components/SelectChainItem.tsx

@@ -95,10 +95,18 @@ export const SelectChainItem = forwardRef(
         >
           <div className="flex items-center flex-1">
             {data.isTestnet ? (
-              <TestnetChainLogo
-                name={data.name}
-                className="select-chain-item-icon"
-              />
+              data.logo ? (
+                <img
+                  src={data.logo}
+                  alt=""
+                  className="select-chain-item-icon"
+                />
+              ) : (
+                <TestnetChainLogo
+                  name={data.name}
+                  className="select-chain-item-icon"
+                />
+              )
             ) : (
               <>
                 {showRPCStatus ? (

src/ui/component/TestnetChainLogo/index.tsx

@@ -17,7 +17,7 @@ export const TestnetChainLogo = ({
         className
       )}
     >
-      {name.substring(0, 3)}
+      {name.trim().substring(0, 1).toUpperCase()}
     </div>
   );
 };

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 {

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,12 +74,14 @@ export const chains = createModel<RootModel>()({
   },
   effects: (dispatch) => ({
     init(_: void, store) {
-      store.app.wallet.getCustomTestnetList().then((testnetList) => {
-        updateChainStore({
-          testnetList: testnetList,
+      Promise.race([store.app.wallet.getCustomTestnetLogos(), sleep(3000)])
+        .then(() => store.app.wallet.getCustomTestnetList())
+        .then((testnetList) => {
+          updateChainStore({
+            testnetList: testnetList,
+          });
+          this.setField({ testnetList });
         });
-        this.setField({ testnetList });
-      });
       getMainnetListFromLocal().then((mainnetList) => {
         if (mainnetList.length) {
           updateChainStore({

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,

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<CHAINS_ENUM>();

src/ui/views/Bridge/Component/BridgeToken.tsx

@@ -224,7 +224,7 @@ export const BridgeToken = ({
             ) : (
               <span>{useValue}</span>
             )}
-            {isToken && !!value && (
+            {!valueLoading && isToken && !!value && (
               <RcIconInfoCC
                 onClick={() => openFeePopup(true)}
                 viewBox="0 0 14 14"

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 = ({
         </div>
       </div>
       <div className={clsx(selectedTab === 'testnet' ? 'block' : 'hidden')}>
-        <CustomTestnetAssetList visible={visible} onClose={onClose} />
+        <TestnetChainList onChange={handleTestnetSelectChainChange} />
+        <CustomTestnetAssetList
+          selectChainId={selectTestnetChainId}
+          visible={visible}
+          onClose={onClose}
+        />
       </div>
     </>
   );

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<Props> = ({
   className,
   visible,
   onEmptyAssets,
-  isTestnet = false,
-  onRefresh,
+  selectChainId,
 }) => {
   const { t } = useTranslation();
   const [search, setSearch] = React.useState<string>('');
@@ -67,7 +65,7 @@ export const CustomTestnetAssetListContainer: React.FC<Props> = ({
 
   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<Props> = ({
     }
   );
 
+  const list = useMemo(() => {
+    if (!selectChainId) {
+      return _list;
+    }
+    return _list?.filter((item) => {
+      return String(item.chainId) === selectChainId;
+    });
+  }, [_list, selectChainId]);
+
   if (!isFetched && !search) {
     return <TokenListViewSkeleton isTestnet />;
   }