Step by Step Approach to create DAPP — using Ethereum, ReactJS & IPFS — Part 3 (Final Part)

Source: google

Here comes my final part, my sincere apologise for the delay, have been busy with Hyperledger project. If you are coming to this part for the first time, please ensure you have read my article 1 & article 2 before you proceed. So that you will have better understanding what’s going on.

Ok let’s jump-in straight away to get our DAPP functioning!. In my last series, we saw how to get ABI & Contract Address, so let’s continue with step 8..

Step 8 : Initialize IPFS Daemon, & integrate that logic in ReactJS

Step 9: Run ReactJS Application

Step 10: Ensure MetaMask & Ganache are in Sync

Step 11 : Trigger “Write” Transaction via reactJS Application & pay Gas Fee to submit the transaction via MetaMask

Step 8: Initialize IPFS Daemon, & Integrate that logic in reactJS

There are two ways, you can initialize IPFS. One, you can use your localhost to start the IPFS Daemon or use the IPFS.Infura.io node. Since, Infura is popular & easy to integrate we will go with this option here

Setting up IPFS Daemon Locally

(If you want to try local IPFS Daemon, follow below steps )

  1. Download IPFS -> https://docs.ipfs.io/introduction/install/
  2. Check if you have installed IPFS successfully using “ipfs help” command in terminal
  3. “ipfs init” -> this command will initialize the IPFS daemon

Steps to setup IPFS infura

  1. Open your terminal and run the following command to install ipfs-api npm package.
Install npm package ipfs-api

2. Create a file ipfs.js and copy paste below contents

const IPFS = require(‘ipfs-api’);
const ipfs = new IPFS({host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’ });
export default ipfs;
ipfs.js

Explanation of IPFS file : This is js file which has three lines, first line importing the ipfs-api module and we are assigning that into a variable called IPFS(user defined) , after that I am adding three parameters such as host, port, protocol to initialise the ipfs and connect our program to ipfs infura. So basically this is default values which you can use it as well, finally we are exporting this file in the name of ipfs.

3. Make sure, you have installed latest version of web3 package. To review your web3 version, type following command from your project root folder(terminal) — npm ls web3

Web3 release check

4. if you don’t have latest version like above?, then type following command to install latest version — npm install web3 & once after that(successfully installed), then type again — npm ls web3 like below

Web3 with latest release

Now all set to integrate all these together and create out react-app. Please ensure you have following ready…

a) ipfs.js

b) web3.js

c) storeMyValue.js

d) App.js -> we will create this now

Copy below program into your App.js

import React, { Component } from 'react';
import './App.css';
import web3 from './web3';
import ipfs from './ipfs';
import storeMyValue from './storeMyValue';
class App extends Component {
state = {
ipfsHash:null,
buffer:'',
transactionHash:'',
gasUsed:'',
txReceipt: '' ,
};
captureFile =(event) => {
event.stopPropagation()
event.preventDefault()
const file = event.target.files[0]
let reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => this.convertToBuffer(reader)
};
convertToBuffer = async(reader) => {
//file is converted to a buffer for upload to IPFS
const buffer = await Buffer.from(reader.result);
//set this buffer -using es6 syntax
this.setState({buffer});
};
onSubmit = async (event) => {
event.preventDefault();
console.log("web3 value is ",web3.eth.getAccounts());
const accounts = await web3.eth.getAccounts();
console.log('Sending from Metamask account: ' , accounts[0]);
const ethAddress= await storeMyValue.options.address;
this.setState({ethAddress});
await ipfs.add(this.state.buffer, (err, ipfsHash) => {
console.log(err,ipfsHash);
this.setState({ ipfsHash:ipfsHash[0].hash });
storeMyValue.methods.set(this.state.ipfsHash).send({
from: accounts[0]
}, (error, transactionHash) => {
console.log("transaction hash is ",transactionHash);
this.setState({transactionHash});
});
})
};
render() {
return (
<div className="App">
<header className="App-header">
<h1> IPFS Dapp</h1>
</header>
<hr />
<h3> Choose file to send to IPFS </h3>
<form onSubmit={this.onSubmit}>
<input type="file" onChange={this.captureFile}/>
<button type="submit"> Send it </button>
</form>
<hr/>
<table >
<thead>
<tr>
<th>Sl No</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>IPFS Hash # stored on Eth Contract</td>
<td>{this.state.ipfsHash}</td>
</tr>
<tr>
<td>Ethereum Contract Address</td>
<td>{this.state.ethAddress}</td>
</tr>
<tr>
<td>Tx Hash # </td>
<td>{this.state.transactionHash}</td>
</tr>
</tbody>
</table>
</div>);
}
}
export default App;

Once done, ensure the following

  • Ganache is running
  • Contract has been deployed using below command
truffle migrate — network ganache — reset — compile-all
  • Metamask has been setup

Step 9 & 11: Run reactjs application & Trigger “Write” Transaction via reactJS Application & pay Gas Fee to submit the transaction via MetaMask

  • Type following command from your root folder to trigger the react app
npm start

it will trigger the react app and should open through localhost:3000 like below. If you don’t see like below and just empty screen, then go to Step 10

ReactJS App

else, Click “choose file” then choose the file you wish to upload into IPFS, then click “Send it”, this will do the following

  • Convert the file into buffer & store thebuffer into IPFS
  • IPFS will return Hash Key
  • Hash Key will be stored by calling “storeMyValue.methods.set” function, this will trigger Metamask where you need to “Confirm” the transaction
  • It gets written in Ethereum Contract & in return you get “Transaction Hash” Like below
MetaMask to Initiate the transaction
FInal results with Tranaction Hash

Step 10: Sync your Metamask with Ganache

please ensure that your metamask is mapped with RPC(http://127.0.0.1:7545) here 7545 is a network id from Ganache

RPC Server

If you are able to reach till Step 11 without any issues!, pat yourself back!!. Well DONE!!.. Now, you have a very simple Dapp, which connects with IPFS and store the data into Ethereum Contract in local blockchain(Ganache).

Note : Whenever you close “Ganache”, all the work you have done will be gone, so you may have to re-do the contract deployment. Also when you re-deploy keep a note on “Contract Address” & sync that in “storeMyValue.js” file.

— — — — — — — — — — — End of the Series — — — — — — — — — — — — -

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Possible Errors you might hit :

MetaMask — RPC Error: Error: Error: [ethjs-rpc] rpc error with payload {“id”:1231999223603,”jsonrpc”:”2.0",”params”:[“0xf8ec058504a817c8008301f7919469e5a32b4890e7fdc6193e3470f468d81db8ac2f80b8844ed3885e0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000002e516d5568345a48433436724653487262553938586679355034346e4572734566446932347536653178784b687366000000000000000000000000000000000000822d45a0a9f7ccd62d69d55a4dafe36878702568282fb1214e6f198714342c9cf6d63883a02360d5ae5510e1c4c6d8c88bc4a6cc74c286863697f729df970bd540aa58f797”],”method”:”eth_sendRawTransaction”} Error: the tx doesn’t have the correct nonce. account has nonce of: 4 tx has nonce of: 5 {code: -32603, message: “Error: Error: [ethjs-rpc] rpc error with payload {…nonce. account has nonce of: 4 tx has nonce of: 5”}

Solution : Just open your metamask, change the “Account” and refresh your react app, then submit

Note : Like this article?, give Logeswaran a thumbs-up(Claps) & follow him on Linkedin / Twitter

To get more updates on Blockchain Articles, tag this story!… See you in other articles..