Usage
const {
withdraw,
withdrawAsync,
withdrawData,
isLoading,
isError
} = useWithdrawVesuUsdc();
Parameters
The hook accepts the following parameters when calling withdraw
or withdrawAsync
:
encryptKey
(string): User’s decryption PIN
wallet
(WalletData): Wallet public/private key pair
amount
(string | number): Amount of USDC to withdraw
recipient
(string): Address to receive the withdrawn tokens
bearerToken
(string): Authentication token for the API
Return Value
Returns an object containing:
withdraw
: Function to trigger withdrawal (mutate)
withdrawAsync
: Async function to trigger withdrawal (mutateAsync)
withdrawData
: Transaction hash of the withdrawal operation
isLoading
: Boolean indicating if the operation is in progress
isError
: Boolean indicating if an error occurred
Example Implementation
'use client'
import { useWithdrawVesuUsdc } from "@chipi-pay/chipi-sdk";
import { useState } from "react";
export function WithdrawForm() {
const {
withdrawAsync,
withdrawData,
isLoading,
isError
} = useWithdrawVesuUsdc();
const [form, setForm] = useState({
pin: '',
amount: '',
recipient: ''
});
const handleWithdraw = async (e: React.FormEvent) => {
e.preventDefault();
try {
await withdrawAsync({
encryptKey: form.pin,
wallet: {
publicKey: "0x123...yourPublicKeyHere",
encryptedPrivateKey: "encrypted:key:data"
},
amount: form.amount,
recipient: form.recipient,
bearerToken: "your-bearer-token"
});
} catch (err) {
console.error('Withdrawal failed:', err);
}
};
return (
<div className="bg-white rounded-xl shadow-lg p-6">
<h2 className="text-2xl font-bold mb-4">Withdraw USDC</h2>
<form onSubmit={handleWithdraw} className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1">Security PIN</label>
<input
type="password"
value={form.pin}
onChange={(e) => setForm({...form, pin: e.target.value})}
className="w-full p-2 border rounded-md"
required
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Amount to Withdraw</label>
<input
type="number"
value={form.amount}
onChange={(e) => setForm({...form, amount: e.target.value})}
className="w-full p-2 border rounded-md"
required
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Recipient Address</label>
<input
type="text"
value={form.recipient}
onChange={(e) => setForm({...form, recipient: e.target.value})}
className="w-full p-2 border rounded-md"
required
placeholder="0x..."
/>
</div>
<button
type="submit"
disabled={isLoading}
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:bg-gray-400"
>
{isLoading ? 'Withdrawing...' : 'Withdraw USDC'}
</button>
</form>
{withdrawData && (
<div className="mt-4 p-3 bg-gray-50 rounded-md">
<p className="text-sm font-mono break-all">
Withdraw TX: {withdrawData}
</p>
</div>
)}
{isError && (
<div className="mt-4 p-3 bg-red-50 text-red-700 rounded-md">
Error: Failed to withdraw tokens
</div>
)}
</div>
);
}
Implementation Details
The hook performs a single transaction:
- Withdraw Transaction
- Contract:
0x017f19582c61479f2fe0b6606300e975c0a8f439102f43eeecc1d0e9b3d84350
- Entrypoint:
withdraw
- Calldata: [amount, recipient, “0x0”]
Security Considerations
- Ensure proper encryption of private keys
- Validate recipient wallet address
- Implement proper PIN validation
- Use secure storage for wallet data
- Monitor transaction status
Error Handling
- Handle insufficient token balance
- Validate wallet addresses
- Check for withdrawal limits
- Monitor gas fees
- Implement retry logic for failed transactions
Make sure you have sufficient VESU-USDC balance before attempting to withdraw.