Merge pull request #226 from reown-com/feat/add-bitcoin-guide

feat: add bitcoin guide

docs/appkit/recipes/bitcoin-send-transaction.mdx

@@ -0,0 +1,158 @@
+---
+title: Send a Bitcoin Transaction Using AppKit Web
+---
+
+import GithubBox from '../../components/GithubBox'
+
+# 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.
+
+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 Cloud at https://cloud.reown.com
+
+## Final project
+<GithubBox name="Appkit Example for Interacting with the Bitcoin Blockchain" url="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-bitcoin" description="Clone this Github repo to try it out locally."></GithubBox>
+
+## AppKit Minimal Installation
+
+You can start a small project following the guidelines from our [installation React docs using Bitcoin](https://docs.reown.com/appkit/react/core/installation?platform=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.
+
+```js
+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 explained before.
+```js
+// 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.
+
+```js
+// function to sign a message
+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, to call the function:
+
+```jsx
+return (
+    isConnected && (
+    <div >
+        <button onClick={handleSignMsg}>Sign Message</button>  
+    </div>
+    )
+  )
+```
+
+### Send a transaction in Bitcoin
+
+3. Create a function to raise the modal to send the transaction
+
+```js
+// 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, to call the function:
+
+```jsx
+return (
+    isConnected && (
+    <div >
+        <button onClick={handleSendTx}>Send Transaction</button>  
+    </div>
+    )
+  )
+```
+
+### Get Balance
+
+3. Create the function to get the balance
+
+```js
+
+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(caipNetwork.caipNetworkId))
+    // 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);
+}
+```
+
+4. Finally, to call the function:
+
+```jsx
+return (
+    isConnected && (
+    <div >
+        <button onClick={handleGetBalance}>Get Balance</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 and send transactions in the Bitcoin blockchain. 
+
+Keep exploring AppKit to enhance your dApp functionality and user experience!

docs/appkit/recipes/solana-send-transaction.mdx

@@ -44,7 +44,6 @@ In this guide, we are going to use the library [@solana/web3.js](https://solana.
 Fetching a user's balance is straightforward using the Connection object from Solana.
 
 
-
 1. Start by importing the `useAppKitConnection` hook from the solana Adapter, the `useAppKitAccount` AppKit hook to get the account information and `PublicKey` from the solana/web3 library.
 ```js
 import { useAppKitConnection } from '@reown/appkit-adapter-solana/react'
@@ -95,7 +94,7 @@ import { useAppKitProvider } from '@reown/appkit/react';
 import type { Provider } from '@reown/appkit-adapter-solana/react';
 ```
 
-2. Extract the `walletProvider` function from the `useAppKitProvider` hook. This function allows you to prompt the connected wallet to sign a specific message. Also get the address and isConnected as explain before.
+2. Extract the `walletProvider` function from the `useAppKitProvider` hook. This function allows you to prompt the connected wallet to sign a specific message. Also the `useAppKitAccount` AppKit hook to get the address and isConnected as explain before.
 ```js
 // Get the wallet provider with the AppKit hook
 const { walletProvider } = useAppKitProvider<Provider>('solana');

sidebars.js

@@ -286,6 +286,7 @@ module.exports = {
                 { type: 'doc', label: 'EVM Transactions using Wagmi', id: 'appkit/recipes/wagmi-send-transaction'},
                 { type: 'doc', label: 'EVM Transactions using Ethers', id: 'appkit/recipes/ethers-send-transaction'},
                 { type: 'doc', label: 'Solana Transactions using AppKit', id: 'appkit/recipes/solana-send-transaction'},
+                { type: 'doc', label: 'Bitcoin Transactions using AppKit', id: 'appkit/recipes/bitcoin-send-transaction'},
                 { type: 'doc', label: 'Support Send Calls', id: 'appkit/recipes/switching-to-send-calls' } 
               ]
             },