feat/frontend(2.0.0-rc) (#15)

## Version [2.0.0-rc] (22/12/2022) ### 🎸 FEAT - Created Solidity Contract Provider [INIT_CONFIG] - Created new Components and Added Lazy Loading [APP_BAR] - Created StorageDB [HOOK] - Created Global Ethereum Var [TYPE_D.TS] - Created Component [CANDIDATE_LIST_SKELETON] - Created Component [ABSTAIN_VOTE_BUTTON] - Created Provider [STORAGEDB] - Created Utils [LAZY_LOADING_COMPONENT] - Created VoteProgressTitle & VoteProgressBar Components - Created Template Component [LOADING] - Created Animation [PROGRESS] - Created Component [LOADING] - Created Hook [ETHERS] - Created ConfirmVote, AbstainVote and SendTransaction - Created Hook [CALCULATOR_HOOK] - Created hasVoted Function [HOME_PAGE] - Created Logs Item and Added Icon [CONNECTED_WALLET] - Created Hook [ROUTE_NAVIGATION] - Created Page [HELP_PAGE] - Changed File Path [GENERIC_SKELETON] - Changed Pathname [GLOBALS] - Changed Session to Local Storage [STORAGEDB_HOOK] - Changed Component Render Logic [HOME_PAGE] - Changed Connect Timer [STORAGEDB_HOOK] - Changed Context Name [SOLIDITY_CONTRACT_PROVIDER] - Changed MD Size [LOGOTYPE_UTIL] - Components Refactored - Comments Removed - Added Toastify Library - Added Solidity Contract Provider [APP_BAR_GLOBAL] - Added Underscore Dangle Rule [ESLINT] - Added isRounded Property [GENERIC_SKELETON] - Added Skeleton SRC [AVATAR] - Added Loading Skeleton [HOME_PAGE] - Added Events Listenner [SOLIDITY_CONTRACT_PROVIDER] - Added Rule [STYLELINT] - Added new Size and Changed Loading Type [LOGOTYPE] - Added Color Var, Loading Template and Correction [APP] - Added new functions Callbacks= [CANDIDATE_LIST] - Added limit and newestOnTop [TOAST CONTAINER] - Added Contract [SOLIDITY] - Added Listener to Event Emit [HOME_PAGE - PROVIDERS] - Added Help Item and Route Logic [CONENCTED_WALLET_BTN] - Added Navigation to Home Page [APP_BAR_GLOBAL] - Added new Libraries and Updated Version [PACKAGE] - Added Social Share Preview - Refactored Buttons, Globals, Lists and Utils Components - Refactored Solidity Contract [PROVIDER] - Refactored Hooks, D.TS, Home Page and Providers - Refactored [README] - Refactoring [HOME_PAGE] - Refactoring Components - Renamed All Component Files - Renamed useHook [STORAGEDB_PROVIDER] - Renamed File [STORAGEDB_HOOK] - Renamed File [AVATAR_UTIL] - Renamed File [LOADING_UTIL] - Renamed File [LOGOTYPE_UTIL] - Renamed File and Removed Actions [APP] - Renamed Folder [PAGE_TEMPLATE] - Removed Unnecessary Number Conversion [HOOK] - Removed Unnecessary Things [SOLIDITY_CONTRACT_PROVIDER] - Removed Lazy Loading [APP_BAR_GLOBAL] - Removed Toast Promise Sucess Msg [SOLIDITY_CONTRACT] - Removed [LICENSE] ### 💍 TEST - Refactored All Tests ### ✏️ DOCS - Added Comments in All Components! ### 🐛 FIX - Correction in Total Percentage [HOME_PAGE] - Correction Block Button Logic [HOME_PAGE] - Correction in Smartphone Wallet Connect - Correction in Provider Signed-off-by: THIAGO SAUD <[email protected]>
thiagosaud · Dec 28, 2022 · a557760 · a557760
1 parent 3da3e76
commit a557760
Show file tree

Hide file tree

Showing 72 changed files with 3,256 additions and 588 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -49,6 +49,7 @@ module.exports = {
  },
  plugins: ['react', 'react-hooks', 'prettier', 'eslint-plugin-import-helpers', '@typescript-eslint'],
  rules: {
+ 'no-underscore-dangle': ['error', { allow: ['_hex'] }],
  'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
  'react/prop-types': 'off',
  'react/react-in-jsx-scope': 'off',

diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc
@@ -15,6 +15,7 @@
  }
  ],
  "rules": {
- "value-keyword-case": null
+ "value-keyword-case": null,
+ "keyframes-name-pattern": null
  }
 }
diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md
@@ -54,15 +54,15 @@ Use the pattern below:
 
 ### :ring: TEST
 
-- Created Test [VOTING STATISTIC LIST]
-- Created Test [CANDIDATE LIST]
-- Created Test [NUMBER CONVERSION HOOK]
-- Created Test [HOME PAGE]
-- Created Test [LOGOTYPE UTIL]
-- Created Test [AVATAR UTIL]
-- Created Test [FOOTER BAR GLOBAL]
-- Created Test [APP BAR GLOBAL]
-- Created Test [TEMPLATE PAGE]
+- Created Test [VOTING_STATISTIC_LIST]
+- Created Test [CANDIDATE_LIST]
+- Created Test [NUMBER_CONVERSION_HOOK]
+- Created Test [HOME_PAGE]
+- Created Test [LOGOTYPE_UTIL]
+- Created Test [AVATAR_UTIL]
+- Created Test [FOOTERBAR_GLOBAL]
+- Created Test [APPBAR_GLOBAL]
+- Created Test [TEMPLATEPAGE]
 - Created Test [ROUTER]
 
 ## Version [1.0.3@palpha] (29/11/2022)
@@ -77,18 +77,90 @@ Use the pattern below:
 
 - Correction in Unit Test [ROUTER]
 
-## Version [2.0.0-rc] (27/12/2022)
+## Version [2.0.0-rc] (22/12/2022)
 
 ### :guitar: FEAT
 
-- Updated Version, Description, and Added LIB [PACKAGE]
+- Created Solidity Contract Provider [INIT_CONFIG]
+- Created new Components and Added Lazy Loading [APP_BAR]
+- Created StorageDB [HOOK]
+- Created Global Ethereum Var [TYPE_D.TS]
+- Created Component [CANDIDATE_LIST_SKELETON]
+- Created Component [ABSTAIN_VOTE_BUTTON]
+- Created Provider [STORAGEDB]
+- Created Utils [LAZY_LOADING_COMPONENT]
+- Created VoteProgressTitle & VoteProgressBar Components
+- Created Template Component [LOADING]
+- Created Animation [PROGRESS]
+- Created Component [LOADING]
+- Created Hook [ETHERS]
+- Created ConfirmVote, AbstainVote and SendTransaction
+- Created Hook [CALCULATOR_HOOK]
+- Created hasVoted Function [HOME_PAGE]
+- Created Logs Item and Added Icon [CONNECTED_WALLET]
+- Created Hook [ROUTE_NAVIGATION]
+- Created Page [HELP_PAGE]
+- Changed File Path [GENERIC_SKELETON]
+- Changed Pathname [GLOBALS]
+- Changed Session to Local Storage [STORAGEDB_HOOK]
+- Changed Component Render Logic [HOME_PAGE]
+- Changed Connect Timer [STORAGEDB_HOOK]
+- Changed Context Name [SOLIDITY_CONTRACT_PROVIDER]
+- Changed MD Size [LOGOTYPE_UTIL]
+- Components Refactored
+- Comments Removed
+- Added Toastify Library
+- Added Solidity Contract Provider [APP_BAR_GLOBAL]
+- Added Underscore Dangle Rule [ESLINT]
+- Added isRounded Property [GENERIC_SKELETON]
+- Added Skeleton SRC [AVATAR]
+- Added Loading Skeleton [HOME_PAGE]
+- Added Events Listenner [SOLIDITY_CONTRACT_PROVIDER]
+- Added Rule [STYLELINT]
+- Added new Size and Changed Loading Type [LOGOTYPE]
+- Added Color Var, Loading Template and Correction [APP]
+- Added new functions Callbacks= [CANDIDATE_LIST]
+- Added limit and newestOnTop [TOAST CONTAINER]
+- Added Contract [SOLIDITY]
+- Added Listener to Event Emit [HOME_PAGE - PROVIDERS]
+- Added Help Item and Route Logic [CONENCTED_WALLET_BTN]
+- Added Navigation to Home Page [APP_BAR_GLOBAL]
+- Added new Libraries and Updated Version [PACKAGE]
+- Added Social Share Preview
+- Refactored Buttons, Globals, Lists and Utils Components
+- Refactored Solidity Contract [PROVIDER]
+- Refactored Hooks, D.TS, Home Page and Providers
+- Refactored [README]
+- Refactoring [HOME_PAGE]
+- Refactoring Components
+- Renamed All Component Files
+- Renamed useHook [STORAGEDB_PROVIDER]
+- Renamed File [STORAGEDB_HOOK]
+- Renamed File [AVATAR_UTIL]
+- Renamed File [LOADING_UTIL]
+- Renamed File [LOGOTYPE_UTIL]
+- Renamed File and Removed Actions [APP]
+- Renamed Folder [PAGE_TEMPLATE]
+- Removed Unnecessary Number Conversion [HOOK]
+- Removed Unnecessary Things [SOLIDITY_CONTRACT_PROVIDER]
+- Removed Lazy Loading [APP_BAR_GLOBAL]
+- Removed Toast Promise Sucess Msg [SOLIDITY_CONTRACT]
 - Removed [LICENSE]
 
