@blocklet/payment-react 1.19.1 → 1.19.3

package/es/components/label.js

@@ -17,6 +17,7 @@ export default function CustomFormLabel({
           display: "flex",
           alignItems: "center",
           gap: 0.5,
+          fontSize: "0.875rem",
           fontWeight: 500,
           color: "text.primary",
           "&.MuiFormLabel-root": {
@@ -31,7 +32,7 @@ export default function CustomFormLabel({
         children: [
           children,
           required && /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: "*" }),
-          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7 } }) }) : tooltip)
+          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7, fontSize: "1rem" } }) }) : tooltip)
         ]
       }
     ),

package/es/components/payment-beneficiaries.d.ts

@@ -12,6 +12,7 @@ interface BenefitsProps {
     currency: {
         symbol: string;
         decimal: number;
+        maximum_precision?: number;
     };
     totalAmount?: string;
 }

package/es/components/payment-beneficiaries.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Stack, Typography } from "@mui/material";
-import { BN, fromUnitToToken } from "@ocap/util";
+import { BN } from "@ocap/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import DID from "@arcblock/ux/lib/DID";
+import { formatBNStr } from "../libs/util.js";
 export default function PaymentBeneficiaries({ data, currency, totalAmount = "0" }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
@@ -20,7 +22,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
       return /* @__PURE__ */ jsxs(
         Stack,
         {
-          direction: { xs: "column", sm: "row" },
+          direction: "row",
           sx: {
             alignItems: "center",
             justifyContent: "space-between",
@@ -42,7 +44,15 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                   width: { xs: "100%", sm: "auto" }
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Avatar, { src: item.avatar, alt: item.name, sx: { width: 32, height: 32 }, variant: "square" }),
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      src: item.avatar,
+                      alt: item.name,
+                      sx: { width: 32, height: 32 },
+                      variant: item.type === "dapp" ? "square" : "circular"
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(Box, { children: [
                     /* @__PURE__ */ jsx(
                       Typography,
@@ -63,14 +73,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Typography,
+                      DID,
                       {
-                        variant: "caption",
-                        sx: {
-                          color: "text.secondary",
-                          cursor: "pointer"
-                        },
-                        children: item.address
+                        did: item.address,
+                        compact: true,
+                        responsive: false,
+                        sx: { whiteSpace: "nowrap", fontSize: "0.875rem !important" },
+                        copyable: false
                       }
                     )
                   ] })
@@ -87,7 +96,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                 },
                 children: [
                   /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
-                    fromUnitToToken(amount, currency.decimal),
+                    formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6),
                     " ",
                     currency.symbol
                   ] }),
