Skip to main content
BlinkDepositButton is a prebuilt, Blink-branded deposit button you can drop onto your page instead of designing your own. It renders a black pill with a bold “Deposit stablecoins” headline, an italic “In a Blink” subline, and overlapping USDC/USDT coin marks. 
import { BlinkDepositButton } from '@swype-org/deposit/react';
The React entry point requires react >= 18 as a peer dependency. The component is self-contained — inline styles and data-URI icons, no CSS imports or extra dependencies.

​
Usage

The button is presentation-only: it does not start a deposit by itself. Wire onClick to requestDeposit from the React hook or the Deposit class. 
import { BlinkDepositButton, useBlinkDeposit } from '@swype-org/deposit/react';

function Checkout({ userWalletAddress }: { userWalletAddress: string }) {
  const { status, error, displayMessage, requestDeposit } = useBlinkDeposit({
    signer: '/api/sign-payment',
  });

  return (
    <>
      <BlinkDepositButton
        onClick={() =>
          requestDeposit({
            amount: 50,
            chainId: 8453,
            address: userWalletAddress,
            token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
          })
        }
        loading={status === 'signer-loading'}
      />
      {error && <p className="error">{displayMessage}</p>}
    </>
  );
}

​
Props

PropTypeRequiredDescription
onClick() => voidYesFired when the user taps the button. Call requestDeposit() here — it must run from a user-gesture handler so the browser allows the iframe to open.
disabledbooleanNoDisables interaction and dims the button. Use while prerequisites are missing (for example, no wallet address yet).
loadingbooleanNoNon-interactive waiting state with a progress cursor. Use while the signer request is in flight (status === 'signer-loading').

​
Sizing and styling

  • The button fills the width of its container (width: 100%) at a fixed 56px height. Control its size by sizing the wrapping element.
  • Branding is intentionally fixed (black pill, white label, USDC/USDT marks) so the button looks the same across every Blink merchant. If you need a custom look, build your own button and wire it to requestDeposit instead — see Integrate the Deposit SDK.
  • Hover, press, disabled, and loading states are built in.