-### :bulb: REFACTOR
+### :ring: TEST
+
+- Refactored All Tests
+
+### :pencil2: DOCS
 
-- Refactored Contracts and Tests
+- Added Comments in All Components!
+
+### :bug: FIX
 
----
+- Correction in Total Percentage [HOME_PAGE]
+- Correction Block Button Logic [HOME_PAGE]
+- Correction in Smartphone Wallet Connect
+- Correction in Provider
 
 **THANK YOU FOR YOUR CONTRIBUTION TO THE PROJECT. 💖
 BY [THIAGO DE BONIS CARVALHO SAAD SAUD SAUD](https://www.linkedin.com/in/thiagosaud/)**
diff --git a/frontend/LICENSE b/frontend/LICENSE
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,68 @@
+## :crown: Frontend Technologies
+
+| NAME | URL |
+| --------------------- | --------------------------------------------------------------------- |
+| REACTJS | [LINK](https://reactjs.org/) |
+| REACT-ROUTER-DOM | [LINK](https://reactrouter.com/en/main) |
+| REACT-TESTING-LIBRARY | [LINK](https://testing-library.com/docs/react-testing-library/intro/) |
+| REACT-TEST-RENDERER | [LINK](https://reactjs.org/docs/test-renderer.html) |
+| REACT-BOOTSTRAP | [LINK](https://react-bootstrap.github.io/) |
+| REACT-ICONS | [LINK](https://react-icons.github.io/react-icons/) |
+| REACT-TOASTIFY | [LINK](https://fkhadra.github.io/react-toastify/introduction) |
+| WEB-VITALS | [LINK](https://web.dev/i18n/pt/vitals/) |
+| TYPESCRIPT | [LINK](https://www.typescriptlang.org/) |
+| ESLINT | [LINK](https://eslint.org/) |
+| STYLELINT | [LINK](https://stylelint.io/) |
+| STYLED-COMPONENTS | [LINK](https://styled-components.com/) |
+| POSTCSS | [LINK](https://postcss.org/) |
+| PRETTIER | [LINK](https://prettier.io/) |
+| MATHJS | [LINK](https://mathjs.org/docs/reference/functions/format.html) |
+| ETHERS | [LINK](https://docs.ethers.org/v5/getting-started/) |
+| METAMASK | [LINK](https://docs.metamask.io/guide/#why-metamask) |
+
+## :wrench: Frontend Techniques
+
+| NAME | TECHNOLOGIES |
+| ------------------------------------- | ------------------------------ |
+| REACT HOOKS | HOOKS |
+| REACT CONTEXT API | PROVIDER, CONTEXT, AND HOOK |
+| CACHING | LOCAL STORAGE |
+| CODE SYNTAX ANALISYS | ESLINT, STYLELINT |
+| CODE STYLE-GUIDE | AIRBNB, PRETTIER, EDITORCONFIG |
+| BRANCH CONTROL AND STANDARDIZATION | BRANCHNAMELINT |
+| COMMIT CONTROL AND STANDARDIZATION | COMMITLINT |
+| GIT HOOKS CONTROL AND STANDARDIZATION | HUSKY |
+| ARCHITECTURE FOLDERS AND FILES DESIGN | ATOMIC DESIGN |
+| RESPONSIVE DESIGN | MOBILE FIRST, FLEXBOX AND GRID |
+
+## :electric_plug: How it works
+
+To install the dependencies, run the following command:
+
+`yarn`
+
+To start the project, run the following command:
+
+`yarn start`
+
+To test the project, run the following command:
+
+`yarn test` or `yarn jest`
+
+To test the parsing and style-guide of the code, you can run the following commands separately:
+
+`yarn lint`
+
+`yarn prettier:check`
+
+`yarn stylelint:check`
+
+## :heartpulse: Sponsor
+
+Made with ♥ and with the intention of learning and passing on knowledge.
+
+So that I can work full-time and open to the community, thus bringing more relevance and technological solutions. It would mean a lot to me and the whole community if you help me reach this goal.
+
+[![MY SPONSORS](https://img.shields.io/static/v1?label=SPONSOR&message=CLICK&style=for-the-badge&logo=GitHubSponsors&color=EA4AAA)](https://github.com/sponsors/thiagosaud)
+
+---
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "frontend",
- "version": "1.0.4@alpha",
+ "version": "2.0.0-rc",
  "license": "MIT",
  "description": "This is our open source frontend project. In this project we can analyze the development of our dApp with reactjs, typescript, ethers and etc.",
  "author": {
@@ -23,6 +23,9 @@
  "stylelint-health:check": "stylelint-config-prettier-check"
  },
  "dependencies": {
+ "@metamask/detect-provider": "^2.0.0",
+ "@metamask/onboarding": "^1.0.1",
+ "@metamask/providers": "^10.2.1",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^14.4.3",
@@ -34,12 +37,16 @@
  "@types/styled-components": "^5.1.26",
  "bootstrap": "^5.2.2",
  "eslint-config-react": "^1.1.7",
+ "ethers": "^5.7.2",
+ "mathjs": "^11.5.0",
  "react": "^18.2.0",
  "react-bootstrap": "^2.5.0",
  "react-dom": "^18.2.0",
+ "react-icons": "^4.7.1",
  "react-router-dom": "^6.4.3",
  "react-scripts": "5.0.1",
  "react-test-renderer": "^18.2.0",
+ "react-toastify": "^9.1.1",
  "styled-components": "^5.3.6",
  "typescript": "^4.8.4",
  "web-vitals": "^3.0.2"

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -4,12 +4,19 @@
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#F7AB00" />
  <meta name="author" content="THIAGO DE BONIS CARVALHO SAAD SAUD">
  <meta name="description" content="Web site created using create-react-app" />
  <meta name="keywords" content="dApps, web3, blockchain, solidity, ethereum, metamask, smart contracts, TSE" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <meta property="og:url" content="/" />
+ <meta property="og:type" content="article" />
+ <meta property="og:title" content="dApp - Superior Electoral Court (TSE)" />
+ <meta property="og:description" content="Created By THIAGO SAUD" />
+ <meta property="og:image"
+ content="https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/social-preview.png" />
+
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/frontend/src/@types/global.d.ts b/frontend/src/@types/global.d.ts
@@ -0,0 +1,14 @@
+import { MetaMaskInpageProvider } from '@metamask/providers';
+import { ExternalProvider } from '@ethersproject/providers';
+
+/**
+ * @thiagosaud
+ * @description This module exports the ethereum provider!
+ * @type {MetaMaskInpageProvider}: MetaMask Extension Provider
+ * @type {ExternalProvider}: Web3 connection provider
+ */
+declare global {
+ interface Window {
+ ethereum?: MetaMaskInpageProvider | ExternalProvider;
+ }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,19 +1,49 @@
 import { memo } from 'react';
-import { createGlobalStyle } from 'styled-components';
 import Router from 'Router';
+import { ToastContainer } from 'react-toastify';
+import { createGlobalStyle } from 'styled-components';
+import LoadingTemplate from 'templates/LoadingTemplate';
+import { useStorageDBProviderHook } from 'providers/useStorageDBProvider';
+import SolidityContractProvider, { useSolidityContractProviderHook } from 'providers/useSolidityContractProvider';
 
 const GlobalStyle = createGlobalStyle`
  body {
- color: white;
+ color: var(--bs-white);
  background-color: #596F99;
  }
 `;
 
+/**
+ * @thiagosaud
+ * @description This component is unique in that it controls all main flow components and logic!
+ */
 function App() {
+ const useStorageDBProvider = useStorageDBProviderHook();
+ const useSolidityContractProvider = useSolidityContractProviderHook();
+
  return (
  <>
  <GlobalStyle />
- <Router />
+
+ {useStorageDBProvider.healthCheck.isLoading && useSolidityContractProvider.states.healthCheck ? (
+ <LoadingTemplate />
+ ) : (
+ <SolidityContractProvider>
+ <Router />
+ </SolidityContractProvider>
+ )}
+
+ <ToastContainer
+ theme='light'
+ position='top-right'
+ rtl={false}
+ limit={5}
+ newestOnTop
+ draggable
+ pauseOnFocusLoss
+ pauseOnHover
+ closeOnClick
+ />
  </>
  );
 }

diff --git a/frontend/src/Router.test.tsx b/frontend/src/Router.test.tsx