​

BTC Connect for Web

​

Getting Started

​

Installation

yarn add @particle-network/btc-connectkit

# OR

npm install @particle-network/btc-connectkit

​

Setting up the Particle dashboard

​

Initialization

• projectId, previously retrieved from the Particle dashboard.
• clientKey, previously retrieved from the Particle dashboard.
• appId, previously retrieved from the Particle dashboard.
• aaOptions, an object containing:
  • accountContracts, which should be another object with:
    • BTC, an array of objects that take:
      • chainIds, an array of chain IDs representing the blockchains you intend to use within your application (these chains are also supported within @particle-network/chains, in which you can export dedicated objects containing the chain ID, such as PolygonMumbai.id).
      • version, which dictates the smart account version you’d like to use. Currently, both 1.0.0 and 2.0.0 are supported, depending on the chain (chainIds) you define. 2.0.0 is a newer implementation with better gas optimizations.

• walletOptions, an optional object containing:
  • visible, a Boolean determining whether or not the Particle Wallet modal is shown after connection. In this case, the wallet modal can be used to control the smart account, although if you intend to implement equivalent functionality within your application, such as user-defined transactions, you may not need this.

• UnisatConnector
• OKXConnector
• BitgetConnector
• TokenPocketConnector
• BybitConnector
• WizzConnector
• XverseConnector

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  ConnectProvider,
  OKXConnector,
  UnisatConnector,
  BitgetConnector,
  TokenPocketConnector,
  BybitConnector,
  WizzConnector,
  XverseConnector
} from '@particle-network/btc-connectkit';
import App from './App';

import { MerlinTestnet, Merlin, LumiBitTestnet, PolygonMumbai, BEVMTestnet, BEVM, MAPProtocolTestnet, MAPProtocol, SatoshiVMTestnet, BSquaredTestnet, AINNTestnet, Mantle, BitlayerTestnet, BotanixTestnet, PolygonzkEVMCardona  } from '@particle-network/chains';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ConnectProvider
      options={{
        projectId: process.env.REACT_APP_PROJECT_ID, // -
        clientKey: process.env.REACT_APP_CLIENT_KEY, // Retrieved from https://dashboard.particle.network
        appId: process.env.REACT_APP_APP_ID, // - 
        aaOptions: {
          accountContracts: {
            BTC: [
              {
                chainIds: [MerlinTestnet.id, Merlin.id, LumiBitTestnet.id, PolygonMumbai.id, BEVMTestnet.id, BEVM.id, MAPProtocolTestnet.id, MAPProtocol.id, SatoshiVMTestnet.id],
                version: '1.0.0',
              },
            	{
      					chainIds: [BitlayerTestnet.id, BotanixTestnet.id, PolygonzkEVMCardona.id, BSquaredTestnet.id, Mantle.id, AINNTestnet.id],
      					version: '2.0.0',
    					},
            ],
          },
        },
        walletOptions: {
          visible: true,
        }
      }}
      connectors={[new UnisatConnector(), new OKXConnector(), new BitgetConnector(), new TokenPocketConnector(), new BybitConnector(), new WizzConnector(), new XverseConnector()]}
    >
    <App />
    </ConnectProvider>
  </React.StrictMode>
);

​

Examples of Utilization

​

useConnectModal (for wallet connection)

• openConnectModal. This will open the aforementioned modal immediately upon being called.
• disconnect. Similarly, disconnect will reset the wallet/account state (log a user out). See the snippet below for an example of defining and using these functions from useConnectModal:

import { useConnectModal } from '@particle-network/btc-connectkit';

const { openConnectModal, disconnect } = useConnectModal();

// Opens the wallet connection model; this is often bound to a "Connect" button
const onOpenConnectModal = () => {
    openConnectModal();
}

// Disconnects the wallet; this is often bound to a "Disconnect" button
const onDisconnect = () => {
    disconnect();
}

​

useAccounts (and associated address retrieval methods)

1. BTC address retrieval through useAccounts or useBTCProvider, and:
2. EVM account retrieval through useETHProvider with account.

