@blocklet/payment-react 1.24.3 → 1.25.0

package/es/components/auto-topup/modal.d.ts

@@ -1,4 +1,5 @@
 import type { AutoRechargeConfig } from '@blocklet/payment-types';
+import type { SlippageConfigValue } from '../slippage-config';
 export interface AutoTopupFormData {
     enabled: boolean;
     threshold: string;
@@ -21,6 +22,7 @@ export interface AutoTopupFormData {
         city?: string;
         postal_code?: string;
     };
+    slippage_config?: SlippageConfigValue | null;
 }
 export interface AutoTopupModalProps {
     open: boolean;

package/es/components/auto-topup/modal.js

@@ -54,7 +54,12 @@ const DEFAULT_VALUES = {
   recharge_currency_id: "",
   price_id: "",
   daily_max_amount: 0,
-  daily_max_attempts: 0
+  daily_max_attempts: 0,
+  slippage_config: null
+};
+const fetchExchangeRate = async (currencyId) => {
+  const { data } = await api.post("/api/exchange-rates/validate", { currency: currencyId });
+  return data;
 };
 export const waitForAutoRechargeComplete = async (configId) => {
   let result;
@@ -264,6 +269,8 @@ export default function AutoTopup({
   const { t, locale } = useLocaleContext();
   const { session, connect, settings } = usePaymentContext();
   const [changePaymentMethod, setChangePaymentMethod] = useState(false);
+  const [slippagePercent, setSlippagePercent] = useState(0.5);
+  const [slippageConfig, setSlippageConfig] = useState(null);
   const [state, setState] = useSetState({
     loading: false,
     submitting: false,
@@ -295,6 +302,10 @@ export default function AutoTopup({
   const enabled = watch("enabled");
   const quantity = watch("quantity");
   const rechargeCurrencyId = watch("recharge_currency_id");
+  const selectedMethod = settings.paymentMethods.find((method) => {
+    return method.payment_currencies.find((c) => c.id === rechargeCurrencyId);
+  });
+  const isStripePayment = selectedMethod?.type === "stripe";
   const handleClose = () => {
     setState({
       loading: false,
@@ -320,6 +331,22 @@ export default function AutoTopup({
         max_amount: data.daily_limits?.max_amount || 0,
         max_attempts: data.daily_limits?.max_attempts || 0
       });
+      if (data.slippage_config) {
+        setSlippageConfig(data.slippage_config);
+        setSlippagePercent(data.slippage_config.percent ?? 0.5);
+      }
+    }
+  });
+  const isDynamicPricing = config?.price?.pricing_type === "dynamic";
+  const { data: exchangeRateData } = useRequest(() => fetchExchangeRate(rechargeCurrencyId), {
+    refreshDeps: [rechargeCurrencyId],
+    ready: !!rechargeCurrencyId && isDynamicPricing && enabled && !isStripePayment,
+    pollingInterval: 3e4,
+    // Refresh every 30 seconds
+    pollingWhenHidden: false,
+    // Stop polling when tab is hidden
+    onError: (error) => {
+      console.warn("Failed to fetch exchange rate:", error.message);
     }
   });
   const filterCurrencies = useMemo(() => {
@@ -431,6 +458,12 @@ export default function AutoTopup({
         },
         change_payment_method: changePaymentMethod
       };
+      if (isDynamicPricing && slippageConfig) {
+        submitData.slippage_config = {
+          ...slippageConfig,
+          updated_at_ms: Date.now()
+        };
+      }
       const { data } = await api.post("/api/auto-recharge-configs/submit", submitData);
       if (data.balanceResult && !data.balanceResult.sufficient) {
         await handleAuthorizationRequired({
@@ -457,10 +490,7 @@ export default function AutoTopup({
     handleFormSubmit(formData);
   };
   const rechargeCurrency = filterCurrencies.find((c) => c.id === rechargeCurrencyId);
-  const selectedMethod = settings.paymentMethods.find((method) => {
-    return method.payment_currencies.find((c) => c.id === rechargeCurrencyId);
-  });
-  const showStripeForm = state.authorizationRequired && selectedMethod?.type === "stripe";
+  const showStripeForm = state.authorizationRequired && isStripePayment;
   const onStripeConfirm = async () => {
     await handleConnected();
   };
@@ -641,7 +671,19 @@ export default function AutoTopup({
                     quantity,
                     onQuantityChange: (newQuantity) => setValue("quantity", newQuantity),
                     maxQuantity: 9999,
-                    minQuantity: 1
+                    minQuantity: 1,
+                    exchangeRate: exchangeRateData?.rate,
+                    isDynamicPricing: isDynamicPricing && !isStripePayment,
+                    exchangeRateData,
+                    slippageConfig,
+                    slippagePercent,
+                    onSlippageChange: (newSlippageConfig) => {
+                      setSlippageConfig(newSlippageConfig);
+                      if (newSlippageConfig.percent !== void 0) {
+                        setSlippagePercent(newSlippageConfig.percent);
+                      }
+                    },
+                    disabled: state.submitting
                   }
                 ),
                 config && rechargeCurrency && /* @__PURE__ */ jsx(

package/es/components/auto-topup/product-card.d.ts

@@ -1,4 +1,12 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
+import type { SlippageConfigValue } from '../slippage-config';
+interface ExchangeRateData {
+    rate?: string;
+    provider_name?: string;
+    provider_id?: string;
+    provider_display?: string;
+    timestamp_ms?: number;
+}
 interface AutoTopupProductCardProps {
     product: any;
     price: any;
@@ -8,6 +16,13 @@ interface AutoTopupProductCardProps {
     maxQuantity?: number;
     minQuantity?: number;
     creditCurrency: TPaymentCurrency;
+    exchangeRate?: string | null;
+    isDynamicPricing?: boolean;
+    exchangeRateData?: ExchangeRateData | null;
+    slippageConfig?: SlippageConfigValue | null;
+    slippagePercent?: number;
+    onSlippageChange?: (config: SlippageConfigValue) => void;
+    disabled?: boolean;
 }
-export default function AutoTopupProductCard({ product, price, currency, quantity, onQuantityChange, maxQuantity, minQuantity, creditCurrency, }: AutoTopupProductCardProps): import("react").JSX.Element;
+export default function AutoTopupProductCard({ product, price, currency, quantity, onQuantityChange, maxQuantity, minQuantity, creditCurrency, exchangeRate, isDynamicPricing, exchangeRateData, slippageConfig, slippagePercent, onSlippageChange, disabled, }: AutoTopupProductCardProps): import("react").JSX.Element;
 export {};

package/es/components/auto-topup/product-card.js

@@ -1,9 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Typography, TextField, Card } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import ProductCard from "../../payment/product-card.js";
-import { formatPrice, formatNumber, formatCreditForCheckout } from "../../libs/util.js";
+import {
+  formatPrice,
+  formatNumber,
+  formatDynamicPrice,
+  formatUsdAmount,
+  formatExchangeRate,
+  formatToDatetime,
+  formatCreditForCheckout
+} from "../../libs/util.js";
+import QuoteDetailsPanel from "../quote-details-panel.js";
 export default function AutoTopupProductCard({
   product,
   price,
@@ -12,11 +21,41 @@ export default function AutoTopupProductCard({
   onQuantityChange,
   maxQuantity = 99,
   minQuantity = 1,
-  creditCurrency
+  creditCurrency,
+  exchangeRate = null,
+  isDynamicPricing = false,
+  exchangeRateData = null,
+  slippageConfig = null,
+  slippagePercent = 0.5,
+  onSlippageChange = void 0,
+  disabled = false
 }) {
   const { t, locale } = useLocaleContext();
   const [localQuantity, setLocalQuantity] = useState(quantity);
   const localQuantityNum = Number(localQuantity) || 0;
+  const { paymentAmount, usdReferenceDisplay } = useMemo(() => {
+    if (!isDynamicPricing || !exchangeRate || !price?.base_amount) {
+      return {
+        paymentAmount: formatPrice(price, currency, product?.unit_label, localQuantity, true),
+        usdReferenceDisplay: null
+      };
+    }
+    const baseAmount = Number(price.base_amount) * localQuantityNum;
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || !Number.isFinite(baseAmount)) {
+      return {
+        paymentAmount: formatPrice(price, currency, product?.unit_label, localQuantity, true),
+        usdReferenceDisplay: null
+      };
+    }
+    const tokenAmount = baseAmount / rate;
+    const formattedToken = formatDynamicPrice(tokenAmount, true, 6);
+    const formattedUsd = formatUsdAmount(baseAmount.toString(), locale);
+    return {
+      paymentAmount: `${formattedToken} ${currency.symbol}`,
+      usdReferenceDisplay: formattedUsd ? `\u2248 $${formattedUsd}` : null
+    };
+  }, [isDynamicPricing, exchangeRate, price, currency, product?.unit_label, localQuantity, localQuantityNum, locale]);
   const handleQuantityChange = (newQuantity) => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
@@ -141,7 +180,7 @@ export default function AutoTopupProductCard({
         direction: "row",
         sx: {
           justifyContent: "space-between",
-          alignItems: "center",
+          alignItems: "flex-start",
           mt: 2,
           pt: 2,
           borderTop: "1px solid",
@@ -158,17 +197,60 @@ export default function AutoTopupProductCard({
               children: t("payment.autoTopup.rechargeAmount")
             }
           ),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "h6",
-              sx: {
-                fontWeight: 600,
-                color: "text.primary"
-              },
-              children: formatPrice(price, currency, product?.unit_label, localQuantity, true)
-            }
-          )
+          /* @__PURE__ */ jsxs(Stack, { sx: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "h6",
+                sx: {
+                  fontWeight: 600,
+                  color: "text.primary"
+                },
+                children: paymentAmount
+              }
+            ),
+            usdReferenceDisplay && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: {
+                  fontSize: "0.7875rem",
+                  color: "text.lighter"
+                },
+                children: usdReferenceDisplay
+              }
+            ),
+            isDynamicPricing && exchangeRateData?.rate && /* @__PURE__ */ jsx(
+              QuoteDetailsPanel,
+              {
+                rateLine: t("payment.checkout.quote.rateLine", {
+                  symbol: currency.symbol,
+                  rate: `$${formatExchangeRate(exchangeRateData.rate) || exchangeRateData.rate}`
+                }),
+                rows: [
+                  {
+                    label: t("payment.checkout.quote.detailProvider"),
+                    value: exchangeRateData?.provider_display || exchangeRateData?.provider_name || "\u2014"
+                  },
+                  {
+                    label: t("payment.checkout.quote.detailUpdatedAt"),
+                    value: exchangeRateData?.timestamp_ms ? formatToDatetime(exchangeRateData.timestamp_ms, locale) : "\u2014"
+                  },
+                  {
+                    label: t("payment.checkout.quote.detailSlippage"),
+                    value: slippageConfig?.mode === "rate" && slippageConfig.min_acceptable_rate ? `$${formatExchangeRate(slippageConfig.min_acceptable_rate) || slippageConfig.min_acceptable_rate}` : `${slippageConfig?.percent ?? slippagePercent}%`,
+                    isSlippage: true
+                  }
+                ],
+                isSubscription: true,
+                slippageValue: slippageConfig?.percent ?? slippagePercent,
+                slippageConfig: slippageConfig || void 0,
+                onSlippageChange,
+                exchangeRate: exchangeRateData?.rate,
+                baseCurrency: "USD",
+                disabled
+              }
+            )
+          ] })
         ]
       }
     )

package/es/components/dynamic-pricing-unavailable.d.ts

@@ -0,0 +1,9 @@
+import { type SxProps } from '@mui/material';
+interface DynamicPricingUnavailableProps {
+    error?: string;
+    onRetry?: () => void | Promise<void>;
+    showRetry?: boolean;
+    sx?: SxProps;
+}
+export default function DynamicPricingUnavailable({ error, onRetry, showRetry, sx, }: DynamicPricingUnavailableProps): import("react").JSX.Element;
+export {};

package/es/components/dynamic-pricing-unavailable.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle, Typography, Button, Box, CircularProgress } from "@mui/material";
+import { ErrorOutline, Refresh } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useState } from "react";
+export default function DynamicPricingUnavailable({
+  error = void 0,
+  onRetry = void 0,
+  showRetry = true,
+  sx = void 0
+}) {
+  const { t } = useLocaleContext();
+  const [retrying, setRetrying] = useState(false);
+  if (error) {
+    console.error("[Dynamic Pricing Error]", error);
+  }
+  const handleRetry = async () => {
+    if (!onRetry || retrying) return;
+    setRetrying(true);
+    try {
+      await onRetry();
+    } finally {
+      setRetrying(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      severity: "warning",
+      icon: /* @__PURE__ */ jsx(ErrorOutline, {}),
+      sx: {
+        borderRadius: 2,
+        "& .MuiAlert-message": {
+          width: "100%"
+        },
+        ...sx
+      },
+      children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", width: "100%" }, children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { sx: { fontWeight: 600 }, children: t("payment.dynamicPricing.unavailable.title") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", mt: 0.5 }, children: t("payment.dynamicPricing.unavailable.message") })
+        ] }),
+        showRetry && onRetry && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "outlined",
+            onClick: handleRetry,
+            disabled: retrying,
+            startIcon: retrying ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(Refresh, {}),
+            sx: { ml: 2, flexShrink: 0 },
+            children: t("payment.dynamicPricing.unavailable.retry")
+          }
+        )
+      ] })
+    }
+  );
+}

