@blocklet/payment-react 1.15.33 → 1.15.35

package/lib/locales/zh.js

@@ -95,7 +95,9 @@ module.exports = (0, _flat.default)({
     quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
     quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3",
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
-    saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F"
+    saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
+    stakeAmount: "\u8D28\u62BC\u91D1\u989D",
+    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D"
   },
   payment: {
     checkout: {
@@ -305,14 +307,21 @@ module.exports = (0, _flat.default)({
       reason: {
         creation: "\u8BA2\u9605\u521B\u5EFA",
         cycle: "\u81EA\u52A8\u6263\u8D39",
-        staking: "\u8BA2\u9605\u521B\u5EFA\uFF08\u8D28\u62BC\uFF09",
+        staking: "\u8BA2\u9605\u521B\u5EFA",
         update: "\u8BA2\u9605\u66F4\u65B0",
         recover: "\u8BA2\u9605\u6062\u590D",
         threshold: "\u7528\u91CF\u8D26\u5355",
         cancel: "\u8BA2\u9605\u53D6\u6D88",
         manual: "\u4EBA\u5DE5\u8D26\u5355",
         upcoming: "\u672A\u6765\u8D26\u5355",
-        slashStake: "\u7F5A\u6CA1\u8D28\u62BC"
+        slashStake: "\u7F5A\u6CA1\u8D28\u62BC",
+        stake: "\u62BC\u91D1",
+        payment: "\u4ED8\u6B3E",
+        returnStake: "\u9000\u62BC\u91D1",
+        stakeForChangePlan: "\u8BA2\u9605\u5957\u9910\u66F4\u65B0",
+        stakeForChangePayment: "\u8BA2\u9605\u652F\u4ED8\u65B9\u5F0F\u66F4\u65B0",
+        recharge: "\u5145\u503C",
+        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
       }
     }
   },

package/lib/payment/product-donation.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
+var _scroll = require("../hooks/scroll");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ProductDonation({
   item,
@@ -26,6 +27,7 @@ function ProductDonation({
   const {
     setPayable
   } = (0, _payment.usePaymentContext)();
+  (0, _scroll.usePreventWheel)();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = (0, _ahooks.useSetState)({
     selected: preset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.33",
+  "version": "1.15.35",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.33",
+    "@blocklet/payment-types": "1.15.35",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "88e0986e379d9ed673435ea96305f16b4a54097e"
+  "gitHead": "279b6f2fee57a20cffdc78c0c1cf3a140cd142c4"
 }

package/src/checkout/donate.tsx

@@ -57,11 +57,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   settings: DonationSettings;
   livemode?: boolean;
   timeout?: number;
-  mode?: 'inline' | 'default';
+  mode?: 'inline' | 'default' | 'custom';
   inlineOptions?: {
     button?: ButtonType;
   };
   theme?: 'default' | 'inherit' | PaymentThemeOptions;
+  children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -315,6 +316,7 @@ function CheckoutDonateInner({
   mode,
   inlineOptions = {},
   theme,
+  children,
 }: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
@@ -350,105 +352,135 @@ function CheckoutDonateInner({
     setPopoverOpen(false);
   };
 
-  return (
+  const startDonate = () => {
+    setState({ open: true });
+  };
+
+  const inlineRender = (
     <>
-      {mode === 'inline' ? (
-        <>
-          <Button
-            size={(settings.appearance?.button?.size || 'medium') as any}
-            color={(settings.appearance?.button?.color || 'primary') as any}
-            variant={(settings.appearance?.button?.variant || 'contained') as any}
-            {...settings.appearance?.button}
-            onClick={handlePopoverOpen}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              {settings.appearance.button.icon}
-              {typeof settings.appearance.button.text === 'string' ? (
-                <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
-              ) : (
-                settings.appearance.button.text
-              )}
-            </Stack>
-          </Button>
-          <Popover
-            id="mouse-over-popper"
-            open={popoverOpen}
-            anchorEl={anchorEl}
-            onClose={handlePopoverClose}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'center',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'center',
-            }}>
-            <Box
-              sx={{
-                minWidth: 320,
-                padding: '20px',
-              }}>
-              {supporters.loading && (
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                  }}>
-                  <CircularProgress />
-                </div>
-              )}
-              <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
-                <Button {...inlineOptions.button} onClick={() => setState({ open: true })}>
-                  <Stack direction="row" alignItems="center" spacing={0.5}>
-                    {inlineOptions?.button?.icon}
-                    {typeof inlineOptions?.button?.text === 'string' ? (
-                      <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineOptions?.button?.text}</Typography>
-                    ) : (
-                      inlineOptions?.button?.text
-                    )}
-                  </Stack>
-                </Button>
-                <SupporterSimple {...(supporters.data as DonateHistory)} />
-              </Box>
-            </Box>
-          </Popover>
-        </>
-      ) : (
-        <Box
-          sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          gap={{ xs: 1, sm: 2 }}>
-          <Button
-            size={(settings.appearance?.button?.size || 'medium') as any}
-            color={(settings.appearance?.button?.color || 'primary') as any}
-            variant={(settings.appearance?.button?.variant || 'contained') as any}
-            {...settings.appearance?.button}
-            onClick={() => setState({ open: true })}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              {settings.appearance.button.icon}
-              {typeof settings.appearance.button.text === 'string' ? (
-                <Typography>{settings.appearance.button.text}</Typography>
-              ) : (
-                settings.appearance.button.text
-              )}
-            </Stack>
-          </Button>
-          {supporters.data && settings.appearance.history.variant === 'avatar' && (
-            <SupporterAvatar {...(supporters.data as DonateHistory)} />
+      <Button
+        size={(settings.appearance?.button?.size || 'medium') as any}
+        color={(settings.appearance?.button?.color || 'primary') as any}
+        variant={(settings.appearance?.button?.variant || 'contained') as any}
+        {...settings.appearance?.button}
+        onClick={handlePopoverOpen}>
+        <Stack direction="row" alignItems="center" spacing={0.5}>
+          {settings.appearance.button.icon}
+          {typeof settings.appearance.button.text === 'string' ? (
+            <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
+          ) : (
+            settings.appearance.button.text
           )}
-          {supporters.data && settings.appearance.history.variant === 'table' && (
-            <SupporterTable {...(supporters.data as DonateHistory)} />
+        </Stack>
+      </Button>
+      <Popover
+        id="mouse-over-popper"
+        open={popoverOpen}
+        anchorEl={anchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}>
+        <Box
+          sx={{
+            minWidth: 320,
+            padding: '20px',
+          }}>
+          {supporters.loading && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(255, 255, 255, 0.7)',
+              }}>
+              <CircularProgress />
+            </div>
           )}
+          <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
+            <Button {...inlineOptions.button} onClick={() => startDonate()}>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                {inlineOptions?.button?.icon}
+                {typeof inlineOptions?.button?.text === 'string' ? (
+                  <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineOptions?.button?.text}</Typography>
+                ) : (
+                  inlineOptions?.button?.text
+                )}
+              </Stack>
+            </Button>
+            <SupporterSimple {...(supporters.data as DonateHistory)} />
+          </Box>
         </Box>
+      </Popover>
+    </>
+  );
+  const defaultRender = (
+    <Box
+      sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      gap={{ xs: 1, sm: 2 }}>
+      <Button
+        size={(settings.appearance?.button?.size || 'medium') as any}
+        color={(settings.appearance?.button?.color || 'primary') as any}
+        variant={(settings.appearance?.button?.variant || 'contained') as any}
+        {...settings.appearance?.button}
+        onClick={() => startDonate()}>
+        <Stack direction="row" alignItems="center" spacing={0.5}>
+          {settings.appearance.button.icon}
+          {typeof settings.appearance.button.text === 'string' ? (
+            <Typography>{settings.appearance.button.text}</Typography>
+          ) : (
+            settings.appearance.button.text
+          )}
+        </Stack>
+      </Button>
+      {supporters.data && settings.appearance.history.variant === 'avatar' && (
+        <SupporterAvatar {...(supporters.data as DonateHistory)} />
       )}
+      {supporters.data && settings.appearance.history.variant === 'table' && (
+        <SupporterTable {...(supporters.data as DonateHistory)} />
+      )}
+    </Box>
+  );
+  const renderInnerView = () => {
+    if (mode === 'inline') {
+      return inlineRender;
+    }
+    if (mode === 'custom') {
+      return children && typeof children === 'function' ? (
+        <>
+          {children(
+            startDonate,
+            `${formatAmount(
+              (supporters.data as DonateHistory)?.totalAmount || '0',
+              (supporters.data as DonateHistory)?.currency?.decimal
+            )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
+            (supporters.data as DonateHistory) || {}
+          )}
+        </>
+      ) : (
+        <Typography>
+          Please provide a valid render function <pre>{'(openDonate, donateTotalAmount, supporters) => ReactNode'}</pre>
+        </Typography>
+      );
+    }
+    return defaultRender;
+  };
+  return (
+    <>
+      {renderInnerView()}
       {donation.data && (
         <Dialog
           open={state.open}

package/src/components/pricing-table.tsx

@@ -33,7 +33,6 @@ import {
   getPriceUintAmountByCurrency,
   isMobileSafari,
 } from '../libs/util';
-import Amount from '../payment/amount';
 import { useMobile } from '../hooks/mobile';
 import TruncatedText from './truncated-text';
 
@@ -72,15 +71,17 @@ type Props = {
   alignItems?: 'center' | 'left';
   mode?: 'checkout' | 'select';
   interval?: string;
+  hideCurrency?: boolean;
 };
 
 PricingTable.defaultProps = {
   alignItems: 'center',
   mode: 'checkout',
   interval: '',
+  hideCurrency: false,
 };
 
-export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
+export default function PricingTable({ table, alignItems, interval, mode, onSelect, hideCurrency }: Props) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const {
@@ -201,10 +202,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        max-width: 720px !important;
+        max-width: 780px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        max-width: 1080px !important;
+        max-width: 1200px !important;
       }
     }
   `;
@@ -291,7 +292,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               )}
             </Box>
           )}
-          {currencyList.length > 0 && (
+          {currencyList.length > 0 && !hideCurrency && (
             <Select
               value={currency?.id}
               onChange={(e) => setCurrency(currencyList.find((v) => v?.id === e.target.value))}
@@ -325,6 +326,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             if (mode === 'select') {
               action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
             }
+            const [amount, unit] = formatPriceAmount(x.price, currency, x.product.unit_label).split('/');
             return (
               <Stack
                 key={x?.price_id}
@@ -349,14 +351,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   },
                   width: {
                     xs: '100%',
-                    md: '320px',
+                    md: '360px',
                   },
                   maxWidth: '360px',
                   minWidth: '300px',
 
                   padding: '20px',
                   position: 'relative',
-                  height: 'fit-content',
                 }}>
                 <Box textAlign="center">
                   <Stack
@@ -367,7 +368,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     sx={{ gap: '12px' }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                       <Typography
-                        color="text.primary"
+                        color="text.secondary"
                         fontWeight={600}
                         sx={{
                           fontSize: '18px !important',
@@ -378,7 +379,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       {x.is_highlight && (
                         <Chip
                           label={x.highlight_text}
-                          color="default"
+                          color="primary"
                           size="small"
                           sx={{
                             position: 'absolute',
@@ -388,10 +389,29 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         />
                       )}
                     </Box>
-                    <Amount
-                      amount={formatPriceAmount(x.price, currency, x.product.unit_label)}
-                      sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
-                    />
+                    <Typography
+                      component="div"
+                      sx={{
+                        my: 0,
+                        fontWeight: '700',
+                        fontSize: '32px',
+                        letterSpacing: '-0.03rem',
+                        fontVariantNumeric: 'tabular-nums',
+                        display: 'flex',
+                        alignItems: 'baseline',
+                        gap: '4px',
+                        flexWrap: 'wrap',
+                      }}>
+                      {amount}
+                      {unit ? (
+                        <Typography
+                          sx={{ fontSize: '16px', fontWeight: '400', color: 'text.secondary', textAlign: 'left' }}>
+                          / {unit}
+                        </Typography>
+                      ) : (
+                        ''
+                      )}
+                    </Typography>
                     <Typography
                       color="text.secondary"
                       sx={{
@@ -471,7 +491,7 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       fullWidth
       size="medium"
       variant="contained"
-      color={x.is_highlight || x.is_selected ? 'info' : 'primary'}
+      color="primary"
       sx={{
         fontSize: '16px',
         padding: '10px 20px',

package/src/history/invoice/list.tsx

@@ -23,6 +23,7 @@ import {
   formatError,
   formatToDate,
   formatToDatetime,
+  getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getPrefix,
   getTxLink,
@@ -58,6 +59,7 @@ type Props = {
   subscription_id?: string;
   currency_id?: string;
   include_staking?: boolean;
+  include_return_staking?: boolean;
   include_recovered_from?: boolean;
   status?: string;
   pageSize?: number;
@@ -97,6 +99,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     currency_id,
     subscription_id,
     include_staking,
+    include_return_staking,
     include_recovered_from,
     onTableDataChange,
   } = props;
@@ -120,6 +123,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         currency_id,
         subscription_id,
         include_staking,
+        include_return_staking,
         include_recovered_from,
         ignore_zero: true,
       }),
@@ -169,6 +173,21 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
+    {
+      label: t('common.type'),
+      name: 'billing_reason',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              <Status label={getInvoiceDescriptionAndReason(invoice, locale)?.type} />
+            </a>
+          );
+        },
+      },
+    },
     {
       label: t('payment.customer.invoice.invoiceNumber'),
       name: 'number',
@@ -209,7 +228,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
           const link = getInvoiceLink(invoice, action);
           return (
             <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
-              {invoice.description || invoice.id}
+              {getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id}
             </a>
           );
         },

package/src/hooks/scroll.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export function usePreventWheel() {
+  useEffect(() => {
+    const handleWheel = (e: any) => {
+      // @ts-ignore
+      if (document.activeElement?.type === 'number') {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    return () => {
+      window.removeEventListener('wheel', handleWheel);
+    };
+  }, []);
+}

package/src/index.ts

@@ -38,6 +38,7 @@ export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
+export * from './hooks/scroll';
 
 export { translations, createTranslator } from './locales';
 

package/src/libs/util.ts

@@ -4,6 +4,7 @@ import type {
   PaymentDetails,
   PriceCurrency,
   PriceRecurring,
+  TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentCurrencyExpanded,
@@ -890,6 +891,9 @@ export const flattenPaymentMethods = (methods: TPaymentMethodExpanded[] = []) =>
 };
 
 export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
+  if (!details) {
+    return { text: 'N/A', link: '', gas: '' };
+  }
   if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
     return {
       link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
@@ -1092,3 +1096,55 @@ export function getCustomerAvatar(
   const updated = typeof updated_at === 'number' ? updated_at : dayjs(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }
+
+// 判断是否存在txHash
+export function hasDelegateTxHash(details: PaymentDetails, paymentMethod: TPaymentMethod) {
+  return (
+    paymentMethod?.type &&
+    ['arcblock', 'ethereum'].includes(paymentMethod?.type) &&
+    // @ts-ignore
+    details?.[paymentMethod?.type]?.tx_hash
+  );
+}
+
+export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale = 'en') {
+  const { billing_reason: reason, description } = invoice;
+  const reasonMap = {
+    subscription_create: t('payment.invoice.reason.creation', locale),
+    subscription_cycle: t('payment.invoice.reason.cycle', locale),
+    subscription_update: t('payment.invoice.reason.update', locale),
+    subscription_recover: t('payment.invoice.reason.recover', locale),
+    subscription_threshold: t('payment.invoice.reason.threshold', locale),
+    subscription_cancel: t('payment.invoice.reason.cancel', locale),
+    manual: t('payment.invoice.reason.manual', locale),
+    upcoming: t('payment.invoice.reason.upcoming', locale),
+    slash_stake: t('payment.invoice.reason.slashStake', locale),
+    stake: t('payment.invoice.reason.stake', locale),
+    return_stake: t('payment.invoice.reason.returnStake', locale),
+    recharge: t('payment.invoice.reason.recharge', locale),
+  };
+  let invoiceType = t('payment.invoice.reason.payment', locale);
+  if (reason.includes('stake') || reason.includes('recharge')) {
+    invoiceType = reasonMap[reason as keyof typeof reasonMap];
+  }
+  if (description?.startsWith('Subscription ') || description?.startsWith('Slash stake')) {
+    return {
+      description: reasonMap[reason as keyof typeof reasonMap],
+      reason: reasonMap[reason as keyof typeof reasonMap],
+      type: invoiceType,
+    };
+  }
+  const descMap = {
+    'Stake for subscription plan change': t('payment.invoice.reason.stakeForChangePlan', locale),
+    'Stake for subscription payment change': t('payment.invoice.reason.stakeForChangePayment', locale),
+    'Stake for subscription': t('payment.invoice.reason.staking', locale),
+    'Return Subscription staking': t('payment.invoice.reason.returnStake', locale),
+    'Recharge for subscription': t('payment.invoice.reason.rechargeForSubscription', locale),
+  };
+
+  return {
+    description: descMap[description as keyof typeof descMap] || description,
+    reason: reasonMap[reason as keyof typeof reasonMap] || reason,
+    type: invoiceType,
+  };
+}

package/src/locales/en.tsx

@@ -91,6 +91,8 @@ export default flat({
     quantityNotEnough: 'Exceed inventory',
     amountPrecisionLimit: 'Amount decimal places must be less than or equal to {precision}',
     saveAsDefaultPriceSuccess: 'Set default price successfully',
+    stakeAmount: 'Stake Amount',
+    slashStakeAmount: 'Slash Stake Amount',
   },
   payment: {
     checkout: {
@@ -319,6 +321,13 @@ export default flat({
         manual: 'Manual invoice',
         upcoming: 'Upcoming invoice',
         slashStake: 'Slash stake',
+        stake: 'Stake',
+        payment: 'Payment',
+        returnStake: 'Return stake',
+        stakeForChangePlan: 'Subscription plan update',
+        stakeForChangePayment: 'Subscription payment method update',
+        recharge: 'Recharge',
+        rechargeForSubscription: 'Subscription recharge',
       },
     },
   },

package/src/locales/zh.tsx

@@ -91,6 +91,8 @@ export default flat({
     quantityNotEnough: '库存不足',
     amountPrecisionLimit: '金额小数位数必须在 {precision} 位以内',
     saveAsDefaultPriceSuccess: '设置默认价格成功',
+    stakeAmount: '质押金额',
+    slashStakeAmount: '罚没金额',
   },
   payment: {
     checkout: {
@@ -301,7 +303,7 @@ export default flat({
       reason: {
         creation: '订阅创建',
         cycle: '自动扣费',
-        staking: '订阅创建（质押）',
+        staking: '订阅创建',
         update: '订阅更新',
         recover: '订阅恢复',
         threshold: '用量账单',
@@ -309,6 +311,13 @@ export default flat({
         manual: '人工账单',
         upcoming: '未来账单',
         slashStake: '罚没质押',
+        stake: '押金',
+        payment: '付款',
+        returnStake: '退押金',
+        stakeForChangePlan: '订阅套餐更新',
+        stakeForChangePayment: '订阅支付方式更新',
+        recharge: '充值',
+        rechargeForSubscription: '订阅充值',
       },
     },
   },