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.
Copy
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.
Copy
// 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();
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.
Copy
// 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);};
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 }}
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);};
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!