How to Sign Messages and Send Transactions on Bitcoin using AppKit

Learn how to use Reown AppKit for essential wallet functionalities such as signing messages 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.

This guide takes 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 Cloud at https://cloud.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.

1. Start by importing the useAppKitProvider and useAppKitAccount hooks.

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

2. 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 explain before.

// Get the wallet provider with the AppKit hook
const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122');

// AppKit hook to get the address and check if the user is connected
const { address, isConnected } = useAppKitAccount() 

Sign a message

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

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

// function to sing a msg 
const 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);
}

4. Finally, in order to call the function:

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

Send a transaction in Bitcoin

3. Create the function to raise the modal to send the transaction

// function to send a TX
const handleSendTx = () => {
    const signature = await walletProvider.sendTransfer({
        recipient: recipientAddress,
        amount: "1000" // amount in satoshis
      })

    // print the Transaction Signature in console
    console.log(signature);
}

4. Finally, in order to call the function:

return (
    isConnected && (
    <div >
        <button onClick={handleSendTx}>Send Transaction</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 and send transactions in the Bitcoin blockchain.

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