Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | 3x 174x 174x 174x 174x 174x 174x 31x 13x 13x 13x 13x 174x 5x 5x 1x 1x 4x 4x 1x 1x 3x 1x 1x 2x 174x 5x 2x 2x 1x 1x 174x 174x 14x 160x 99x | import { useEffect, useState } from 'react';
import { Button } from '@/components/button';
import {
Dialog,
DialogContent,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogDescription,
DialogHeader,
} from '@/components/dialog';
import { Input } from '@/components/input';
import { FormMessage } from '@/components/form-message';
import { useWalletOperations } from '../hooks/use-wallet';
import { AmountInput } from './amount-input';
import { WithdrawMethodSelector } from './withdraw-method-selector';
import { currencyFormatter } from '@/lib/currency-formatter';
import { DEFAULT_CURRENCY, WITHDRAWAL_METHODS } from '@/constants/wallet';
type WithdrawDialogProps = {
isOpen?: boolean;
onClose: () => void;
availableBalance: string;
currency?: string;
};
export const WithdrawDialog = ({
isOpen = false, // Ensure dialog is closed by default
onClose,
availableBalance,
currency = DEFAULT_CURRENCY,
}: WithdrawDialogProps) => {
const [amount, setAmount] = useState('');
const [destination, setDestination] = useState('');
const [method, setMethod] = useState<
typeof WITHDRAWAL_METHODS.BANK | typeof WITHDRAWAL_METHODS.CRYPTO
>(WITHDRAWAL_METHODS.BANK);
const [validationError, setValidationError] = useState<string | null>(null);
const { withdraw, isWithdrawing, withdrawError, validateWithdrawal } =
useWalletOperations();
// Reset form when dialog opens/closes
useEffect(() => {
if (!isOpen) {
setAmount('');
setDestination('');
setMethod('bank');
setValidationError(null);
}
}, [isOpen]);
const validateForm = (): boolean => {
setValidationError(null);
if (!amount || parseFloat(amount) <= 0) {
setValidationError('Please enter a valid amount');
return false;
}
const validation = validateWithdrawal(amount);
if (!validation.isValid) {
setValidationError(validation.error || 'Invalid withdrawal amount');
return false;
}
if (!destination.trim()) {
setValidationError('Please enter a destination');
return false;
}
return true;
};
const handleWithdraw = async () => {
if (!validateForm()) return;
try {
await withdraw({
amount,
destination: destination.trim(),
method,
});
// Close dialog on success
onClose();
} catch (error) {
// Error is handled by the hook, don't close dialog
console.error('Withdrawal failed:', error);
}
};
const maxBalance = parseFloat(availableBalance);
// Don't render if dialog is closed or no balance available
if (!isOpen || maxBalance <= 0) {
return null;
}
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogPortal>
<DialogOverlay />
<DialogContent className="sm:max-w-md">
{/* Header with proper accessibility */}
<DialogHeader>
<DialogTitle>Withdraw Funds</DialogTitle>
<DialogDescription>
Available balance:{' '}
{currencyFormatter.format(availableBalance, currency)}
</DialogDescription>
</DialogHeader>
{/* Form */}
<div className="space-y-4">
{/* Amount Input */}
<AmountInput
value={amount}
onChange={setAmount}
currency={currency}
maxBalance={maxBalance}
disabled={isWithdrawing}
/>
{/* Method Selection */}
<WithdrawMethodSelector
method={method}
onChange={setMethod}
disabled={isWithdrawing}
/>
{/* Destination Input */}
<div className="space-y-2">
<label
htmlFor="destination"
className="text-sm font-medium text-gray-700"
>
{method === 'bank' ? 'Bank Account' : 'Wallet Address'}
</label>
<Input
id="destination"
value={destination}
onChange={e => setDestination(e.target.value)}
placeholder={
method === 'bank'
? 'Account number or IBAN'
: 'Cryptocurrency wallet address'
}
disabled={isWithdrawing}
/>
</div>
{/* Error Messages */}
{(validationError || withdrawError) && (
<FormMessage
type="error"
message={validationError || withdrawError || ''}
onDismiss={() => setValidationError(null)}
/>
)}
</div>
{/* Actions */}
<div className="flex space-x-3 pt-4">
<Button
variant="outline"
onClick={onClose}
className="flex-1"
disabled={isWithdrawing}
>
Cancel
</Button>
<Button
onClick={handleWithdraw}
className="flex-1"
disabled={isWithdrawing || !amount || !destination}
>
{isWithdrawing ? 'Processing...' : 'Withdraw'}
</Button>
</div>
</DialogContent>
</DialogPortal>
</Dialog>
);
};
|