diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 3ff5135..7ebee9b 100644
--- 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
index 43d7dfa..7b0bdcb 100644
--- 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
index 4f70336..100aabc 100644
--- 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
deleted file mode 100644
index 228eacd..0000000
--- a/frontend/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 THIAGO SAUD
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..da0e860
--- /dev/null
+++ 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
index 8623d36..4620bf8 100644
--- 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
index 9ddcad9..0c5b0df 100644
--- 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
new file mode 100644
index 0000000..abebcc4
--- /dev/null
+++ 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
index fa42e84..93c3e40 100644
--- 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
deleted file mode 100644
index b4ec855..0000000
--- a/frontend/src/Router.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import TestRenderer from 'react-test-renderer';
-import { BrowserRouter, Routes, Navigate } from 'react-router-dom';
-import AppbarGlobal from 'components/Global/AppbarGlobal';
-import FooterbarGlobal from 'components/Global/FooterbarGlobal';
-import HomePage from 'pages/HomePage';
-import Router from 'Router';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-describe('[ROUTER] - Testing Component', () => {
-	test('Should be have child components!', () => {
-		const renderResult = TestRenderer.create(<Router />);
-		const renderResultRendered: any = renderResult.toTree()?.rendered;
-
-		expect(renderResultRendered.type).toStrictEqual(BrowserRouter);
-		expect(renderResultRendered.props?.children[0]?.type).toStrictEqual(AppbarGlobal);
-		expect(renderResultRendered.props?.children[1]?.type).toStrictEqual(Routes);
-		expect(renderResultRendered.props?.children[2]?.type).toStrictEqual(FooterbarGlobal);
-	});
-
-	test('Should be root route working!', () => {
-		const renderResult = TestRenderer.create(<Router />);
-		const renderResultRendered: any = renderResult.toTree()?.rendered;
-		const routerProps = renderResultRendered?.props.children[1].props.children[0].props;
-
-		expect(routerProps?.path).toStrictEqual('/');
-		expect(routerProps?.element?.type).toStrictEqual(HomePage);
-		expect(routerProps?.index).toBe(true);
-	});
-
-	test('Should be 404 route working!', () => {
-		const renderResult = TestRenderer.create(<Router />);
-		const renderResultRendered: any = renderResult.toTree()?.rendered;
-		const routerProps = renderResultRendered?.props?.children[1]?.props?.children[1]?.props;
-
-		expect(routerProps?.path).toStrictEqual('*');
-		expect(routerProps?.element?.type).toStrictEqual(Navigate);
-	});
-});
diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx
index bb55ec8..cfd039a 100644
--- a/frontend/src/Router.tsx
+++ b/frontend/src/Router.tsx
@@ -1,9 +1,14 @@
 import { memo } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import AppbarGlobal from 'components/Global/AppbarGlobal';
-import FooterbarGlobal from 'components/Global/FooterbarGlobal';
+import AppbarGlobal from 'components/Globals/AppbarGlobal';
+import FooterbarGlobal from 'components/Globals/FooterbarGlobal';
 import HomePage from 'pages/HomePage';
+import HelpPage from 'pages/HelpPage';
 
