@blocklet/payment-react 1.13.291 → 1.13.293

package/es/checkout/donate.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { ButtonProps as MUIButtonProps } from '@mui/material';
 import { CheckoutProps } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
@@ -7,16 +8,29 @@ export type DonateHistory = {
     method: TPaymentMethod;
     total: number;
 };
+export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
+    text: string;
+}
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
     timeout?: number;
+    mode?: 'inline' | 'default';
+    inlineOptions?: {
+        button?: ButtonType;
+    };
 };
-declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
+declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions, }: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;
         timeout: number;
+        mode: string;
+        inlineOptions: {
+            button: {
+                text: string;
+            };
+        };
     };
 }
 export default CheckoutDonate;

package/es/checkout/donate.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import {
@@ -7,7 +7,9 @@ import {
   AvatarGroup,
   Box,
   Button,
+  CircularProgress,
   Hidden,
+  Popover,
   Stack,
   Table,
   TableBody,
@@ -15,13 +17,13 @@ import {
   TableRow,
   Typography
 } from "@mui/material";
-import { useRequest, useSetState } from "ahooks";
+import { useMount, useRequest, useSetState } from "ahooks";
 import omit from "lodash/omit";
 import uniqBy from "lodash/unionBy";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
-import { formatBNStr, formatDateTime, formatError } from "../libs/util.js";
+import { formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -122,22 +124,90 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
     )) }) })
   ] });
 }
-export default function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }) {
+function SupporterSimple({ supporters = [], total = 0, currency, method }) {
+  const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, "customer_did");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      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(
+          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 }
+          },
+          x.id
+        )) }),
+        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.simpleSummary", { total }) })
+      ]
+    }
+  );
+}
+function useDonation(settings, livemode = true, mode = "default") {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
     exist: false
   });
-  const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
+  const donation = useRequest(() => createOrUpdateDonation(settings, livemode), {
+    manual: true,
+    loadingDelay: 300
+  });
   const supporters = useRequest(
-    () => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({})
+    () => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({}),
+    {
+      manual: true,
+      loadingDelay: 300
+    }
   );
+  useMount(() => {
+    if (mode !== "inline") {
+      lazyLoad(() => {
+        donation.run();
+        supporters.run();
+      });
+    }
+  });
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({ supporterLoaded: true });
       supporters.runAsync().catch(console.error);
     }
   }, [donation.data]);
+  return {
+    donation,
+    supporters,
+    state,
+    setState
+  };
+}
+export default function CheckoutDonate({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {}
+}) {
+  const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -150,59 +220,138 @@ export default function CheckoutDonate({ settings, livemode, timeout, onPaid, on
   if (donation.error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
   }
-  if (donation.loading || !donation.data) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: { width: "100%", minWidth: 300, maxWidth: 720 },
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: { xs: 1, sm: 2 },
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: settings.appearance?.button?.size || "medium",
-            color: settings.appearance?.button?.color || "primary",
-            variant: settings.appearance?.button?.variant || "contained",
-            onClick: () => setState({ open: true }),
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-              settings.appearance.button.icon,
-              typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
-            ] })
-          }
-        ),
-        supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
-        supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data }),
-        /* @__PURE__ */ jsx(
-          Dialog,
+  const handlePopoverOpen = (event) => {
+    donation.run();
+    supporters.run();
+    setAnchorEl(event.currentTarget);
+    setPopoverOpen(true);
+  };
+  const handlePopoverClose = () => {
+    setPopoverOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mode === "inline" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          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,
+            typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: settings.appearance.button.text }) : settings.appearance.button.text
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          id: "mouse-over-popper",
+          open: popoverOpen,
+          anchorEl,
+          onClose: handlePopoverClose,
+          anchorOrigin: {
+            vertical: "top",
+            horizontal: "center"
+          },
+          transformOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              p: 1,
+              sx: {
+                minWidth: 200
+              },
+              children: [
+                supporters.loading && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      backgroundColor: "rgba(255, 255, 255, 0.7)"
+                    },
+                    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,
+      {
+        sx: { width: "100%", minWidth: 300, maxWidth: 720 },
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: { xs: 1, sm: 2 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              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,
+                typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
+              ] })
+            }
+          ),
+          supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+          supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
+        ]
+      }
+    ),
+    donation.data && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: state.open,
+        title: settings.title,
+        maxWidth: "md",
+        showCloseButton: true,
+        disableEscapeKeyDown: true,
+        onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
+        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2, height: "100%" }, children: /* @__PURE__ */ jsx(
+          CheckoutForm,
           {
-            open: state.open,
-            title: settings.title,
-            maxWidth: "md",
-            showCloseButton: true,
-            disableEscapeKeyDown: true,
-            onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-            children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2, height: "100%" }, children: /* @__PURE__ */ jsx(
-              CheckoutForm,
-              {
-                id: donation.data.id,
-                onPaid: handlePaid,
-                onError,
-                action: settings.appearance?.button?.text,
-                mode: "inline"
-              }
-            ) })
+            id: donation.data?.id,
+            onPaid: handlePaid,
+            onError,
+            action: settings.appearance?.button?.text,
+            mode: "inline"
           }
