fix: add configuration menu

src/App.tsx

@@ -9,6 +9,7 @@ import Block from "./containers/Block";
 import Dashboard from "./containers/Dashboard";
 import NodeView from "./containers/NodeView";
 import Transaction from "./containers/Transaction";
+import ConfigurationMenu from "./containers/ConfigurationMenu";
 import { darkTheme, lightTheme } from "./themes/jadeTheme";
 
 import Brightness3Icon from "@material-ui/icons/Brightness3";
@@ -41,14 +42,15 @@ function App(props: any) {
           <IconButton onClick={darkMode.toggle}>
             {darkMode.value ? <Brightness3Icon /> : <WbSunnyIcon />}
           </IconButton>
+          <ConfigurationMenu />
         </Toolbar>
       </AppBar>
       <Router>
         <Switch>
           {
             routes.map((routeProps, i) => (
               <Route key={routeProps.path} path={routeProps.path} component={(p: any) => (
-                <Card>
+                <Card elevation={0} style={{background: "none"}}>
                   <CardHeader title={routeProps.title} />
                   <CardContent>
                     {routeProps.component({ ...p })}

src/containers/ConfigurationMenu/ConfigurationMenu.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { IconButton, Menu, MenuItem, ListItemText, ListItemSecondaryAction, Input, ListItemIcon, Typography } from "@material-ui/core";
+import { Settings, NavigateNext, NavigateBefore } from "@material-ui/icons";
+
+interface IConfigurationMenuProps {
+  //
+}
+
+interface IPagedMenuProps {
+}
+
+const PagedMenu: React.FC<IPagedMenuProps> = (props) => {
+  const [selected, setSelected] = React.useState<"service-runner" | "ethereum-rpc" | null>(null);
+  const nameMap = {
+    "service-runner": "Service Runner RPC",
+    "ethereum-rpc": "Ethereum RPC",
+  };
+
+  if (selected) {
+    return (
+      <>
+        <MenuItem onClick={() => setSelected(null)}>
+          <ListItemIcon>
+            <NavigateBefore />
+          </ListItemIcon>
+          <ListItemText>
+            Back
+          </ListItemText>
+        </MenuItem>
+        <Input placeholder={`${nameMap[selected]} Host`} fullWidth={true}/>
+        <Input placeholder={`${nameMap[selected]} Port`} fullWidth={true}/>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <MenuItem onClick={() => setSelected("service-runner")}>
+        <ListItemText>
+          Service Runner RPC
+          </ListItemText>
+        <ListItemSecondaryAction>
+          <NavigateNext />
+        </ListItemSecondaryAction>
+      </MenuItem>
+      <MenuItem onClick={() => setSelected("ethereum-rpc")}>
+        <ListItemText>
+          Ethereum RPC
+          </ListItemText>
+        <ListItemSecondaryAction>
+          <NavigateNext />
+        </ListItemSecondaryAction>
+      </MenuItem>
+    </>
+  );
+
+};
+
+const ConfigurationMenu: React.FC<IConfigurationMenuProps> = (props) => {
+  const [anchorEl, setAnchorEl] = React.useState<any>(null);
+  const open = !!anchorEl;
+
+  function handleMenu(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  return (
+    <>
+      <IconButton
+        aria-label="Account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <Settings />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        getContentAnchorEl={null}
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        PaperProps={{
+          style: {
+            width: "250px",
+          },
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        onClose={handleClose}
+      >
+        <PagedMenu></PagedMenu>
+      </Menu>
+    </>
+  );
+};
+
+export default ConfigurationMenu;

src/containers/ConfigurationMenu/index.ts

@@ -0,0 +1,2 @@
+import ConfigurationMenu from "./ConfigurationMenu";
+export default ConfigurationMenu;

src/containers/Dashboard.tsx

@@ -91,11 +91,10 @@ export default (props: any) => {
 
   useInterval(() => {
     if (!erpc) { return; }
-    
+
     erpc.eth_syncing().then(setSyncing);
   }, 10000, true);
 
-
   React.useEffect(() => {
     if (!erpc) { return; }
     erpc.net_peerCount().then(setPeerCount);