@blocklet/payment-react 1.18.6 → 1.18.8

package/es/checkout/donate.d.ts

@@ -1,20 +1,45 @@
-import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import type { DonationSettings, PaymentBeneficiary, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { type ButtonProps as MUIButtonProps } from '@mui/material';
 import type { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
+    total?: number;
     totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<DonationSettings, 'target' | 'title' | 'description' | 'reference' | 'beneficiaries'>;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
+export type CheckoutDonateSettings = {
+    target: string;
+    title: string;
+    description: string;
+    reference: string;
+    beneficiaries: PaymentBeneficiary[];
+    amount?: {
+        presets?: string[];
+        preset?: string;
+        minimum?: string;
+        maximum?: string;
+        custom?: boolean;
+    };
+    appearance?: {
+        button?: {
+            text?: any;
+            icon?: any;
+            size?: string;
+            color?: string;
+            variant?: string;
+        };
+        history?: {
+            variant?: string;
+        };
+    };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
     text?: string | React.ReactNode;
     icon: React.ReactNode;
 }
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-    settings: RequiredDonationSettings & OptionalDonationSettings;
+    settings: CheckoutDonateSettings;
     livemode?: boolean;
     timeout?: number;
     mode?: 'inline' | 'default' | 'custom';

package/es/checkout/donate.js

@@ -2,20 +2,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import {
-  Alert,
   Avatar,
   AvatarGroup,
   Box,
   Button,
   CircularProgress,
-  Hidden,
   IconButton,
   Popover,
   Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
   Typography,
   Tooltip
 } from "@mui/material";
@@ -24,14 +18,13 @@ import omit from "lodash/omit";
 import uniqBy from "lodash/unionBy";
 import { useEffect, useRef, useState } from "react";
 import { Settings } from "@mui/icons-material";
-import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
 import {
   formatAmount,
   formatBNStr,
-  formatDateTime,
-  formatError,
   getCustomerAvatar,
+  getTxLink,
+  getUserProfileLink,
   lazyLoad,
   openDonationSettings
 } from "../libs/util.js";
@@ -67,98 +60,190 @@ 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({ supporters = [], totalAmount = "0", currency, method }) {
-  const { t } = useLocaleContext();
-  const customers = uniqBy(supporters, "customer_did");
-  const customersNum = customers.length;
-  return /* @__PURE__ */ jsxs(
-    Box,
+function DonateDetails({ supporters = [], currency, method }) {
+  const { locale } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Stack,
     {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
       sx: {
-        ".MuiAvatar-root": {
-          width: "32px",
-          height: "32px"
-        }
+        width: "100%",
+        minWidth: "256px",
+        maxWidth: "calc(100vw - 32px)",
+        maxHeight: "300px",
+        overflowX: "hidden",
+        overflowY: "auto",
+        margin: "0 auto"
       },
-      gap: {
-        xs: 0.5,
-        sm: 1
-      },
-      children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: 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,
-            alt: x.customer?.name,
-            src: getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
-            variant: "circular",
-            sx: { width: 32, height: 32 }
+      children: supporters.map((x) => /* @__PURE__ */ jsxs(
+        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"
           },
-          x.id
-        )) })
-      ]
+          onClick: () => {
+            const { link, text } = getTxLink(method, x.payment_details);
+            if (link && text) {
+              window.open(link, "_blank");
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                sx: {
+                  flex: 3,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      src: 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(getUserProfileLink(x.customer?.did, locale), "_blank");
+                        }
+                      }
+                    },
+                    x.id
+                  ),
+                  /* @__PURE__ */ jsx(
+                    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(getUserProfileLink(x.customer?.did, locale), "_blank");
+                        }
+                      },
+                      children: x.customer?.name
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  src: currency?.logo,
+                  alt: currency?.symbol,
+                  variant: "circular",
+                  sx: { width: 16, height: 16 }
+                },
+                x.id
+              ),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: formatBNStr(x.amount_total, currency.decimal) }),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: currency.symbol })
+            ] })
+          ]
+        },
+        x.id
+      ))
     }
   );
 }
-function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
-  const { t } = useLocaleContext();
+function SupporterAvatar({
+  supporters = [],
+  totalAmount = "0",
+  currency,
+  method,
+  showDonateDetails = false
+}) {
+  const [open, setOpen] = useState(false);
   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: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: 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,
+  if (customersNum === 0)
+    return null;
+  return /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", justifyContent: "center", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(AvatarGroup, { max: 5, children: customers.slice(0, 5).map((supporter) => /* @__PURE__ */ jsx(
+      Avatar,
       {
+        src: getCustomerAvatar(
+          supporter.customer?.did,
+          supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "",
+          24
+        ),
+        alt: supporter.customer?.name,
         sx: {
-          "> td": {
-            padding: "8px 16px 8px 0",
-            borderTop: "1px solid #e0e0e0",
-            borderBottom: "1px solid #e0e0e0"
-          },
-          "> td:last-of-type": {
-            paddingRight: "0"
+          width: "24px",
+          height: "24px"
+        }
+      },
+      supporter.customer?.id
+    )) }),
+    /* @__PURE__ */ jsx(
+      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" : ""} (${formatAmount(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        sx: {
+          ".MuiDialogContent-root": {
+            width: "450px",
+            padding: "8px"
           }
         },
