@blocklet/payment-react 1.25.10 → 1.26.0

package/lib/checkout-v2/components/right/customer-info-card.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomerInfoCard;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _countrySelect = _interopRequireDefault(require("../../../components/country-select"));
+var _phoneField = _interopRequireDefault(require("../../../components/phone-field"));
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const fieldLabelMap = t => ({
+  customer_name: t("payment.checkout.customer.name"),
+  customer_email: t("payment.checkout.customer.email"),
+  customer_phone: t("payment.checkout.customer.phone"),
+  "billing_address.country": t("payment.checkout.billing.country"),
+  "billing_address.state": t("payment.checkout.billing.state"),
+  "billing_address.city": t("payment.checkout.billing.city"),
+  "billing_address.line1": t("payment.checkout.billing.line1"),
+  "billing_address.line2": t("payment.checkout.billing.line2"),
+  "billing_address.postal_code": t("payment.checkout.billing.postal_code")
+});
+function CustomerInfoCard({
+  form,
+  isLoggedIn
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const labels = fieldLabelMap(t);
+  const hasRequiredData = !!(form.values.customer_name && form.values.customer_email);
+  const [showEditForm, setShowEditForm] = (0, _react.useState)(!hasRequiredData);
+  const autoConfirmedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!autoConfirmedRef.current && form.values.customer_name && form.values.customer_email) {
+      autoConfirmedRef.current = true;
+      setShowEditForm(false);
+    }
+  }, [form.values.customer_name, form.values.customer_email]);
+  if (!isLoggedIn) return null;
+  if (!showEditForm) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        mt: 2
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: {
+          mb: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: "text.secondary"
+          },
+          children: t("payment.checkout.customerInfo")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          size: "small",
+          variant: "text",
+          onClick: () => setShowEditForm(true),
+          sx: {
+            minWidth: 0,
+            fontSize: 13,
+            fontWeight: 600,
+            p: 0
+          },
+          children: t("common.edit")
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 0.5,
+        sx: {
+          p: 2,
+          backgroundColor: "background.paper",
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: "divider"
+        },
+        children: [form.values.customer_name && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.primary",
+            fontWeight: 600,
+            fontSize: "0.9375rem"
+          },
+          children: form.values.customer_name
+        }), form.values.customer_email && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary",
+            fontSize: "0.8125rem"
+          },
+          children: form.values.customer_email
+        }), form.fields.some(f => f.name === "customer_phone") && form.values.customer_phone && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary",
+            fontSize: "0.8125rem"
+          },
+          children: form.values.customer_phone
+        }), (form.values.billing_address?.country || form.values.billing_address?.state || form.values.billing_address?.postal_code) && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          children: [form.values.billing_address?.country && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            component: "span",
+            sx: {
+              fontSize: 14,
+              lineHeight: 1
+            },
+            children: (0, _format.countryCodeToFlag)(form.values.billing_address.country)
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              fontSize: "0.8125rem"
+            },
+            children: [form.values.billing_address?.state || "", form.values.billing_address?.postal_code ? ` [ ${t("payment.checkout.billing.postal_code")}: ${form.values.billing_address.postal_code} ]` : ""]
+          })]
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mt: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        mb: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: 13,
+          fontWeight: 600,
+          color: "text.secondary"
+        },
+        children: t("payment.checkout.customerInfo")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        size: "small",
+        variant: "text",
+        onClick: () => setShowEditForm(false),
+        sx: {
+          minWidth: 0,
+          fontSize: 13,
+          fontWeight: 600,
+          p: 0
+        },
+        children: t("common.confirm")
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      spacing: 0,
+      sx: {
+        p: 2,
+        backgroundColor: "background.paper",
+        borderRadius: 1,
+        border: "1px solid",
+        borderColor: "divider"
+      },
+      children: form.fields.filter(f => f.name !== "billing_address.country").map(field => {
+        const {
+          name
+        } = field;
+        const label = labels[name] || name;
+        const value = name.includes(".") ? name.split(".").reduce((o, k) => o?.[k], form.values) : form.values[name];
+        const isPostalCode = name === "billing_address.postal_code";
+        const isPhone = name === "customer_phone";
+        if (isPhone) {
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_phoneField.default, {
+            value: value || "",
+            country: form.values.billing_address?.country || "",
+            onChange: phone => form.onChange("customer_phone", phone),
+            onCountryChange: c => form.onChange("billing_address.country", c),
+            onBlur: () => form.validateField(name),
+            label,
+            error: form.errors[name]
+          }, name);
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            mb: 1.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: 13,
+              fontWeight: 600,
+              color: "text.primary",
+              mb: 0.5
+            },
+            children: label
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputBase, {
+            fullWidth: true,
+            value: value || "",
+            onChange: e => form.onChange(name, e.target.value),
+            onBlur: () => form.validateField(name),
+            startAdornment: isPostalCode ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+              position: "start",
+              sx: {
+                mr: 0.5,
+                ml: -0.5
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                value: form.values.billing_address?.country || "",
+                onChange: v => form.onChange("billing_address.country", v),
+                sx: {
+                  ".MuiOutlinedInput-notchedOutline": {
+                    borderColor: "transparent !important"
+                  },
+                  "& .MuiSelect-select": {
+                    py: 0,
+                    pr: "20px !important"
+                  }
+                }
+              })
+            }) : void 0,
+            sx: {
+              bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+              borderRadius: "8px",
+              px: 1.5,
+              py: 0.75,
+              fontSize: 14,
+              "& .MuiInputBase-input": {
+                p: 0
+              }
+            }
+          }), form.errors[name] && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: 12,
+              color: "error.main",
+              mt: 0.25
+            },
+            children: form.errors[name]
+          })]
+        }, name);
+      })
+    })]
+  });
+}

