@nexm-io/bitsnap-utxo-wallet-adapter

Get Started

npm i @nexm-io/bitsnap-utxo-wallet-adapter @tanstack/react-query

Run Example

npm i & npm run build
cd example
npm i & npm run dev

Introduction

Connect to UTXO based-model chains with similar wagmi React hooks.

Support Connectors:

Support Bitcoin Wallet Connectors:

• [x] Unisat
• [x] Xverse
• [x] BitSnap UTXO Wallet
• [ ] OKX (Orbit/Moon)
• [ ] Leather
• [ ] Phantom
• [ ] Magic Eden

Example:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BitsnapAdapterConfig, createClient, getDefaultProviders } from "@nexm-io/bitsnap-utxo-wallet-adapter";
import { UnisatConnector } from "@nexm-io/bitsnap-utxo-wallet-adapter/connectors/unisat";
import { XverseConnector } from "@nexm-io/bitsnap-utxo-wallet-adapter/connectors/xverse";
import { BitsnapConnector } from "@nexm-io/bitsnap-utxo-wallet-adapter/connectors/bitsnap";

const client = createClient({
    autoConnect: true,
    provider: getDefaultProviders,
    connectors: [
        new UnisatConnector(),
        new XverseConnector(),
        new BitsnapConnector()
    ],
})

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            gcTime: 1_000 * 60 * 60 * 24, // 24 hours
            networkMode: 'offlineFirst',
            refetchOnWindowFocus: false,
            retry: 0,
        },
        mutations: {
            networkMode: 'offlineFirst',
        },
    },
})

function App() {
  return (
    <BitsnapAdapterConfig client={client}>
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    </BitsnapAdapterConfig>
  )
}

Connector

import { useAccount, useConnect, useDisconnect, useNetwork, useSwitchNetwork, useClient, useBalances } from "@nexm-io/bitsnap-utxo-wallet-adapter";

function ConnectButton() {
  const { connect, connectors } = useConnect();

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

Hooks

import { 
    useAccount, 
    useConnect, 
    useDisconnect, 
    useNetwork, 
    useSwitchNetwork, 
    useClient, 
    useBalances,
    useSignMessage,
    useSendNativeCoin
} from "@nexm-io/bitsnap-utxo-wallet-adapter";

Balance

const { data } = useBalances({
  watch: true,
})

Sign Message

const { data, isSuccess, isPending, signMessage } = useSignMessage();

signMessage({ message, address: senderAddress })

if (isSuccess) {
    console.log(data.signature)
}

Sign PSBT

const { data, isSuccess, signPspt } = useSignPsbt();

signPspt({
  psbtBase64: psbtB64,
  options: {
    signInputs: [{ address: senderAddress, index: 0 }],
    autoFinalized: true,
    broadcast: true
  }
})

if (isSuccess) {
    console.log(data)
}

Send Transaction

const { data, isPending, isSuccess, sendNativeCoin } = useSendNativeCoin();

sendNativeCoin({ 
    addressTo, 
    amount: satAmount, 
    senderAddress: senderAddress, 
    options: {  feeRate: 10 } 
})

if (isSuccess) {
    console.log(data)
}