Nexus Elements - Swaps

Overview

Install the SwapWidget component for cross-chain swaps with exact-in/out modes, progress UI, and optional callbacks.

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/swaps

Alternative:

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

Manual install (no shadcn)

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

Usage

import SwapWidget from "@/components/swaps/swap-widget";

<SwapWidget
  onStart={() => {}}
  onComplete={(amount) => console.log(amount)}
  onError={() => console.error("Swap failed")}
/>

SDK flow mapping

• •Uses sdk.swapWithExactIn(...) and sdk.swapWithExactOut(...).
• •Relies on the swap intent hook (swapIntent) for confirmation UI.
• •Progress updates come from NEXUS_EVENTS.SWAP_STEP_COMPLETE.

Props (SwapsProps)

• •onStart, onComplete, onError

Notes

• •The widget handles exact-in and exact-out modes internally.
• •If you need an error message, you can widen the onError signature in swap-widget.tsx to accept (message?: string).