nexus-elements-deposit

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

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

1) Ensure shadcn/ui is initialized (components.json exists).

2) Ensure registry mapping exists:

```json

"registries": {

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

}

```

3) Install:

```bash

npx shadcn@latest add @nexus-elements/deposit

```

Alternative:

```bash

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

```

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.

```tsx

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

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,

},

};

}}

/>

```

• 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.

• 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

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