fix(ui-ux): hide /faucet navigation and page if not in Testnet env

src/hooks/useMenuNavigationHelper.ts

@@ -0,0 +1,23 @@
+import { NetworkConnection } from "@contexts/Environment";
+import { useNetwork } from "@contexts/NetworkContext";
+
+export interface MenuItem {
+  label: string;
+  pathname: string;
+  testId: string;
+  childPaths: string[];
+  imagePath: string;
+}
+
+// To hide /faucet navigation menu item if not in testnet
+export default function useMenuNavigationHelper({
+  menu,
+}: {
+  menu: MenuItem[];
+}) {
+  const { connection } = useNetwork();
+
+  return connection !== NetworkConnection.TestNet
+    ? menu.filter((item) => item.label !== "Faucet")
+    : menu;
+}

src/layouts/components/Header.tsx

@@ -3,15 +3,18 @@ import Link from "@components/commons/Link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import Container from "@components/commons/Container";
-import { FiXCircle, FiMenu } from "react-icons/fi";
+import { FiMenu, FiXCircle } from "react-icons/fi";
 import Image from "next/image";
 import { getTopLevelRoute } from "shared/urlHelper";
+import useMenuNavigationHelper, {
+  MenuItem,
+} from "@hooks/useMenuNavigationHelper";
 import {
   HeaderNetworkMenu,
   HeaderNetworkMenuMobile,
 } from "./HeaderNetworkMenu";
 
-const MenuItems = [
+export const MenuItems: MenuItem[] = [
   {
     label: "Blocks",
     pathname: "/blocks",
@@ -44,7 +47,7 @@ const MenuItems = [
     label: "Faucet",
     pathname: "/faucet",
     testId: "Desktop.HeaderLink.Faucet",
-    childPaths: ["/token"],
+    childPaths: ["/faucet"],
     imagePath: "/menu/Transactions.svg",
   },
 ];
@@ -103,9 +106,11 @@ export default function Header(): JSX.Element {
 }
 
 function DesktopNavbar({ currentPath }: { currentPath: string }): JSX.Element {
+  const filteredMenuItems = useMenuNavigationHelper({ menu: MenuItems });
+
   return (
     <div className="bg-white-50 rounded-3xl">
-      {MenuItems.map((item) => (
+      {filteredMenuItems.map((item) => (
         <HeaderLink
           label={item.label}
           pathname={item.pathname}
@@ -126,6 +131,8 @@ function MobileNavbar({
   isOpen: boolean;
   onClose: () => void;
 }): JSX.Element {
+  const filteredMenuItems = useMenuNavigationHelper({ menu: MenuItems });
+
   return (
     <>
       <div
@@ -163,7 +170,7 @@ function MobileNavbar({
           />
         </div>
         <div className="mt-4">
-          {MenuItems.map((item) => (
+          {filteredMenuItems.map((item) => (
             <HeaderMobileLink
               label={item.label}
               imagePath={item.imagePath}

src/layouts/components/HeaderNetworkMenu.tsx

@@ -107,7 +107,7 @@ export function HeaderNetworkMenuMobile(): JSX.Element {
           <a
             key={item}
             className={clsx(
-              "flex items-center justify-between cursor-pointer py-3 justify-between flex-1",
+              "flex items-center justify-between cursor-pointer py-3 flex-1",
               { "mb-16": index === networks.length - 1 }
             )}
             href={`/?network=${item}`}

src/pages/faucet/index.tsx

@@ -2,16 +2,29 @@ import Container from "@components/commons/Container";
 import GradientCardContainer from "@components/commons/GradientCardContainer";
 import Button from "@components/commons/Button";
 import ReCAPTCHA from "react-google-recaptcha";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useNetwork } from "@contexts/NetworkContext";
+import { NetworkConnection } from "@contexts/Environment";
+import { useRouter } from "next/router";
 import TextInput from "../../layouts/components/TextInput";
 import SectionTitle from "../../layouts/components/SectionTitle";
 
+// hide this page if not on testnet
 export default function Faucet() {
+  const { connection } = useNetwork();
+  const router = useRouter();
+
   const [isCaptchaSuccessful, setIsCaptchaSuccess] = useState(false);
   function onChange() {
     setIsCaptchaSuccess(true);
   }
 
+  useEffect(() => {
+    if (connection !== NetworkConnection.TestNet) {
+      router.push(`/404?network=${connection}`);
+    }
+  }, [connection]);
+
   return (
     <Container className="px-1 md:px-0 mt-12">
       <SectionTitle title="Testnet Faucet" />