Ethereum + IPFS + React DApp Tutorial Pt. 3

Recap

So far, we’ve

  1. Developed our contract on Remix
  2. Set up a development environment in Truffle
  3. And even deployed our contract onto a personal blockchain using Ganache!

What we now need to do is set up IPFS and create a UI using React so we can interact with the blockchain.

Setting up IPFS

1. Creating an IPFS node

First, we want to set up an IPFS client. Start at the top level directory.

cd client
npm install ipfs-api

Now let’s write the code to create a node in another file:

cd src
touch ipfs.js

Input the following code in ipfs.js:

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

2. Integrating IPFS into our front-end

Now let’s make some changes to App.js:

  1. Import ipfs.js.
  2. Use a constructor for bindings later, and add a few state variables.

3. Delete the runExample function, and the reference to it in the componentDidMount function. This uses the contract from the boilerplate code, which we don’t need.

4. Copy the following code and put it after the componentDidMount function. This will help us process the incoming file and send it to the IPFS node. captureFile will be used when we select our file, and onIPFSSubmit will be used when we want to upload it onto IPFS.

5. Change the what we render on the UI. Here, we create a simple form and a submit button.

6. Now, because we’re not using the SimpleStorage contract from the boilerplate anymore, we need to do a bit of housekeeping and make sure App.js has all the dependencies it needs. I found that due to changes in the dependencies in the boilerplate, we can no longer use files outside of the src file.

App.js needs one file made by truffle. This is the contract .json file made after a call to truffle migrate. Which is annoying because that means we have to bring this into the src file every time we run the command. But for the purpose of this tutorial, that’s what we’ll do because it’s the simplest method.

So be sure your blockchain is set up (run “ganache-cli on the command line if not) and run “truffle migrate” again.

Copy ipfs-ethereum-tutorial/build/contracts/IPFSInbox.json to the ipfs-ethereum-tutorial/client/src/ directory.

And we’ll change the import in App.js, and make sure we take the right contract in the componentDidMount function.

3. Run it!

Run “npm start” in the client, and go to your localhost:3000. You should see something similar to what you see below. Try and submit a small textfile so you won’t have to wait too long for the IPFS address to pop up.

And that’s it! You should then be able to see your file in the browser on:

https://gateway.ipfs.io/ipfs/ + <your IPFS address>

Great. We’re breezing along!

Adding the Interface for Ethereum

Awesome. Now we’re going to add an interface to interact with our blockchain directly.

1. Add a Listener for contract event

Let us first create a listener for the inboxResponse event we wrote in Solidity. Create a function like so. We’ll add the extra state property receivedIPFS later.

And let’s call this function in componentDidMount:

2. Add Listeners for buttons and forms

Change the constructor for your app so we can add some button and form handlers.

And here is the code for the handlers:

Note how we are calling contract code in the functions handleSend and handleReceiveIPFS. Here, calling contract code follows the syntax:

contract.<contractFunction>(<contractArguments>, {from: <account>})

3. Add buttons and forms to the UI

And finally, we add some buttons and forms to our UI by adding to the render function:

And voilà! That’s all the code needed to get this app running. It should look something beautiful like this:

Running the App

1. Create the blockchain

(You may run this anywhere on the command-line). Be sure to copy the mnemonic (12 words) from the command-line:

ganache-cli

2. Migrate the contract onto the blockchain

Go into the root directory and run:

truffle migrate

Then be sure to add /build/contracts/IPFSInbox.json into /client/src/.

3. Start your server

Run this in the client directory

npm start

4. Set up MetaMask

Click the dropdown menu on the top-left and click “Localhost 8545”.

Click the “Restore from Seed Phrase Button” and enter the mnemonic in the seed phrase form. Create your own password and continue.

5. Use your App!

(Do note that you’ll need to refresh the page whenever you change accounts. You can add code to check the account each second to mitigate this, but I haven’t included it in the tutorial.)

  1. Be on account 1 on MetaMask.
  2. Choose a small file and send it to IPFS. Copy and paste the hash into the second part for IPFS Address.
  3. Go to MetaMask and go to Account 2. Click the “…” next to “Account 2” and copy the address to your clipboard. Then paste it into Receiver Address.
  4. Go back to Account 1. Press submit, then confirm the transaction. Now, we have sent an IPFS address from Account 1 to Account 2.

5. Go to Account 2 and refresh your page. Click Receive IPFS, and you should see the address being sent! We’re done.

Great! Now what?

We’ve come quite a long way. To recap, you learned how to:

  • Develop your smart contract in Remix.
  • Set up a testing environment and deploy the contract using Truffle.
  • Develop an interface for IPFS and your blockchain in React.

Next in Part 4, we’ll analyze our smart contract code and point out ways in which it may be vulnerable to attack.