From 6a39809c199a733803838b18aa4905b72f121c3c Mon Sep 17 00:00:00 2001 From: Tomas Rawski Date: Wed, 1 Jan 2025 17:08:33 -0300 Subject: [PATCH 1/4] add bitcoin guide --- .../recipes/bitcoin-send-transaction.mdx | 120 ++++++++++++++++++ sidebars.js | 1 + 2 files changed, 121 insertions(+) create mode 100644 docs/appkit/recipes/bitcoin-send-transaction.mdx diff --git a/docs/appkit/recipes/bitcoin-send-transaction.mdx b/docs/appkit/recipes/bitcoin-send-transaction.mdx new file mode 100644 index 00000000..65f90519 --- /dev/null +++ b/docs/appkit/recipes/bitcoin-send-transaction.mdx @@ -0,0 +1,120 @@ +--- +title: Send a Bitcoin Transaction Using AppKit Web +--- + +import GithubBox from '../../components/GithubBox' + +# 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 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 explain before. +```js +// Get the wallet provider with the AppKit hook +const { walletProvider } = useAppKitProvider('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 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: + +```jsx +return ( + isConnected && ( +
+ +
+ ) + ) +``` + +### Send a transaction in Bitcoin + +3. Create the 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, in order to call the function: + +```jsx +return ( + isConnected && ( +
+ +
+ ) + ) +``` + +## 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! \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 2bd55cd6..10cb9a6f 100644 --- a/sidebars.js +++ b/sidebars.js @@ -285,6 +285,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' } ] }, From a936b2fe313636fb333b31d88282d5a952a81326 Mon Sep 17 00:00:00 2001 From: Tomas Rawski Date: Wed, 1 Jan 2025 17:08:44 -0300 Subject: [PATCH 2/4] small fix solana guide --- docs/appkit/recipes/solana-send-transaction.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/appkit/recipes/solana-send-transaction.mdx b/docs/appkit/recipes/solana-send-transaction.mdx index 0d749bac..7cc3c46e 100644 --- a/docs/appkit/recipes/solana-send-transaction.mdx +++ b/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('solana'); From 268aebad28e3c1150ef7ca352b142828765a4bc1 Mon Sep 17 00:00:00 2001 From: Tomas Rawski Date: Thu, 2 Jan 2025 15:41:01 -0300 Subject: [PATCH 3/4] grammar check and add get balance --- .../recipes/bitcoin-send-transaction.mdx | 54 ++++++++++++++++--- 1 file changed, 46 insertions(+), 8 deletions(-) diff --git a/docs/appkit/recipes/bitcoin-send-transaction.mdx b/docs/appkit/recipes/bitcoin-send-transaction.mdx index 65f90519..059773e5 100644 --- a/docs/appkit/recipes/bitcoin-send-transaction.mdx +++ b/docs/appkit/recipes/bitcoin-send-transaction.mdx @@ -4,9 +4,9 @@ title: Send a Bitcoin Transaction Using AppKit Web import GithubBox from '../../components/GithubBox' -# How to Sign Messages and Send Transactions on Bitcoin using AppKit +# 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 and sending transactions. +Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, getting the balance and sending transactions. --- @@ -14,10 +14,11 @@ 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 takes approximately 20 minutes to complete. -Let’s dive in! +Let's dive in! ## Prerequisites - A fundamental understanding of JavaScript and React. @@ -42,7 +43,7 @@ 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. +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. ```js // Get the wallet provider with the AppKit hook const { walletProvider } = useAppKitProvider('bip122'); @@ -58,7 +59,7 @@ In order to raise the modal to sign a message with your wallet continue with the 3. Create a function to prompt the modal for signing the message. ```js -// function to sing a msg +// function to sing a message const handleSignMsg = async () => { // raise the modal to sign the message const signature = await walletProvider.signMessage({ @@ -112,9 +113,46 @@ return ( ) ``` +### 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 in 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, in order to call the function: + +```jsx +return ( + isConnected && ( +
+ +
+ ) + ) +``` + ## 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. +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’s functionality and user experience! \ No newline at end of file +Keep exploring AppKit to enhance your dApp's functionality and user experience! \ No newline at end of file From 09036ef3357d96e44ceb0593c01ec5052b7263f4 Mon Sep 17 00:00:00 2001 From: Tomas Rawski Date: Mon, 6 Jan 2025 11:54:39 -0300 Subject: [PATCH 4/4] fix grammar errors --- .../recipes/bitcoin-send-transaction.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/appkit/recipes/bitcoin-send-transaction.mdx b/docs/appkit/recipes/bitcoin-send-transaction.mdx index 059773e5..dc1248bb 100644 --- a/docs/appkit/recipes/bitcoin-send-transaction.mdx +++ b/docs/appkit/recipes/bitcoin-send-transaction.mdx @@ -16,7 +16,7 @@ In this recipe, you will learn how to: - Send a transaction to the Bitcoin blockchain. - Get the balance from an Address. -This guide takes approximately 20 minutes to complete. +This guide will take approximately 20 minutes to complete. Let's dive in! @@ -43,7 +43,7 @@ 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. +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('bip122'); @@ -59,7 +59,7 @@ In order to raise the modal to sign a message with your wallet continue with the 3. Create a function to prompt the modal for signing the message. ```js -// function to sing a message +// function to sign a message const handleSignMsg = async () => { // raise the modal to sign the message const signature = await walletProvider.signMessage({ @@ -72,7 +72,7 @@ const handleSignMsg = async () => { } ``` -4. Finally, in order to call the function: +4. Finally, to call the function: ```jsx return ( @@ -86,7 +86,7 @@ return ( ### Send a transaction in Bitcoin -3. Create the function to raise the modal to send the transaction +3. Create a function to raise the modal to send the transaction ```js // function to send a TX @@ -101,7 +101,7 @@ const handleSendTx = () => { } ``` -4. Finally, in order to call the function: +4. Finally, to call the function: ```jsx return ( @@ -120,7 +120,7 @@ return ( ```js const handleGetBalance = () => { - const isTestnet = true; // change to false if you want to get the balance in mainnet + 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( @@ -138,7 +138,7 @@ const handleGetBalance = () => { } ``` -4. Finally, in order to call the function: +4. Finally, to call the function: ```jsx return ( @@ -155,4 +155,4 @@ return ( 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's functionality and user experience! \ No newline at end of file +Keep exploring AppKit to enhance your dApp functionality and user experience! \ No newline at end of file