@blocklet/payment-react 1.18.6 → 1.18.8

package/lib/checkout/donate.js

@@ -13,7 +13,6 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
 var _react = require("react");
 var _iconsMaterial = require("@mui/icons-material");
-var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
@@ -54,55 +53,176 @@ const fetchSupporters = (target, livemode = true) => {
 const emojiFont = {
   fontFamily: 'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
 };
-function SupporterAvatar({
+function DonateDetails({
   supporters = [],
-  totalAmount = "0",
   currency,
   method
 }) {
   const {
-    t
+    locale
   } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+    sx: {
+      width: "100%",
+      minWidth: "256px",
+      maxWidth: "calc(100vw - 32px)",
+      maxHeight: "300px",
+      overflowX: "hidden",
+      overflowY: "auto",
+      margin: "0 auto"
+    },
+    children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        padding: "6px",
+        "&:hover": {
+          backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+          transition: "background-color 200ms linear",
+          cursor: "pointer"
+        },
+        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      onClick: () => {
+        const {
+          link,
+          text
+        } = (0, _util.getTxLink)(method, x.payment_details);
+        if (link && text) {
+          window.open(link, "_blank");
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        sx: {
+          flex: 3,
+          overflow: "hidden"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 20),
+          alt: x.customer?.name,
+          variant: "circular",
+          sx: {
+            width: 20,
+            height: 20
+          },
+          onClick: e => {
+            e.stopPropagation();
+            if (x.customer?.did) {
+              window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
+            }
+          }
+        }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            ml: "8px !important",
+            fontSize: "0.875rem",
+            fontWeight: "500",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis"
+          },
+          onClick: e => {
+            e.stopPropagation();
+            if (x.customer?.did) {
+              window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
+            }
+          },
+          children: x.customer?.name
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        spacing: 0.5,
+        sx: {
+          flex: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: currency?.logo,
+          alt: currency?.symbol,
+          variant: "circular",
+          sx: {
+            width: 16,
+            height: 16
+          }
+        }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary"
+          },
+          children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary"
+          },
+          children: currency.symbol
+        })]
+      })]
+    }, x.id))
+  });
+}
+function SupporterAvatar({
+  supporters = [],
+  totalAmount = "0",
+  currency,
+  method,
+  showDonateDetails = false
+}) {
+  const [open, setOpen] = (0, _react.useState)(false);
   const customers = (0, _unionBy.default)(supporters, "customer_did");
   const customersNum = customers.length;
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
+  if (customersNum === 0) return null;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    flexDirection: "row",
+    justifyContent: "center",
     alignItems: "center",
-    sx: {
-      ".MuiAvatar-root": {
-        width: "32px",
-        height: "32px"
-      }
-    },
-    gap: {
-      xs: 0.5,
-      sm: 1
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      component: "p",
-      color: "text.secondary",
-      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-        style: emojiFont,
-        children: 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: 20,
-      children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-        title: x.customer?.name,
-        alt: x.customer?.name,
-        src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-        variant: "circular",
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+      max: 5,
+      children: customers.slice(0, 5).map(supporter => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+        src: (0, _util.getCustomerAvatar)(supporter.customer?.did, supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "", 24),
+        alt: supporter.customer?.name,
         sx: {
-          width: 32,
-          height: 32
+          width: "24px",
+          height: "24px"
         }
-      }, x.id))
+      }, supporter.customer?.id))
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        fontSize: "14px",
+        color: "text.secondary",
+        pl: 1.5,
+        pr: 1,
+        ml: -1,
+        borderRadius: "8px",
+        backgroundColor: "#f4f4f5",
+        height: "24px",
+        ...(showDonateDetails ? {
+          cursor: "pointer",
+          "&:hover": {
+            backgroundColor: "#e5e7eb"
+          }
+        } : {})
+      },
+      onClick: () => showDonateDetails && setOpen(true),
+      children: `${customersNum} supporter${customersNum > 1 ? "s" : ""} (${(0, _util.formatAmount)(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open,
+      onClose: () => setOpen(false),
+      sx: {
+        ".MuiDialogContent-root": {
+          width: "450px",
+          padding: "8px"
+        }
+      },
+      title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(DonateDetails, {
+        supporters,
+        currency,
+        method,
+        totalAmount
+      })
     })]
   });
 }
@@ -112,11 +232,9 @@ function SupporterTable({
   currency,
   method
 }) {
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
   const customers = (0, _unionBy.default)(supporters, "customer_did");
   const customersNum = customers.length;
+  if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     flexDirection: "column",
@@ -125,90 +243,16 @@ function SupporterTable({
       xs: 0.5,
       sm: 1
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      component: "p",
-      color: "text.secondary",
-      children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-        style: emojiFont,
-        children: 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",
-      sx: {
-        width: "100%",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableBody, {
-        children: supporters.map(x => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.TableRow, {
-          sx: {
-            "> td": {
-              padding: "8px 16px 8px 0",
-              borderTop: "1px solid #e0e0e0",
-              borderBottom: "1px solid #e0e0e0"
-            },
-            "> td:last-of-type": {
-              paddingRight: "0"
-            }
-          },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              spacing: 0.5,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-                src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-                alt: x.customer?.name,
-                variant: "circular",
-                sx: {
-                  width: 24,
-                  height: 24
-                }
-              }, x.id), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-                smDown: true,
-                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  children: x.customer?.name
-                })
-              })]
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            align: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              spacing: 0.5,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                fontWeight: 500,
-                component: "strong",
-                children: (0, _util.formatBNStr)(x.amount_total, currency.decimal)
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                children: currency.symbol
-              })]
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-            smDown: true,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-              align: "right",
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: (0, _util.formatDateTime)(x.created_at)
-              })
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {
-            align: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
-              method,
-              details: x.payment_details,
-              mode: "customer",
-              align: "right"
-            })
-          })]
-        }, x.id))
-      })
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+      supporters,
+      totalAmount,
+      currency,
+      method
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(DonateDetails, {
+      supporters,
+      totalAmount,
+      currency,
+      method
     })]
   });
 }
@@ -385,10 +429,7 @@ function CheckoutDonateInner({
     }, timeout);
   };
   if (donation.error) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
-      severity: "error",
-      children: (0, _util.formatError)(donation.error)
-    });
+    return null;
   }
   const handlePopoverOpen = event => {
     donation.run();
@@ -496,19 +537,39 @@ function CheckoutDonateInner({
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
       size: donateSettings.appearance?.button?.size || "medium",
       color: donateSettings.appearance?.button?.color || "primary",
-      variant: donateSettings.appearance?.button?.variant || "contained",
+      variant: donateSettings.appearance?.button?.variant || "outlined",
+      sx: {
+        ...(!donateSettings.appearance?.button?.variant ? {
+          color: "var(--foregrounds-fg-base, #010714)",
+          borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
+          "&:hover": {
+            backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
+            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
+          }
+        } : {}),
+        // @ts-ignore
+        ...(donateSettings.appearance?.button?.sx || {})
+      },
       ...donateSettings.appearance?.button,
       onClick: () => startDonate(),
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 0.5,
-        children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [donateSettings.appearance.button.icon && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mr: 0.5,
+            display: "inline-flex",
+            alignItems: "center"
+          },
+          children: donateSettings.appearance.button.icon
+        }), typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           children: donateSettings.appearance.button.text
         }) : donateSettings.appearance.button.text]
       })
     }), supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
-      ...supporters.data
+      ...supporters.data,
+      showDonateDetails: true
     }), supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
       ...supporters.data
     })]
@@ -519,10 +580,10 @@ function CheckoutDonateInner({
     }
     if (mode === "custom") {
       return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {}, !!supporters.loading, donateSettings)
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol || ""}`, supporters.data || {}, !!supporters.loading, donateSettings)
       }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-        children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
