@blocklet/payment-react 1.13.292 → 1.13.294

package/es/checkout/donate.d.ts

@@ -6,7 +6,7 @@ export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
-    total: number;
+    totalAmount: string;
 };
 export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
     text: string;

package/es/checkout/donate.js

@@ -23,7 +23,7 @@ import uniqBy from "lodash/unionBy";
 import { useEffect, useState } from "react";
 import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
-import { formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
+import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -47,9 +47,10 @@ const fetchSupporters = (target, livemode = true) => {
   }
   return supporterCache[target];
 };
-function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
+function SupporterAvatar({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -67,8 +68,12 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
         sm: 1
       },
       children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
-        /* @__PURE__ */ jsx(AvatarGroup, { total, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+          total: customersNum,
+          symbol: currency.symbol,
+          totalAmount: formatAmount(totalAmount || "0", currency.decimal)
+        }) }),
+        /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 20, children: customers.map((x) => /* @__PURE__ */ jsx(
           Avatar,
           {
             title: x.customer?.name,
@@ -82,10 +87,16 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
     }
   );
 }
-function SupporterTable({ supporters = [], total = 0, currency, method }) {
+function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
+    /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+      total: customersNum,
+      symbol: currency.symbol,
+      totalAmount: formatAmount(totalAmount || "0", currency.decimal)
+    }) }),
     /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
       TableRow,
       {
@@ -124,36 +135,36 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
     )) }) })
   ] });
 }
-function SupporterSimple({ supporters = [], total = 0, currency, method }) {
+function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */ jsxs(
     Box,
     {
       display: "flex",
+      flexDirection: "column",
       alignItems: "center",
-      sx: {
-        ".MuiAvatar-root": {
-          width: "32px",
-          height: "32px"
-        }
-      },
       gap: {
         xs: 0.5,
         sm: 1
       },
       children: [
-        /* @__PURE__ */ jsx(AvatarGroup, { total, max: 10, children: customers.map((x) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+          total: customersNum,
+          symbol: currency.symbol,
+          totalAmount: formatAmount(totalAmount || "0", currency.decimal)
+        }) }),
+        /* @__PURE__ */ jsx(AvatarGroup, { total: customersNum, max: 10, children: customers.map((x) => /* @__PURE__ */ jsx(
           Avatar,
           {
             title: x.customer?.name,
             src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
             variant: "circular",
-            sx: { width: 32, height: 32 }
+            sx: { width: 24, height: 24 }
           },
           x.id
-        )) }),
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.simpleSummary", { total }) })
+        )) })
       ]
     }
   );
@@ -237,6 +248,7 @@ export default function CheckoutDonate({
           size: settings.appearance?.button?.size || "medium",
           color: settings.appearance?.button?.color || "primary",
           variant: settings.appearance?.button?.variant || "contained",
+          ...settings.appearance?.button,
           onClick: handlePopoverOpen,
           children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
             settings.appearance.button.icon,
@@ -262,9 +274,9 @@ export default function CheckoutDonate({
           children: /* @__PURE__ */ jsxs(
             Box,
             {
-              p: 1,
               sx: {
-                minWidth: 200
+                minWidth: 320,
+                padding: "20px"
               },
               children: [
                 supporters.loading && /* @__PURE__ */ jsx(
@@ -284,9 +296,12 @@ export default function CheckoutDonate({
                     children: /* @__PURE__ */ jsx(CircularProgress, {})
                   }
                 ),
-                /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [
-                  /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data }),
-                  /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => setState({ open: true }), children: inlineOptions?.button?.text })
+                /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
+                  /* @__PURE__ */ jsxs(Button, { ...inlineOptions.button, onClick: () => setState({ open: true }), children: [
+                    settings.appearance.button.icon,
+                    inlineOptions?.button?.text
+                  ] }),
+                  /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
                 ] })
               ]
             }
