Swap and Bridge
Swap and bridge assets with the unified Nexus intent flow.
Network support: Mainnet only. Testnet is not supported at the moment.
Configurator
Installation
pnpm add @avail-project/widgets
Usage
import { NexusWidget } from "@avail-project/widgets";
const USDC_BASE = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
export function SwapAndBridgeExample({
address,
}: {
address?: `0x${string}`;
}) {
return (
<NexusWidget
connectedAddress={address}
config={{
mode: "swap",
destination: {
chain: 8453,
tokens: [{ address: USDC_BASE, symbol: "USDC", decimals: 6 }],
},
}}
/>
);
}Configuration
mode: "swap". Users pick a source asset, the quote determines the receive amount, and the flow submits through the Nexus swap execution path.
| Prop | Required | Description |
|---|---|---|
config.mode | Yes | Must be "swap". |
config.destination.chain | Optional | Restricts the destination chain selection. |
config.destination.tokens | Optional | Restricts the receive-token selector. When supplied with destination.chain, users can only pick from this list. |
config.prefill.token | Optional | Initial receive token: { chain, address, symbol, decimals, logo? }. Unlike destination.tokens, it does not restrict later token choices. |
config.recipientAddress | Optional | Prefills the recipient of the swap output. |
config.appearance | Optional | Branding overrides: heading, appName, appLogoURL, primaryColor, mode. |
connectedAddress | Optional | Wallet address to use. If omitted, the connected wagmi account is used. |
embed | Optional | Defaults to true. Set false to render as a modal surface. |
open, onOpenChange, defaultOpen | Optional | Control the modal when embed={false}. |
onStart, onComplete, onError, onClose, onConnectClick | Optional | Host app callbacks. Use onConnectClick to route the widget's Connect Wallet CTA to your app-level wallet flow. |
destination.tokens and prefill.token are supplied, destination.tokens[0] is honored and prefill.token is ignored. Swap mode does not support amount prefill or min/max validation yet.
interface NexusWidgetDestinationToken {
address: `0x${string}`;
symbol: string;
decimals: number;
logo?: string;
}
interface NexusWidgetSwapConfig {
mode: "swap";
destination?: {
chain?: number;
tokens?: NexusWidgetDestinationToken[];
};
prefill?: {
token?: NexusWidgetDestinationToken & { chain: number };
};
recipientAddress?: `0x${string}`;
appearance?: {
heading?: string;
appName?: string;
appLogoURL?: string;
primaryColor?: string;
mode?: "system" | "light" | "dark";
};
}How is this guide?