Integrate the Deposit element for swap-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging destination-fixed deposits, execute call builders, swap-intent confirmation UX, and `sdk.swapAndExecute` progress from quote to completion.
npx shadcn@latest add @nexus-elements/depositNexusProvider is installed and initialized before rendering.useNexus().nexusSDK is initialized.exchangeRate contains destination token rate (widget requires it for amount simulation).destination config and executeDeposit builder.MAX interaction, ensure the widget can compute current source selections so it can call sdk.calculateMaxForSwap(...).useNexus().handleInit(provider).useNexus().nexusSDK before allowing amount confirmation."use client";
import NexusDeposit from "@/components/deposit/nexus-deposit";
import {
SUPPORTED_CHAINS,
TOKEN_CONTRACT_ADDRESSES,
TOKEN_METADATA,
CHAIN_METADATA,
} from "@avail-project/nexus-core";
import { encodeFunctionData, type Abi } from "viem";
export function DepositPanel() {
return (
<NexusDeposit
heading="Deposit USDC"
destination={{
chainId: SUPPORTED_CHAINS.BASE,
tokenAddress: TOKEN_CONTRACT_ADDRESSES["USDC"][SUPPORTED_CHAINS.BASE],
tokenSymbol: "USDC",
tokenDecimals: TOKEN_METADATA["USDC"].decimals,
tokenLogo: TOKEN_METADATA["USDC"].icon,
label: "Deposit to protocol",
gasTokenSymbol: CHAIN_METADATA[SUPPORTED_CHAINS.BASE].nativeCurrency.symbol,
explorerUrl: CHAIN_METADATA[SUPPORTED_CHAINS.BASE].blockExplorerUrls[0],
estimatedTime: "~30s",
}}
executeDeposit={(tokenSymbol, tokenAddress, amount, _chainId, user) => {
const contract = "0x0000000000000000000000000000000000000000" as const;
const abi: Abi = [
{
type: "function",
name: "deposit",
stateMutability: "nonpayable",
inputs: [
{ name: "asset", type: "address" },
{ name: "amount", type: "uint256" },
{ name: "beneficiary", type: "address" },
],
outputs: [],
},
];
const data = encodeFunctionData({
abi,
functionName: "deposit",
args: [tokenAddress, amount, user],
});
return {
to: contract,
data,
tokenApproval: {
token: tokenAddress,
amount,
spender: contract,
},
};
}}
onSuccess={() => {
// success
}}
onError={(message) => {
console.error(message);
}}
/>
);
}
destination: DestinationConfigexecuteDeposit(tokenSymbol, tokenAddress, amount, chainId, user)heading, embed, classNameopen, onOpenChange, defaultOpen (dialog mode)onSuccess, onError, onClosesdk.swapAndExecute({ toChainId, toTokenAddress, toAmount, fromSources?, execute }, { onEvent })sdk.calculateMaxForSwap({ toChainId, toTokenAddress, fromSources? })swapIntent hook to enter previewing stateactiveIntent.allow() and moves to executingNEXUS_EVENTS.SWAP_STEP_COMPLETEDETERMINING_SWAP and SWAP_SKIPPEDMAX is destination-token aware:
MaxSwapInput from the current destination and selected source poolsdk.calculateMaxForSwap(...)Any token, Stablecoins, Native) act as explicit source selections for that pool.Pay using and the fromSources sent to sdk.swapAndExecute(...) should reflect the same current source set.activeIntent.allow() denies the preview intent.onError handlers may still observe the rejection if the app wants it.onSuccess and balance refresh after completion.Nexus SDK is not initialized:
handleInit(provider) ran after wallet connect.Unable to fetch pricing for <token>:
executeDeposit target, calldata, and token approval spender.