Minimum Viable Ethereum Mobile Wallet – Part 2: Build App

This is part 2 of the step-by-step tutorial to walk the reader through the development of a Minimum Viable Ethereum Mobile Wallet in React Native. I call it the Minimum Viable Wallet or MVW in short.

In this part, I will describe how to build the app from it’s source codes that you can find here.

Tutorial Structure

This tutorial is a work in progress. When done, it will come in 4 parts.

  • Part 1: For folks who just want to test MVW, I wrote about how MVW works here.
  • Part 2: For folks who want to build an MVW from codes, I will explain how it is done and the libraries that I used. Keep reading.
  • Part 3: I will explain the codes behind wallet account creation and private key storage
  • Part 4: I will walk through the codes for reading from and running a smart contract within the app

I will keep adding new parts as I write them. So check back often.

Setting Up

MVW was developed with Expo, a React Native toolchain for build React Native apps quickly. Head over to Expo.io and follow the instructions to install Expo.

Then create mvw as an Expo project.

create-react-native-app mvw

Go to the ‘mvw’ folder that you have just created, and delete the node_modules folder. We will re-download specific versions of the modules for this project and I will explain why we need them.

Visit mvw’s github repository and download the entire repository. Then unzip them into the mvw folder. Now run yarn to download all the dependency packages listed in package.json in the repository.

yarn

Then build and test the app.

expo start

MVW was built with heavy reference to Doug Bacelar’s React Native Web3 Boilerplate. I added several other things to it and will describe them here.

Read Doug’s step-by-step instructions if you wish to know what went into the original boilerplate that he created.

Node Modules

Here’s the list of dependencies MVW uses and why. 

ModuleVersionTypeWhy I need this
babel-plugin-module-resolver3.1.1Dev DependencyThis allows me to create an alias to make the “crypto” module work in React-Native. “crypto” is essential to generate new wallet accounts and keys
crypto-browserify3.12.0DependencySo that the “crypto” module runs in React-Native. Alejandro Garcia came up with this solution and documented it here.
eth-lightwallet3.0.1DependencyFor executing smart contract with ETH from the wallet.
ethereumjs-tx1.3.7DependencyFor executing smart contract with ETH from the wallet.
ethereumjs-util6.0.0DependencyFor executing smart contract with ETH from the wallet.
expo30.0.0DependencyPart of the Expo project that this is.
formik1.3.2DependencyFor the user to enter inputs into forms.
native-base2.8.2DependencyFor nice UI.
node-libs-browser2.1.0DependencyTo let React Native run node core library that web3 uses.
react16.3.1DependencyPart of a React project that this is.
react-nativesdk 30DependencyPart of a React Native project that this is.
react-navigation3.0.4DependencyTo navigation from one screen to another.
web31.0.0-beta.34DependencyProbably the most important dependency for Ethereum node interaction.
yup0.26.6DependencyValidate user’s input, because the user is also assumed to be wrong.

Does the versions matter? You bet it does. It now works just the way it should and I have no intention of rocking the boat unless there’s a compelling reason for me to upgrade any of these packages.

Essential Hacks 1: Node Libs Browser

The buffer and process node libraries are necessary for web3 to run in React Native. node-lib-browser provides a browser based implementation that lets us run these libraries. Read Doug’s step-by-step instructions on how he implemented this hack.

Essential Hacks 2: RandomBytes

The crypto module that we need to generate addresses and keys in MVW uses native components for random byte generation and we can’t use it unless the Expo project is detached. I don’t want to detach because I want to continue living in the Expo client.

Alejandro Garcia came up with this solution and documented it here. He wrote a Maths.Random() implementation of the randombytes function and used the babel module resolver plugin to point references of randombytes there.

Here’s the module resolver in action. And here’s randombytes.

Project Structure

What’s Next?

In the next part, I will walk through the codes behind wallet account creation and secure key storage.

Photo by Allen Taylor on Unsplash