@djangocfg/ext-payments 1.0.17 → 1.0.19

package/src/components/AddFundsSheet.tsx

@@ -2,12 +2,13 @@
  * Add Funds Sheet (Apple-style)
  *
  * Responsive: Dialog on desktop, Drawer on mobile
+ * Fetches real-time exchange rates on-demand
  */
 
 'use client';
 
 import { useState, useMemo, useCallback } from 'react';
-import { RefreshCw } from 'lucide-react';
+import { RefreshCw, Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -16,7 +17,6 @@ import {
   Alert,
   AlertDescription,
   Button,
-  Combobox,
   Form,
   FormControl,
   FormField,
@@ -30,17 +30,21 @@ import {
   ResponsiveSheetDescription,
   ResponsiveSheetHeader,
   ResponsiveSheetTitle,
+  useLocalStorage,
 } from '@djangocfg/ui-core';
 
 import { useWallet } from '../contexts/WalletContext';
-import type { PaymentDetail } from '../api/generated/ext_payments/_utils/schemas';
+import { useEstimate, useCurrencyOptions, useDefaultCurrency, useAutoSave } from '../hooks';
+import { formatUsdRate, formatCryptoAmount, formatUsdAmount, extractErrorMessage } from '../utils';
+import { CurrencyCombobox } from './CurrencyCombobox';
+import type { PaymentDetail } from '../contexts/types';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Schema
 // ─────────────────────────────────────────────────────────────────────────────
 
 const AddFundsSchema = z.object({
-  amount: z.number().min(1, 'Minimum $1.00'),
+  amount: z.number().min(1, 'Minimum $1'),
   currency: z.string().min(1, 'Select a currency'),
 });
 
@@ -60,44 +64,85 @@ interface AddFundsSheetProps {
 // Component
 // ─────────────────────────────────────────────────────────────────────────────
 
+// Storage
+const STORAGE_KEY = 'payments:addFunds';
+
+interface AddFundsSaved {
+  currency: string;
+  amount: number;
+}
+
 export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetProps) {
   const { currencies, isLoadingCurrencies, addFunds } = useWallet();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Remember last used currency and amount
+  const [saved, setSaved] = useLocalStorage<AddFundsSaved>(STORAGE_KEY, {
+    currency: '',
+    amount: 100,
+  });
+
   const form = useForm<AddFundsForm>({
     resolver: zodResolver(AddFundsSchema),
     defaultValues: {
-      amount: 100,
-      currency: '',
+      amount: saved.amount,
+      currency: saved.currency,
     },
   });
 
-  // Currency options for combobox
-  const currencyOptions = useMemo(() => {
-    return currencies.map((c) => ({
-      value: c.code,
-      label: c.network ? `${c.code} (${c.network})` : c.code,
-      rate: c.rate,
-      network: c.network,
-    }));
-  }, [currencies]);
-
-  // Set default currency when loaded
-  useMemo(() => {
-    if (currencyOptions.length > 0 && !form.getValues('currency')) {
-      const usdt = currencyOptions.find(c => c.value.includes('USDT'));
-      form.setValue('currency', usdt?.value || currencyOptions[0].value);
-    }
-  }, [currencyOptions, form]);
+  const watchedAmount = form.watch('amount');
+  const watchedCurrency = form.watch('currency');
+
+  // Auto-save to localStorage
+  useAutoSave(watchedAmount, (v: number) => setSaved(prev => ({ ...prev, amount: v })), (v) => v > 0);
+  useAutoSave(watchedCurrency, (v: string) => setSaved(prev => ({ ...prev, currency: v })));
+
+  // Currency options
+  const currencyOptions = useCurrencyOptions(currencies);
+
+  // Set default currency
+  useDefaultCurrency({
+    currencyOptions,
+    savedCurrency: saved.currency,
+    currentValue: watchedCurrency,
+    setValue: (v) => form.setValue('currency', v),
+  });
+
+  // Fetch estimate with debounce
+  const { estimate, isLoading: isLoadingEstimate } = useEstimate({
+    currencyCode: watchedCurrency,
+    amountUsd: watchedAmount,
+    minAmount: 1,
+  });
+
+  // Get selected currency for display
+  const selectedCurrency = currencyOptions.find(c => c.value === watchedCurrency);
+
+  // Prepare display data with fee breakdown
+  const displayData = useMemo(() => {
+    if (!selectedCurrency || !estimate) return null;
+
+    const token = selectedCurrency.token;
+    const cryptoAmount = formatCryptoAmount(estimate.estimatedAmount, estimate.isStablecoin);
+    const rate = formatUsdRate(estimate.usdRate);
+    const belowMinimum = estimate.minAmountUsd ? watchedAmount < estimate.minAmountUsd : false;
+    const minAmount = estimate.minAmountUsd ? formatUsdAmount(estimate.minAmountUsd) : undefined;
 
-  // Calculate crypto amount
-  const selectedCurrency = currencyOptions.find(c => c.value === form.watch('currency'));
-  const cryptoAmount = useMemo(() => {
-    const amount = form.watch('amount');
-    if (!selectedCurrency?.rate || !amount) return null;
-    return amount / selectedCurrency.rate;
-  }, [form.watch('amount'), selectedCurrency]);
+    return {
+      token,
+      cryptoAmount,
+      rate,
+      showRate: !estimate.isStablecoin && estimate.usdRate > 0,
+      belowMinimum,
+      minAmount,
+      // Fee breakdown from API
+      amountToReceive: estimate.amountToReceive,
+      serviceFeeUsd: estimate.serviceFeeUsd,
+      serviceFeePercent: estimate.serviceFeePercent,
+      totalToPayUsd: estimate.totalToPayUsd,
+    };
+  }, [selectedCurrency, estimate, watchedAmount]);
 
   // Handle submit
   const handleSubmit = useCallback(async (data: AddFundsForm) => {
@@ -113,25 +158,26 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
       form.reset();
       onOpenChange(false);
       onSuccess?.(result);
-    } catch (err: any) {
-      const message = err?.response?.data?.message
-        || err?.response?.data?.detail
-        || err?.message
-        || 'Failed to create payment';
-      setError(message);
+    } catch (err) {
+      setError(extractErrorMessage(err, 'Failed to create payment'));
     } finally {
       setIsSubmitting(false);
     }
   }, [addFunds, form, onOpenChange, onSuccess]);
 
-  // Reset on close
+  // Reset on open/close
   const handleOpenChange = useCallback((open: boolean) => {
-    if (!open) {
+    if (open) {
+      // Reset form with saved values on open
+      form.reset({
+        amount: saved.amount,
+        currency: saved.currency,
+      });
+    } else {
       setError(null);
-      form.reset();
     }
     onOpenChange(open);
-  }, [form, onOpenChange]);
+  }, [form, onOpenChange, saved]);
 
   return (
     <ResponsiveSheet open={open} onOpenChange={handleOpenChange}>
@@ -161,7 +207,7 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
                         type="number"
                         step="0.01"
                         min="1"
-                        placeholder="100.00"
+                        placeholder="100"
                         className="pl-8 text-2xl h-14 font-semibold"
                         {...field}
                         onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
@@ -181,26 +227,11 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
                 <FormItem>
                   <FormLabel>Pay with</FormLabel>
                   <FormControl>
-                    <Combobox
+                    <CurrencyCombobox
                       options={currencyOptions}
                       value={field.value}
-                      onValueChange={field.onChange}
-                      placeholder="Select currency..."
-                      searchPlaceholder="Search..."
+                      onChange={field.onChange}
                       disabled={isLoadingCurrencies}
-                      className="h-14"
-                      renderOption={(option) => (
-                        <div className="flex items-center gap-3 flex-1">
-                          <TokenIcon symbol={option.value} size={24} />
-                          <span className="font-medium">{option.label}</span>
-                        </div>
-                      )}
-                      renderValue={(option) => option && (
-                        <div className="flex items-center gap-3">
-                          <TokenIcon symbol={option.value} size={24} />
-                          <span className="font-medium">{option.label}</span>
-                        </div>
-                      )}
                     />
                   </FormControl>
                   <FormMessage />
@@ -208,22 +239,70 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
               )}
             />
 
