Back to Home

Milestone 3

This page describes our progress by Milestone 3.

Project links

• M3 project board

User Guide

Landing Page

The landing page of the app shows the main benefits of using smart contracts. The user can sign up a new account or login in a existed accouunt. After logging in the account, the navigation bar in the landing page will show three options: Dashboard, Add Smart Contract, and Messenger which provide users with a quick start of the website main fucntions.

Profile Page

Once Users create a new account, they are directly prompted to the edit profile page filled with default placeholder values. Whenever users are on different window and wanted to view their profile, they can go to the top right corner and click on the dropdown menu to select view profile. Then, they can make the necessary changes to the form fields and can confirm the changes have been submitted successfully by the alert.

Dashboard

After signing in, the user can view their dashboard by clicking the button in the navigation bar. The dashboard provides an overview of all current contracts and some KPIs. At the top of the dashboard, the users can check their total active contracts, income and expenses. In the Smart Contracts field, there is a table for users to view all of their contracts, which contains the information of house address, homeowner name, tenant name, status and so on. The user can choose to sign, edit, view and check the transactions for each contract.

Last but not least, there are three buttons: create contracts, messenger and my profile which will redirect users to the exact pages.

Smart Contracts

Any user can create a smart contract and those who do so will be assumed to be the homeowner. To do so, click on the ‘Create Smart Contract’ tab in the navbar.

The user will be taken to the ‘Create Smart Contract page’, which contains a form and fields for the user to complete. User will notice that the Homeowner Details field has been filled and cannot be changed any more. This helps the homeowner create a smart contract in a fast and accurate way. When all fields are completed, pressing the ‘save’ button will save the data and create a new smart contract. The homeowner will find the new contract in the dashboard table which in a Pending status.

To modify the smart contract draft, the homeowner can select the ‘Edit’ page and make the necessary revisions. When completed, the homeowner can save their new updates for the tenant to view again. After confirming the contract information in correct, homeowner can click the ‘Sign’ button to sign the smart contract. They will have to enter full name to sign. After signing the contract, their name will be displayed in the Homeowner Signature filed.

The tenant will be able to view this smart contract from their account dashboard if their user correct account email is inputted into the ‘Tenant email’ field. The tenant can view the smart contract draft and declare their stance on the proposed smart contract by selecting ‘Agreement’ or ‘Unsigned’. After selecting their stance and pressing save, the homeowner will be able to see the tenant stance. If the tenant agrees, they can go on to fill out the signature field. Once taking a signature, this field disappears. If the tenant disagrees with the proposed smart contract, they can reach out to the homeowner about their concerns through the ‘Messenger’ feature. Only the tenant can fill out these fields.

Messenger

The messenger component allows users on the same contract to communicate with one another. Every time a contract gets created, a group is created with the members of the smart contract. The contract name is then used as the messenger group name. The screenshots in the gif below show the automatic screen updates during a conversation between two users.