-          children: "(openDonate, donateTotalAmount, supporters) => ReactNode"
+        children: ["Please provide a valid render function", " ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
+          children: "(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode"
         })]
       });
     }

package/lib/components/livemode.js

@@ -24,7 +24,7 @@ function Livemode({
       height: 18,
       lineHeight: 1.2,
       textTransform: "uppercase",
-      fontSize: "0.8rem",
+      fontSize: "0.7rem",
       fontWeight: "bold",
       borderRadius: "4px",
       backgroundColor,

package/lib/components/loading-button.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps, type CircularProgressProps } from '@mui/material';
+export interface LoadingButtonProps extends ButtonProps {
+    loading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    loadingPosition?: 'start' | 'center' | 'end';
+    loadingProps?: Partial<CircularProgressProps>;
+    loadingOnly?: boolean;
+}
+declare const LoadingButton: import("react").ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default LoadingButton;

package/lib/components/loading-button.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("react");
+const LoadingButton = (0, _react.forwardRef)(({
+  children,
+  loading,
+  loadingPosition = "start",
+  loadingIndicator,
+  loadingProps = {},
+  onClick,
+  sx,
+  loadingOnly = false,
+  ...props
+}, ref) => {
+  const handleClick = e => {
+    if (loading) {
+      return;
+    }
+    onClick?.(e);
+  };
+  const getPositionStyles = position => {
+    return {
+      color: "inherit",
+      ...(position === "start" && {
+        mr: 1
+      }),
+      ...(position === "end" && {
+        ml: 1
+      }),
+      ...(position === "center" && {
+        position: "absolute",
+        left: "50%",
+        transform: "translateY(-50%) translateX(-50%)",
+        top: "50%"
+      }),
+      display: "inline-flex",
+      alignItems: "center"
+    };
+  };
+  const defaultIndicator = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+    size: 16,
+    ...loadingProps,
+    sx: {
+      color: "inherit",
+      ...(loadingProps?.sx || {})
+    }
+  });
+  const indicator = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: getPositionStyles(loadingPosition),
+    children: loadingIndicator || defaultIndicator
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+    ref,
+    disabled: props.disabled,
+    onClick: handleClick,
+    sx: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...sx
+    },
+    ...props,
+    children: [loading && loadingPosition === "start" && indicator, /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        visibility: loading && loadingOnly ? "hidden" : "visible"
+      },
+      children
+    }), loading && loadingPosition === "center" && indicator, loading && loadingPosition === "end" && indicator]
+  });
+});
+LoadingButton.displayName = "LoadingButton";
+LoadingButton.defaultProps = {
+  loading: false,
+  loadingIndicator: void 0,
+  loadingPosition: "start",
+  loadingProps: {},
+  loadingOnly: false
+};
+module.exports = LoadingButton;

