Skip to main content
The useBlinkTransfer hook wraps the Transfer class with reactive React state. It manages the instance lifecycle and cleans up on unmount. 
import { useBlinkTransfer } from '@swype-org/transfer/react';
The React entry point requires react >= 18 as a peer dependency.

​
Usage

function TransferButton() {
  const {
    status,
    result,
    error,
    displayMessage,
    isActive,
    requestDeposit,
    focus,
    close,
  } = useBlinkTransfer({
    signer: '/api/sign-payment',
  });

  return (
    <>
      <button
        onClick={() =>
          requestDeposit({
            amount: 50,
            chainId: 8453,
            address: '0x1a5FdBc891c5D4E6aD68064Ae45D43146D4F9f3a',
            token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
          })
        }
        disabled={isActive}
      >
        {status === 'signer-loading' ? 'Preparing...' : 'Deposit $50'}
      </button>
      {error && <p className="error">{displayMessage}</p>}
      {result && <p>Transfer {result.transfer.id} complete!</p>}
    </>
  );
}

​
Parameters

The hook accepts a single TransferConfig object. See Transfer Class for the full config reference. 
useBlinkTransfer(config: TransferConfig): UseBlinkTransferReturn
The Transfer instance is created once on first render and destroyed on unmount. The config is read during initialization only — changing config props after mount does not reconfigure the instance.

​
Return value

PropertyTypeDescription
statusTransferStatusCurrent phase: 'idle', 'signer-loading', 'iframe-active', 'completed', or 'error'.
resultDepositResult | nullLast successful deposit result. Reset to null when a new deposit starts.
errorTransferError | nullLast transfer error. Reset to null on successful completion.
displayMessagestring | nullUser-friendly error message derived from error via getDisplayMessage(), or null when there is no error.
isActivebooleantrue when status is 'signer-loading' or 'iframe-active'.
requestDeposit(request: DepositRequest) => Promise<DepositResult>Start a transfer flow. Opens the modal iframe with the hosted transfer.
focus() => voidNo-op. Retained for API compatibility.
close() => voidClose the transfer iframe and reset to idle.

​
Exported types

The React entry point re-exports commonly used types for convenience: 
import type {
  TransferConfig,
  TransferStatus,
  DepositRequest,
  DepositResult,
} from '@swype-org/transfer/react';

import { TransferError, getDisplayMessage } from '@swype-org/transfer/react';