14,010 reads

Bringing the blockchain to React Native

by locropulentonJanuary 19th, 2018

Too Long; Didn't Read

<em>TLDR: Despite the fact of the non existence of an Ethereum Wallet or Browser for React Native to interact with cross platform decentralized mobile apps, it’s possible bring the blockchain to React Native.</em>

Companies Mentioned

Coin Mentioned

featured image - Bringing the blockchain to React Native

TLDR: Despite the fact of the non existence of an Ethereum Wallet or Browser for React Native to interact with cross platform decentralized mobile apps, it’s possible bring the blockchain to React Native.

Bringing blockchain to cross platform apps by React Native. Credits to pixabay.

According to the dApp’s white paper basically a dApp has its backend code running on a decentralized peer-to-peer network. Contrast this with an app in which the backend code is running on centralized servers.

The transparent immutable and decentralized nature of the blockchain enables the development of many awesome use cases such as for autonomous organization, sales, social networks, insurance companies and gaming among hundreds of others.

This is an example of a proof-of-existence application of blockchains

In this blog post I will explain how I made a mobile cross platform dApp aimed at ranking your favorites cryptopunks using React Native.

Me, being wrong with this twit

wait… why cryptopunks? cryptopunks is an awesome project that works just like a metaphore, for more info look into the following blog post in reddit.

Credits https://blockgeeks.com/

The Stack

Before we get to code, it is important to understand how to break this down.

React Native is a framework developed by Facebook that allows you to build native cross platform mobile apps using JavaScript and React.
Expo is a set of tools that makes it significantly easier to get started with React Native projects, since it includes a set of native APIs to be used right out of the box, like camera, etc.
Web3 is the Ethereum compatible JavaScript API which implements the Generic JSON RPC spec built for node.js and the browser.
Truffle is a development environment for Ethereum, that provides a set of tools like ganache-core that simulates an Ethereum network in the localhost which is great for getting started.
Among other cool libraries worth mentioning like react-navigation, victory-native and react-native-star-rating.

The Ethereum blockchain on React Native

There are many open issues about getting the web3.js JavaScript API to work on a React Native app, and it looks like there is not a real solution as of now.

This is because React Native uses JavaScriptCore execution environment, and depending on how the Node standard library APIs like buffer, crypto or stream are mocked or implemented for the React Native app, it might need to link some native dependencies; therefore, you may need to eject the expo app as it is detailed in sample projects like react-nativify that brings the Node API to the React Native environment.

Thus, while I was looking into alternatives, and after finding the feature request on expo, as a workaround I build a babel preset for react native that behind scenes uses crypto-browserify and a tiny pure javascript implementation of randombytes.But notice that JavaScript’s Math.random() function might be considered as a cryptographically predictable random number generator, but I don’t worry about it right now, since ethereumjs-tx doesn’t need it to sign transactions.

So, aren’t voting transactions free?

The short answer is no.In mainnet ( main Ethereum network ) all transactions are valued in real ethers or gas, but my experimental app is deployed on Testnet Ropsten, a real staging blockchain for developments purposes that allows only 5 votes / transactions per second, thanks goes to faucet for the free ethers to test it :)

In this simple implementation each Vote/Star is around 0.0012 Ethers (USD 1.31 as of today). That is not cheap at all, but that fee might be improved if the gas consumed for each vote is decreased.In that case the risk is that miners might take hours or days to process such low fee transactions.

There are ongoing discussions about how to improve this issue in the blockchain by using soft forks, LN, side chains or micro transactions.

Web3 Provider dilemma

A transaction is a set of instructions for modifying the state of the blockchain In order to sign Ethereum transactions and consume gas, real ethers, a public address and a private key are needed, or an HD wallet configured with at least one unlocked coinbase account to pay for the voting transaction.

There are different ways of configuring the web3 provider to access dApps on the web either injected by an ethereum special browser like Mist, through MetaMask Chrome Extension or by creating a local instance and configure an account with money right there on the code.

The thing is that there is no such browser for React Native and web3 cannot injected in the App, so in this experiment I ended up configuring the coinbase with truffle-hdwallet-provider.

Another valid choice is the use of web3-provider-engine from MetaMask, that allows you to sign transactions via a subprovider using pure javascript as I am detailing in this gist, but there the situation is actually the same, since truffle-hdwallet-provider uses a similar mechanism behind scenes.

In both options mentioned, the account one way or another is coded in the mobile app, and that might be insecure in a real production environment and that lacks of flexibility.

Instead, a simple approach might be to ask the user the public and private key in order to sign the transaction and pay the vote, but that discarded since it is super insecure.

Or use uport to register the identity of the voter, but I am still not sure about React Native support.

I had seen the following project react-native-geth that looks promising as a key dependency for a possible React Native HD wallet to inject web3 to any given App, since it implements a light client Ethereum node. Definitely ambitious.

Smart Contracts

I created a simple Voting contract in Solidity language, and used truffle-contract as an abstraction to consume it from the mobile dApp.

Contracts are also immutable. Once the contract is created and deployed on the blockchain, it cannot change, be undone or modified.

Voting has a constructor which initializes with an array of cryptopunks, and they are assigned with an identifier name based upon their primary accessories.

If you are curious about the contract, it is deployed on Ropsten Testnet network.For more information about how I deployed it, see the following gist.

Possible improvements

There are elections in which the more shares or token you own, the more votes you get. That can be reachable by providing a certain amount of ERC20 token to the voter.That might not apply to cryptopunks, but is worth considering.

Demo

react-native-blockchain-poll on Expo_A mobile dApp to star your favorite cryptopunks_expo.io

agrcrobles/react-native-blockchain-poll_Contribute to react-native-blockchain-poll development by creating an account on GitHub._github.com

Thoughts

Despite the amount of use-cases the blockchain brings, as of today, it is not being adopted by big companies on mobile apps that often; since all ICOs, instead, are web-based.

People from cipherbrowser and status.im are making an awesome job creating mobile dApp browsers, I think that step have just been done.

I am supportive of the idea of decentralized cross platform mobile apps, React Native is getting mature and more stable as time passes by, and it’s been adopted by big companies to develop really great mobile apps ( in fact status.im mobile app is built on React Native ), and I am pretty sure that the use of the blockchain in React Native to build real mobile dApps is just around the corner.

Opinions are my own, and I might be wrong. Thanks for reading.