From dad301fd1a54258400df6836cd9c4998886d05e1 Mon Sep 17 00:00:00 2001
From: Isaac Ibiapina <mail@eyezick.com>
Date: Tue, 9 Jul 2024 14:23:50 -0400
Subject: [PATCH 1/3] add network switch banner

---
 src/components/Header.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2ee57c4..d49978d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,13 +1,35 @@
 import { Navbar } from "flowbite-react";
 import { SvgLoader } from "react-svgmt";
 
+import { useAccount, useSwitchChain } from "wagmi";
 import { CollectionSwitcher } from "#/components/CollectionSwitcher";
 import NavLink from "#/components/NavLink";
 import Profile from "#/components/Profile";
+import { DEFAULT_CHAIN } from "#/constants";
 
 export default function Header() {
+  const { chain } = useAccount();
+  const { switchChain } = useSwitchChain();
+
+  const isInvalidChain = chain?.id !== DEFAULT_CHAIN.id;
   return (
-    <div className="pt-2 sm:pt-4 pb-24">
+    <div className={isInvalidChain ? "sm:pt-4 pb-24 mt-16 md:mt-10" : "pt-2 sm:pt-4 pb-24"}>
+      {isInvalidChain && (
+        <div
+          className={
+            "absolute top-0 left-0 w-full bg-black/[.03] dark:bg-white/[.03] py-3 text-center text-gray-600 dark:text-gray-400"
+          }
+        >
+          You're connected to a different network.{" "}
+          <span
+            onClick={() => switchChain({ chainId: DEFAULT_CHAIN.id })}
+            className={"font-extrabold text-primary underline cursor-pointer"}
+          >
+            Switch to {DEFAULT_CHAIN.name}
+          </span>{" "}
+          and continue using the app.
+        </div>
+      )}
       <Navbar fluid={true} rounded={true} border={false}>
         <Navbar.Brand href="/">
           <SvgLoader src="/govnft.svg" className="block h-7 w-auto mr-4" alt="GOVNFT" />

From 10514085bb0e7ebab5f1c3e2ac2ec1cba4c5b0a9 Mon Sep 17 00:00:00 2001
From: "Alexandru G." <alexandrugugurel@gmail.com>
Date: Wed, 10 Jul 2024 16:14:01 +0300
Subject: [PATCH 2/3] Update Mobile UI

---
 src/components/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d49978d..e918ea0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -17,10 +17,10 @@ export default function Header() {
       {isInvalidChain && (
         <div
           className={
-            "absolute top-0 left-0 w-full bg-black/[.03] dark:bg-white/[.03] py-3 text-center text-gray-600 dark:text-gray-400"
+            "absolute top-0 left-0 w-full bg-black/[.03] dark:bg-white/[.03] py-3 text-center text-gray-600 dark:text-gray-400 text-xs px-8"
           }
         >
-          You're connected to a different network.{" "}
+          <span className="hidden sm:inline">You're connected to a different network.{" "}</span>
           <span
             onClick={() => switchChain({ chainId: DEFAULT_CHAIN.id })}
             className={"font-extrabold text-primary underline cursor-pointer"}

From f25403bbe0fb628f94d6382ddfc63ffb42ed0d00 Mon Sep 17 00:00:00 2001
From: "Alexandru G." <alexandrugugurel@gmail.com>
Date: Wed, 10 Jul 2024 16:15:48 +0300
Subject: [PATCH 3/3] Run linter

---
 src/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e918ea0..0f59ddb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -20,7 +20,7 @@ export default function Header() {
             "absolute top-0 left-0 w-full bg-black/[.03] dark:bg-white/[.03] py-3 text-center text-gray-600 dark:text-gray-400 text-xs px-8"
           }
         >
-          <span className="hidden sm:inline">You're connected to a different network.{" "}</span>
+          <span className="hidden sm:inline">You're connected to a different network.</span>{" "}
           <span
             onClick={() => switchChain({ chainId: DEFAULT_CHAIN.id })}
             className={"font-extrabold text-primary underline cursor-pointer"}