AgentSkillsCN

nexus-elements-deposit

安装并使用Nexus Deposit小部件（通过swapAndExecute进行兑换与执行）。当您需要将完整的存款流程与目标配置及自定义执行构建器相结合时，可选用此方案。

SKILL.md
--- frontmatter
name: nexus-elements-deposit
description: Install and use the Nexus Deposit widget (swap + execute via swapAndExecute). Use when integrating the full deposit flow with destination config and custom execute builder.

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:
json
"registries": {
  "@nexus-elements/": "https://elements.nexus.availproject.org/r/{name}.json"
}
  1. •Install:
bash
npx shadcn@latest add @nexus-elements/deposit

Alternative:

bash
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

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

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