<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