package/lib/checkout-v2/components/right/status-feedback.d.ts

@@ -0,0 +1,7 @@
+interface StatusFeedbackProps {
+    status: string;
+    context: any;
+    onReset: () => void;
+}
+export default function StatusFeedback({ status, context, onReset }: StatusFeedbackProps): null;
+export {};

package/lib/checkout-v2/components/right/status-feedback.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = StatusFeedback;
+var _react = require("react");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function StatusFeedback({
+  status,
+  context,
+  onReset
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const prevStatusRef = (0, _react.useRef)(status);
+  (0, _react.useEffect)(() => {
+    if (status === prevStatusRef.current) return;
+    prevStatusRef.current = status;
+    if (status === "failed" && context?.type === "error") {
+      if (context.code === "CUSTOMER_LIMITED") return;
+      _Toast.default.error(context.message || "Payment failed");
+      onReset();
+    }
+  }, [status, context, t, onReset]);
+  return null;
+}

package/lib/checkout-v2/components/right/submit-button.d.ts

@@ -0,0 +1,10 @@
+interface SubmitButtonProps {
+    canSubmit: boolean;
+    isProcessing: boolean;
+    isWaitingStripe: boolean;
+    label: string;
+    processingLabel: string;
+    onSubmit: () => Promise<void>;
+}
+export default function SubmitButton({ canSubmit, isProcessing, isWaitingStripe, label, processingLabel, onSubmit, }: SubmitButtonProps): import("react").JSX.Element;
+export {};

package/lib/checkout-v2/components/right/submit-button.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = SubmitButton;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function SubmitButton({
+  canSubmit,
+  isProcessing,
+  isWaitingStripe,
+  label,
+  processingLabel,
+  onSubmit
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+    variant: "contained",
+    size: "large",
+    fullWidth: true,
+    disabled: !canSubmit || isWaitingStripe,
+    onClick: onSubmit,
+    startIcon: isProcessing ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      size: 20,
+      color: "inherit"
+    }) : null,
+    sx: {
+      py: 1.5,
+      fontSize: "1.3rem",
+      fontWeight: 600,
+      textTransform: "none"
+    },
+    children: isProcessing ? processingLabel : label
+  });
+}

package/lib/checkout-v2/components/right/subscription-disclaimer.d.ts

