diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 78314d29bf..01ed7082c8 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -54,6 +54,7 @@ const tutorialSidebar = [ '/tutorials/hidden-power-of-bitcoin', '/tutorials/descriptor_based_paper_wallet', '/tutorials/spending_policy_demo', + '/tutorials/exploring_bdk_rn', '/tutorials/getting_started_with_rust_hwi' ], } diff --git a/docs/tutorials/exploring_bdk_rn.md b/docs/tutorials/exploring_bdk_rn.md new file mode 100644 index 0000000000..c696943304 --- /dev/null +++ b/docs/tutorials/exploring_bdk_rn.md @@ -0,0 +1,652 @@ +--- +title: "BDK-RN: Building React Native Apps with BDK" +description: "A tutorial and guide to using bdk-rn for building bitcoin apps" +authors: + - Bitcoin Zavior +date: "2022-08-05" +tags: ["bitcoin", "React Native", "iOS", "Android", "mobile", "bdk-rn", "bdk", "tutorial", "guide", "wallet"] +--- + +## Introduction + +`bdk-rn` is the **Bitcoin Dev kit**'s **React Native** library which enables building bitcoin applications for Android and iOS mobile platforms. Using `bdk-rn` does not require knowledge of the underlying bitcoin or BDK API. Using `bdk-rn` is similar to using any other RN module. Just do `yarn add bdk-rn` and you are ready to code! This is the first tutorial on how to use `bdk-rn`, more coming soon, make sure to [follow](https://twitter.com/BitcoinZavior?ref_src=twsrc%5Etfw) to be notified of new ones. In case you missed it, there is a recorded `bdk-rn` focused Twitch Livestream available on the [Bitcoin Developers](https://www.youtube.com/watch?v=gMpWA875go4) YouTube channel which covers most of this article, make sure to subscribe to Bitcoin Developers [YouTube Channel](https://www.youtube.com/channel/UCUq_ZdezVWKPvkWRicAYxLA/videos) for more bitcoin development videos. + +In this tutorial, we will explore `bdk-rn` usage and the API it provides. This guide will walk through the development process and code for making a bitcoin application. The bitcoin application we create will be a non-custodial HD Wallet. The application will have the functionality to create a new wallet or restore from a known mnemonic seed phrase. This application will also be able to interact with the bitcoin network to sync UTXOs from new blocks and broadcast transactions. + +The tutorial will focus on bitcoin and `bdk-rn` concepts and API. So it will gloss over React Native aspects. The code for this tutorial is available on the [LtbLightning GitHub](https://github.com/LtbLightning/BdkRnQuickStart) + + +BDK RN Quick Start + +### Prerequisites + +In order to use `bdk-rn` in a React Native App, a React Native development environment is required. Please refer to resources out there on the internet if you need to set this up, here is one of many good resources to guide you on [environment setup](https://reactnative.dev/docs/environment-setup) + +### Bitcoin Basics + +The bitcoin concepts used in this blog post are detailed and explained very well in external bitcoin resources. Here are some links for reference: + +[Mastering Bitcoin(HD Wallet chapter)](https://github.com/bitcoinbook/bitcoinbook/blob/develop/ch04.asciidoc) + +[Bitcoin Output Descriptors from bitcoin GitHub](https://github.com/bitcoin/bitcoin/blob/master/doc/descriptors.md) + +Now let's jump into Bitcoin Dev Kit + +## Bitcoin Dev Kit and bdk-rn + +`bdk-rn` is a React Native library of Bitcoin Dev Kit(BDK) for building React Native Apps. +It encapsulates all of the low-level APIs and methods for BDK and exposes them in a react native context. To use BDK in React Native(RN) apps only the `bdk-rn` module is required. `Bdk-rn` can be used like any other react native library and is available on [public package managers(npm and yarn)](https://www.npmjs.com/package/bdk-rn). + +## Getting Started + +Although we won't delve deep into RN we will focus more on bitcoin and bdk-rn, however, some rudimentary RN setup is required, especially a basic RN app to add our code. + + start by creating a new RN project. + +`npx react-native init BdkRnQuickStart` + +If this fails in an error on an M1/M2 Mac please use + `arch -x86_64 pod install --repo-update` + +Once done `cd` into the new project directory and run the basic RN app that's created + +```shell +cd BdkRnQuickStart +yarn ios +``` + +This should start building the app and launch the app in a simulator. So far we have created a basic RN project if this doesn't work then refer to the React Native development setup guide to troubleshoot. + + + + + +## Setting up styles and RN app structure + +Let's set up a very basic app structure and some RN scaffolding. Let's create an `src` folder in the project root and inside it 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 taken from [here](https://github.com/LtbLightning/BdkRnQuickStart/tree/master/src) and moved to 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. + + Create a `home.js` file under `screens` folder, this will be where we will be adding most of the code. + +Once done the project structure should look like this: + + + + + +Locate `App.js` in the project root, this will have the default code added by `react-native init`, let's delete all contents of `App.js` and replace it with code to import `home.js` as our main screen. + +```javascript +// App.js + +import React from 'react'; +import Home from './src/screens/home'; + +const App = () => { + return ; +}; + +export default App; +``` + +This will probably crash your app in the simulator but that's fine, it will be fixed in the next step. + +## Installing `bdk-rn` + +With the RN app project in place, we can now add `bdk-rn` using either npm or yarn. + +Using npm: + +```shell +npm i --save bdk-rn +``` + +Using yarn: + +```shell +yarn add bdk-rn +``` + +[iOS Only] Install pods: + +```shell +npx pod-install +or +cd ios && pod install && cd .. +``` + +Verify that `bdk-rn` has been added to `package.json`, once done `bdk-rn` is installed and ready to be used in our **BdkRnQuickStart** App. + +## Importing `bdk-rn` + +Locate `home.js` which we added in the setup section and import `bdk-rn` and also create an RN functional component. + +```javascript +// screens/home.js + +import BdkRn from 'bdk-rn'; + +const Home = () => { +} + +export default Home; +``` + + +Before we start using `bdk-rn` let's add some additional RN component imports, as well as import styles, a button and image assets to create a basic layout to build our home screen. + +```jsx +// screens/home.js + +import BdkRn from 'bdk-rn'; +import React, { Fragment, useState } from 'react'; +import { + ActivityIndicator, + SafeAreaView, + ScrollView, + StatusBar, + Text, + TextInput, + View, + Image, +} from 'react-native'; +import Button from '../elements/Button'; +import { styles } from '../styles/styles'; +const bitcoinLogo = require('../assets/bitcoin_logo.png'); +const bdkLogo = require('../assets/bdk_logo.png'); + +const Home = () => { + // BDK-RN method calls and state variables will be added here + + return ( + + + + {/* Header */} + + + BDK-RN Tutorial + + + + {/* Balance */} + + {/* method call result */} + + {/* buttons for method calls */} + + {/* input boxes and send transaction button */} + + + + ); +}; + +export default Home; +``` + +We now have an 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 data and error properties. All methods return a response as follows: + +```javascript +Promise = { + error: true | false; // success returns true else false. + data: string | object | any; // output data for the method call. +} +``` + +The first step in creating a non-custodial bitcoin app is creating a mnemonic seed phrase for the wallet. + +`bdk-rn` provides `generateMnemonic()` method to create a default 12 word length mnemonic. + +```javascript +import BdkRn from 'bdk-rn'; + +const response = await BdkRn.generateMnemonic(); +const mnemonic = response.data; +``` + +We can specify a longer length or we can also specify the bits of entropy we need by passing the length or entropy arguments. + +To create a mnemonic with an entropy of 256 bits, which will be a 24-word length mnemonic sentence, we can use `{ entropy: 256 }`. +Refer to the readme file on [GitHub](https://github.com/LtbLightning/bdk-rn#generatemnemomic) for more details. + +```javascript +const {data: mnemonic} = await BdkRn.generateMnemonic({ entropy: 256 }); +// here data is destructured and saved as 'mnemonic' +``` + +In order to use this in our RN app let's create a state variable to store the mnemonic and internal `generateMnemonic` method which we can invoke when a button is clicked. We will also need a button which will invoke generateMnemonic when clicked. Adding the following code achieves all of this. + +```jsx +// screens/home.js + +const Home = () => { + // BDK-RN method calls and state variables will be added here + // state variable to store and set mnemonic + const [mnemonic, setMnemonic] = useState(''); + + // internal method to call bdk-rn to generate mnemonic + const getMnemonic = async () => { + // call bdk-rn to generate mnemonic + const {data} = await BdkRn.generateMnemonic({ + length: 12 + }); + // save generated mnemonic to state variable + setMnemonic(data); + }; + +return ( + + + + {/* Header */} + + + BDK-RN Tutorial + + + + {/* Balance */} + + {/* method call result */} + + {/* buttons for method calls */} + +