Implement validatorsPerformance in toolbar (#343)

dappnode · Sep 30, 2024 · dfde9fa · dfde9fa
1 parent 78f2fee
commit dfde9fa
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -1,11 +1,12 @@
+import React, { useEffect } from "react";
 import { Alert, CircularProgress } from "@mui/material";
 import TopBar from "./components/TopBar/TopBar";
-import ImportScreen from "./ImportScreen";
+import { ValidatorsImport } from "./components/ValidatorsImport/ValidatorsImport";
 import ValidatorList from "./components/ValidatorList/ValidatorList";
+import ValidatorsPerformance from "./components/ValidatorsPerformance/ValidatorsPerformance";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import React, { useEffect } from "react";
 import { StakerConfig } from "@stakingbrain/common";
 import { rpcClient } from "./socket";
 import type { Web3SignerStatus } from "@stakingbrain/brain";
@@ -104,8 +105,9 @@ function App(): JSX.Element {
               <Route path="/" element={<ValidatorList stakerConfig={stakerConfig} userMode={userMode} />} />
               <Route
                 path="import"
-                element={<ImportScreen network={stakerConfig.network} isMevBoostSet={stakerConfig.isMevBoostSet} />}
+                element={<ValidatorsImport network={stakerConfig.network} isMevBoostSet={stakerConfig.isMevBoostSet} />}
               />
+              <Route path="validatorsPerformance" element={<ValidatorsPerformance />} />
             </Routes>
           </BrowserRouter>
         )

diff --git a/packages/ui/src/components/TopBar/ToolBar.tsx b/packages/ui/src/components/TopBar/ToolBar.tsx
@@ -1,12 +1,13 @@
 import Toolbar from "@mui/material/Toolbar";
 import { HeaderTypography } from "../../Styles/Typographies";
-import { Box, Chip } from "@mui/material";
+import { Box, Chip, Button } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import { Network } from "@stakingbrain/common";
+import { Link } from "react-router-dom"; // Import Link from react-router-dom
 
 export default function ToolBar({
   mode,
@@ -49,6 +50,15 @@ export default function ToolBar({
             alignItems: "center"
           }}
         >
+          <Button component={Link} to="/" color="inherit" sx={{ mx: 1 }}>
+            Home
+          </Button>
+          <Button component={Link} to="/import" color="inherit" sx={{ mx: 1 }}>
+            Import
+          </Button>
+          <Button component={Link} to="/validatorsPerformance" color="inherit" sx={{ mx: 1 }}>
+            Validators Performance
+          </Button>
           <IconButton sx={{ ml: 1 }} onClick={() => setMode(mode === "dark" ? "light" : "dark")} color="inherit">
             {mode === "dark" ? (
               <LightModeIcon titleAccess="Set Light Mode" />
@@ -62,7 +72,7 @@ export default function ToolBar({
             color="inherit"
           >
             {userMode === "basic" ? (
-              <UnfoldMoreIcon titleAccess="Expand Andanced Info" />
+              <UnfoldMoreIcon titleAccess="Expand Advanced Info" />
             ) : (
               <UnfoldLessIcon titleAccess="Collapse Advanced Info" />
             )}

diff --git a/packages/ui/src/ImportScreen.tsx → ...nts/ValidatorsImport/ValidatorsImport.tsx b/packages/ui/src/ImportScreen.tsx → ...nts/ValidatorsImport/ValidatorsImport.tsx
@@ -1,5 +1,5 @@
-import FileDrop from "./components/FileDrop/FileDrop";
-import { SecondaryInfoTypography } from "./Styles/Typographies";
+import FileDrop from "../FileDrop/FileDrop";
+import { SecondaryInfoTypography } from "../../Styles/Typographies";
 import {
   Box,
   Button,
@@ -19,9 +19,9 @@ import { Link } from "react-router-dom";
 import { DropEvent } from "react-dropzone";
 import { useEffect, useState } from "react";
 import BackupIcon from "@mui/icons-material/Backup";
-import { ImportStatus, KeystoreInfo, TagSelectOption } from "./types";
-import FileCardList from "./components/FileCards/FileCardList";
-import ImportDialog from "./components/Dialogs/ImportDialog";
+import { ImportStatus, KeystoreInfo, TagSelectOption } from "../../types";
+import FileCardList from "../FileCards/FileCardList";
+import ImportDialog from "../Dialogs/ImportDialog";
 import {
   Tag,
   isValidEcdsaPubkey,
@@ -31,12 +31,12 @@ import {
   Network
 } from "@stakingbrain/common";
 import CloseIcon from "@mui/icons-material/Close";
-import { rpcClient } from "./socket";
+import { rpcClient } from "../../socket";
 import ArrowCircleLeftOutlinedIcon from "@mui/icons-material/ArrowCircleLeftOutlined";
-import { extractPubkey } from "./utils/dataUtils";
+import { extractPubkey } from "../../utils/dataUtils";
 import type { CustomImportRequest, Web3signerPostResponse } from "@stakingbrain/brain";
 
-export default function ImportScreen({
+export function ValidatorsImport({
   network,
   isMevBoostSet
 }: {

diff --git a/packages/ui/src/components/ValidatorsPerformance/ValidatorsPerformance.tsx b/packages/ui/src/components/ValidatorsPerformance/ValidatorsPerformance.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ValidatorsPerformance() {
+  return <div>ValidatorsPerformance</div>;
+}