Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.blink.cash/llms.txt

Use this file to discover all available pages before exploring further.

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

​
Usage

function DepositButton() {
  const {
    status,
    result,
    error,
    displayMessage,
    isActive,
    requestDeposit,
    focus,
    close,
  } = useBlinkDeposit({
    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 DepositConfig object. See Deposit Class for the full config reference. 
useBlinkDeposit(config: DepositConfig): UseBlinkDepositReturn
The Deposit 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
statusDepositStatusCurrent phase: 'idle', 'signer-loading', 'iframe-active', 'completed', or 'error'.
resultDepositResult | nullLast successful deposit result. Reset to null when a new deposit starts.
errorDepositError | 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 deposit 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 {
  DepositConfig,
  DepositStatus,
  DepositRequest,
  DepositResult,
} from '@swype-org/deposit/react';

import { DepositError, getDisplayMessage } from '@swype-org/deposit/react';