payment-kit 1.13.201 → 1.13.202

package/.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/lines-between-class-members': 'off',
     'import/prefer-default-export': 'off',
-    "react-hooks/exhaustive-deps": "off",
-    'jsx-a11y/no-noninteractive-element-interactions': "off"
+    'react-hooks/exhaustive-deps': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
   },
 };

package/api/src/integrations/blockchain/stake.ts

@@ -9,7 +9,7 @@ import { fromUnitToToken, toBN } from '@ocap/util';
 import { wallet } from '../../libs/auth';
 import { events } from '../../libs/event';
 import logger from '../../libs/logger';
-import { Customer, PaymentCurrency, PaymentMethod, Subscription } from '../../store/models';
+import { Customer, GroupedBN, PaymentCurrency, PaymentMethod, Subscription } from '../../store/models';
 
 export async function ensureStakedForGas() {
   const currencies = await PaymentCurrency.findAll({ where: { active: true, is_base_currency: true } });
@@ -172,3 +172,30 @@ export async function checkStakeRevokeTx() {
     );
   }
 }
+
+export async function getStakeSummaryByDid(did: string): Promise<GroupedBN> {
+  const methods = await PaymentMethod.findAll({
+    where: { type: 'arcblock' },
+    include: [{ model: PaymentCurrency, as: 'payment_currencies' }],
+  });
+  if (methods.length === 0) {
+    return {};
+  }
+
+  const address = toStakeAddress(did, wallet.address);
+  const results: GroupedBN = {};
+  await Promise.all(
+    methods.map(async (method: any) => {
+      const client = method.getOcapClient();
+      const { state } = await client.getStakeState({ address });
+      (state?.tokens || []).forEach((t: any) => {
+        const currency = method.payment_currencies.find((c: any) => t.address === c.contract);
+        if (currency) {
+          results[currency.id] = t.value;
+        }
+      });
+    })
+  );
+
+  return results;
+}

package/api/src/libs/session.ts

@@ -58,7 +58,7 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
 }
 
 // FIXME: apply coupon for discounts
