import { useState } from 'react';
function WithdrawForm() {
const [amount, setAmount] = useState('');
const [recipient, setRecipient] = useState('');
const [unwrapWeth, setUnwrapWeth] = useState(false);
const [step, setStep] = useState('');
const [loading, setLoading] = useState(false);
const handleWithdraw = async () => {
setLoading(true);
try {
const parsedAmount = await sdk.vault.parseAmount(tokenAddress, amount);
await sdk.vault.withdraw({
tokenAddress,
amount: parsedAmount,
recipientAddress: recipient,
unwrapWeth,
onProgress: ({ step, message }) => {
setStep(message);
},
});
alert('Withdrawal successful!');
} catch (error) {
alert(`Withdrawal failed: ${error.message}`);
} finally {
setLoading(false);
setStep('');
}
};
return (
<div>
<input
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="Amount"
disabled={loading}
/>
<input
type="text"
value={recipient}
onChange={(e) => setRecipient(e.target.value)}
placeholder="Recipient address"
disabled={loading}
/>
<label>
<input
type="checkbox"
checked={unwrapWeth}
onChange={(e) => setUnwrapWeth(e.target.checked)}
disabled={loading}
/>
Unwrap WETH to ETH
</label>
<button onClick={handleWithdraw} disabled={loading}>
{loading ? step || 'Processing...' : 'Withdraw'}
</button>
</div>
);
}