nexus-elements-transfer
Nexus Elements - Transfer
Install
- Install widget:
npx shadcn@latest add @nexus-elements/transfer
- Ensure
NexusProvideris installed and initialized before rendering.
Required setup before rendering
- Ensure
useNexus().nexusSDKis initialized. - Ensure
bridgableBalancehas loaded. - Ensure recipient is valid EVM address (prefill or user input).
Initialize SDK (required once per app)
- On wallet connect, resolve an EIP-1193 provider and call
useNexus().handleInit(provider). - Wait for
useNexus().nexusSDKbefore allowing transfer actions. - Re-run init after reconnect if wallet session resets.
Render widget
"use client";
import FastTransfer from "@/components/transfer/transfer";
import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
export function TransferPanel() {
return (
<FastTransfer
prefill={{
token: "USDC",
chainId: SUPPORTED_CHAINS.BASE,
recipient: "0x000000000000000000000000000000000000dead",
}}
onStart={() => {
// pending
}}
onComplete={() => {
// success
}}
onError={(message) => {
console.error(message);
}}
/>
);
}
Live prop contract
prefill?:token,chainId, optionalamount, optionalrecipient.
maxAmount?: cap transferable amount.onStart?,onComplete?,onError?(message)callbacks.
SDK flow details (under the hood)
- Primary execute call:
sdk.bridgeAndTransfer({ token, amount, toChainId, recipient, sourceChains }, { onEvent })
- Pre-execution checks:
- validate recipient + amount
- compute max available via
sdk.calculateMaxForBridge(...) - enforce selected-source sufficiency
- Hook usage:
intent.currentfor transfer intent preview/refresh/allowallowance.currentfor source-specific allowance decisions
- Event mapping:
NEXUS_EVENTS.STEPS_LIST-> initialize step trackerNEXUS_EVENTS.STEP_COMPLETE-> progress update and elapsed timer
Understand recipient behavior
- Transfer flow requires recipient address.
- Prefill recipient locks input.
- Without prefill, UI validates recipient and blocks invalid addresses.
E2E verification
- Fill token/chain/amount/recipient and confirm intent preview appears.
- Adjust source chains and confirm coverage indicators update.
- Accept and verify allowance step when required.
- Confirm success updates explorer URL and refreshes balances.
- Confirm history refresh event appears in
ViewHistory(when present).
Common failure cases
- Invalid recipient:
- pass a checksummed or valid hex address.
- Exceeds selected source max:
- reduce amount or enable more source chains.
- Flow canceled:
- expect
onErrorwith user-cancel message and reset state.
- expect
More from availproject/nexus-elements
nexus-elements-deposit
Integrate the Deposit element for swap-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging destination-fixed deposits, execute call builders, swap-intent confirmation UX, and `sdk.swapAndExecute` progress from quote to completion.
26nexus-elements-overview
End-to-end integration guide for Nexus Elements in any TypeScript/React codebase. Use when setting up Nexus Elements from scratch, choosing which widget to install, wiring NexusProvider + wallet initialization, or validating bridge/transfer/swap/deposit/history behavior in production-like flows.
24nexus-elements-common
Use shared Nexus Elements hooks, transaction-step helpers, and constants to build custom Nexus UX. Use when extending widgets or implementing custom bridge/transfer/swap/deposit flows that need debouncing, polling, step orchestration, or Nexus error normalization.
23nexus-elements-nexus-provider
Install and configure NexusProvider for Nexus Elements with full SDK lifecycle wiring. Use when setting up or debugging SDK initialization, wallet/provider connection, hook attachment (intent/allowance/swapIntent), balance preloads, exchange-rate support, and provider context consumption in React/TypeScript apps.
23nexus-elements-bridge-deposit
Integrate the Bridge Deposit element for bridge-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging source-chain constrained deposits, bridge+execute simulation, intent/allowance approvals, and `sdk.bridgeAndExecute` transaction execution.
22nexus-elements-fast-bridge
Integrate the FastBridge element for intent-based cross-chain bridge UX in React/TypeScript apps. Use when installing or debugging self-bridge flows, source-chain selection, allowance gating, step progress events, and `sdk.bridge` execution end-to-end.
21