payment-kit 1.17.3 → 1.17.5

package/src/locales/en.tsx

@@ -325,6 +325,9 @@ export default flat({
       save: 'Save payment method',
       saved: 'Payment method successfully saved',
       settings: 'Settings',
+      gasTip:
+        'Ensure your account on the {chain} network has sufficient balance to cover transaction fees when using {method}.',
+      showQR: 'Show QR Code',
       props: {
         type: 'Type',
         confirmation: 'Confirmation',
@@ -395,6 +398,28 @@ export default flat({
           tip: 'How many blocks since transaction execution',
         },
       },
+      base: {
+        chain_id: {
+          label: 'Chain ID',
+          tip: 'Must be a valid EVM chain id, usually an integer, https://chainlist.org',
+        },
+        api_host: {
+          label: 'RPC Endpoint',
+          tip: 'The RPC endpoint to send transaction to',
+        },
+        explorer_host: {
+          label: 'Explorer Host',
+          tip: 'The webapp endpoint to view transaction details',
+        },
+        native_symbol: {
+          label: 'Native Symbol',
+          tip: 'The symbol for native token on this chain',
+        },
+        confirmation: {
+          label: 'Confirmation Count',
+          tip: 'How many blocks since transaction execution',
+        },
+      },
     },
     paymentCurrency: {
       name: 'Payment Currency',
@@ -652,39 +677,39 @@ export default flat({
       error: 'Delegate failed',
     },
     overdraftProtection: {
-      title: 'SubGuard',
-      setting: 'Set SubGuard',
-      tip: 'To avoid service interruption due to unpaid invoices, you can enable SubGuard by staking. Timely payment will not incur additional fees. Please settle your invoices promptly. If your available stake is insufficient or payment is overdue, we will deduct the amount from your stake and charge a service fee.',
+      title: 'SubGuard™',
+      setting: 'Set SubGuard™',
+      tip: 'To avoid service interruption due to unpaid invoices, you can enable SubGuard™ by staking. Timely payment will not incur additional fees. Please settle your invoices promptly. If your available stake is insufficient or payment is overdue, we will deduct the amount from your stake and charge a service fee.',
       enabled: 'Enabled',
       disabled: 'Disabled',
       returnRemaining: 'Return Remaining Stake',
       returnRemainingTip:
-        'Once the remaining stake is returned, the SubGuard will be automatically disabled. Please confirm the action.',
+        'Once the remaining stake is returned, the SubGuard™ will be automatically disabled. Please confirm the action.',
       applyRemainingSuccess: 'Stake return application successful',
       remaining:
         'Your current remaining stake: {amount} {symbol}, estimated required stake per cycle: {estimateAmount} {symbol}.',
       noRemaining:
-        'No remaining stake available. Please stake at least {estimateAmount} {symbol} as soon as possible to ensure SubGuard is enabled.',
+        'No remaining stake available. Please stake at least {estimateAmount} {symbol} as soon as possible to ensure SubGuard™ is enabled.',
       remainingNotEnough:
         'You have unpaid invoices totaling {due} {symbol}. If not paid, your remaining stake will be insufficient to cover the next invoice. Available stake: {unused} {symbol}. Please stake at least {min} {symbol}.',
       due: 'Please pay the outstanding amount first',
       insufficient: 'Insufficient Stake to cover the next invoice, please add stake',
-      insufficientTip: 'Insufficient Stake, please stake to ensure SubGuard is enabled.',
+      insufficientTip: 'Insufficient Stake, please stake to ensure SubGuard™ is enabled.',
       intervals: 'cycles',
       estimatedDuration: '{duration} {unit} est.',
       rule: 'Rule: N * ( P + Fee )',
       ruleTip:
-        'N is the number of cycles, P is the subscription bill amount, Fee is the SubGuard service fee, the single fee is {gas} {symbol}',
+        'N is the number of cycles, P is the subscription bill amount, Fee is the SubGuard™ service fee, the single fee is {gas} {symbol}',
       min: 'The amount must be greater or equal to {min} {symbol}',
-      settingSuccess: 'Set SubGuard Successful',
-      settingError: 'Set SubGuard Failed',
-      keepStake: 'Keep Remaining Stake For SubGuard',
+      settingSuccess: 'Set SubGuard™ Successful',
+      settingError: 'Set SubGuard™ Failed',
+      keepStake: 'Keep Remaining Stake For SubGuard™',
       returnStake: 'Return Remaining Stake',
       stake: 'Stake',
       address: 'Staking Address',
       total: 'Total Stake: {total} {symbol}, ',
       disableConfirm: 'You currently have unpaid invoices, please settle your invoices first.',
-      open: 'Enable SubGuard',
+      open: 'Enable SubGuard™',
       payerAddress: 'Payer',
       stakingAddress: 'Staking Address',
     },

package/src/locales/zh.tsx

@@ -315,6 +315,8 @@ export default flat({
       save: '保存支付方式',
       saved: '支付方式已成功保存',
       settings: '设置',
+      gasTip: '使用 {method} 支付需保证账户在 {chain} 链上有余额支付手续费',
+      showQR: '显示二维码',
       props: {
         type: '类型',
         confirmation: '确认',
@@ -385,6 +387,28 @@ export default flat({
           tip: '交易标记为确认需要的区块数',
         },
       },
+      base: {
+        chain_id: {
+          label: '链 ID',
+          tip: '必须是有效的EVM链ID，通常是一个整数，https://chainlist.org',
+        },
+        api_host: {
+          label: 'RPC 端点',
+          tip: '发送交易的RPC端点',
+        },
+        explorer_host: {
+          label: '区块浏览器',
+          tip: '查看交易详情的区块浏览器',
+        },
+        native_symbol: {
+          label: '货币符号',
+          tip: '链上主货币符号',
+        },
+        confirmation: {
+          label: '确认区块数',
+          tip: '交易标记为确认需要的区块数',
+        },
+      },
     },
     paymentCurrency: {
       name: '支付货币',

package/src/pages/admin/billing/invoices/detail.tsx

@@ -304,7 +304,7 @@ export default function InvoiceDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {!!data.paymentIntent?.payment_details?.ethereum && (
+              {(!!data.paymentIntent?.payment_details?.ethereum || !!data.paymentIntent?.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/customers/customers/detail.tsx

@@ -85,7 +85,7 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
-  const { settings } = usePaymentContext();
+  const { settings, livemode } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -282,7 +282,7 @@ export default function CustomerDetail(props: { id: string }) {
             <Stack>
               <InfoRow
                 label={t('common.did')}
-                value={<DidAddress did={data.customer.did} showQrcode />}
+                value={<DidAddress did={data.customer.did} chainId={livemode ? 'main' : 'beta'} showQrcode />}
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />

package/src/pages/admin/overview.tsx

@@ -79,7 +79,7 @@ export const groupData = (data: TPaymentStat[], currencies: { [key: string]: any
 
 export default function Overview() {
   const { t, locale } = useLocaleContext();
-  const { settings } = usePaymentContext();
+  const { settings, livemode } = usePaymentContext();
   const maxDate = dayjs().endOf('day').toDate();
   const [state, setState] = useSetState({
     anchorEl: null,
@@ -200,6 +200,13 @@ export default function Overview() {
     });
   }
 
+  const getChainId = (type: string) => {
+    if (type === 'arcblock') {
+      return livemode ? 'main' : 'beta';
+    }
+    return '';
+  };
+
   return (
     <Grid container gap={{ xs: 2, sm: 5, md: 8 }} sx={{ mb: 4 }}>
       <Grid item xs={12} sm={12} md={8}>
@@ -244,7 +251,13 @@ export default function Overview() {
               </Stack>
               <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
                 {Object.keys(summary.data.addresses).map((chain) => (
-                  <DID key={chain} did={summary.data?.addresses?.[chain] as string} copyable showQrcode />
+                  <DID
+                    key={chain}
+                    did={summary.data?.addresses?.[chain] as string}
+                    chainId={getChainId(chain)}
+                    copyable
+                    showQrcode
+                  />
                 ))}
               </Stack>
             </Box>

package/src/pages/admin/payments/intents/detail.tsx

@@ -330,7 +330,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {!!data.payment_details?.ethereum && (
+              {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/payments/payouts/detail.tsx

@@ -299,7 +299,7 @@ export default function PayoutDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {!!data.payment_details?.ethereum && (
+              {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/payments/refunds/detail.tsx

@@ -317,7 +317,7 @@ export default function RefundDetail(props: { id: string }) {
                     direction={InfoDirection}
                     alignItems={InfoAlignItems}
                   />
-                  {!!data.payment_details?.ethereum && (
+                  {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                     <InfoRow
                       label={t('common.txGas')}
                       value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/products/links/detail.tsx

@@ -82,6 +82,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, price: false } }));
     }

package/src/pages/admin/products/prices/actions.tsx

@@ -47,8 +47,9 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
-      setState({ loading: false, action: '' });
+      setState({ loading: false });
     }
   };
   const onArchivePrice = async () => {

package/src/pages/admin/products/prices/detail.tsx

@@ -65,6 +65,7 @@ export default function PriceDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
     }

package/src/pages/admin/products/products/detail.tsx

@@ -99,6 +99,7 @@ export default function ProductDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, price: false } }));
     }

package/src/pages/admin/settings/payment-methods/create.tsx

@@ -39,6 +39,13 @@ export default function PaymentMethodCreate() {
           confirmation: 1,
           logo: '',
         },
+        base: {
+          api_host: '',
+          explorer_host: '',
+          native_symbol: 'ETH',
+          confirmation: 1,
+          logo: '',
+        },
         bitcoin: {
           chain_id: 0,
           api_host: '',

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -1,7 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Switch, api, formatError } from '@blocklet/payment-react';
+import { Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { AddOutlined, Check, Close, DeleteOutlined, EditOutlined } from '@mui/icons-material';
+import {
+  AddOutlined,
+  Check,
+  Close,
+  DeleteOutlined,
+  EditOutlined,
+  InfoOutlined,
+  QrCodeOutlined,
+} from '@mui/icons-material';
 import {
   Alert,
   Avatar,
@@ -15,6 +23,7 @@ import {
   ListItemText,
   Stack,
   TextField,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
@@ -22,12 +31,15 @@ import useBus from 'use-bus';
 
 import { useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
+import { DIDDialog } from '@arcblock/ux/lib/DID';
 import IconCollapse from '../../../../components/collapse';
 import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
 import PaymentCurrencyAdd from '../../../../components/payment-currency/add';
 
-const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExpanded[]> => {
+const getMethods = (
+  params: Record<string, any> = {}
+): Promise<{ list: TPaymentMethodExpanded[]; addresses: { arcblock: string; ethereum: string } }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -132,29 +144,97 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
 
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
-  const { loading, error, data, runAsync } = useRequest(() => getMethods({}));
+  const {
+    loading,
+    error,
+    data = { list: [], addresses: {} } as any,
+    runAsync,
+  } = useRequest(() =>
+    getMethods({
+      addresses: true,
+    })
+  );
   const [state, setState] = useSetState({ method: '' });
+  const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
+  const { refresh } = usePaymentContext();
 
-  useBus('paymentMethod.created', runAsync, []);
-  useBus('paymentCurrency.added', () => runAsync().then(() => setState({ method: '' })), []);
+  const { list: methods, addresses } = data;
+  useBus(
+    'paymentMethod.created',
+    () => {
+      runAsync();
+      refresh(true);
+    },
+    []
+  );
+  useBus(
+    'paymentCurrency.added',
+    () => {
+      runAsync().then(() => setState({ method: '' }));
+      refresh(true);
+    },
+    []
+  );
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if (loading || !data) {
+  if (loading || !data || methods?.length === 0) {
     return <CircularProgress />;
   }
 
-  const groups = groupByType(data);
+  const groups = groupByType(methods);
 
+  const getAddress = (type: string) => {
+    if (['ethereum', 'base'].includes(type)) {
+      return addresses?.ethereum || '';
+    }
+    return addresses?.arcblock || '';
+  };
   return (
     <>
       {Object.keys(groups).map((x) => (
         <Box key={x} mt={3}>
-          <Typography variant="h6" sx={{ mb: 1, textTransform: 'uppercase' }}>
-            {x}
-          </Typography>
+          <Stack direction="row" alignItems="center" mb={1}>
+            <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
+              {x}
+            </Typography>
+            {['ethereum', 'base'].includes(x) && (
+              <Stack
+                direction="row"
+                alignItems="center"
+                spacing={0.5}
+                sx={{
+                  ml: 1,
+                  px: 0.5,
+                  color: 'text.secondary',
+                }}>
+                <InfoOutlined sx={{ fontSize: 16 }} color="warning" />
+                <Typography variant="body2">
+                  {t('admin.paymentMethod.gasTip', {
+                    method: x,
+                    address: '222',
+                    chain: groups[x]?.[0]?.name || x,
+                  })}
+                </Typography>
+                <Tooltip title={t('admin.paymentMethod.showQR')}>
+                  <IconButton
+                    size="small"
+                    onClick={() =>
+                      setDidDialog({
+                        open: true,
+                        chainId: groups[x]?.[0]?.id || '',
+                        did: getAddress(x),
+                      })
+                    }
+                    sx={{ p: 0.5 }}>
+                    <QrCodeOutlined sx={{ fontSize: 16 }} />
+                  </IconButton>
+                </Tooltip>
+              </Stack>
+            )}
+          </Stack>
           {(groups[x] as TPaymentMethodExpanded[]).map((method) => (
             <IconCollapse
               key={method.id}
@@ -231,6 +311,14 @@ export default function PaymentMethods() {
           ))}
         </Box>
       ))}
+      {didDialog.open && didDialog.did && (
+        <DIDDialog
+          open={didDialog.open}
+          onClose={() => setDidDialog({ open: false, chainId: '', did: '' })}
+          did={didDialog.did}
+          chainId={didDialog.chainId}
+        />
+      )}
     </>
   );
 }

package/src/pages/customer/index.tsx

@@ -360,7 +360,7 @@ export default function CustomerHome() {
             {data.name}
           </Typography>
           <Typography variant="body2" color="text.secondary">
-            <DID did={data.did} copyable showQrcode />
+            <DID did={data.did} copyable showQrcode chainId={livemode ? 'main' : 'beta'} />
           </Typography>
         </Box>
       </Box>

package/src/pages/customer/invoice/detail.tsx

@@ -268,7 +268,7 @@ export default function CustomerInvoiceDetail() {
             direction={InfoDirection}
             alignItems={InfoAlignItems}
           />
-          {!!data.paymentIntent?.payment_details?.ethereum && (
+          {(!!data.paymentIntent?.payment_details?.ethereum || !!data.paymentIntent?.payment_details?.base) && (
             <InfoRow
               label={t('common.txGas')}
               value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}

package/src/pages/customer/recharge.tsx

@@ -217,7 +217,7 @@ export default function RechargePage() {
   }
   const currentBalance = formatBNStr(payerValue?.token || '0', paymentCurrency?.decimal, 6, false);
 
-  const supportRecharge = ['arcblock', 'ethereum'].includes(paymentMethod?.type || '');
+  const supportRecharge = ['arcblock', 'ethereum', 'base'].includes(paymentMethod?.type || '');
 
   const formatEstimatedDuration = (cycles: number) => {
     const { interval, interval_count: intervalCount } = subscription.pending_invoice_item_interval;

package/src/pages/customer/refund/list.tsx

@@ -142,14 +142,16 @@ const RefundTable = memo(({ invoice_id }: Props) => {
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash ? (
+          const paymentDetails = item.payment_details as Record<string, { tx_hash?: string }>;
+          const txHash = ['arcblock', 'ethereum', 'base'].map((key) => !!paymentDetails?.[key]?.tx_hash).find(Boolean);
+          return txHash ? (
             <Box
               sx={{
                 '.MuiTypography-root': {
                   color: 'text.link',
                 },
               }}>
-              <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
+              <TxLink details={paymentDetails} method={item.paymentMethod} mode="customer" />
             </Box>
           ) : (
             t('common.none')
@@ -271,7 +273,9 @@ const RefundList = memo(({ invoice_id }: Props) => {
                   </Typography>
                 </Box>
                 <Box flex={3} sx={{ minWidth: '220px' }}>
-                  {(item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && (
+                  {(item.payment_details?.arcblock?.tx_hash ||
+                    item.payment_details?.ethereum?.tx_hash ||
+                    item.payment_details?.base?.tx_hash) && (
                     <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
                   )}
                 </Box>

package/src/pages/customer/subscription/change-payment.tsx

@@ -153,7 +153,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         submitting: false,
       });
 
-      if (['arcblock', 'ethereum'].includes(method.type)) {
+      if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
         setState({ paying: true });
         if (result.data.delegation?.sufficient) {
           await handleConnected();