Fast Bridge

Use this widget to bridge tokens across chains. Prefill inputs and hook into lifecycle callbacks for a seamless UX.

MAIN POINTS TO NOTE:

This widget calls bridge() under the hood if the recipient === connectedAddress.
If the recipient !== connectedAddress, bridgeAndTransfer() is called.
You can read more about these underlying functions in the Nexus Core SDK reference.
You can find a Quickstart example for using nexus-elements in Nexus Elements Quickstart. This tutorial shows you how to integrate nexus-elements into a Vite-based project using a pre-configured template.

Install

You can find the source code for the Fast Bridge Widget here:

Fast Bridge Widget

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

pnpm

Terminal


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

npm

Terminal


npx shadcn@latest add https://elements.nexus.availproject.org/r/fast-bridge.json

yarn

Terminal


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

Props

Typescript


interface FastBridgeProps {
  connectedAddress: Address;
  prefill?: {
    token: SUPPORTED_TOKENS;
    chainId: SUPPORTED_CHAINS_IDS;
    amount?: string;
    recipient?: Address;
  };
  onComplete?: () => void;
  onStart?: () => void;
  onError?: (message: string) => void;
}

connectedAddress: The address of the wallet connected to the app.
prefill: The prefill inputs for the bridge.
- token: can be one of the SUPPORTED_TOKENS from the @avail-project/nexus-core SDK.
- chainId: can be one of the SUPPORTED_CHAINS_IDS from the @avail-project/nexus-core SDK.
- amount: the amount of tokens to bridge.
- recipient: the address to bridge the tokens to.
onComplete: The callback function to be called when the bridge is complete.
onStart: The callback function to be called when the bridge starts.
onError: The callback function to be called when the bridge transaction errors out.

Usage

tsx


"use client";
import FastBridge from '@/components/fast-bridge/fast-bridge';
 
<FastBridge
  connectedAddress={address}
  onComplete={completeCurrent}
  prefill={{
    token: "USDC",
    chainId: SUPPORTED_CHAINS.BASE,
  }}
  onError={handleError}
  onStart={handleStart}
/>
 
// Prefill example
// Any prefill values become Read-only in the UI
 
<FastBridge
  connectedAddress={address}
  prefill={{
    token: 'USDC',
    chainId: 8453,                // Base chain ID
    amount: '100',                // string amount
    recipient: '0xRecipient...'   // optional recipient address
  }}