availproject/nexus-one-send

Nexus One - Send / Transfers

Use the Nexus One component with config.mode = "send" to enable cross-chain transfers directly to a recipient address. The user chooses the asset and amount to send, and Nexus automatically finds and routes from their available balances on different source chains.

1. Installation

Install dependencies and the component via the shadcn CLI:

npx shadcn@latest add @nexus-elements/nexus-one

Make sure peer dependencies are installed:

npm install @avail-project/[email protected] decimal.js lucide-react viem wagmi class-variance-authority clsx tailwind-merge

2. Basic Setup

Wrap the component with NexusProvider. Render NexusOne with config.mode = "send".

import { NexusOne } from "@/components/nexus-one/nexus-one";

export function SendWidget({ address }: { address?: `0x${string}` }) {
  return (
    <NexusOne
      config={{
        mode: "send",
      }}
      connectedAddress={address}
    />
  );
}

3. Prefilling Recipient, Amount & Token

You can pre-populate the token, amount, and recipient address to speed up checkout.

• USDC on Base (8453): 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913

const sendConfig = {
  mode: "send",
  prefill: {
    token: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC on Base
    chain: 8453,
    amount: "25.5",                                       // Prefilled amount
    recipient: "0xRecipientWalletAddressHere" as `0x${string}`, // Prefilled recipient
  },
};

<NexusOne config={sendConfig} connectedAddress={address} />;

4. Restricting Token Options

Configure allowedSourcePairs (to restrict what tokens can be used to pay) or allowedDestinationPairs (to restrict what tokens can be sent to the recipient).

const sendConfig = {
  mode: "send",
  allowedDestinationPairs: [
    { token: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", chain: 8453 }, // Only allow sending USDC on Base
  ],
};

5. Event Callbacks

Wire lifecycle callbacks for notifications or analytics:

<NexusOne
  config={{ mode: "send" }}
  connectedAddress={address}
  onStart={() => console.log("Transfer started")}
  onComplete={(explorerUrl) => console.log("Transfer succeeded!", explorerUrl)}
  onError={(message) => console.error("Transfer failed:", message)}
/>