use url as unique nav selection state

explorer/src/components/MobileNav.tsx

@@ -8,7 +8,7 @@ import { useMainContext } from '../context/main';
 import { MobileDrawerClose } from '../icons/MobileDrawerClose';
 import { Footer } from './Footer';
 import { ExpandableButton } from './Nav';
-import { ConnectKeplrWallet } from './ConnectKeplrWallet';
+import { ConnectKeplrWallet } from './Wallet/ConnectKeplrWallet';
 import NetworkTitle from './NetworkTitle';
 
 export const MobileNav: FCWithChildren = ({ children }) => {
@@ -23,8 +23,8 @@ export const MobileNav: FCWithChildren = ({ children }) => {
     setDrawerOpen(!drawerOpen);
   };
 
-  const handleClick = (id: number) => {
-    updateNavState(id);
+  const handleClick = (url: string) => {
+    updateNavState(url);
     toggleDrawer();
   };
 
@@ -103,7 +103,6 @@ export const MobileNav: FCWithChildren = ({ children }) => {
             {navState.map((props) => (
               <ExpandableButton
                 key={props.url}
-                id={props.id}
                 title={props.title}
                 openDrawer={openDrawer}
                 url={props.url}

explorer/src/components/Nav.tsx

@@ -23,7 +23,7 @@ import { MobileDrawerClose } from '../icons/MobileDrawerClose';
 import { Footer } from './Footer';
 import { DarkLightSwitchDesktop } from './Switch';
 import { NavOptionType } from '../context/nav';
-import { ConnectKeplrWallet } from './ConnectKeplrWallet';
+import { ConnectKeplrWallet } from './Wallet/ConnectKeplrWallet';
 
 const drawerWidth = 255;
 const bannerHeight = 80;
@@ -72,7 +72,6 @@ const Drawer = styled(MuiDrawer, {
 }));
 
 type ExpandableButtonType = {
-  id: number;
   title: string;
   url: string;
   isActive?: boolean;
@@ -85,11 +84,10 @@ type ExpandableButtonType = {
   drawIsFixed: boolean;
   fixDrawerClose?: () => void;
   isMobile: boolean;
-  setToActive: (num: number) => void;
+  setToActive: (url: string) => void;
 };
 
 export const ExpandableButton: FCWithChildren<ExpandableButtonType> = ({
-  id,
   url,
   setToActive,
   isActive,
@@ -110,7 +108,7 @@ export const ExpandableButton: FCWithChildren<ExpandableButtonType> = ({
   const { palette } = useTheme();
 
   const handleClick = () => {
-    setToActive(id);
+    setToActive(url);
     if (title === 'Network Components' && nested) {
       openDrawer();
       toggleNestedOptions(!nestedOptions);
@@ -204,7 +202,6 @@ export const ExpandableButton: FCWithChildren<ExpandableButtonType> = ({
       {nestedOptions &&
         nested?.map((each) => (
           <ExpandableButton
-            id={each.id}
             url={each.url}
             key={each.title}
             title={each.title}
@@ -246,8 +243,8 @@ export const Nav: FCWithChildren = ({ children }) => {
   const switchNetworkLink =
     environment === 'mainnet' ? 'https://sandbox-explorer.nymtech.net' : 'https://explorer.nymtech.net';
 
-  const setToActive = (id: number) => {
-    updateNavState(id);
+  const setToActive = (url: string) => {
+    updateNavState(url);
   };
 
   const fixDrawerOpen = () => {

explorer/src/context/main.tsx

@@ -35,7 +35,7 @@ interface StateApi {
   fetchMixnodes: (status?: MixnodeStatus) => Promise<MixNodeResponse | undefined>;
   filterMixnodes: (filters: any, status: any) => void;
   toggleMode: () => void;
-  updateNavState: (id: number) => void;
+  updateNavState: (title: string) => void;
 }
 
 type State = StateData & StateApi;
@@ -185,10 +185,10 @@ export const MainContextProvider: FCWithChildren = ({ children }) => {
     }
   };
 
-  const updateNavState = (id: number) => {
+  const updateNavState = (url: string) => {
     const updated = navState.map((option) => ({
       ...option,
-      isActive: option.id === id,
+      isActive: option.url === url,
     }));
     updateNav(updated);
   };

explorer/src/context/nav.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { DelegateIcon } from '@src/icons/DelevateSVG';
 import { BIG_DIPPER } from '../api/constants';
 import { OverviewSVG } from '../icons/OverviewSVG';
 import { NodemapSVG } from '../icons/NodemapSVG';
 import { NetworkComponentsSVG } from '../icons/NetworksSVG';
 
 export type NavOptionType = {
-  id: number;
   isActive?: boolean;
   url: string;
   title: string;
@@ -16,46 +16,45 @@ export type NavOptionType = {
 
 export const originalNavOptions: NavOptionType[] = [
   {
-    id: 0,
     isActive: false,
     url: '/',
     title: 'Overview',
     Icon: <OverviewSVG />,
   },
   {
-    id: 1,
     isActive: false,
     url: '/network-components',
     title: 'Network Components',
     Icon: <NetworkComponentsSVG />,
     nested: [
       {
-        id: 3,
         url: '/network-components/mixnodes',
         title: 'Mixnodes',
       },
       {
-        id: 4,
         url: '/network-components/gateways',
         title: 'Gateways',
       },
       {
-        id: 5,
         url: `${BIG_DIPPER}/validators`,
         title: 'Validators',
       },
       {
-        id: 6,
         url: 'network-components/service-providers',
         title: 'Service Providers',
       },
     ],
   },
   {
-    id: 2,
     isActive: false,
     url: '/nodemap',
     title: 'Nodemap',
     Icon: <NodemapSVG />,
   },
+  {
+    isActive: false,
+    url: '/delegations',
+    title: 'Delegations',
+    Icon: <DelegateIcon />,
+  },
 ];

explorer/src/pages/ServiceProviders/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Card, FormControl, Grid, ListItem, Menu, SelectChangeEvent, Typography } from '@mui/material';
+import { Box, Button, Card, FormControl, Grid, ListItem, Menu, SelectChangeEvent, Typography } from '@mui/material';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { TableToolbar } from '../../components/TableToolbar';
 import { Title } from '../../components/Title';
@@ -90,7 +90,9 @@ export const ServiceProviders = () => {
 
   return (
     <>
-      <Title text="Service Providers" />
+      <Box mb={2}>
+        <Title text="Service Providers" />
+      </Box>
       <Grid container>
         <Grid item xs={12}>
           <Card