@blink-testing/deposit-widget

Drop-in deposit widget for Monad. Users deposit from any chain/token via QR code (Relay) or Connect Wallet (Blink) and receive MON on Monad (chain 143).

Install

npm install @blink-testing/deposit-widget

Quick Start — Vanilla JS

import { DepositWidget } from "@blink-testing/deposit-widget";

const widget = new DepositWidget({
  recipient: "0x...userEmbeddedWallet...",
  signer: "/api/sign-payment",
});

widget.on("complete", (result) => {
  console.log("Deposit complete:", result.type, result.transferId);
});

widget.on("close", () => {
  console.log("Widget closed");
});

// Open the widget (renders in a modal overlay)
widget.open();

Quick Start — React

import { useDepositWidget } from "@blink-testing/deposit-widget/react";

function DepositButton({ walletAddress }: { walletAddress: string }) {
  const { open, status, result } = useDepositWidget({
    recipient: walletAddress,
    signer: "/api/sign-payment",
  });

  return (
    <>
      <button onClick={open} disabled={status === "open"}>
        Deposit
      </button>
      {result && <p>Transfer complete!</p>}
    </>
  );
}

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | recipient | string | required | User's wallet address on Monad (receives MON) | | signer | string | required | Your Blink signer endpoint URL | | amount | number | 50 | Default USD amount for Blink wallet-connect flow | | chainId | number | 143 | Destination chain ID | | token | string | 0x000...0 | Destination token (native MON) | | widgetUrl | string | unpkg CDN | URL where the widget iframe bundle is hosted | | assetsUrl | string | auto | Base URL for logos/icons | | container | HTMLElement | document.body | Where to mount the overlay | | debug | boolean | false | Enable console logging |

Events

| Event | Data | Description | |-------|------|-------------| | open | — | Widget opened | | close | — | Widget closed | | complete | { type, transferId?, elapsedSeconds? } | Deposit succeeded | | error | { message, code? } | Something failed |

Prerequisites

The Connect Wallet / Sign in with Blink flow requires:

1. An ECDSA P-256 key pair registered with Blink
2. A server-side signer endpoint (/api/sign-payment)
3. A merchantId from Blink

See SDK_INTEGRATION.md for the full setup guide including signer implementation, key generation, and an AI-friendly setup prompt.

License

MIT