@bleepay/web3

Wagmi connector for Bleepay Wallet — session-based payments using a 6-digit code.

The user connects by entering a 6-digit code from the Bleepay mobile app. Once connected, the connector supports standard Ethereum methods (eth_sendTransaction, personal_sign, eth_signTypedData) as well as Bleep-specific methods for submitting multi-step transactions with pre-approval instructions.

Installation

npm install @bleepay/web3 @bleepay/ui @bleepay/core @wagmi/core viem

Setup

With wagmi + React

import { createBleepayConnector } from '@bleepay/web3';
import { createConfig, http } from 'wagmi';
import { mainnet, arbitrum } from 'wagmi/chains';

const bleepayConnector = createBleepayConnector({
  appInfo: {
    appName: 'My dApp',
    appUrl: 'https://mydapp.com',
    appIconUrl: 'https://mydapp.com/icon.png',
  },
});

export const config = createConfig({
  chains: [mainnet, arbitrum],
  connectors: [bleepayConnector],
  transports: {
    [mainnet.id]: http(),
    [arbitrum.id]: http(),
  },
});

With vanilla @wagmi/core

import { createBleepayConnector } from '@bleepay/web3';
import { createConfig, http, connect } from '@wagmi/core';
import { mainnet } from '@wagmi/core/chains';

const config = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
  connectors: [
    createBleepayConnector({
      appInfo: { appName: 'My App', appUrl: 'https://myapp.com' },
      defaultChainId: mainnet.id,
    }),
  ],
});

const result = await connect(config, { connector: config.connectors[0] });
// Opens a modal — user enters their 6-digit Bleepay code
console.log(result.accounts); // ['0x...']

Execute a Bleep Transaction

Use bleep_redeem to submit one or more EVM transactions (e.g. a token swap with an approval pre-step) as a single atomic Bleepay voucher. The user confirms all steps in the mobile app.

import { useConnectorClient } from 'wagmi';
import { createEvmNetwork, createEvmPayment, createEvmSendTransactionInstruction } from '@bleepay/core';

const { data: client } = useConnectorClient();

const paymentIds = await client.request({
  method: 'bleep_redeem',
  params: [
    // networks
    [createEvmNetwork({ network: 'mainnet', chainId: 1 })],
    // extras — pre-steps executed before the main payment (e.g. ERC-20 approval)
    [
      createEvmSendTransactionInstruction({
        from: '0xYourAddress',
        to: '0xTokenAddress',
        value: '0x0',
        data: '0xApproveCalldata',
        networkIndex: 0,
      }),
    ],
    // payments — the main transaction(s)
    [
      createEvmPayment({
        from: '0xYourAddress',
        to: '0xContractAddress',
        value: '0x0',
        data: '0xSwapCalldata',
        networkIndex: 0,
      }),
    ],
    // expectedPayment (optional, pass null if not applicable)
    null,
    // displayData — labels shown in the transaction confirmation modal
    [
      { label: 'Pay', value: '100 USDT' },
      { label: 'Receive', value: '0.04 ETH' },
    ],
  ],
});

console.log('Payment IDs:', paymentIds); // string[]

Standard Ethereum methods

The connector also handles standard methods transparently — your existing wagmi hooks work as-is:

// eth_sendTransaction — routed through Bleepay
const hash = await client.request({
  method: 'eth_sendTransaction',
  params: [{ from: '0x...', to: '0x...', value: '0x0', data: '0x' }],
});

// personal_sign
const signature = await client.request({
  method: 'personal_sign',
  params: ['0xAddress', '0xMessage'],
});

Get Voucher by ID

const voucher = await client.request({
  method: 'bleep_getById',
  params: ['voucher-uuid'],
});

Options

createBleepayConnector(options: BleepayWalletConfig)

| Option | Type | Default | Description | |--------|------|---------|-------------| | appInfo.appName | string | — | App name shown to the payer in the Bleepay mobile app | | appInfo.appUrl | string | — | App URL | | appInfo.appIconUrl | string | — | App icon URL | | defaultChainId | number | 1 | Chain ID used after connecting | | showTransactionStatusModal | boolean | true | Show Bleepay's transaction status modal during bleep_redeem | | apiBaseUrl | string | — | Override the default Bleepay API base URL |

Session persistence

The connector persists the session to localStorage and automatically reconnects on page reload as long as the session is still active on the Bleepay backend. No action required — wagmi's reconnect will trigger this automatically.