-        )
-      ]
-    }
-  );
+        ) })
+      }
+    )
+  ] });
 }
 CheckoutDonate.defaultProps = {
   livemode: true,
-  timeout: 5e3
+  timeout: 5e3,
+  mode: "default",
+  inlineOptions: {
+    button: {
+      text: "Support"
+    }
+  }
 };

package/es/libs/util.d.ts

@@ -68,3 +68,4 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
     gas: any;
 };
 export declare function getQueryParams(url: string): Record<string, string>;
+export declare function lazyLoad(lazyRun: () => void): void;

package/es/libs/util.js

@@ -615,3 +615,24 @@ export function getQueryParams(url) {
   });
   return queryParams;
 }
+export function lazyLoad(lazyRun) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(() => {
+      lazyRun();
+    });
+    return;
+  }
+  if (document.readyState === "complete") {
+    lazyRun();
+    return;
+  }
+  if ("onload" in window) {
+    window.onload = () => {
+      lazyRun();
+    };
+    return;
+  }
+  setTimeout(() => {
+    lazyRun();
+  }, 0);
+}

package/es/locales/en.js

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

package/es/locales/zh.js

@@ -113,7 +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"
+        summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
+        simpleSummary: "{total} \u4EBA\u652F\u6301"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",

package/lib/checkout/donate.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { ButtonProps as MUIButtonProps } from '@mui/material';
 import { CheckoutProps } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
@@ -7,16 +8,29 @@ export type DonateHistory = {
     method: TPaymentMethod;
     total: number;
 };
+export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
+    text: string;
+}
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
     timeout?: number;
+    mode?: 'inline' | 'default';
+    inlineOptions?: {
+        button?: ButtonType;
+    };
 };
-declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
+declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions, }: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;
         timeout: number;
+        mode: string;
+        inlineOptions: {
+            button: {
+                text: string;
+            };
+        };
     };
 }
 export default CheckoutDonate;

package/lib/checkout/donate.js

@@ -187,20 +187,72 @@ function SupporterTable({
     })]
   });
 }
