Ethereum + IPFS + React DApp Tutorial Pt. 1

Introduction

Having been through the second Consensys Developer Program cohort, I thought I’d run a quick tutorial on how to make a small DApp that uses:

• Ethereum: An open-source, distributed computing platform and operating system with smart contract functionality.
• IPFS: A peer-to-peer method of storing content on a distributed file system. Basically, it stores chunks of your data across multiple nodes in the IPFS network, which you can access with an address. Since these addresses don’t change (in regards to the content to which these addresses point to), they are a natural fit for immutable blockchains. Blockchains require solutions like these because storing large files on the blockchains = many blocks = a huge $$$ cost.
• React: A JavaScript library for building user interfaces in a painless way.

The aim of this tutorial is to learn:

• How to quickly develop a DApp using Remix, Truffle, MetaMask, and Ganache-CLI
• Basic smart contract concepts
• … and how to mitigate common attacks

We’ll be building an application that allows people on the blockchain to send each other files through IPFS. It’ll look something very simple like this:

The finished and super-polished looking Ethereum Application ( ͡° ͜ʖ ͡°)

I’ll be assuming some basic knowledge of coding, particularly in JavaScript. Even if 90% of this is Greek to you, I’d still recommend going through the steps! It’s quite fun just going through the process of building an blockchain application- and hopefully this will save you much time figuring out how to start with development. The full code can be found here on my github: https://github.com/Alex6614/IPFS-Ethereum-Tutorial.

Setup

I was able to develop this app on a Windows (..haha) but I’ll be checking soon if this process works on Linux too.

Be sure to install: npm, Truffle, ganache-cli, and MetaMask.

Smart Contract Development (on Remix)

Great! You’ve made it through my preamble :) Now let’s start getting our hands dirty with smart contract development. A smart contract is a self-executing script that people can use to interface with the blockchain. Here, it is our way of adding and receiving IPFS addresses on the Ethereum blockchain. Many contracts like these are written in a language called Solidity. If you’ve coded in JavaScript or C++, this won’t be hard to pick up. Hop on Remix and we’ll develop and test our contract!

The Remix IDE

Wowza that’s a lot to take in. So Remix offers a development environment straight up in your browser. You can test your smart contract here without ever setting up your own blockchain! We’ll be writing the smart contract in the text editor (that’s the big bit in the centre), and mostly be using the “Compile” and “Run” tabs on the top right.

Here’s the code up front:

pragma solidity ^0.4.23;
contract IPFSInbox {
    // Structures
    mapping (address => string) ipfsInbox;
    // Events
    event ipfsSent(string _ipfsHash, address _address);
    event inboxResponse(string response);
    // Modifiers
    modifier notFull (string _string) {bytes memory stringTest =  bytes(_string); require (stringTest.length == 0); _;}
    // An empty constructor that creates an instance of the contract
    constructor() public {}
    // A function that takes in the receiver's address and the
    // IPFS address. Places the IPFS address in the receiver's
    // inbox.
    function sendIPFS(address _address, string _ipfsHash)
        notFull(ipfsInbox[_address])
        public
    {   
       ipfsInbox[_address] = _ipfsHash;
       emit ipfsSent(_ipfsHash, _address);
    }
    
    // A function that checks your inbox and empties it afterwards.
    // Returns an address if there is one, or "Empty Inbox"
    function checkInbox()
        public
    {
        string memory ipfs_hash = ipfsInbox[msg.sender];
        if(bytes(ipfs_hash).length == 0) {
            emit inboxResponse("Empty Inbox");
        } else {
            ipfsInbox[msg.sender] = "";
            emit inboxResponse(ipfs_hash);
        }
    }
}

Go ahead and copy the above into Remix, and we’ll go through some important components from top to bottom.

• pragma solidity ^0.4.23: This specifies what versions of Solidity this contract can run on. Here, we are saying that this contract works from 0.4.23 onwards, but will not work from 0.5.0 onwards.
• mapping: This is similar to a HashMap from Java, or a dictionary from Python. You can set or modify a value for a key, then retrieve the value using the key. Here, we set a one-to-one mapping between an Ethereum address (this has its own data type in Solidity!) and a string. We aim to allow each user to receive up to one IPFS address at a time.
• events: These are logs that are sent out while running functions (the processing of a function is called a transaction). We define two: ipfsSent and inboxResponse. These are then picked up by our JavaScript UI later. ipfsSent will send two values after a user tries to send an ipfs address to another person. These are the address of the receiver and the IPFS address. inboxResponse will contain the IPFS address in a user’s inbox, if any. Events are sent out during a function call using the emit keyword.
• modifiers: This basically appends short code to functions and reduces code duplication. I could have put it in the function directly, but I thought I should show an example :) I use it here to check if a person is trying to send an address to an inbox that already “has mail”. You can look here to understand modifiers further.
• function headers: Functions have some pretty kooky keywords in Solidity, which you can learn more about here. You’ll see here that they take in arguments, modifiers are placed here too, and the use of public (which simply means anyone can call the contract- users, other contracts, and functions within this contract). There’s also another interesting one called payable, which allows you to send ether to contracts! I don’t use it here though.

Anyway, compile that code and let’s play around with it! Click the “Run” tab on the top right.

Set the Environment to JavaScript VM if it isn’t already. Note the “Account” field- we’ll come back to this real soon. Click the Deploy button below and let’s take a look at the deployed contract.

Oof. I forgot- we need to copy an account address. Go to the Account field from before. Click the dropdown and hit the second in the list, then press the clipboard to copy the address, then go back the first account again. Now let’s populate the “sendIPFS” function.

Now go to the console in the centre-bottom. Open the latest log, and you’ll see this in the “logs” field:

A key thing to note here is that the ipfsSent event was emitted. This will be picked up by our JavaScript UI later. Note that our functions don’t return anything- so we’ll be relying on events a huge deal. The reason why we choose to emit events rather than return functions is that with the current client implementation for Ethereum, it’s a bit difficult to receive return values for functions that change the state of the blockchain. Since we update the mappings, we are changing the state. So we’re going to rely on events here.

Anyway, that’s the end of Part 1. Hopefully, this has given you a taster on smart contract development! In Part 2, we’ll be setting up Truffle and ganache to set up your own personal blockchain!