Send Widget
Route funds to a recipient with Nexus intents.
Try Live Demo
Installation
pnpm add @avail-project/widgets viem wagmi @tanstack/react-query
Usage
import { NexusWidget } from "@avail-project/widgets";
const USDC_BASE = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" as const;
const RECIPIENT = "0xF3a15b38e63dBb1a1b2d7842CcD9B9dD8fB9b2E" as const;
export function SendExample({ address }: { address?: `0x${string}` }) {
return (
<NexusWidget
connectedAddress={address}
config={{
mode: "send",
destination: {
chain: 8453,
tokens: [
{
address: USDC_BASE,
symbol: "USDC",
decimals: 6,
},
],
},
recipientAddress: RECIPIENT,
prefill: {
amount: "0.1",
},
}}
/>
);
}Configuration
Generate the exact Send configuration needed for your app on the demo app. It generates the complete config object.
Update the widget appearance, default send token, amount defaults, and recipient. See your changes in the live preview and copy the config.
Configure Send widget
Send uses only mode: "send". This mode is exact-out: users enter the token amount to send, pay-with sources are selected, and the flow submits through the v2 transfer execution path.
| Prop | Required | Description |
|---|---|---|
config.mode | Yes | Must be "send". |
config.destination.chain | Optional | Restricts the destination chain when supplied. If omitted, users can change chains. |
config.destination.tokens | Optional | Restricts destination tokens when supplied with destination.chain. Each token needs address, symbol, and decimals. |
config.recipientAddress | Optional | Prefills and locks the recipient address. A recipient is required before users can submit. |
config.prefill.amount | Optional | Prefills the exact output send amount. Must be greater than 0. |
config.prefill.token | Optional | Sets the initial destination token without restricting later choices. Ignored when config.destination.tokens is supplied. |
config.validation.minAmount | Optional | Minimum amount. Must be 0 or greater. |
config.validation.maxAmount | Optional | Maximum amount. Must be greater than 0. |
config.theme | Optional | "dark", "light", or "system". Defaults to light; system follows OS changes. Overrides appearance.mode. |
config.appearance | Optional | Supports heading, appName, appLogoURL, mode, and primaryColor. |
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. |
onStart, onComplete, onError, onClose | Optional | Lifecycle callbacks for host apps. |
type DestinationToken = {
address: `0x${string}`;
symbol: string;
decimals: number;
logo?: string;
};
interface SendConfig {
mode: "send";
destination?: {
chain?: number;
tokens?: DestinationToken[];
};
recipientAddress?: `0x${string}`;
prefill?: {
amount?: string;
token?: DestinationToken & { chain: number };
};
validation?: {
minAmount?: string;
maxAmount?: string;
};
}destination.tokens when you want to restrict the selector. Use prefill.token when you only want the initial token selected and still want users to choose from the full supported list. If both are supplied, destination.tokens[0] is honored and prefill.token is ignored.How is this guide?