-export function getCheckoutAmount(items: TLineItemExpanded[], currencyId: string, includeFreeTrial = false) {
+export function getCheckoutAmount(items: TLineItemExpanded[], currencyId: string, trialing = false) {
   let renew = new BN(0);
 
   const total = items
@@ -67,7 +67,7 @@ export function getCheckoutAmount(items: TLineItemExpanded[], currencyId: string
       if (price?.type === 'recurring') {
         renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currencyId)).mul(new BN(x.quantity)));
 
-        if (includeFreeTrial) {
+        if (trialing) {
           return acc;
         }
         if (price?.recurring?.usage_type === 'metered') {
@@ -227,7 +227,7 @@ export function getFastCheckoutAmount(
   items: TLineItemExpanded[],
   mode: string,
   currencyId: string,
-  includeFreeTrial = false,
+  trialing = false,
   minimumCycle = 1
 ) {
   if (minimumCycle < 1) {
@@ -235,7 +235,7 @@ export function getFastCheckoutAmount(
     minimumCycle = 1;
   }
 
-  const { total, renew } = getCheckoutAmount(items, currencyId, includeFreeTrial);
+  const { total, renew } = getCheckoutAmount(items, currencyId, trialing);
 
   if (mode === 'payment') {
     return total;
@@ -246,7 +246,7 @@ export function getFastCheckoutAmount(
   }
 
   if (mode === 'subscription') {
-    return new BN(total).add(new BN(renew).mul(new BN(includeFreeTrial ? minimumCycle : minimumCycle - 1))).toString();
+    return new BN(total).add(new BN(renew).mul(new BN(trialing ? minimumCycle : minimumCycle - 1))).toString();
   }
 
   return '0';

package/api/src/routes/checkout-sessions.ts

@@ -192,9 +192,11 @@ export const formatCheckoutSession = async (payload: any, throwOnEmptyItems = tr
 };
 
 export async function getCheckoutSessionAmounts(checkoutSession: CheckoutSession) {
+  const now = dayjs().unix();
   const items = await Price.expand(checkoutSession.line_items);
-  const includeTrial = !!checkoutSession.subscription_data?.trial_period_days;
-  const amount = getCheckoutAmount(items, checkoutSession.currency_id, includeTrial);
+  const trialInDays = Number(checkoutSession.subscription_data?.trial_period_days || 0);
+  const trialEnds = Number(checkoutSession.subscription_data?.trial_end || 0);
+  const amount = getCheckoutAmount(items, checkoutSession.currency_id, trialInDays > 0 || trialEnds > now);
   return {
     amount_subtotal: amount.subtotal,
     amount_total: amount.total,
@@ -460,11 +462,12 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
     await checkoutSession.update({ currency_id: paymentCurrency.id });
 
     // always update payment amount in case currency has changed
+    const now = dayjs().unix();
     const lineItems = await Price.expand(checkoutSession.line_items, { product: true, upsell: true });
     const trialInDays = Number(checkoutSession.subscription_data?.trial_period_days || 0);
     const trialEnds = Number(checkoutSession.subscription_data?.trial_end || 0);
     const billingThreshold = Number(checkoutSession.subscription_data?.billing_threshold_amount || 0);
-    const amount = getCheckoutAmount(lineItems, paymentCurrency.id, !!trialInDays);
+    const amount = getCheckoutAmount(lineItems, paymentCurrency.id, trialInDays > 0 || trialEnds > now);
     await checkoutSession.update({
       amount_subtotal: amount.subtotal,
       amount_total: amount.total,
@@ -726,7 +729,7 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
       lineItems,
       checkoutSession.mode,
       paymentCurrency.id,
-      !!trialInDays
+      trialInDays > 0 || trialEnds > now
     );
     const paymentSettings = {
       payment_method_types: checkoutSession.payment_method_types,

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

@@ -29,9 +29,9 @@ export default {
 
       // @ts-ignore
       const items = subscription!.items as TLineItemExpanded[];
-      const trialInDays = 0;
+      const trialing = false;
       const billingThreshold = Number(subscription.billing_thresholds?.amount_gte || 0);
-      const fastCheckoutAmount = getFastCheckoutAmount(items, 'setup', paymentCurrency.id, !!trialInDays);
+      const fastCheckoutAmount = getFastCheckoutAmount(items, 'setup', paymentCurrency.id, trialing);
       const delegation = await isDelegationSufficientForPayment({
         paymentMethod,
         paymentCurrency,
@@ -51,7 +51,7 @@ export default {
             data: getTxMetadata({ subscriptionId: subscription.id }),
             paymentCurrency,
             paymentMethod,
-            trialInDays,
+            trialing,
             billingThreshold,
             items,
           }),

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

@@ -31,9 +31,9 @@ export default {
 
       // @ts-ignore
       const items = subscription!.items as TLineItemExpanded[];
-      const trialInDays = 0;
+      const trialing = false;
       const billingThreshold = Number(subscription!.billing_thresholds?.amount_gte || 0);
-      const fastCheckoutAmount = getFastCheckoutAmount(items, 'subscription', paymentCurrency.id, !!trialInDays);
+      const fastCheckoutAmount = getFastCheckoutAmount(items, 'subscription', paymentCurrency.id, false);
       const delegation = await isDelegationSufficientForPayment({
         paymentMethod,
         paymentCurrency,
@@ -53,7 +53,7 @@ export default {
             data: getTxMetadata({ subscriptionId: subscription!.id }),
             paymentCurrency,
             paymentMethod,
-            trialInDays,
+            trialing,
             billingThreshold,
             items,
           }),

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

@@ -58,7 +58,7 @@ export default {
           userPk,
           nonce: invoice.id,
           data: getTxMetadata({ subscriptionId: subscription!.id, invoiceId: invoice.id }),
-          trialInDays: 0,
+          trialing: false,
           paymentCurrency,
           paymentMethod,
           items,

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

@@ -1,4 +1,5 @@
 import type { CallbackArgs } from '../../libs/auth';
+import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';
@@ -37,10 +38,13 @@ export default {
       const claims: { [type: string]: [string, object] } = {};
 
       // if we can complete purchase without any wallet interaction
+      const now = dayjs().unix();
       const items = checkoutSession.line_items as TLineItemExpanded[];
       const trialInDays = Number(checkoutSession.subscription_data?.trial_period_days || 0);
+      const trialEnds = Number(checkoutSession.subscription_data?.trial_end || 0);
+      const trialing = trialInDays > 0 || trialEnds > now;
       const billingThreshold = Number(checkoutSession.subscription_data?.billing_threshold_amount || 0);
-      const fastCheckoutAmount = getFastCheckoutAmount(items, checkoutSession.mode, paymentCurrency.id, !!trialInDays);
+      const fastCheckoutAmount = getFastCheckoutAmount(items, checkoutSession.mode, paymentCurrency.id, trialing);
       const delegation = await isDelegationSufficientForPayment({
         paymentMethod,
         paymentCurrency,
@@ -58,7 +62,7 @@ export default {
             data: getTxMetadata({ subscriptionId: subscription.id, checkoutSessionId }),
             paymentCurrency,
             paymentMethod,
-            trialInDays,
+            trialing,
             billingThreshold,
             items,
           }),

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

@@ -573,7 +573,7 @@ export async function getDelegationTxClaim({
   items,
   paymentCurrency,
   paymentMethod,
-  trialInDays = 0,
+  trialing = false,
   billingThreshold = 0,
 }: {
   userDid: string;
@@ -584,7 +584,7 @@ export async function getDelegationTxClaim({
   items: TLineItemExpanded[];
   paymentCurrency: PaymentCurrency;
   paymentMethod: PaymentMethod;
-    trialInDays: number;
+    trialing: boolean;
     billingThreshold?: number;
 }) {
   const amount = getFastCheckoutAmount(items, mode, paymentCurrency.id);
@@ -593,7 +593,7 @@ export async function getDelegationTxClaim({
   const tokenRequirements = await getTokenRequirements({
     items,
     mode,
-    trialInDays,
+    trialing,
     billingThreshold,
     paymentMethod,
     paymentCurrency,
@@ -702,7 +702,7 @@ export type TokenRequirementArgs = {
   mode: string;
   paymentMethod: PaymentMethod;
   paymentCurrency: PaymentCurrency;
-  trialInDays: number;
+  trialing: boolean;
   billingThreshold: number;
 };
 
@@ -711,11 +711,11 @@ export async function getTokenRequirements({
   mode,
   paymentMethod,
   paymentCurrency,
-  trialInDays = 0,
+  trialing = false,
   billingThreshold = 0,
 }: TokenRequirementArgs) {
   const tokenRequirements = [];
-  let amount = getFastCheckoutAmount(items, mode, paymentCurrency.id, !!trialInDays);
+  let amount = getFastCheckoutAmount(items, mode, paymentCurrency.id, !!trialing);
 
   // If the app has not staked, we need to add the gas fee to the amount
   if ((await hasStakedForGas(paymentMethod)) === false) {

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

@@ -1,4 +1,5 @@
 import type { CallbackArgs } from '../../libs/auth';
+import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';
@@ -37,10 +38,13 @@ export default {
     if (paymentMethod.type === 'arcblock') {
       const claims: { [type: string]: [string, object] } = {};
 
+      const now = dayjs().unix();
       const items = checkoutSession.line_items as TLineItemExpanded[];
       const trialInDays = Number(checkoutSession.subscription_data?.trial_period_days || 0);
+      const trialEnds = Number(checkoutSession.subscription_data?.trial_end || 0);
+      const trialing = trialInDays > 0 || trialEnds > now;
       const billingThreshold = Number(checkoutSession.subscription_data?.billing_threshold_amount || 0);
-      const fastCheckoutAmount = getFastCheckoutAmount(items, checkoutSession.mode, paymentCurrency.id, !!trialInDays);
+      const fastCheckoutAmount = getFastCheckoutAmount(items, checkoutSession.mode, paymentCurrency.id, trialing);
       const delegation = await isDelegationSufficientForPayment({
         paymentMethod,
         paymentCurrency,
@@ -60,7 +64,7 @@ export default {
             data: getTxMetadata({ subscriptionId: subscription.id, checkoutSessionId }),
             paymentCurrency,
             paymentMethod,
-            trialInDays,
+            trialing,
             billingThreshold,
             items,
           }),

package/api/src/routes/customers.ts

@@ -3,6 +3,7 @@ import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
 
+import { getStakeSummaryByDid } from '../integrations/blockchain/stake';
 import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { formatMetadata } from '../libs/util';
@@ -110,8 +111,8 @@ router.get('/me', user(), async (req, res) => {
     if (!doc) {
       res.json(null);
     } else {
-      const summary = await doc.getSummary();
-      res.json({ ...doc.toJSON(), summary });
+      const [summary, stake] = await Promise.all([doc.getSummary(), getStakeSummaryByDid(doc.did)]);
+      res.json({ ...doc.toJSON(), summary: { ...summary, stake } });
     }
   } catch (err) {
     console.error(err);
@@ -141,8 +142,8 @@ router.get('/:id/summary', auth, async (req, res) => {
       return;
     }
 
-    const result = await doc.getSummary();
-    res.json(result);
+    const [summary, stake] = await Promise.all([doc.getSummary(), getStakeSummaryByDid(doc.did)]);
+    res.json({ ...summary, stake });
   } catch (err) {
     console.error(err);
     res.json(null);

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.201",
+  "version": "1.13.202",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -45,15 +45,15 @@
     "@abtnode/cron": "1.16.24",
     "@arcblock/did": "^1.18.113",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.9.57",
+    "@arcblock/did-connect": "^2.9.63",
     "@arcblock/did-util": "^1.18.113",
     "@arcblock/jwt": "^1.18.113",
-    "@arcblock/ux": "^2.9.57",
+    "@arcblock/ux": "^2.9.63",
     "@blocklet/logger": "1.16.24",
-    "@blocklet/payment-react": "1.13.201",
+    "@blocklet/payment-react": "1.13.202",
     "@blocklet/sdk": "1.16.24",
-    "@blocklet/ui-react": "^2.9.57",
-    "@blocklet/uploader": "^0.0.74",
+    "@blocklet/ui-react": "^2.9.63",
+    "@blocklet/uploader": "^0.0.75",
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
@@ -109,8 +109,8 @@
   },
   "devDependencies": {
     "@abtnode/types": "1.16.24",
-    "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.201",
+    "@arcblock/eslint-config-ts": "^0.3.0",
+    "@blocklet/payment-types": "1.13.202",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -134,7 +134,7 @@
     "type-fest": "^4.10.2",
     "typescript": "^4.9.5",
     "vite": "^4.5.2",
-    "vite-plugin-blocklet": "^0.7.4",
+    "vite-plugin-blocklet": "^0.7.5",
     "vite-plugin-node-polyfills": "^0.7.0",
     "vite-plugin-svgr": "^2.4.0",
     "zx": "^7.2.3"
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0f62c0c55a77845cece0656cc6801847b9dc9e24"
+  "gitHead": "e9c7a403fee7506f92118581d659c91f210714a7"
 }

package/src/locales/en.tsx

@@ -398,6 +398,7 @@ export default flat({
       refund: 'Refund Amount',
       dispute: 'Dispute Amount',
       due: 'Due Amount',
+      stake: 'Stake Amount',
       name: 'Name',
       email: 'Email',
       phone: 'Phone',

package/src/locales/zh.tsx

@@ -387,6 +387,7 @@ export default flat({
       edit: '编辑信息',
       spent: '花费金额',
       refund: '退款金额',
+      stake: '质押金额',
       dispute: '争议金额',
       due: '欠款金额',
       name: '名称',

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

@@ -166,12 +166,13 @@ export default function CustomerDetail(props: { id: string }) {
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.customer.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} divider />
             <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} divider />
+            <InfoMetric label={t('admin.customer.stake')} value={<BalanceList data={data.summary.stake} />} divider />
+            <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} divider />
             <InfoMetric
               label={t('admin.customer.refund')}
               value={<BalanceList data={data.summary.refunded} />}
               divider
             />
-            <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} divider />
             {tokenBalances.map((x) => (
               <InfoMetric
                 key={x.currency}
@@ -197,7 +198,7 @@ export default function CustomerDetail(props: { id: string }) {
           </Button>
         </SectionHeader>
         <Stack>
-          <InfoRow label={t('common.did')} value={<DidAddress did={data.customer.did} />} />
+          <InfoRow label={t('common.did')} value={<DidAddress did={data.customer.did} showQrcode />} />
           <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
           <InfoRow label={t('admin.customer.phone')} value={data.customer.phone} />
           <InfoRow label={t('admin.customer.email')} value={data.customer.email} />

package/src/pages/admin/payments/index.tsx

@@ -6,14 +6,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { useTransitionContext } from '../../../components/progress-bar';
 
-const PaymentLinkCreate = React.lazy(() => import('./links/create'));
-const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
 const PaymentIntentDetail = React.lazy(() => import('./intents/detail'));
 const RefundDetail = React.lazy(() => import('./refunds/detail'));
 
 const pages = {
   intents: React.lazy(() => import('./intents')),
-  links: React.lazy(() => import('./links')),
   refunds: React.lazy(() => import('./refunds')),
 };
 
@@ -31,10 +28,6 @@ export default function PaymentIndex() {
     return <RefundDetail id={page} />;
   }
 
-  if (page.startsWith('plink_')) {
-    return <PaymentLinkDetail id={page} />;
-  }
-
   const onTabChange = (newTab: string) => {
     startTransition(() => {
       navigate(`/admin/payments/${newTab}`);
@@ -46,21 +39,14 @@ export default function PaymentIndex() {
   const tabs = [
     { label: t('admin.paymentIntent.list'), value: 'intents' },
     { label: t('admin.refunds'), value: 'refunds' },
-    { label: t('admin.paymentLinks'), value: 'links' },
   ];
 
-  let extra = null;
-  if (page === 'links') {
-    extra = <PaymentLinkCreate />;
-  }
-
   return (
     <div>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
           {t('admin.payments')}
         </Typography>
-        {extra}
       </Stack>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}

package/src/pages/admin/products/coupons/index.tsx

@@ -1,3 +1,5 @@
+import { Alert } from '@mui/material';
+
 export default function Coupons() {
-  return <div>Coupons List</div>;
+  return <Alert severity="info">This feature is planned, but not implemented yet.</Alert>;
 }

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

@@ -9,14 +9,17 @@ import { useTransitionContext } from '../../../components/progress-bar';
 const ProductCreate = React.lazy(() => import('./products/create'));
 const ProductDetail = React.lazy(() => import('./products/detail'));
 const PriceDetail = React.lazy(() => import('./prices/detail'));
+const PaymentLinkCreate = React.lazy(() => import('./links/create'));
+const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
 const PricingTableCreate = React.lazy(() => import('./pricing-tables/create'));
 const PricingTableDetail = React.lazy(() => import('./pricing-tables/detail'));
 
 const pages = {
   products: React.lazy(() => import('./products')),
-  coupons: React.lazy(() => import('./coupons')),
+  links: React.lazy(() => import('./links')),
   'pricing-tables': React.lazy(() => import('./pricing-tables')),
   passports: React.lazy(() => import('./passports')),
+  // coupons: React.lazy(() => import('./coupons')),
 };
 
 export default function Products() {
@@ -37,18 +40,25 @@ export default function Products() {
     return <PricingTableDetail id={page} />;
   }
 
+  if (page.startsWith('plink_')) {
+    return <PaymentLinkDetail id={page} />;
+  }
+
   // @ts-ignore
   const TabComponent = pages[page] || pages.products;
   const tabs = [
     { label: t('admin.products'), value: 'products' },
-    { label: t('admin.coupons'), value: 'coupons' },
+    { label: t('admin.paymentLinks'), value: 'links' },
     { label: t('admin.pricingTables'), value: 'pricing-tables' },
     { label: t('admin.passports'), value: 'passports' },
+    // { label: t('admin.coupons'), value: 'coupons' },
   ];
 
   let extra = null;
   if (page === 'products') {
     extra = <ProductCreate />;
+  } else if (page === 'links') {
+    extra = <PaymentLinkCreate />;
   } else if (page === 'pricing-tables') {
     extra = <PricingTableCreate />;
   }

package/src/pages/admin/{payments → products}/links/detail.tsx

@@ -87,7 +87,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
   const onUpdateMetadata = createUpdater('metadata');
   const onChange = (action: string) => {
     if (action === 'remove') {
-      navigate('/admin/payments/links');
+      navigate('/admin/products/links');
     } else {
       runAsync();
     }
@@ -99,7 +99,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
     <Grid container spacing={4} sx={{ mb: 4 }}>
       <Grid item md={12}>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
-          <Link to="/admin/payments/links">
+          <Link to="/admin/products/links">
             <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
               <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
               <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>

package/src/pages/admin/{payments → products}/links/index.tsx

@@ -151,7 +151,7 @@ function PaymentLinks() {
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPaymentLinkExpanded;
           startTransition(() => {
-            navigate(`/admin/payments/${item.id}`);
+            navigate(`/admin/products/${item.id}`);
           });
         },
       }}

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

@@ -88,7 +88,7 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
   };
 
   const onCreatePaymentLink = () => {
-    navigate(`/admin/payments/links?price_id=${data.id}`);
+    navigate(`/admin/products/links?price_id=${data.id}`);
   };
 
   const onCreatePricingTable = () => {

package/src/pages/customer/index.tsx

@@ -1,4 +1,4 @@
-import DID from '@arcblock/ux/lib/Address';
+import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { CustomerInvoiceList, PaymentProvider, formatError, getPrefix } from '@blocklet/payment-react';
@@ -134,7 +134,7 @@ export default function CustomerHome() {
                 </Button>
               </SectionHeader>
               <Stack>
-                <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID copyable>{data.did}</DID>} />
+                <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID did={data.did} copyable showQrcode />} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
@@ -178,6 +178,7 @@ export default function CustomerHome() {
                   justifyContent="flex-start"
                   sx={{ width: '100%' }}>
                   <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
+                  <InfoMetric label={t('admin.customer.stake')} value={<BalanceList data={data.summary.stake} />} />
                   <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
                   <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
                 </Stack>