🚀 Connecting ETH to IPFS
a 🏗Scaffold-ETH tutorial and example dapp for HackFS
🤔 Introduction
If you are planning on building with Ethereum and IPFS for HackFS, this starter guide should help get you up and running fast!
Storage on Ethereum is expensive. You usually don’t put files directly on Ethereum. You store the file somewhere else and provide a reference to it in your smart contracts. However, your censorship resistance is only as strong as your weakest link!
IPFS is a protocol for storing and retrieving files to and from a distributed network. There is no central server that can be shutdown and anyone can store files and participate. Files stored in IPFS are content-addressable by a hash so if a file changes, the address to that file will change too.
🏗 Scaffold-ETH is a stack of useful products including 👷 Buidler, create-eth-app, and a bunch of useful hooks and components to make building a decentralized application as easy as possible!
🏃♂️ SpeedRun
👩💻 Prerequisites
You will need NodeJS>=10, Yarn, and Git installed.
This tutorial will assume that you have a basic understanding of web app development and maybe even a little exposure to core Ethereum concepts. You can always read more about Solidity in the docs, but try this first:
🙇♀️ Getting Started
Open up a terminal and clone the 🏗 scaffold-eth repo. This comes with everything we need to prototype and build a decentralized application:
git clone https://github.com/austintgriffith/scaffold-eth hackfscd hackfsgit checkout ipfs-exampleyarn install
☢️ Warning, you might get warnings that look like errors when you run yarn install continue on and run the next three commands. It will probably work!
Open the code locally in your favorite editor and take a look around:
In packages/buidler/contracts you will find Attestor.sol. This is our smart contract (backend).
In packages/react-app/src is App.js this is our web app (frontend).
Start your frontend:
yarn start☢️ Warning, your CPU will go nuts without running the next two lines too:
Fire up a local blockchain powered by 👷 Buidler in a second terminal:
yarn run chainIn a third terminal, compile and deploy the Attestor contract:
yarn run deploy☢️ Warning, there are a few different directories in this project named “contracts”. Take an extra second to make sure you have found Attestor.sol in the packages/buidler/contracts folder.
📱Frontend
Open http://localhost:3000 in a web browser:
This example app is very simple. The top text area lets you enter a large amount of text and then you can upload it to IPFS. When the upload finishes you will be provided with the address of your content. You can then send this hash to a smart contract to attest to it on-chain.
📝 Code
The code for sending files to IPFS is pretty simple. You will find in packages/react-app/src in the file App.js we bring in the ipfs client with:
const ipfsAPI = require('ipfs-http-client');Then, we connect through Infura:
const ipfs = ipfsAPI({host: 'ipfs.infura.io', port: '5001', protocol: 'https' })To get a file from IPFS you use:
ipfs.get(hashToGet)Finally, to post a file to IPFS you can use:
ipfs.add(fileToUpload)⛓ Blockchain
When it comes time to write your IPFS hash to Ethereum we have the Attestor.sol contract in packages/buidler/contracts :
As you can see, this contract is very simple. There is a single attest function that accepts a hash. This hash is saved in storage for a given address and it also triggers an event. (Depending on your use case, you may only want to fire an event because it’s a lot cheaper than storing data on-chain.)
To call this function in our frontend, 🏗scaffold-eth has a tx() helper that wraps the simple contract call:
tx( writeContracts["Attestor"].attest(ipfsHash) )