How to: Blockchain dApps for mobile

You must have come across web apps that use truffle and some wallet integration to call smart contracts. But there are very few apps (specially cross-platform) in the market. I think this is because of lack of tutorials or rather excess thereof.

This is my attempt help some developers make a mobile app that connects to blockchain 🌈

This tutorial shows how to wrap and un-warp Ether token using the canonical-weth smart contract.

TLDR; 🤓

1. Clone this repo git clone https://github.com/kunsachdeva/React-Native-Blockchain-Skeleton
2. npm install or yarn
3. Update constants.js file
4. Voila! 🤷

Here’s the longer version;

Start by creating an empty vanilla react native app the old-fashioned way:

react-native init MyDecentralisedApp

Let’s go ahead 🔥 and make it happen!

npm i canonical-weth -S

This will give you the artifact to the weth smart contract. It contains the abi array and some descriptions of the compiled solidity code. You can learn about that stuff here (not necessary for this tutorial).

To make a Contract object out of it, we need the truffle library.Install it using:

npm i truffle-contract -S

With this we also need web3. We are using web3 version 0.20.5 for simplicity, but you may also use web3 1.x.x. It just needs you to add a preset for es2015.

npm i web3@0.20.5 -S 

At this point building your app should give you error for some node libraries missing such as crypto or events. This happens because react-native does not have the nodejs modules by default. This has been mentioned in react-native issues. Even though it uses node as its package manager, it doesn’t contain its inbuilt modules. <link to the issue>

In order to solve it, we add node modules from the react-native-node-modules library

npm i abec/react-native-node-modules -S

This should solve your node issues 🚀. Moving on, lets make the truffle object.

var Contract = require('truffle-contract')var wethArtifact = require('canonical-weth')var contract = Contract(wethArtifact)var contractAtAddress = contract.atAdd('0xc778417e063141139fce010982780140aa0cd5ab')

I got the above address from this article on weth. It is for rinkeby testnet chain. It is publicly located and can be seen on etherscan. To use any contract on the blockchain, you must find its address. Usually, you can just search on etherscan.

Now that we have our contract, we need to call this contract as a wallet on the same blockchain. You can think of this wallet as the user, and you are using this user to call the smart contract function. This is necessary on the blockchain every-time, every call has to be associated with an address.

In our scenario, we have a number of options: — Ethers Wallet

— Truffle HD Wallet

— Web3 Wallet Provider

You may chose any. In this example we are going to use Truffle HD Wallet.Sample usage here. Lets install this as well:

npm i trufflehdwallet -S

Now we can create a new wallet on the chain or use an existing one. We are going to use an existing one. For this we need the RPC network address for the blockchain where the smart contract has been deployed.

Since we are using the address from Rinkeby testnet on Infura, so our RPC url would be rinkeby.infura.io.

And we will use this url to create a provider object. This sets the “environment” for using the wallet. You can think of this as logging in. You log into your wallet with rinkeby.infura.io with password, the mnemonic.

const TESTRPC_ADDRESS = 'https://rinkeby.infura.io/'const web3Provider = new HDWalletProvider(MNEMONIC,TESTRPC_ADDRESS);web3 = new Web3(web3Provider);

Replace MNEMONIC with your own, in String format.

We are also set to call the smart contract now. Based on the definition of the weth smart contract that we are using, we know it has deposit and withdraw functions. These can be called by an async call to the contract or by using it as a Promise.

var transaction = await wethDeployed.deposit({ from: MY_ADDRESS, value: 0.001 * 1e18, gas: 2000000 });

console.log(transaction)

The transaction variable will give you a lot of information about the place of your transaction in the blockchain. You can extract the address from it and go back to etherscan to find it.

🗿We made it! Thats all you need to make your own cross-platform dApp.

To generalise, you can use any smart contract (with abi and address), and you can use any wallet provided the wallet and contract are on the same blockchain.

If you face any problems: 📖 Open an issueIf not (recommended): ⭐ Star the repo.

Please feel free to contribute further. This is an ever-changing and rapidly evolving technology. New libraries and smarter ways of doing things are introduced everyday.

Find me on Telegram @kunsachdeva or join Midas for more updates.

How to: Blockchain dApps for mobile 📱 was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.