<TransferButton>
SET UP THE SDK BEFORE YOU START:
You can find the SDK setup instructions in the Overview page.
Use the TransferButton
component to provide a pre-built transfer 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.
Note:
-
We made a small demo website that implements the
TransferButton
widget. Check it out here: nexus-ui-components-demo.vercel.app  -
If you just want to see an example that uses the
TransferButton
widget, refer to the repo here: nexus-ui-components-demo 
Props
interface TransferButtonProps {
prefill?: TransferConfig;
children: (props: { onClick: () => void; isLoading: boolean }) => ReactNode;
className?: string;
}
interface TransferConfig {
chainId?: number;
token?: SUPPORTED_TOKENS;
amount?: string;
recipient?: `0x${string}`;
}
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
import { TransferButton } from '@avail-project/nexus';
function App() {
return (
<TransferButton>
{({ onClick, isLoading }) => (
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Processing...' : 'Send Funds'}
</button>
)}
</TransferButton>
);
}
Pre-filled Transfer Button
import { TransferButton } from '@avail-project/nexus';
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>
);
}