Swaps

Let users swap assets across chains with either an exact-in (fixed input amount) or exact-out (fixed output amount).

MAIN POINTS TO NOTE:

Setting exactIn to true (default) renders the Exact-In flow which calls swapWithExactIn() under the hood; false renders the Exact-Out flow which calls swapWithExactOut().
Prefill objects (exactInprefill, exactOutprefill) become read-only in the UI.
The widget streams NEXUS_EVENTS.SWAP_STEP_COMPLETE updates to keep the transaction progress UI in sync and exposes onStart, onError, onComplete callbacks.
You can find a quickstart example for using nexus-elements in Nexus Elements Quickstart.

Install

You can find the source code for the Swaps Widget here:

Swaps Widget

To install the Swaps Widget into your project, you can use the following command:

pnpm

Terminal


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

npm

Terminal


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

yarn

Terminal


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

Props

TypeScript


interface SwapsProps {
  exactIn?: boolean;
  onComplete?: (amount?: string) => void;
  onStart?: () => void;
  onError?: (message: string) => void;
  exactInprefill?: {
    fromChainID?: number;
    fromToken?: string;
    fromAmount?: string;
    toChainID?: number;
    toToken?: string;
  };
  exactOutprefill?: {
    toAmount?: string;
    toChainID?: number;
    toToken?: string;
  };
}

exactIn: Whether to use the exact-in flow. Set to true by default.
onComplete: Callback function called when the swap is complete.
onStart: Callback function called when the swap begins.
onError: Callback function called when the swap fails.
exactInprefill: Optional prefill object for the exact-in flow.
exactOutprefill: Optional prefill object for the exact-out flow.

Usage

Exact In

tsx


<Swaps
  exactIn
  onComplete={completeCurrent}
  onError={handleError}
  onStart={handleStart}
  exactInprefill={{
    fromToken: "USDC",
    fromChainID: SUPPORTED_CHAINS.BASE,
    fromAmount: "100",
    toToken: "USDT",
    toChainID: SUPPORTED_CHAINS.ARBITRUM,
  }}
/>

Exact Out

tsx


<Swaps
  exactIn={false}
  onComplete={completeCurrent}
  onError={handleError}
  onStart={handleStart}
  exactOutprefill={{
    toToken: "USDT",
    toChainID: SUPPORTED_CHAINS.ARBITRUM,
    toAmount: "100",
  }}
/>