From: BitcoinZavior Date: Tue, 30 Aug 2022 21:11:46 +0000 (-0400) Subject: added restore and send X-Git-Url: http://internal-gitweb-vhost/script/%22https:/database/scripts/enum.BranchStrategy.html?a=commitdiff_plain;h=584b23c3361a84982b619dbba1e4c80f354cb792;p=bitcoindevkit.org added restore and send --- diff --git a/docs/tutorials/exploring_bdk_rn.md b/docs/tutorials/exploring_bdk_rn.md index 8f8f67ea91..583f20fdc9 100644 --- a/docs/tutorials/exploring_bdk_rn.md +++ b/docs/tutorials/exploring_bdk_rn.md @@ -21,7 +21,7 @@ Figure 1. is our end goal, an app that interacts with the bitcoin network manage // TODO: replace with image based on the respository , ensure buttons are in the same order and section styles are the same as the repository -BDK RN Quick Start +BDK RN Quick Start ### Prerequisites @@ -198,14 +198,17 @@ const Home = () => { export default Home; ``` - We now have a app title section and a structure to hold the rest of our app components. - + + + + + ## Calling bdk-rn methods -All `bdk-rn` methods return a json response with a data and error**All methods return response as follows:** +All `bdk-rn` methods return a json response with a data and error. All methods return response as follows: ```javascript Promise = { @@ -317,6 +320,7 @@ const [displayText, setDisplayText] = useState(''); and finally lets add the component to display the output under `{/* method call result */}` ```jsx +// screens/home.js {/* method call result */} // display the component only if displayText has a value @@ -506,7 +510,7 @@ Add `address` and `setAddress` state variables below balance and setBalance: const [address, setAddress] = useState(); ``` -A new `getAddress` Click event handler below `getBalance` click handler: +A new `getAddress` click event handler below `getBalance` click handler: ```javascript const getAddress = async () => { @@ -532,14 +536,102 @@ We should now have the following, and Get Address will be able to display a new +Now that we are able to generate a receive address we can get some testnet bitcoin from one of the public testnet faucets like https://coinfaucet.eu/en/btc-testnet/ or https://bitcoinfaucet.uo1.net/ and https://testnet-faucet.mempool.co/ + +After we send and transaction is confirmed we will need to sync wallet before we can see the new balance. + +## Restoring wallet + +The `createWallet` method creates a wallet using a `mnemonic`, in order to restore we can use the same method, we wont need to call `generateMnemonic` as we will already have a `mnemonic` to restore with. + +Let's add a input box to enter our own `mnemonic`, we will use the `mnemonic` entered in the input box to create a wallet. + +Let's add input box for `mnemonic` below the Generate Mnemonic button. + +```jsx + +``` + +This code will also display the mnemonic state variable in the input box, if we click Generate Mnemonic the generated mnemonic will show up in the input box. We can overwrite it with our own mnemonic and doing so will also overwrite the mnemonic state variable. This way the mnemonic displayed will be the one used to create the wallet. + +we are already using the mnemonic state variable in the createWallet Method so no other changes are required. + +We can now use our own mnemonic and use it to restore a wallet. This will come in handy if we have a wallet with testnet bitcoin as these are hard to come by. + + + + +## Sending bitcoin +We are now able to receive bitcoin, lets add functionality to send as well. +`bdk-rn` has a number of transaction related methods to enable varied use cases. A new send transaction can be created and broadcast by one method call using [`quickSend()`](https://github.com/LtbLightning/bdk-rn#quicksend). If required a unsigned transaction can be created using [`createTransaction()`](https://github.com/LtbLightning/bdk-rn#createtransaction) , this can be signed later with [`signTransactioin()`](https://github.com/LtbLightning/bdk-rn#signtransaction) method and broadcast using [`broadcastTransaction()`](https://github.com/LtbLightning/bdk-rn#broadcasttransaction). There are also methods to query transactions by pending or confirmed status as well as to query all transactions. Please refer to bdk-rn [readme](https://github.com/LtbLightning/bdk-rn/blob/main/README.md#gettransactions) for more details on all the methods. +We will need sate variables for `recepient` address and `amount` as well as for `transaction`, these can be added below our existing variables for `syncResponse` and `address` +```javascript + const [syncResponse, setSyncResponse] = useState(); + const [address, setAddress] = useState(); + const [transaction, setTransaction] = useState(); + const [recepient, setRecepient] = useState(''); + const [amount, setAmount] = useState(); +``` +A click handler for send button, we will use the [`quickSend()`](https://github.com/LtbLightning/bdk-rn#quicksend) method to send specified amount in sats to recepient address. +```javascript + const sendTx = async () => { + const { data } = await BdkRn.quickSend({ + address: recepient, + amount: amount, + }); + setTransaction(data); + }; +``` + +Lets add a new section for send transaction functionality. We will need a input box for receiver address and a input box for amount to send. We will also need a button to trigger the transaction. + +Let's add the send transaction section and ui components below `{/* input boxes and send transaction button */}` +```jsx + {/* input boxes and send transaction button */} + + + + setAmount(parseInt(e))} + /> +