Nexus Elements - Transfer

Overview

Install the FastTransfer component (registry item name is transfer) for intent-based cross-chain transfers with allowance flow and progress UI.

Prerequisites

• •NexusProvider installed and initialized on wallet connect.
• •Wallet connection configured.

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

1. •Install:

npx shadcn@latest add @nexus-elements/transfer

Alternative:

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

Manual install (no shadcn)

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

Usage

import FastTransfer from "@/components/transfer/transfer";
import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";

<FastTransfer
  prefill={{
    token: "USDC",
    chainId: SUPPORTED_CHAINS.BASE,
  }}
  onStart={() => {}}
  onComplete={() => {}}
  onError={(message) => console.error(message)}
/>

SDK flow mapping

• •Uses sdk.bridgeAndTransfer(...) under the hood.
• •Relies on intent + allowance hooks (intent, allowance) for confirmation UI.
• •Progress updates come from NEXUS_EVENTS.STEPS_LIST and NEXUS_EVENTS.STEP_COMPLETE.

Props (FastTransferProps)

• •prefill: { token, chainId, amount?, recipient? }
• •onStart, onComplete, onError

Notes

• •Docs refer to this as fast-transfer, but the registry item is transfer.
• •FastTransfer renders ViewHistory if installed.