-function CheckoutDonate({
-  settings,
-  livemode,
-  timeout,
-  onPaid,
-  onError
+function SupporterSimple({
+  supporters = [],
+  total = 0,
+  currency,
+  method
 }) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    alignItems: "center",
+    sx: {
+      ".MuiAvatar-root": {
+        width: "32px",
+        height: "32px"
+      }
+    },
+    gap: {
+      xs: 0.5,
+      sm: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+      total,
+      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
+        }
+      }, x.id))
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "p",
+      color: "text.secondary",
+      children: t("payment.checkout.donation.simpleSummary", {
+        total
+      })
+    })]
+  });
+}
+function useDonation(settings, livemode = true, mode = "default") {
   const [state, setState] = (0, _ahooks.useSetState)({
     open: false,
     supporterLoaded: false,
     exist: false
   });
-  const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(settings, livemode));
-  const supporters = (0, _ahooks.useRequest)(() => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({}));
+  const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(settings, livemode), {
+    manual: true,
+    loadingDelay: 300
+  });
+  const supporters = (0, _ahooks.useRequest)(() => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({}), {
+    manual: true,
+    loadingDelay: 300
+  });
+  (0, _ahooks.useMount)(() => {
+    if (mode !== "inline") {
+      (0, _util.lazyLoad)(() => {
+        donation.run();
+        supporters.run();
+      });
+    }
+  });
   (0, _react.useEffect)(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({
@@ -209,6 +261,30 @@ function CheckoutDonate({
       supporters.runAsync().catch(console.error);
     }
   }, [donation.data]);
+  return {
+    donation,
+    supporters,
+    state,
+    setState
+  };
+}
+function CheckoutDonate({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {}
+}) {
+  const {
+    state,
+    setState,
+    donation,
+    supporters
+  } = useDonation(settings, livemode, mode);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [popoverOpen, setPopoverOpen] = (0, _react.useState)(false);
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -226,42 +302,117 @@ function CheckoutDonate({
       children: (0, _util.formatError)(donation.error)
     });
   }
-  if (donation.loading || !donation.data) {
-    return null;
-  }
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      width: "100%",
-      minWidth: 300,
-      maxWidth: 720
-    },
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 1,
-      sm: 2
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-      size: settings.appearance?.button?.size || "medium",
-      color: settings.appearance?.button?.color || "primary",
-      variant: settings.appearance?.button?.variant || "contained",
-      onClick: () => setState({
-        open: true
-      }),
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        alignItems: "center",
-        spacing: 0.5,
-        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          children: settings.appearance.button.text
-        }) : settings.appearance.button.text]
-      })
-    }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
-      ...supporters.data
-    }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
-      ...supporters.data
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+  const handlePopoverOpen = event => {
+    donation.run();
+    supporters.run();
+    setAnchorEl(event.currentTarget);
+    setPopoverOpen(true);
+  };
+  const handlePopoverClose = () => {
+    setPopoverOpen(false);
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [mode === "inline" ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        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",
+          alignItems: "center",
+          spacing: 0.5,
+          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              whiteSpace: "nowrap"
+            },
+            children: settings.appearance.button.text
+          }) : settings.appearance.button.text]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
+        id: "mouse-over-popper",
+        open: popoverOpen,
+        anchorEl,
+        onClose: handlePopoverClose,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          p: 1,
+          sx: {
+            minWidth: 200
+          },
+          children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundColor: "rgba(255, 255, 255, 0.7)"
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 2,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
+              ...supporters.data
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              ...inlineOptions.button,
+              onClick: () => setState({
+                open: true
+              }),
+              children: inlineOptions?.button?.text
+            })]
+          })]
+        })
+      })]
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        width: "100%",
+        minWidth: 300,
+        maxWidth: 720
+      },
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 1,
+        sm: 2
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.5,
+          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: settings.appearance.button.text
+          }) : settings.appearance.button.text]
+        })
+      }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+        ...supporters.data
+      }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
+        ...supporters.data
+      })]
+    }), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: settings.title,
       maxWidth: "md",
@@ -277,7 +428,7 @@ function CheckoutDonate({
           height: "100%"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
-          id: donation.data.id,
+          id: donation.data?.id,
           onPaid: handlePaid,
           onError,
           action: settings.appearance?.button?.text,
@@ -289,5 +440,11 @@ function CheckoutDonate({
 }
 CheckoutDonate.defaultProps = {
   livemode: true,
-  timeout: 5e3
+  timeout: 5e3,
+  mode: "default",
+  inlineOptions: {
+    button: {
+      text: "Support"
+    }
+  }
 };

package/lib/libs/util.d.ts

@@ -68,3 +68,4 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
     gas: any;
 };
 export declare function getQueryParams(url: string): Record<string, string>;
+export declare function lazyLoad(lazyRun: () => void): void;

package/lib/libs/util.js

@@ -38,6 +38,7 @@ exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
+exports.lazyLoad = lazyLoad;
 exports.mergeExtraParams = void 0;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
@@ -734,4 +735,25 @@ function getQueryParams(url) {
     queryParams[key] = value;
   });
   return queryParams;
+}
+function lazyLoad(lazyRun) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(() => {
+      lazyRun();
+    });
+    return;
+  }
+  if (document.readyState === "complete") {
+    lazyRun();
+    return;
+  }
+  if ("onload" in window) {
+    window.onload = () => {
+      lazyRun();
+    };
+    return;
+  }
+  setTimeout(() => {
+    lazyRun();
+  }, 0);
 }

package/lib/locales/en.js

@@ -120,7 +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"
+        summary: "{total} supporters",
+        simpleSummary: "{total} supporters"
       },
       cardPay: "{action} with card",
       empty: "No thing to pay",

package/lib/locales/zh.js

@@ -120,7 +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"
+        summary: "\u5DF2\u7ECF\u6709 {total} \u4EBA\u652F\u6301",
+        simpleSummary: "{total} \u4EBA\u652F\u6301"
       },
       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.291",
+  "version": "1.13.293",
   "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.291",
+    "@blocklet/payment-types": "1.13.293",
     "@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": "6e2ff4e102d46a29b5808e9c198e30ad3d3e9e04"
+  "gitHead": "d2f0dd9b6c3c0ce4c4c8a1c7f1d2cc5e8a332e5c"
 }

package/src/checkout/donate.tsx

