@djangocfg/ext-payments 1.0.13 → 1.0.17

package/src/components/WithdrawSheet.tsx

@@ -0,0 +1,329 @@
+/**
+ * Withdraw Sheet (Apple-style)
+ *
+ * Responsive: Dialog on desktop, Drawer on mobile
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { RefreshCw, AlertCircle } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Combobox,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+} from '@djangocfg/ui-core';
+
+import { useWallet } from '../contexts/WalletContext';
+import type { WithdrawalDetail } from '../api/generated/ext_payments/_utils/schemas';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Schema
+// ─────────────────────────────────────────────────────────────────────────────
+
+const WithdrawSchema = z.object({
+  amount: z.number().min(10, 'Minimum $10.00'),
+  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;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Fee Config
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SERVICE_FEE_PERCENT = 0.01; // 1%
+const NETWORK_FEE_USD = 1.00; // $1
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 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);
+
+  const form = useForm<WithdrawForm>({
+    resolver: zodResolver(WithdrawSchema),
+    defaultValues: {
+      amount: 10,
+      currency: '',
+      wallet_address: '',
+    },
+  });
+
+  // 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]);
+
+  // Calculate fees and final amount
+  const selectedCurrency = currencyOptions.find(c => c.value === form.watch('currency'));
+  const amount = form.watch('amount') || 0;
+
+  const feeBreakdown = useMemo(() => {
+    const serviceFee = amount * SERVICE_FEE_PERCENT;
+    const networkFee = NETWORK_FEE_USD;
+    const totalFee = serviceFee + networkFee;
+    const finalAmount = Math.max(0, amount - totalFee);
+    const cryptoAmount = selectedCurrency?.rate ? finalAmount / selectedCurrency.rate : null;
+
+    return {
+      serviceFee,
+      networkFee,
+      totalFee,
+      finalAmount,
+      cryptoAmount,
+    };
+  }, [amount, selectedCurrency]);
+
+  // 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: any) {
+      const message = err?.response?.data?.error
+        || err?.response?.data?.message
+        || err?.response?.data?.detail
+        || err?.message
+        || 'Failed to create withdrawal request';
+      setError(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [withdraw, form, onOpenChange, onSuccess]);
+
+  // Reset on close
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setError(null);
+      form.reset();
+    }
+    onOpenChange(open);
+  }, [form, onOpenChange]);
+
+  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.00"
+                        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: ${balanceAmount.toFixed(2)})
+                    </p>
+                  )}
+                </FormItem>
+              )}
+            />
+
+            {/* Currency Selection */}
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Withdraw as</FormLabel>
+                  <FormControl>
+                    <Combobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      placeholder="Select currency..."
+                      searchPlaceholder="Search..."
+                      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 />
+                </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>${amount.toFixed(2)}</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Service fee (1%)</span>
+                  <span className="text-destructive">-${feeBreakdown.serviceFee.toFixed(2)}</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Network fee</span>
+                  <span className="text-destructive">-${feeBreakdown.networkFee.toFixed(2)}</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">${feeBreakdown.finalAmount.toFixed(2)}</div>
+                      {feeBreakdown.cryptoAmount !== null && (
+                        <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                          <TokenIcon symbol={selectedCurrency.value} size={16} />
+                          <span className="font-mono">{feeBreakdown.cryptoAmount.toFixed(8)}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </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 || feeBreakdown.finalAmount <= 0}
+            >
+              {isSubmitting ? (
+                <>
+                  <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
+                  Submitting...
+                </>
+              ) : (
+                'Request Withdrawal'
+              )}
+            </Button>
+          </form>
+        </Form>
+      </ResponsiveSheetContent>
+    </ResponsiveSheet>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Wallet Components (Apple-style)
+ */
+
+export { BalanceHero } from './BalanceHero';
+export { ActivityList } from './ActivityList';
+export { ActivityItem } from './ActivityItem';
+export { AddFundsSheet } from './AddFundsSheet';
+export { WithdrawSheet } from './WithdrawSheet';
+export { PaymentSheet } from './PaymentSheet';
+export {
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+  ResponsiveSheetDescription,
+  ResponsiveSheetFooter,
+} from './ResponsiveSheet';