Deposit tokens into a destination with source breakdown, allowance flow, and optional embedded card view. Intent-based and customizable execute builder.
import {
type SUPPORTED_CHAINS_IDS,
type SUPPORTED_TOKENS,
type ExecuteParams,
} from "@avail-project/nexus-core";
import DepositModal from "./components/deposit-modal";
import { type Address } from "viem";
import Container from "./components/container";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { useNexus } from "../nexus/NexusProvider";
export interface BaseDepositProps {
address: Address;
token?: SUPPORTED_TOKENS;
chain: SUPPORTED_CHAINS_IDS;
chainOptions?: {
id: number;
name: string;
logo: string;
}[];
depositExecute: (
token: SUPPORTED_TOKENS,
amount: string,
chainId: SUPPORTED_CHAINS_IDS,
userAddress: `0x${string}`
) => Omit<ExecuteParams, "toChainId">;
}
interface NexusDepositProps extends BaseDepositProps {
heading?: string;
embed?: boolean;
destinationLabel?: string;
}
const NexusDeposit = ({
address,
token = "USDC",
chain,
chainOptions, // pass to customise sources displayed, if not provided, all sources will be shown
heading = "Deposit USDC",
embed = false,
destinationLabel,
depositExecute,
}: NexusDepositProps) => {
const { supportedChainsAndTokens } = useNexus();
const formatedChainOptions =
chainOptions ??
supportedChainsAndTokens?.map((chain) => {
return {
id: chain.id,
name: chain.name,
logo: chain.logo,
};
});
if (embed) {
return (
<Card>
<CardHeader className="px-3">
<CardTitle>{heading}</CardTitle>
</CardHeader>
<CardContent className="px-3">
<Container
address={address}
token={token}
chain={chain}
chainOptions={formatedChainOptions}
destinationLabel={destinationLabel}
depositExecute={depositExecute}
/>
</CardContent>
</Card>
);
}
return (
<DepositModal
address={address}
token={token}
chain={chain}
chainOptions={formatedChainOptions}
heading={heading}
destinationLabel={destinationLabel}
depositExecute={depositExecute}
/>
);
};
export NexusDeposit;
Installation
pnpm dlx shadcn@latest add @nexus-elements/deposit
Usage
<NexusDeposit
address={address ?? `0x`}
token="USDT"
chain={SUPPORTED_CHAINS.ARBITRUM}
embed={viewAs}
destinationLabel="on Aave v3"
heading="Deposit USDT"
depositExecute={(token, amount, _chainId, user) => {
const contractAddress =
"0x794a61358D6845594F94dc1DB02A252b5b4814aD" as const;
const abi: Abi = [
{
name: "supply",
type: "function",
stateMutability: "nonpayable",
inputs: [
{ name: "asset", type: "address" },
{ name: "amount", type: "uint256" },
{ name: "onBehalfOf", type: "address" },
{ name: "referralCode", type: "uint16" },
],
outputs: [],
},
];
const amountWei = parseUnits(amount, 6);
if (token === "ETH") {
throw new Error(
"ETH is native and not supported for this execute builder"
);
}
const chainMap = TOKEN_CONTRACT_ADDRESSES[token];
if (!(_chainId in chainMap)) {
throw new Error("Selected chain is not supported for this token");
}
const tokenAddr = chainMap[_chainId as keyof typeof chainMap];
const encoded = encodeFunctionData({
abi: abi,
functionName: "supply",
args: [tokenAddr, amountWei, user, 0],
});
if (!encoded) {
throw new Error("Failed to encode contract call");
}
return {
to: contractAddress,
data: encoded,
tokenApproval: {
token,
amount: amountWei,
spender: contractAddress,
},
};
}}
/>API Reference
NexusDeposit
TheNexusDeposit component orchestrates a deposit flow with allowance handling and an optional execute builder for custom protocol interactions.
interface NexusDepositProps {
address: Address; // user wallet address (required)
token?: SUPPORTED_TOKENS; // token to deposit (default: "USDC")
chain: SUPPORTED_CHAINS_IDS; // destination chain (required)
chainOptions?: { id: number; name: string; logo: string }[]; // limit or label chains shown
heading?: string; // heading text (default: "Deposit USDC")
embed?: boolean; // render as embedded card instead of modal (default: false)
destinationLabel?: string; // extra label (e.g., "on Aave v3")
depositExecute: (
token: SUPPORTED_TOKENS,
amount: string,
chainId: SUPPORTED_CHAINS_IDS,
userAddress: `0x${string}`
) => Omit<ExecuteParams, "toChainId">;
}