Survey Web3 Challenge

---

Ropsten (Ethereum) smart contract integration using Metamask, Ethers, React and Material UI v5

📝 Table of Contents

• Challenge Description
• Instructions
• Preview
• Built Using
• Notes
• Improvements

🧐 Challenge Description

A survey company wants to make a new quiz form that rewards users with tokens for participating in the survey. They create surveys, loading them into JSON format and they want you to program a responsive web application using React or Next.js & Material UI/AntDesign for people to answer and submit they results, getting tokens in the process.

The web should behave as follows:

• Connect Metamask wallet.
• Ensure the user is connected to Ropsten Testnet and if not connected show a button to switch networks automatically.
• Show the current balance of $QUIZ token (address below).
• Once the page is loaded, present the title of the daily trivia with its picture and a button that allows you to begin answering.
• Once the survey starts, display the current question, which will be available for the amount of seconds in the lifetimeSeconds property.
• Answered or not it should move onto the next question.
• Once all the questions are finished, show an overview with all the answers.
• Show a button to submit the questions to the validator contract
• Refresh the balance of $QUIZ

🏁 Instructions

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Steps

1 . Clone this repository or unzip the .zip file.

2 . Create an .env file following .env.example file.

3 . Install dependencies using:

$ yarn

4 . (Optional) Run existent tests with:

$ yarn test

3 . Run the development server with:

$ yarn start

4 . Make sure to install Metamask on your browser.

5 . Get some Ropsten ETH (rETH) from a faucet like this one

📸 Preview

Here are some screenshots of the app working. You can tell about the project structure just by looking at the user flow.

1 . Main View

2 . Survey View

3 . Overview

4 . Forbidden

Extras

Wallet Disconnection

Error Handling

Submittal

⛏️ Built Using

• ReactJs - Web UI Library
• Material UI - UI Component & Styles Library
• Ethers - Web3 Convenience Library
• Sentry - Error Reporting Toolkit

📝 Notes

• The application is live on Heroku. The latest version of the main can be found running here.

• Due to the challenge description not providing an actual API to fetch the Daily Trivia the sample JSON was served from the /public directory. Nevertheless, it is possible to change the URL and point to an actual API just by changing the variable REACT_APP_SURVEY_URL on the .env file.

• If any Sentry errors are seen in the console output, know this happens because you probably have an ad blocker of some sort installed as a browser extension.

♻️ Improvements

Here is a list with some improvements that could make both the user and developer experience better:

1 . Write the rest of the missing tests to help avoid unwanted state mutations and ensure a proper user flow.

2 . Extract re-usable logic from contexts and common components into custom hooks if deemed necessary.

3 . Improve error handling by typing and capturing Ethers.js errors such as replaced transactions, failed transactions, reverted transactions and transactions rejected by the user. Enumerate these in an enum structure or object of some sort.