Nexus Elements Deposit

Nexus Elements - Deposit

Overview

Install the NexusDeposit widget for a full swap-and-execute deposit flow with unified balances, fee preview, and progress UI.

Prerequisites

• NexusProvider installed and initialized on wallet connect.
• Wallet connection configured.
• You can build an execute call (contract address + encoded data) for the target protocol.

Install (shadcn registry)

1. Ensure shadcn/ui is initialized (components.json exists).
2. Ensure registry mapping exists:

"registries": {
  "@nexus-elements/": "https://elements.nexus.availproject.org/r/{name}.json"
}

3. Install:

npx shadcn@latest add @nexus-elements/deposit

Alternative:

npx shadcn@latest add https://elements.nexus.availproject.org/r/deposit.json

Manual install (no shadcn)

1. Download https://elements.nexus.availproject.org/r/deposit.json.
2. Create each file in files[].target with files[].content.
3. Install dependencies listed in dependencies and each registryDependencies item.

Usage

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";

<NexusDeposit
  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 USDC on Aave Base",
    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 contractAddress = "0x..." as const;
    const abi: Abi = [
      {
        inputs: [
          { internalType: "address", name: "asset", type: "address" },
          { internalType: "uint256", name: "amount", type: "uint256" },
          { internalType: "address", name: "onBehalfOf", type: "address" },
          { internalType: "uint16", name: "referralCode", type: "uint16" },
        ],
        name: "supply",
        outputs: [],
        stateMutability: "nonpayable",
        type: "function",
      },
    ];

    const data = encodeFunctionData({
      abi,
      functionName: "supply",
      args: [tokenAddress, amount, user, 0],
    });

    return {
      to: contractAddress,
      data,
      tokenApproval: {
        token: tokenSymbol,
        amount,
        spender: contractAddress,
      },
    };
  }}
/>

SDK flow mapping

• Uses sdk.swapAndExecute(...) under the hood.
• Relies on the swap intent hook (swapIntent) for confirmation UI.
• Progress updates come from NEXUS_EVENTS.SWAP_STEP_COMPLETE.

Props (DepositWidgetProps)

• destination (required): chainId, tokenAddress, tokenSymbol, tokenDecimals, tokenLogo?, label?, estimatedTime?, gasTokenSymbol?, explorerUrl?, depositTargetLogo?
• executeDeposit (required): returns { to, data, value?, tokenApproval? }
• embed, heading, className for layout
• open, onOpenChange, defaultOpen for modal control
• onSuccess, onError, onClose

Notes

• Use embed={true} for inline rendering; default renders a modal.
• executeDeposit receives amount in smallest units (bigint); return calldata + optional tokenApproval.