payment-kit 1.18.5 → 1.18.7

package/api/src/libs/auth.ts

@@ -26,7 +26,7 @@ export const handlers = new WalletHandler({
 export const blocklet = new AuthService();
 
 export type CallbackArgs = {
-  request: Request;
+  request: Request & { context: Record<string, any> };
   userDid: string;
   userPk: string;
   didwallet: {

package/api/src/routes/connect/change-payment.ts

@@ -12,6 +12,7 @@ import {
 } from './shared';
 import { ensureStakeInvoice } from '../../libs/invoice';
 import { EVM_CHAIN_TYPES } from '../../libs/constants';
+import logger from '../../libs/logger';
 
 export default {
   action: 'change-payment',
@@ -26,17 +27,15 @@ export default {
     const { subscriptionId } = extraParams;
     const { subscription, paymentMethod, paymentCurrency } = await ensureChangePaymentContext(subscriptionId);
 
-    const claims: { [type: string]: [string, object] } = {};
-
+    const claimsList: any[] = [];
     // @ts-ignore
     const items = subscription!.items as TLineItemExpanded[];
     const trialing = true;
     const billingThreshold = Number(subscription.billing_thresholds?.amount_gte || 0);
 
     if (paymentMethod.type === 'arcblock') {
-      claims.delegation = [
-        'signature',
-        await getDelegationTxClaim({
+      claimsList.push({
+        signature: await getDelegationTxClaim({
           mode: 'setup',
           userDid,
           userPk,
@@ -48,12 +47,10 @@ export default {
           billingThreshold,
           items,
         }),
-      ];
+      });
 
-      // we always need to stake for the subscription
-      claims.staking = [
-        'prepareTx',
-        await getStakeTxClaim({
+      claimsList.push({
+        prepareTx: await getStakeTxClaim({
           userDid,
           userPk,
           paymentCurrency,
@@ -61,9 +58,9 @@ export default {
           items,
           subscription,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
@@ -71,9 +68,8 @@ export default {
         throw new Error(`Payment currency ${paymentMethod.type}:${paymentCurrency.id} does not support subscription`);
       }
 
-      claims.delegation = [
-        'signature',
-        await getDelegationTxClaim({
+      claimsList.push({
+        signature: await getDelegationTxClaim({
           mode: 'subscription',
           userDid,
           userPk,
@@ -85,19 +81,48 @@ export default {
           billingThreshold,
           items,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
-    throw new Error(`ChangeMethod: Payment method ${paymentMethod.type} not supported`);
+    throw new Error(`ChangePayment: Payment method ${paymentMethod.type} not supported`);
   },
 
-  onAuth: async ({ request, userDid, userPk, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, userPk, claims, extraParams, updateSession, step }: CallbackArgs) => {
     const { subscriptionId } = extraParams;
-    const { subscription, setupIntent, paymentCurrency, paymentMethod, customer } =
+    const { setupIntent, subscription, paymentMethod, paymentCurrency, customer } =
       await ensureChangePaymentContext(subscriptionId);
 
+    const result = request?.context?.store?.result || [];
+    result.push({
+      step,
+      claim: claims?.[0],
+    });
+
+    // 判断是否为最后一步
+    const staking = result.find((x: any) => x.claim?.type === 'prepareTx' && x.claim?.meta?.purpose === 'staking');
+    const isFinalStep = (paymentMethod.type === 'arcblock' && staking) || paymentMethod.type !== 'arcblock';
+
+    if (!isFinalStep) {
+      await updateSession({
+        result,
+      });
+      return { result };
+    }
+
+    // 清理 session
+    try {
+      await updateSession({
+        result: [],
+      });
+    } catch (error) {
+      logger.error('updateSession', {
+        error,
+      });
+    }
+    const claimsList = result.map((x: any) => x.claim);
+
     const prepareTxExecution = async () => {
       await subscription?.update({
         payment_settings: {
@@ -141,7 +166,7 @@ export default {
       const { stakingAmount, ...paymentDetails } = await executeOcapTransactions(
         userDid,
         userPk,
-        claims,
+        claimsList,
         paymentMethod,
         request,
         subscription?.id,
@@ -172,7 +197,7 @@ export default {
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
       await prepareTxExecution();
-      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claimsList, paymentMethod);
       waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
         .then(async () => {
           await afterTxExecution(paymentDetails);

package/api/src/routes/connect/change-plan.ts

@@ -16,6 +16,7 @@ import {
 } from './shared';
 import { ensureStakeInvoice } from '../../libs/invoice';
 import { EVM_CHAIN_TYPES } from '../../libs/constants';
+import logger from '../../libs/logger';
 
 export default {
   action: 'change-plan',
@@ -30,7 +31,7 @@ export default {
     const { subscriptionId } = extraParams;
     const { paymentMethod, paymentCurrency, subscription, customer } = await ensureSubscription(subscriptionId);
 
-    const claims: { [type: string]: [string, object] } = {};
+    const claimsList: any[] = [];
     // @ts-ignore
     const items = subscription!.items as TLineItemExpanded[];
     const trialing = false;
@@ -45,11 +46,9 @@ export default {
         amount: fastCheckoutAmount,
       });
 
-      // if we can complete purchase without any wallet interaction
       if (delegation.sufficient === false) {
-        claims.delegation = [
-          'signature',
-          await getDelegationTxClaim({
+        claimsList.push({
+          signature: await getDelegationTxClaim({
             mode: 'subscription',
             userDid,
             userPk,
@@ -61,13 +60,11 @@ export default {
             billingThreshold,
             items,
           }),
-        ];
+        });
       }
 
-      // we always need to stake for the subscription
-      claims.staking = [
-        'prepareTx',
-        await getStakeTxClaim({
+      claimsList.push({
+        prepareTx: await getStakeTxClaim({
           userDid,
           userPk,
           paymentCurrency,
@@ -75,9 +72,9 @@ export default {
           items,
           subscription: subscription!,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
@@ -85,9 +82,8 @@ export default {
         throw new Error(`Payment currency ${paymentMethod.type}:${paymentCurrency.id} does not support subscription`);
       }
 
-      claims.delegation = [
-        'signature',
-        await getDelegationTxClaim({
+      claimsList.push({
+        signature: await getDelegationTxClaim({
           mode: 'subscription',
           userDid,
           userPk,
@@ -99,19 +95,48 @@ export default {
           billingThreshold,
           items,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     throw new Error(`ChangePlan: Payment method ${paymentMethod.type} not supported`);
   },
 
-  onAuth: async ({ request, userDid, userPk, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, userPk, claims, extraParams, updateSession, step }: CallbackArgs) => {
     const { subscriptionId } = extraParams;
     const { invoice, paymentMethod, subscription, paymentCurrency, customer } =
       await ensureSubscription(subscriptionId);
 
+    const result = request?.context?.store?.result || [];
+    result.push({
+      step,
+      claim: claims?.[0],
+    });
+
+    // 判断是否为最后一步
+    const staking = result.find((x: any) => x.claim?.type === 'prepareTx' && x.claim?.meta?.purpose === 'staking');
+    const isFinalStep = (paymentMethod.type === 'arcblock' && staking) || paymentMethod.type !== 'arcblock';
+
+    if (!isFinalStep) {
+      await updateSession({
+        result,
+      });
+      return { result };
+    }
+
+    // 清理 session
+    try {
+      await updateSession({
+        result: [],
+      });
+    } catch (error) {
+      logger.error('updateSession', {
+        error,
+      });
+    }
+    const claimsList = result.map((x: any) => x.claim);
+
     const prepareTxExecution = async () => {
       await subscription?.update({
         payment_settings: {
@@ -148,7 +173,7 @@ export default {
       const { stakingAmount, ...paymentDetails } = await executeOcapTransactions(
         userDid,
         userPk,
-        claims,
+        claimsList,
         paymentMethod,
         request,
         subscription?.id,
@@ -181,7 +206,7 @@ export default {
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
       await prepareTxExecution();
 
-      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claimsList, paymentMethod);
       waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
         .then(async () => {
           await afterTxExecution(paymentDetails);

package/api/src/routes/connect/pay.ts

@@ -27,10 +27,10 @@ export default {
 
   onConnect: async (args: CallbackArgs) => {
     const { userDid, userPk, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { paymentIntent, paymentCurrency, paymentMethod } = await ensurePaymentIntent(
       checkoutSessionId,
-      connectedDid || userDid
+      connectedDid || sessionUserDid || userDid
     );
     if (!paymentIntent) {
       throw new Error('Payment intent not found');
@@ -87,10 +87,10 @@ export default {
 
   onAuth: async (args: CallbackArgs) => {
     const { request, userDid, claims, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { checkoutSession, customer, paymentIntent, paymentMethod } = await ensurePaymentIntent(
       checkoutSessionId,
-      connectedDid || userDid
+      connectedDid || sessionUserDid || userDid
     );
     if (!paymentIntent) {
       throw new Error('Payment intent not found');

package/api/src/routes/connect/setup.ts

@@ -30,19 +30,18 @@ export default {
   },
   onConnect: async (args: CallbackArgs) => {
     const { userDid, userPk, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { paymentMethod, paymentCurrency, checkoutSession, subscription, customer } = await ensureSetupIntent(
       checkoutSessionId,
-      connectedDid || userDid
+      connectedDid || sessionUserDid || userDid
     );
     if (!subscription) {
       throw new Error('Subscription for checkoutSession not found');
     }
 
-    const claims: { [type: string]: [string, object] } = {};
+    const claimsList: any[] = [];
     const now = dayjs().unix();
     const items = checkoutSession.line_items as TLineItemExpanded[];
-
     const { trialEnd, trialInDays } = getSubscriptionTrialSetup(
       checkoutSession.subscription_data as any,
       paymentCurrency.id
@@ -62,9 +61,8 @@ export default {
       });
       // if we can complete purchase without any wallet interaction
       if (delegation.sufficient === false) {
-        claims.delegation = [
-          'signature',
-          await getDelegationTxClaim({
+        claimsList.push({
+          signature: await getDelegationTxClaim({
             mode: checkoutSession.mode,
             userDid,
             userPk,
@@ -76,13 +74,12 @@ export default {
             billingThreshold: Math.max(minStakeAmount, billingThreshold),
             items,
           }),
-        ];
+        });
       }
 
       // we always need to stake for the subscription
-      claims.staking = [
-        'prepareTx',
-        await getStakeTxClaim({
+      claimsList.push({
+        prepareTx: await getStakeTxClaim({
           userDid,
           userPk,
           paymentCurrency,
@@ -90,9 +87,9 @@ export default {
           items,
           subscription,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
@@ -100,9 +97,8 @@ export default {
         throw new Error(`Payment currency ${paymentMethod.type}:${paymentCurrency.id} does not support setup`);
       }
 
-      claims.delegation = [
-        'signature',
-        await getDelegationTxClaim({
+      claimsList.push({
+        signature: await getDelegationTxClaim({
           mode: checkoutSession.mode,
           userDid,
           userPk,
@@ -114,23 +110,52 @@ export default {
           billingThreshold,
           items,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
   onAuth: async (args: CallbackArgs) => {
-    const { request, userDid, userPk, claims, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { request, userDid, userPk, claims, extraParams, updateSession, step } = args;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { setupIntent, checkoutSession, paymentMethod, subscription, invoice, paymentCurrency, customer } =
-      await ensureSetupIntent(checkoutSessionId, connectedDid || userDid);
+      await ensureSetupIntent(checkoutSessionId, connectedDid || sessionUserDid || userDid);
 
     if (!subscription) {
       throw new Error('Subscription for checkoutSession not found');
     }
 
+    const result = request?.context?.store?.result || [];
+    result.push({
+      step,
+      claim: claims?.[0],
+    });
+
+    // 判断是否为最后一步
+    const staking = result.find((x: any) => x.claim?.type === 'prepareTx' && x.claim?.meta?.purpose === 'staking');
+    const isFinalStep = (paymentMethod.type === 'arcblock' && staking) || paymentMethod.type !== 'arcblock';
+
+    if (!isFinalStep) {
+      await updateSession({
+        result,
+      });
+      return { result };
+    }
+
+    // 清理 session
+    try {
+      await updateSession({
+        result: [],
+      });
+    } catch (error) {
+      logger.error('updateSession', {
+        error,
+      });
+    }
+    const claimsList = result.map((x: any) => x.claim);
+
     const paymentSettings = {
       payment_method_types: [paymentMethod.type],
       payment_method_options: {
@@ -177,7 +202,7 @@ export default {
         const { stakingAmount, ...paymentDetails } = await executeOcapTransactions(
           userDid,
           userPk,
-          claims,
+          claimsList,
           paymentMethod,
           request,
           subscription?.id,
@@ -216,12 +241,12 @@ export default {
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
       await prepareTxExecution();
-      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
-      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claimsList);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claimsList, paymentMethod);
       waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
         .then(async () => {
           await afterTxExecution(paymentDetails);
-          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claimsList);
         })
         .catch(console.error);
 

package/api/src/routes/connect/subscribe.ts

@@ -31,16 +31,15 @@ export default {
   },
   onConnect: async (args: CallbackArgs) => {
     const { userDid, userPk, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { checkoutSession, paymentMethod, paymentCurrency, subscription, customer } = await ensurePaymentIntent(
       checkoutSessionId,
-      connectedDid || userDid
+      connectedDid || sessionUserDid || userDid
     );
     if (!subscription) {
       throw new Error('Subscription for checkoutSession not found');
     }
 
-    const claims: { [type: string]: [string, object] } = {};
     const now = dayjs().unix();
     const items = checkoutSession.line_items as TLineItemExpanded[];
     const { trialEnd, trialInDays } = getSubscriptionTrialSetup(
@@ -51,7 +50,7 @@ export default {
     const billingThreshold = Number(checkoutSession.subscription_data?.billing_threshold_amount || 0);
     const minStakeAmount = Number(checkoutSession.subscription_data?.min_stake_amount || 0);
     const fastCheckoutAmount = getFastCheckoutAmount(items, checkoutSession.mode, paymentCurrency.id, trialing);
-
+    const claimsList: any[] = [];
     if (paymentMethod.type === 'arcblock') {
       const delegation = await isDelegationSufficientForPayment({
         paymentMethod,
@@ -62,9 +61,8 @@ export default {
 
       // if we can complete purchase without any wallet interaction
       if (delegation.sufficient === false) {
-        claims.delegation = [
-          'signature',
-          await getDelegationTxClaim({
+        claimsList.push({
+          signature: await getDelegationTxClaim({
             mode: checkoutSession.mode,
             userDid,
             userPk,
@@ -76,13 +74,12 @@ export default {
             billingThreshold: Math.max(minStakeAmount, billingThreshold),
             items,
           }),
-        ];
+        });
       }
 
       // we always need to stake for the subscription
-      claims.staking = [
-        'prepareTx',
-        await getStakeTxClaim({
+      claimsList.push({
+        prepareTx: await getStakeTxClaim({
           userDid,
           userPk,
           paymentCurrency,
@@ -90,9 +87,9 @@ export default {
           items,
           subscription,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
@@ -100,9 +97,8 @@ export default {
         throw new Error(`Payment currency ${paymentMethod.type}:${paymentCurrency.id} does not support subscription`);
       }
 
-      claims.delegation = [
-        'signature',
-        await getDelegationTxClaim({
+      claimsList.push({
+        signature: await getDelegationTxClaim({
           mode: checkoutSession.mode,
           userDid,
           userPk,
@@ -114,20 +110,43 @@ export default {
           billingThreshold,
           items,
         }),
-      ];
+      });
 
-      return claims;
+      return claimsList;
     }
 
     throw new Error(`subscription: Payment method ${paymentMethod.type} not supported`);
   },
   onAuth: async (args: CallbackArgs) => {
-    const { request, userDid, userPk, claims, extraParams } = args;
-    const { checkoutSessionId, connectedDid } = extraParams;
+    const { request, userDid, userPk, claims, extraParams, updateSession, step } = args;
+    const { checkoutSessionId, connectedDid, sessionUserDid } = extraParams;
     const { checkoutSession, customer, paymentMethod, subscription, paymentCurrency } = await ensurePaymentIntent(
       checkoutSessionId,
-      connectedDid || userDid
+      connectedDid || sessionUserDid || userDid
     );
+    const result = request?.context?.store?.result || [];
+    result.push({
+      step,
+      claim: claims?.[0],
+    });
+    const staking = result.find((x: any) => x.claim?.type === 'prepareTx' && x.claim?.meta?.purpose === 'staking');
+    const isFinalStep = (paymentMethod.type === 'arcblock' && staking) || paymentMethod.type !== 'arcblock';
+    if (!isFinalStep) {
+      await updateSession({
+        result,
+      });
+      return { result };
+    }
+    try {
+      await updateSession({
+        result: [],
+      });
+    } catch (error) {
+      logger.error('updateSession', {
+        error,
+      });
+    }
+    const claimsList = result.map((x: any) => x.claim);
 
     if (!subscription) {
       throw new Error('Subscription for checkoutSession not found');
@@ -164,7 +183,7 @@ export default {
       const { stakingAmount, ...paymentDetails } = await executeOcapTransactions(
         userDid,
         userPk,
-        claims,
+        claimsList,
         paymentMethod,
         request,
         subscription?.id,
@@ -198,9 +217,9 @@ export default {
     if (EVM_CHAIN_TYPES.includes(paymentMethod.type)) {
       await prepareTxExecution();
       const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, subscription });
-      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claimsList);
 
-      const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
+      const paymentDetails = await executeEvmTransaction('approve', userDid, claimsList, paymentMethod);
       waitForEvmTxConfirm(
         paymentMethod.getEvmClient(),
         Number(paymentDetails.block_height),
@@ -208,7 +227,7 @@ export default {
       )
         .then(async () => {
           await afterTxExecution(invoice!, paymentDetails);
-          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claimsList);
         })
         .catch(console.error);
 

package/api/src/routes/payment-links.ts

@@ -146,7 +146,7 @@ export async function createPaymentLink(payload: any) {
 }
 
 const PaymentLinkCreateSchema = Joi.object({
-  name: Joi.string().required(),
+  name: Joi.string().optional(),
   line_items: Joi.array()
     .items(
       Joi.object({

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.5",
+  "version": "1.18.7",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -46,18 +46,18 @@
     "@abtnode/cron": "^1.16.38",
     "@arcblock/did": "^1.19.9",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.11.34",
+    "@arcblock/did-connect": "^2.11.40",
     "@arcblock/did-util": "^1.19.9",
     "@arcblock/jwt": "^1.19.9",
-    "@arcblock/ux": "^2.11.34",
+    "@arcblock/ux": "^2.11.40",
     "@arcblock/validator": "^1.19.9",
     "@blocklet/js-sdk": "^1.16.38",
     "@blocklet/logger": "^1.16.38",
-    "@blocklet/payment-react": "1.18.5",
+    "@blocklet/payment-react": "1.18.7",
     "@blocklet/sdk": "^1.16.38",
-    "@blocklet/ui-react": "^2.11.34",
-    "@blocklet/uploader": "^0.1.66",
-    "@blocklet/xss": "^0.1.22",
+    "@blocklet/ui-react": "^2.11.40",
+    "@blocklet/uploader": "^0.1.70",
+    "@blocklet/xss": "^0.1.25",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.38",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.5",
+    "@blocklet/payment-types": "1.18.7",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "83cca0f1ac5814964c8bedd04f34a3a2a986f554"
+  "gitHead": "b75168ab5e2cd939571e6e26543374c8d0dab963"
 }

package/src/components/subscription/list.tsx

@@ -219,6 +219,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
               q: {
                 'like-metadata': text,
                 'like-description': text,
+                'like-id': text,
               },
               pageSize: 100,
               page: 1,

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

@@ -140,7 +140,7 @@ export function SubscriptionActionsInner({
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [subs, setSubscription] = useState(subscription);
   const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id, true);
   const action = getSubscriptionAction(subs, actionProps ?? {});
@@ -239,7 +239,7 @@ export function SubscriptionActionsInner({
       saveConnect: false,
       action: 'delegation',
       prefix: joinURL(getPrefix(), '/api/did'),
-      extraParams: { subscriptionId: subscription.id },
+      extraParams: { subscriptionId: subscription.id, sessionUserDid: session.user.did },
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.delegation.success'));
@@ -286,7 +286,7 @@ export function SubscriptionActionsInner({
           saveConnect: false,
           action: 'overdraft-protection',
           prefix: joinURL(getPrefix(), '/api/did'),
-          extraParams: { subscriptionId: subscription.id, amount },
+          extraParams: { subscriptionId: subscription.id, amount, sessionUserDid: session.user.did },
           onSuccess: () => {
             connect.close();
             Toast.success(t('customer.overdraftProtection.settingSuccess'));

package/src/components/uploader.tsx

@@ -62,6 +62,7 @@ export default function Uploader({
         }}
         coreProps={{
           restrictions: {
+            // @ts-ignore
             allowedFileExts,
             maxFileSize,
             maxNumberOfFiles,

package/src/libs/util.ts

@@ -3,12 +3,14 @@
 /* eslint-disable @typescript-eslint/indent */
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
+  ChainType,
   LineItem,
   PriceRecurring,
   TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
+  TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
@@ -364,3 +366,14 @@ export function getAppInfo(address: string): { name: string; avatar: string; typ
   }
   return null;
 }
+
+export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  if (method.type === 'arcblock' && address) {
+    return joinURL(explorerHost, 'accounts', address, 'tokens');
+  }
+  if (['ethereum', 'base'].includes(method.type) && address) {
+    return joinURL(explorerHost, 'address', address);
+  }
+  return '';
+}

package/src/pages/customer/recharge.tsx

@@ -28,14 +28,14 @@ import {
 } from '@blocklet/payment-react';
 import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined } from '@mui/icons-material';
+import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
 import { BN, fromUnitToToken } from '@ocap/util';
 import RechargeList from '../../components/invoice/recharge';
 import SubscriptionDescription from '../../components/subscription/description';
 import InfoRow from '../../components/info-row';
 import Currency from '../../components/currency';
 import SubscriptionMetrics from '../../components/subscription/metrics';
-import { goBackOrFallback } from '../../libs/util';
+import { getTokenBalanceLink, goBackOrFallback } from '../../libs/util';
 import CustomerLink from '../../components/customer/link';
 import { useSessionContext } from '../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../libs/dayjs';
@@ -237,6 +237,8 @@ export default function RechargePage() {
     });
   };
 
+  const balanceLink = getTokenBalanceLink(paymentMethod!, payerValue?.paymentAddress || receiveAddress);
+
   return (
     <Root>
       <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
@@ -336,16 +338,43 @@ export default function RechargePage() {
             </BalanceCard>
 
             <BalanceCard
+              onClick={() => balanceLink && window.open(balanceLink, '_blank')}
               sx={{
                 background: 'var(--tags-tag-orange-bg, #B7FEE3)',
                 color: 'var(--tags-tag-orange-text, #007C52)',
                 borderRadius: 'var(--radius-m, 8px)',
                 border: 'none',
+
+                transition: 'all 0.2s ease-in-out',
+                position: 'relative',
+                cursor: balanceLink ? 'pointer' : 'default',
+                '&:hover': balanceLink
+                  ? {
+                      '& .MuiSvgIcon-root': {
+                        opacity: 1,
+                        transform: 'translateX(0)',
+                      },
+                    }
+                  : undefined,
               }}>
-              <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
-              <Typography variant="h4">
-                {currentBalance} {subscription.paymentCurrency.symbol}
-              </Typography>
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Stack flex={1}>
+                  <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
+                  <Typography variant="h4">
+                    {currentBalance} {subscription.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+                {balanceLink && (
+                  <ArrowForwardOutlined
+                    sx={{
+                      opacity: 0,
+                      transform: 'translateX(-10px)',
+                      transition: 'all 0.2s ease-in-out',
+                      color: 'inherit',
+                    }}
+                  />
+                )}
+              </Stack>
             </BalanceCard>
 
             <Paper elevation={0} sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>

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

@@ -6,6 +6,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import {
   AddressForm,
   CurrencySelector,
+  LoadingButton,
   PaymentSummary,
   StripeForm,
   api,
@@ -20,7 +21,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';

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

@@ -2,6 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
+  LoadingButton,
   PricingTable,
   api,
   formatBNStr,
@@ -12,7 +13,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { useRef } from 'react';
@@ -53,7 +53,7 @@ export default function CustomerSubscriptionChangePlan() {
   const navigate = useNavigate();
   const { id } = useParams() as { id: string };
   const { t, locale } = useLocaleContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [searchParams] = useSearchParams();
   const redirectUrl = searchParams.get('redirectUrl');
   const confirmRef = useRef<HTMLButtonElement>(null);
@@ -164,6 +164,7 @@ export default function CustomerSubscriptionChangePlan() {
             extraParams: {
               invoiceId: result.data.pending_update?.updates?.latest_invoice_id,
               subscriptionId: result.data.id,
+              sessionUserDid: session?.user?.did,
             },
             onSuccess: () => {
               setState({ paid: true, paying: false });

package/src/pages/integrations/overview.tsx

@@ -1,25 +1,32 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Card, CardActionArea, CardContent, Grid, Typography, Divider } from '@mui/material';
+import { Box, Grid, Typography, Divider } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import { Favorite, Inventory, Link as LinkIcon, TableChart, Payment, Code } from '@mui/icons-material';
+import {
+  Link as LinkIcon,
+  Payment,
+  Code,
+  Inventory2Outlined,
+  TableChartOutlined,
+  FavoriteBorderOutlined,
+} from '@mui/icons-material';
 
 const basicFeatures = [
   {
     title: 'integrations.features.products.title',
     description: 'integrations.features.products.intro',
-    icon: <Inventory color="primary" sx={{ fontSize: 40 }} />,
+    icon: <Inventory2Outlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
     path: '/admin/products',
   },
   {
     title: 'integrations.features.paymentLinks.title',
     description: 'integrations.features.paymentLinks.intro',
-    icon: <LinkIcon color="primary" sx={{ fontSize: 40 }} />,
+    icon: <LinkIcon sx={{ fontSize: 32, color: 'text.lighter' }} />,
     path: '/admin/products/links',
   },
   {
     title: 'integrations.features.pricingTables.title',
     description: 'integrations.features.pricingTables.intro',
-    icon: <TableChart color="primary" sx={{ fontSize: 40 }} />,
+    icon: <TableChartOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
     path: '/admin/products/pricing-tables',
   },
 ];
@@ -28,20 +35,20 @@ const advancedFeatures = [
   {
     title: 'integrations.features.donate.title',
     description: 'integrations.features.donate.intro',
-    icon: <Favorite color="primary" sx={{ fontSize: 40 }} />,
+    icon: <FavoriteBorderOutlined sx={{ fontSize: 32, color: 'text.lighter' }} />,
     path: '/integrations/donations',
   },
   {
     title: 'integrations.features.paymentMethods.title',
     description: 'integrations.features.paymentMethods.intro',
-    icon: <Payment color="primary" sx={{ fontSize: 40 }} />,
+    icon: <Payment sx={{ fontSize: 32, color: 'text.lighter' }} />,
     path: '/admin/settings/payment-methods',
   },
   {
     title: 'integrations.features.api.title',
     description: 'integrations.features.api.intro',
-    icon: <Code color="primary" sx={{ fontSize: 40 }} />,
-    path: 'https://www.npmjs.com/package/@blocklet/payment-js',
+    icon: <Code sx={{ fontSize: 32, color: 'text.lighter' }} />,
+    path: 'https://www.arcblock.io/docs/arcblock-payment-kit/en/start-payment-js',
     external: true,
   },
 ];
@@ -61,7 +68,7 @@ export default function Overview() {
   return (
     <Box>
       <Box mb={4}>
-        <Typography variant="h2" gutterBottom fontWeight="bold" mb={2}>
+        <Typography variant="h2" gutterBottom fontWeight="bold" mb={1}>
           {t('common.welcome')}
         </Typography>
         <Typography variant="body1" color="text.secondary" mb={2}>
@@ -69,50 +76,66 @@ export default function Overview() {
         </Typography>
       </Box>
 
-      <Typography variant="h5" gutterBottom>
+      <Typography variant="h3" gutterBottom mb={2}>
         {t('integrations.basicFeatures')} 🚀
       </Typography>
-      <Grid container spacing={3} mb={4}>
+      <Grid container spacing={2} mb={4} sx={{ maxWidth: 1200 }}>
         {basicFeatures.map((item) => (
           <Grid item xs={12} sm={6} md={4} key={item.path}>
-            <Card sx={{ height: '100%' }}>
-              <CardActionArea onClick={() => handleClick(item)} sx={{ height: '100%' }}>
-                <CardContent>
-                  <Box display="flex" alignItems="center" gap={2} mb={2}>
-                    {item.icon}
-                    <Typography variant="h6">{t(item.title)}</Typography>
-                  </Box>
-                  <Typography variant="body2" color="text.secondary">
-                    {t(item.description)}
-                  </Typography>
-                </CardContent>
-              </CardActionArea>
-            </Card>
+            <Box
+              className="base-card"
+              onClick={() => handleClick(item)}
+              sx={{
+                height: '100%',
+                cursor: 'pointer',
+                '&:hover': {
+                  boxShadow:
+                    '0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)), 0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))',
+                },
+              }}>
+              <Box mb={1}>
+                {item.icon}
+                <Typography variant="h4" mt={1.5}>
+                  {t(item.title)}
+                </Typography>
+              </Box>
+              <Typography variant="body2" color="text.secondary">
+                {t(item.description)}
+              </Typography>
+            </Box>
           </Grid>
         ))}
       </Grid>
 
       <Divider sx={{ my: 4 }} />
 
-      <Typography variant="h5" gutterBottom>
+      <Typography variant="h3" gutterBottom mb={2}>
         {t('integrations.advancedFeatures')} 🔥
       </Typography>
-      <Grid container spacing={3}>
+      <Grid container spacing={2} sx={{ maxWidth: 1200 }}>
         {advancedFeatures.map((item) => (
           <Grid item xs={12} sm={6} md={4} key={item.path}>
-            <Card sx={{ height: '100%' }}>
-              <CardActionArea onClick={() => handleClick(item)} sx={{ height: '100%' }}>
-                <CardContent>
-                  <Box display="flex" alignItems="center" gap={2} mb={2}>
-                    {item.icon}
-                    <Typography variant="h6">{t(item.title)}</Typography>
-                  </Box>
-                  <Typography variant="body2" color="text.secondary">
-                    {t(item.description)}
-                  </Typography>
-                </CardContent>
-              </CardActionArea>
-            </Card>
+            <Box
+              className="base-card"
+              onClick={() => handleClick(item)}
+              sx={{
+                height: '100%',
+                cursor: 'pointer',
+                '&:hover': {
+                  boxShadow:
+                    '0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)), 0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))',
+                },
+              }}>
+              <Box mb={1}>
+                {item.icon}
+                <Typography variant="h6" mt={1.5}>
+                  {t(item.title)}
+                </Typography>
+              </Box>
+              <Typography variant="body2" color="text.secondary">
+                {t(item.description)}
+              </Typography>
+            </Box>
           </Grid>
         ))}
       </Grid>