import { useAccounts, useBTCProvider, useETHProvider } from '@particle-network/btc-connectkit';

// BTC accounts through useAccounts
const { accounts } = useAccounts();

// BTC accounts through useBTCProvider (returns the same as accounts from useAccounts)
const { accounts } = useBTCProvider();

// EVM account through useETHProvider
const { account } = useETHProvider();

​

useBTCProvider (for native Bitcoin functions)

• getNetwork, for retrieving the current network of the wallet (Livenet or Testnet).
• switchNetwork, to forcibly switch the network. Takes a string, either ‘livenet’ or ‘testnet’.
• signMessage, to request that a user signs a message. Takes any string (the message to be signed).
• getPublicKey, for retrieving the public key of the wallet.
• sendBitcoin, for sending a standard Bitcoin transaction. This function takes the following:
  • toAddress, the recipient of the transaction.
  • satoshis, the value of the transaction in satoshis.
  • options, an optional object containing:
    • feeRate, for adjusting transaction fees.

import { useBTCProvider } from '@particle-network/btc-connectkit';

const { provider, getNetwork, switchNetwork, signMessage, getPublicKey, sendBitcoin } = useBTCProvider();

// Switches the current network (either Bitcoin Livenet or Testnet)
await switchNetwork('testnet')

// Retrieves the current network
const network = await getNetwork();

// Requests a message to be signed (through the connected wallet)
const signature = await signMessage('Hello Particle!');

// Retrieves the wallets public key
const pubKey = await getPublicKey();

// Sends a standard Bitcoin transaction
const txId = await sendBitcoin(toAddress, satoshis, options);

// Additional methods enabled by provider
provider.sendInscription(...)

​

useETHProvider (for controlling the associated smart account)

1. With native UserOperation construction and execution functions, such as buildUserOp and sendUserOp, which will mimic similar functions found within Particle Network’s AA SDK for managing transactions.
2. Through the attached EIP-1193 provider object, enabling utilization of the smart account through a standard Web3 library such as Ethers, Web3.js, viem, etc.

• chainId, the ID for the currently connected chain.
  • For a complete list of networks supported within BTC Connect, see Network Coverage.
• account, the smart account address (automatically populated upon login).
• getSmartAccountInfo, get smart account info(version, isDeployed, etc.).
• switchChain, for forcibly changing the EVM chain used through the smart account. This takes a specific chainId (should be one of the aforementioned supported chains).
• provider, the EIP-1193 provider object associated with the smart account.
• getFeeQuotes, for retrieving fee quotes (a collection of UserOperation structures based upon different fee payment mechanisms); this is equivalent to getFeeQuotes.
• buildUserOp, to build a execution-ready UserOperation with a standard transaction object.
• sendUserOp, for sending UserOperations (either objects derived from getFeeQuotes/buildUserOp, or standard transaction objects).
• publicClient, the viem PublicClient object for making standard JSON-RPC requests.

import { useETHProvider } from '@particle-network/btc-connectkit';

import { MerlinTestnet } from '@particle-network/chains';

import { ethers } from 'ethers';

const { account, getSmartAccountInfo, sendUserOp, getFeeQuotes, chainId, switchChain, publicClient, provider } = useETHProvider();

// Retrieves smart account information.
const accountInfo = await getSmartAccountInfo();

// Retrieves the current chain ID
const id = chainId;

// Switches the current connected chain
await switchChain(MerlinTestnet.id);

// Balance retrieval through publicClient
const balance = await publicClient.getBalance({ address: '0x...' });

// Sends a standard UserOperation
const tx = {
  to: '0xe8fc0baE43aA2640.......d0f6630E692e73',
  value: '100000000000',
  data: '0x', // Optional
};

const hash = await sendUserOp({ tx });

// Retrieves fee quotes
const feeQuotes = await getFeeQuotes(tx);

// Leverages provider to initialize an Ethers object - for 6.0.0+, this should use ethers.BrowserProvider
const customProvider = new ethers.providers.Web3Provider(provider, "any")

​

Master reference