@@ -96,7 +105,8 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = "0"
                     {
                       variant: "caption",
                       sx: {
-                        color: "text.secondary"
+                        color: "text.secondary",
+                        fontSize: "0.875rem"
                       },
                       children: [
                         Number(item.percent),

package/es/history/credit/transactions-list.js

@@ -95,7 +95,6 @@ const TransactionsTable = React.memo((props) => {
       label: t("common.creditAmount"),
       name: "credit_amount",
       align: "right",
-      width: 120,
       options: {
         customBodyRenderLite: (_, index) => {
           const transaction = data?.list[index];

package/es/payment/form/address.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
+import { Fade, InputAdornment, Stack } from "@mui/material";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import FormInput from "../../components/input.js";
+import FormLabel from "../../components/label.js";
 import CountrySelect from "../../components/country-select.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = "right" }) {

package/es/payment/form/index.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef } from "react";
@@ -15,6 +15,7 @@ import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
 import { HelpOutline, OpenInNew } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
+import FormLabel from "../../components/label.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
 import api from "../../libs/api.js";
@@ -214,6 +215,8 @@ export default function PaymentForm({
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
+  const customerName = useWatch({ control, name: "customer_name" });
+  const customerEmail = useWatch({ control, name: "customer_email" });
   const afterUserLoggedIn = useMemoizedFn(() => {
     handleSubmit(onFormSubmit, onFormError)();
   });
@@ -233,7 +236,25 @@ export default function PaymentForm({
   const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = !!session?.user;
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === "stripe") {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === "required") {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
   const handleConnected = async () => {
     setState({ paying: true });
     try {
@@ -426,6 +447,9 @@ export default function PaymentForm({
     setState({ submitting: false });
   };
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
       errorRef.current.scrollIntoView({ behavior: "smooth" });
     }

package/lib/components/label.js

@@ -25,6 +25,7 @@ function CustomFormLabel({
         display: "flex",
         alignItems: "center",
         gap: 0.5,
+        fontSize: "0.875rem",
         fontWeight: 500,
         color: "text.primary",
         "&.MuiFormLabel-root": {
@@ -45,7 +46,8 @@ function CustomFormLabel({
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
           fontSize: "small",
           sx: {
-            opacity: 0.7
+            opacity: 0.7,
+            fontSize: "1rem"
           }
         })
       }) : tooltip)]

package/lib/components/payment-beneficiaries.d.ts

@@ -12,6 +12,7 @@ interface BenefitsProps {
     currency: {
         symbol: string;
         decimal: number;
+        maximum_precision?: number;
     };
     totalAmount?: string;
 }

package/lib/components/payment-beneficiaries.js

@@ -8,6 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _util2 = require("../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PaymentBeneficiaries({
   data,
   currency,
@@ -29,10 +32,7 @@ function PaymentBeneficiaries({
     }), data.map(item => {
       const amount = item.amount || (totalAmount ? new _util.BN(totalAmount).mul(new _util.BN(Number(item.percent))).div(new _util.BN(100)).toString() : "0");
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: {
-          xs: "column",
-          sm: "row"
-        },
+        direction: "row",
         sx: {
           alignItems: "center",
           justifyContent: "space-between",
@@ -60,7 +60,7 @@ function PaymentBeneficiaries({
               width: 32,
               height: 32
             },
-            variant: "square"
+            variant: item.type === "dapp" ? "square" : "circular"
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               variant: "subtitle2",
@@ -76,13 +76,15 @@ function PaymentBeneficiaries({
                 }
               },
               children: item.name
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              variant: "caption",
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              did: item.address,
+              compact: true,
+              responsive: false,
               sx: {
-                color: "text.secondary",
-                cursor: "pointer"
+                whiteSpace: "nowrap",
+                fontSize: "0.875rem !important"
               },
-              children: item.address
+              copyable: false
             })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -99,11 +101,12 @@ function PaymentBeneficiaries({
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "subtitle2",
-            children: [(0, _util.fromUnitToToken)(amount, currency.decimal), " ", currency.symbol]
+            children: [(0, _util2.formatBNStr)(amount, currency.decimal, currency?.maximum_precision ?? 6), " ", currency.symbol]
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "caption",
             sx: {
-              color: "text.secondary"
+              color: "text.secondary",
+              fontSize: "0.875rem"
             },
             children: [Number(item.percent), "%"]
           })]

package/lib/history/credit/transactions-list.js

@@ -111,7 +111,6 @@ const TransactionsTable = _react.default.memo(props => {
     label: t("common.creditAmount"),
     name: "credit_amount",
     align: "right",
-    width: 120,
     options: {
       customBodyRenderLite: (_, index) => {
         const transaction = data?.list[index];

package/lib/payment/form/address.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,7 +41,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -52,7 +53,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -64,7 +65,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -76,7 +77,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -131,7 +132,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/payment/form/index.js

@@ -22,6 +22,7 @@ var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
@@ -245,6 +246,14 @@ function PaymentForm({
     control,
     name: "payment_currency"
   });
+  const customerName = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_name"
+  });
+  const customerEmail = (0, _reactHookForm.useWatch)({
+    control,
+    name: "customer_email"
+  });
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
     handleSubmit(onFormSubmit, onFormError)();
   });
@@ -266,7 +275,25 @@ function PaymentForm({
   const paymentCurrency = currencies.find(x => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = !!session?.user;
+  const showForm = (0, _react.useMemo)(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === "stripe") {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === "required") {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
   const handleConnected = async () => {
     setState({
       paying: true
@@ -499,6 +526,9 @@ function PaymentForm({
     });
   };
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !(0, _isEmpty.default)(errors) && isMobile) {
       errorRef.current.scrollIntoView({
         behavior: "smooth"
@@ -756,7 +786,7 @@ function PaymentForm({
             overflow: "auto",
             py: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.name")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -767,7 +797,7 @@ function PaymentForm({
               required: t("payment.checkout.required"),
               ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.email")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -780,7 +810,7 @@ function PaymentForm({
               ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
               className: "base-label",
               children: t("payment.checkout.customer.phone")
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^3.0.1",
-    "@arcblock/ux": "^3.0.1",
-    "@arcblock/ws": "^1.20.14",
-    "@blocklet/theme": "^3.0.1",
-    "@blocklet/ui-react": "^3.0.1",
+    "@arcblock/did-connect": "^3.0.22",
+    "@arcblock/ux": "^3.0.22",
+    "@arcblock/ws": "^1.20.15",
+    "@blocklet/theme": "^3.0.22",
+    "@blocklet/ui-react": "^3.0.22",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.20.14",
+    "@ocap/util": "^1.20.15",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.1",
+    "@blocklet/payment-types": "1.19.3",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "48d5719c8ce4e89a16f8dd576ff8f72072e3909e"
+  "gitHead": "f274edb338c8f5a23ae46d9f7fea8458a6001cf7"
 }

package/src/components/label.tsx

@@ -18,6 +18,7 @@ export default function CustomFormLabel({
           display: 'flex',
           alignItems: 'center',
           gap: 0.5,
+          fontSize: '0.875rem',
           fontWeight: 500,
           color: 'text.primary',
           '&.MuiFormLabel-root': {
@@ -38,7 +39,7 @@ export default function CustomFormLabel({
         {tooltip &&
           (typeof tooltip === 'string' ? (
             <Tooltip title={tooltip}>
-              <InfoOutlined fontSize="small" sx={{ opacity: 0.7 }} />
+              <InfoOutlined fontSize="small" sx={{ opacity: 0.7, fontSize: '1rem' }} />
             </Tooltip>
           ) : (
             tooltip

package/src/components/payment-beneficiaries.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/indent */
 import { Avatar, Box, Stack, Typography } from '@mui/material';
-import { BN, fromUnitToToken } from '@ocap/util';
+import { BN } from '@ocap/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DID from '@arcblock/ux/lib/DID';
+import { formatBNStr } from '../libs/util';
 
 export interface TBeneficiary {
   name: string;
@@ -18,6 +20,7 @@ interface BenefitsProps {
   currency: {
     symbol: string;
     decimal: number;
+    maximum_precision?: number;
   };
   totalAmount?: string;
 }
@@ -45,7 +48,7 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
         return (
           <Stack
             key={item.address}
-            direction={{ xs: 'column', sm: 'row' }}
+            direction="row"
             sx={{
               alignItems: 'center',
               justifyContent: 'space-between',
@@ -64,7 +67,12 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                 alignItems: 'center',
                 width: { xs: '100%', sm: 'auto' },
               }}>
-              <Avatar src={item.avatar} alt={item.name} sx={{ width: 32, height: 32 }} variant="square" />
+              <Avatar
+                src={item.avatar}
+                alt={item.name}
+                sx={{ width: 32, height: 32 }}
+                variant={item.type === 'dapp' ? 'square' : 'circular'}
+              />
               <Box>
                 <Typography
                   variant="subtitle2"
@@ -81,14 +89,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                   }}>
                   {item.name}
                 </Typography>
-                <Typography
-                  variant="caption"
-                  sx={{
-                    color: 'text.secondary',
-                    cursor: 'pointer',
-                  }}>
-                  {item.address}
-                </Typography>
+                <DID
+                  did={item.address}
+                  compact
+                  responsive={false}
+                  sx={{ whiteSpace: 'nowrap', fontSize: '0.875rem !important' }}
+                  copyable={false}
+                />
               </Box>
             </Stack>
             <Stack
@@ -98,12 +105,13 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount = '0'
                 mt: { xs: 1, sm: 0 },
               }}>
               <Typography variant="subtitle2">
-                {fromUnitToToken(amount, currency.decimal)} {currency.symbol}
+                {formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6)} {currency.symbol}
               </Typography>
               <Typography
                 variant="caption"
                 sx={{
                   color: 'text.secondary',
+                  fontSize: '0.875rem',
                 }}>
                 {Number(item.percent)}%
               </Typography>

package/src/history/credit/transactions-list.tsx

@@ -141,7 +141,6 @@ const TransactionsTable = React.memo((props: Props) => {
       label: t('common.creditAmount'),
       name: 'credit_amount',
       align: 'right',
-      width: 120,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const transaction = data?.list[index] as TCreditTransactionExpanded;

package/src/payment/form/address.tsx

@@ -1,8 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, FormLabel, InputAdornment, Stack } from '@mui/material';
+import { Fade, InputAdornment, Stack } from '@mui/material';
 import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
+import FormLabel from '../../components/label';
 import CountrySelect from '../../components/country-select';
 import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 

package/src/payment/form/index.tsx

@@ -5,7 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -19,6 +19,7 @@ import DID from '@arcblock/ux/lib/DID';
 import isEmpty from 'lodash/isEmpty';
 import { HelpOutline, OpenInNew } from '@mui/icons-material';
 import FormInput from '../../components/input';
+import FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
@@ -314,6 +315,8 @@ export default function PaymentForm({
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
   const paymentCurrencyId = useWatch({ control, name: 'payment_currency' });
+  const customerName = useWatch({ control, name: 'customer_name' });
+  const customerEmail = useWatch({ control, name: 'customer_email' });
 
   // const domSize = useSize(document.body);
 
@@ -348,7 +351,25 @@ export default function PaymentForm({
   const showStake = method.type === 'arcblock' && !checkoutSession.subscription_data?.no_stake;
 
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
-  const showForm = !!session?.user;
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (method.type === 'stripe') {
+      return true;
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      return true;
+    }
+    const mode = checkoutSession.billing_address_collection;
+    if (mode === 'required') {
+      return true;
+    }
+    if (customerName && customerEmail) {
+      return false;
+    }
+    return true;
+  }, [session?.user, method, checkoutSession, customerName, customerEmail]);
 
   const handleConnected = async () => {
     setState({ paying: true });
@@ -562,6 +583,9 @@ export default function PaymentForm({
   };
 
   const onAction = () => {
+    if (state.submitting || state.paying) {
+      return;
+    }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
       errorRef.current.scrollIntoView({ behavior: 'smooth' });
     }