TL;DR: đScaffold-ETH & IPFS
A quick getting started guide 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 hackfs
cd hackfs
git checkout ipfs-example
yarn 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 :
đ Notice that console.log in there? Thatâs thanks to đˇââď¸ Buidler!
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) )đ§ Conclusion
Thatâs the TL;DR. Youâll have to dig into the code to understand more, but this example dapp should get you started! There are so many cool things you can build with Ethereum + IPFS and Iâm super excited to see what you are thinking about.
đŹ We started a Scaffold-ETH & IPFS HackFS support chat, please join us if you have questions or comments!
đ If you would like to learn more, there are a handful of tutorials and example builds in the scaffold-eth repo.
đ Thanks
I want to give a huge shout out to Adam FullerđŚ. Without him this just wouldnât be done in time. He has put in a handful of nights and weekends to help me progress đ scaffold-eth with both â˝ď¸ GSN stuff and this IPFS+NFT stuff:
đ If you want to see how Adam and I are using this starter dapp to build a full product, follow the đŠâđ¨Â Nifty.Ink dev branch and look for updates coming soon!