package/lib/components/pricing-table.js

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
@@ -19,6 +18,7 @@ var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
 var _mobile = require("../hooks/mobile");
 var _truncatedText = _interopRequireDefault(require("./truncated-text"));
+var _loadingButton = _interopRequireDefault(require("./loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const sortOrder = {
   year: 1,
@@ -314,7 +314,6 @@ function PricingTable({
         justifyContent: alignItems === "center" ? "center" : "flex-start",
         sx: {
           flex: "0 1 auto",
-          overflow: "auto",
           pb: 2.5
         },
         className: "price-table-wrap",
@@ -341,7 +340,7 @@ function PricingTable({
               boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
               "&:hover": {
                 borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                boxShadow: "0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))"
               },
               width: {
                 xs: "100%",
@@ -510,7 +509,7 @@ function Subscribe({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
     fullWidth: true,
     size: "medium",
     variant: "contained",

package/lib/components/table.js

@@ -72,7 +72,7 @@ const Table = _react.default.memo(({
 });
 const Wrapped = (0, _system.styled)(_Datatable.default)`
   ${props => props?.hasRowLink ? `.MuiTableCell-root {
-    font-size: 1rem !important;
+    font-size: 0.875rem !important;
   }` : ""}
   .MuiPaper-root {
     border-radius: 8px;

package/lib/index.d.ts

@@ -30,6 +30,7 @@ import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
+import LoadingButton from './components/loading-button';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -42,4 +43,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, };

package/lib/index.js

@@ -36,6 +36,7 @@ var _exportNames = {
   createLazyComponent: true,
   OverdueInvoicePayment: true,
   PaymentBeneficiaries: true,
+  LoadingButton: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -118,6 +119,12 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
+Object.defineProperty(exports, "LoadingButton", {
+  enumerable: true,
+  get: function () {
+    return _loadingButton.default;
+  }
+});
 Object.defineProperty(exports, "OverdueInvoicePayment", {
   enumerable: true,
   get: function () {
@@ -282,6 +289,7 @@ var _link = _interopRequireDefault(require("./components/link"));
 var _lazyLoader = require("./components/lazy-loader");
 var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
 var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment-beneficiaries"));
+var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/libs/util.d.ts

@@ -113,3 +113,4 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
 };
 export declare function getPaymentKitComponent(): any;
 export declare function openDonationSettings(openInNewTab?: boolean): void;
+export declare function getUserProfileLink(userDid: string, locale?: string): string;

package/lib/libs/util.js

@@ -45,6 +45,7 @@ exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
+exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
 exports.hasDelegateTxHash = hasDelegateTxHash;
@@ -1109,4 +1110,10 @@ function openDonationSettings(openInNewTab = false) {
     const mountPoint = paymentKit.mountPoint.endsWith("/") ? paymentKit.mountPoint.slice(0, -1) : paymentKit.mountPoint;
     window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
+}
+function getUserProfileLink(userDid, locale = "en") {
+  return (0, _ufo.joinURL)(window.location.origin, (0, _ufo.withQuery)(".well-known/service/user", {
+    locale,
+    did: userDid
+  }));
 }

package/lib/payment/amount.js

@@ -15,7 +15,7 @@ function PaymentAmount({
     sx: {
       my: 0.5,
       fontWeight: 600,
-      fontSize: "2.5rem",
+      fontSize: "2.1875rem",
       letterSpacing: "-0.03rem",
       fontVariantNumeric: "tabular-nums",
       ...sx