Personal Branding logo
chain-agreement Cover Image
Posted Date - 12/25/2021Author Name - Ganesh Tiwari

Chain Agreement

A web3 based solution for creating Agreements online and store it on blockchain and IPFS

The project is available on GitHub as an Open Source Project for you to take an inspiration from here Chain Agreement Repository

A smart contract and a web project which enables users to create and store agreements online.

Smart Contract

The first part of this project is the smart contract and is defined in the below description

It has a simple Solidity contract which defines two functions like

  1. CreateAgreement(initiatorAddress, acceptorAddress, title, contentId)
  2. GetAgreement(contentId)

The create agreement function would write the transaction on chain and save it with index of contentId. You can retrieve the agreement with the use of contentId and get all the details.

React Project.

The Frontend Application is hosted at here and is built with ParcelJs and React with TailwindCSS used for styling it.

The frontend application is a simple application containing of two pages namely create, view which both do exactly as their name suggests.

On the create page you can create an agreement using addresses of initiator and acceptor and putting the actual agreement text as a markdown file.

Frontend Homepage

The process after this is rather simple. Firstly the markdown file with appropriate details attached is sent to IPFS and uploaded using web3.storage API's. This helps us make sure that the agreements will remain alive and accessible as long as IPFS is available and all this is possible due to how Filecoin is built.

I have attached some screenshots of how this all works in below and you can see a proper example with the help of it.

Agreement Creation page with details filled in

Agreement creation process progress screen

After the uploading of agreement on IPFS it is time to write the agreement transaction data on chain with the help of the smart contract that we developed earlier.

We use React-Moralis to accomplish this task and it takes the content-id that we have received from the IPFS upload task.

Remember storing things on-chain is costly so try to minimize whatever you store on-chain.

View Agreement page with all the details visible

I plan to built a newer version of this application with a lot of other things built into it and have called in some of my friends to help me build it better. I will constantly write about the progress we have made in other projects or in my blogs.

Thanks for giving this a read

Tags -
solidity
typescript
react
parceljs
metamask
IPFS
hardhat
Made with ❤️ by  Ganesh Tiwari