From: BitcoinZavior Date: Mon, 29 Aug 2022 19:18:05 +0000 (-0400) Subject: sync, get balance and get address X-Git-Url: http://internal-gitweb-vhost/script/%22https:/%22example_cli/enum.Commands.html/struct.InvalidAddressVersionError.html?a=commitdiff_plain;h=61c08f963bdfa4b07d8f49a44ca61fdc69fe8524;p=bitcoindevkit.org sync, get balance and get address --- diff --git a/docs/tutorials/exploring_bdk_rn.md b/docs/tutorials/exploring_bdk_rn.md index d0024153b1..8f8f67ea91 100644 --- a/docs/tutorials/exploring_bdk_rn.md +++ b/docs/tutorials/exploring_bdk_rn.md @@ -15,7 +15,7 @@ The wallet we create will be a non custodial HD Wallet, the app will be able to The tutorial will focus on bitcoin and bdk-rn concepts and api and will gloss over react native related aspects. All the code for this tutorial is available on Github at https://github.com/LtbLightning/AwesomeBitcoinApp -Figure 1. is our end goal, an app that interacts with the bitcoin network manages keys and utxos, and synchs utxos from new blocks and broadcasts tansactioins. +Figure 1. is our end goal, an app that interacts with the bitcoin network manages keys and UTXOs, and synchs UTXOs from new blocks and broadcasts transactions. @@ -34,7 +34,7 @@ The bitcoin concepts used in this blog post are detailed and explained very well Mastering Bitcoin(HD Wallet chapter): https://www.oreilly.com/library/view/mastering-bitcoin/9781491902639/ch04.html Bitcoin Output Descriptors from bitocoin GitHub: https://github.com/bitcoin/bitcoin/blob/master/doc/descriptors.md -Now lets jump into Bitcoin Dev Kit 🪂 +Now let's jump into Bitcoin Dev Kit ## Bitcoin Dev Kit and bdk-rn @@ -67,7 +67,7 @@ This should start building the app and then launch the app in an ios simulator. ## Setting up styles and RN app structure -Lets setup a very basic app structure and some RN scaffolding. Lets create a `src` folder in the project root and then add new folders for `assets`, `elements`, `screens` and `styles` +Let's setup a very basic app structure and some RN scaffolding. Lets create a `src` folder in the project root and then add new folders for `assets`, `elements`, `screens` and `styles` To make this quick you can download the styles and images used in the tutorial from the repository. The image assets, `Button.tsx` and `styles.js` can be take from https://github.com/LtbLightning/AwesomeBitcoinApp/tree/master/src and moved the folders as shown. Alternatively you can write your own styles and use your own images if you intend to style the app in a different way. @@ -335,13 +335,13 @@ We should now have a working" Generate Mnemonic" button which displays the new m -A quick recap, we added a button to trigger call to a method. We created a click handler to call bdk-rn. Set the display state variable to display the output of the call in the display section. We will follow this pattern for the remaining calls to bdk-rn. +A quick recap, we added a button to trigger a call to a method. We created a button click event handler to call bdk-rn. Set the display state variable to display the output of the call in the display section. We will follow this pattern for the remaining calls to bdk-rn. -## Wallet and balance +## Creating a wallet -Before moving on the wallet and balances lets add a section at the to display the balance of the wallet. +Before moving on to creating a wallet, let's add a section at the to display the balance of the wallet. -To display the balance we will need to state variable to store the balance and a display section to display. +To display the balance we will need a state variable to store the balance and a display section to display it. Under the `mnemonic` and `displayText` variables, lets add one for `balance` as well @@ -353,7 +353,7 @@ Under the `mnemonic` and `displayText` variables, lets add one for `balance` as const [balance, setBalance] = useState(); ``` -And we will shortly need a `wallet`, a `syncResponse` and `address` as well so lets add all these: +And we will shortly need a `wallet` and `syncResponse` as well so lets add these too. ```jsx const Home = () => { @@ -363,12 +363,11 @@ And we will shortly need a `wallet`, a `syncResponse` and `address` as well so l const [balance, setBalance] = useState(); const [wallet, setWallet] = useState(); const [syncResponse, setSyncResponse] = useState(); - const [address, setAddress] = useState(); ``` Now we need some `jsx` code to display the balance. -Just below `{/* Balance */}` and above `{*/ method call result */}` add the following ui components +Just below `{/* Balance */}` and above `{*/ method call result */}` add the following ui components to display the balance. We only want to show the balance when it has a value so we will use a tertiary operate for a quick check. ```jsx {/* Balance */} @@ -381,10 +380,10 @@ Just below `{/* Balance */}` and above `{*/ method call result */}` add the fol {/* method call result */} ``` -We will next add code to create a wallet, sync utxos with bitcoin node and get balance. +We will next add code to create a wallet. To create a wallet the simple approach is to call `createWallet()` method with `mnemonic` , `password` and `network`. -Lets add another click hander below where we have the `getMnemonic()` method +Lets add another click handler below where we have the `getMnemonic()` method We want to see the response of this call so lets use `setDisplayText()` to see the output ```javascript @@ -402,7 +401,7 @@ We want to see the response of this call so lets use `setDisplayText()` to see t A new button will be required to trigger `createWallet` -Lets add a new button just above `{/* input boxes and send transaction button */}` +Let's add a new button just above `{/* input boxes and send transaction button */}` ```jsx