@@ -14,22 +14,25 @@ import {
   AvatarGroup,
   Box,
   Button,
+  CircularProgress,
   Hidden,
+  Popover,
   Stack,
   Table,
   TableBody,
   TableCell,
   TableRow,
   Typography,
+  ButtonProps as MUIButtonProps,
 } from '@mui/material';
-import { useRequest, useSetState } from 'ahooks';
+import { useMount, useRequest, useSetState } from 'ahooks';
 import omit from 'lodash/omit';
 import uniqBy from 'lodash/unionBy';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
-import { formatBNStr, formatDateTime, formatError } from '../libs/util';
+import { formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
 import { CheckoutProps } from '../types';
 import CheckoutForm from './form';
 
@@ -39,10 +42,19 @@ export type DonateHistory = {
   method: TPaymentMethod;
   total: number;
 };
+
+export interface ButtonType extends Omit<MUIButtonProps, 'text'> {
+  text: string;
+}
+
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   settings: DonationSettings;
   livemode?: boolean;
   timeout?: number;
+  mode?: 'inline' | 'default';
+  inlineOptions?: {
+    button?: ButtonType;
+  };
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -174,24 +186,100 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
   );
 }
 
-export default function CheckoutDonate({ settings, livemode, timeout, onPaid, onError }: DonateProps) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SupporterSimple({ supporters = [], total = 0, currency, method }: DonateHistory) {
+  const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, 'customer_did');
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      sx={{
+        '.MuiAvatar-root': {
+          width: '32px',
+          height: '32px',
+        },
+      }}
+      gap={{
+        xs: 0.5,
+        sm: 1,
+      }}>
+      <AvatarGroup total={total} 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 }}
+          />
+        ))}
+      </AvatarGroup>
+      <Typography component="p" color="text.secondary">
+        {t('payment.checkout.donation.simpleSummary', { total })}
+      </Typography>
+    </Box>
+  );
+}
+
+function useDonation(settings: DonationSettings, livemode: boolean = true, mode = 'default') {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
     exist: false,
   });
