The goal of this section is to explain to graders how to use the app to evaluate the various user stories.
- You will need to refresh the page manually after a transaction has confirmed to see the updated state (ex: if creating a new storefront, wait for the transaction to confirm, refresh, and the storefront will be there)
- Most transactions (ex: creating a storefront, withdrawing a balance, etc.) will require more gas than the default provided by MetaMask. Set the gas to `100000` or more when sending a transaction.
There are a list of stores on a central marketplace where shoppers can purchase goods posted by the store owners.
After having created storefronts (see below), go to the homepage (http://localhost:3000/) with an account that is neither an admin or storeowner and you will see a list of all storefronts.
An administrator opens the web app. The web app reads the address and identifies that the user is an admin, showing them admin only functions, such as managing store owners.
The account that deploys the contract will by default be an admin. After deploying the contract, simply log into the first account on MetaMask associated with your passphrase and admin only functions will be shown.
An admin adds an address to the list of approved store owners, so if the owner of that address logs into the app, they have access to the store owner functions.
The flow here is a bit different than in the story. To do this, first you will need to visit the homepage (http://localhost:3000/) with a non admin account, and click the Request to be a store owner button in the top-left of the page.
Once your transaction has confirmed, switch back to an admin account and visit the homepage. Under the Requested Store Owners header, you should see the address of the account that has sent in the request. To make the address a storeowner, click the Approve button and submit the transaction.
Once that transaction has confirmed, switch back to the account from which you created the request, and it should now display store owner functions.
To add more admins, simply visit the home page as an admin and enter a desired admin's address in the Add Admin form. After the transaction is confirmed, that account will now also be an admin.
An approved store owner logs into the app. The web app recognizes their address and identifies them as a store owner. They are shown the store owner functions.
See Admin Marketplace Management above to make an account a storeowner. After this, the homepage (http://localhost:3000/) should display store owner functionality.
They can create a new storefront that will be displayed on the marketplace. They can also see the storefronts that they have already created. They can click on a storefront to manage it.
With a storeowner account, on the homepage, you will see a Create a storefront section. There, you can enter the name for a new store front, and after clicking Create, it will be created. After the transaction has confirmed, refresh the page to see the new store front, along with its id and balance under Your Storefronts . To manage the store front, simply click its name.
They can add/remove products to the storefront or change any of the products’ prices.
As a storeowner, click on any created storefront from the homepage. On the storefront page, (http://localhost:3000/id={storefrontId}), fill in the information in the Add a Product section, and click the button. After the transaction is confirmed, refresh the page and the product should appear in the Products For Sale section.
As a storeowner, click on any created storefront from the homepage. On the storefront page, (http://localhost:3000/id={storefrontId}), after having added a product, in the Products For Sale section, you will be able to change a product's price by updating the value and submitting the Update Product Price form.
As a storeowner, click on any created storefront from the homepage. On the storefront page, (http://localhost:3000/id={storefrontId}), after having added a product, in the Products For Sale section, you will be able to remove a product by clicking on the "Remove" button. Once the transaction is confirmed, refresh the page to see that the product is not displayed anymore.
They can withdraw any funds that the store has collected from sales.
As a storeowner, visit the homepage (http://localhost:3000/). Under the name and ID of each store front, the balance will be listed. A storeowner can use the Withdraw balance button to withdraw the total balance of a storefront. After the transaction has confirmed, the balance for that store front will now be 0, and the storeowner's account balance will have been incremented by the total balance of the store.
A shopper logs into the app. The web app does not recognize their address so they are shown the generic shopper application. From the main page they can browse all of the storefronts that have been created in the marketplace. Clicking on a storefront will take them to a product page.
After having created at least one store front, simply visit the homepage (http://localhost:3000/) with any account that is neither an admin or storeowner to see a list of all store fronts with links to each of them.
They can see a list of products offered by the store, including their price and quantity. Shoppers can purchase a product, which will debit their account and send it to the store. The quantity of the item in the store’s inventory will be reduced by the appropriate amount.
To purchase a product, on a store front page, simply select the desired quantity and click Buy. A transaction will be created with the amount being the price of the product multiplied by the quantity. Once the transaction is confirmed, the value will be sent to the contract, and the quantity for the product will be updated after refreshing the page.