Skip to main content

​
Usage

const { 
  withdrawVesuUsdc, 
  withdrawVesuUsdcAsync, 
  data, 
  isLoading, 
  isError, 
  error, 
  isSuccess, 
  reset 
} = useWithdrawVesuUsdc();

​
Parameters

The hook accepts an object with:
  • params (WithdrawVesuUsdcHookInputParams):
    • encryptKey (string): User’s decryption PIN
    • wallet (WalletData): Wallet public/private key pair
    • amount (number): Amount of USDC to withdraw (will be converted to string internally)
    • recipient (string): Address to receive the withdrawn tokens
  • bearerToken (string): Authentication token for the API

​
Return Value

Returns an object containing:
  • withdrawVesuUsdc: Function to trigger withdrawal (fire-and-forget)
  • withdrawVesuUsdcAsync: Promise-based function that resolves with the transaction hash
  • data: Transaction hash of the withdrawal operation (string | undefined)
  • isLoading: Boolean indicating if the operation is in progress
  • isError: Boolean indicating if an error occurred
  • error: Error instance when isError is true, otherwise null
  • isSuccess: Boolean indicating if the withdrawal completed successfully
  • reset: Function to reset the mutation state

​
Example Implementation

export function WithdrawForm() {
  const { 
    withdrawVesuUsdcAsync, 
    data, 
    isLoading, 
    isError, 
    error 
  } = useWithdrawVesuUsdc();

  const [form, setForm] = useState({
    pin: '',
    amount: '',
    recipient: ''
  });

  const handleWithdraw = async (e: React.FormEvent) => {
    e.preventDefault();

    const bearerToken = await getBearerToken();

    try {
      await withdrawVesuUsdcAsync({
        params: {
          encryptKey: form.pin,
          wallet: {
            publicKey: "0x123...yourPublicKeyHere",
            encryptedPrivateKey: "encrypted:key:data"
          },
          amount: Number(form.amount),
          recipient: form.recipient,
        },
        bearerToken
      });
    } 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>

      {data && (
        <div className="mt-4 p-3 bg-gray-50 rounded-md">
          <p className="text-sm font-mono break-all">
            Withdraw TX: {data}
          </p>
        </div>
      )}

      {isError && error && (
        <div className="mt-4 p-3 bg-red-50 text-red-700 rounded-md">
          Error: {error.message}
        </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.