-            {/* Conversion Preview */}
-            {cryptoAmount !== null && selectedCurrency && (
+            {/* Payment Breakdown */}
+            {selectedCurrency && watchedAmount >= 1 && (
               <div className="bg-muted rounded-xl p-4 space-y-2">
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">You will send</span>
-                  <div className="flex items-center gap-2">
-                    <TokenIcon symbol={selectedCurrency.value} size={20} />
-                    <span className="font-mono font-semibold">
-                      {cryptoAmount.toFixed(8)} {selectedCurrency.value}
-                    </span>
+                {isLoadingEstimate ? (
+                  <div className="flex items-center justify-center py-2">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    <span className="ml-2 text-sm text-muted-foreground">Getting rate...</span>
+                  </div>
+                ) : displayData ? (
+                  <>
+                    {/* Amount breakdown */}
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Amount</span>
+                      <span>${formatUsdAmount(displayData.amountToReceive)}</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Service fee ({displayData.serviceFeePercent}%)</span>
+                      <span>+${formatUsdAmount(displayData.serviceFeeUsd)}</span>
+                    </div>
+
+                    {/* Rate (for non-stablecoins) */}
+                    {displayData.showRate && (
+                      <div className="flex items-center justify-between text-sm text-muted-foreground">
+                        <span>Rate</span>
+                        <span>1 {displayData.token} = ${displayData.rate}</span>
+                      </div>
+                    )}
+
+                    {/* You will send */}
+                    <div className="border-t pt-2 mt-2">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">You will send</span>
+                        <div className="text-right">
+                          <div className="flex items-center gap-2 justify-end">
+                            <TokenIcon symbol={displayData.token} size={20} />
+                            <span className="font-mono font-semibold text-lg">
+                              {displayData.cryptoAmount} {displayData.token}
+                            </span>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            ~${formatUsdAmount(displayData.totalToPayUsd)}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* You will receive */}
+                    <div className="flex items-center justify-between text-sm pt-2">
+                      <span className="text-muted-foreground">You will receive</span>
+                      <span className="font-medium">${formatUsdAmount(displayData.amountToReceive)}</span>
+                    </div>
+
+                    {/* Minimum warning */}
+                    {displayData.belowMinimum && displayData.minAmount && (
+                      <div className="text-sm text-destructive mt-2 pt-2 border-t border-destructive/20">
+                        Minimum amount: ${displayData.minAmount}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-center text-sm text-muted-foreground py-2">
+                    Enter amount to see conversion
                   </div>
-                </div>
-                <div className="flex items-center justify-between text-sm text-muted-foreground">
-                  <span>Rate</span>
-                  <span>1 {selectedCurrency.value} = ${selectedCurrency.rate.toFixed(2)}</span>
-                </div>
+                )}
               </div>
             )}
 
@@ -239,7 +318,12 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
               type="submit"
               size="lg"
               className="w-full h-14 text-lg rounded-xl"
-              disabled={isSubmitting || currencyOptions.length === 0}
+              disabled={
+                isSubmitting ||
+                currencyOptions.length === 0 ||
+                isLoadingEstimate ||
+                displayData?.belowMinimum
+              }
             >
               {isSubmitting ? (
                 <>

package/src/components/CurrencyCombobox.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+/**
+ * Currency Combobox with TokenIcon
+ */
+
+import { Combobox, TokenIcon } from '@djangocfg/ui-core';
+import type { CurrencyOption } from '../types';
+
+interface CurrencyComboboxProps {
+  options: CurrencyOption[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  label?: string;
+}
+
+export function CurrencyCombobox({
+  options,
+  value,
+  onChange,
+  disabled,
+  placeholder = 'Select currency...',
+}: CurrencyComboboxProps) {
+  return (
+    <Combobox
+      options={options}
+      value={value}
+      onValueChange={onChange}
+      placeholder={placeholder}
+      searchPlaceholder="Search..."
+      disabled={disabled}
+      className="h-14"
+      renderOption={(option) => (
+        <div className="flex items-center gap-3 flex-1">
+          <TokenIcon symbol={option.value} size={24} />
+          <span className="font-medium">{option.label}</span>
+        </div>
+      )}
+      renderValue={(option) => option && (
+        <div className="flex items-center gap-3">
+          <TokenIcon symbol={option.value} size={24} />
+          <span className="font-medium">{option.label}</span>
+        </div>
+      )}
+    />
+  );
+}

package/src/components/PaymentSheet.tsx

@@ -43,6 +43,7 @@ interface PaymentSheetProps {
   paymentId: string | null;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  onCreateNew?: () => void;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -87,7 +88,7 @@ const statusConfig: Record<string, { icon: any; color: string; bg: string; label
 // Component
 // ─────────────────────────────────────────────────────────────────────────────
 
-export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProps) {
+export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: PaymentSheetProps) {
   const { getPaymentDetails } = useWallet();
   const [timeLeft, setTimeLeft] = useState<string>('');
 
@@ -125,34 +126,83 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
     return () => clearInterval(interval);
   }, [payment?.expires_at]);
 
-  // Map status
-  const status = useMemo(() => {
+  // Prepare all display data before render
+  const displayData = useMemo(() => {
+    // Map status
     const s = payment?.status?.toLowerCase();
-    if (s === 'completed' || s === 'success' || s === 'finished') return 'completed';
-    if (s === 'confirming' || s === 'partially_paid') return 'confirming';
-    if (s === 'expired') return 'expired';
-    if (s === 'failed' || s === 'error' || s === 'cancelled') return 'failed';
-    return 'pending';
-  }, [payment?.status]);
-
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
+    let status: string;
+    if (s === 'completed' || s === 'success' || s === 'finished') status = 'completed';
+    else if (s === 'confirming' || s === 'partially_paid') status = 'confirming';
+    else if (s === 'expired') status = 'expired';
+    else if (s === 'failed' || s === 'error' || s === 'cancelled') status = 'failed';
+    else status = 'pending';
+
+    const config = statusConfig[status];
+    const isPending = status === 'pending';
+    const isExpired = status === 'expired' || timeLeft === 'Expired';
+    const isCompleted = status === 'completed';
+    const isFailed = status === 'failed';
+    const isConfirming = status === 'confirming';
+    const canPay = isPending && !isExpired;
+
+    // Description text
+    let description = '';
+    if (canPay) description = 'Send cryptocurrency to complete payment';
+    else if (isExpired) description = 'This payment has expired';
+    else if (isCompleted) description = 'Payment completed successfully';
+    else if (isFailed) description = 'Payment failed';
+    else if (isConfirming) description = 'Confirming your payment';
+
+    // Status badge
+    const statusBadge = {
+      bg: isExpired ? 'bg-muted' : config.bg,
+      iconColor: isExpired ? 'text-muted-foreground' : config.color,
+      iconAnimate: config.animate,
+      label: isExpired ? 'Payment Expired' : config.label,
+      subtitle: canPay && timeLeft
+        ? `Expires in ${timeLeft}`
+        : isExpired
+          ? 'Please create a new payment to continue'
+          : null,
+    };
 
-  // QR code URL
-  const qrCodeUrl = payment?.pay_address
-    ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
-    : null;
+    // QR code URL
+    const qrCodeUrl = payment?.pay_address && canPay
+      ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
+      : null;
+
+    // Formatted values
+    const amountUsd = payment?.amount_usd ? `$${parseFloat(payment.amount_usd).toFixed(2)} USD` : '';
+    const createdAt = payment?.created_at
+      ? moment.utc(payment.created_at).local().format('MMM D, YYYY HH:mm')
+      : '';
+
+    return {
+      status,
+      config,
+      isPending,
+      isExpired,
+      isCompleted,
+      isFailed,
+      isConfirming,
+      canPay,
+      description,
+      statusBadge,
+      qrCodeUrl,
+      amountUsd,
+      createdAt,
+    };
+  }, [payment, timeLeft]);
 
-  const isPending = status === 'pending';
+  const { config, canPay, isExpired, description, statusBadge, qrCodeUrl, amountUsd, createdAt } = displayData;
+  const StatusIcon = config.icon;
 
   return (
     <ResponsiveSheet open={open} onOpenChange={onOpenChange}>
       <ResponsiveSheetContent className="sm:max-w-lg">
         <ResponsiveSheetHeader>
           <ResponsiveSheetTitle>Payment Details</ResponsiveSheetTitle>
-          <ResponsiveSheetDescription>
-            {isPending ? 'Send cryptocurrency to complete payment' : 'Payment information'}
-          </ResponsiveSheetDescription>
+          <ResponsiveSheetDescription>{description}</ResponsiveSheetDescription>
         </ResponsiveSheetHeader>
 
         <div className="p-4 sm:p-0 sm:mt-4 overflow-y-auto max-h-[70vh]">
@@ -177,14 +227,12 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
           {payment && !isLoading && (
             <div className="space-y-6">
               {/* Status Badge */}
-              <div className={cn('flex items-center gap-3 p-4 rounded-xl', config.bg)}>
-                <StatusIcon className={cn('h-6 w-6', config.color, config.animate && 'animate-spin')} />
+              <div className={cn('flex items-center gap-3 p-4 rounded-xl', statusBadge.bg)}>
+                <StatusIcon className={cn('h-6 w-6', statusBadge.iconColor, statusBadge.iconAnimate && 'animate-spin')} />
                 <div className="flex-1">
-                  <div className="font-semibold">{config.label}</div>
-                  {isPending && timeLeft && (
-                    <div className="text-sm text-muted-foreground">
-                      Expires in {timeLeft}
-                    </div>
+                  <div className="font-semibold">{statusBadge.label}</div>
+                  {statusBadge.subtitle && (
+                    <div className="text-sm text-muted-foreground">{statusBadge.subtitle}</div>
                   )}
                 </div>
               </div>
@@ -202,7 +250,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
                 </div>
                 <div className="flex items-center justify-between text-sm">
                   <span className="text-muted-foreground">Equivalent</span>
-                  <span className="font-semibold">${parseFloat(payment.amount_usd).toFixed(2)} USD</span>
+                  <span className="font-semibold">{amountUsd}</span>
                 </div>
                 {payment.currency_network && (
                   <div className="flex items-center justify-between text-sm pt-2 border-t">
@@ -213,14 +261,14 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
               </div>
 
               {/* QR Code */}
-              {qrCodeUrl && isPending && (
+              {qrCodeUrl && (
                 <div className="flex justify-center p-6 bg-white rounded-xl">
                   <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
                 </div>
               )}
 
               {/* Payment Address */}
-              {payment.pay_address && isPending && (
+              {payment.pay_address && canPay && (
                 <div className="space-y-2">
                   <label className="text-sm font-medium">Payment Address</label>
                   <div className="flex items-center gap-2">
@@ -232,6 +280,20 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
                 </div>
               )}
 
+              {/* Expired - Create New Payment */}
+              {isExpired && onCreateNew && (
+                <Button
+                  size="lg"
+                  className="w-full"
+                  onClick={() => {
+                    onOpenChange(false);
+                    onCreateNew();
+                  }}
+                >
+                  Create New Payment
+                </Button>
+              )}
+
               {/* Transaction Hash (if completed) */}
               {payment.transaction_hash && (
                 <div className="space-y-2">
@@ -243,7 +305,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
               )}
 
               {/* External Link */}
-              {payment.payment_url && isPending && (
+              {payment.payment_url && canPay && (
                 <Button
                   variant="outline"
                   className="w-full"
@@ -268,7 +330,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange }: PaymentSheetProp
                 )}
                 <div className="flex justify-between">
                   <span>Created</span>
-                  <span>{moment.utc(payment.created_at).local().format('MMM D, YYYY HH:mm')}</span>
+                  <span>{createdAt}</span>
                 </div>
               </div>