payment-kit 1.17.4 → 1.17.6

package/api/src/routes/subscriptions.ts

@@ -64,6 +64,7 @@ import { createUsageRecordQueryFn } from './usage-records';
 import { SubscriptionWillCanceledSchedule } from '../crons/subscription-will-canceled';
 import { getTokenByAddress } from '../integrations/arcblock/stake';
 import { ensureOverdraftProtectionPrice } from '../libs/overdraft-protection';
+import { CHARGE_SUPPORTED_CHAIN_TYPES } from '../libs/constants';
 
 const router = Router();
 const auth = authenticate<Subscription>({ component: true, roles: ['owner', 'admin'] });
@@ -1766,7 +1767,7 @@ router.get('/:id/cycle-amount', authPortal, async (req, res) => {
 
   if (req.query?.overdraftProtection) {
     const { price } = await ensureOverdraftProtectionPrice(subscription.livemode);
-    const invoicePrice = price.currency_options.find((x: any) => x.currency_id === subscription?.currency_id);
+    const invoicePrice = (price?.currency_options || []).find((x: any) => x.currency_id === subscription?.currency_id);
     const gas = invoicePrice?.unit_amount;
     return res.json({
       amount: new BN(maxAmount).add(new BN(gas)).toString(),
@@ -1856,7 +1857,7 @@ router.get('/:id/payer-token', authMine, async (req, res) => {
 
   // @ts-ignore
   const paymentAddress = getSubscriptionPaymentAddress(subscription, paymentMethod.type);
-  if (!paymentAddress && ['ethereum', 'arcblock'].includes(paymentMethod.type)) {
+  if (!paymentAddress && CHARGE_SUPPORTED_CHAIN_TYPES.includes(paymentMethod.type)) {
     return res.status(400).json({ error: `Payer not found on subscription payment detail: ${subscription.id}` });
   }
 
@@ -2015,7 +2016,7 @@ router.get('/:id/overdraft-protection', authPortal, async (req, res) => {
       await isSubscriptionOverdraftProtectionEnabled(subscription);
     const upcoming = await getUpcomingInvoiceAmount(req.params.id as string);
     const { price } = await ensureOverdraftProtectionPrice(subscription.livemode);
-    const invoicePrice = price.currency_options.find((x: any) => x.currency_id === subscription?.currency_id);
+    const invoicePrice = (price?.currency_options || []).find((x: any) => x.currency_id === subscription?.currency_id);
     const gas = invoicePrice?.unit_amount;
     return res.json({
       enabled,

package/api/src/store/models/payment-currency.ts

@@ -7,6 +7,7 @@ import {
   InferCreationAttributes,
   Model,
   Op,
+  QueryTypes,
 } from 'sequelize';
 
 import { createIdGenerator } from '../../libs/util';
@@ -145,6 +146,36 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
       ...options,
     });
   }
+
+  public async isLocked(): Promise<boolean> {
+    const { PaymentMethod } = this.sequelize.models;
+    const method = (await PaymentMethod!.findByPk(this.payment_method_id)) as any;
+    return this.locked || method?.default_currency_id === this.id;
+  }
+
+  public async isUsed(): Promise<boolean> {
+    const { Price } = this.sequelize.models;
+    const price = await Price!.findOne({
+      where: {
+        currency_id: this.id,
+      },
+    });
+    if (price) {
+      return true;
+    }
+    // @ts-ignore
+    const [{ count }] = await this.sequelize.query(
+      `SELECT count(p.id) AS count 
+       FROM prices AS p 
+       JOIN json_each(p.currency_options) AS option 
+       ON json_extract(option.value, '$.currency_id') = ?`,
+      {
+        replacements: [this.id],
+        type: QueryTypes.SELECT,
+      }
+    );
+    return count > 0;
+  }
 }
 
 export type TPaymentCurrency = InferAttributes<PaymentCurrency>;

package/api/src/store/models/payment-method.ts

@@ -10,6 +10,7 @@ import type { LiteralUnion } from 'type-fest';
 import { STRIPE_API_VERSION, createIdGenerator } from '../../libs/util';
 import { sequelize } from '../sequelize';
 import type { PaymentMethodSettings } from './types';
+import { CHARGE_SUPPORTED_CHAIN_TYPES, EVM_CHAIN_TYPES } from '../../libs/constants';
 
 const nextId = createIdGenerator('pm', 24);
 
@@ -26,7 +27,7 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
   declare livemode: boolean;
   declare locked: boolean;
 
-  declare type: LiteralUnion<'stripe' | 'arcblock' | 'ethereum' | 'bitcoin', string>;
+  declare type: LiteralUnion<'stripe' | 'arcblock' | 'ethereum' | 'bitcoin' | 'base', string>;
 
   declare name: string;
 
@@ -77,7 +78,7 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
       defaultValue: false,
     },
     type: {
-      type: DataTypes.ENUM('stripe', 'arcblock', 'ethereum', 'bitcoin'),
+      type: DataTypes.ENUM('stripe', 'arcblock', 'ethereum', 'bitcoin', 'base'),
     },
     name: {
       type: DataTypes.STRING(64),
@@ -209,11 +210,12 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
   }
 
   getEvmClient() {
-    if (this.type !== 'ethereum') {
-      throw new Error('payment method is not ethereum');
+    if (!EVM_CHAIN_TYPES.includes(this.type)) {
+      throw new Error(`payment method ${this.type} is not EVM compatible`);
     }
-    if (!this.settings.ethereum) {
-      throw new Error('payment method config insufficient for ethereum');
+
+    if (!this.settings[this.type as keyof PaymentMethodSettings]) {
+      throw new Error(`payment method config insufficient for ${this.type}`);
     }
 
     if (evmClients.has(this.id)) {
@@ -221,7 +223,8 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
     }
 
     const settings = PaymentMethod.decryptSettings(this.settings);
-    const client = new ethers.JsonRpcProvider(settings.ethereum?.api_host);
+    // @ts-ignore
+    const client = new ethers.JsonRpcProvider(settings[this.type as keyof PaymentMethodSettings]?.api_host);
     evmClients.set(this.id, client);
 
     return client as JsonRpcProvider;
@@ -229,7 +232,7 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
 
   public static async supportAutoCharge(id: string) {
     const method = await PaymentMethod.findByPk(id);
-    return method && ['arcblock', 'ethereum'].includes(method.type);
+    return method && CHARGE_SUPPORTED_CHAIN_TYPES.includes(method.type);
   }
 }
 

package/api/src/store/models/types.ts

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/indent */
 import type { LiteralUnion } from 'type-fest';
 
+export type EVMChainType = 'ethereum' | 'base';
+
+export type NFTMintChainType = 'arcblock' | EVMChainType;
+
+export type ChainType = 'arcblock' | 'bitcoin' | 'stripe' | EVMChainType;
+
 export type GroupedBN = { [currencyId: string]: string };
 export type GroupedStrList = { [currencyId: string]: string[] };
 
@@ -242,6 +248,10 @@ export type PaymentMethodOptions = {
     payer: string;
     hash?: string;
   };
+  base?: {
+    payer: string;
+    hash?: string;
+  };
   stripe?: {
     payer: string;
   };
@@ -271,6 +281,13 @@ export type PaymentMethodSettings = {
     api_host: string;
     explorer_host: string;
   };
+  base?: {
+    chain_id: string;
+    api_host: string;
+    explorer_host: string;
+    native_symbol: string;
+    confirmation: number;
+  };
 };
 
 export type PaymentSettings = {
@@ -304,6 +321,14 @@ export type PaymentDetails = {
     gas_price: string;
     type?: LiteralUnion<'transfer' | 'approve', string>;
   };
+  base?: {
+    tx_hash: string;
+    payer: string;
+    block_height: string;
+    gas_used: string;
+    gas_price: string;
+    type?: LiteralUnion<'transfer' | 'approve', string>;
+  };
   bitcoin?: {
     tx_hash: string;
     payer: string;
@@ -370,9 +395,10 @@ export interface NftMintItem {
 }
 
 export type NftMintDetails = {
-  type: LiteralUnion<'arcblock' | 'ethereum' | 'bitcoin', string>;
+  type: NFTMintChainType;
   arcblock?: NftMintItem;
   ethereum?: NftMintItem;
+  base?: NftMintItem;
 };
 
 export type SubscriptionData = {

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.17.4
+version: 1.17.6
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.4",
+  "version": "1.17.6",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -44,29 +44,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.37",
-    "@arcblock/did": "^1.19.2",
+    "@arcblock/did": "^1.19.3",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.11.23",
-    "@arcblock/did-util": "^1.19.2",
-    "@arcblock/jwt": "^1.19.2",
-    "@arcblock/ux": "^2.11.23",
-    "@arcblock/validator": "^1.19.2",
+    "@arcblock/did-connect": "^2.11.27",
+    "@arcblock/did-util": "^1.19.3",
+    "@arcblock/jwt": "^1.19.3",
+    "@arcblock/ux": "^2.11.27",
+    "@arcblock/validator": "^1.19.3",
     "@blocklet/js-sdk": "^1.16.37",
     "@blocklet/logger": "^1.16.37",
-    "@blocklet/payment-react": "1.17.4",
+    "@blocklet/payment-react": "1.17.6",
     "@blocklet/sdk": "^1.16.37",
-    "@blocklet/ui-react": "^2.11.23",
-    "@blocklet/uploader": "^0.1.63",
-    "@blocklet/xss": "^0.1.20",
+    "@blocklet/ui-react": "^2.11.27",
+    "@blocklet/uploader": "^0.1.64",
+    "@blocklet/xss": "^0.1.21",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.19.2",
-    "@ocap/client": "^1.19.2",
-    "@ocap/mcrypto": "^1.19.2",
-    "@ocap/util": "^1.19.2",
-    "@ocap/wallet": "^1.19.2",
+    "@ocap/asset": "^1.19.3",
+    "@ocap/client": "^1.19.3",
+    "@ocap/mcrypto": "^1.19.3",
+    "@ocap/util": "^1.19.3",
+    "@ocap/wallet": "^1.19.3",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.4",
+    "@blocklet/payment-types": "1.17.6",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -150,7 +150,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.14",
+    "vite-plugin-blocklet": "^0.9.16",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "2d25cbcf146ba2195b1c3434ab3f64566f851893"
+  "gitHead": "50e93ab4340be53c9d9bd18718c6db26048578c5"
 }

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

@@ -12,7 +12,7 @@ import { dispatch } from 'use-bus';
 import DrawerForm from '../drawer-form';
 import PaymentCurrencyForm from './form';
 
-export default function PaymentCurrencyAdd({ method, onClose }: { method: TPaymentMethod; onClose: Function }) {
+export default function PaymentCurrencyAdd({ method, onClose }: { method: TPaymentMethod; onClose: () => void }) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false });
 

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

@@ -0,0 +1,73 @@
+/* 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 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 DrawerForm from '../drawer-form';
+import PaymentCurrencyForm from './form';
+
+export default function PaymentCurrencyEdit({
+  method,
+  onClose,
+  value,
+}: {
+  method: TPaymentMethod;
+  onClose: () => void;
+  value: TPaymentCurrency;
+}) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false });
+
+  const methods = useForm<TPaymentCurrency>({
+    defaultValues: {
+      payment_method_id: method.id,
+      name: value?.name,
+      description: value?.description,
+      logo: value?.logo,
+      contract: value?.contract,
+    },
+  });
+  const { handleSubmit } = methods;
+
+  const onSubmit = (data: TPaymentCurrency) => {
+    setState({ loading: true });
+    api
+      .put(`/api/payment-currencies/${value.id}`, data)
+      .then(() => {
+        setState({ loading: false });
+        Toast.success(t('admin.paymentCurrency.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('paymentCurrency.updated');
+      })
+      .catch((err) => {
+        setState({ loading: false });
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      open
+      icon={<AddOutlined />}
+      onClose={onClose}
+      text={t('admin.paymentCurrency.edit')}
+      width={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
+          {state.loading ? <CircularProgress size="small" /> : t('admin.paymentCurrency.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <PaymentCurrencyForm disableKeys={['contract']} />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -6,7 +6,15 @@ import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
 
-export default function PaymentCurrencyForm() {
+type TPaymentCurrencyFormProps = {
+  disableKeys?: string[];
+};
+
+PaymentCurrencyForm.defaultProps = {
+  disableKeys: [],
+};
+
+export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurrencyFormProps) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -29,6 +37,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={disableKeys.includes('name')}
       />
       <FormInput
         key="description"
@@ -37,6 +46,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={disableKeys.includes('description')}
       />
       <FormInput
         key="contract"
@@ -45,6 +55,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentCurrency.contract.label')}
         placeholder={t('admin.paymentCurrency.contract.tip')}
+        disabled={disableKeys.includes('contract')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>

package/src/components/payment-method/base.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput } from '@blocklet/payment-react';
+import { Stack, Typography } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import Uploader from '../uploader';
+
+export default function BaseMethodForm() {
+  const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+  const logo = useWatch({ control, name: 'logo' });
+
+  const onUploaded = (result: any) => {
+    if (!result.url) {
+      setValue('logo', '');
+      return;
+    }
+    const tmp = new URL(result.url);
+    setValue('logo', tmp.pathname);
+  };
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="api_host"
+        name="settings.base.api_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.base.api_host.label')}
+        placeholder={t('admin.paymentMethod.base.api_host.tip')}
+      />
+      <FormInput
+        key="explorer_host"
+        name="settings.base.explorer_host"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.base.explorer_host.label')}
+        placeholder={t('admin.paymentMethod.base.explorer_host.tip')}
+      />
+      <FormInput
+        key="native_symbol"
+        name="settings.base.native_symbol"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.base.native_symbol.label')}
+        placeholder={t('admin.paymentMethod.base.native_symbol.tip')}
+      />
+      <FormInput
+        key="confirmation"
+        name="settings.base.confirmation"
+        type="number"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.base.confirmation.label')}
+        placeholder={t('admin.paymentMethod.base.confirmation.tip')}
+      />
+      <Stack direction="column">
+        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Uploader onUploaded={onUploaded} preview={logo} />
+      </Stack>
+    </>
+  );
+}

package/src/components/payment-method/form.tsx

@@ -7,6 +7,7 @@ import ArcBlockMethodForm from './arcblock';
 import BitcoinMethodForm from './bitcoin';
 import EthereumMethodForm from './ethereum';
 import StripeMethodForm from './stripe';
+import BaseMethodForm from './base';
 
 export default function PaymentMethodForm() {
   const { t } = useLocaleContext();
@@ -31,6 +32,7 @@ export default function PaymentMethodForm() {
             <ToggleButton value="arcblock">ArcBlock</ToggleButton>
             <ToggleButton value="stripe">Stripe</ToggleButton>
             <ToggleButton value="ethereum">Ethereum</ToggleButton>
+            <ToggleButton value="base">Base</ToggleButton>
             <ToggleButton value="bitcoin" disabled>
               Bitcoin
             </ToggleButton>
@@ -43,6 +45,7 @@ export default function PaymentMethodForm() {
       {type === 'stripe' && <StripeMethodForm />}
       {type === 'arcblock' && <ArcBlockMethodForm />}
       {type === 'ethereum' && <EthereumMethodForm />}
+      {type === 'base' && <BaseMethodForm />}
       {type === 'bitcoin' && <BitcoinMethodForm />}
     </Root>
   );

package/src/components/price/upsell-select.tsx

@@ -66,6 +66,7 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState({ adding: false });
     }

package/src/components/subscription/metrics.tsx

@@ -32,7 +32,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     ready: showBalance,
   });
 
-  const supportShowBalance = showBalance && ['arcblock', 'ethereum'].includes(subscription.paymentMethod.type);
+  const supportShowBalance = showBalance && ['arcblock', 'ethereum', 'base'].includes(subscription.paymentMethod.type);
   // let scheduleToCancelTime = 0;
   // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
   //   scheduleToCancelTime = subscription.cancel_at * 1000;

package/src/components/subscription/portal/actions.tsx

@@ -121,7 +121,7 @@ const fetchExtraActions = async ({
 const supportRecharge = (subscription: TSubscriptionExpanded) => {
   return (
     ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
-    ['arcblock', 'ethereum'].includes(subscription?.paymentMethod?.type)
+    ['arcblock', 'ethereum', 'base'].includes(subscription?.paymentMethod?.type)
   );
 };
 

package/src/libs/util.ts

@@ -310,7 +310,7 @@ export function getInvoiceUsageReportStartEnd(invoice: TInvoiceExpanded, showPre
   }
   const cycle = getRecurringPeriod(subscription.pending_invoice_item_interval);
   let offset = 0;
-  if (['arcblock', 'ethereum'].includes(paymentMethod.type)) {
+  if (['arcblock', 'ethereum', 'base'].includes(paymentMethod.type)) {
     switch (invoice?.billing_reason) {
       case 'subscription_cycle':
         offset = cycle / 1000;

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,12 +398,38 @@ 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',
-      add: 'Add payment currency',
+      add: 'Add Currency',
+      edit: 'Edit Currency',
       save: 'Save payment currency',
       saved: 'Payment currency successfully saved',
+      delete: 'Delete payment currency',
+      deleteConfirm: 'Are you sure you want to delete this payment currency? Once deleted, it cannot be recovered',
+      deleted: 'Payment currency successfully deleted',
       logo: {
         label: 'Logo',
         tip: 'Displayed on payment page',

package/src/locales/zh.tsx

@@ -315,6 +315,8 @@ export default flat({
       save: '保存支付方式',
       saved: '支付方式已成功保存',
       settings: '设置',
+      gasTip: '使用 {method} 支付需保证账户在 {chain} 链上有余额支付手续费',
+      showQR: '显示二维码',
       props: {
         type: '类型',
         confirmation: '确认',
@@ -385,12 +387,38 @@ 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: '支付货币',
       add: '添加货币',
+      edit: '编辑货币',
       save: '保存货币',
       saved: '货币已成功保存',
+      delete: '删除货币',
+      deleteConfirm: '确定要删除此货币吗？一旦删除，将无法恢复',
+      deleted: '货币已成功删除',
       logo: {
         label: 'Logo',
         tip: '在支付页面显示',

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} />}