fix: fix navigation issues (#873)

vitwit · Nov 16, 2023 · 3d24c89 · 3d24c89
1 parent cab3ce5
commit 3d24c89
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 26 deletions.
diff --git a/frontend/src/components/common/SelectNetwork.jsx b/frontend/src/components/common/SelectNetwork.jsx
@@ -2,8 +2,11 @@ import React, { useEffect, useState } from "react";
 import { MenuItem, Select, FormControl } from "@mui/material";
 import { Box } from "@mui/system";
 import PropTypes from "prop-types";
-import { setSelectedNetworkLocal } from "../../features/common/commonSlice";
-import { useDispatch } from "react-redux";
+import {
+  setSelectedNetwork,
+  setSelectedNetworkLocal,
+} from "../../features/common/commonSlice";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function SelectNetwork(props) {
   const { onSelect, networks, defaultNetwork = "cosmoshub" } = props;
@@ -14,22 +17,29 @@ export default function SelectNetwork(props) {
     setSelected(e.target.value);
     onSelect(e.target.value.toLowerCase().replace(/ /g, ""));
   };
+  const selectNetwork = useSelector(
+    (state) => state.common.selectedNetwork.chainName
+  );
 
   useEffect(() => {
     dispatch(
-      setSelectedNetworkLocal({
+      setSelectedNetwork({
         chainName: selected,
       })
     );
   }, [selected]);
 
+  useEffect(() => {
+    setSelected(selectNetwork);
+  }, [selectNetwork]);
+
   return (
     <Box sx={{ maxWidth: 150 }}>
       <FormControl fullWidth>
         <Select
           labelId="network-select-label"
           id="network-select"
-          value={selected}
+          value={selected.toLowerCase()}
           onChange={handleNetworkSelect}
           variant="outlined"
           placeholder="chains"

diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
@@ -26,7 +26,10 @@ import Feegrant from "./feegrant/Feegrant";
 import CreateGroupNewPage from "./group/CreateGroup";
 import NewFeegrant from "./feegrant/NewFeegrant";
 import { getFeegrant } from "../utils/localStorage";
-import { setFeegrant as setFeegrantState } from "../features/common/commonSlice";
+import {
+  setFeegrant as setFeegrantState,
+  setSelectedNetwork,
+} from "../features/common/commonSlice";
 import Authz from "./authz/Authz";
 import NewAuthz from "./authz/NewAuthz";
 import GroupPage from "./GroupPage";
@@ -125,31 +128,40 @@ export default function Home(props) {
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
+    let currentNetwork = selectedNetwork;
+    if (currentNetwork === "allnetworks") {
+      currentNetwork = "";
+    }
     if (newValue === 8) {
-      if (selectedNetwork === "") navigate("/passage/airdrop-check");
-      else navigate(`/${selectedNetwork.toLowerCase()}/airdrop-check`);
+      if (currentNetwork === "") navigate("/passage/airdrop-check");
+      else navigate(`/${currentNetwork.toLowerCase()}/airdrop-check`);
     } else if (newValue === 2) {
-      if (selectedNetwork === "") navigate(ALL_NETWORKS[newValue]);
+      if (currentNetwork === "") navigate(ALL_NETWORKS[newValue]);
       else
-        navigate(`${selectedNetwork.toLowerCase()}/${ALL_NETWORKS[newValue]}`);
+        navigate(`${currentNetwork.toLowerCase()}/${ALL_NETWORKS[newValue]}`);
     } else if (newValue === 0) {
       navigate(
-        `${selectedNetwork ? selectedNetwork + "/overview" : ""}${
+        `${currentNetwork ? currentNetwork + "/overview" : ""}${
           ALL_NETWORKS[newValue]
         }`
       );
     } else if (newValue === 3 || newValue === 6 || newValue === 5) {
       navigate(
-        `${selectedNetwork ? selectedNetwork + "/" : ""}${
-          ALL_NETWORKS[newValue]
-        }`
+        `${currentNetwork ? currentNetwork + "/" : ""}${ALL_NETWORKS[newValue]}`
+      );
+    } else if (newValue === 9) {
+      dispatch(
+        setSelectedNetwork({
+          chainName: "",
+        })
       );
+      navigate("/");
     } else {
-      if (selectedNetwork === "") {
+      if (currentNetwork === "") {
         setNetwork("cosmoshub");
         navigate(`cosmoshub/${ALL_NETWORKS[newValue]}`);
       } else {
-        navigate(`${selectedNetwork.toLowerCase()}/${ALL_NETWORKS[newValue]}`);
+        navigate(`${currentNetwork.toLowerCase()}/${ALL_NETWORKS[newValue]}`);
       }
     }
   };
@@ -180,7 +192,21 @@ export default function Home(props) {
   return (
     <Box>
       <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={value} onChange={handleChange} aria-label="menu bar">
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="menu bar"
+        >
+          {selectedNetwork?.length ? (
+            <Tab
+              label="Home"
+              {...a11yProps(9)}
+              value={9}
+              sx={{
+                fontWeight: 600,
+              }}
+            />
+          ) : null}
           <Tab
             label="Overview"
             {...a11yProps(0)}
@@ -236,15 +262,15 @@ export default function Home(props) {
               }}
             />
           )}
-            <Tab
-              label="Feegrant"
-              {...a11yProps(6)}
-              value={6}
-              sx={{
-                fontWeight: 600,
-              }}
-              disabled={authzEnabled && !authzTabs?.feegratEnabled}
-            />
+          <Tab
+            label="Feegrant"
+            {...a11yProps(6)}
+            value={6}
+            sx={{
+              fontWeight: 600,
+            }}
+            disabled={authzEnabled && !authzTabs?.feegratEnabled}
+          />
           <Tab
             label="Groups"
             {...a11yProps(7)}
@@ -254,7 +280,8 @@ export default function Home(props) {
             }}
             disabled={authzEnabled && !authzTabs?.groupsEnabled}
           />
-          {!authzEnabled && selectedNetwork === "passage" || "passage-testnet" ? (
+          {(!authzEnabled && selectedNetwork === "passage") ||
+          "passage-testnet" ? (
             <Tab
               label="Airdrop"
               {...a11yProps(8)}