payment-kit 1.17.3 → 1.17.5

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-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.3
+version: 1.17.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.3",
+  "version": "1.17.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,30 +43,30 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.36",
-    "@arcblock/did": "^1.18.166",
+    "@abtnode/cron": "^1.16.37",
+    "@arcblock/did": "^1.19.3",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.11.15",
-    "@arcblock/did-util": "^1.18.166",
-    "@arcblock/jwt": "^1.18.166",
-    "@arcblock/ux": "^2.11.15",
-    "@arcblock/validator": "^1.18.166",
-    "@blocklet/js-sdk": "^1.16.36",
-    "@blocklet/logger": "^1.16.36",
-    "@blocklet/payment-react": "1.17.3",
-    "@blocklet/sdk": "^1.16.36",
-    "@blocklet/ui-react": "^2.11.15",
-    "@blocklet/uploader": "^0.1.62",
-    "@blocklet/xss": "^0.1.19",
+    "@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.5",
+    "@blocklet/sdk": "^1.16.37",
+    "@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.18.166",
-    "@ocap/client": "^1.18.166",
-    "@ocap/mcrypto": "^1.18.166",
-    "@ocap/util": "^1.18.166",
-    "@ocap/wallet": "^1.18.166",
+    "@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",
@@ -118,9 +118,9 @@
     "validator": "^13.12.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.36",
+    "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.3",
+    "@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": "bc8adef7ff5a032048eef64dc1753bcee88acb98"
+  "gitHead": "7713be8272f1056796820a9d52f742ed63899900"
 }

package/src/components/customer/overdraft-protection.tsx

@@ -17,6 +17,7 @@ import {
   RadioGroup,
   Radio,
   Link,
+  Skeleton,
 } from '@mui/material';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { EventHandler, useState } from 'react';
@@ -105,6 +106,7 @@ export default function OverdraftProtectionDialog({
       amount: '0',
       gas: '0',
     },
+    loading: cycleAmountLoading,
   } = useRequest(
     () =>
       fetchCycleAmount(subscription.id, {
@@ -356,62 +358,91 @@ export default function OverdraftProtectionDialog({
             </Typography>
 
             <Grid container spacing={2} ml={-2} sx={{ mt: -1 }}>
-              {presetAmounts.map(({ amount: presetAmount, cycles }) => (
-                <Grid item xs={6} sm={4} key={presetAmount}>
-                  <Card
-                    variant="outlined"
-                    sx={{
-                      height: '100%',
-                      transition: 'all 0.3s',
-                      cursor: 'pointer',
-                      '&:hover': {
-                        transform: 'translateY(-4px)',
-                        boxShadow: 3,
-                      },
-                      ...(amount === presetAmount && !customAmount
-                        ? { borderColor: 'primary.main', borderWidth: 2 }
-                        : {}),
-                    }}>
-                    <CardActionArea
-                      onClick={() => {
-                        methods.setValue('amount', presetAmount);
-                        setCustomAmount(false);
-                      }}
-                      sx={{ height: '100%', p: 1 }}>
-                      <Stack spacing={1} alignItems="center">
-                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                          {presetAmount} {currency.symbol}
-                        </Typography>
-                        <Typography variant="caption" color="text.secondary">
-                          {formatEstimatedDuration(cycles)}
-                        </Typography>
-                      </Stack>
-                    </CardActionArea>
-                  </Card>
-                </Grid>
-              ))}
-              <Grid item xs={6} sm={4}>
-                <Card
-                  variant="outlined"
-                  sx={{
-                    height: '100%',
-                    transition: 'all 0.3s',
-                    cursor: 'pointer',
-                    '&:hover': {
-                      transform: 'translateY(-4px)',
-                      boxShadow: 3,
-                    },
-                    ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
-                  }}>
-                  <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
-                    <Stack spacing={1} alignItems="center">
-                      <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                        {t('common.custom')}
-                      </Typography>
-                    </Stack>
-                  </CardActionArea>
-                </Card>
-              </Grid>
+              {cycleAmountLoading ? (
+                // 加载状态的占位
+                <>
+                  {[1, 2, 3, 4, 5].map((key) => (
+                    <Grid item xs={6} sm={4} key={key}>
+                      <Card variant="outlined" sx={{ height: '100%' }}>
+                        <CardActionArea sx={{ height: '100%', p: 1 }}>
+                          <Stack spacing={1} alignItems="center">
+                            <Skeleton variant="rectangular" width={80} height={32} />
+                            <Skeleton width={100} />
+                          </Stack>
+                        </CardActionArea>
+                      </Card>
+                    </Grid>
+                  ))}
+                  <Grid item xs={6} sm={4}>
+                    <Card variant="outlined" sx={{ height: '100%' }}>
+                      <CardActionArea sx={{ height: '100%', p: 2 }}>
+                        <Stack spacing={1} alignItems="center">
+                          <Skeleton variant="rectangular" width={80} height={24} />
+                        </Stack>
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
+                </>
+              ) : (
+                <>
+                  {presetAmounts.map(({ amount: presetAmount, cycles }) => (
+                    <Grid item xs={6} sm={4} key={presetAmount}>
+                      <Card
+                        variant="outlined"
+                        sx={{
+                          height: '100%',
+                          transition: 'all 0.3s',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            transform: 'translateY(-4px)',
+                            boxShadow: 3,
+                          },
+                          ...(amount === presetAmount && !customAmount
+                            ? { borderColor: 'primary.main', borderWidth: 2 }
+                            : {}),
+                        }}>
+                        <CardActionArea
+                          onClick={() => {
+                            methods.setValue('amount', presetAmount);
+                            setCustomAmount(false);
+                          }}
+                          sx={{ height: '100%', p: 1 }}>
+                          <Stack spacing={1} alignItems="center">
+                            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                              {presetAmount} {currency.symbol}
+                            </Typography>
+                            <Typography variant="caption" color="text.secondary">
+                              {formatEstimatedDuration(cycles)}
+                            </Typography>
+                          </Stack>
+                        </CardActionArea>
+                      </Card>
+                    </Grid>
+                  ))}
+                  <Grid item xs={6} sm={4}>
+                    <Card
+                      variant="outlined"
+                      sx={{
+                        height: '100%',
+                        transition: 'all 0.3s',
+                        cursor: 'pointer',
+                        '&:hover': {
+                          transform: 'translateY(-4px)',
+                          boxShadow: 3,
+                        },
+                        ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
+                      }}>
+                      <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
+                        <Stack spacing={1} alignItems="center">
+                          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                            {t('common.custom')}
+                          </Typography>
+                        </Stack>
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
+                </>
+              )}
             </Grid>
 
             {customAmount && (

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;