@djangocfg/ext-payments 1.0.14 → 1.0.19

package/src/components/WithdrawSheet.tsx

@@ -0,0 +1,355 @@
+/**
+ * Withdraw Sheet (Apple-style)
+ *
+ * Responsive: Dialog on desktop, Drawer on mobile
+ * Fetches real-time exchange rates and fees from API
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { RefreshCw, AlertCircle, Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+  useLocalStorage,
+} from '@djangocfg/ui-core';
+
+import { useWallet } from '../contexts/WalletContext';
+import { useWithdrawalEstimate, useCurrencyOptions, useDefaultCurrency, useAutoSave } from '../hooks';
+import { formatCryptoAmount, formatUsdAmount, extractErrorMessage } from '../utils';
+import { CurrencyCombobox } from './CurrencyCombobox';
+import type { WithdrawalDetail } from '../contexts/types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Schema
+// ─────────────────────────────────────────────────────────────────────────────
+
+const WithdrawSchema = z.object({
+  amount: z.number().min(10, 'Minimum $10'),
+  currency: z.string().min(1, 'Select a currency'),
+  wallet_address: z.string().min(26, 'Invalid wallet address'),
+});
+
+type WithdrawForm = z.infer<typeof WithdrawSchema>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface WithdrawSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: (withdrawal: WithdrawalDetail) => void;
+}
+
+// Storage
+const STORAGE_KEY = 'payments:withdraw';
+
+interface WithdrawSaved {
+  currency: string;
+  wallet: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetProps) {
+  const { currencies, isLoadingCurrencies, withdraw, balanceAmount } = useWallet();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Remember last used currency and wallet address
+  const [saved, setSaved] = useLocalStorage<WithdrawSaved>(STORAGE_KEY, {
+    currency: '',
+    wallet: '',
+  });
+
+  const form = useForm<WithdrawForm>({
+    resolver: zodResolver(WithdrawSchema),
+    defaultValues: {
+      amount: 10,
+      currency: saved.currency,
+      wallet_address: saved.wallet,
+    },
+  });
+
+  const watchedAmount = form.watch('amount');
+  const watchedCurrency = form.watch('currency');
+  const watchedWallet = form.watch('wallet_address');
+
+  // Auto-save to localStorage
+  useAutoSave(watchedCurrency, (v: string) => setSaved(prev => ({ ...prev, currency: v })));
+  useAutoSave(watchedWallet, (v: string) => setSaved(prev => ({ ...prev, wallet: v })), (v) => v.length >= 26);
+
+  // Currency options
+  const currencyOptions = useCurrencyOptions(currencies);
+
+  // Set default currency
+  useDefaultCurrency({
+    currencyOptions,
+    savedCurrency: saved.currency,
+    currentValue: watchedCurrency,
+    setValue: (v) => form.setValue('currency', v),
+  });
+
+  // Get selected currency for display
+  const selectedCurrency = currencyOptions.find(c => c.value === watchedCurrency);
+  const amount = watchedAmount || 0;
+
+  // Fetch withdrawal estimate with fees from API
+  const { estimate, isLoading: isLoadingEstimate } = useWithdrawalEstimate({
+    currencyCode: watchedCurrency,
+    amountUsd: amount,
+    minAmount: 10,
+    skip: amount < 10,
+  });
+
+  // Prepare crypto display data
+  const cryptoDisplay = useMemo(() => {
+    if (!selectedCurrency || !estimate) return null;
+
+    return {
+      token: selectedCurrency.token,
+      cryptoAmount: formatCryptoAmount(estimate.estimatedAmount, estimate.isStablecoin),
+    };
+  }, [selectedCurrency, estimate]);
+
+  // Check if user has enough balance
+  const insufficientBalance = amount > balanceAmount;
+
+  // Handle submit
+  const handleSubmit = useCallback(async (data: WithdrawForm) => {
+    try {
+      setIsSubmitting(true);
+      setError(null);
+
+      const result = await withdraw({
+        amount_usd: String(data.amount),
+        currency_code: data.currency,
+        wallet_address: data.wallet_address,
+      });
+
+      form.reset();
+      onOpenChange(false);
+      onSuccess?.(result);
+    } catch (err) {
+      setError(extractErrorMessage(err, 'Failed to create withdrawal request'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [withdraw, form, onOpenChange, onSuccess]);
+
+  // Reset on open/close
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      // Reset form with saved values on open
+      form.reset({
+        amount: 10,
+        currency: saved.currency,
+        wallet_address: saved.wallet,
+      });
+    } else {
+      setError(null);
+    }
+    onOpenChange(open);
+  }, [form, onOpenChange, saved]);
+
+  return (
+    <ResponsiveSheet open={open} onOpenChange={handleOpenChange}>
+      <ResponsiveSheetContent className="sm:max-w-md">
+        <ResponsiveSheetHeader>
+          <ResponsiveSheetTitle>Withdraw</ResponsiveSheetTitle>
+          <ResponsiveSheetDescription>
+            Withdraw funds to your cryptocurrency wallet
+          </ResponsiveSheetDescription>
+        </ResponsiveSheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 p-4 sm:p-0 sm:mt-4">
+            {/* Amount Input */}
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Amount (USD)</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground text-lg">
+                        $
+                      </span>
+                      <Input
+                        type="number"
+                        step="0.01"
+                        min="10"
+                        placeholder="10"
+                        className="pl-8 text-2xl h-14 font-semibold"
+                        {...field}
+                        onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                  {insufficientBalance && (
+                    <p className="text-sm text-destructive mt-1">
+                      Insufficient balance (Available: ${formatUsdAmount(balanceAmount)})
+                    </p>
+                  )}
+                </FormItem>
+              )}
+            />
+
+            {/* Currency Selection */}
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Withdraw as</FormLabel>
+                  <FormControl>
+                    <CurrencyCombobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onChange={field.onChange}
+                      disabled={isLoadingCurrencies}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Wallet Address */}
+            <FormField
+              control={form.control}
+              name="wallet_address"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wallet Address</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Enter your wallet address"
+                      className="font-mono text-sm"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Fee Breakdown */}
+            {amount >= 10 && selectedCurrency && (
+              <div className="bg-muted rounded-xl p-4 space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Amount</span>
+                  <span>${formatUsdAmount(amount)}</span>
+                </div>
+                {isLoadingEstimate ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground py-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span>Calculating fees...</span>
+                  </div>
+                ) : estimate ? (
+                  <>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        Service fee ({estimate.serviceFeePercent}%)
+                      </span>
+                      <span className="text-destructive">
+                        -${formatUsdAmount(estimate.serviceFeeUsd)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Network fee</span>
+                      <span className="text-destructive">
+                        -${formatUsdAmount(estimate.networkFeeUsd)}
+                      </span>
+                    </div>
+                    <div className="border-t pt-2 mt-2">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">You will receive</span>
+                        <div className="text-right">
+                          <div className="font-semibold">
+                            ${formatUsdAmount(estimate.amountToReceive)}
+                          </div>
+                          {cryptoDisplay && (
+                            <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                              <TokenIcon symbol={cryptoDisplay.token} size={16} />
+                              <span className="font-mono">
+                                {cryptoDisplay.cryptoAmount} {cryptoDisplay.token}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                ) : null}
+              </div>
+            )}
+
+            {/* Warning */}
+            <Alert>
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                Withdrawal requests require admin approval. Processing may take 24-48 hours.
+              </AlertDescription>
+            </Alert>
+
+            {/* Error */}
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              size="lg"
+              className="w-full h-14 text-lg rounded-xl"
+              disabled={
+                isSubmitting ||
+                currencyOptions.length === 0 ||
+                insufficientBalance ||
+                !estimate ||
+                estimate.amountToReceive <= 0 ||
+                isLoadingEstimate
+              }
+            >
+              {isSubmitting ? (
+                <>
+                  <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
+                  Submitting...
+                </>
+              ) : (
+                'Request Withdrawal'
+              )}
+            </Button>
+          </form>
+        </Form>
+      </ResponsiveSheetContent>
+    </ResponsiveSheet>
+  );
+}

