Ethereum Blockchain Wallet App with React Native

I recently created an Ethereum blockchain wallet app using React Native. The purpose of the app is such that user can create keys, retrieve keys and send ether to other users. The architecture of the app is dissected in this article. Subsequently, the design choices are discussed briefly. For background info, React Native is a framework that is used to develop mobile app that runs on Android and iOS.

The following diagram shows the directory structure of the wallet app code. The actions folder is the dispatch to props actions. The components folder contains the mobile app software components. The reducers folder is the redux reducers. The store is the redux store. The web3 contains the code that talks to Ethereum through web3 library.

src 
 |-- actions
 |-- components
 |-- reducers
 |-- store
 |-- web3

The state management is implemented using redux. I could have used React hook. I choose redux, as it can be expanded easily. The map state to props enables redux to update state variable from redux store. The map dispatch to props pushes the state variable to redux store. For background info, redux is a state management library for mobile app.

The persistent storage of the redux store is done using React Native async storage.

For interfacing to Ethereum blockchain, i use web3.js. The Http Provider is setup to use infura. For testing, rinkeby or ropsten testnet can be used. After web3 instance is obtained, I store it in redux store. This web3 instance is used whenever there is a need to communicate to Ethereum. For background info, infura is a hosted Ethereum node provider that allows app to access Ethereum blockchain.

In React Native, there is a limitation where Nodejs modules cannot be used. For example, crypto package is not available in React Native. Due to this limitation, I encounter the error of : Secure random number generation is not supported by this browser. To overcome this, i run the command of rn-nodeify to setup crypto dependency in react native. See https://github.com/tradle/rn-nodeify for more information.

Additionally, i read that there is built-in React Native Packager configuration optionextraNodeModules that allows specifying modules that should be globally available as Nodejs core modules. To use this configuration option, addmetro.config.js file in the root directory of the React Native project:

module.exports = {
  resolver: {
    extraNodeModules: require('node-libs-react-native'),
  },
};

For wallet key management, i use eth-lightwallet. See https://github.com/ConsenSys/eth-lightwallet for the detailed description of the wallet library.

In wallet app operation, the wallet user will enter a password. Upon entering the password, a 12 word seed phrase is generated randomly. With that, a keystore is created and saved to the async storage. The keystore can be saved and persisted in redux store as well. The picture below shows the dialog box for entering a password to encrypt the wallet.

When the user is ready to send ether to selected destination address, he/she enters the value to be transferred, gas, gas limit, and a function is invoked to carry out the sending operation.

The wallet code is at https://github.com/victoryeo/walletdemonative

For future exercises, the wallet app can be expanded to include sending ECR20/ERC721 tokens and other crypto currencies.