payment-kit 1.17.4 → 1.17.5

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.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.4",
+  "version": "1.17.5",
   "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.5",
     "@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.5",
     "@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": "7713be8272f1056796820a9d52f742ed63899900"
 }

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,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',

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: '',