("");
const [isLoading, setIsLoading] = useState(false);
const deposit = useCallback(
async ({ amount, depositAsset, vaultName }: DepositParams) => {
if (!address || !chainId) {
throw new Error("Connect a wallet first");
}
setIsLoading(true);
try {
const params = {
vaultName,
depositAsset,
depositAmount: amount,
to: address,
chainId,
};
// Step 1: Get authorization method
setStatus("Checking authorization...");
const auth = await prepareDepositAuthorization(params);
// Step 2: Handle based on method using type guards
if (isPermitAuth(auth)) {
setStatus("Please sign permit in your wallet...");
const signature = await signTypedDataAsync(auth.permitData);
setStatus("Submitting deposit...");
const prepared = await prepareDeposit({
...params,
signature,
deadline: auth.permitData.message.deadline,
});
await writeContractAsync({
...prepared.txData,
account: address,
});
} else if (isApprovalAuth(auth)) {
setStatus("Approving token spend...");
await writeContractAsync({
...auth.txData,
account: address,
});
// Important: In production, wait for the approval transaction
// to be confirmed before proceeding with the deposit.
// See the Node.js example for the full pattern using
// publicClient.waitForTransactionReceipt().
setStatus("Submitting deposit...");
const prepared = await prepareDeposit(params);
await writeContractAsync({
address: prepared.txData.address,
abi: prepared.txData.abi,
functionName: prepared.txData.functionName,
args: prepared.txData.args,
account: address,
});
} else if (isAlreadyApprovedAuth(auth)) {
setStatus("Submitting deposit...");
const prepared = await prepareDeposit(params);
await writeContractAsync({
address: prepared.txData.address,
abi: prepared.txData.abi,
functionName: prepared.txData.functionName,
args: prepared.txData.args,
account: address,
});
}
setStatus("Deposit successful!");
} catch (error) {
setStatus(`Error: ${error instanceof Error ? error.message : "Unknown"}`);
throw error;
} finally {
setIsLoading(false);
}
},
[address, chainId, writeContractAsync, signTypedDataAsync]
);
return { deposit, status, isLoading };
}
```
### Deposit Component
```tsx {4,18} theme={null}
// src/components/DepositForm.tsx
import { useState } from "react";
import { useAccount } from "wagmi";
import { getVaultsByConfig, YieldType } from "@paxoslabs/amplify-sdk";
import { useDeposit } from "../hooks/useDeposit";
import { useQuery } from "@tanstack/react-query";
const USDC_ADDRESS = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" as const;
export function DepositForm() {
const { isConnected, chainId } = useAccount();
const [amount, setAmount] = useState("100");
const { deposit, status, isLoading } = useDeposit();
const { data: vault } = useQuery({
queryKey: ["vault", chainId],
queryFn: async () => {
const [v] = await getVaultsByConfig({
yieldType: YieldType.CORE,
chainId,
depositAssetAddress: USDC_ADDRESS,
});
return v;
},
enabled: !!chainId,
});
if (!isConnected) {
return Please connect your wallet
;
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!vault) return;
await deposit({
amount,
depositAsset: USDC_ADDRESS,
vaultName: vault.name,
});
};
return (
);
}
```