Usage with React

The @bigmi/react package contains React hooks and components that make it a breeze to build Bitcoin applications in React. To get started, install the latest version of all bigmi packages.

Installation

pnpm add @bigmi/core @bigmi/client @bigmi/react

Getting Started

Wrap your app in the BigmiProvider to enable Bigmi functionality in your React applications.

import { BigmiProvider } from '@bigmi/react'
import { config } from './config.ts'

function Main() {
  return (
    <BigmiProvider
      config={config}
      reconnectOnMount={false} 
    >
      <YourApp />
    </BigmiProvider>
  )
}

import { bitcoin, http, createClient } from '@bigmi/core'
import { binance, xverse, phantom, createConfig } from '@bigmi/client'

// Create wallet connectors
const connectors = [
  binance(),
  xverse(),
  phantom()
]

// Create configuration
export const config = createConfig({
  chains: [bitcoin],
  connectors,
  client: ({ chain }) => createClient({ chain, transport: http() }),
  ssr: true // if using Next.js or SSR
})

Hooks

After setting up the config and providers, you can use hooks provided by @bigmi/react.

Connecting to a wallet

Bigmi provides the useConnect hook to handle connecting to wallets. The useAccount hook can also be used to fetch all information about a wallet account.

import { useAccount } from '@bigmi/react'
import { ConnectWallet } from './ConnectWallet.tsx'

function App() {
  const { account, isConnected, connector } = useAccount()
  const handleDisconnect = () => connector.disconnect()

  return (
    <div>
      {isConnected ? (
        <>
          <p>Connected: {account.address}</p>
          <button onClick={handleDisconnect}>Disconnect</button>
        </>
      ) : (
        <ConnectWallet />
      )}
    </div>
  )
}

import { useConnect } from '@bigmi/react'

export function ConnectWallet() {
  const { connect, connectors } = useConnect()

  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect({connector})}
        >
          Connect {connector.name}
        </button>
      ))}
    </div>
  )
}

import { BigmiProvider } from '@bigmi/react'
import { App } from './App.tsx'
import { config } from './config.ts'

function Main() {
  return (
    <BigmiProvider
      config={config}
    >
      <App />
    </BigmiProvider>
  )
}

import { bitcoin, http, createClient } from '@bigmi/core'
import { binance, xverse, phantom, createConfig } from '@bigmi/client'

// Create wallet connectors
const connectors = [
  binance(),
  xverse(),
  phantom()
]

// Create configuration
export const config = createConfig({
  chains: [bitcoin],
  connectors,
  client: ({ chain }) => createClient({ chain, transport: http() }),
  ssr: true // if using Next.js or SSR
})

Signing a PSBT

The useConfig hook can be used to get the config client object, which can be used to perform various operations.

SignTransaction.tsx

import { getConnectorClient } from '@bigmi/client'
import { useConfig, useAccount } from '@bigmi/react'
import { signPsbt } from '@bigmi/core'

function SignTransaction() {
  const config = useConfig()
  const { account } = useAccount()

  const handleSign = async () => {
    const client = await getConnectorClient(config)
    
    // send a transaction to the wallet for the user to sign
    const signedPsbt = await signPsbt(client, {
        psbt: 'base64_encoded_psbt',
        account
    })
  } 

  return (
    <button onClick={handleSign}>Sign Transaction </button>
  )
}

​Installation

​Getting Started

​Hooks

​Connecting to a wallet

​Signing a PSBT

Installation

Getting Started

Hooks

Connecting to a wallet

Signing a PSBT