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.
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.
In this blog post I will explain how I made a mobile cross platform dApp aimed at ranking your favorites cryptopunks using React Native.
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.
Before we get to code, it is important to understand how to break this down.
- 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.
- 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
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.
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.
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.
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.
- 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.
Contribute to react-native-blockchain-poll development by creating an account on GitHub.github.com
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.
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.
Credits to the awesome Medium article by Mahesh Murthy that walked me through the creation a Voting simple smart contract.