@@ -308,6 +323,7 @@ export default function CheckoutDonate({
               size: settings.appearance?.button?.size || "medium",
               color: settings.appearance?.button?.color || "primary",
               variant: settings.appearance?.button?.variant || "contained",
+              ...settings.appearance?.button,
               onClick: () => setState({ open: true }),
               children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
                 settings.appearance.button.icon,
@@ -349,7 +365,7 @@ CheckoutDonate.defaultProps = {
   mode: "default",
   inlineOptions: {
     button: {
-      text: "Support"
+      text: "Tip"
     }
   }
 };

package/es/locales/en.js

@@ -113,8 +113,8 @@ export default flat({
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
         select: "Select Amount",
-        summary: "{total} supporters",
-        simpleSummary: "{total} supporters"
+        summary: "{total} supporters {totalAmount}{symbol}",
+        empty: "No supporters yet"
       },
       cardPay: "{action} with card",
       empty: "No thing to pay",

package/es/locales/zh.js

@@ -113,8 +113,8 @@ export default flat({
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
         select: "\u9009\u62E9\u91D1\u989D",
-        summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
-        simpleSummary: "{total} \u4EBA\u652F\u6301"
+        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
+        empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",

package/lib/checkout/donate.d.ts

@@ -6,7 +6,7 @@ export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
-    total: number;
+    totalAmount: string;
 };
 export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
     text: string;

package/lib/checkout/donate.js

@@ -46,7 +46,7 @@ const fetchSupporters = (target, livemode = true) => {
 };
 function SupporterAvatar({
   supporters = [],
-  total = 0,
+  totalAmount = "0",
   currency,
   method
 }) {
@@ -54,6 +54,7 @@ function SupporterAvatar({
     t
   } = (0, _context.useLocaleContext)();
   const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     flexDirection: "column",
@@ -71,11 +72,13 @@ function SupporterAvatar({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
       color: "text.secondary",
-      children: t("payment.checkout.donation.summary", {
-        total
+      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+        total: customersNum,
+        symbol: currency.symbol,
+        totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
       })
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
-      total,
+      total: customersNum,
       max: 20,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
@@ -91,13 +94,15 @@ function SupporterAvatar({
 }
 function SupporterTable({
   supporters = [],
-  total = 0,
+  totalAmount = "0",
   currency,
   method
 }) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     flexDirection: "column",
@@ -109,8 +114,10 @@ function SupporterTable({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
       color: "text.secondary",
-      children: t("payment.checkout.donation.summary", {
-        total
+      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+        total: customersNum,
+        symbol: currency.symbol,
+        totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
       })
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Table, {
       size: "small",
@@ -189,7 +196,7 @@ function SupporterTable({
 }
 function SupporterSimple({
   supporters = [],
-  total = 0,
+  totalAmount = "0",
   currency,
   method
 }) {
@@ -197,37 +204,35 @@ function SupporterSimple({
     t
   } = (0, _context.useLocaleContext)();
   const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
+    flexDirection: "column",
     alignItems: "center",
-    sx: {
-      ".MuiAvatar-root": {
-        width: "32px",
-        height: "32px"
-      }
-    },
     gap: {
       xs: 0.5,
       sm: 1
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
-      total,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "p",
+      color: "text.secondary",
+      children: customersNum === 0 ? t("payment.checkout.donation.empty") : t("payment.checkout.donation.summary", {
+        total: customersNum,
+        symbol: currency.symbol,
+        totalAmount: (0, _util.formatAmount)(totalAmount || "0", currency.decimal)
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+      total: customersNum,
       max: 10,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
         src: `/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`,
         variant: "circular",
         sx: {
-          width: 32,
-          height: 32
+          width: 24,
+          height: 24
         }
       }, x.id))
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      component: "p",
-      color: "text.secondary",
-      children: t("payment.checkout.donation.simpleSummary", {
-        total
-      })
     })]
   });
 }
@@ -317,6 +322,7 @@ function CheckoutDonate({
         size: settings.appearance?.button?.size || "medium",
         color: settings.appearance?.button?.color || "primary",
         variant: settings.appearance?.button?.variant || "contained",
+        ...settings.appearance?.button,
         onClick: handlePopoverOpen,
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
@@ -343,9 +349,9 @@ function CheckoutDonate({
           horizontal: "center"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          p: 1,
           sx: {
-            minWidth: 200
+            minWidth: 320,
+            padding: "20px"
           },
           children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
             style: {
@@ -363,16 +369,16 @@ function CheckoutDonate({
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
             display: "flex",
             alignItems: "center",
-            justifyContent: "space-between",
+            flexDirection: "column",
             gap: 2,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
-              ...supporters.data
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
               ...inlineOptions.button,
               onClick: () => setState({
                 open: true
               }),
-              children: inlineOptions?.button?.text
+              children: [settings.appearance.button.icon, inlineOptions?.button?.text]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
+              ...supporters.data
             })]
           })]
         })
@@ -394,6 +400,7 @@ function CheckoutDonate({
         size: settings.appearance?.button?.size || "medium",
         color: settings.appearance?.button?.color || "primary",
         variant: settings.appearance?.button?.variant || "contained",
+        ...settings.appearance?.button,
         onClick: () => setState({
           open: true
         }),
@@ -442,7 +449,7 @@ CheckoutDonate.defaultProps = {
   mode: "default",
   inlineOptions: {
     button: {
-      text: "Support"
+      text: "Tip"
     }
   }
 };

package/lib/locales/en.js

@@ -120,8 +120,8 @@ module.exports = (0, _flat.default)({
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
         select: "Select Amount",
-        summary: "{total} supporters",
-        simpleSummary: "{total} supporters"
+        summary: "{total} supporters {totalAmount}{symbol}",
+        empty: "No supporters yet"
       },
       cardPay: "{action} with card",
       empty: "No thing to pay",

package/lib/locales/zh.js

@@ -120,8 +120,8 @@ module.exports = (0, _flat.default)({
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
         select: "\u9009\u62E9\u91D1\u989D",
-        summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
-        simpleSummary: "{total} \u4EBA\u652F\u6301"
+        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
+        empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.292",
+  "version": "1.13.294",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.292",
+    "@blocklet/payment-types": "1.13.294",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "118025758ecd0346c45f5c8f5e01d45a818bb37a"
+  "gitHead": "94e507a512252badd0ee5b537cba5a1d52cc061b"
 }

package/src/checkout/donate.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type {
@@ -32,7 +33,7 @@ import { useEffect, useState } from 'react';
 
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
-import { formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
+import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
 import { CheckoutProps } from '../types';
 import CheckoutForm from './form';
 
@@ -40,7 +41,8 @@ export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
   currency: TPaymentCurrency;
   method: TPaymentMethod;
-  total: number;
+  // total?: number;
+  totalAmount: string;
 };
 
 export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
@@ -90,9 +92,10 @@ const fetchSupporters = (target: string, livemode: boolean = true): Promise<Dona
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterAvatar({ supporters = [], total = 0, currency, method }: DonateHistory) {
+function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, 'customer_did');
+  const customersNum = customers.length;
   return (
     <Box
       display="flex"
@@ -109,9 +112,15 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }: Donat
         sm: 1,
       }}>
       <Typography component="p" color="text.secondary">
-        {t('payment.checkout.donation.summary', { total })}
+        {customersNum === 0
+          ? t('payment.checkout.donation.empty')
+          : t('payment.checkout.donation.summary', {
+              total: customersNum,
+              symbol: currency.symbol,
+              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+            })}
       </Typography>
-      <AvatarGroup total={total} max={20}>
+      <AvatarGroup total={customersNum} max={20}>
         {customers.map((x) => (
           <Avatar
             key={x.id}
@@ -127,12 +136,20 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }: Donat
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterTable({ supporters = [], total = 0, currency, method }: DonateHistory) {
+function SupporterTable({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, 'customer_did');
+  const customersNum = customers.length;
   return (
     <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
       <Typography component="p" color="text.secondary">
-        {t('payment.checkout.donation.summary', { total })}
+        {customersNum === 0
+          ? t('payment.checkout.donation.empty')
+          : t('payment.checkout.donation.summary', {
+              total: customersNum,
+              symbol: currency.symbol,
+              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+            })}
       </Typography>
       <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
         <TableBody>
@@ -187,37 +204,40 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterSimple({ supporters = [], total = 0, currency, method }: DonateHistory) {
+function SupporterSimple({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, 'customer_did');
+  const customersNum = customers.length;
+
   return (
     <Box
       display="flex"
+      flexDirection="column"
       alignItems="center"
-      sx={{
-        '.MuiAvatar-root': {
-          width: '32px',
-          height: '32px',
-        },
-      }}
       gap={{
         xs: 0.5,
         sm: 1,
       }}>
-      <AvatarGroup total={total} max={10}>
+      <Typography component="p" color="text.secondary">
+        {customersNum === 0
+          ? t('payment.checkout.donation.empty')
+          : t('payment.checkout.donation.summary', {
+              total: customersNum,
+              symbol: currency.symbol,
+              totalAmount: formatAmount(totalAmount || '0', currency.decimal),
+            })}
+      </Typography>
+      <AvatarGroup total={customersNum} max={10}>
         {customers.map((x) => (
           <Avatar
             key={x.id}
             title={x.customer?.name}
             src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
             variant="circular"
-            sx={{ width: 32, height: 32 }}
+            sx={{ width: 24, height: 24 }}
           />
         ))}
       </AvatarGroup>
-      <Typography component="p" color="text.secondary">
-        {t('payment.checkout.donation.simpleSummary', { total })}
-      </Typography>
     </Box>
   );
 }
@@ -317,6 +337,7 @@ export default function CheckoutDonate({
             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}
@@ -341,9 +362,9 @@ export default function CheckoutDonate({
               horizontal: 'center',
             }}>
             <Box
-              p={1}
               sx={{
-                minWidth: 200,
+                minWidth: 320,
+                padding: '20px',
               }}>
               {supporters.loading && (
                 <div
@@ -361,11 +382,12 @@ export default function CheckoutDonate({
                   <CircularProgress />
                 </div>
               )}
-              <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
-                <SupporterSimple {...(supporters.data as DonateHistory)} />
+              <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
                 <Button {...inlineOptions.button} onClick={() => setState({ open: true })}>
+                  {settings.appearance.button.icon}
                   {inlineOptions?.button?.text}
                 </Button>
+                <SupporterSimple {...(supporters.data as DonateHistory)} />
               </Box>
             </Box>
           </Popover>
@@ -381,6 +403,7 @@ export default function CheckoutDonate({
             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}
@@ -428,7 +451,7 @@ CheckoutDonate.defaultProps = {
   mode: 'default',
   inlineOptions: {
     button: {
-      text: 'Support',
+      text: 'Tip',
     },
   },
 };

package/src/locales/en.tsx

@@ -116,8 +116,8 @@ export default flat({
         between: 'Please enter an amount between {min} and {max}.',
         custom: 'Custom Amount',
         select: 'Select Amount',
-        summary: '{total} supporters',
-        simpleSummary: '{total} supporters',
+        summary: '{total} supporters {totalAmount}{symbol}',
+        empty: 'No supporters yet',
       },
       cardPay: '{action} with card',
       empty: 'No thing to pay',

package/src/locales/zh.tsx

@@ -115,8 +115,8 @@ export default flat({
         between: '金额必须大于 {min} 且小于 {max}',
         custom: '输入金额',
         select: '选择金额',
-        summary: '已经有 {total} 人支持',
-        simpleSummary: '{total} 人支持',
+        summary: '共有 {total} 人支持 {totalAmount}{symbol}',
+        empty: '❤️ 支持一下',
       },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',