-        children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(
-              Avatar,
-              {
-                src: 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__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(Typography, { children: x.customer?.name }) })
-          ] }) }),
-          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(Typography, { fontWeight: 500, component: "strong", children: formatBNStr(x.amount_total, currency.decimal) }),
-            /* @__PURE__ */ jsx(Typography, { component: "span", children: currency.symbol })
-          ] }) }),
-          /* @__PURE__ */ jsx(Hidden, { smDown: true, children: /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatDateTime(x.created_at) }) }) }),
-          /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(TxLink, { method, details: x.payment_details, mode: "customer", align: "right" }) })
-        ]
-      },
-      x.id
-    )) }) })
+        title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
+        children: /* @__PURE__ */ jsx(DonateDetails, { supporters, currency, method, totalAmount })
+      }
+    )
+  ] });
+}
+function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
+  const customers = uniqBy(supporters, "customer_did");
+  const customersNum = customers.length;
+  if (customersNum === 0)
+    return null;
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
+    /* @__PURE__ */ jsx(SupporterAvatar, { supporters, totalAmount, currency, method }),
+    /* @__PURE__ */ jsx(DonateDetails, { supporters, totalAmount, currency, method })
   ] });
 }
 function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
@@ -309,7 +394,7 @@ function CheckoutDonateInner({
     }, timeout);
   };
   if (donation.error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
+    return null;
   }
   const handlePopoverOpen = (event) => {
     donation.run();
@@ -406,16 +491,28 @@ function CheckoutDonateInner({
           {
             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__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-              donateSettings.appearance.button.icon,
+              donateSettings.appearance.button.icon && /* @__PURE__ */ jsx(Typography, { sx: { mr: 0.5, display: "inline-flex", alignItems: "center" }, children: donateSettings.appearance.button.icon }),
               typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
             ] })
           }
         ),
-        supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+        supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data, showDonateDetails: true }),
         supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
       ]
     }
@@ -430,13 +527,14 @@ function CheckoutDonateInner({
         `${formatAmount(
           supporters.data?.totalAmount || "0",
           supporters.data?.currency?.decimal
-        )} ${supporters.data?.currency?.symbol}`,
+        )} ${supporters.data?.currency?.symbol || ""}`,
         supporters.data || {},
         !!supporters.loading,
         donateSettings
       ) }) : /* @__PURE__ */ jsxs(Typography, { children: [
-        "Please provide a valid render function ",
-        /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters) => ReactNode" })
+        "Please provide a valid render function",
+        " ",
+        /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode" })
       ] });
     }
     return defaultRender;

package/es/components/livemode.js

@@ -14,7 +14,7 @@ export default function Livemode({ color, backgroundColor, sx }) {
         height: 18,
         lineHeight: 1.2,
         textTransform: "uppercase",
-        fontSize: "0.8rem",
+        fontSize: "0.7rem",
         fontWeight: "bold",
         borderRadius: "4px",
         backgroundColor,

package/es/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/es/components/loading-button.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  CircularProgress,
+  Typography
+} from "@mui/material";
+import { forwardRef } from "react";
+const LoadingButton = 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__ */ jsx(CircularProgress, { size: 16, ...loadingProps, sx: { color: "inherit", ...loadingProps?.sx || {} } });
+    const indicator = /* @__PURE__ */ jsx(Typography, { sx: getPositionStyles(loadingPosition), children: loadingIndicator || defaultIndicator });
+    return /* @__PURE__ */ jsxs(
+      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__ */ jsx(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
+};
+export default LoadingButton;

package/es/components/pricing-table.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { CheckOutlined } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
 import {
   Avatar,
   Box,
@@ -34,6 +33,7 @@ import {
 } from "../libs/util.js";
 import { useMobile } from "../hooks/mobile.js";
 import TruncatedText from "./truncated-text.js";
+import LoadingButton from "./loading-button.js";
 const sortOrder = {
   year: 1,
   month: 2,
@@ -290,7 +290,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                 justifyContent: alignItems === "center" ? "center" : "flex-start",
                 sx: {
                   flex: "0 1 auto",
-                  overflow: "auto",
                   pb: 2.5
                 },
                 className: "price-table-wrap",
@@ -319,7 +318,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         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%",

package/es/components/table.js

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

package/es/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/es/index.js

@@ -30,6 +30,7 @@ import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
 import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
+import LoadingButton from "./components/loading-button.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -74,5 +75,6 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
-  PaymentBeneficiaries
+  PaymentBeneficiaries,
+  LoadingButton
 };

package/es/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/es/libs/util.js

@@ -4,7 +4,7 @@ import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
 import stringWidth from "string-width";
 import { defaultCountries } from "react-international-phone";
-import { joinURL } from "ufo";
+import { joinURL, withQuery } from "ufo";
 import { t } from "../locales/index.js";
 import dayjs from "./dayjs.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
@@ -924,3 +924,12 @@ export function openDonationSettings(openInNewTab = false) {
     window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
 }
+export function getUserProfileLink(userDid, locale = "en") {
+  return joinURL(
+    window.location.origin,
+    withQuery(".well-known/service/user", {
+      locale,
+      did: userDid
+    })
+  );
+}

package/es/payment/amount.js

@@ -8,7 +8,7 @@ export default function PaymentAmount({ amount, sx }) {
       sx: {
         my: 0.5,
         fontWeight: 600,
-        fontSize: "2.5rem",
+        fontSize: "2.1875rem",
         letterSpacing: "-0.03rem",
         fontVariantNumeric: "tabular-nums",
         ...sx