@djangocfg/ext-payments 1.0.17 → 1.0.19

package/src/components/WithdrawSheet.tsx

@@ -2,12 +2,13 @@
  * 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 } from 'lucide-react';
+import { RefreshCw, AlertCircle, 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 { WithdrawalDetail } from '../api/generated/ext_payments/_utils/schemas';
+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.00'),
+  amount: z.number().min(10, 'Minimum $10'),
   currency: z.string().min(1, 'Select a currency'),
   wallet_address: z.string().min(26, 'Invalid wallet address'),
 });
@@ -57,12 +61,13 @@ interface WithdrawSheetProps {
   onSuccess?: (withdrawal: WithdrawalDetail) => void;
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Fee Config
-// ─────────────────────────────────────────────────────────────────────────────
+// Storage
+const STORAGE_KEY = 'payments:withdraw';
 
-const SERVICE_FEE_PERCENT = 0.01; // 1%
-const NETWORK_FEE_USD = 1.00; // $1
+interface WithdrawSaved {
+  currency: string;
+  wallet: string;
+}
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Component
@@ -73,52 +78,61 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
   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: '',
-      wallet_address: '',
+      currency: saved.currency,
+      wallet_address: saved.wallet,
     },
   });
 
-  // 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');
+  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);
 
-  // Calculate fees and final amount
-  const selectedCurrency = currencyOptions.find(c => c.value === form.watch('currency'));
-  const amount = form.watch('amount') || 0;
+  // Currency options
+  const currencyOptions = useCurrencyOptions(currencies);
 
-  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;
+  // 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 {
-      serviceFee,
-      networkFee,
-      totalFee,
-      finalAmount,
-      cryptoAmount,
+      token: selectedCurrency.token,
+      cryptoAmount: formatCryptoAmount(estimate.estimatedAmount, estimate.isStablecoin),
     };
-  }, [amount, selectedCurrency]);
+  }, [selectedCurrency, estimate]);
 
   // Check if user has enough balance
   const insufficientBalance = amount > balanceAmount;
@@ -138,26 +152,27 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
       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);
+    } catch (err) {
+      setError(extractErrorMessage(err, 'Failed to create withdrawal request'));
     } finally {
       setIsSubmitting(false);
     }
   }, [withdraw, 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: 10,
+        currency: saved.currency,
+        wallet_address: saved.wallet,
+      });
+    } else {
       setError(null);
-      form.reset();
     }
     onOpenChange(open);
-  }, [form, onOpenChange]);
+  }, [form, onOpenChange, saved]);
 
   return (
     <ResponsiveSheet open={open} onOpenChange={handleOpenChange}>
@@ -187,7 +202,7 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
                         type="number"
                         step="0.01"
                         min="10"
-                        placeholder="10.00"
+                        placeholder="10"
                         className="pl-8 text-2xl h-14 font-semibold"
                         {...field}
                         onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
@@ -197,7 +212,7 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
                   <FormMessage />
                   {insufficientBalance && (
                     <p className="text-sm text-destructive mt-1">
-                      Insufficient balance (Available: ${balanceAmount.toFixed(2)})
+                      Insufficient balance (Available: ${formatUsdAmount(balanceAmount)})
                     </p>
                   )}
                 </FormItem>
@@ -212,26 +227,11 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
                 <FormItem>
                   <FormLabel>Withdraw as</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 />
@@ -263,30 +263,49 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
               <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>
+                  <span>${formatUsdAmount(amount)}</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>
+                {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>
-                  </div>
-                </div>
+                  </>
+                ) : null}
               </div>
             )}
 
@@ -310,7 +329,14 @@ export function WithdrawSheet({ open, onOpenChange, onSuccess }: WithdrawSheetPr
               type="submit"
               size="lg"
               className="w-full h-14 text-lg rounded-xl"
-              disabled={isSubmitting || currencyOptions.length === 0 || insufficientBalance || feeBreakdown.finalAmount <= 0}
+              disabled={
+                isSubmitting ||
+                currencyOptions.length === 0 ||
+                insufficientBalance ||
+                !estimate ||
+                estimate.amountToReceive <= 0 ||
+                isLoadingEstimate
+              }
             >
               {isSubmitting ? (
                 <>

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>
+  );
+}

package/src/components/index.ts

@@ -7,12 +7,5 @@ export { ActivityList } from './ActivityList';
 export { ActivityItem } from './ActivityItem';
 export { AddFundsSheet } from './AddFundsSheet';
 export { WithdrawSheet } from './WithdrawSheet';
+export { WithdrawalSheet } from './WithdrawalSheet';
 export { PaymentSheet } from './PaymentSheet';
-export {
-  ResponsiveSheet,
-  ResponsiveSheetContent,
-  ResponsiveSheetHeader,
-  ResponsiveSheetTitle,
-  ResponsiveSheetDescription,
-  ResponsiveSheetFooter,
-} from './ResponsiveSheet';