package/es/components/loading-amount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * LoadingAmount Component
+ *
+ * Displays amount with skeleton loading state during currency switch.
+ * Only shows skeleton when isRateLoading is true (currency switch scenario).
+ */
+import type { SxProps, Theme } from '@mui/material';
+export interface LoadingAmountProps {
+    value: string;
+    loading?: boolean;
+    skeletonWidth?: number;
+    height?: number;
+    sx?: SxProps<Theme>;
+    animateValueChange?: boolean;
+    transitionDuration?: number;
+}
+export default function LoadingAmount({ value, loading, skeletonWidth, height, sx, animateValueChange, transitionDuration, }: LoadingAmountProps): import("react").JSX.Element;

package/es/components/loading-amount.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+export default function LoadingAmount({
+  value,
+  loading = false,
+  skeletonWidth = 80,
+  height = 24,
+  sx = {},
+  animateValueChange = false,
+  transitionDuration = 300
+}) {
+  const [displayValue, setDisplayValue] = useState(value);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const prevValueRef = useRef(value);
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      if (animateValueChange && !loading) {
+        setIsTransitioning(true);
+        const timer = setTimeout(() => {
+          setDisplayValue(value);
+          setIsTransitioning(false);
+        }, transitionDuration / 2);
+        return () => clearTimeout(timer);
+      }
+      setDisplayValue(value);
+    }
+    return void 0;
+  }, [value, loading, animateValueChange, transitionDuration]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height });
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      sx: {
+        ...sx,
+        opacity: isTransitioning ? 0 : 1,
+        transition: animateValueChange ? `opacity ${transitionDuration / 2}ms ease-in-out` : void 0
+      },
+      children: displayValue
+    }
+  );
+}

