[Dashboard] Join operators address view and the wallet address view (#3323)

* feat: add kv store table, show transaction history for operator; cleanup

* refactor: home page, header, graph

* refactor: theme, components, simplify code, reorganize imports, add new fields to the wallet details

* refactor: styles for mobile device, shadow icon

* refactor: make table responsove, fix its cells, fix few other components, replace scss with mui in the component

* fix: time period buttons logic, numeric format of hmt balance, remove some tooltips

* refactor: leaderboard table, some component, reorder imports, remove unused css modules and components

* refactor: use-breakpoints hook, some components, remove needless files

* refactor: remove footer scss and changed footer component, other minor changes

* refactor: theme's variants

* feat: add tooltips to the operator details

* fix: rename button

* refactor: tooltips on home page

* minor refactoring

* fix: use custom hook for identifying isMobile

* minor refactoring of Holders component

* fix: weird padding in table, tooltip's padding on graph, color of address in the table, add withdrawable tokens

* address the feedback partially

* fix: using max integer

* fix: show 0 instead of empty string, if graph's metric is nullable

* fix: reset pagination on unmount

* fix: hide vertical scroll on tables, get back standard-background className

* remove log

* fix hmt balance

Author: KirillKirill

packages/apps/dashboard/client/src/App.css

@@ -1,11 +1,13 @@
-import React from 'react';
+import { FC } from 'react';
+
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Home from '@pages/Home';
+
 import Graph from '@pages/Graph';
+import Home from '@pages/Home';
+import LeaderBoard from '@pages/Leaderboard';
 import SearchResults from '@pages/SearchResults';
-import { LeaderBoard } from '@pages/Leaderboard';
 
-const App: React.FC = () => {
+const App: FC = () => {
   return (
     <Router>
       <Routes>

packages/apps/dashboard/client/src/App.tsx

@@ -1,5 +1,9 @@
 .swiper-button-next, .swiper-button-prev {
-  top: 35%
+  top: 50%;
+
+  @media (max-width: 900px) {
+    top: 30%;
+  }
 }
 
 .swiper-button-next::after, .swiper-button-prev::after {

packages/apps/dashboard/client/src/assets/react.svg

@@ -1,189 +1,7 @@
-.home-page-header {
-	color: $white;
-	.home-page-search {
-		margin-top: 24px;
-	}
+.home-page-search {
+	margin-top: 24px;
 }
 
-.home-page-boxes {
-	display: flex;
-	gap: 24px;
-	margin-top: 62px;
-
-	.home-page-box {
-		color: $primary;
-		background-color: $white;
-		border-radius: 16px;
-		padding: 24px 32px;
-		width: calc(38% - 24px);
-
-		@media (max-width: 660px) {
-			padding: 24px 16px;
-		}
-
-		.box-title {
-			font-size: 14px;
-			height: 32px;
-			margin-bottom: 24px;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-		.box-content {
-			display: flex;
-			.count {
-				font-size: 20px;
-				font-weight: 500;
-				margin-top: 3px;
-			}
-			.box-icon {
-				margin-right: 10px;
-			}
-		}
-	}
-
-	.home-page-box:first-child {
-		width: 24%;
-	}
-	@media (max-width: 1250px) {
-		flex-wrap: wrap;
-		.home-page-box,
-		.home-page-box:first-child {
-			width: 100%;
-		}
-	}
-}
-
-.home-page-find {
-	font-size: 14px;
-	margin-top: 32px;
-	display: flex;
-	gap: 32px;
-	align-items: center;
-	height: 60px;
-	white-space: nowrap;
-	span {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-	@media (max-width: 1100px) {
-		span {
-			min-width: 120px;
-		}
-	}
-}
-
-.home-page-find-title-mobile {
-	margin-top: 32px;
-	font-size: 14px;
-	@media (max-width: 1100px) {
-		display: block;
-	}
-}
 .home-page-leaderboard {
 	margin-top: 60px;
 }
-
-.home-page-table-header {
-	background-color: $whiteSolid;
-	height: 72px;
-	color: #320a8d;
-	text-transform: uppercase;
-	border: 0;
-	margin-bottom: 15px;
-
-	th {
-		font-size: 12px;
-	}
-	.icon-table {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-}
-
-.home-page-table-row {
-	td {
-		padding: 32px 16px;
-		font-size: 16px;
-	}
-
-	.icon-table {
-		background-color: $groundwaterOpacity;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10px;
-		width: 52px;
-		height: 52px;
-	}
-
-	.reputation-table {
-		padding: 4px 8px;
-		border-radius: 16px;
-		font-size: 13px;
-		display: inline;
-	}
-
-	.reputation-table-medium {
-		color: $medium;
-		border: 1px solid $mediumBorder;
-	}
-
-	.reputation-table-low {
-		color: $low;
-		border: 1px solid $lowBorder;
-	}
-
-	.reputation-table-high {
-		color: $high;
-		border: 1px solid $highBorder;
-	}
-	.reputation-table-soon {
-		color: $soon;
-		border: 1px solid $soonBorder;
-	}
-
-	&:hover {
-		transition: opacity 8ms;
-		opacity: 0.8;
-	}
-}
-
-#network-select {
-	svg {
-		display: none;
-	}
-}
-
-.select-item {
-	display: flex;
-	gap: 10px;
-}
-
-.mobile-select {
-	width: 270px;
-	background-color: $whiteSolid;
-	padding: 10px;
-	display: none;
-	margin-bottom: 20px;
-	@media (max-width: 1100px) {
-		display: block;
-	}
-}
-
-.table-filter-select {
-	@media (max-width: 1100px) {
-		div {
-			display: none;
-		}
-	}
-	.mobile-title {
-		display: none;
-		font-weight: 400;
-		@media (max-width: 1100px) {
-			display: block;
-		}
-	}
-}