How to Sign Messages, get the balance and send transactions on Bitcoin using AppKit

Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, getting the balance and sending transactions.

In this recipe, you will learn how to:

Sign a message using a connected wallet.
Send a transaction to the Bitcoin blockchain.
Get the balance from an Address.
Get the Public Key.

This guide will take approximately 20 minutes to complete.

Let's dive in!

Prerequisites#

A fundamental understanding of JavaScript and React.
A minimal installation of AppKit in React.
Obtain a new project Id on Reown Dashboard at https://dashboard.reown.com

Final project#

Appkit Example for Interacting with the Bitcoin Blockchain

Clone this Github repo to try it out locally.

AppKit Minimal Installation#

You can start a small project following the guidelines from our installation React docs using Bitcoin

Start building#

In this guide we are going to use AppKit to make the calls to the Bitcoin blockchain and interact with the wallet.

Start by importing the useAppKitProvider and useAppKitAccount hooks.

import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react";import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

Extract the walletProvider function from the useAppKitProvider hook. This function allows you to prompt the connected wallet to sign a specific message. Also, we are using useAppKitAccount to get the address and isConnected as explained before.

// Get the wallet provider with the AppKit hookconst { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");// AppKit hook to get the address and check if the user is connectedconst { allAccounts, address, isConnected } = useAppKitAccount();

Sign a message#

In order to raise the modal to sign a message with your wallet continue with the following steps:

Create a function to prompt the modal for signing the message.

// function to sign a messageconst handleSignMsg = async () => {  // raise the modal to sign the message  const signature = await walletProvider.signMessage({    address,    message: "Hello Reown AppKit!",  });  // Print the signed message in console  console.log(signature);};

Finally, to call the function:

return (  isConnected && (    <div>      <button onClick={handleSignMsg}>Sign Message</button>    </div>  ));

Send a transaction in Bitcoin#

Create a function to raise the modal to send the transaction

// function to send a TXconst handleSendTx = () => {    const signature = await walletProvider.sendTransfer({        recipient: recipientAddress,        amount: "1000" // amount in satoshis      })    // print the Transaction Signature in console    console.log(signature);}

Finally, to call the function:

return (  isConnected && (    <div>      <button onClick={handleSendTx}>Send Transaction</button>    </div>  ));

Get Balance#

Create the function to get the balance

const handleGetBalance = () => {    const isTestnet = true; // change to false if you want to get the balance on mainnet    // get all the utxos from the address    const response = await fetch(        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`    );    const data = await response.json();    // get the utxos - the list of unspent transactions that the sender has    const utxos = await getUTXOs(address, isTestnet)    // return the sum of the utxos ... The balance of the sender    const balance = utxos.reduce((sum, utxo) => sum + utxo.value, 0)    // print the balance in console    console.log(balance);}// Get the utxos ... List of unspent transactions that the sender hasconst getUTXOs = async (address: string, isTestnet: boolean = false): Promise<UTXO[]> => {    const response = await fetch(        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`    )    return await response.json();}// Type of the UTXO ... List of unspent transactions that the sender hastype UTXO = {    txid: string    vout: number    value: number    status: {        confirmed: boolean        block_height: number        block_hash: string        block_time: number    }}

Finally, to call the function:

return (  isConnected && (    <div>      <button onClick={handleGetBalance}>Get Balance</button>    </div>  ));

Get the Public Key#

Create the function to get the public key

const handleGetPublicKey = async () => {  // get the public key from the account  const bip122Account = allAccounts?.find((a) => a.address === address);  let publicKey = bip122Account?.publicKey || "";  // print the public key in console  console.log(publicKey);};

Finally, to call the function:

return (  isConnected && (    <div>      <button onClick={handleGetPublicKey}>Get Public Key</button>    </div>  ));

Conclusion#

By following this guide, you've learned how to integrate Reown AppKit and Bitcoin into your React application to perform essential wallet operations. You can now sign messages, get the balance, get the public key and send transactions in the Bitcoin blockchain.

Keep exploring AppKit to enhance your dApp functionality and user experience!