package/es/components/price-change-confirm.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Price Change Confirmation Dialog (Final Freeze Architecture)
+ *
+ * Displayed when the price changes between Preview and Submit
+ * beyond the user's configured slippage threshold.
+ *
+ * @see Intent: blocklets/core/ai/intent/20260112-dynamic-price.md
+ */
+export interface PriceChangeConfirmProps {
+    open: boolean;
+    previewRate?: string;
+    submitRate?: string;
+    changePercent: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loading?: boolean;
+}
+export default function PriceChangeConfirm({ open, previewRate, submitRate, changePercent, onConfirm, onCancel, loading, }: PriceChangeConfirmProps): import("react").JSX.Element;

package/es/components/price-change-confirm.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export default function PriceChangeConfirm({
+  open,
+  previewRate = void 0,
+  submitRate = void 0,
+  changePercent,
+  onConfirm,
+  onCancel,
+  loading = false
+}) {
+  const { t } = useLocaleContext();
+  const changeDirection = changePercent > 0 ? "increased" : "decreased";
+  const absChangePercent = Math.abs(changePercent);
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: loading ? void 0 : onCancel,
+      maxWidth: "sm",
+      fullWidth: true,
+      PaperProps: {
+        sx: {
+          borderRadius: 2
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          DialogTitle,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              pb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(WarningAmberIcon, { color: "warning" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", children: t("payment.checkout.priceChange.title", { fallback: "Price Changed" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("payment.checkout.priceChange.description", {
+            fallback: `The exchange rate has ${changeDirection} by ${absChangePercent.toFixed(2)}% since you started this checkout.`,
+            direction: changeDirection,
+            percent: absChangePercent.toFixed(2)
+          }) }),
+          (previewRate || submitRate) && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                bgcolor: "action.hover",
+                borderRadius: 1,
+                p: 2
+              },
+              children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+                previewRate && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                    t("payment.checkout.priceChange.previewRate", { fallback: "Preview Rate" }),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", fontFamily: "monospace", children: previewRate })
+                ] }),
+                submitRate && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                    t("payment.checkout.priceChange.currentRate", { fallback: "Current Rate" }),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", fontFamily: "monospace", children: submitRate })
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                    t("payment.checkout.priceChange.change", { fallback: "Change" }),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      variant: "body2",
+                      fontWeight: "bold",
+                      color: changePercent > 0 ? "error.main" : "success.main",
+                      children: [
+                        changePercent > 0 ? "+" : "",
+                        changePercent.toFixed(2),
+                        "%"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("payment.checkout.priceChange.confirm", {
+            fallback: "Do you want to continue with the new price?"
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
+          /* @__PURE__ */ jsx(Button, { onClick: onCancel, disabled: loading, variant: "outlined", color: "inherit", children: t("payment.checkout.priceChange.cancel", { fallback: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { onClick: onConfirm, disabled: loading, variant: "contained", color: "primary", autoFocus: true, children: loading ? t("payment.checkout.priceChange.confirming", { fallback: "Confirming..." }) : t("payment.checkout.priceChange.accept", { fallback: "Accept & Continue" }) })
+        ] })
+      ]
+    }
+  );
+}

package/es/components/quote-details-panel.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { SlippageConfigValue } from './slippage-config';
+type QuoteDetailRow = {
+    label: string;
+    value: ReactNode;
+    isSlippage?: boolean;
+    tooltip?: string;
+};
+type QuoteDetailsPanelProps = {
+    rateLine: string;
+    rows: QuoteDetailRow[];
+    isSubscription?: boolean;
+    slippageValue?: number;
+    onSlippageChange?: (value: SlippageConfigValue) => void | Promise<void>;
+    slippageConfig?: SlippageConfigValue;
+    exchangeRate?: string | null;
+    baseCurrency?: string;
+    disabled?: boolean;
+};
+export default function QuoteDetailsPanel({ rateLine, rows, isSubscription, slippageValue, onSlippageChange, slippageConfig, exchangeRate, baseCurrency, disabled, }: QuoteDetailsPanelProps): import("react").JSX.Element | null;
+export {};