<TransferButton>
SET UP THE SDK BEFORE YOU START:
- You can find the SDK setup instructions in the Quickstart page.
- We also created a tutorial to make it easier to understand how devs need to initialize the Nexus SDK in their project.
Use the TransferButton
component for a pre-built interface that handles token transfers to any wallet address on any supported chain.
The widget automatically manages the transfer flow, UI modals, and transaction state.
Props
Typescript
import type { TransferParams } from '@avail-project/nexus-core';
interface TransferButtonProps {
title?: string; // Appears in the modal header once initialization completes
prefill?: Partial<TransferParams>; // Params required by the `.transfer()` function
className?: string; // Applied to the wrapper div around your trigger content
children(props: { onClick(): void; isLoading: boolean }): React.ReactNode; // render prop trigger
}
Example
Note:
Refer to the API reference for a full list of supported tokens and chains,
as well as more examples of how to use the TransferButton
widget.
Here are examples of how to use the TransferButton
widget:
Basic Transfer Button
App.tsx
import { NexusProvider, TransferButton } from '@avail-project/nexus-widgets';
function App() {
return (
<TransferButton>
{({ onClick, isLoading }) => (
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Processing...' : 'Send Funds'}
</button>
)}
</TransferButton>
);
}
Pre-filled Transfer Button
App.tsx
import { NexusProvider, TransferButton } from '@avail-project/nexus-widgets';
function App() {
return (
<TransferButton
prefill={{
chainId: 137, // Polygon
token: 'USDC',
amount: '100',
recipient: '0x742d35Cc6634C0532925a3b8D4C9db96c4b4Db45',
}}
>
{({ onClick, isLoading }) => (
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Transferring...' : 'Send 100 USDC to Polygon'}
</button>
)}
</TransferButton>
);
}
Last updated on