chore(ui): add testnet network banner (#356)

* chore(ui): add testnet network banner * chore(ui): add testnet network banner * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint
BirthdayResearch · Nov 17, 2023 · a92dd82 · a92dd82
1 parent f02de1d
commit a92dd82
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/apps/web/src/layouts/components/Header.tsx b/apps/web/src/layouts/components/Header.tsx
@@ -6,6 +6,8 @@ import Container from "@components/commons/Container";
 import { FiXCircle, FiMenu } from "react-icons/fi";
 import Image from "next/image";
 import { getTopLevelRoute } from "shared/urlHelper";
+import { useNetwork } from "@contexts/NetworkContext";
+import { NetworkConnection } from "@contexts/Environment";
 import {
   HeaderNetworkMenu,
   HeaderNetworkMenuMobile,
@@ -47,6 +49,8 @@ export default function Header(): JSX.Element {
   const router = useRouter();
   const currentPath = getTopLevelRoute(router.asPath);
 
+  const { connection } = useNetwork();
+
   useEffect(() => {
     function routeChangeStart(): void {
       setMenu(false);
@@ -59,6 +63,14 @@ export default function Header(): JSX.Element {
 
   return (
     <header data-testid="header-container">
+      {connection === NetworkConnection.TestNet && (
+        <div
+          className="text-gray-900 bg-orange-100 rounded p-3 text-center text-sm"
+          data-testid="warning_banner"
+        >
+          You are currently in the TestNet network
+        </div>
+      )}
       <Container className="p-4 md:py-6 md:px-10 lg:px-[120px]">
         <div className="flex items-center justify-between">
           <Link href={{ pathname: "/" }} passHref>