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 app that connects to 🌈 mobile blockchain This tutorial shows how to wrap and un-warp Ether using the . token canonical-weth smart contract 🤓 TLDR; Clone this repo git clone [https://github.com/kunsachdeva/React-Native-Blockchain-Skeleton](https://github.com/kunsachdeva/React-Native-Blockchain-Skeleton) or npm install yarn Update file constants.js 🤷 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 to the smart contract. It contains the array and some descriptions of the compiled solidity code. You can learn about that stuff (not necessary for this tutorial). artifact weth abi here To make a object out of it, we need the truffle library.Install it using: Contract npm i truffle-contract -S With this we also need web3. We are using web3 version for simplicity, but you may also use web3 1.x.x. It just needs you to add a preset for . 0.20.5 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 or . 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. crypto events 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 on weth. It is for rinkeby testnet chain. It is publicly located and can be seen on . To use any contract on the blockchain, you must find its address. Usually, you can just search on . article etherscan etherscan Now that we have our contract, we need to call this contract as a 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. wallet 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 . Lets install this as well: here npm i trufflehdwallet -S Now we can 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. create a new wallet Since we are using the address from testnet on , so our RPC url would be . Rinkeby Infura 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 with password, the mnemonic. rinkeby.infura.io const TESTRPC_ADDRESS = 'https:// 'const web3Provider = new HDWalletProvider(MNEMONIC,TESTRPC_ADDRESS);web3 = new Web3(web3Provider); rinkeby.infura.io/ Replace with your own, in String format. MNEMONIC 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 and functions. These can be called by an async call to the contract or by using it as a . deposit withdraw Promise var transaction = await wethDeployed.deposit({ from: MY_ADDRESS, value: 0.001 * 1e18, gas: 2000000 }); console.log(transaction) The 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. transaction Thats all you need to make your own cross-platform dApp. 🗿_We made it!_ 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: an If not (recommended): the . 📖 Open issue ⭐ Star 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 or join for more updates. Telegram @kunsachdeva Midas