package/src/components/WithdrawalSheet.tsx

@@ -0,0 +1,332 @@
+/**
+ * Withdrawal Details Sheet (Apple-style)
+ *
+ * Shows withdrawal request details and status
+ */
+
+'use client';
+
+import { useMemo } from 'react';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Clock,
+  ExternalLink,
+  RefreshCw,
+  XCircle,
+  Ban,
+} from 'lucide-react';
+import moment from 'moment';
+import useSWR from 'swr';
+
+import {
+  Button,
+  CopyButton,
+  Skeleton,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+} from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useWallet } from '../contexts/WalletContext';
+import type { WithdrawalDetail } from '../api/generated/ext_payments/_utils/schemas';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface WithdrawalSheetProps {
+  withdrawalId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Status Config
+// ─────────────────────────────────────────────────────────────────────────────
+
+const statusConfig: Record<string, { icon: any; color: string; bg: string; label: string; animate?: boolean }> = {
+  pending: {
+    icon: Clock,
+    color: 'text-yellow-500',
+    bg: 'bg-yellow-500/10',
+    label: 'Pending Approval',
+  },
+  approved: {
+    icon: CheckCircle2,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    label: 'Approved',
+  },
+  processing: {
+    icon: RefreshCw,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    label: 'Processing',
+    animate: true,
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bg: 'bg-green-500/10',
+    label: 'Completed',
+  },
+  rejected: {
+    icon: XCircle,
+    color: 'text-red-500',
+    bg: 'bg-red-500/10',
+    label: 'Rejected',
+  },
+  cancelled: {
+    icon: Ban,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted',
+    label: 'Cancelled',
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WithdrawalSheet({ withdrawalId, open, onOpenChange }: WithdrawalSheetProps) {
+  const { getWithdrawalDetails, cancelWithdrawal, refreshWallet } = useWallet();
+
+  // Fetch withdrawal details when sheet is open
+  const { data: withdrawal, isLoading, error, mutate } = useSWR<WithdrawalDetail>(
+    open && withdrawalId ? ['withdrawal-details', withdrawalId] : null,
+    () => getWithdrawalDetails(withdrawalId!),
+    { refreshInterval: 30000 }
+  );
+
+  // Prepare all display data before render
+  const displayData = useMemo(() => {
+    const s = withdrawal?.status?.toLowerCase() || 'pending';
+    const config = statusConfig[s] || statusConfig.pending;
+
+    const isPending = s === 'pending';
+    const isCompleted = s === 'completed';
+    const isRejected = s === 'rejected';
+    const isCancelled = s === 'cancelled';
+    const isProcessing = s === 'processing' || s === 'approved';
+    const canCancel = isPending;
+
+    // Description text
+    let description = '';
+    if (isPending) description = 'Waiting for admin approval';
+    else if (isProcessing) description = 'Your withdrawal is being processed';
+    else if (isCompleted) description = 'Withdrawal completed successfully';
+    else if (isRejected) description = 'Withdrawal was rejected';
+    else if (isCancelled) description = 'Withdrawal was cancelled';
+
+    // Formatted values
+    const amountUsd = withdrawal?.amount_usd ? `$${parseFloat(withdrawal.amount_usd).toFixed(2)}` : '';
+    const finalAmountUsd = withdrawal?.final_amount_usd ? `$${parseFloat(withdrawal.final_amount_usd).toFixed(2)}` : '';
+    const totalFeeUsd = withdrawal?.total_fee_usd ? `$${parseFloat(withdrawal.total_fee_usd).toFixed(2)}` : '';
+    const createdAt = withdrawal?.created_at
+      ? moment.utc(withdrawal.created_at).local().format('MMM D, YYYY HH:mm')
+      : '';
+    const completedAt = withdrawal?.completed_at
+      ? moment.utc(withdrawal.completed_at).local().format('MMM D, YYYY HH:mm')
+      : null;
+
+    return {
+      status: s,
+      config,
+      isPending,
+      isCompleted,
+      isRejected,
+      isCancelled,
+      isProcessing,
+      canCancel,
+      description,
+      amountUsd,
+      finalAmountUsd,
+      totalFeeUsd,
+      createdAt,
+      completedAt,
+    };
+  }, [withdrawal]);
+
+  const { config, canCancel, description, amountUsd, finalAmountUsd, totalFeeUsd, createdAt, completedAt } = displayData;
+  const StatusIcon = config.icon;
+
+  // Handle cancel
+  const handleCancel = async () => {
+    if (!withdrawalId) return;
+    try {
+      await cancelWithdrawal(withdrawalId);
+      await mutate();
+      await refreshWallet();
+    } catch (err) {
+      console.error('Failed to cancel withdrawal:', err);
+    }
+  };
+
+  return (
+    <ResponsiveSheet open={open} onOpenChange={onOpenChange}>
+      <ResponsiveSheetContent className="sm:max-w-lg">
+        <ResponsiveSheetHeader>
+          <ResponsiveSheetTitle>Withdrawal Details</ResponsiveSheetTitle>
+          <ResponsiveSheetDescription>{description}</ResponsiveSheetDescription>
+        </ResponsiveSheetHeader>
+
+        <div className="p-4 sm:p-0 sm:mt-4 overflow-y-auto max-h-[70vh]">
+          {isLoading && (
+            <div className="space-y-6">
+              <Skeleton className="h-16 w-full rounded-xl" />
+              <Skeleton className="h-24 w-full rounded-xl" />
+              <Skeleton className="h-20 w-full rounded-xl" />
+            </div>
+          )}
+
+          {error && (
+            <div className="flex flex-col items-center justify-center py-12">
+              <XCircle className="h-12 w-12 text-destructive mb-4" />
+              <p className="text-sm text-muted-foreground mb-4">Failed to load withdrawal</p>
+              <Button onClick={() => mutate()}>Try Again</Button>
+            </div>
+          )}
+
+          {withdrawal && !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="flex-1">
+                  <div className="font-semibold">{config.label}</div>
+                  {withdrawal.admin_notes && (
+                    <div className="text-sm text-muted-foreground">{withdrawal.admin_notes}</div>
+                  )}
+                </div>
+              </div>
+
+              {/* Amount Breakdown */}
+              <div className="bg-muted rounded-xl p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Amount</span>
+                  <span className="font-semibold">{amountUsd}</span>
+                </div>
+                {totalFeeUsd && (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Total fees</span>
+                    <span className="text-destructive">-{totalFeeUsd}</span>
+                  </div>
+                )}
+                <div className="flex items-center justify-between pt-2 border-t">
+                  <span className="text-muted-foreground">You receive</span>
+                  <div className="flex items-center gap-2">
+                    <TokenIcon symbol={withdrawal.currency_code} size={24} />
+                    <span className="font-mono font-bold text-lg">
+                      {finalAmountUsd}
+                    </span>
+                  </div>
+                </div>
+                {withdrawal.crypto_amount && (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Crypto amount</span>
+                    <span className="font-mono">{withdrawal.crypto_amount} {withdrawal.currency_token}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Wallet Address */}
+              {withdrawal.wallet_address && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Destination Wallet</label>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all">
+                      {withdrawal.wallet_address}
+                    </div>
+                    <CopyButton value={withdrawal.wallet_address} variant="outline" className="shrink-0" />
+                  </div>
+                </div>
+              )}
+
+              {/* Transaction Hash (if completed) */}
+              {withdrawal.transaction_hash && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Transaction Hash</label>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all">
+                      {withdrawal.transaction_hash}
+                    </div>
+                    <CopyButton value={withdrawal.transaction_hash} variant="outline" className="shrink-0" />
+                  </div>
+                </div>
+              )}
+
+              {/* Explorer Link */}
+              {withdrawal.explorer_link && (
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => window.open(withdrawal.explorer_link!, '_blank')}
+                >
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  View on Explorer
+                </Button>
+              )}
+
+              {/* Cancel Button */}
+              {canCancel && (
+                <Button
+                  variant="destructive"
+                  className="w-full"
+                  onClick={handleCancel}
+                >
+                  <Ban className="h-4 w-4 mr-2" />
+                  Cancel Withdrawal
+                </Button>
+              )}
+
+              {/* Metadata */}
+              <div className="space-y-2 text-xs text-muted-foreground pt-4 border-t">
+                <div className="flex justify-between">
+                  <span>Withdrawal ID</span>
+                  <span className="font-mono">{withdrawal.id}</span>
+                </div>
+                {withdrawal.internal_withdrawal_id && (
+                  <div className="flex justify-between">
+                    <span>Reference #</span>
+                    <span className="font-mono">{withdrawal.internal_withdrawal_id}</span>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <span>Created</span>
+                  <span>{createdAt}</span>
+                </div>
+                {completedAt && (
+                  <div className="flex justify-between">
+                    <span>Completed</span>
+                    <span>{completedAt}</span>
+                  </div>
+                )}
+                {withdrawal.currency_network && (
+                  <div className="flex justify-between">
+                    <span>Network</span>
+                    <span>{withdrawal.currency_network}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Refresh Button */}
+              <Button
+                variant="ghost"
+                className="w-full"
+                onClick={() => mutate()}
+              >
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh Status
+              </Button>
+            </div>
+          )}
+        </div>
+      </ResponsiveSheetContent>
+    </ResponsiveSheet>
+  );
+}