@blocklet/payment-react 1.24.3 → 1.25.0

package/src/components/auto-topup/modal.tsx

@@ -38,6 +38,7 @@ import FormInput from '../input';
 import StripeCheckout from '../../payment/form/stripe';
 import AutoTopupProductCard from './product-card';
 import FormLabel from '../label';
+import type { SlippageConfigValue } from '../slippage-config';
 
 export interface AutoTopupFormData {
   enabled: boolean;
@@ -61,6 +62,7 @@ export interface AutoTopupFormData {
     city?: string;
     postal_code?: string;
   };
+  slippage_config?: SlippageConfigValue | null;
 }
 
 export interface AutoTopupModalProps {
@@ -96,6 +98,12 @@ const DEFAULT_VALUES = {
   price_id: '',
   daily_max_amount: 0,
   daily_max_attempts: 0,
+  slippage_config: null as SlippageConfigValue | null,
+};
+
+const fetchExchangeRate = async (currencyId: string) => {
+  const { data } = await api.post('/api/exchange-rates/validate', { currency: currencyId });
+  return data;
 };
 
 export const waitForAutoRechargeComplete = async (configId: string) => {
@@ -298,6 +306,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<SlippageConfigValue | null>(null);
   const [state, setState] = useSetState({
     loading: false,
     submitting: false,
@@ -333,6 +343,12 @@ export default function AutoTopup({
   const quantity = watch('quantity') as number;
   const rechargeCurrencyId = watch('recharge_currency_id');
 
+  // Determine payment method type early for exchange rate fetching logic
+  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,
@@ -359,6 +375,27 @@ export default function AutoTopup({
         max_amount: data.daily_limits?.max_amount || 0,
         max_attempts: data.daily_limits?.max_attempts || 0,
       });
+      // Set slippage config from existing data
+      if (data.slippage_config) {
+        setSlippageConfig(data.slippage_config);
+        setSlippagePercent(data.slippage_config.percent ?? 0.5);
+      }
+    },
+  });
+
+  // Check if price is dynamic pricing
+  const isDynamicPricing = config?.price?.pricing_type === 'dynamic';
+
+  // Fetch exchange rate for dynamic pricing with auto-refresh every 30 seconds
+  // Skip for Stripe payments as they use USD directly
+  const { data: exchangeRateData } = useRequest(() => fetchExchangeRate(rechargeCurrencyId), {
+    refreshDeps: [rechargeCurrencyId],
+    ready: !!rechargeCurrencyId && isDynamicPricing && enabled && !isStripePayment,
+    pollingInterval: 30000, // Refresh every 30 seconds
+    pollingWhenHidden: false, // Stop polling when tab is hidden
+    onError: (error: any) => {
+      // Silently handle error - exchange rate is optional for display
+      console.warn('Failed to fetch exchange rate:', error.message);
     },
   });
 
@@ -469,7 +506,7 @@ export default function AutoTopup({
     setState({ submitting: true });
 
     try {
-      const submitData = {
+      const submitData: Record<string, any> = {
         customer_id: session?.user?.did,
         enabled: formData.enabled,
         threshold: formData.threshold,
@@ -484,6 +521,14 @@ export default function AutoTopup({
         change_payment_method: changePaymentMethod,
       };
 
+      // Include slippage_config for dynamic pricing
+      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) {
@@ -514,11 +559,7 @@ export default function AutoTopup({
   };
 
   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();
@@ -679,6 +720,18 @@ export default function AutoTopup({
                         onQuantityChange={(newQuantity) => setValue('quantity', newQuantity)}
                         maxQuantity={9999}
                         minQuantity={1}
+                        exchangeRate={exchangeRateData?.rate}
+                        isDynamicPricing={isDynamicPricing && !isStripePayment}
+                        exchangeRateData={exchangeRateData}
+                        slippageConfig={slippageConfig}
+                        slippagePercent={slippagePercent}
+                        onSlippageChange={(newSlippageConfig) => {
+                          setSlippageConfig(newSlippageConfig);
+                          if (newSlippageConfig.percent !== undefined) {
+                            setSlippagePercent(newSlippageConfig.percent);
+                          }
+                        }}
+                        disabled={state.submitting}
                       />
                     )}
 

package/src/components/auto-topup/product-card.tsx

@@ -1,10 +1,28 @@
 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 type { TPaymentCurrency } from '@blocklet/payment-types';
 import ProductCard from '../../payment/product-card';
-import { formatPrice, formatNumber, formatCreditForCheckout } from '../../libs/util';
+import {
+  formatPrice,
+  formatNumber,
+  formatDynamicPrice,
+  formatUsdAmount,
+  formatExchangeRate,
+  formatToDatetime,
+  formatCreditForCheckout,
+} from '../../libs/util';
+import QuoteDetailsPanel from '../quote-details-panel';
+import type { SlippageConfigValue } from '../slippage-config';
+
+interface ExchangeRateData {
+  rate?: string;
+  provider_name?: string;
+  provider_id?: string;
+  provider_display?: string; // Human-readable: "CoinGecko" or "CoinGecko (2 sources)"
+  timestamp_ms?: number;
+}
 
 interface AutoTopupProductCardProps {
   product: any;
@@ -15,6 +33,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({
@@ -26,11 +51,48 @@ export default function AutoTopupProductCard({
   maxQuantity = 99,
   minQuantity = 1,
   creditCurrency,
+  exchangeRate = null,
+  isDynamicPricing = false,
+  exchangeRateData = null,
+  slippageConfig = null,
+  slippagePercent = 0.5,
+  onSlippageChange = undefined,
+  disabled = false,
 }: AutoTopupProductCardProps) {
   const { t, locale } = useLocaleContext();
   const [localQuantity, setLocalQuantity] = useState<number | undefined>(quantity);
   const localQuantityNum = Number(localQuantity) || 0;
 
+  // Calculate payment amount for dynamic pricing
+  const { paymentAmount, usdReferenceDisplay } = useMemo(() => {
+    if (!isDynamicPricing || !exchangeRate || !price?.base_amount) {
+      // Fixed pricing: use existing formatPrice
+      return {
+        paymentAmount: formatPrice(price, currency, product?.unit_label, localQuantity, true),
+        usdReferenceDisplay: null,
+      };
+    }
+
+    // Dynamic pricing: calculate token amount from base_amount / exchange_rate
+    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 ? `≈ $${formattedUsd}` : null,
+    };
+  }, [isDynamicPricing, exchangeRate, price, currency, product?.unit_label, localQuantity, localQuantityNum, locale]);
+
   const handleQuantityChange = (newQuantity: number) => {
     if (!newQuantity) {
       setLocalQuantity(undefined);
@@ -132,7 +194,7 @@ export default function AutoTopupProductCard({
         direction="row"
         sx={{
           justifyContent: 'space-between',
-          alignItems: 'center',
+          alignItems: 'flex-start',
           mt: 2,
           pt: 2,
           borderTop: '1px solid',
@@ -145,14 +207,59 @@ export default function AutoTopupProductCard({
           }}>
           {t('payment.autoTopup.rechargeAmount')}
         </Typography>
-        <Typography
-          variant="h6"
-          sx={{
-            fontWeight: 600,
-            color: 'text.primary',
-          }}>
-          {formatPrice(price, currency, product?.unit_label, localQuantity, true)}
-        </Typography>
+        <Stack sx={{ alignItems: 'flex-end' }}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 600,
+              color: 'text.primary',
+            }}>
+            {paymentAmount}
+          </Typography>
+          {usdReferenceDisplay && (
+            <Typography
+              sx={{
+                fontSize: '0.7875rem',
+                color: 'text.lighter',
+              }}>
+              {usdReferenceDisplay}
+            </Typography>
+          )}
+          {/* Dynamic Pricing - Exchange Rate Panel */}
+          {isDynamicPricing && exchangeRateData?.rate && (
+            <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 || '—',
+                },
+                {
+                  label: t('payment.checkout.quote.detailUpdatedAt'),
+                  value: exchangeRateData?.timestamp_ms ? formatToDatetime(exchangeRateData.timestamp_ms, locale) : '—',
+                },
+                {
+                  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
+              slippageValue={slippageConfig?.percent ?? slippagePercent}
+              slippageConfig={slippageConfig || undefined}
+              onSlippageChange={onSlippageChange}
+              exchangeRate={exchangeRateData?.rate}
+              baseCurrency="USD"
+              disabled={disabled}
+            />
+          )}
+        </Stack>
       </Stack>
     </Card>
   );

package/src/components/dynamic-pricing-unavailable.tsx

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

package/src/components/loading-amount.tsx

@@ -0,0 +1,66 @@
+/**
+ * LoadingAmount Component
+ *
+ * Displays amount with skeleton loading state during currency switch.
+ * Only shows skeleton when isRateLoading is true (currency switch scenario).
+ */
+
+import { Skeleton, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+
+export interface LoadingAmountProps {
+  value: string;
+  loading?: boolean;
+  skeletonWidth?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  animateValueChange?: boolean;
+  transitionDuration?: number;
+}
+
+export default function LoadingAmount({
+  value,
+  loading = false,
+  skeletonWidth = 80,
+  height = 24,
+  sx = {},
+  animateValueChange = false,
+  transitionDuration = 300,
+}: LoadingAmountProps) {
+  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 undefined;
+  }, [value, loading, animateValueChange, transitionDuration]);
+
+  if (loading) {
+    return <Skeleton variant="text" width={skeletonWidth} height={height} />;
+  }
+
+  return (
+    <Typography
+      component="span"
+      sx={{
+        ...sx,
+        opacity: isTransitioning ? 0 : 1,
+        transition: animateValueChange ? `opacity ${transitionDuration / 2}ms ease-in-out` : undefined,
+      }}>
+      {displayValue}
+    </Typography>
+  );
+}

package/src/components/price-change-confirm.tsx

@@ -0,0 +1,136 @@
+/**
+ * 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
+ */
+
+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 interface PriceChangeConfirmProps {
+  open: boolean;
+  previewRate?: string;
+  submitRate?: string;
+  changePercent: number;
+  onConfirm: () => void;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+export default function PriceChangeConfirm({
+  open,
+  previewRate = undefined,
+  submitRate = undefined,
+  changePercent,
+  onConfirm,
+  onCancel,
+  loading = false,
+}: PriceChangeConfirmProps) {
+  const { t } = useLocaleContext();
+
+  const changeDirection = changePercent > 0 ? 'increased' : 'decreased';
+  const absChangePercent = Math.abs(changePercent);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={loading ? undefined : onCancel}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          borderRadius: 2,
+        },
+      }}>
+      <DialogTitle
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          pb: 1,
+        }}>
+        <WarningAmberIcon color="warning" />
+        <Typography variant="h6" component="span">
+          {t('payment.checkout.priceChange.title', { fallback: 'Price Changed' })}
+        </Typography>
+      </DialogTitle>
+
+      <DialogContent>
+        <Stack spacing={2}>
+          <Typography variant="body1" color="text.secondary">
+            {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),
+            })}
+          </Typography>
+
+          {(previewRate || submitRate) && (
+            <Box
+              sx={{
+                bgcolor: 'action.hover',
+                borderRadius: 1,
+                p: 2,
+              }}>
+              <Stack spacing={1}>
+                {previewRate && (
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography variant="body2" color="text.secondary">
+                      {t('payment.checkout.priceChange.previewRate', { fallback: 'Preview Rate' })}:
+                    </Typography>
+                    <Typography variant="body2" fontFamily="monospace">
+                      {previewRate}
+                    </Typography>
+                  </Box>
+                )}
+                {submitRate && (
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography variant="body2" color="text.secondary">
+                      {t('payment.checkout.priceChange.currentRate', { fallback: 'Current Rate' })}:
+                    </Typography>
+                    <Typography variant="body2" fontFamily="monospace">
+                      {submitRate}
+                    </Typography>
+                  </Box>
+                )}
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    {t('payment.checkout.priceChange.change', { fallback: 'Change' })}:
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    fontWeight="bold"
+                    color={changePercent > 0 ? 'error.main' : 'success.main'}>
+                    {changePercent > 0 ? '+' : ''}
+                    {changePercent.toFixed(2)}%
+                  </Typography>
+                </Box>
+              </Stack>
+            </Box>
+          )}
+
+          <Typography variant="body2" color="text.secondary">
+            {t('payment.checkout.priceChange.confirm', {
+              fallback: 'Do you want to continue with the new price?',
+            })}
+          </Typography>
+        </Stack>
+      </DialogContent>
+
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button onClick={onCancel} disabled={loading} variant="outlined" color="inherit">
+          {t('payment.checkout.priceChange.cancel', { fallback: 'Cancel' })}
+        </Button>
+        <Button onClick={onConfirm} disabled={loading} variant="contained" color="primary" autoFocus>
+          {loading
+            ? t('payment.checkout.priceChange.confirming', { fallback: 'Confirming...' })
+            : t('payment.checkout.priceChange.accept', { fallback: 'Accept & Continue' })}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}