+/**
+ * @thiagosaud
+ * @description This component is unique in that it controls all routing flow and global components!
+ */
 function Router() {
 	return (
 		<BrowserRouter>
@@ -11,6 +16,7 @@ function Router() {
 
 			<Routes>
 				<Route path='/' element={<HomePage />} index />
+				<Route path='/help' element={<HelpPage />} />
 				<Route path='*' element={<Navigate to='/' replace />} />
 			</Routes>
 
diff --git a/frontend/src/__test__/mocks/CandidateListMock.ts b/frontend/src/__test__/mocks/CandidateListMock.ts
index 62f77bf..c262c00 100644
--- a/frontend/src/__test__/mocks/CandidateListMock.ts
+++ b/frontend/src/__test__/mocks/CandidateListMock.ts
@@ -1,70 +1,55 @@
 export interface IData {
-	onConfirmVote: (number: number) => void;
 	number: number;
-	avatar: string;
-	hasVoted: boolean;
 	votesConfirmed: {
 		total: number;
 		totalPercentage: number;
 	};
 }
 
+export interface IProps {
+	onConfirmVote: (number: number) => void;
+	hasVoted: boolean;
+	data: IData[];
+}
+
 const MOCKED_DATA: IData[] = [
 	{
-		onConfirmVote: (number: number) => number,
 		number: 1,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-1.png',
-		hasVoted: true,
 		votesConfirmed: {
 			total: 124252799,
 			totalPercentage: 99.99,
 		},
 	},
 	{
-		onConfirmVote: (number: number) => number,
 		number: 2,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-2.png',
-		hasVoted: false,
 		votesConfirmed: {
 			total: 124252796,
 			totalPercentage: 99.59,
 		},
 	},
 	{
-		onConfirmVote: (number: number) => number,
 		number: 3,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-3.png',
-		hasVoted: false,
 		votesConfirmed: {
 			total: 124252796,
 			totalPercentage: 99.59,
 		},
 	},
 	{
-		onConfirmVote: (number: number) => number,
 		number: 4,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-4.png',
-		hasVoted: false,
 		votesConfirmed: {
 			total: 124252796,
 			totalPercentage: 99.59,
 		},
 	},
 	{
-		onConfirmVote: (number: number) => number,
 		number: 5,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-5.png',
-		hasVoted: false,
 		votesConfirmed: {
 			total: 124252796,
 			totalPercentage: 99.59,
 		},
 	},
 	{
-		onConfirmVote: (number: number) => number,
 		number: 6,
-		avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-6.png',
-		hasVoted: false,
 		votesConfirmed: {
 			total: 124252796,
 			totalPercentage: 99.59,
diff --git a/frontend/src/__test__/mocks/VoteProgressBarUtilMock.ts b/frontend/src/__test__/mocks/VoteProgressBarUtilMock.ts
new file mode 100644
index 0000000..1f21079
--- /dev/null
+++ b/frontend/src/__test__/mocks/VoteProgressBarUtilMock.ts
@@ -0,0 +1,15 @@
+export interface IProps {
+	votes: {
+		confirmed: number;
+		abstention: number;
+	};
+}
+
+const MOCKED_DATA: IProps = {
+	votes: {
+		confirmed: 99.99,
+		abstention: 89.85,
+	},
+};
+
+export default MOCKED_DATA;
diff --git a/frontend/src/__test__/mocks/VoteProgressTitleUtilMock.ts b/frontend/src/__test__/mocks/VoteProgressTitleUtilMock.ts
new file mode 100644
index 0000000..3ba5740
--- /dev/null
+++ b/frontend/src/__test__/mocks/VoteProgressTitleUtilMock.ts
@@ -0,0 +1,11 @@
+export interface IProps {
+	total: number | string;
+	percentage: number | string;
+}
+
+const MOCKED_DATA: IProps = {
+	total: 5,
+	percentage: 89.85,
+};
+
+export default MOCKED_DATA;
diff --git a/frontend/src/animations/ProgressAnimation.tsx b/frontend/src/animations/ProgressAnimation.tsx
new file mode 100644
index 0000000..0ee872d
--- /dev/null
+++ b/frontend/src/animations/ProgressAnimation.tsx
@@ -0,0 +1,20 @@
+import { css, keyframes } from 'styled-components';
+
+/**
+ * @thiagosaud
+ * @description This file creates the loading animation!
+ */
+
+/** @description This constant returns the CSSKeyFrames! */
+const KEYFRAME = keyframes`
+  	50% {
+		left: 96px;
+	}
+`;
+
+/** @description This function returns the animation already with the Keyframe applied! */
+const ProgressAnimation = () => css`
+	animation: ${KEYFRAME} 2s linear infinite;
+`;
+
+export default ProgressAnimation;
diff --git a/frontend/src/assets/images/skeleton.png b/frontend/src/assets/images/skeleton.png
new file mode 100644
index 0000000..ad830b2
Binary files /dev/null and b/frontend/src/assets/images/skeleton.png differ
diff --git a/frontend/src/components/Buttons/AbstainVoteButton/index.test.tsx b/frontend/src/components/Buttons/AbstainVoteButton/index.test.tsx
new file mode 100644
index 0000000..ad8c33c
--- /dev/null
+++ b/frontend/src/components/Buttons/AbstainVoteButton/index.test.tsx
@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import AbstainVoteButton from 'components/Buttons/AbstainVoteButton';
+
+const handleOnClick = jest.fn();
+
+describe('[ABSTAIN VOTE BUTTON] Generic Testing', () => {
+	test('It should have the title "Abstain from Voting"!', () => {
+		render(<AbstainVoteButton onAbstainVote={handleOnClick} isDisabled />);
+		expect(screen.getByText(/Abstain from Voting/i)).toBeInTheDocument();
+	});
+});
+
+describe('[ABSTAIN VOTE BUTTON] Testing OnClick Event', () => {
+	test('Should be able to click with enabled button!', () => {
+		render(<AbstainVoteButton onAbstainVote={handleOnClick} isDisabled={false} />);
+		const BUTTON = screen.getByText(/Abstain from Voting/i);
+
+		fireEvent.click(BUTTON);
+
+		expect(BUTTON).toBeEnabled();
+		expect(handleOnClick).toHaveBeenCalled();
+		expect(handleOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	test('Should not be able to click with disabled button!', () => {
+		render(<AbstainVoteButton onAbstainVote={handleOnClick} isDisabled />);
+		const BUTTON = screen.getByText(/Abstain from Voting/i);
+
+		fireEvent.click(BUTTON);
+
+		expect(BUTTON).toBeDisabled();
+		expect(handleOnClick).not.toHaveBeenCalled();
+		expect(handleOnClick).toHaveBeenCalledTimes(0);
+	});
+});
diff --git a/frontend/src/components/Buttons/AbstainVoteButton/index.tsx b/frontend/src/components/Buttons/AbstainVoteButton/index.tsx
new file mode 100644
index 0000000..7de3705
--- /dev/null
+++ b/frontend/src/components/Buttons/AbstainVoteButton/index.tsx
@@ -0,0 +1,21 @@
+import { Button } from 'react-bootstrap';
+
+interface IProps {
+	onAbstainVote: () => void;
+	isDisabled: boolean;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to Abstain the Vote!
+ * @interface IProps
+ */
+function AbstainVoteButton({ onAbstainVote, isDisabled }: IProps) {
+	return (
+		<Button onClick={onAbstainVote} variant='light' disabled={isDisabled}>
+			Abstain from Voting
+		</Button>
+	);
+}
+
+export default AbstainVoteButton;
diff --git a/frontend/src/components/Buttons/ConnectWalletButton/index.test.tsx b/frontend/src/components/Buttons/ConnectWalletButton/index.test.tsx
new file mode 100644
index 0000000..8854b0d
--- /dev/null
+++ b/frontend/src/components/Buttons/ConnectWalletButton/index.test.tsx
@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import ConnectWalletButton from 'components/Buttons/ConnectWalletButton';
+
+const handleOnClick = jest.fn();
+
+describe('[ConnectWalletButton] Generic Testing', () => {
+	test('It should have the title "Connect Wallet"!', () => {
+		render(<ConnectWalletButton onConnect={handleOnClick} isDisabled />);
+		expect(screen.getByText(/Connect Wallet/i)).toBeInTheDocument();
+	});
+});
+
+describe('[ConnectWalletButton] Testing OnClick Event', () => {
+	test('Should be able to click with enabled button!', () => {
+		render(<ConnectWalletButton onConnect={handleOnClick} isDisabled={false} />);
+		const BUTTON = screen.getByText(/Connect Wallet/i);
+
+		fireEvent.click(BUTTON);
+
+		expect(BUTTON).toBeEnabled();
+		expect(handleOnClick).toHaveBeenCalled();
+		expect(handleOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	test('Should not be able to click with disabled button!', () => {
+		render(<ConnectWalletButton onConnect={handleOnClick} isDisabled />);
+		const BUTTON = screen.getByText(/Connect Wallet/i);
+
+		fireEvent.click(BUTTON);
+
+		expect(BUTTON).toBeDisabled();
+		expect(handleOnClick).not.toHaveBeenCalled();
+		expect(handleOnClick).toHaveBeenCalledTimes(0);
+	});
+});
diff --git a/frontend/src/components/Buttons/ConnectWalletButton/index.tsx b/frontend/src/components/Buttons/ConnectWalletButton/index.tsx
new file mode 100644
index 0000000..fca8e7e
--- /dev/null
+++ b/frontend/src/components/Buttons/ConnectWalletButton/index.tsx
@@ -0,0 +1,21 @@
+import { Button } from 'react-bootstrap';
+
+interface IProps {
+	onConnect: () => void;
+	isDisabled: boolean;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is unique for connecting wallet to wallet in MetaMask!
+ * @interface IProps
+ */
+function ConnectWalletButton({ onConnect, isDisabled }: IProps) {
+	return (
+		<Button onClick={onConnect} variant='warning' disabled={isDisabled}>
+			Connect Wallet
+		</Button>
+	);
+}
+
+export default ConnectWalletButton;
diff --git a/frontend/src/components/Buttons/ConnectedWalletButton/index.test.tsx b/frontend/src/components/Buttons/ConnectedWalletButton/index.test.tsx
new file mode 100644
index 0000000..8521bb3
--- /dev/null
+++ b/frontend/src/components/Buttons/ConnectedWalletButton/index.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import ConnectedWalletButton from 'components/Buttons/ConnectedWalletButton';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useNavigate: jest.fn(),
+}));
+
+const handleOnClick = jest.fn();
+
+describe('[CONNECTED WALLET BUTTON] Generic Testing', () => {
+	test('It should have the Dropdown Button!', () => {
+		render(<ConnectedWalletButton onLogout={handleOnClick} wallet='' isDisabled />);
+		expect(screen.getByTestId(/dropdown-button/i)).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/components/Buttons/ConnectedWalletButton/index.tsx b/frontend/src/components/Buttons/ConnectedWalletButton/index.tsx
new file mode 100644
index 0000000..9c6ca12
--- /dev/null
+++ b/frontend/src/components/Buttons/ConnectedWalletButton/index.tsx
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { RxExit } from 'react-icons/rx';
+
+interface IProps {
+	onLogout: () => void;
+	wallet: string;
+	isDisabled: boolean;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to execute actions from an already connected wallet!
+ * @interface IProps
+ */
+function ConnectedWalletButton({ onLogout, wallet, isDisabled }: IProps) {
+	const navigateHook = useNavigate();
+
+	const hash = useMemo(() => wallet.substring(0, 11), [wallet]);
+
+	const openContractPage = () =>
+		window.open(`https://goerli.etherscan.io/address/${process.env.REACT_APP_SOLIDITY_CONTRACT_ADDRESS}`, '_blank', 'noopener,noreferrer');
+
+	const goToHelpPage = () => navigateHook('/help');
+
+	return (
+		<DropdownButton variant='warning' align='end' title={hash} disabled={isDisabled} data-testid='dropdown-button'>
+			<Dropdown.Item as='button' onClick={openContractPage}>
+				Logs
+			</Dropdown.Item>
+			<Dropdown.Item as='button' onClick={goToHelpPage}>
+				Help
+			</Dropdown.Item>
+			<Dropdown.Item as='button' onClick={onLogout} className='d-flex gap-2 align-items-center'>
+				Logout
+				<RxExit size='20' color='black' />
+			</Dropdown.Item>
+		</DropdownButton>
+	);
+}
+
+export default ConnectedWalletButton;
diff --git a/frontend/src/components/Global/AppbarGlobal/index.test.tsx b/frontend/src/components/Global/AppbarGlobal/index.test.tsx
deleted file mode 100644
index 63bb480..0000000
--- a/frontend/src/components/Global/AppbarGlobal/index.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import AppbarGlobal from '.';
-
-describe('[APP BAR GLOBAL] - Testing Component', () => {
-	test('Should be have childs component!', async () => {
-		render(<AppbarGlobal />);
-
-		const logotype = await screen.findByRole('img');
-		const connectWallet = screen.getByText(/Connect Wallet/i);
-		const title = screen.getByText(/dApp - Superior Electoral Court/i);
-
-		expect(logotype).toBeInTheDocument();
-		expect(connectWallet).toBeInTheDocument();
-		expect(title).toBeInTheDocument();
-	});
-});
diff --git a/frontend/src/components/Global/AppbarGlobal/index.tsx b/frontend/src/components/Global/AppbarGlobal/index.tsx
deleted file mode 100644
index 9359387..0000000
--- a/frontend/src/components/Global/AppbarGlobal/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Logotype from 'components/Util/Logotype';
-import { Button, Container, Nav, Navbar } from 'react-bootstrap';
-// import { Button, Container, Dropdown, DropdownButton, Nav, Navbar } from 'react-bootstrap';
-
-export default function AppbarGlobal() {
-	return (
-		<Navbar expand='lg' fixed='top' bg='light' variant='light' collapseOnSelect>
-			<Container>
-				<Navbar.Brand className='d-flex gap-2 align-items-center'>
-					<Logotype size='xs' />
-					<Navbar.Collapse>dApp - Superior Electoral Court</Navbar.Collapse>
-				</Navbar.Brand>
-
-				<Nav className='justify-content-end'>
-					<Button variant='warning'>Connect Wallet</Button>
-
-					{/* <DropdownButton title='#B3A7CCF' variant='warning'>
-						<Dropdown.Item as='button'>Logout</Dropdown.Item>
-					</DropdownButton> */}
-				</Nav>
-			</Container>
-		</Navbar>
-	);
-}
diff --git a/frontend/src/components/Globals/AppbarGlobal/index.test.tsx b/frontend/src/components/Globals/AppbarGlobal/index.test.tsx
new file mode 100644
index 0000000..08c5914
--- /dev/null
+++ b/frontend/src/components/Globals/AppbarGlobal/index.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import AppbarGlobal from 'components/Globals/AppbarGlobal';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useNavigate: jest.fn(),
+}));
+
+describe('[APP BAR GLOBAL] - Testing Component', () => {
+	test('Should be have childs component!', async () => {
+		render(<AppbarGlobal />);
+
+		const LOGOTYPE = await screen.findByRole('img');
+		const CONNECT_WALLET_BUTTON = await screen.findByText(/Connect Wallet/i);
+		const TITLE = screen.getByText(/dApp - Superior Electoral Court/i);
+
+		expect(LOGOTYPE).toBeInTheDocument();
+		expect(CONNECT_WALLET_BUTTON).toBeInTheDocument();
+		expect(TITLE).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/components/Globals/AppbarGlobal/index.tsx b/frontend/src/components/Globals/AppbarGlobal/index.tsx
new file mode 100644
index 0000000..73512ae
--- /dev/null
+++ b/frontend/src/components/Globals/AppbarGlobal/index.tsx
@@ -0,0 +1,59 @@
+import { Suspense, useCallback, useMemo, useReducer } from 'react';
+import { Container, Navbar } from 'react-bootstrap';
+import LogotypeUtil from 'components/Utils/LogotypeUtil';
+import GenericSkeleton from 'components/Skeletons/GenericSkeleton';
+import { LazyConnectWalletButton, LazyConnectedWalletButton } from 'utils/LazyLoadingComponents';
+import { useStorageDBProviderHook } from 'providers/useStorageDBProvider';
+import { useSolidityContractProviderHook } from 'providers/useSolidityContractProvider';
+import useRouteNavigationHook from 'hooks/useRouteNavigationHook';
+
+/**
+ * @thiagosaud
+ * @description This component is exclusively for displaying navigation, actions regarding MetaMask wallet access control buttons!
+ */
+export default function AppbarGlobal() {
+	const useRouteNavigation = useRouteNavigationHook();
+	const useSolidityContractProvider = useSolidityContractProviderHook();
+	const useStorageDBProvider = useStorageDBProviderHook();
+	const [isConnectingWallet, updateIsConnectingWallet] = useReducer((state: boolean) => !state, false);
+	const [isDisconnectingWallet, updateIsDisconnectingWallet] = useReducer((state: boolean) => !state, false);
+
+	const walletConnected = useMemo(() => useStorageDBProvider.dataCached.metamask, [useStorageDBProvider]);
+
+	const handleOnConnectWallet = useCallback(() => {
+		updateIsConnectingWallet();
+
+		useSolidityContractProvider.actions.connect().finally(() => updateIsConnectingWallet());
+	}, [useSolidityContractProvider]);
+
+	const handleOnDisconnecWallet = useCallback(() => {
+		updateIsDisconnectingWallet();
+
+		useSolidityContractProvider.actions.logout().finally(() => updateIsDisconnectingWallet());
+	}, [useSolidityContractProvider]);
+
+	return (
+		<Navbar expand='lg' fixed='top' bg='light' variant='light' collapseOnSelect>
+			<Container>
+				<Navbar.Brand
+					style={{ cursor: 'pointer' }}
+					onClick={() => useRouteNavigation.goToHomePage()}
+					className='d-flex gap-2 align-items-center'
+				>
+					<LogotypeUtil size='xs' />
+					<Navbar.Collapse>dApp - Superior Electoral Court</Navbar.Collapse>
+				</Navbar.Brand>
+
+				<div className='justify-content-end'>
+					<Suspense fallback={<GenericSkeleton height='38px' width='136px' />}>
+						{!walletConnected ? (
+							<LazyConnectWalletButton onConnect={handleOnConnectWallet} isDisabled={isConnectingWallet} />
+						) : (
+							<LazyConnectedWalletButton onLogout={handleOnDisconnecWallet} wallet={walletConnected} isDisabled={isDisconnectingWallet} />
+						)}
+					</Suspense>
+				</div>
+			</Container>
+		</Navbar>
+	);
+}
diff --git a/frontend/src/components/Global/FooterbarGlobal/index.test.tsx b/frontend/src/components/Globals/FooterbarGlobal/index.test.tsx
similarity index 77%
rename from frontend/src/components/Global/FooterbarGlobal/index.test.tsx
rename to frontend/src/components/Globals/FooterbarGlobal/index.test.tsx
index 21b1e42..2ff47e0 100644
--- a/frontend/src/components/Global/FooterbarGlobal/index.test.tsx
+++ b/frontend/src/components/Globals/FooterbarGlobal/index.test.tsx
@@ -1,15 +1,15 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import FooterbarGlobal from '.';
+import FooterbarGlobal from 'components/Globals/FooterbarGlobal';
 
 describe('[FOOTER BAR GLOBAL] - Testing Component', () => {
 	test('Should be have childs component!', () => {
 		render(<FooterbarGlobal />);
 
-		const hyperlink = screen.getByText(/Thiago Saud/i);
-		const text = screen.getByText(/© All rights reserved by/i);
+		const HYPERLINK = screen.getByText(/Thiago Saud/i);
+		const TEXT = screen.getByText(/© All rights reserved by/i);
 
-		expect(hyperlink).toBeInTheDocument();
-		expect(text).toBeInTheDocument();
+		expect(HYPERLINK).toBeInTheDocument();
+		expect(TEXT).toBeInTheDocument();
 	});
 });
 
diff --git a/frontend/src/components/Global/FooterbarGlobal/index.tsx b/frontend/src/components/Globals/FooterbarGlobal/index.tsx
similarity index 79%
rename from frontend/src/components/Global/FooterbarGlobal/index.tsx
rename to frontend/src/components/Globals/FooterbarGlobal/index.tsx
index 581deaa..5f2ef65 100644
--- a/frontend/src/components/Global/FooterbarGlobal/index.tsx
+++ b/frontend/src/components/Globals/FooterbarGlobal/index.tsx
@@ -1,5 +1,9 @@
 import { Button, Container, Navbar } from 'react-bootstrap';
 
+/**
+ * @thiagosaud
+ * @description This component is unique for displaying copyright text in the page footer!
+ */
 export default function FooterbarGlobal() {
 	return (
 		<Container>
diff --git a/frontend/src/components/List/CandidateList/index.test.tsx b/frontend/src/components/List/CandidateList/index.test.tsx
deleted file mode 100644
index f205c1f..0000000
--- a/frontend/src/components/List/CandidateList/index.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import TestRenderer from 'react-test-renderer';
-import { fireEvent, render, screen } from '@testing-library/react';
-import MOCKED_DATA, { IData } from '__test__/mocks/CandidateListMock';
-import CandidateList from '.';
-
-describe('[CANDIDATE LIST] - Testing Component', () => {
-	test('Should be have data!', () => {
-		const { root } = TestRenderer.create(<CandidateList data={MOCKED_DATA} />);
-		expect(root.props.data.length).toBeGreaterThanOrEqual(1);
-	});
-
-	test('Should be have childs component!', () => {
-		render(<CandidateList data={MOCKED_DATA} />);
-
-		const listItem = screen.getAllByRole('listitem');
-		const avatar = screen.getAllByRole('img');
-		const titleNumber = screen.getAllByRole('heading');
-		const confirmVoteButton = screen.getAllByRole('button');
-		const titleVotes = screen.getAllByText('Votes:');
-		const badgeVoteValue = screen.getAllByTestId('badge-vote-value-component');
-
-		expect(listItem.length).toBeGreaterThanOrEqual(1);
-		expect(avatar.length).toBeGreaterThanOrEqual(1);
-		expect(titleNumber.length).toBeGreaterThanOrEqual(1);
-		expect(confirmVoteButton.length).toBeGreaterThanOrEqual(1);
-		expect(titleVotes.length).toBeGreaterThanOrEqual(1);
-		expect(badgeVoteValue.length).toBeGreaterThanOrEqual(1);
-	});
-});
-
-describe('[CANDIDATE LIST] - Testing Component Data', () => {
-	const { root } = TestRenderer.create(<CandidateList data={MOCKED_DATA} />);
-	const dataProps: IData[] = root.props.data;
-
-	test('Should be have this properties values!', () => {
-		MOCKED_DATA.forEach(({ avatar, number }, index) => {
-			expect(dataProps[index].avatar).toStrictEqual(avatar);
-			expect(dataProps[index].number).toStrictEqual(number);
-		});
-	});
-
-	test.each(dataProps)('Should be have properties correct types!', ({ onConfirmVote, number, avatar, hasVoted, votesConfirmed }: IData) => {
-		expect(typeof onConfirmVote).toStrictEqual('function');
-		expect(typeof number).toStrictEqual('number');
-		expect(typeof avatar).toStrictEqual('string');
-		expect(typeof hasVoted).toStrictEqual('boolean');
-		expect(typeof votesConfirmed).toStrictEqual('object');
-		expect(typeof votesConfirmed.total).toStrictEqual('number');
-		expect(typeof votesConfirmed.totalPercentage).toStrictEqual('number');
-	});
-
-	test.each(dataProps)(
-		'Should be percentage value greater than or equal 0 and less than or equal to 100%',
-		({ votesConfirmed }: Pick<IData, 'votesConfirmed'>) => {
-			expect(votesConfirmed.totalPercentage).toBeGreaterThanOrEqual(0);
-			expect(votesConfirmed.totalPercentage).toBeLessThanOrEqual(100);
-		}
-	);
-});
-
-describe('[CANDIDATE LIST] - Testing Component Confirm Vote Button', () => {
-	test('Should be work on click to Confirm Vote!', () => {
-		render(<CandidateList data={MOCKED_DATA} />);
-
-		screen.getAllByRole('button').forEach(button => {
-			expect(fireEvent.click(button)).toBe(true);
-		});
-	});
-});
diff --git a/frontend/src/components/List/VotingStatisticList/index.test.tsx b/frontend/src/components/List/VotingStatisticList/index.test.tsx
deleted file mode 100644
index f5d321d..0000000
--- a/frontend/src/components/List/VotingStatisticList/index.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import TestRenderer from 'react-test-renderer';
-import { render, screen } from '@testing-library/react';
-import MOCKED_DATA, { IData } from '__test__/mocks/VotingStatisticListMock';
-import VotingStatisticList from '.';
-
-describe('[VOTING STATISTIC LIST] - Testing Component', () => {
-	test('Should be have childs component!', () => {
-		render(<VotingStatisticList votes={MOCKED_DATA} />);
-
-		const listItem = screen.getAllByRole('listitem');
-		const progressBar = screen.getAllByRole('progressbar');
-		const accurateElectorateTitle = screen.getByText(/Accurate Electorate/i);
-		const confirmedTitle = screen.getByText(/Confirmed/i);
-		const abstentionTitle = screen.getByText(/Abstention/i);
-
-		expect(listItem.length).toBeGreaterThanOrEqual(1);
-		expect(progressBar.length).toBeGreaterThanOrEqual(1);
-		expect(accurateElectorateTitle).toBeInTheDocument();
-		expect(confirmedTitle).toBeInTheDocument();
-		expect(abstentionTitle).toBeInTheDocument();
-	});
-});
-
-describe('[VOTING STATISTIC LIST] - Testing Component Data', () => {
-	const { root } = TestRenderer.create(<VotingStatisticList votes={MOCKED_DATA} />);
-	const dataProps: IData = root.props.votes;
-
-	test('Should be have this properties values!', () => {
-		expect(dataProps.confirmed.total).toStrictEqual(MOCKED_DATA.confirmed.total);
-		expect(dataProps.confirmed.totalPercentage).toStrictEqual(MOCKED_DATA.confirmed.totalPercentage);
-		expect(dataProps.abstention.total).toStrictEqual(MOCKED_DATA.abstention.total);
-		expect(dataProps.abstention.totalPercentage).toStrictEqual(MOCKED_DATA.abstention.totalPercentage);
-	});
-
-	test('Should be have properties correct types!', () => {
-		expect(typeof dataProps.confirmed.total).toStrictEqual('number');
-		expect(typeof dataProps.confirmed.totalPercentage).toStrictEqual('number');
-		expect(typeof dataProps.abstention.total).toStrictEqual('number');
-		expect(typeof dataProps.abstention.totalPercentage).toStrictEqual('number');
-	});
-
-	test('Should be percentage value greater than or equal 0 and less than or equal to 100%', () => {
-		expect(dataProps.confirmed.totalPercentage).toBeGreaterThanOrEqual(0);
-		expect(dataProps.confirmed.totalPercentage).toBeLessThanOrEqual(100);
-		expect(dataProps.abstention.totalPercentage).toBeGreaterThanOrEqual(0);
-		expect(dataProps.abstention.totalPercentage).toBeLessThanOrEqual(100);
-	});
-});
-
-describe('[VOTING STATISTIC LIST] - Testing Component Progressbar', () => {
-	test('Should be have aria-valuemin attribute equal 0% and aria-valuemax equal 100%!', () => {
-		render(<VotingStatisticList votes={MOCKED_DATA} />);
-
-		screen.getAllByRole('progressbar').forEach(bar => {
-			expect(bar).toHaveAttribute('aria-valuemin', '0');
-			expect(bar).toHaveAttribute('aria-valuemax', '100');
-		});
-	});
-
-	test('Should be have aria-valuenow attribute greater than or equal 0% and less then or equal 100%!', () => {
-		render(<VotingStatisticList votes={MOCKED_DATA} />);
-
-		screen.getAllByRole('progressbar').forEach(bar => {
-			const ariaValueNow = bar.getAttribute('aria-valuenow');
-			const convertedAriaValueNow = parseFloat(ariaValueNow || '-1');
-
-			expect(ariaValueNow).toBeTruthy();
-			expect(convertedAriaValueNow).toBeGreaterThanOrEqual(0);
-			expect(convertedAriaValueNow).toBeLessThan(100);
-		});
-	});
-});
diff --git a/frontend/src/components/List/VotingStatisticList/index.tsx b/frontend/src/components/List/VotingStatisticList/index.tsx
deleted file mode 100644
index 302a4f8..0000000
--- a/frontend/src/components/List/VotingStatisticList/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import { Badge, ListGroup, ProgressBar } from 'react-bootstrap';
-import useNumberConversion from 'hooks/useNumberConversion';
-
-interface IProps {
-	votes: {
-		confirmed: {
-			total: number;
-			totalPercentage: number;
-		};
-		abstention: {
-			total: number;
-			totalPercentage: number;
-		};
-	};
-}
-
-function VotingStatisticList({ votes: { confirmed, abstention } }: IProps) {
-	const { convertToCurrency, convertToPercentage } = useNumberConversion();
-
-	const totalPercentageVotesConfirmed = useMemo(() => convertToPercentage(confirmed.totalPercentage), [confirmed, convertToPercentage]);
-	const totalPercentageVotesAbstention = useMemo(() => convertToPercentage(abstention.totalPercentage), [abstention, convertToPercentage]);
-
-	const getVoteText = useCallback(
-		(total: number, percentage: number) => `${convertToCurrency(total)} (${convertToPercentage(percentage)})`,
-		[convertToCurrency, convertToPercentage]
-	);
-
-	return (
-		<ListGroup data-testid='voting-static-list-component'>
-			<ListGroup.Item as='li' className='d-flex flex-column gap-2'>
-				<h5 className='fw-bold mb-0'>Accurate Electorate</h5>
-
-				<div className='d-flex flex-wrap gap-2 justify-content-between'>
-					<div className='d-flex  gap-2'>
-						<Badge bg='success'>Confirmed</Badge>
-						<h6 className='fw-bold mb-0'>{getVoteText(confirmed.total, confirmed.totalPercentage)}</h6>
-					</div>
-
-					<div className='d-flex gap-2'>
-						<Badge bg='secondary'>Abstention</Badge>
-						<h6 className='fw-bold mb-0'>{getVoteText(abstention.total, abstention.totalPercentage)}</h6>
-					</div>
-				</div>
-
-				<ProgressBar className='w-100' min={0} max={100}>
-					<ProgressBar variant='success' key={1} now={confirmed.totalPercentage} label={totalPercentageVotesConfirmed} />
-					<ProgressBar variant='secondary' key={2} now={abstention.totalPercentage} label={totalPercentageVotesAbstention} />
-				</ProgressBar>
-			</ListGroup.Item>
-		</ListGroup>
-	);
-}
-
-export default memo(VotingStatisticList);
diff --git a/frontend/src/components/Lists/CandidateList/index.test.tsx b/frontend/src/components/Lists/CandidateList/index.test.tsx
new file mode 100644
index 0000000..d6f0b21
--- /dev/null
+++ b/frontend/src/components/Lists/CandidateList/index.test.tsx
@@ -0,0 +1,71 @@
+import TestRenderer from 'react-test-renderer';
+import { fireEvent, render, screen } from '@testing-library/react';
+import MOCKED_DATA, { IData, IProps } from '__test__/mocks/CandidateListMock';
+import CandidateList from 'components/Lists/CandidateList';
+
+const handleOnClick = jest.fn();
+
+describe('[CANDIDATE LIST] - Testing Component', () => {
+	test('Should be have data!', () => {
+		const { root } = TestRenderer.create(<CandidateList onConfirmVote={handleOnClick} data={MOCKED_DATA} hasVoted />);
+		expect(root.props.data.length).toBeGreaterThanOrEqual(1);
+	});
+
+	test('Should be have childs component!', () => {
+		render(<CandidateList onConfirmVote={handleOnClick} data={MOCKED_DATA} hasVoted />);
+
+		const AVATAR = screen.getAllByRole('img');
+		const CONFIRM_VOTE_BUTTON = screen.getAllByRole('button');
+		const LIST_ITEM = screen.getAllByRole('listitem');
+		const TITLE_NUMBER = screen.getAllByRole('heading');
+		const TITLE_VOTES = screen.getAllByText('Votes:');
+		const BADGE_VOTE_VALUE = screen.getAllByTestId('badge-vote-value-component');
+
+		expect(AVATAR.length).toBeGreaterThanOrEqual(1);
+		expect(CONFIRM_VOTE_BUTTON.length).toBeGreaterThanOrEqual(1);
+		expect(LIST_ITEM.length).toBeGreaterThanOrEqual(1);
+		expect(TITLE_NUMBER.length).toBeGreaterThanOrEqual(1);
+		expect(TITLE_VOTES.length).toBeGreaterThanOrEqual(1);
+		expect(BADGE_VOTE_VALUE.length).toBeGreaterThanOrEqual(1);
+	});
+});
+
+describe('[CANDIDATE LIST] - Testing Component Data', () => {
+	const { root } = TestRenderer.create(<CandidateList onConfirmVote={handleOnClick} data={MOCKED_DATA} hasVoted />);
+	const PROPS = root.props as IProps;
+
+	test('Should be have this properties values!', () => {
+		MOCKED_DATA.forEach(({ votesConfirmed, number }, index) => {
+			expect(PROPS.data[index].number).toStrictEqual(number);
+			expect(PROPS.data[index].votesConfirmed).toStrictEqual(votesConfirmed);
+		});
+	});
+
+	test.each(PROPS.data)('Should be have properties correct types!', ({ votesConfirmed, number }: IData) => {
+		expect(typeof PROPS.hasVoted).toStrictEqual('boolean');
+		expect(typeof PROPS.onConfirmVote).toStrictEqual('function');
+		expect(typeof number).toStrictEqual('number');
+		expect(typeof votesConfirmed).toStrictEqual('object');
+		expect(typeof votesConfirmed.total).toStrictEqual('number');
+		expect(typeof votesConfirmed.totalPercentage).toStrictEqual('number');
+	});
+
+	test.each(PROPS.data)(
+		'Should be percentage value greater than or equal 0 and less than or equal to 100%',
+		({ votesConfirmed }: Pick<IData, 'votesConfirmed'>) => {
+			expect(votesConfirmed.totalPercentage).toBeGreaterThanOrEqual(0);
+			expect(votesConfirmed.totalPercentage).toBeLessThanOrEqual(100);
+		}
+	);
+});
+
+describe('[CANDIDATE LIST] - Testing Component Confirm Vote Button', () => {
+	test('Should be work on click to Confirm Vote!', () => {
+		render(<CandidateList onConfirmVote={handleOnClick} data={MOCKED_DATA} hasVoted />);
+		const BUTTON = screen.getAllByRole('button');
+
+		BUTTON.forEach(button => {
+			expect(fireEvent.click(button)).toBe(true);
+		});
+	});
+});
diff --git a/frontend/src/components/List/CandidateList/index.tsx b/frontend/src/components/Lists/CandidateList/index.tsx
similarity index 50%
rename from frontend/src/components/List/CandidateList/index.tsx
rename to frontend/src/components/Lists/CandidateList/index.tsx
index 0fc0257..86e1126 100644
--- a/frontend/src/components/List/CandidateList/index.tsx
+++ b/frontend/src/components/Lists/CandidateList/index.tsx
@@ -1,14 +1,13 @@
 import { memo, useCallback } from 'react';
 import { Badge, Button, ListGroup } from 'react-bootstrap';
-import Avatar from 'components/Util/Avatar';
-import useNumberConversion from 'hooks/useNumberConversion';
+import AvatarUtil from 'components/Utils/AvatarUtil';
+import VoteProgressTitleUtil from 'components/Utils/VoteProgressTitleUtil';
 
 interface IProps {
+	onConfirmVote: (number: number) => void;
+	hasVoted: boolean;
 	data: {
-		onConfirmVote: (number: number) => void;
 		number: number;
-		avatar: string;
-		hasVoted: boolean;
 		votesConfirmed: {
 			total: number;
 			totalPercentage: number;
@@ -16,29 +15,35 @@ interface IProps {
 	}[];
 }
 
-function CandidateList({ data }: IProps) {
-	const { convertToCurrency, convertToPercentage } = useNumberConversion();
-
-	const getVoteText = useCallback(
-		(total: number, percentage: number) => `${convertToCurrency(total)} (${convertToPercentage(percentage)})`,
-		[convertToCurrency, convertToPercentage]
+/**
+ * @thiagosaud
+ * @description This component is exclusive to control the list of candidates and voting actions and count views of the same!
+ * @interface IProps
+ */
+function CandidateList({ onConfirmVote, hasVoted, data }: IProps) {
+	const getCandidateID = useCallback((id: number) => id + 1, []);
+
+	const getAvatarSRC = useCallback(
+		(number: number) =>
+			`https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-${getCandidateID(number)}.png`,
+		[getCandidateID]
 	);
 
 	return (
 		<ListGroup data-testid='candidate-list-component'>
-			{data.map(({ onConfirmVote, avatar, number, votesConfirmed, hasVoted }) => (
+			{data.map(({ number, votesConfirmed }) => (
 				<ListGroup.Item key={`${number}`} as='li' className='d-flex flex-wrap gap-2 align-items-center'>
 					<div className='d-flex justify-content-between align-items-center w-100'>
 						<div className='d-flex flex-wrap align-items-center gap-2'>
-							<Avatar alt={`Candidate #${number}`} src={avatar} />
-							<h5 className='fw-bold mb-0'>#{number}</h5>
+							<AvatarUtil alt={`Candidate #${getCandidateID(number)}`} src={getAvatarSRC(number)} />
+							<h5 className='fw-bold mb-0'>#{getCandidateID(number)}</h5>
 						</div>
 
 						<div className='mt-1 d-flex flex-wrap align-items-center gap-2'>
 							<span className='mb-1'>Votes:</span>
 
 							<Badge bg='primary' pill style={{ width: '155px' }} data-testid='badge-vote-value-component'>
-								{getVoteText(votesConfirmed.total, votesConfirmed.totalPercentage)}
+								<VoteProgressTitleUtil total={votesConfirmed.total} percentage={votesConfirmed.totalPercentage} />
 							</Badge>
 						</div>
 					</div>
diff --git a/frontend/src/components/Lists/VotingStatisticList/index.test.tsx b/frontend/src/components/Lists/VotingStatisticList/index.test.tsx
new file mode 100644
index 0000000..99f3976
--- /dev/null
+++ b/frontend/src/components/Lists/VotingStatisticList/index.test.tsx
@@ -0,0 +1,46 @@
+import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import MOCKED_DATA, { IData } from '__test__/mocks/VotingStatisticListMock';
+import VotingStatisticList from 'components/Lists/VotingStatisticList';
+
+describe('[VOTING STATISTIC LIST] - Testing Component', () => {
+	test('Should be have childs component!', () => {
+		render(<VotingStatisticList isLoading votes={MOCKED_DATA} />);
+
+		const LIST_ITEM = screen.getAllByRole('listitem');
+		const ACCURATE_ELECTORATE_TITLE = screen.getByText(/Accurate Electorate/i);
+		const CONFIRMED_TITLE = screen.getByText(/Confirmed/i);
+		const ABSTENTION_TITLE = screen.getByText(/Abstention/i);
+
+		expect(LIST_ITEM.length).toBeGreaterThanOrEqual(1);
+		expect(ACCURATE_ELECTORATE_TITLE).toBeInTheDocument();
+		expect(CONFIRMED_TITLE).toBeInTheDocument();
+		expect(ABSTENTION_TITLE).toBeInTheDocument();
+	});
+});
+
+describe('[VOTING STATISTIC LIST] - Testing Component Data', () => {
+	const { root } = TestRenderer.create(<VotingStatisticList isLoading votes={MOCKED_DATA} />);
+	const dataProps: IData = root.props.votes;
+
+	test('Should be have this properties values!', () => {
+		expect(dataProps.confirmed.total).toStrictEqual(MOCKED_DATA.confirmed.total);
+		expect(dataProps.confirmed.totalPercentage).toStrictEqual(MOCKED_DATA.confirmed.totalPercentage);
+		expect(dataProps.abstention.total).toStrictEqual(MOCKED_DATA.abstention.total);
+		expect(dataProps.abstention.totalPercentage).toStrictEqual(MOCKED_DATA.abstention.totalPercentage);
+	});
+
+	test('Should be have properties correct types!', () => {
+		expect(typeof dataProps.confirmed.total).toStrictEqual('number');
+		expect(typeof dataProps.confirmed.totalPercentage).toStrictEqual('number');
+		expect(typeof dataProps.abstention.total).toStrictEqual('number');
+		expect(typeof dataProps.abstention.totalPercentage).toStrictEqual('number');
+	});
+
+	test('Should be percentage value greater than or equal 0 and less than or equal to 100%', () => {
+		expect(dataProps.confirmed.totalPercentage).toBeGreaterThanOrEqual(0);
+		expect(dataProps.confirmed.totalPercentage).toBeLessThanOrEqual(100);
+		expect(dataProps.abstention.totalPercentage).toBeGreaterThanOrEqual(0);
+		expect(dataProps.abstention.totalPercentage).toBeLessThanOrEqual(100);
+	});
+});
diff --git a/frontend/src/components/Lists/VotingStatisticList/index.tsx b/frontend/src/components/Lists/VotingStatisticList/index.tsx
new file mode 100644
index 0000000..f24520a
--- /dev/null
+++ b/frontend/src/components/Lists/VotingStatisticList/index.tsx
@@ -0,0 +1,64 @@
+import { Suspense, memo, useCallback } from 'react';
+import { Badge, ListGroup } from 'react-bootstrap';
+import GenericSkeleton from 'components/Skeletons/GenericSkeleton';
+import { LazyVoteProgressTitleUtil, LazyVoteProgressBarUtil } from 'utils/LazyLoadingComponents';
+
+interface IProps {
+	isLoading: boolean;
+	votes: {
+		confirmed: {
+			total: number;
+			totalPercentage: number;
+		};
+		abstention: {
+			total: number;
+			totalPercentage: number;
+		};
+	};
+}
+
+/**
+ * @thiagosaud
+ * @description This component is unique to keep track of all votes obtained, confirmed and count views of the same!
+ * @interface IProps
+ */
+function VotingStatisticList({ isLoading, votes: { confirmed, abstention } }: IProps) {
+	const VoteCount = useCallback(
+		({ title, total, percentage }: { title: 'Confirmed' | 'Abstention'; total: number; percentage: number }) => (
+			<div className='d-flex  gap-2'>
+				<Badge bg={title === 'Confirmed' ? 'success' : 'secondary'}>{title}</Badge>
+
+				{!isLoading && (
+					<Suspense fallback={<GenericSkeleton height='20px' width={title === 'Confirmed' ? '66px' : '48px'} />}>
+						<LazyVoteProgressTitleUtil total={total} percentage={percentage} />
+					</Suspense>
+				)}
+			</div>
+		),
+		[isLoading]
+	);
+
+	return (
+		<ListGroup data-testid='voting-static-list-component'>
+			<ListGroup.Item as='li' className='d-flex flex-column gap-2'>
+				<h5 className='fw-bold mb-0'>Accurate Electorate</h5>
+
+				<div className='d-flex flex-wrap gap-2 justify-content-between'>
+					<VoteCount title='Confirmed' total={confirmed.total} percentage={confirmed.totalPercentage} />
+					<VoteCount title='Abstention' total={abstention.total} percentage={abstention.totalPercentage} />
+				</div>
+
+				<Suspense fallback={<GenericSkeleton height='16px' width='100%' />}>
+					<LazyVoteProgressBarUtil
+						votes={{
+							confirmed: confirmed.totalPercentage,
+							abstention: abstention.totalPercentage,
+						}}
+					/>
+				</Suspense>
+			</ListGroup.Item>
+		</ListGroup>
+	);
+}
+
+export default memo(VotingStatisticList);
diff --git a/frontend/src/components/Skeletons/CandidateListSkeleton/index.test.tsx b/frontend/src/components/Skeletons/CandidateListSkeleton/index.test.tsx
new file mode 100644
index 0000000..c21820a
--- /dev/null
+++ b/frontend/src/components/Skeletons/CandidateListSkeleton/index.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import CandidateListSkeleton from 'components/Skeletons/CandidateListSkeleton';
+
+describe('[CANDIDATE LIST SKELETON] - Testing Component', () => {
+	test('Should be have childs component!', () => {
+		render(<CandidateListSkeleton />);
+		expect(screen.getAllByTestId(/list-item/i).length).toEqual(6);
+	});
+});
diff --git a/frontend/src/components/Skeletons/CandidateListSkeleton/index.tsx b/frontend/src/components/Skeletons/CandidateListSkeleton/index.tsx
new file mode 100644
index 0000000..99247b4
--- /dev/null
+++ b/frontend/src/components/Skeletons/CandidateListSkeleton/index.tsx
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import { ListGroup } from 'react-bootstrap';
+import GenericSkeleton from 'components/Skeletons/GenericSkeleton';
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to control the loading animation of the {CandidateList} component!
+ */
+function CandidateListSkeleton() {
+	return (
+		<ListGroup data-testid='candidate-list-component'>
+			{['1', '2', '3', '4', '5', '6'].map(randomNumber => (
+				<ListGroup.Item key={`${randomNumber}`} as='li' className='d-flex flex-wrap gap-2 align-items-center' data-testid='list-item'>
+					<div className='d-flex justify-content-between align-items-center w-100'>
+						<div className='d-flex flex-wrap align-items-center gap-2'>
+							<GenericSkeleton height='60px' width='60px' isRounded />
+							<GenericSkeleton height='24px' width='25px' />
+						</div>
+
+						<div className='mt-1 d-flex flex-wrap align-items-center gap-2'>
+							<span className='mb-1'>Votes:</span>
+							<GenericSkeleton height='20px' width='155px' />
+						</div>
+					</div>
+
+					<GenericSkeleton height='38px' width='100%' />
+				</ListGroup.Item>
+			))}
+		</ListGroup>
+	);
+}
+
+export default memo(CandidateListSkeleton);
diff --git a/frontend/src/components/Skeletons/GenericSkeleton/index.test.tsx b/frontend/src/components/Skeletons/GenericSkeleton/index.test.tsx
new file mode 100644
index 0000000..ff3b480
--- /dev/null
+++ b/frontend/src/components/Skeletons/GenericSkeleton/index.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import GenericSkeleton from 'components/Skeletons/GenericSkeleton';
+
+describe('[GENERIC SKELETON] - Testing Component', () => {
+	test('Should be have childs component!', () => {
+		render(<GenericSkeleton height='100px' width='100px' isRounded />);
+		expect(screen.getByRole('button')).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/components/Skeletons/GenericSkeleton/index.tsx b/frontend/src/components/Skeletons/GenericSkeleton/index.tsx
new file mode 100644
index 0000000..f7fdcd4
--- /dev/null
+++ b/frontend/src/components/Skeletons/GenericSkeleton/index.tsx
@@ -0,0 +1,22 @@
+import { Button } from 'react-bootstrap';
+
+interface IProps {
+	height: string;
+	width: string;
+	isRounded?: boolean;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to control the generic animation of any component!
+ * @interface IProps
+ */
+function GenericSkeleton({ height, width, isRounded }: IProps) {
+	return <Button variant='warning' style={{ height, width, borderRadius: isRounded ? '100%' : 'auto' }} disabled />;
+}
+
+GenericSkeleton.defaultProps = {
+	isRounded: false,
+};
+
+export default GenericSkeleton;
diff --git a/frontend/src/components/Util/Avatar/index.tsx b/frontend/src/components/Util/Avatar/index.tsx
deleted file mode 100644
index e1cdab2..0000000
--- a/frontend/src/components/Util/Avatar/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-
-const Image = styled.img.attrs({
-	loading: 'lazy',
-	className: 'd-inline-block align-top',
-})`
-	width: 60px;
-	height: 60px;
-	object-fit: cover;
-	border: 3px #fcc200 solid;
-	border-radius: 100%;
-`;
-
-interface IProps {
-	src: string;
-	alt: string;
-}
-
-function Avatar({ src, alt }: IProps) {
-	return <Image src={src} alt={alt} />;
-}
-
-export default Avatar;
diff --git a/frontend/src/components/Util/Logotype/index.test.tsx b/frontend/src/components/Util/Logotype/index.test.tsx
deleted file mode 100644
index 9dd85d2..0000000
--- a/frontend/src/components/Util/Logotype/index.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import TestRenderer from 'react-test-renderer';
-import { render, screen } from '@testing-library/react';
-import Logotype from '.';
-
-describe('[LOGOTYPE UTIL] - Testing Component', () => {
-	test('Should be have Size Property!', () => {
-		const { root } = TestRenderer.create(<Logotype size='xs' />);
-		const sizeProperty = root.props.size;
-
-		expect(typeof sizeProperty).toBe('string');
-		expect(sizeProperty).toStrictEqual('xs');
-	});
-
-	test('Should be have img child component!', () => {
-		render(<Logotype size='xs' />);
-		expect(screen.getByRole('img')).toBeInTheDocument();
-	});
-});
-
-describe('[LOGOTYPE UTIL] - Testing Img Child Component', () => {
-	test('Should be have styles properties!', () => {
-		render(<Logotype size='xs' />);
-		expect(screen.getByRole('img')).toHaveStyle({
-			width: '35px',
-			height: '35px',
-		});
-	});
-});
diff --git a/frontend/src/components/Util/Avatar/index.test.tsx b/frontend/src/components/Utils/AvatarUtil/index.test.tsx
similarity index 94%
rename from frontend/src/components/Util/Avatar/index.test.tsx
rename to frontend/src/components/Utils/AvatarUtil/index.test.tsx
index 065788f..22f9962 100644
--- a/frontend/src/components/Util/Avatar/index.test.tsx
+++ b/frontend/src/components/Utils/AvatarUtil/index.test.tsx
@@ -1,11 +1,10 @@
 import TestRenderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
-import Avatar from '.';
+import Avatar from 'components/Utils/AvatarUtil';
 
 describe('[AVATAR UTIL] - Testing Component', () => {
 	test('Should be have properties!', () => {
 		const { root } = TestRenderer.create(<Avatar src='Testing...' alt='Testing...' />);
-
 		expect(typeof root.props.src).toBe('string');
 		expect(typeof root.props.alt).toBe('string');
 	});
diff --git a/frontend/src/components/Utils/AvatarUtil/index.tsx b/frontend/src/components/Utils/AvatarUtil/index.tsx
new file mode 100644
index 0000000..67d0947
--- /dev/null
+++ b/frontend/src/components/Utils/AvatarUtil/index.tsx
@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import SkeletonSRC from 'assets/images/skeleton.png';
+
+const Image = styled.img.attrs({
+	loading: 'lazy',
+	className: 'd-inline-block align-top',
+})`
+	width: 60px;
+	height: 60px;
+	object-fit: cover;
+	border: 3px #fcc200 solid;
+	border-radius: 100%;
+`;
+
+interface IProps {
+	src: string;
+	alt: string;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusively for displaying the Candidates Avatar!
+ * @interface IProps
+ */
+function AvatarUtil({ src, alt }: IProps) {
+	return <Image src={src || SkeletonSRC} alt={alt} />;
+}
+
+export default AvatarUtil;
diff --git a/frontend/src/components/Utils/LoadingUtil/index.test.tsx b/frontend/src/components/Utils/LoadingUtil/index.test.tsx
new file mode 100644
index 0000000..1a6789f
--- /dev/null
+++ b/frontend/src/components/Utils/LoadingUtil/index.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import LoadingUtil from 'components/Utils/LoadingUtil';
+
+describe('[LOADING UTIL] - Testing Component', () => {
+	test('Should be have childs component!', () => {
+		render(<LoadingUtil />);
+		expect(screen.getByTestId(/wrapper/i)).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/components/Utils/LoadingUtil/index.tsx b/frontend/src/components/Utils/LoadingUtil/index.tsx
new file mode 100644
index 0000000..3921eb6
--- /dev/null
+++ b/frontend/src/components/Utils/LoadingUtil/index.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import ProgressAnimation from 'animations/ProgressAnimation';
+
+const Wrapper = styled.div`
+	position: relative;
+	width: 130px;
+	height: 2px;
+	margin-top: 22px;
+	overflow: hidden;
+	background: var(--bs-gray-500);
+
+	::before {
+		${ProgressAnimation}
+		position: absolute;
+		left: -34px;
+		width: 68px;
+		height: 2px;
+		content: '';
+		background: var(--bs-warning);
+	}
+`;
+
+/**
+ * @thiagosaud
+ * @description This component is unique to display the loading animation with {ProgressAnimation}!
+ */
+function LoadingUtil() {
+	return <Wrapper data-testid='wrapper' />;
+}
+
+export default LoadingUtil;
diff --git a/frontend/src/components/Utils/LogotypeUtil/index.test.tsx b/frontend/src/components/Utils/LogotypeUtil/index.test.tsx
new file mode 100644
index 0000000..59894b7
--- /dev/null
+++ b/frontend/src/components/Utils/LogotypeUtil/index.test.tsx
@@ -0,0 +1,48 @@
+import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import Logotype from 'components/Utils/LogotypeUtil';
+
+describe('[LOGOTYPE UTIL] - Testing Component', () => {
+	describe('[LOGOTYPE UTIL] - Testing Size Property Component', () => {
+		test('Should be have XS Size Property!', () => {
+			const { root } = TestRenderer.create(<Logotype size='xs' />);
+			const sizeProperty = root.props.size;
+
+			expect(typeof sizeProperty).toBe('string');
+			expect(sizeProperty).toStrictEqual('xs');
+		});
+
+		test('Should be have MD Size Property!', () => {
+			const { root } = TestRenderer.create(<Logotype size='md' />);
+			const sizeProperty = root.props.size;
+
+			expect(typeof sizeProperty).toBe('string');
+			expect(sizeProperty).toStrictEqual('md');
+		});
+	});
+
+	test('Should be have img child component!', () => {
+		render(<Logotype size='xs' />);
+		expect(screen.getByRole('img')).toBeInTheDocument();
+	});
+});
+
+describe('[LOGOTYPE UTIL] - Testing Img Child Component', () => {
+	describe('[LOGOTYPE UTIL] - Testing Sizes Style Properties Component', () => {
+		test('Should be have XS styles properties!', () => {
+			render(<Logotype size='xs' />);
+			expect(screen.getByRole('img')).toHaveStyle({
+				width: '35px',
+				height: '35px',
+			});
+		});
+
+		test('Should be have MD styles properties!', () => {
+			render(<Logotype size='md' />);
+			expect(screen.getByRole('img')).toHaveStyle({
+				width: '85px',
+				height: '85px',
+			});
+		});
+	});
+});
diff --git a/frontend/src/components/Util/Logotype/index.tsx b/frontend/src/components/Utils/LogotypeUtil/index.tsx
similarity index 53%
rename from frontend/src/components/Util/Logotype/index.tsx
rename to frontend/src/components/Utils/LogotypeUtil/index.tsx
index ccdb7ac..baec800 100644
--- a/frontend/src/components/Util/Logotype/index.tsx
+++ b/frontend/src/components/Utils/LogotypeUtil/index.tsx
@@ -2,17 +2,23 @@ import ImageSRC from 'assets/images/tse-logotype.png';
 import styled from 'styled-components';
 
 interface IProps {
-	size: 'xs';
+	size: 'xs' | 'md';
 }
 
 const Image = styled.img.attrs({
 	src: ImageSRC,
 	alt: 'Superior Electoral Court',
-	loading: 'lazy',
+	loading: 'eager',
 })<IProps>`
 	${({ size }) => size === 'xs' && { width: '35px', height: '35px' }}
+	${({ size }) => size === 'md' && { width: '85px', height: '85px' }}
 `;
 
-export default function Logotype({ size }: IProps) {
+/**
+ * @thiagosaud
+ * @description This component is exclusive to display the TSE Logo!
+ * @interface IProps
+ */
+export default function LogotypeUtil({ size }: IProps) {
 	return <Image size={size} />;
 }
diff --git a/frontend/src/components/Utils/VoteProgressBarUtil/index.test.tsx b/frontend/src/components/Utils/VoteProgressBarUtil/index.test.tsx
new file mode 100644
index 0000000..78a1ca9
--- /dev/null
+++ b/frontend/src/components/Utils/VoteProgressBarUtil/index.test.tsx
@@ -0,0 +1,60 @@
+import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import MOCKED_DATA, { IProps } from '__test__/mocks/VoteProgressBarUtilMock';
+import VoteProgressBarUtil from 'components/Utils/VoteProgressBarUtil';
+
+describe('[VOTE PROGRESS BAR UTIL] - Testing Component', () => {
+	test('Should be have childs component!', () => {
+		render(<VoteProgressBarUtil votes={MOCKED_DATA.votes} />);
+		const CONFIRMED_VOTES = screen.getByText(/99.99%/i);
+		const ABSTAINED_VOTES = screen.getByText(/89.85%/i);
+
+		expect(CONFIRMED_VOTES).toBeInTheDocument();
+		expect(ABSTAINED_VOTES).toBeInTheDocument();
+	});
+});
+
+describe('[VOTE PROGRESS BAR UTIL] - Testing Component Data', () => {
+	const { root } = TestRenderer.create(<VoteProgressBarUtil votes={MOCKED_DATA.votes} />);
+	const PROPS = root.props as IProps;
+
+	test('Should be have this properties values!', () => {
+		expect(PROPS.votes.abstention).toStrictEqual(MOCKED_DATA.votes.abstention);
+		expect(PROPS.votes.confirmed).toStrictEqual(MOCKED_DATA.votes.confirmed);
+	});
+
+	test('Should be have properties correct types!', () => {
+		expect(typeof PROPS.votes).toStrictEqual('object');
+		expect(typeof PROPS.votes.abstention).toStrictEqual('number');
+		expect(typeof PROPS.votes.confirmed).toStrictEqual('number');
+	});
+
+	test('Should be percentage value greater equal 99.99% and 89.85%!', () => {
+		expect(PROPS.votes.confirmed).toBeLessThanOrEqual(99.99);
+		expect(PROPS.votes.abstention).toBeGreaterThanOrEqual(89.85);
+	});
+});
+
+describe('[VOTE PROGRESS BAR UTIL] - Testing Component Progressbar', () => {
+	test('Should be have aria-valuemin attribute equal 0% and aria-valuemax equal 100%!', () => {
+		render(<VoteProgressBarUtil votes={MOCKED_DATA.votes} />);
+
+		screen.getAllByRole('progressbar').forEach(bar => {
+			expect(bar).toHaveAttribute('aria-valuemin', '0');
+			expect(bar).toHaveAttribute('aria-valuemax', '100');
+		});
+	});
+
+	test('Should be have aria-valuenow attribute greater than or equal 0% and less then or equal 100%!', () => {
+		render(<VoteProgressBarUtil votes={MOCKED_DATA.votes} />);
+
+		screen.getAllByRole('progressbar').forEach(bar => {
+			const ariaValueNow = bar.getAttribute('aria-valuenow');
+			const convertedAriaValueNow = parseFloat(ariaValueNow || '-1');
+
+			expect(ariaValueNow).toBeTruthy();
+			expect(convertedAriaValueNow).toBeGreaterThanOrEqual(0);
+			expect(convertedAriaValueNow).toBeLessThan(100);
+		});
+	});
+});
diff --git a/frontend/src/components/Utils/VoteProgressBarUtil/index.tsx b/frontend/src/components/Utils/VoteProgressBarUtil/index.tsx
new file mode 100644
index 0000000..603c552
--- /dev/null
+++ b/frontend/src/components/Utils/VoteProgressBarUtil/index.tsx
@@ -0,0 +1,27 @@
+import { memo, useCallback } from 'react';
+import { ProgressBar } from 'react-bootstrap';
+
+interface IProps {
+	votes: {
+		confirmed: number;
+		abstention: number;
+	};
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to control the counted votes in progress bar!
+ * @interface IProps
+ */
+function VoteProgressBarUtil({ votes: { confirmed, abstention } }: IProps) {
+	const getLabel = useCallback((value: number) => `${value}%`, []);
+
+	return (
+		<ProgressBar className='w-100' min={0} max={100}>
+			<ProgressBar variant='success' key={1} label={getLabel(confirmed)} now={confirmed} />
+			<ProgressBar variant='secondary' key={2} label={getLabel(abstention)} now={abstention} />
+		</ProgressBar>
+	);
+}
+
+export default memo(VoteProgressBarUtil);
diff --git a/frontend/src/components/Utils/VoteProgressTitleUtil/index.test.tsx b/frontend/src/components/Utils/VoteProgressTitleUtil/index.test.tsx
new file mode 100644
index 0000000..52d97a8
--- /dev/null
+++ b/frontend/src/components/Utils/VoteProgressTitleUtil/index.test.tsx
@@ -0,0 +1,23 @@
+import TestRenderer from 'react-test-renderer';
+import MOCKED_DATA, { IProps } from '__test__/mocks/VoteProgressTitleUtilMock';
+import VoteProgressTitleUtil from 'components/Utils/VoteProgressTitleUtil';
+
+describe('[VOTE PROGRESS TITLE UTIL] - Testing Component Data', () => {
+	const { root } = TestRenderer.create(<VoteProgressTitleUtil {...MOCKED_DATA} />);
+	const PROPS = root.props as IProps;
+
+	test('Should be have this properties values!', () => {
+		expect(PROPS.percentage).toStrictEqual(MOCKED_DATA.percentage);
+		expect(PROPS.total).toStrictEqual(MOCKED_DATA.total);
+	});
+
+	test('Should be have properties correct types!', () => {
+		expect(typeof PROPS.percentage).toStrictEqual('number');
+		expect(typeof PROPS.total).toStrictEqual('number');
+	});
+
+	test('Should be percentage value greater equal 99.99% and 89.85%!', () => {
+		expect(PROPS.total).toBeLessThanOrEqual(5);
+		expect(PROPS.percentage).toBeGreaterThanOrEqual(89.85);
+	});
+});
diff --git a/frontend/src/components/Utils/VoteProgressTitleUtil/index.tsx b/frontend/src/components/Utils/VoteProgressTitleUtil/index.tsx
new file mode 100644
index 0000000..665a114
--- /dev/null
+++ b/frontend/src/components/Utils/VoteProgressTitleUtil/index.tsx
@@ -0,0 +1,17 @@
+import { memo } from 'react';
+
+interface IProps {
+	total: number | string;
+	percentage: number | string;
+}
+
+/**
+ * @thiagosaud
+ * @description This component is exclusive to control the votes counted in text form!
+ * @interface IProps
+ */
+function VoteProgressTitleUtil({ total, percentage }: IProps) {
+	return <h6 className='fw-bold mb-0'>{`${total} (${percentage}%)`}</h6>;
+}
+
+export default memo(VoteProgressTitleUtil);
diff --git a/frontend/src/contract/Ballot.json b/frontend/src/contract/Ballot.json
new file mode 100644
index 0000000..1562414
--- /dev/null
+++ b/frontend/src/contract/Ballot.json
@@ -0,0 +1,253 @@
+{
+  "_format": "hh-sol-artifact-1",
+  "contractName": "Ballot",
+  "sourceName": "src/contracts/Ballot.sol",
+  "abi": [
+    {
+      "inputs": [],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "string",
+          "name": "msg",
+          "type": "string"
+        },
+        {
+          "components": [
+            {
+              "internalType": "uint256[6]",
+              "name": "candidates",
+              "type": "uint256[6]"
+            },
+            {
+              "internalType": "uint256",
+              "name": "totalConfirmedVotes",
+              "type": "uint256"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "uint256",
+                  "name": "candidate",
+                  "type": "uint256"
+                },
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Confirmed[6]",
+              "name": "confirmedVotes",
+              "type": "tuple[6]"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Abstention",
+              "name": "abstentionVotes",
+              "type": "tuple"
+            }
+          ],
+          "indexed": false,
+          "internalType": "struct IHelper.ElectionResult",
+          "name": "",
+          "type": "tuple"
+        }
+      ],
+      "name": "LogElectorVote",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "string",
+          "name": "msg",
+          "type": "string"
+        },
+        {
+          "components": [
+            {
+              "internalType": "uint256[6]",
+              "name": "candidates",
+              "type": "uint256[6]"
+            },
+            {
+              "internalType": "uint256",
+              "name": "totalConfirmedVotes",
+              "type": "uint256"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "uint256",
+                  "name": "candidate",
+                  "type": "uint256"
+                },
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Confirmed[6]",
+              "name": "confirmedVotes",
+              "type": "tuple[6]"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Abstention",
+              "name": "abstentionVotes",
+              "type": "tuple"
+            }
+          ],
+          "indexed": false,
+          "internalType": "struct IHelper.ElectionResult",
+          "name": "",
+          "type": "tuple"
+        }
+      ],
+      "name": "LogStartElection",
+      "type": "event"
+    },
+    {
+      "inputs": [],
+      "name": "abstainVote",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "candidateID",
+          "type": "uint256"
+        }
+      ],
+      "name": "confirmVote",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getElectorHasAlreadyVoted",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getResult",
+      "outputs": [
+        {
+          "components": [
+            {
+              "internalType": "uint256[6]",
+              "name": "candidates",
+              "type": "uint256[6]"
+            },
+            {
+              "internalType": "uint256",
+              "name": "totalConfirmedVotes",
+              "type": "uint256"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "uint256",
+                  "name": "candidate",
+                  "type": "uint256"
+                },
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Confirmed[6]",
+              "name": "confirmedVotes",
+              "type": "tuple[6]"
+            },
+            {
+              "components": [
+                {
+                  "internalType": "address[]",
+                  "name": "electors",
+                  "type": "address[]"
+                },
+                {
+                  "internalType": "uint256",
+                  "name": "totalVotes",
+                  "type": "uint256"
+                }
+              ],
+              "internalType": "struct IHelper.Abstention",
+              "name": "abstentionVotes",
+              "type": "tuple"
+            }
+          ],
+          "internalType": "struct IHelper.ElectionResult",
+          "name": "",
+          "type": "tuple"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ],
+  "bytecode": "0x60806040523480156200001157600080fd5b50620000226200007060201b60201c565b7f8a13d3afe94c3c474f6e4e37a632fc9b64fcf26a55bf4059f9e018d43bdb56fd62000053620000d660201b60201c565b604051620000629190620007c1565b60405180910390a1620008a5565b60005b6006811015620000d3578060148260068110620000955762000094620007fa565b5b01819055508060008260068110620000b257620000b1620007fa565b5b60030201600001819055508080620000ca9062000858565b91505062000073565b50565b620000e0620002d7565b6040518060800160405280601460068060200260405190810160405280929190826006801562000126576020028201915b81548152602001906001019080831162000111575b50505050508152602001601a5481526020016000600680602002604051908101604052809291906000905b828210156200021f578382600302016040518060600160405290816000820154815260200160018201805480602002602001604051908101604052809291908181526020018280548015620001fc57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020019060010190808311620001b1575b505050505081526020016002820154815250508152602001906001019062000151565b505050508152602001601260405180604001604052908160008201805480602002602001604051908101604052809291908181526020018280548015620002bc57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001906001019080831162000271575b50505050508152602001600182015481525050815250905090565b6040518060800160405280620002ec62000317565b8152602001600081526020016200030262000339565b81526020016200031162000369565b81525090565b6040518060c00160405280600690602082028036833780820191505090505090565b6040518060c001604052806006905b6200035262000383565b815260200190600190039081620003485790505090565b604051806040016040528060608152602001600081525090565b60405180606001604052806000815260200160608152602001600081525090565b600082825260208201905092915050565b7f426567696e6e696e67206f662074686520656c656374696f6e20706572696f6460008201527f2c2062616c6c6f7420626f782072656c65617365642100000000000000000000602082015250565b600062000413603683620003a4565b91506200042082620003b5565b604082019050919050565b600060069050919050565b600081905092915050565b6000819050919050565b6000819050919050565b62000460816200044b565b82525050565b600062000474838362000455565b60208301905092915050565b6000602082019050919050565b62000498816200042b565b620004a4818462000436565b9250620004b18262000441565b8060005b83811015620004e8578151620004cc878262000466565b9650620004d98362000480565b925050600181019050620004b5565b505050505050565b600060069050919050565b600081905092915050565b6000819050919050565b600081519050919050565b600082825260208201905092915050565b6000819050602082019050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600062000569826200053c565b9050919050565b6200057b816200055c565b82525050565b60006200058f838362000570565b60208301905092915050565b6000602082019050919050565b6000620005b58262000510565b620005c181856200051b565b9350620005ce836200052c565b8060005b8381101562000605578151620005e9888262000581565b9750620005f6836200059b565b925050600181019050620005d2565b5085935050505092915050565b60006060830160008301516200062c600086018262000455565b5060208301518482036020860152620006468282620005a8565b91505060408301516200065d604086018262000455565b508091505092915050565b600062000676838362000612565b905092915050565b6000602082019050919050565b60006200069882620004f0565b620006a48185620004fb565b935083602082028501620006b88562000506565b8060005b85811015620006fa5784840389528151620006d8858262000668565b9450620006e5836200067e565b925060208a01995050600181019050620006bc565b50829750879550505050505092915050565b600060408301600083015184820360008601526200072b8282620005a8565b915050602083015162000742602086018262000455565b508091505092915050565b6000610120830160008301516200076860008601826200048d565b5060208301516200077d60c086018262000455565b50604083015184820360e08601526200079782826200068b565b9150506060830151848203610100860152620007b482826200070c565b9150508091505092915050565b60006040820190508181036000830152620007dc8162000404565b90508181036020830152620007f281846200074d565b905092915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052603260045260246000fd5b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b600062000865826200044b565b91507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82036200089a576200089962000829565b5b600182019050919050565b610e9c80620008b56000396000f3fe608060405234801561001057600080fd5b506004361061004c5760003560e01c806327f2702a14610051578063421365881461006f578063aa457faf14610079578063de29278914610095575b600080fd5b6100596100b3565b60405161006691906107e6565b60405180910390f35b610077610107565b005b610093600480360381019061008e919061083c565b6102af565b005b61009d610510565b6040516100aa9190610bb3565b60405180910390f35b6000601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff16905090565b601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff168015610195576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040161018c90610c32565b60405180910390fd5b601260010160008154809291906101ab90610c81565b91905055506012600001339080600181540180825580915050600190039060005260206000200160009091909190916101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055506001601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060006101000a81548160ff0219169083151502179055507fea68a6719071ecc2a2941f246ba0b902a3023b5a27a335eb1a8106380ba4021f610297610510565b6040516102a49190610d15565b60405180910390a150565b806006600082101580156102c257508082105b610301576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016102f890610d96565b60405180910390fd5b601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff16801561038f576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040161038690610c32565b60405180910390fd5b600084600681106103a3576103a2610db6565b5b6003020160020160008154809291906103bb90610c81565b9190505550600084600681106103d4576103d3610db6565b5b60030201600101339080600181540180825580915050600190039060005260206000200160009091909190916101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff160217905550836000856006811061045157610450610db6565b5b60030201600001819055506001601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060006101000a81548160ff021916908315150217905550601a60008154809291906104c790610c81565b91905055507fea68a6719071ecc2a2941f246ba0b902a3023b5a27a335eb1a8106380ba4021f6104f5610510565b6040516105029190610e31565b60405180910390a150505050565b610518610707565b6040518060800160405280601460068060200260405190810160405280929190826006801561055c576020028201915b815481526020019060010190808311610548575b50505050508152602001601a5481526020016000600680602002604051908101604052809291906000905b8282101561065157838260030201604051806060016040529081600082015481526020016001820180548060200260200160405190810160405280929190818152602001828054801561062f57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190600101908083116105e5575b5050505050815260200160028201548152505081526020019060010190610587565b5050505081526020016012604051806040016040529081600082018054806020026020016040519081016040528092919081815260200182805480156106ec57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190600101908083116106a2575b50505050508152602001600182015481525050815250905090565b604051806080016040528061071a610741565b81526020016000815260200161072e610763565b815260200161073b610790565b81525090565b6040518060c00160405280600690602082028036833780820191505090505090565b6040518060c001604052806006905b61077a6107aa565b8152602001906001900390816107725790505090565b604051806040016040528060608152602001600081525090565b60405180606001604052806000815260200160608152602001600081525090565b60008115159050919050565b6107e0816107cb565b82525050565b60006020820190506107fb60008301846107d7565b92915050565b600080fd5b6000819050919050565b61081981610806565b811461082457600080fd5b50565b60008135905061083681610810565b92915050565b60006020828403121561085257610851610801565b5b600061086084828501610827565b91505092915050565b600060069050919050565b600081905092915050565b6000819050919050565b61089281610806565b82525050565b60006108a48383610889565b60208301905092915050565b6000602082019050919050565b6108c681610869565b6108d08184610874565b92506108db8261087f565b8060005b8381101561090c5781516108f38782610898565b96506108fe836108b0565b9250506001810190506108df565b505050505050565b600060069050919050565b600081905092915050565b6000819050919050565b600081519050919050565b600082825260208201905092915050565b6000819050602082019050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061098b82610960565b9050919050565b61099b81610980565b82525050565b60006109ad8383610992565b60208301905092915050565b6000602082019050919050565b60006109d182610934565b6109db818561093f565b93506109e683610950565b8060005b83811015610a175781516109fe88826109a1565b9750610a09836109b9565b9250506001810190506109ea565b5085935050505092915050565b6000606083016000830151610a3c6000860182610889565b5060208301518482036020860152610a5482826109c6565b9150506040830151610a696040860182610889565b508091505092915050565b6000610a808383610a24565b905092915050565b6000602082019050919050565b6000610aa082610914565b610aaa818561091f565b935083602082028501610abc8561092a565b8060005b85811015610af85784840389528151610ad98582610a74565b9450610ae483610a88565b925060208a01995050600181019050610ac0565b50829750879550505050505092915050565b60006040830160008301518482036000860152610b2782826109c6565b9150506020830151610b3c6020860182610889565b508091505092915050565b600061012083016000830151610b6060008601826108bd565b506020830151610b7360c0860182610889565b50604083015184820360e0860152610b8b8282610a95565b9150506060830151848203610100860152610ba68282610b0a565b9150508091505092915050565b60006020820190508181036000830152610bcd8184610b47565b905092915050565b600082825260208201905092915050565b7f5468697320656c6563746f7220616c726561647920766f746564210000000000600082015250565b6000610c1c601b83610bd5565b9150610c2782610be6565b602082019050919050565b60006020820190508181036000830152610c4b81610c0f565b9050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b6000610c8c82610806565b91507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8203610cbe57610cbd610c52565b5b600182019050919050565b7f566f7465204162737461696e656420616e6420436f6d70757465642100000000600082015250565b6000610cff601c83610bd5565b9150610d0a82610cc9565b602082019050919050565b60006040820190508181036000830152610d2e81610cf2565b90508181036020830152610d428184610b47565b905092915050565b7f546869732063616e64696461746520646f6e2774206578697374210000000000600082015250565b6000610d80601b83610bd5565b9150610d8b82610d4a565b602082019050919050565b60006020820190508181036000830152610daf81610d73565b9050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052603260045260246000fd5b7f566f746520436f6e6669726d656420616e6420436f6d70757465642100000000600082015250565b6000610e1b601c83610bd5565b9150610e2682610de5565b602082019050919050565b60006040820190508181036000830152610e4a81610e0e565b90508181036020830152610e5e8184610b47565b90509291505056fea26469706673582212200eb6cdac80626695d9b8bb7880ff83a246d3ed27488f5d85b6b31bd3565bd3fc64736f6c63430008110033",
+  "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061004c5760003560e01c806327f2702a14610051578063421365881461006f578063aa457faf14610079578063de29278914610095575b600080fd5b6100596100b3565b60405161006691906107e6565b60405180910390f35b610077610107565b005b610093600480360381019061008e919061083c565b6102af565b005b61009d610510565b6040516100aa9190610bb3565b60405180910390f35b6000601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff16905090565b601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff168015610195576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040161018c90610c32565b60405180910390fd5b601260010160008154809291906101ab90610c81565b91905055506012600001339080600181540180825580915050600190039060005260206000200160009091909190916101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055506001601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060006101000a81548160ff0219169083151502179055507fea68a6719071ecc2a2941f246ba0b902a3023b5a27a335eb1a8106380ba4021f610297610510565b6040516102a49190610d15565b60405180910390a150565b806006600082101580156102c257508082105b610301576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016102f890610d96565b60405180910390fd5b601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060009054906101000a900460ff16801561038f576040517f08c379a000000000000000000000000000000000000000000000000000000000815260040161038690610c32565b60405180910390fd5b600084600681106103a3576103a2610db6565b5b6003020160020160008154809291906103bb90610c81565b9190505550600084600681106103d4576103d3610db6565b5b60030201600101339080600181540180825580915050600190039060005260206000200160009091909190916101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff160217905550836000856006811061045157610450610db6565b5b60030201600001819055506001601b60003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060006101000a81548160ff021916908315150217905550601a60008154809291906104c790610c81565b91905055507fea68a6719071ecc2a2941f246ba0b902a3023b5a27a335eb1a8106380ba4021f6104f5610510565b6040516105029190610e31565b60405180910390a150505050565b610518610707565b6040518060800160405280601460068060200260405190810160405280929190826006801561055c576020028201915b815481526020019060010190808311610548575b50505050508152602001601a5481526020016000600680602002604051908101604052809291906000905b8282101561065157838260030201604051806060016040529081600082015481526020016001820180548060200260200160405190810160405280929190818152602001828054801561062f57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190600101908083116105e5575b5050505050815260200160028201548152505081526020019060010190610587565b5050505081526020016012604051806040016040529081600082018054806020026020016040519081016040528092919081815260200182805480156106ec57602002820191906000526020600020905b8160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190600101908083116106a2575b50505050508152602001600182015481525050815250905090565b604051806080016040528061071a610741565b81526020016000815260200161072e610763565b815260200161073b610790565b81525090565b6040518060c00160405280600690602082028036833780820191505090505090565b6040518060c001604052806006905b61077a6107aa565b8152602001906001900390816107725790505090565b604051806040016040528060608152602001600081525090565b60405180606001604052806000815260200160608152602001600081525090565b60008115159050919050565b6107e0816107cb565b82525050565b60006020820190506107fb60008301846107d7565b92915050565b600080fd5b6000819050919050565b61081981610806565b811461082457600080fd5b50565b60008135905061083681610810565b92915050565b60006020828403121561085257610851610801565b5b600061086084828501610827565b91505092915050565b600060069050919050565b600081905092915050565b6000819050919050565b61089281610806565b82525050565b60006108a48383610889565b60208301905092915050565b6000602082019050919050565b6108c681610869565b6108d08184610874565b92506108db8261087f565b8060005b8381101561090c5781516108f38782610898565b96506108fe836108b0565b9250506001810190506108df565b505050505050565b600060069050919050565b600081905092915050565b6000819050919050565b600081519050919050565b600082825260208201905092915050565b6000819050602082019050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061098b82610960565b9050919050565b61099b81610980565b82525050565b60006109ad8383610992565b60208301905092915050565b6000602082019050919050565b60006109d182610934565b6109db818561093f565b93506109e683610950565b8060005b83811015610a175781516109fe88826109a1565b9750610a09836109b9565b9250506001810190506109ea565b5085935050505092915050565b6000606083016000830151610a3c6000860182610889565b5060208301518482036020860152610a5482826109c6565b9150506040830151610a696040860182610889565b508091505092915050565b6000610a808383610a24565b905092915050565b6000602082019050919050565b6000610aa082610914565b610aaa818561091f565b935083602082028501610abc8561092a565b8060005b85811015610af85784840389528151610ad98582610a74565b9450610ae483610a88565b925060208a01995050600181019050610ac0565b50829750879550505050505092915050565b60006040830160008301518482036000860152610b2782826109c6565b9150506020830151610b3c6020860182610889565b508091505092915050565b600061012083016000830151610b6060008601826108bd565b506020830151610b7360c0860182610889565b50604083015184820360e0860152610b8b8282610a95565b9150506060830151848203610100860152610ba68282610b0a565b9150508091505092915050565b60006020820190508181036000830152610bcd8184610b47565b905092915050565b600082825260208201905092915050565b7f5468697320656c6563746f7220616c726561647920766f746564210000000000600082015250565b6000610c1c601b83610bd5565b9150610c2782610be6565b602082019050919050565b60006020820190508181036000830152610c4b81610c0f565b9050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b6000610c8c82610806565b91507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8203610cbe57610cbd610c52565b5b600182019050919050565b7f566f7465204162737461696e656420616e6420436f6d70757465642100000000600082015250565b6000610cff601c83610bd5565b9150610d0a82610cc9565b602082019050919050565b60006040820190508181036000830152610d2e81610cf2565b90508181036020830152610d428184610b47565b905092915050565b7f546869732063616e64696461746520646f6e2774206578697374210000000000600082015250565b6000610d80601b83610bd5565b9150610d8b82610d4a565b602082019050919050565b60006020820190508181036000830152610daf81610d73565b9050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052603260045260246000fd5b7f566f746520436f6e6669726d656420616e6420436f6d70757465642100000000600082015250565b6000610e1b601c83610bd5565b9150610e2682610de5565b602082019050919050565b60006040820190508181036000830152610e4a81610e0e565b90508181036020830152610e5e8184610b47565b90509291505056fea26469706673582212200eb6cdac80626695d9b8bb7880ff83a246d3ed27488f5d85b6b31bd3565bd3fc64736f6c63430008110033",
+  "linkReferences": {},
+  "deployedLinkReferences": {}
+}
diff --git a/frontend/src/contract/Interfaces.ts b/frontend/src/contract/Interfaces.ts
new file mode 100644
index 0000000..9604f32
--- /dev/null
+++ b/frontend/src/contract/Interfaces.ts
@@ -0,0 +1,43 @@
+/**
+ * @thiagosaud
+ * @description This file is exclusive to control the Types and Interfaces of the {Compiled Smart Contract}!
+ */
+
+/** @description This type is exclusive to control the BigNumber returns of the contract! */
+type TypeBigNumber = { _hex: string; _isBigNumber: number };
+
+/** @description This type is exclusive to control fragments of contract functions! */
+export type TypeBallotContractFunctionFragment = 'confirmVote' | 'abstainVote';
+
+/** @description This type is exclusively for handling contract function return fragments! */
+export type TypeBallotContractFunctionFragmentParams = number[];
+
+/** @description This interface is exclusive to control the gross return of the contract! */
+export interface IBallotContractGetResult {
+	candidates: TypeBigNumber[];
+	totalConfirmedVotes: TypeBigNumber;
+	abstentionVotes: {
+		electors: string[];
+		totalVotes: TypeBigNumber;
+	};
+	confirmedVotes: {
+		candidate: TypeBigNumber;
+		electors: string[];
+		totalVotes: TypeBigNumber;
+	}[];
+}
+
+/** @description This interface is exclusive to control the conversion of the contract's gross return! */
+export interface IBallotContractGetResultConverted {
+	candidates: number[];
+	totalConfirmedVotes: number;
+	abstentionVotes: {
+		electors: string[];
+		totalVotes: number;
+	};
+	confirmedVotes: {
+		candidate: number;
+		electors: string[];
+		totalVotes: number;
+	}[];
+}
diff --git a/frontend/src/hooks/useCalculatorHook.tsx b/frontend/src/hooks/useCalculatorHook.tsx
new file mode 100644
index 0000000..1afe86b
--- /dev/null
+++ b/frontend/src/hooks/useCalculatorHook.tsx
@@ -0,0 +1,27 @@
+import { chain } from 'mathjs';
+
+interface IUseCalculator {
+	sum: (values: number[]) => number;
+	toPercentage: (valueA: number, valueB: number) => number;
+}
+
+/**
+ * @thiagosaud
+ * @description This hook is exclusive to control the voting calculations!
+ * @interface IUseCalculator
+ */
+export default function useCalculatorHook(): IUseCalculator {
+	const isZeroValue = (value: number) => chain(value).isZero().done();
+
+	const sum = (values: number[]) => chain(values).sum().done();
+
+	const toPercentage = (valueA: number, valueB: number) =>
+		isZeroValue(valueA) || isZeroValue(valueB)
+			? chain(0).done()
+			: chain(chain(valueA).divide(valueB).multiply(100).done().toPrecision(3)).number().done();
+
+	return {
+		sum,
+		toPercentage,
+	};
+}
diff --git a/frontend/src/hooks/useEthersHook.tsx b/frontend/src/hooks/useEthersHook.tsx
new file mode 100644
index 0000000..d497817
--- /dev/null
+++ b/frontend/src/hooks/useEthersHook.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import { ethers } from 'ethers';
+import { MetaMaskInpageProvider } from '@metamask/providers';
+import MetaMaskOnboarding from '@metamask/onboarding';
+import detectEthereumProvider from '@metamask/detect-provider';
+import BallotContract from 'contract/Ballot.json';
+import { TypeBallotContractFunctionFragment, TypeBallotContractFunctionFragmentParams } from 'contract/Interfaces';
+
+interface IMetaMaskEthereumProvider {
+	isMetaMask?: boolean;
+	once(eventName: string | symbol, listener: (...args: any[]) => void): this;
+	on(eventName: string | symbol, listener: (...args: any[]) => void): this;
+	off(eventName: string | symbol, listener: (...args: any[]) => void): this;
+	addListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
+	removeListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
+	removeAllListeners(event?: string | symbol): this;
+}
+
+interface IUseEthersHook {
+	events: {
+		changed: {
+			accounts: 'accountsChanged';
+			chain: 'chainChanged';
+		};
+	};
+	states: {
+		provider: {
+			ethereum: MetaMaskInpageProvider | undefined;
+			web3: ethers.providers.Web3Provider | undefined;
+		};
+		contract: {
+			web3: ethers.Contract;
+			infura: ethers.Contract;
+		};
+	};
+	actions: {
+		isGoerliNetwork: (chainID: string) => boolean;
+		hasMetaMaskInstalled: () => boolean;
+		loadingProvider: () => Promise<IMetaMaskEthereumProvider>;
+		connect: () => Promise<{ wallet: string }>;
+		sendTransaction: (
+			estimateGas: string,
+			functionFragment: TypeBallotContractFunctionFragment,
+			functionFragmentParams?: TypeBallotContractFunctionFragmentParams
+		) => Promise<ethers.providers.TransactionReceipt>;
+	};
+}
+
+/**
+ * @thiagosaud
+ * @description This hook is exclusive to control the entire flow of MetaMask, Ethers and Infura Providers and contract handling in general!
+ * @interface IUseEthersHook
+ */
+export default function useEthersHook(): IUseEthersHook {
+	const [metamaskProvider, setMetamaskProvider] = useState<IMetaMaskEthereumProvider | null>(null);
+
+	const provider = useMemo(
+		() => ({
+			ethereum: window.ethereum as MetaMaskInpageProvider,
+			web3: metamaskProvider ? new ethers.providers.Web3Provider(metamaskProvider, { chainId: 5, name: 'goerli' }) : undefined,
+			infura: ethers.providers.InfuraProvider.getWebSocketProvider({ chainId: 5, name: 'goerli' }),
+		}),
+		[metamaskProvider]
+	);
+
+	const contract = useMemo(
+		() => ({
+			web3: new ethers.Contract(process.env.REACT_APP_SOLIDITY_CONTRACT_ADDRESS || '', BallotContract.abi, provider.web3),
+			infura: new ethers.Contract(
+				process.env.REACT_APP_SOLIDITY_CONTRACT_ADDRESS || '',
+				BallotContract.abi,
+				new ethers.Wallet(process.env.REACT_APP_WALLET_PRIVATE_KEY || '', provider.infura)
+			),
+		}),
+		[provider]
+	);
+
+	const isGoerliNetwork = useCallback((chainID: string) => chainID === '0x5', []);
+
+	const hasMetaMaskInstalled = useCallback(() => {
+		if (MetaMaskOnboarding.isMetaMaskInstalled()) {
+			return true;
+		}
+
+		const METAMASK_ONBOARDING = new MetaMaskOnboarding();
+
+		toast('You dont have the metamask installed, click here to be redirected!', {
+			onClick: () => METAMASK_ONBOARDING.startOnboarding(),
+			onClose: () => METAMASK_ONBOARDING.stopOnboarding(),
+			toastId: 'verify-metamask-extension',
+			type: 'info',
+			closeButton: false,
+		});
+
+		return false;
+	}, []);
+
+	const loadingProvider = useCallback(
+		async () =>
+			new Promise<IMetaMaskEthereumProvider>((resolve, reject) => {
+				detectEthereumProvider()
+					.then(response => {
+						setTimeout(() => {
+							if (response) {
+								resolve(response);
+								setMetamaskProvider(response);
+							} else {
+								reject(new Error('Provider Metamask does not exist!'));
+							}
+						}, 2500);
+					})
+					.catch((error: DOMException) => reject(error));
+			}),
+
+		[]
+	);
+
+	const connect = useCallback(
+		() =>
+			new Promise<{ wallet: string }>((resolve, reject) => {
+				if (!provider.ethereum) {
+					reject(new Error('Ethereum Provider does not exist!'));
+				}
+
+				provider.ethereum
+					?.request({ method: 'eth_requestAccounts' })
+					.then(accounts => resolve({ wallet: (accounts as string[])[0] as string }))
+					.catch(error => reject(error));
+			}),
+		[provider]
+	);
+
+	const sendTransaction = useCallback(
+		(
+			estimateGas: string,
+			functionFragment: TypeBallotContractFunctionFragment,
+			functionFragmentParams?: TypeBallotContractFunctionFragmentParams
+		) =>
+			new Promise<ethers.providers.TransactionReceipt>((resolve, reject) => {
+				connect()
+					.then(async ({ wallet }) => {
+						try {
+							const TRANSACTION = await provider.ethereum.request({
+								method: 'eth_sendTransaction',
+								params: [
+									{
+										from: wallet,
+										to: process.env.REACT_APP_SOLIDITY_CONTRACT_ADDRESS,
+										gas: estimateGas,
+										value: 0,
+										data: new ethers.utils.Interface(BallotContract.abi).encodeFunctionData(functionFragment, functionFragmentParams || []),
+									},
+								],
+							});
+
+							const TRANSACTION_RECEIPT = await provider.web3?.waitForTransaction(TRANSACTION as string);
+
+							if (TRANSACTION_RECEIPT?.status === 0) {
+								reject();
+							}
+
+							resolve(TRANSACTION_RECEIPT as ethers.providers.TransactionReceipt);
+						} catch (error) {
+							reject(error);
+						}
+					})
+					.catch((error: DOMException) => reject(error));
+			}),
+		[provider, connect]
+	);
+
+	return {
+		events: {
+			changed: {
+				accounts: 'accountsChanged',
+				chain: 'chainChanged',
+			},
+		},
+		states: { provider, contract },
+		actions: {
+			isGoerliNetwork,
+			hasMetaMaskInstalled,
+			loadingProvider,
+			connect,
+			sendTransaction,
+		},
+	};
+}
diff --git a/frontend/src/hooks/useNumberConversion.test.tsx b/frontend/src/hooks/useNumberConversion.test.tsx
deleted file mode 100644
index b4a03a3..0000000
--- a/frontend/src/hooks/useNumberConversion.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import useNumberConversion from './useNumberConversion';
-
-const CURRENCY_VALUE = 124252799;
-const PERCENTAGE_VALUE = 99.99;
-
-describe('[NUMBER CONVERSION HOOK] - Testing Hook', () => {
-	const { result } = renderHook(() => useNumberConversion());
-
-	test('Should be have the functions!', () => {
-		expect(result.current.convertToCurrency(CURRENCY_VALUE)).toBeTruthy();
-		expect(result.current.convertToPercentage(PERCENTAGE_VALUE)).toBeTruthy();
-	});
-
-	test('Should be type string output!', () => {
-		expect(typeof result.current.convertToCurrency(CURRENCY_VALUE)).toBe('string');
-		expect(typeof result.current.convertToPercentage(PERCENTAGE_VALUE)).toBe('string');
-	});
-
-	test('Should be convertToCurrency greater or equal 0!', () => {
-		expect(parseFloat(result.current.convertToCurrency(CURRENCY_VALUE))).toBeGreaterThanOrEqual(0);
-	});
-
-	test('Should be convertToPercentage greater or equal 0% and less or equal 100%!', () => {
-		const percentageValue = parseFloat(result.current.convertToPercentage(PERCENTAGE_VALUE).replace(',', '.'));
-
-		expect(percentageValue).toBeGreaterThanOrEqual(0);
-		expect(percentageValue).toBeLessThanOrEqual(100);
-	});
-});
diff --git a/frontend/src/hooks/useNumberConversion.tsx b/frontend/src/hooks/useNumberConversion.tsx
deleted file mode 100644
index 2840718..0000000
--- a/frontend/src/hooks/useNumberConversion.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useCallback } from 'react';
-
-export default function useNumberConversion() {
-	const convertToCurrency = useCallback((value: number) => new Intl.NumberFormat('pt-br', {}).format(value), []);
-
-	const convertToPercentage = useCallback(
-		(value: number) => new Intl.NumberFormat('pt-br', { style: 'percent', maximumFractionDigits: 2 }).format(value / 100),
-		[]
-	);
-
-	return {
-		convertToCurrency,
-		convertToPercentage,
-	};
-}
diff --git a/frontend/src/hooks/useRouteNavigationHook.tsx b/frontend/src/hooks/useRouteNavigationHook.tsx
new file mode 100644
index 0000000..46b98b3
--- /dev/null
+++ b/frontend/src/hooks/useRouteNavigationHook.tsx
@@ -0,0 +1,40 @@
+import { useNavigate } from 'react-router-dom';
+
+interface IUseRouteNavigationHook {
+	goToHomePage: () => void;
+	goToHelpPage: () => void;
+	openContractPage: () => Window | null;
+	openMyProfilePage: () => Window | null;
+	openGithubPage: () => Window | null;
+	openGoerliFaucetPage: () => Window | null;
+}
+
+/**
+ * @thiagosaud
+ * @description This hook is exclusively for controlling the entire Route Navigation flow!
+ * @interface IUseRouteNavigationHook
+ */
+export default function useRouteNavigationHook(): IUseRouteNavigationHook {
+	const navigateHook = useNavigate();
+
+	const windowOpen = (url: string) => window.open(url, '_blank', 'noopener,noreferrer');
+
+	// ROUTES
+	const goToHomePage = () => navigateHook('/home');
+	const goToHelpPage = () => navigateHook('/help');
+
+	// HYPERLINKS
+	const openContractPage = () => windowOpen(`https://goerli.etherscan.io/address/${process.env.REACT_APP_SOLIDITY_CONTRACT_ADDRESS}`);
+	const openMyProfilePage = () => windowOpen('https://www.linkedin.com/in/thiagosaud/');
+	const openGithubPage = () => windowOpen('https://github.com/thiagosaud/dApp-superior-electoral-court');
+	const openGoerliFaucetPage = () => windowOpen('https://goerlifaucet.com/');
+
+	return {
+		goToHomePage,
+		goToHelpPage,
+		openContractPage,
+		openMyProfilePage,
+		openGithubPage,
+		openGoerliFaucetPage,
+	};
+}
diff --git a/frontend/src/hooks/useStorageDBHook.tsx b/frontend/src/hooks/useStorageDBHook.tsx
new file mode 100644
index 0000000..c00cfeb
--- /dev/null
+++ b/frontend/src/hooks/useStorageDBHook.tsx
@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { IBallotContractGetResultConverted } from 'contract/Interfaces';
+
+export type TypeInfuraData = IBallotContractGetResultConverted;
+export type TypeMetaMaskData = string;
+export type TypeStorageKey = '@infura-provider' | '@metamask';
+export type TypeInfuraStorageData = TypeInfuraData | null;
+export type TypeMetaMaskStorageData = TypeMetaMaskData | null;
+
+interface IConnectFunction {
+	infuraData: TypeInfuraStorageData;
+	metamaskData: TypeMetaMaskStorageData;
+}
+
+interface IUseStorageDB {
+	connect: () => Promise<IConnectFunction>;
+	update: (key: TypeStorageKey, newData: TypeInfuraData | TypeMetaMaskData) => void;
+	remove: (key: TypeStorageKey) => void;
+}
+
+/**
+ * @thiagosaud
+ * @description This hook is unique to control all caching flow in LocalStorage!
+ * @interface IConnectFunction
+ * @interface IUseStorageDB
+ * @type TypeInfuraData
+ * @type TypeMetaMaskData
+ * @type TypeStorageKey
+ * @type TypeInfuraStorageData
+ * @type TypeMetaMaskStorageData
+ */
+export default function useStorageDBHook(): IUseStorageDB {
+	const dispatchStorageEvent = useCallback((key: TypeStorageKey, value: TypeInfuraStorageData | TypeMetaMaskStorageData) => {
+		let newValue: string | null = null;
+
+		if (key === '@metamask') {
+			newValue = value as TypeMetaMaskStorageData;
+		}
+
+		if (key === '@infura-provider') {
+			newValue = JSON.stringify(value as TypeInfuraStorageData);
+		}
+
+		window.dispatchEvent(
+			new StorageEvent('storage', {
+				key,
+				newValue,
+			})
+		);
+	}, []);
+
+	const asyncGetData = useCallback(
+		(key: TypeStorageKey) =>
+			new Promise<TypeInfuraStorageData | TypeMetaMaskStorageData>((resolve, reject) => {
+				try {
+					const STORAGE_DATA = localStorage.getItem(key);
+
+					if (key === '@metamask') {
+						resolve(STORAGE_DATA as TypeMetaMaskStorageData);
+					}
+
+					if (key === '@infura-provider') {
+						resolve(STORAGE_DATA ? (JSON.parse(STORAGE_DATA) as TypeInfuraStorageData) : null);
+					}
+				} catch (error) {
+					reject(error);
+				}
+			}),
+		[]
+	);
+
+	const connect = useCallback(
+		() =>
+			new Promise<IConnectFunction>((resolve, reject) => {
+				Promise.all([asyncGetData('@infura-provider'), asyncGetData('@metamask')])
+					.then(response => {
+						setTimeout(() => {
+							resolve({
+								infuraData: response[0] as TypeInfuraStorageData,
+								metamaskData: response[1] as TypeMetaMaskData,
+							});
+						}, 2500);
+					})
+					.catch((error: DOMException) => reject(error));
+			}),
+		[asyncGetData]
+	);
+
+	const update = useCallback(
+		(key: TypeStorageKey, newData: TypeInfuraData | TypeMetaMaskData) => {
+			if (key === '@metamask') {
+				localStorage.setItem(key, newData as TypeMetaMaskData);
+			}
+
+			if (key === '@infura-provider') {
+				localStorage.setItem(key, JSON.stringify(newData as TypeInfuraData));
+			}
+
+			dispatchStorageEvent(key, newData);
+		},
+		[dispatchStorageEvent]
+	);
+
+	const remove = useCallback(
+		(key: TypeStorageKey) => {
+			localStorage.removeItem(key);
+			dispatchStorageEvent(key, null);
+		},
+		[dispatchStorageEvent]
+	);
+
+	return {
+		connect,
+		update,
+		remove,
+	};
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 2f18a19..1981ece 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,13 +1,21 @@
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
+import StorageDBProvider from 'providers/useStorageDBProvider';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'react-toastify/dist/ReactToastify.css';
 
+/**
+ * @thiagosaud
+ * @description This file is unique in that it does a "lazy loading" of all files and main components which need to be loaded before other files!
+ */
 const ROOT = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 ROOT.render(
 	<StrictMode>
-		<App />
+		<StorageDBProvider>
+			<App />
+		</StorageDBProvider>
 	</StrictMode>
 );
 
diff --git a/frontend/src/pages/HelpPage/index.tsx b/frontend/src/pages/HelpPage/index.tsx
new file mode 100644
index 0000000..0b977f1
--- /dev/null
+++ b/frontend/src/pages/HelpPage/index.tsx
@@ -0,0 +1,137 @@
+import { MouseEventHandler, memo, useCallback, useEffect } from 'react';
+import { Accordion, Button } from 'react-bootstrap';
+import { BsGithub } from 'react-icons/bs';
+import { FaEthereum } from 'react-icons/fa';
+import { SiLinkedin } from 'react-icons/si';
+import { MdArrowBack } from 'react-icons/md';
+import styled from 'styled-components';
+import PageTemplate from 'templates/PageTemplate';
+import useRouteNavigationHook from 'hooks/useRouteNavigationHook';
+import { useStorageDBProviderHook } from 'providers/useStorageDBProvider';
+
+const AccordionItem = styled(Accordion.Item)`
+	text-align: justify;
+`;
+
+const WrapperButton = styled.div`
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+`;
+
+/**
+ * @thiagosaud
+ * @description This component is exclusively for controlling the FAQ!
+ */
+function HelpPage() {
+	const useStorageDBProvider = useStorageDBProviderHook();
+	const useRouteNavigation = useRouteNavigationHook();
+
+	const HyperlinkButton = useCallback(
+		({
+			onClick,
+			title,
+			icon,
+		}: {
+			onClick: MouseEventHandler<HTMLButtonElement>;
+			title: 'MY PROFILE' | 'PROJECT CODE' | 'CONTRACT ON BLOCKCHAIN' | 'GOERLI FAUCET' | 'BACK';
+			icon: 'linkedin' | 'github' | 'eth' | 'back';
+		}) => (
+			<Button onClick={onClick} variant={title === 'BACK' ? 'light' : 'primary'} className='d-flex align-items-center gap-2' size='sm'>
+				{icon === 'back' && <MdArrowBack size='35' color='var(--bs-yellow)' />}
+				{icon === 'linkedin' && <SiLinkedin size='30' color='white' />}
+				{icon === 'github' && <BsGithub size='30' color='white' />}
+				{icon === 'eth' && <FaEthereum size='30' color='white' />}
+
+				{title}
+			</Button>
+		),
+		[]
+	);
+
+	const BreakTwoLines = useCallback(
+		() => (
+			<>
+				<br />
+				<br />
+			</>
+		),
+		[]
+	);
+
+	useEffect(() => {
+		if (!useStorageDBProvider.dataCached.metamask) {
+			useRouteNavigation.goToHomePage();
+		}
+	}, [useStorageDBProvider, useRouteNavigation]);
+
+	return (
+		<PageTemplate>
+			<HyperlinkButton onClick={() => useRouteNavigation.goToHomePage()} title='BACK' icon='back' />
+
+			<Accordion defaultActiveKey='0' className='mt-4'>
+				<AccordionItem eventKey='0'>
+					<Accordion.Header>How the project works?</Accordion.Header>
+					<Accordion.Body>
+						The Electoral Ballot Box in this case is the blockchain, in this case, we are using Ethereum. A blockchain is a ledger, where
+						this ledger is decentralized and cannot be tampered with and is public. Knowing this, all votes, candidates and results are
+						stored in real time on the blockchain.
+						<BreakTwoLines />
+						For the voter to vote for his candidate, he must have ETH in his digital cryptocurrency wallet, in this case the system uses
+						MetaMask. The digital wallet would represent some document of the voter, which would be registered in some government agency,
+						being enabled to vote. As soon as the voter votes, a transaction request is made on the blockchain, where miners receive this
+						request and mine the block. For this mining to be done, the only fee charged in the contract is the gas fee and nothing else.
+						<BreakTwoLines />
+						The gas fee is a mandatory fee for rewarding miners, in this case the fee for this voting system is around $0.38. In this
+						contract, the voter pays the fee, but in a real contract, the government could commit to paying these fees.
+						<BreakTwoLines />
+						After successfully completed mining, the vote is saved on the blockchain, for your candidate if it is confirmed, or for
+						abstention if you do not want to vote for any candidate. All results are issued in real time directly from the blockchain! It is
+						not possible to multiple votes with the same wallet, the contract contains a protection against this and will reverse the entire
+						transaction!
+						<BreakTwoLines />
+						<strong>
+							*Disclaimer: As it is a portfolio project, it does not strictly follow the rules of reality, so you can create another
+							portfolio and use it for voting, simulating another voter, with another document.
+						</strong>
+						<BreakTwoLines />
+						Magical isnt it?
+						<br />
+						Below is the link to the contract and my social networks, feel free to follow me and like the project repository, maybe a
+						donation too?
+						<BreakTwoLines />
+						<WrapperButton>
+							<HyperlinkButton onClick={() => useRouteNavigation.openMyProfilePage()} title='MY PROFILE' icon='linkedin' />
+							<HyperlinkButton onClick={() => useRouteNavigation.openGithubPage()} title='PROJECT CODE' icon='github' />
+							<HyperlinkButton onClick={() => useRouteNavigation.openContractPage()} title='CONTRACT ON BLOCKCHAIN' icon='eth' />
+						</WrapperButton>
+					</Accordion.Body>
+				</AccordionItem>
+
+				<AccordionItem eventKey='1'>
+					<Accordion.Header>How to get free ETH to vote?</Accordion.Header>
+					<Accordion.Body>
+						The main network is called &quot;mainnet&quot;, and this contract was implemented in the network called &quot;GOERLI&quot;. The
+						&quot;GOERLI&quot; network is the test network (homologation), however, it simulates the main &quot;mainnet&quot; network, where
+						it has the same miners and infrastructure. Knowing this, in this network it is enough just to get the tokens called
+						&quot;GoerliETH&quot;.
+						<BreakTwoLines />
+						To get these tokens, there are thousands of sites called &quot;faucets&quot;, but just below, you will find some of them:
+						<BreakTwoLines />
+						<HyperlinkButton onClick={() => useRouteNavigation.openGoerliFaucetPage()} title='GOERLI FAUCET' icon='eth' />
+						<br />
+						After accessing them, just insert your public wallet key and &quot;fly it&quot;, you will receive the &quot;GoerliETH&quot; to
+						interact with the contract (System).
+						<BreakTwoLines />
+						<strong>
+							*Disclaimer: In this system (contract) there is no potential danger, even I developed it myself. However, for your safety, use
+							a wallet that you will not use in the real world.
+						</strong>
+					</Accordion.Body>
+				</AccordionItem>
+			</Accordion>
+		</PageTemplate>
+	);
+}
+
+export default memo(HelpPage);
diff --git a/frontend/src/pages/HomePage/index.test.tsx b/frontend/src/pages/HomePage/index.test.tsx
deleted file mode 100644
index 2d4e8b4..0000000
--- a/frontend/src/pages/HomePage/index.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import HomePage from '.';
-
-describe('[HOME PAGE] - Testing Component', () => {
-	test('Should be have childs component!', () => {
-		render(<HomePage />);
-
-		const pageTemplate = screen.getByTestId('custom-container-component');
-		const votingStaticList = screen.getByTestId('voting-static-list-component');
-		const candidateList = screen.getByTestId('candidate-list-component');
-		const sectionTitle = screen.getByText('President');
-		const abstainVoteButton = screen.getByText('Abstain from Voting');
-
-		expect(pageTemplate).toBeInTheDocument();
-		expect(abstainVoteButton).toBeInTheDocument();
-		expect(abstainVoteButton).toBeInTheDocument();
-		expect(sectionTitle).toBeInTheDocument();
-		expect(votingStaticList).toBeInTheDocument();
-		expect(candidateList).toBeInTheDocument();
-	});
-});
-
-describe('[HOME PAGE] - Abstain Vote Button Component', () => {
-	test('Should be work on Click!', () => {
-		render(<HomePage />);
-		expect(fireEvent.click(screen.getByText('Abstain from Voting'))).toBe(true);
-	});
-});
diff --git a/frontend/src/pages/HomePage/index.tsx b/frontend/src/pages/HomePage/index.tsx
index 1f62d6d..2a09118 100644
--- a/frontend/src/pages/HomePage/index.tsx
+++ b/frontend/src/pages/HomePage/index.tsx
@@ -1,100 +1,114 @@
-import { memo } from 'react';
-import { Button } from 'react-bootstrap';
-import CandidateList from 'components/List/CandidateList';
-import VotingStatisticList from 'components/List/VotingStatisticList';
-import PageTemplate from 'templates/TemplatePage';
+import { Suspense, memo, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import PageTemplate from 'templates/PageTemplate';
+import VotingStatisticList from 'components/Lists/VotingStatisticList';
+import CandidateListSkeleton from 'components/Skeletons/CandidateListSkeleton';
+import GenericSkeleton from 'components/Skeletons/GenericSkeleton';
+import { LazyAbstainVoteButton, LazyCandidateList } from 'utils/LazyLoadingComponents';
+import { useSolidityContractProviderHook } from 'providers/useSolidityContractProvider';
+import { useStorageDBProviderHook } from 'providers/useStorageDBProvider';
+import { TypeInfuraStorageData, TypeInfuraData } from 'hooks/useStorageDBHook';
+import useCalculatorHook from 'hooks/useCalculatorHook';
 
+/**
+ * @thiagosaud
+ * @description This component is exclusively for controlling the rendering flow and controlling votes!
+ */
 function HomePage() {
+	const useStorageDBProvider = useStorageDBProviderHook();
+	const useSolidityContractProvider = useSolidityContractProviderHook();
+	const useCalculator = useCalculatorHook();
+	const [electoralResult, setElectoralResult] = useState<TypeInfuraStorageData>(null);
+	const [isVoting, updateIsVoting] = useReducer((state: boolean) => !state, false);
+
+	const votes = useMemo(() => {
+		const TOTAL_CONFIRMED_VOTES = electoralResult?.totalConfirmedVotes || 0;
+		const TOTAL_ABSTENTION_VOTES = electoralResult?.abstentionVotes.totalVotes || 0;
+		const TOTAL_VOTES = useCalculator.sum([TOTAL_CONFIRMED_VOTES, TOTAL_ABSTENTION_VOTES]);
+
+		return {
+			confirmed: {
+				total: TOTAL_CONFIRMED_VOTES,
+				totalPercentage: useCalculator.toPercentage(TOTAL_CONFIRMED_VOTES, TOTAL_VOTES),
+			},
+			abstention: {
+				total: TOTAL_ABSTENTION_VOTES,
+				totalPercentage: useCalculator.toPercentage(TOTAL_ABSTENTION_VOTES, TOTAL_VOTES),
+			},
+		};
+	}, [useCalculator, electoralResult]);
+
+	const hasVoted = useMemo(() => {
+		const WALLET_CONNECTED = useStorageDBProvider.dataCached.metamask;
+
+		if (electoralResult && WALLET_CONNECTED) {
+			const { abstentionVotes, confirmedVotes } = electoralResult;
+
+			const compare = (electorWallet: string, walletConnected: string) => electorWallet.toUpperCase() === walletConnected.toUpperCase();
+			const HAS_ABSTENTION_VOTE = !!abstentionVotes.electors.find(wallet => compare(wallet, WALLET_CONNECTED));
+			const HAS_CONFIRMED_VOTE = !!confirmedVotes.find(({ electors }) => electors.find(wallet => compare(wallet, WALLET_CONNECTED)));
+
+			return HAS_ABSTENTION_VOTE || HAS_CONFIRMED_VOTE;
+		}
+
+		return !WALLET_CONNECTED;
+	}, [useStorageDBProvider, electoralResult]);
+
+	const isDisabledVoteButton = useMemo(() => hasVoted || isVoting, [hasVoted, isVoting]);
+
+	const getCandidateList = useCallback(
+		({ confirmedVotes, totalConfirmedVotes }: TypeInfuraData) =>
+			confirmedVotes.map(({ candidate, totalVotes }) => ({
+				number: candidate,
+				votesConfirmed: {
+					total: totalVotes,
+					totalPercentage: useCalculator.toPercentage(totalVotes, totalConfirmedVotes),
+				},
+			})),
+		[useCalculator]
+	);
+
+	const cacheData = useCallback(() => {
+		setElectoralResult(useStorageDBProvider.dataCached.infura);
+
+		if (!electoralResult) {
+			useSolidityContractProvider.actions.getElectoralResult().then(response => setElectoralResult(response));
+		}
+	}, [electoralResult, useStorageDBProvider, useSolidityContractProvider]);
+
+	const handleOnAbstainVote = useCallback(() => {
+		updateIsVoting();
+		useSolidityContractProvider.actions.abstainVote().finally(() => updateIsVoting());
+	}, [useSolidityContractProvider]);
+
+	const handleOnConfirmVote = useCallback(
+		(candidateID: number) => {
+			updateIsVoting();
+			useSolidityContractProvider.actions.confirmVote(candidateID).finally(() => updateIsVoting());
+		},
+		[useSolidityContractProvider]
+	);
+
+	useEffect(() => cacheData(), [cacheData]);
+
 	return (
 		<PageTemplate>
-			<VotingStatisticList
-				votes={{
-					confirmed: {
-						total: 124252799,
-						totalPercentage: 99.99,
-					},
-					abstention: {
-						total: 124252799,
-						totalPercentage: 89.85,
-					},
-				}}
-			/>
+			<VotingStatisticList isLoading={!votes} votes={votes} />
 
 			<div className='mt-4 mb-3 d-flex justify-content-between align-items-center'>
 				<h5 className='mb-0'>President</h5>
-				<Button variant='light'>Abstain from Voting</Button>
+
+				<Suspense fallback={<GenericSkeleton height='38px' width='172px' />}>
+					<LazyAbstainVoteButton onAbstainVote={handleOnAbstainVote} isDisabled={isDisabledVoteButton} />
+				</Suspense>
 			</div>
 
-			<CandidateList
-				data={[
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 1,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-1.png',
-						hasVoted: true,
-						votesConfirmed: {
-							total: 124252799,
-							totalPercentage: 99.99,
-						},
-					},
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 2,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-2.png',
-						hasVoted: false,
-						votesConfirmed: {
-							total: 124252796,
-							totalPercentage: 99.59,
-						},
-					},
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 3,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-3.png',
-						hasVoted: false,
-						votesConfirmed: {
-							total: 124252796,
-							totalPercentage: 99.59,
-						},
-					},
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 4,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-4.png',
-						hasVoted: false,
-						votesConfirmed: {
-							total: 124252796,
-							totalPercentage: 99.59,
-						},
-					},
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 5,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-5.png',
-						hasVoted: false,
-						votesConfirmed: {
-							total: 124252796,
-							totalPercentage: 99.59,
-						},
-					},
-					{
-						// eslint-disable-next-line no-console
-						onConfirmVote: number => console.log(number),
-						number: 6,
-						avatar: 'https://raw.githubusercontent.com/thiagosaud/dApp-superior-electoral-court/main/temp/imgs/candidate-6.png',
-						hasVoted: false,
-						votesConfirmed: {
-							total: 124252796,
-							totalPercentage: 99.59,
-						},
-					},
-				]}
-			/>
+			{!electoralResult ? (
+				<CandidateListSkeleton />
+			) : (
+				<Suspense fallback={<CandidateListSkeleton />}>
+					<LazyCandidateList onConfirmVote={handleOnConfirmVote} data={getCandidateList(electoralResult)} hasVoted={isDisabledVoteButton} />
+				</Suspense>
+			)}
 		</PageTemplate>
 	);
 }
diff --git a/frontend/src/providers/useSolidityContractProvider.tsx b/frontend/src/providers/useSolidityContractProvider.tsx
new file mode 100644
index 0000000..91fdadf
--- /dev/null
+++ b/frontend/src/providers/useSolidityContractProvider.tsx
@@ -0,0 +1,266 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import { IBallotContractGetResult, IBallotContractGetResultConverted } from 'contract/Interfaces';
+import { useStorageDBProviderHook } from 'providers/useStorageDBProvider';
+import { TypeInfuraData, TypeMetaMaskData } from 'hooks/useStorageDBHook';
+import useEthersHook from 'hooks/useEthersHook';
+
+interface IContextData {
+	states: {
+		healthCheck: {
+			isLoading: boolean;
+		};
+	};
+	actions: {
+		logout: () => Promise<void>;
+		connect: () => Promise<void>;
+		confirmVote: (candidateID: number) => Promise<void>;
+		abstainVote: () => Promise<void>;
+		getElectoralResult: () => Promise<TypeInfuraData>;
+	};
+}
+
+/**
+ * @thiagosaud
+ * @description This provider is exclusive because it controls the entire flow of interaction with the Smart Contract!
+ * @interface IContextData
+ */
+const CONTEXT_DEFAULT_DATA: IContextData = {
+	states: {
+		healthCheck: {
+			isLoading: true,
+		},
+	},
+	actions: {
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		logout: async (): Promise<void> => {},
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		connect: async (): Promise<void> => {},
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		confirmVote: async (): Promise<void> => {},
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		abstainVote: async (): Promise<void> => {},
+		getElectoralResult: async (): Promise<TypeInfuraData> => ({
+			candidates: [],
+			totalConfirmedVotes: 0,
+			confirmedVotes: [{ candidate: 0, electors: [], totalVotes: 0 }],
+			abstentionVotes: { electors: [], totalVotes: 0 },
+		}),
+	},
+};
+
+const CONTEXT = createContext<IContextData>(CONTEXT_DEFAULT_DATA);
+
+export default function SolidityContractProvider({ children }: { children: ReactNode }) {
+	const useEthers = useEthersHook();
+	const useStorageDBProvider = useStorageDBProviderHook();
+	const [isLoadingProvider, setIsLoadingProvider] = useState(CONTEXT_DEFAULT_DATA.states.healthCheck.isLoading);
+
+	const connect = useCallback(
+		() =>
+			new Promise<void>((resolve, reject) => {
+				const TOAST_OPTIONS = { toastId: 'connect', pauseOnFocusLoss: false };
+				const SMARTPHONE_BROWSER_TYPES = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i];
+				const IS_SMARTPHONE = SMARTPHONE_BROWSER_TYPES.some(type => navigator.userAgent.match(type));
+
+				if (IS_SMARTPHONE) {
+					toast.error('This DApp does not use WalletConnect for smartphone connection!', TOAST_OPTIONS);
+					reject();
+				}
+
+				if (!IS_SMARTPHONE && useEthers.actions.hasMetaMaskInstalled()) {
+					toast
+						.promise(
+							useEthers.actions.connect(),
+							{
+								pending: 'Waiting for connection to wallet...',
+								error: 'Oops, You canceled or have other connection with your wallet!',
+							},
+							TOAST_OPTIONS
+						)
+						.then(({ wallet }) => {
+							useStorageDBProvider.actions.addWalletInCache(wallet);
+							resolve();
+						})
+						.catch((error: DOMException) => reject(error));
+				}
+			}),
+		[useEthers, useStorageDBProvider]
+	);
+
+	const logout = useCallback(
+		(): Promise<void> =>
+			new Promise((resolve, reject) => {
+				try {
+					useStorageDBProvider.actions.deleteWalletCached();
+					resolve();
+				} catch (error) {
+					toast('Oops... There was a problem disconnecting the wallet!', { toastId: 'logout', type: 'error' });
+					reject(error);
+				}
+			}),
+		[useStorageDBProvider]
+	);
+
+	const getElectoralResultConverted = useCallback(
+		({
+			candidates,
+			totalConfirmedVotes,
+			abstentionVotes,
+			confirmedVotes,
+		}: IBallotContractGetResult): IBallotContractGetResultConverted => ({
+			totalConfirmedVotes: Number(totalConfirmedVotes._hex),
+			candidates: candidates.map(({ _hex }) => Number(_hex)),
+			confirmedVotes: confirmedVotes.map(({ candidate, electors, totalVotes }) => ({
+				electors,
+				candidate: Number(candidate._hex),
+				totalVotes: Number(totalVotes._hex),
+			})),
+			abstentionVotes: {
+				electors: abstentionVotes.electors,
+				totalVotes: Number(abstentionVotes.totalVotes._hex),
+			},
+		}),
+		[]
+	);
+
+	const getElectoralResult = useCallback(async (): Promise<TypeInfuraData> => {
+		try {
+			const DATA: IBallotContractGetResult = await useEthers.states.contract.infura.getResult();
+			const DATA_CONVERTED = getElectoralResultConverted(DATA);
+
+			useStorageDBProvider.actions.addElectoralResultInCache(DATA_CONVERTED);
+
+			return DATA_CONVERTED;
+		} catch (error) {
+			toast('Oops... There was an error loading the candidates, please try again!', { toastId: 'get-electoral-result', type: 'error' });
+			throw new Error();
+		}
+	}, [useEthers, useStorageDBProvider, getElectoralResultConverted]);
+
+	const confirmVote = useCallback(
+		async (candidateID: number) => {
+			try {
+				const SIGNER = useEthers.states.provider.web3?.getSigner();
+
+				if (!SIGNER) {
+					throw new Error('Signer is Undefined!');
+				}
+
+				const CONTRACT_SIGNER = useEthers.states.contract.web3.connect(SIGNER);
+				const ESTIMAGE_GAS = await toast.promise(
+					CONTRACT_SIGNER.estimateGas.confirmVote(candidateID),
+					{
+						pending: 'Estimating the Gas...',
+						success: 'Gas estimated successfully!',
+						error: 'Oops... There was a problem estimating gas, or you already voted!',
+					},
+					{ toastId: 'confirm-vote-estimate-gas', pauseOnFocusLoss: false }
+				);
+
+				await toast.promise(
+					useEthers.actions.sendTransaction(ESTIMAGE_GAS._hex, 'confirmVote', [candidateID]),
+					{
+						pending: 'Computing votes on the Blockchain...',
+						success: 'Vote computed successfully!',
+						error: 'Oops... There was a problem computing the vote!',
+					},
+					{ toastId: 'confirm-vote-send-transaction', pauseOnFocusLoss: false }
+				);
+			} catch (error) {
+				throw new Error();
+			}
+		},
+		[useEthers]
+	);
+
+	const abstainVote = useCallback(async () => {
+		try {
+			const SIGNER = useEthers.states.provider.web3?.getSigner();
+
+			if (!SIGNER) {
+				throw new Error('Signer is Undefined!');
+			}
+
+			const CONTRACT_SIGNER = useEthers.states.contract.web3?.connect(SIGNER);
+
+			const ESTIMAGE_GAS = await toast.promise(
+				CONTRACT_SIGNER.estimateGas.abstainVote(),
+				{
+					pending: 'Estimating the Gas...',
+					success: 'Gas estimated successfully!',
+					error: 'Oops... There was a problem estimating gas, or you already voted!',
+				},
+				{ toastId: 'confirm-vote-estimate-gas', pauseOnFocusLoss: false }
+			);
+
+			await toast.promise(
+				useEthers.actions.sendTransaction(ESTIMAGE_GAS._hex, 'abstainVote', []),
+				{
+					pending: 'Computing votes on the Blockchain...',
+					success: 'Vote computed successfully!',
+					error: 'Oops... There was a problem computing the vote!',
+				},
+				{ toastId: 'confirm-vote-send-transaction', pauseOnFocusLoss: false }
+			);
+		} catch (error) {
+			throw new Error();
+		}
+	}, [useEthers]);
+
+	const value: IContextData = useMemo(
+		() => ({
+			states: {
+				healthCheck: {
+					isLoading: isLoadingProvider,
+				},
+			},
+			actions: {
+				connect,
+				logout,
+				confirmVote,
+				abstainVote,
+				getElectoralResult,
+			},
+		}),
+		[isLoadingProvider, connect, logout, confirmVote, abstainVote, getElectoralResult]
+	);
+
+	useEffect(() => {
+		useEthers.actions
+			.loadingProvider()
+			.then(metamaskProvider => {
+				metamaskProvider.on(useEthers.events.changed.accounts, accounts =>
+					useStorageDBProvider.actions.addWalletInCache((accounts as TypeMetaMaskData[])[0] as TypeMetaMaskData)
+				);
+
+				metamaskProvider.on(useEthers.events.changed.chain, chainID => {
+					if (!useEthers.actions.isGoerliNetwork(chainID as string)) {
+						toast('Attention, only use the GOERLI network!', { toastId: useEthers.events.changed.chain, type: 'warning' });
+					}
+				});
+
+				useEthers.states.contract.web3?.on('LogElectorVote', (_, electoralResult: IBallotContractGetResult) => {
+					const DATA_CONVERTED = getElectoralResultConverted(electoralResult);
+					useStorageDBProvider.actions.addElectoralResultInCache(DATA_CONVERTED);
+				});
+
+				return () => {
+					metamaskProvider.removeAllListeners();
+				};
+			})
+			.finally(() => setIsLoadingProvider(false));
+	}, [useEthers, useStorageDBProvider, getElectoralResultConverted]);
+
+	return <CONTEXT.Provider value={value}>{children}</CONTEXT.Provider>;
+}
+
+export const useSolidityContractProviderHook = () => {
+	const CONTEXT_HOOK = useContext(CONTEXT);
+
+	if (!CONTEXT_HOOK) {
+		throw new Error('useSolidityContractProviderHook must be used within an SolidityContractProvider.');
+	}
+
+	return CONTEXT_HOOK;
+};
diff --git a/frontend/src/providers/useStorageDBProvider.tsx b/frontend/src/providers/useStorageDBProvider.tsx
new file mode 100644
index 0000000..c8c37cb
--- /dev/null
+++ b/frontend/src/providers/useStorageDBProvider.tsx
@@ -0,0 +1,122 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import useStorageDBHook, {
+	TypeInfuraData,
+	TypeInfuraStorageData,
+	TypeMetaMaskData,
+	TypeMetaMaskStorageData,
+	TypeStorageKey,
+} from 'hooks/useStorageDBHook';
+
+interface IContextData {
+	healthCheck: {
+		isLoading: boolean;
+	};
+	dataCached: {
+		infura: TypeInfuraStorageData;
+		metamask: TypeMetaMaskStorageData;
+	};
+	actions: {
+		addWalletInCache: (wallet: TypeMetaMaskData) => void;
+		addElectoralResultInCache: (result: TypeInfuraData) => void;
+		deleteWalletCached: () => void;
+	};
+}
+
+const CONTEXT_DEFAULT_DATA: IContextData = {
+	healthCheck: {
+		isLoading: true,
+	},
+	dataCached: {
+		infura: null,
+		metamask: null,
+	},
+	actions: {
+		// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, no-unused-vars
+		addWalletInCache: (wallet: TypeMetaMaskData) => {},
+		// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, no-unused-vars
+		addElectoralResultInCache: (result: TypeInfuraData) => {},
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		deleteWalletCached: () => {},
+	},
+};
+
+const CONTEXT = createContext<IContextData>(CONTEXT_DEFAULT_DATA);
+
+/**
+ * @thiagosaud
+ * @description This provider is unique because it controls the entire Caching flow in LocalStorage!
+ * @interface IContextData
+ */
+export default function StorageDBProvider({ children }: { children: ReactNode }) {
+	const { connect, update, remove } = useStorageDBHook();
+	const [isLoading, updateIsLoading] = useState(CONTEXT_DEFAULT_DATA.healthCheck.isLoading);
+	const [infuraData, updateInfuraData] = useState<TypeInfuraStorageData>(CONTEXT_DEFAULT_DATA.dataCached.infura);
+	const [metamaskData, updateMetaMaskData] = useState<TypeMetaMaskStorageData>(CONTEXT_DEFAULT_DATA.dataCached.metamask);
+
+	const addWalletInCache = useCallback((wallet: TypeMetaMaskData) => update('@metamask', wallet), [update]);
+	const addElectoralResultInCache = useCallback((result: TypeInfuraData) => update('@infura-provider', result), [update]);
+
+	const deleteWalletCached = useCallback(() => remove('@metamask'), [remove]);
+
+	const value: IContextData = useMemo(
+		() => ({
+			healthCheck: {
+				isLoading,
+			},
+			dataCached: {
+				infura: infuraData,
+				metamask: metamaskData,
+			},
+			actions: {
+				addWalletInCache,
+				addElectoralResultInCache,
+				deleteWalletCached,
+			},
+		}),
+		[isLoading, infuraData, metamaskData, addWalletInCache, addElectoralResultInCache, deleteWalletCached]
+	);
+
+	useEffect(() => {
+		connect()
+			.then(response => {
+				updateInfuraData(response.infuraData);
+				updateMetaMaskData(response.metamaskData);
+				updateIsLoading(false);
+
+				window.onstorage = ({ key, newValue }) => {
+					if (key) {
+						const STORAGE_KEY = key as TypeStorageKey;
+
+						if (STORAGE_KEY === '@metamask') {
+							updateMetaMaskData(newValue as TypeMetaMaskStorageData);
+						}
+
+						if (STORAGE_KEY === '@infura-provider') {
+							const STORAGE_DATA = newValue ? (JSON.parse(newValue) as TypeInfuraStorageData) : null;
+							updateInfuraData(STORAGE_DATA);
+						}
+					}
+				};
+			})
+			.catch(() => {
+				toast('Oops... There was a problem loading the database, please try again!', { toastId: 'loading-database', type: 'error' });
+			});
+
+		return () => {
+			window.onstorage = null;
+		};
+	}, [connect, updateIsLoading]);
+
+	return <CONTEXT.Provider value={value}>{children}</CONTEXT.Provider>;
+}
+
+export const useStorageDBProviderHook = () => {
+	const CONTEXT_HOOK = useContext(CONTEXT);
+
+	if (!CONTEXT_HOOK) {
+		throw new Error('useStorageDBProviderHook must be used within an StorageDBProvider.');
+	}
+
+	return CONTEXT_HOOK;
+};
diff --git a/frontend/src/templates/LoadingTemplate/index.test.tsx b/frontend/src/templates/LoadingTemplate/index.test.tsx
new file mode 100644
index 0000000..4b2d2f6
--- /dev/null
+++ b/frontend/src/templates/LoadingTemplate/index.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import LoadingTemplate from 'templates/LoadingTemplate';
+
+describe('[LOADING TEMPLATE] - Testing Component', () => {
+	test('Should be have childrens!', () => {
+		render(<LoadingTemplate />);
+		expect(screen.getAllByTestId(/wrapper/i)[0]).toBeInTheDocument();
+		expect(screen.getAllByTestId(/wrapper-logotype/i)[0]).toBeInTheDocument();
+		expect(screen.getByRole(/img/i)).toBeInTheDocument();
+		expect(screen.getByText(/© All rights reserved by/i)).toBeInTheDocument();
+	});
+});
+
+describe('[LOADING TEMPLATE] - Testing Component Styles', () => {
+	test('Should be have Wrapper Styles!', async () => {
+		render(<LoadingTemplate />);
+		expect(screen.getAllByTestId('wrapper')[0]).toHaveStyle({
+			position: 'absolute',
+			display: 'flex',
+			'flex-direction': 'column',
+			'align-items': 'center',
+			'justify-content': 'center',
+			height: '100%',
+		});
+	});
+
+	test('Should be have Wrapper Logotype Styles!', async () => {
+		render(<LoadingTemplate />);
+		expect(screen.getAllByTestId('wrapper-logotype')[0]).toHaveStyle({
+			'margin-right': '30px',
+		});
+	});
+});
diff --git a/frontend/src/templates/LoadingTemplate/index.tsx b/frontend/src/templates/LoadingTemplate/index.tsx
new file mode 100644
index 0000000..be042c2
--- /dev/null
+++ b/frontend/src/templates/LoadingTemplate/index.tsx
@@ -0,0 +1,38 @@
+import { Container } from 'react-bootstrap';
+import LogotypeUtil from 'components/Utils/LogotypeUtil';
+import LoadingUtil from 'components/Utils/LoadingUtil';
+import FooterbarGlobal from 'components/Globals/FooterbarGlobal';
+import styled from 'styled-components';
+
+const Wrapper = styled(Container).attrs({ fluid: true })`
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+`;
+
+const WrapperLogotype = styled.div`
+	margin-right: 30px;
+`;
+
+/**
+ * @thiagosaud
+ * @description This component is unique for controlling the Global Default Loading!
+ */
+export default function LoadingTemplate() {
+	return (
+		<Wrapper data-testid='wrapper'>
+			<WrapperLogotype data-testid='wrapper-logotype'>
+				<LogotypeUtil size='md' />
+			</WrapperLogotype>
+
+			<LoadingUtil />
+
+			<div>
+				<FooterbarGlobal />
+			</div>
+		</Wrapper>
+	);
+}
diff --git a/frontend/src/templates/TemplatePage/index.test.tsx b/frontend/src/templates/PageTemplate/index.test.tsx
similarity index 75%
rename from frontend/src/templates/TemplatePage/index.test.tsx
rename to frontend/src/templates/PageTemplate/index.test.tsx
index 9c4d394..1f521a8 100644
--- a/frontend/src/templates/TemplatePage/index.test.tsx
+++ b/frontend/src/templates/PageTemplate/index.test.tsx
@@ -1,15 +1,15 @@
 import TestRenderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
-import TemplatePage from '.';
+import TemplatePage from 'templates/PageTemplate';
 
-describe('[TEMPLATE PAGE] - Testing Component', () => {
+describe('[PAGE TEMPLATE] - Testing Component', () => {
 	test('Should be have children!', () => {
 		const { root } = TestRenderer.create(<TemplatePage>Testing...</TemplatePage>);
 		expect(root.props).toHaveProperty('children');
 	});
 });
 
-describe('[TEMPLATE PAGE] - Testing Component Styles', () => {
+describe('[PAGE TEMPLATE] - Testing Component Styles', () => {
 	test('Should be have Height and Margin-Top!', async () => {
 		render(<TemplatePage>Testing...</TemplatePage>);
 		expect(screen.getByTestId('custom-container-component')).toHaveStyle({
diff --git a/frontend/src/templates/TemplatePage/index.tsx b/frontend/src/templates/PageTemplate/index.tsx
similarity index 75%
rename from frontend/src/templates/TemplatePage/index.tsx
rename to frontend/src/templates/PageTemplate/index.tsx
index 9f0f22b..0ffac93 100644
--- a/frontend/src/templates/TemplatePage/index.tsx
+++ b/frontend/src/templates/PageTemplate/index.tsx
@@ -11,6 +11,11 @@ interface IProps {
 	children: ReactNode;
 }
 
+/**
+ * @thiagosaud
+ * @description This component is unique for controlling the Default Container of all pages!
+ * @interface IProps
+ */
 export default function PageTemplate({ children }: IProps) {
 	return <CustomContainer data-testid='custom-container-component'>{children}</CustomContainer>;
 }
diff --git a/frontend/src/utils/LazyLoadingComponents.test.tsx b/frontend/src/utils/LazyLoadingComponents.test.tsx
new file mode 100644
index 0000000..f639635
--- /dev/null
+++ b/frontend/src/utils/LazyLoadingComponents.test.tsx
@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import CANDIDATE_LIST_MOCKED_DATA from '__test__/mocks/CandidateListMock';
+import VOTE_PROGRESS_BAR_UTIL_MOCKED_DATA from '__test__/mocks/VoteProgressBarUtilMock';
+import VOTE_PROGRESS_TITLE_UTIL_MOCKED_DATA from '__test__/mocks/VoteProgressTitleUtilMock';
+import {
+	LazyAbstainVoteButton,
+	LazyConnectWalletButton,
+	LazyConnectedWalletButton,
+	LazyCandidateList,
+	LazyVoteProgressBarUtil,
+	LazyVoteProgressTitleUtil,
+} from 'utils/LazyLoadingComponents';
+
+const handleOnClick = jest.fn();
+
+describe('[LAZY LOADING COMPONENTS] Testing Components...', () => {
+	test('Should have and work the Abstain Vote Button!', async () => {
+		const { baseElement } = render(<LazyAbstainVoteButton onAbstainVote={handleOnClick} isDisabled />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+
+	test('Should have and work the Connect Wallet Button!', () => {
+		const { baseElement } = render(<LazyConnectWalletButton onConnect={handleOnClick} isDisabled />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+
+	test('Should have and work the Connected Wallet Button!', () => {
+		const { baseElement } = render(<LazyConnectedWalletButton onLogout={handleOnClick} wallet='' isDisabled />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+
+	test('Should have and work the Candidate List!', () => {
+		const { baseElement } = render(<LazyCandidateList onConfirmVote={handleOnClick} data={CANDIDATE_LIST_MOCKED_DATA} hasVoted />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+
+	test('Should have and work the Vote Progress Bar Util!', () => {
+		const { baseElement } = render(<LazyVoteProgressBarUtil votes={VOTE_PROGRESS_BAR_UTIL_MOCKED_DATA.votes} />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+
+	test('Should have and work the Vote Progress Title Util!', () => {
+		const { baseElement } = render(<LazyVoteProgressTitleUtil {...VOTE_PROGRESS_TITLE_UTIL_MOCKED_DATA} />);
+		expect(baseElement).toBeInTheDocument();
+		expect(baseElement).toBeEnabled();
+	});
+});
diff --git a/frontend/src/utils/LazyLoadingComponents.tsx b/frontend/src/utils/LazyLoadingComponents.tsx
new file mode 100644
index 0000000..0bcf729
--- /dev/null
+++ b/frontend/src/utils/LazyLoadingComponents.tsx
@@ -0,0 +1,62 @@
+import { lazy } from 'react';
+
+/**
+ * @thiagosaud
+ * @description This file is unique for controlling the creation of components with LazyLoading!
+ */
+
+const ONE_SECOND = 1000;
+
+export const LazyConnectWalletButton = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "ConnectWalletButton" */ 'components/Buttons/ConnectWalletButton'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
+
+export const LazyConnectedWalletButton = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "ConnectedWalletButton" */ 'components/Buttons/ConnectedWalletButton'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
+
+export const LazyAbstainVoteButton = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "AbstainVoteButton" */ 'components/Buttons/AbstainVoteButton'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
+
+export const LazyCandidateList = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "CandidateList" */ 'components/Lists/CandidateList'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
+
+export const LazyVoteProgressBarUtil = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "VoteProgressBarUtil" */ 'components/Utils/VoteProgressBarUtil'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
+
+export const LazyVoteProgressTitleUtil = lazy(() =>
+	Promise.all([
+		import(/* webpackChunkName: "VoteProgressTitleUtil" */ 'components/Utils/VoteProgressTitleUtil'),
+		new Promise(resolve => {
+			setTimeout(resolve, ONE_SECOND);
+		}),
+	]).then(([moduleExports]) => moduleExports)
+);
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 594c00a..61ee8f9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1050,6 +1050,13 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
+"@babel/runtime@^7.20.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1237,6 +1244,348 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@ethersproject/abi@5.7.0", "@ethersproject/abi@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.7.0.tgz#b3f3e045bbbeed1af3947335c247ad625a44e449"
+  integrity sha512-351ktp42TiRcYB3H1OP8yajPeAQstMW/yCFokj/AthP9bLHzQFPlOrxOcwYEDkUAICmOHljvN4K39OMTMUa9RA==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/abstract-provider@5.7.0", "@ethersproject/abstract-provider@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.7.0.tgz#b0a8550f88b6bf9d51f90e4795d48294630cb9ef"
+  integrity sha512-R41c9UkchKCpAqStMYUpdunjo3pkEvZC3FAwZn5S5MGbXoMQOHIdHItezTETxAO5bevtMApSyEhn9+CHcDsWBw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+
+"@ethersproject/abstract-signer@5.7.0", "@ethersproject/abstract-signer@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.7.0.tgz#13f4f32117868452191a4649723cb086d2b596b2"
+  integrity sha512-a16V8bq1/Cz+TGCkE2OPMTOUDLS3grCpdjoJCYNnVBbdYEMSgKrU0+B90s8b6H+ByYTBZN7a3g76jdIJi7UfKQ==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/address@5.7.0", "@ethersproject/address@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.7.0.tgz#19b56c4d74a3b0a46bfdbb6cfcc0a153fc697f37"
+  integrity sha512-9wYhYt7aghVGo758POM5nqcOMaE168Q6aRLJZwUmiqSrAungkG74gSSeKEIR7ukixesdRZGPgVqme6vmxs1fkA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+
+"@ethersproject/base64@5.7.0", "@ethersproject/base64@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.7.0.tgz#ac4ee92aa36c1628173e221d0d01f53692059e1c"
+  integrity sha512-Dr8tcHt2mEbsZr/mwTPIQAf3Ai0Bks/7gTw9dSqk1mQvhW3XvRlmDJr/4n+wg1JmCl16NZue17CDh8xb/vZ0sQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+
+"@ethersproject/basex@5.7.0", "@ethersproject/basex@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.7.0.tgz#97034dc7e8938a8ca943ab20f8a5e492ece4020b"
+  integrity sha512-ywlh43GwZLv2Voc2gQVTKBoVQ1mti3d8HK5aMxsfu/nRDnMmNqaSJ3r3n85HBByT8OpoY96SXM1FogC533T4zw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/bignumber@5.7.0", "@ethersproject/bignumber@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
+  integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    bn.js "^5.2.1"
+
+"@ethersproject/bytes@5.7.0", "@ethersproject/bytes@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
+  integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/constants@5.7.0", "@ethersproject/constants@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.7.0.tgz#df80a9705a7e08984161f09014ea012d1c75295e"
+  integrity sha512-DHI+y5dBNvkpYUMiRQyxRBYBefZkJfo70VUkUAsRjcPs47muV9evftfZ0PJVCXYbAiCgght0DtcF9srFQmIgWA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+
+"@ethersproject/contracts@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.7.0.tgz#c305e775abd07e48aa590e1a877ed5c316f8bd1e"
+  integrity sha512-5GJbzEU3X+d33CdfPhcyS+z8MzsTrBGk/sc+G+59+tPa9yFkl6HQ9D6L0QMgNTA9q8dT0XKxxkyp883XsQvbbg==
+  dependencies:
+    "@ethersproject/abi" "^5.7.0"
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+
+"@ethersproject/hash@5.7.0", "@ethersproject/hash@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.7.0.tgz#eb7aca84a588508369562e16e514b539ba5240a7"
+  integrity sha512-qX5WrQfnah1EFnO5zJv1v46a8HW0+E5xuBBDTwMFZLuVTx0tbU2kkx15NqdjxecrLGatQN9FGQKpb1FKdHCt+g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/hdnode@5.7.0", "@ethersproject/hdnode@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.7.0.tgz#e627ddc6b466bc77aebf1a6b9e47405ca5aef9cf"
+  integrity sha512-OmyYo9EENBPPf4ERhR7oj6uAtUAhYGqOnIS+jE5pTXvdKBS99ikzq1E7Iv0ZQZ5V36Lqx1qZLeak0Ra16qpeOg==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/json-wallets@5.7.0", "@ethersproject/json-wallets@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.7.0.tgz#5e3355287b548c32b368d91014919ebebddd5360"
+  integrity sha512-8oee5Xgu6+RKgJTkvEMl2wDgSPSAQ9MB/3JYjFV9jlKvcYHUXZC+cQp0njgmxdHkYWn8s6/IqIZYm0YWCjO/0g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    aes-js "3.0.0"
+    scrypt-js "3.0.1"
+
+"@ethersproject/keccak256@5.7.0", "@ethersproject/keccak256@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
+  integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/logger@5.7.0", "@ethersproject/logger@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
+  integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
+
+"@ethersproject/networks@5.7.1", "@ethersproject/networks@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.7.1.tgz#118e1a981d757d45ccea6bb58d9fd3d9db14ead6"
+  integrity sha512-n/MufjFYv3yFcUyfhnXotyDlNdFb7onmkSy8aQERi2PjNcnWQ66xXxa3XlS8nCcA8aJKJjIIMNJTC7tu80GwpQ==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/pbkdf2@5.7.0", "@ethersproject/pbkdf2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.7.0.tgz#d2267d0a1f6e123f3771007338c47cccd83d3102"
+  integrity sha512-oR/dBRZR6GTyaofd86DehG72hY6NpAjhabkhxgr3X2FpJtJuodEl2auADWBZfhDHgVCbu3/H/Ocq2uC6dpNjjw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+
+"@ethersproject/properties@5.7.0", "@ethersproject/properties@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.7.0.tgz#a6e12cb0439b878aaf470f1902a176033067ed30"
+  integrity sha512-J87jy8suntrAkIZtecpxEPxY//szqr1mlBaYlQ0r4RCaiD2hjheqF9s1LVE8vVuJCXisjIP+JgtK/Do54ej4Sw==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/providers@5.7.2":
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.2.tgz#f8b1a4f275d7ce58cf0a2eec222269a08beb18cb"
+  integrity sha512-g34EWZ1WWAVgr4aptGlVBF8mhl3VWjv+8hoAnzStu8Ah22VHBsuGzP17eb6xDVRzw895G4W7vvx60lFFur/1Rg==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+    bech32 "1.1.4"
+    ws "7.4.6"
+
+"@ethersproject/random@5.7.0", "@ethersproject/random@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.7.0.tgz#af19dcbc2484aae078bb03656ec05df66253280c"
+  integrity sha512-19WjScqRA8IIeWclFme75VMXSBvi4e6InrUNuaR4s5pTF2qNhcGdCUwdxUVGtDDqC00sDLCO93jPQoDUH4HVmQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/rlp@5.7.0", "@ethersproject/rlp@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.7.0.tgz#de39e4d5918b9d74d46de93af80b7685a9c21304"
+  integrity sha512-rBxzX2vK8mVF7b0Tol44t5Tb8gomOHkj5guL+HhzQ1yBh/ydjGnpw6at+X6Iw0Kp3OzzzkcKp8N9r0W4kYSs9w==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
+  integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    hash.js "1.1.7"
+
+"@ethersproject/signing-key@5.7.0", "@ethersproject/signing-key@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.7.0.tgz#06b2df39411b00bc57c7c09b01d1e41cf1b16ab3"
+  integrity sha512-MZdy2nL3wO0u7gkB4nA/pEf8lu1TlFswPNmy8AiYkfKTdO6eXBJyUdmHO/ehm/htHw9K/qF8ujnTyUAD+Ry54Q==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    bn.js "^5.2.1"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+
+"@ethersproject/solidity@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.7.0.tgz#5e9c911d8a2acce2a5ebb48a5e2e0af20b631cb8"
+  integrity sha512-HmabMd2Dt/raavyaGukF4XxizWKhKQ24DoLtdNbBmNKUOPqwjsKQSdV9GQtj9CBEea9DlzETlVER1gYeXXBGaA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/strings@5.7.0", "@ethersproject/strings@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.7.0.tgz#54c9d2a7c57ae8f1205c88a9d3a56471e14d5ed2"
+  integrity sha512-/9nu+lj0YswRNSH0NXYqrh8775XNyEdUQAuf3f+SmOrnVewcJ5SBNAjF7lpgehKi4abvNNXyf+HX86czCdJ8Mg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/transactions@5.7.0", "@ethersproject/transactions@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.7.0.tgz#91318fc24063e057885a6af13fdb703e1f993d3b"
+  integrity sha512-kmcNicCp1lp8qanMTC3RIikGgoJ80ztTyvtsFvCYpSCfkjhD0jZ2LOrnbcuxuToLIUYYf+4XwD1rP+B/erDIhQ==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+
+"@ethersproject/units@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.7.0.tgz#637b563d7e14f42deeee39245275d477aae1d8b1"
+  integrity sha512-pD3xLMy3SJu9kG5xDGI7+xhTEmGXlEqXU4OfNapmfnxLVY4EMSSRp7j1k7eezutBPH7RBN/7QPnwR7hzNlEFeg==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/wallet@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.7.0.tgz#4e5d0790d96fe21d61d38fb40324e6c7ef350b2d"
+  integrity sha512-MhmXlJXEJFBFVKrDLB4ZdDzxcBxQ3rLyCkhNqVu3CDYvR97E+8r01UgrI+TI99Le+aYm/in/0vp86guJuM7FCA==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/json-wallets" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/web@5.7.1", "@ethersproject/web@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.7.1.tgz#de1f285b373149bee5928f4eb7bcb87ee5fbb4ae"
+  integrity sha512-Gueu8lSvyjBWL4cYsWsjh6MtMwM0+H4HvqFPZfB6dV8ctbP9zFAO73VG1cMWae0FLPCtz0peKPpZY8/ugJJX2w==
+  dependencies:
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/wordlists@5.7.0", "@ethersproject/wordlists@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.7.0.tgz#8fb2c07185d68c3e09eb3bfd6e779ba2774627f5"
+  integrity sha512-S2TFNJNfHWVHNE6cNDjbVlZ6MgE17MIxMbMg2zv3wn+3XSJGosL1m9ZVv3GXCf/2ymSsQ+hRI5IzoMJTG6aoVA==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
 "@humanwhocodes/config-array@^0.10.5":
   version "0.10.6"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.6.tgz#70b53559baf544dc2cc5eea6082bf90467ccb1dc"
@@ -1566,6 +1915,50 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@metamask/detect-provider@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/detect-provider/-/detect-provider-2.0.0.tgz#4bc2795e5e6f7d8b84b2e845058d2f222c99917d"
+  integrity sha512-sFpN+TX13E9fdBDh9lvQeZdJn4qYoRb/6QF2oZZK/Pn559IhCFacPMU1rMuqyXoFQF3JSJfii2l98B87QDPeCQ==
+
+"@metamask/object-multiplex@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-1.2.0.tgz#38fc15c142f61939391e1b9a8eed679696c7e4f4"
+  integrity sha512-hksV602d3NWE2Q30Mf2Np1WfVKaGqfJRy9vpHAmelbaD0OkDt06/0KQkRR6UVYdMbTbkuEu8xN5JDUU80inGwQ==
+  dependencies:
+    end-of-stream "^1.4.4"
+    once "^1.4.0"
+    readable-stream "^2.3.3"
+
+"@metamask/onboarding@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@metamask/onboarding/-/onboarding-1.0.1.tgz#14a36e1e175e2f69f09598e2008ab6dc1b3297e6"
+  integrity sha512-FqHhAsCI+Vacx2qa5mAFcWNSrTcVGMNjzxVgaX8ECSny/BJ9/vgXP9V7WF/8vb9DltPeQkxr+Fnfmm6GHfmdTQ==
+  dependencies:
+    bowser "^2.9.0"
+
+"@metamask/providers@^10.2.1":
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.1.tgz#61304940adeccc7421dcda30ffd1d834273cc77b"
+  integrity sha512-p2TXw2a1Nb8czntDGfeIYQnk4LLVbd5vlcb3GY//lylYlKdSqp+uUTegCvxiFblRDOT68jsY8Ib1VEEzVUOolA==
+  dependencies:
+    "@metamask/object-multiplex" "^1.1.0"
+    "@metamask/safe-event-emitter" "^2.0.0"
+    "@types/chrome" "^0.0.136"
+    detect-browser "^5.2.0"
+    eth-rpc-errors "^4.0.2"
+    extension-port-stream "^2.0.1"
+    fast-deep-equal "^2.0.1"
+    is-stream "^2.0.0"
+    json-rpc-engine "^6.1.0"
+    json-rpc-middleware-stream "^4.2.1"
+    pump "^3.0.0"
+    webextension-polyfill-ts "^0.25.0"
+
+"@metamask/safe-event-emitter@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
+  integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -1948,6 +2341,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/chrome@^0.0.136":
+  version "0.0.136"
+  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.136.tgz#7c011b9f997b0156f25a140188a0c5689d3f368f"
+  integrity sha512-XDEiRhLkMd+SB7Iw3ZUIj/fov3wLd4HyTdLltVszkgl1dBfc3Rb7oPMVZ2Mz2TLqnF7Ow+StbR8E7r9lqpb4DA==
+  dependencies:
+    "@types/filesystem" "*"
+    "@types/har-format" "*"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -2013,6 +2414,18 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/filesystem@*":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
+  integrity sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==
+  dependencies:
+    "@types/filewriter" "*"
+
+"@types/filewriter@*":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee"
+  integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -2020,6 +2433,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/har-format@*":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.10.tgz#7b4e1e0ada4d17684ac3b05d601a4871cfab11fc"
+  integrity sha512-o0J30wqycjF5miWDKYKKzzOU1ZTLuA42HZ4HE7/zqTOc/jTLdQ5NhYWvsRQo45Nfi1KHoRdNhteSI4BAxTF1Pg==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2548,6 +2966,11 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+aes-js@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -2961,6 +3384,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+bech32@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
+  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -2986,6 +3414,16 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
 body-parser@1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
@@ -3024,6 +3462,11 @@ bootstrap@^5.2.2:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.2.tgz#834e053eed584a65e244d8aa112a6959f56e27a0"
   integrity sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==
 
+bowser@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3046,6 +3489,11 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
+
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -3249,6 +3697,11 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3344,6 +3797,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+complex.js@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/complex.js/-/complex.js-2.1.1.tgz#0675dac8e464ec431fb2ab7d30f41d889fb25c31"
+  integrity sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==
+
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -3733,6 +4191,11 @@ decimal.js@^10.2.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.1.tgz#be75eeac4a2281aace80c1a8753587c27ef053e7"
   integrity sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==
 
+decimal.js@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -3798,6 +4261,11 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-browser@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
+  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -3996,6 +4464,19 @@ electron-to-chromium@^1.4.251:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.268.tgz#5a902075f0209a628837e508a66d40ace04d54ab"
   integrity sha512-PO90Bv++vEzdln+eA9qLg1IRnh0rKETus6QkTzcFm5P3Wg3EQBZud5dcnzkpYXuIKWBjKe5CO8zjz02cicvn1g==
 
+elliptic@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emittery@^0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
@@ -4026,6 +4507,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+end-of-stream@^1.1.0, end-of-stream@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -4119,6 +4607,11 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
+escape-latex@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/escape-latex/-/escape-latex-1.2.0.tgz#07c03818cf7dac250cce517f4fda1b001ef2bca1"
+  integrity sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -4541,6 +5034,49 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+eth-rpc-errors@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-4.0.3.tgz#6ddb6190a4bf360afda82790bb7d9d5e724f423a"
+  integrity sha512-Z3ymjopaoft7JDoxZcEb3pwdGh7yiYMhOwm2doUt6ASXlMavpNlK6Cre0+IMl2VSGyEU9rkiperQhp5iRxn5Pg==
+  dependencies:
+    fast-safe-stringify "^2.0.6"
+
+ethers@^5.7.2:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
+  integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
+  dependencies:
+    "@ethersproject/abi" "5.7.0"
+    "@ethersproject/abstract-provider" "5.7.0"
+    "@ethersproject/abstract-signer" "5.7.0"
+    "@ethersproject/address" "5.7.0"
+    "@ethersproject/base64" "5.7.0"
+    "@ethersproject/basex" "5.7.0"
+    "@ethersproject/bignumber" "5.7.0"
+    "@ethersproject/bytes" "5.7.0"
+    "@ethersproject/constants" "5.7.0"
+    "@ethersproject/contracts" "5.7.0"
+    "@ethersproject/hash" "5.7.0"
+    "@ethersproject/hdnode" "5.7.0"
+    "@ethersproject/json-wallets" "5.7.0"
+    "@ethersproject/keccak256" "5.7.0"
+    "@ethersproject/logger" "5.7.0"
+    "@ethersproject/networks" "5.7.1"
+    "@ethersproject/pbkdf2" "5.7.0"
+    "@ethersproject/properties" "5.7.0"
+    "@ethersproject/providers" "5.7.2"
+    "@ethersproject/random" "5.7.0"
+    "@ethersproject/rlp" "5.7.0"
+    "@ethersproject/sha2" "5.7.0"
+    "@ethersproject/signing-key" "5.7.0"
+    "@ethersproject/solidity" "5.7.0"
+    "@ethersproject/strings" "5.7.0"
+    "@ethersproject/transactions" "5.7.0"
+    "@ethersproject/units" "5.7.0"
+    "@ethersproject/wallet" "5.7.0"
+    "@ethersproject/web" "5.7.1"
+    "@ethersproject/wordlists" "5.7.0"
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -4629,6 +5165,18 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+extension-port-stream@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extension-port-stream/-/extension-port-stream-2.0.1.tgz#d374820c581418c2275d3c4439ade0b82c4cfac6"
+  integrity sha512-ltrv4Dh/979I04+D4Te6TFygfRSOc5EBzzlHRldWMS8v73V80qWluxH88hqF0qyUsBXTb8NmzlmSipcre6a+rg==
+  dependencies:
+    webextension-polyfill-ts "^0.22.0"
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -4660,6 +5208,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-safe-stringify@^2.0.6:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
+  integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
+
 fastest-levenshtein@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
@@ -5097,11 +5650,28 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -5345,7 +5915,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5631,6 +6201,11 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
+
 jest-changed-files@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
@@ -6170,6 +6745,11 @@ js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.4.tgz#78793c90f80e8430b7d8dc94515b6c77d98a26a6"
   integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -6243,6 +6823,22 @@ json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
+json-rpc-engine@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-6.1.0.tgz#bf5ff7d029e1c1bf20cb6c0e9f348dcd8be5a393"
+  integrity sha512-NEdLrtrq1jUZyfjkr9OCz9EzCNhnRyWtt1PAnvnhwy6e8XETS0Dtc+ZNCO2gvuAoKsIn2+vCSowXTYE4CkgnAQ==
+  dependencies:
+    "@metamask/safe-event-emitter" "^2.0.0"
+    eth-rpc-errors "^4.0.2"
+
+json-rpc-middleware-stream@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.2.1.tgz#e5cb8795ebfd7503c6ceaa43daaf065687cc2f22"
+  integrity sha512-6QKayke/8lg0nTjOpRCq4JCgRx7bVybldmloIfY21HSDV0GUevcV9i8DJNvuKTJx4KR9EDIf6HTStAnEovGUvA==
+  dependencies:
+    "@metamask/safe-event-emitter" "^2.0.0"
+    readable-stream "^2.3.3"
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -6493,6 +7089,21 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+mathjs@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-11.5.0.tgz#5cacad7affa2c804ad3f09efa5d53f0ffcb79493"
+  integrity sha512-vJ/+SqWtxjW6/aeDRt8xL3TlOVKqwN15BIyTGVqGbIWuiqgY4SxZ0yLuna82YH9CB757iFP7uJ4m3KvVBX7Qcg==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+    complex.js "^2.1.1"
+    decimal.js "^10.4.3"
+    escape-latex "^1.2.0"
+    fraction.js "^4.2.0"
+    javascript-natural-sort "^0.7.1"
+    seedrandom "^3.0.5"
+    tiny-emitter "^2.1.0"
+    typed-function "^4.1.0"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -6600,11 +7211,16 @@ mini-css-extract-plugin@^2.4.5:
   dependencies:
     schema-utils "^4.0.0"
 
-minimalistic-assert@^1.0.0:
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
 minimatch@3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -6866,7 +7482,7 @@ on-headers@~1.0.2:
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@@ -7778,6 +8394,14 @@ psl@^1.1.33:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -7924,6 +8548,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-icons@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
+  integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -7944,11 +8573,6 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -8041,6 +8665,13 @@ react-test-renderer@^18.2.0:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.0"
 
+react-toastify@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b"
+  integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.4.2:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -8084,7 +8715,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.0.1:
+readable-stream@^2.0.1, readable-stream@^2.3.3:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -8152,6 +8783,11 @@ regenerator-runtime@^0.13.10:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
   integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -8444,6 +9080,11 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
+scrypt-js@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
+  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
+
 scslre@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/scslre/-/scslre-0.1.6.tgz#71a2832e4bf3a9254973a04fbed90aec94f75757"
@@ -8453,6 +9094,11 @@ scslre@^0.1.6:
     regexp-ast-analysis "^0.2.3"
     regexpp "^3.2.0"
 
+seedrandom@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -9249,6 +9895,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-glob@^0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
@@ -9397,6 +10048,11 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed-function@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-4.1.0.tgz#da4bdd8a6d19a89e22732f75e4a410860aaf9712"
+  integrity sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -9612,6 +10268,25 @@ web-vitals@^3.0.2:
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.0.2.tgz#a484109dc5d64bc4924f174267ce20e7cd4c7934"
   integrity sha512-YygzeCdGpNrCHIjW14AI4SxMX2IcONhDvwhHc9KswCIixfSeVl08WdKDfzZaypq2ynRIG3lzGO3CO5dXYzc9+w==
 
+webextension-polyfill-ts@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.22.0.tgz#86cfd7bab4d9d779d98c8340983f4b691b2343f3"
+  integrity sha512-3P33ClMwZ/qiAT7UH1ROrkRC1KM78umlnPpRhdC/292UyoTTW9NcjJEqDsv83HbibcTB6qCtpVeuB2q2/oniHQ==
+  dependencies:
+    webextension-polyfill "^0.7.0"
+
+webextension-polyfill-ts@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.25.0.tgz#fff041626365dbd0e29c40b197e989a55ec221ca"
+  integrity sha512-ikQhwwHYkpBu00pFaUzIKY26I6L87DeRI+Q6jBT1daZUNuu8dSrg5U9l/ZbqdaQ1M/TTSPKeAa3kolP5liuedw==
+  dependencies:
+    webextension-polyfill "^0.7.0"
+
+webextension-polyfill@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz#0df1120ff0266056319ce1a622b09ad8d4a56505"
+  integrity sha512-su48BkMLxqzTTvPSE1eWxKToPS2Tv5DLGxKexLEVpwFd6Po6N8hhSLIvG6acPAg7qERoEaDL+Y5HQJeJeml5Aw==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -10012,6 +10687,11 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 ws@^7.4.6:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"