Integrate an Ethereum dApp with IPFS and React (front-end)
Storing data on a blockchain is very very expensive. So what if I love decentralization, and want to preserve a document? IN comes IPFS! A P2P distributed web, where you can store your files. Storing anything in IPFS returns a hash (that is the location of the file). Now I took this hash and put it on the ethereum blockchain, so now the file has been stored in a trustworthy manner in the cheapest way!
So in this project, you can select a file that you want to store on IPFS, and interact with metamask and ethereum to deploy the file onto the IPFS, and take the hash and store it in the dAPP.
##How to work with it?
- Ensure you have metamask installed.
- On a command prompt do:
$ ganache-cli - Login into the metamask account using the seed words generated by ganache.
- On another command prompt, cd into
eth_ipfs_ui(this is where the front-end logic lives - written in React) $ npm run start- starts a web page atlocalhost:3000- Enjoy!
The web-page also gives you relevant details on where the ipfs hash is stored in the blockchain, the ipfs hash itself!
NOTE: You don't need to install ipfs for this! I have used a node of infura.io (see eth_ipfs_ui/src/ipfs.js)
To add a file to IPFS using the ipfs-api, the file must be converted into a buffer. This is done is eth_ipfs_ui/src/AppContainer.js