-
-  const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
-  const supporters = useRequest(() =>
-    donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({})
+  const donation = useRequest(() => createOrUpdateDonation(settings, livemode), {
+    manual: true,
+    loadingDelay: 300,
+  });
+  const supporters = useRequest(
+    () => (donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({})),
+    {
+      manual: true,
+      loadingDelay: 300,
+    }
   );
 
+  useMount(() => {
+    if (mode !== 'inline') {
+      lazyLoad(() => {
+        donation.run();
+        supporters.run();
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  });
+
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({ supporterLoaded: true });
       supporters.runAsync().catch(console.error);
     }
-  }, [donation.data]); // eslint-disable-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [donation.data]);
+
+  return {
+    donation,
+    supporters,
+    state,
+    setState,
+  };
+}
+
+export default function CheckoutDonate({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {},
+}: DonateProps) {
+  // eslint-disable-line
+  const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   const handlePaid = (...args: any[]) => {
     if (onPaid) {
@@ -210,59 +298,139 @@ export default function CheckoutDonate({ settings, livemode, timeout, onPaid, on
     return <Alert severity="error">{formatError(donation.error)}</Alert>;
   }
 
-  if (donation.loading || !donation.data) {
-    return null;
-  }
+  const handlePopoverOpen = (event: any) => {
+    donation.run();
+    supporters.run();
+    setAnchorEl(event.currentTarget);
+    setPopoverOpen(true);
+  };
+
+  const handlePopoverClose = () => {
+    setPopoverOpen(false);
+  };
 
   return (
-    <Box
-      sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      gap={{ xs: 1, sm: 2 }}>
-      <Button
-        size={(settings.appearance?.button?.size || 'medium') as any}
-        color={(settings.appearance?.button?.color || 'primary') as any}
-        variant={(settings.appearance?.button?.variant || 'contained') as any}
-        onClick={() => setState({ open: true })}>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
-          {settings.appearance.button.icon}
-          {typeof settings.appearance.button.text === 'string' ? (
-            <Typography>{settings.appearance.button.text}</Typography>
-          ) : (
-            settings.appearance.button.text
+    <>
+      {mode === 'inline' ? (
+        <>
+          <Button
+            size={(settings.appearance?.button?.size || 'medium') as any}
+            color={(settings.appearance?.button?.color || 'primary') as any}
+            variant={(settings.appearance?.button?.variant || 'contained') as any}
+            {...settings.appearance?.button}
+            onClick={handlePopoverOpen}>
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              {settings.appearance.button.icon}
+              {typeof settings.appearance.button.text === 'string' ? (
+                <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
+              ) : (
+                settings.appearance.button.text
+              )}
+            </Stack>
+          </Button>
+          <Popover
+            id="mouse-over-popper"
+            open={popoverOpen}
+            anchorEl={anchorEl}
+            onClose={handlePopoverClose}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'center',
+            }}>
+            <Box
+              p={1}
+              sx={{
+                minWidth: 200,
+              }}>
+              {supporters.loading && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                  }}>
+                  <CircularProgress />
+                </div>
+              )}
+              <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
+                <SupporterSimple {...(supporters.data as DonateHistory)} />
+                <Button {...inlineOptions.button} onClick={() => setState({ open: true })}>
+                  {inlineOptions?.button?.text}
+                </Button>
+              </Box>
+            </Box>
+          </Popover>
+        </>
+      ) : (
+        <Box
+          sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          gap={{ xs: 1, sm: 2 }}>
+          <Button
+            size={(settings.appearance?.button?.size || 'medium') as any}
+            color={(settings.appearance?.button?.color || 'primary') as any}
+            variant={(settings.appearance?.button?.variant || 'contained') as any}
+            {...settings.appearance?.button}
+            onClick={() => setState({ open: true })}>
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              {settings.appearance.button.icon}
+              {typeof settings.appearance.button.text === 'string' ? (
+                <Typography>{settings.appearance.button.text}</Typography>
+              ) : (
+                settings.appearance.button.text
+              )}
+            </Stack>
+          </Button>
+          {supporters.data && settings.appearance.history.variant === 'avatar' && (
+            <SupporterAvatar {...(supporters.data as DonateHistory)} />
+          )}
+          {supporters.data && settings.appearance.history.variant === 'table' && (
+            <SupporterTable {...(supporters.data as DonateHistory)} />
           )}
-        </Stack>
-      </Button>
-      {supporters.data && settings.appearance.history.variant === 'avatar' && (
-        <SupporterAvatar {...(supporters.data as DonateHistory)} />
+        </Box>
       )}
-      {supporters.data && settings.appearance.history.variant === 'table' && (
-        <SupporterTable {...(supporters.data as DonateHistory)} />
+      {donation.data && (
+        <Dialog
+          open={state.open}
+          title={settings.title}
+          maxWidth="md"
+          showCloseButton
+          disableEscapeKeyDown
+          onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
+          <Box sx={{ mb: 1, mt: -2, height: '100%' }}>
+            <CheckoutForm
+              id={donation.data?.id}
+              onPaid={handlePaid}
+              onError={onError}
+              action={settings.appearance?.button?.text}
+              mode="inline"
+            />
+          </Box>
+        </Dialog>
       )}
-      <Dialog
-        open={state.open}
-        title={settings.title}
-        maxWidth="md"
-        showCloseButton
-        disableEscapeKeyDown
-        onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
-        <Box sx={{ mb: 1, mt: -2, height: '100%' }}>
-          <CheckoutForm
-            id={donation.data.id}
-            onPaid={handlePaid}
-            onError={onError}
-            action={settings.appearance?.button?.text}
-            mode="inline"
-          />
-        </Box>
-      </Dialog>
-    </Box>
+    </>
   );
 }
 
 CheckoutDonate.defaultProps = {
   livemode: true,
   timeout: 5000,
+  mode: 'default',
+  inlineOptions: {
+    button: {
+      text: 'Support',
+    },
+  },
 };

package/src/libs/util.ts

@@ -802,3 +802,25 @@ export function getQueryParams(url: string): Record<string, string> {
   });
   return queryParams;
 }
+
+export function lazyLoad(lazyRun: () => void) {
+  if ('requestIdleCallback' in window) {
+    (window as any).requestIdleCallback(() => {
+      lazyRun();
+    });
+    return;
+  }
+  if (document.readyState === 'complete') {
+    lazyRun();
+    return;
+  }
+  if ('onload' in window) {
+    (window as any).onload = () => {
+      lazyRun();
+    };
+    return;
+  }
+  setTimeout(() => {
+    lazyRun();
+  }, 0);
+}

package/src/locales/en.tsx

@@ -117,6 +117,7 @@ export default flat({
         custom: 'Custom Amount',
         select: 'Select Amount',
         summary: '{total} supporters',
+        simpleSummary: '{total} supporters',
       },
       cardPay: '{action} with card',
       empty: 'No thing to pay',

package/src/locales/zh.tsx

@@ -116,6 +116,7 @@ export default flat({
         custom: '输入金额',
         select: '选择金额',
         summary: '已经有 {total} 人支持',
+        simpleSummary: '{total} 人支持',
       },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',