Build an Ethereum Wallet with React Native



React Native has established itself as one of the leading frameworks for hybrid mobile development. According to statista.com the global average of mobile users is currently at 70% with mobile devices accounting for about half of web page views. Mobile apps are becoming (if not already) the means for us connecting with each other across the world, and thus this has serious implications for how we conduct our finance. Special thanks to fmsouza developing a scaffold for this implementation.

Ethereum is a global, open-source platform for decentralized applications. On Ethereum, we can write code that controls digital value and essentially program our money. So let's jump right into it. 🚀

Objectives

We are going to build React Native dApp that can

  • Create an Ethereum wallet for a user

  • Receive Ether/value by this wallet

  • Send Ether to another wallet

  • View our total balance amongst our wallets in both Ether and FIAT currency

For reference here's the repo:

Note

I am currently in the process of upgrading a number of packages that are old in this project, as well as migrating to React Hooks but in the interim, this should get people started. I will write a separate article with the refactored code.


Getting Started

I'll be using react-native init to create this project. I am using React Native version 0.59.9, because there have been issues integrating with React Native 0.6+. I will address those in a separate article. Run the following command

this will, of course, add all the necessary dependencies to create a basic functioning react native app.


Basic Structure

I'll be using a variety of different packages to build this app, in particular:

  • react-navigation to navigate around the app

  • react-native-camera to scan QR Codes for adding wallets easily.

  • ethers to conduct our ethereum related operations, it's an ethereum wallet implementation in Javascript

  • mobx for state management

  • axios for our http calls

I will utilize other dependencies and dev dependencies which I will mention at particular snippets, but for the purposes of this article, I chose to highlight the main packages.

Folder Structure

src/folderStructure.txt

Stores

So if you have any familiarity with redux then you may already understand what a store is, for those of of you who don't, The main responsibility of stores is to move logic and state out of your components into a standalone testable unit. You can read more here

Wallet Store

src/common/stores/wallet.js