What Our App Looks Like
Home Page
The home page of our application gives users a brief introduction of what service our web application provides, followed by a simple button that leads to a contract creation page. At the top is the navigation bar, which navigates users to the "My Contracts" Page. The Metamask account number is conveniently displayed on the navigation bar as well to easily help users identify which Metamask account they are using.
Contract Creation
The contract creation page provides a form for users to quickly write their contract. The contract creator needs to provide their public key, the recipient's public key, a contract title, and the terms and conditions of the contract.
Once all fields of the form are filled, the Metamask extension will pop up in the browser upon clicking the 'Submit' button to confirm the transaction.
After the contract has been created and the transaction has been confirmed, Metamask will show the contract interaction under "Assets" or "Activity".
When switching to the Metamask account of the contract recipient, the pending contracts that are waiting to be signed or rejected are populated in the "My Contracts" Page. Once the 'Sign' or 'Reject' button is clicked, Metamask will pop up once again for the user to confirm the transaction.
My Contracts Page
Contract creators can view the contracts they created on the "My Contracts" Page under Pending. Notice that they do not have the buttons to sign or reject their own contract as they have already signed it on the contract creation page. In addition, they can view Signed and Rejected contracts under the corresponding sections.
Contract recipients can also view their Pending, Signed, and Rejected contracts. If they have not responded to a new contract under Pending, they will have the options to sign or reject it.
A filtering system was implemented so that users cannot view any contracts they are not involved in.
Ganache
In Ganache, users can view all the transactions that were made under "Transactions".
Clicking into the first transaction, we can see the contract that was made regarding babysitting. It displays all the transaction details including the terms and conditions of the contract.
Clicking into the second transaction, we can see the contract that was made regarding groceries. It displays all the transaction details including the terms and conditions of the contract.