fix: handle wrong networks

Author: VGau

bridge-ui/src/components/bridge/modals/ManualClaimModal.tsx

@@ -23,7 +23,7 @@ const ManualClaimModal: React.FC<ManualClaimModalProps> = ({ handleNoClose, hand
             No
           </Button>
           <Link
-            href="#"
+            href="https://docs.linea.build/developers/guides/bridge/how-to-bridge-eth"
             rel="noopener noreferrer"
             target="_blank"
             className="hover:border-b-1 border-b-1 btn btn-ghost btn-sm rounded-none border-b-primary p-0 font-normal text-[#E5E5E5] hover:border-b-primary hover:bg-transparent"

bridge-ui/src/components/layouts/Layout.tsx

@@ -4,12 +4,20 @@ import { ToastContainer } from "react-toastify";
 import { Header } from "./header";
 import { useInitialiseChain, useInitialiseToken } from "@/hooks";
 import Sidebar from "./Sidebar";
+import { useAccount } from "wagmi";
+import { linea, lineaSepolia, mainnet, sepolia } from "viem/chains";
+import WrongNetwork from "./WrongNetwork";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   useInitialiseChain();
   useInitialiseToken();
 
-  return (
+  const { chainId } = useAccount();
+
+  return chainId &&
+    ![mainnet.id, sepolia.id, linea.id, lineaSepolia.id].includes(chainId as 1 | 11155111 | 59144 | 59141) ? (
+    <WrongNetwork />
+  ) : (
     <div className="flex min-h-screen flex-col bg-cover bg-no-repeat">
       <ToastContainer
         position="top-center"

bridge-ui/src/components/layouts/WrongNetwork.tsx

@@ -0,0 +1,55 @@
+import { switchChain } from "@wagmi/core";
+import Image from "next/image";
+import { linea, lineaSepolia, mainnet, sepolia } from "viem/chains";
+import { wagmiConfig } from "@/config";
+import { Button } from "../ui";
+
+const supportedChains = [
+  {
+    title: "Ethereum",
+    iconPath: "/images/logo/ethereum-rounded.svg",
+    chainId: mainnet.id,
+  },
+  {
+    title: "Linea Mainnet",
+    iconPath: "/images/logo/linea-mainnet.svg",
+    chainId: linea.id,
+  },
+  {
+    title: "Sepolia",
+    iconPath: "/images/logo/ethereum-rounded.svg",
+    chainId: sepolia.id,
+  },
+  {
+    title: "Linea Sepolia",
+    iconPath: "/images/logo/linea-sepolia.svg",
+    chainId: lineaSepolia.id,
+  },
+];
+
+export default function WrongNetwork() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-cover bg-no-repeat p-8">
+      <div className="flex min-w-fit flex-col items-center gap-8 rounded-lg border-2 border-card bg-cardBg p-8">
+        <span className="text-center">
+          This app doesn&apos;t support your current network. Switch to an available option to continue.
+        </span>
+        <div className="flex flex-col gap-4">
+          {supportedChains.map(({ title, iconPath, chainId }) => (
+            <div key={`dropdown-item-${title}`}>
+              <Button
+                className={"w-full justify-start"}
+                size="sm"
+                variant="outline"
+                onClick={() => switchChain(wagmiConfig, { chainId })}
+              >
+                <Image src={iconPath} alt={title} width={18} height={18} style={{ width: "18px", height: "auto" }} />
+                {title}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}