@@ -0,0 +1,11 @@
+interface SubscriptionDisclaimerProps {
+    mode: string;
+    subscription: {
+        confirmMessage: string;
+        showStake: boolean;
+    } | null;
+    staking: string | null;
+    appName: string;
+}
+export default function SubscriptionDisclaimer({ mode, subscription, staking, appName }: SubscriptionDisclaimerProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/right/subscription-disclaimer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = SubscriptionDisclaimer;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+function SubscriptionDisclaimer({
+  mode,
+  subscription,
+  staking,
+  appName
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  if (!["subscription", "setup"].includes(mode) || !subscription) return null;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: {
+      mt: 2.5,
+      color: "text.secondary",
+      fontSize: "0.7875rem",
+      lineHeight: "0.9625rem"
+    },
+    children: subscription.confirmMessage || (subscription.showStake && staking ? t("payment.checkout.confirm.withStake", {
+      payee: appName || "New Payment Kit"
+    }) : t("payment.checkout.confirm.withoutStake", {
+      payee: appName || "New Payment Kit"
+    }))
+  });
+}

package/lib/checkout-v2/components/shared/exchange-rate-footer.d.ts

@@ -0,0 +1,23 @@
+interface ExchangeRateFooterProps {
+    hasDynamicPricing: boolean;
+    rate: {
+        value: string | null;
+        display: string | null;
+        provider: string | null;
+        providerDisplay: string | null;
+        fetchedAt: number | null;
+        status: 'loading' | 'available' | 'unavailable';
+    };
+    slippage: {
+        percent: number;
+        set: (config: {
+            mode: string;
+            percent: number;
+            base_currency?: string;
+        }) => Promise<void>;
+    };
+    currencySymbol: string;
+    isSubscription: boolean;
+}
+export default function ExchangeRateFooter({ hasDynamicPricing, rate, slippage, currencySymbol, isSubscription, }: ExchangeRateFooterProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/shared/exchange-rate-footer.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ExchangeRateFooter;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Tune = _interopRequireDefault(require("@mui/icons-material/Tune"));
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _slippageConfig = _interopRequireDefault(require("../../../components/slippage-config"));
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ping = (0, _material.keyframes)`
+  75%, 100% { transform: scale(2); opacity: 0; }
+`;
+function formatDateTime(ts) {
+  if (!ts) return "\u2014";
+  const d = new Date(ts);
+  const pad = n => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function ExchangeRateFooter({
+  hasDynamicPricing,
+  rate,
+  slippage,
+  currencySymbol,
+  isSubscription
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
+  const [pendingConfig, setPendingConfig] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [localSlippage, setLocalSlippage] = (0, _react.useState)(slippage?.percent ?? 0.5);
+  (0, _react.useEffect)(() => {
+    setLocalSlippage(slippage?.percent ?? 0.5);
+  }, [slippage?.percent]);
+  if (!hasDynamicPricing || !rate.value || rate.status === "unavailable") return null;
+  const rateDisplay = rate.display || `$${Number(rate.value).toFixed(2)}`;
+  const showSlippage = isSubscription && typeof slippage?.set === "function";
+  const handleOpenDialog = () => {
+    setPendingConfig({
+      mode: "percent",
+      percent: localSlippage
+    });
+    setDialogOpen(true);
+  };
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setPendingConfig(null);
+  };
+  const handleSlippageChange = value => {
+    setPendingConfig(prev => prev ? {
+      ...prev,
+      percent: value
+    } : {
+      mode: "percent",
+      percent: value
+    });
+  };
+  const handleConfigChange = config => {
+    setPendingConfig(config);
+  };
+  const handleSubmit = async () => {
+    if (!pendingConfig || !slippage?.set) return;
+    setSubmitting(true);
+    try {
+      setLocalSlippage(pendingConfig.percent);
+      await slippage.set({
+        ...pendingConfig,
+        base_currency: "USD"
+      });
+      setDialogOpen(false);
+      setPendingConfig(null);
+    } catch (err) {
+      setLocalSlippage(slippage?.percent ?? 0.5);
+      console.error("Failed to update slippage", err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const labelSx = {
+    fontSize: 11,
+    fontWeight: 700,
+    color: "primary.main",
+    letterSpacing: "0.02em"
+  };
+  const providerName = rate.providerDisplay || rate.provider || "\u2014";
+  const updatedAt = formatDateTime(rate.fetchedAt);
+  const fullRate = `$${rate.value}`;
+  const tooltipSx = _format.whiteTooltipSx;
+  const rowSx = {
+    fontSize: 12,
+    color: "text.secondary",
+    lineHeight: 1.4
+  };
+  const valSx = {
+    fontSize: 12,
+    fontWeight: 600,
+    color: "text.primary",
+    lineHeight: 1.4
+  };
+  const tooltipContent = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    spacing: 0.75,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: {
+        fontSize: 13,
+        fontWeight: 700,
+        color: "text.primary",
+        mb: 0.25
+      },
+      children: ["1 ", currencySymbol, " = ", fullRate]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        borderTop: "1px solid",
+        borderColor: "divider",
+        pt: 0.75
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 0.5,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          spacing: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: rowSx,
+            children: t("payment.checkout.quote.detailProvider")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: valSx,
+            children: providerName
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          spacing: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: rowSx,
+            children: t("payment.checkout.quote.detailUpdatedAt")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: valSx,
+            children: updatedAt
+          })]
+        })]
+      })
+    })]
+  });
+  const slippageTooltip = t("payment.checkout.quote.slippage.tooltip");
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        width: "100%",
+        pt: 3,
+        pb: 1,
+        borderTop: "1px solid",
+        borderColor: "divider"
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+        in: true,
+        timeout: 300,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: tooltipContent,
+            placement: "top",
+            arrow: true,
+            slotProps: {
+              popper: {
+                sx: tooltipSx
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1,
+              sx: {
+                cursor: "default"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  position: "relative",
+                  width: 8,
+                  height: 8,
+                  flexShrink: 0
+                },
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: "50%",
+                    bgcolor: "#60a5fa",
+                    opacity: 0.6,
+                    animation: `${ping} 1s cubic-bezier(0, 0, 0.2, 1) infinite`
+                  }
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    position: "relative",
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    bgcolor: "primary.main"
+                  }
+                })]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: labelSx,
+                children: ["1 ", currencySymbol, " \u2248 ", rateDisplay]
+              })]
+            })
+          }), showSlippage && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: slippageTooltip,
+            placement: "top",
+            arrow: true,
+            slotProps: {
+              popper: {
+                sx: _format.whiteTooltipSx
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.75,
+              onClick: handleOpenDialog,
+              sx: {
+                cursor: "pointer",
+                "&:hover": {
+                  opacity: 1
+                },
+                "&:hover .tune-icon": {
+                  transform: "rotate(90deg)"
+                },
+                transition: "opacity 0.2s"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tune.default, {
+                className: "tune-icon",
+                sx: {
+                  fontSize: 16,
+                  color: "primary.main",
+                  transition: "transform 0.5s"
+                }
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: labelSx,
+                children: [t("payment.checkout.quote.detailSlippage"), " ", localSlippage, "%"]
+              })]
+            })
+          })]
+        })
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: dialogOpen,
+      onClose: handleCloseDialog,
+      maxWidth: "sm",
+      fullWidth: true,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogTitle, {
+        children: t("payment.checkout.quote.slippage.title")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_slippageConfig.default, {
+          value: pendingConfig?.percent ?? localSlippage,
+          onChange: handleSlippageChange,
+          config: pendingConfig || {
+            mode: "percent",
+            percent: localSlippage
+          },
+          onConfigChange: handleConfigChange,
+          exchangeRate: rate.value ? String(rate.value) : null,
+          baseCurrency: "USD",
+          disabled: submitting,
+          sx: {
+            mt: 1
+          },
+          onCancel: handleCloseDialog,
+          onSave: handleSubmit
+        })
+      })]
+    })]
+  });
+}

package/lib/checkout-v2/components/shared/scenario-badge.d.ts

@@ -0,0 +1,6 @@
+interface ScenarioBadgeProps {
+    livemode: boolean;
+    label?: string;
+}
+export default function ScenarioBadge({ livemode, label }: ScenarioBadgeProps): import("react").JSX.Element;
+export {};