payment-kit 1.18.50 → 1.18.52

package/src/components/invoice/list.tsx

@@ -174,7 +174,10 @@ export default function InvoiceList({
           const item = data.list[index] as TInvoiceExpanded;
           return (
             <InvoiceLink invoice={item}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                fontWeight={600}
+                sx={{ textDecoration: item.status === 'void' ? 'line-through' : 'none' }}>
                 {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>

package/src/components/payment-currency/add.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { api, formatError, getPrefix } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import {
@@ -18,6 +18,7 @@ import { useSetState } from 'ahooks';
 import { FormProvider, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 import { useEffect } from 'react';
+import { joinURL } from 'ufo';
 import DrawerForm from '../drawer-form';
 import PaymentCurrencyForm from './form';
 
@@ -33,6 +34,7 @@ interface TokenInfo {
   name: string;
   symbol: string;
   logoURI?: string;
+  localLogoURI?: string;
 }
 
 export default function PaymentCurrencyAdd({
@@ -87,11 +89,18 @@ export default function PaymentCurrencyAdd({
     }
   }, [showTokenSelect, chainId]);
 
+  const getLogoURI = (token: TokenInfo) => {
+    if (token.localLogoURI) {
+      return joinURL(getPrefix(), token.localLogoURI);
+    }
+    return token.logoURI || '';
+  };
+
   const handleTokenSelect = (token: TokenInfo | null) => {
     if (token) {
       setValue('name', token.name);
       setValue('description', `${token.name} (${token.symbol})`);
-      setValue('logo', token.logoURI || '');
+      setValue('logo', getLogoURI(token));
       setValue('contract', token.address);
     }
   };
@@ -162,7 +171,7 @@ export default function PaymentCurrencyAdd({
                     },
                   }}>
                   <Avatar
-                    src={option.logoURI || option.symbol}
+                    src={getLogoURI(option) || option.symbol}
                     alt={option.symbol}
                     sx={{
                       width: 24,

package/src/components/payment-currency/edit.tsx

@@ -1,17 +1,35 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { api, formatError, getPrefix, CachedRequest } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Button, CircularProgress } from '@mui/material';
 import { useSetState } from 'ahooks';
 import { FormProvider, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
+import { useEffect } from 'react';
+import { joinURL } from 'ufo';
 
 import DrawerForm from '../drawer-form';
 import PaymentCurrencyForm from './form';
 
+const loadTokenList = () =>
+  import(
+    /* webpackChunkName: "payment-token-list" */
+    './tokenList.json'
+  );
+
+interface TokenInfo {
+  address: string;
+  chainId: number;
+  decimals: number;
+  name: string;
+  symbol: string;
+  logoURI?: string;
+  localLogoURI?: string;
+}
+
 export default function PaymentCurrencyEdit({
   method,
   onClose,
@@ -22,7 +40,11 @@ export default function PaymentCurrencyEdit({
   value: TPaymentCurrency;
 }) {
   const { t } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false });
+  const [state, setState] = useSetState({
+    loading: false,
+    tokenListLoading: false,
+    contractToTokenMap: new Map<string, TokenInfo>(),
+  });
 
   const methods = useForm<TPaymentCurrency>({
     defaultValues: {
@@ -33,7 +55,71 @@ export default function PaymentCurrencyEdit({
       contract: value?.contract,
     },
   });
-  const { handleSubmit } = methods;
+  const { handleSubmit, setValue } = methods;
+
+  const showTokenSelect = ['ethereum', 'base'].includes(method.type);
+  // @ts-ignore
+  const chainId = method?.settings?.[method.type]?.chain_id || '';
+
+  const getLogoURI = (token: TokenInfo) => {
+    if (token.localLogoURI) {
+      return joinURL(getPrefix(), token.localLogoURI);
+    }
+    return token.logoURI || '';
+  };
+
+  useEffect(() => {
+    if (showTokenSelect && chainId) {
+      setState({ tokenListLoading: true });
+
+      // 使用 CachedRequest 直接缓存 contract 映射
+      const cachedTokenMapRequest = new CachedRequest(
+        `tokenMap_${chainId}`,
+        async () => {
+          const module = await loadTokenList();
+          // @ts-ignore
+          const tokenList = (module.default?.[chainId] as TokenInfo[]) || [];
+
+          // 创建 contract 地址到 token 的映射对象
+          const contractToTokenObj: Record<string, TokenInfo> = {};
+          tokenList.forEach((token: TokenInfo) => {
+            if (token.address) {
+              contractToTokenObj[token.address.toLowerCase()] = token;
+            }
+          });
+
+          return { data: contractToTokenObj };
+        },
+        {
+          strategy: 'session',
+          ttl: 30 * 60 * 1000,
+        }
+      );
+
+      cachedTokenMapRequest
+        .fetch()
+        .then((contractToTokenObj: Record<string, TokenInfo>) => {
+          const contractToTokenMap = new Map<string, TokenInfo>(Object.entries(contractToTokenObj));
+          setState({
+            contractToTokenMap,
+            tokenListLoading: false,
+          });
+
+          // 检查当前币种是否需要替换 logo（根据 contract 地址匹配）
+          if (value?.contract) {
+            const matchedToken = contractToTokenMap.get(value.contract.toLowerCase());
+            if (matchedToken && matchedToken.localLogoURI) {
+              const newLogoURI = getLogoURI(matchedToken);
+              setValue('logo', newLogoURI);
+            }
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to load token map:', error);
+          setState({ tokenListLoading: false });
+        });
+    }
+  }, [showTokenSelect, chainId, value?.contract]);
 
   const onSubmit = (data: TPaymentCurrency) => {
     setState({ loading: true });