React Hook

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. This includes appearance — changing the theme prop on a mounted component has no effect. Either pass appearance: { theme: 'system' } so the hosted flow tracks the OS theme on its own, or remount the component with a key when your theme changes. See Dark and light mode.

The hook does not expose the embedded presentation’s resize event. Use the Deposit class when embedding Blink inside an aggregator panel.

Return value

Property	Type	Description
`status`	`DepositStatus`	Current phase: `'idle'`, `'signer-loading'`, `'iframe-active'`, `'completed'`, or `'error'`.
`result`	`DepositResult \| null`	Last successful deposit result. Reset to `null` when a new deposit starts.
`error`	`DepositError \| null`	Last transfer error. Reset to `null` on successful completion.
`displayMessage`	`string \| null`	User-friendly error message derived from `error` via `getDisplayMessage()`, or `null` when there is no error.
`isActive`	`boolean`	`true` 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`	`() => void`	No-op. Retained for API compatibility.
`close`	`() => void`	Close 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';

Deposit SDK (Web)

Deposit SDK (Mobile)

Usage

Parameters

Return value

Exported types

​Usage

​Parameters

​Return value

​Exported types

Usage

Parameters

Return value

Exported types