Skip to Content
Avail Nexus is now live! Check out our docs to get started.
NexusNexus SDK ReferenceNexus ElementsDeposit

Deposit

Bridge tokens and execute a custom transaction on the destination chain in a single flow.

MAIN POINTS TO NOTE:

  1. The widget calls bridgeAndExecute() under the hood.
  2. It uses simulateBridgeAndExecute() to give an estimate of the gas needed before the transaction is executed.
  3. You must provide a depositExecute builder that returns the execute payload (target contract, data, approvals).
  4. Prefilled chain/token/amount/source selections become read-only in the UI.
  5. You can find a quickstart example for using nexus-elements in Nexus Elements Quickstart.

Install

You can find the source code for the Deposit Widget here:

Deposit Widget

To install the Deposit Widget into your project, you can use the following command:

Terminal
pnpm dlx shadcn@latest add https://elements.nexus.availproject.org/r/deposit.json

Props

TypeScript
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">;
}
  • address: Wallet initiating the deposit.
  • token: Defaults to USDC; pass any supported symbol.
  • chain: Destination chain ID (bridge target).
  • chainOptions: Optional subset of source chains to show; defaults to every chain returned by NexusProvider.
  • depositExecute: Required builder returning the execute payload (target contract + calldata + optional approvals).

Usage

tsx
"use client";
 
import { useAccount } from "wagmi";
import { encodeFunctionData, parseUnits } from "viem";
import NexusDeposit from "@/components/deposit/deposit";
 
<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,
      },
    };
  }}
/>
Last updated on
Fast BridgeSwaps