@blocklet/payment-react 1.18.7 → 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
     })]
   });
 }
@@ -493,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
     })]

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/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/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

package/lib/payment/form/index.js

@@ -564,8 +564,8 @@ function PaymentForm({
           sx: {
             mt: 2.5,
             color: "text.lighter",
-            fontSize: "0.9rem",
-            lineHeight: "1.1rem"
+            fontSize: "0.7875rem",
+            lineHeight: "0.9625rem"
           },
           children: t("payment.checkout.confirm", {
             payee

package/lib/payment/form/stripe/form.js

@@ -143,7 +143,7 @@ function StripeCheckoutForm({
         mt: 2,
         mb: 1,
         borderRadius: 0,
-        fontSize: "1.1rem"
+        fontSize: "0.875rem"
       },
       type: "submit",
       disabled: state.confirming || !state.loaded,

package/lib/payment/product-card.js

@@ -65,7 +65,7 @@ function ProductCard({
         variant: "body1",
         title: description,
         sx: {
-          fontSize: "0.85rem",
+          fontSize: "0.74375rem",
           mb: 0.5,
           lineHeight: 1.2,
           textAlign: "left"
@@ -74,7 +74,7 @@ function ProductCard({
         children: description
       }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          fontSize: "0.85rem"
+          fontSize: "0.74375rem"
         },
         color: "text.lighter",
         children: extra

package/lib/payment/product-item.js

@@ -98,7 +98,7 @@ function ProductItem({
             children: primaryText
           }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
-              fontSize: "0.85rem",
+              fontSize: "0.74375rem",
               color: "text.lighter"
             },
             children: pricing.secondary

package/lib/payment/product-skeleton.js

@@ -37,7 +37,7 @@ function ProductSkeleton({
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -62,7 +62,7 @@ function ProductSkeleton({
       (0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "1rem",
+          fontSize: "0.875rem",
           width: "60%"
         }
       }, i))]

package/lib/payment/skeleton/donation.js

@@ -14,7 +14,7 @@ function DonationSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/skeleton/overview.js

@@ -18,7 +18,7 @@ function OverviewSkeleton() {
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
-            fontSize: "2rem",
+            fontSize: "1.75rem",
             width: "40%"
           }
         })

package/lib/payment/skeleton/payment.js

@@ -14,7 +14,7 @@ function PaymentSkeleton() {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
         variant: "text",
         sx: {
-          fontSize: "2rem",
+          fontSize: "1.75rem",
           width: "40%"
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {

package/lib/payment/summary.js

@@ -413,7 +413,7 @@ function PaymentSummary({
       }), headlines.then && headlines.showThen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "div",
         sx: {
-          fontSize: "0.9rem",
+          fontSize: "0.7875rem",
           color: "text.lighter",
           textAlign: "right",
           margin: "-2px 0 8px"

package/lib/theme/index.js

@@ -65,7 +65,7 @@ function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: "1rem",
+            fontSize: "0.875rem",
             fontWeight: 500,
             textTransform: "none",
             boxShadow: "none"
@@ -113,7 +113,8 @@ function PaymentThemeProvider({
       MuiTab: {
         styleOverrides: {
           root: {
-            textTransform: "none"
+            textTransform: "none",
+            fontSize: "0.875rem"
           }
         }
       },

package/lib/theme/typography.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.typography = void 0;
 const typography = exports.typography = {
   h1: {
-    fontSize: "1.875rem",
+    fontSize: "1.5rem",
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: "-.025em"
@@ -18,38 +18,38 @@ const typography = exports.typography = {
     letterSpacing: "-.025em"
   },
   h3: {
-    fontSize: "1.25rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.4,
     fontWeight: 600,
     letterSpacing: "-.025em"
   },
   h4: {
-    fontSize: "1.125rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.5,
     fontWeight: 600
   },
   h5: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   h6: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle2: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   body1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75
   },
   fontWeightLight: 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.7",
+  "version": "1.18.8",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.11.40",
-    "@arcblock/ux": "^2.11.40",
-    "@arcblock/ws": "^1.19.9",
-    "@blocklet/ui-react": "^2.11.40",
+    "@arcblock/did-connect": "^2.11.44",
+    "@arcblock/ux": "^2.11.44",
+    "@arcblock/ws": "^1.19.10",
+    "@blocklet/ui-react": "^2.11.44",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.19.9",
+    "@ocap/util": "^1.19.10",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.7",
+    "@blocklet/payment-types": "1.18.8",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "b75168ab5e2cd939571e6e26543374c8d0dab963"
+  "gitHead": "0815493ffd53c977d2d14779703d85f2e0e34299"
 }