From eb9ca5729ffd24e1cbd9ae191ec778ef3a272755 Mon Sep 17 00:00:00 2001
From: fisher <denny.wang@itering.io>
Date: Wed, 9 Oct 2024 17:50:13 +0800
Subject: [PATCH] Support switch chain (#22)

* feat(network): add darwinia network to the app

* fix(darwinia chain): add transporter

* feat(koi and crab): add koi and crab networks

* fix(text and title): fix logo and text  changes by network changes

* first try

* fix rpc

* Test only crab

* Mainnet is needed for other components

* remove no use code

---------

Co-authored-by: Hamid Roohi <hamidroohi71@gmail.com>
---
 components/layout.tsx     |  4 ++--
 components/nav/navbar.tsx | 21 ++++++++++++++-------
 context/Web3Modal.tsx     |  8 +++++---
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/layout.tsx b/components/layout.tsx
index fce7797d..8e084c97 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -5,7 +5,7 @@ import Footer from "./footer";
 
 export const Layout: React.FC<{ children: ReactNode }> = (props) => {
   return (
-    <div className="flex flex-col items-center bg-[#000]">
+    <div className="relative flex flex-col items-center bg-[#000]">
       <div className="flex w-full flex-col items-center">
         <Image
           src="/images/1920bg1.png"
@@ -22,7 +22,7 @@ export const Layout: React.FC<{ children: ReactNode }> = (props) => {
           className="absolute left-0 right-0 top-0 h-[100vh] w-[100vw] object-contain object-left-top"
         />
         <Navbar />
-        <div className="relative z-10 flex w-full justify-center">
+        <div className="relative z-10 z-10 flex w-full justify-center">
           <span className="absolute left-0 top-0 block h-[20px] w-[20px] bg-[#fff]" />
           <div className="flex w-full flex-col items-center px-4 py-6 md:w-4/5 md:p-6 lg:w-2/3 xl:py-10 2xl:w-3/5">
             {props.children}
diff --git a/components/nav/navbar.tsx b/components/nav/navbar.tsx
index ac34622b..b81de2a9 100644
--- a/components/nav/navbar.tsx
+++ b/components/nav/navbar.tsx
@@ -7,9 +7,13 @@ import Link from "next/link";
 import { useState } from "react";
 import { MobileNavDialog } from "./mobileNavDialog";
 import { NavLink, type INavLink } from "./navLink";
+import { useChainId } from "wagmi";
 
 export const Navbar: React.FC = () => {
   const [open, setOpen] = useState(false);
+  const chainId = useChainId();
+
+  console.log("chain id", chainId);
 
   const navLinks: INavLink[] = [
     // { path: "/", id: "dashboard", name: "Dashboard", icon: IconType.APP_DASHBOARD },
@@ -23,21 +27,24 @@ export const Navbar: React.FC = () => {
 
   return (
     <>
-      <nav className="h-30 top-0 w-full flex-col gap-2 border-b border-b-neutral-100 p-3 md:px-6 md:pb-0 md:pt-5 lg:gap-3">
+      <nav className="h-30 top-0 z-10 w-full flex-col gap-2 border-b border-b-neutral-100 p-3 md:px-6 md:pb-0 md:pt-5 lg:gap-3">
         <div className="flex w-full items-center justify-between">
           <Link
             href="/"
             className={classNames(
-              "flex items-center gap-x-3 rounded-full md:rounded-lg",
+              "flex cursor-pointer items-center gap-x-3 rounded-full md:rounded-lg",
               "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles
             )}
           >
-            <Image src="/images/logo-icon.png" width="36" height="36" className="shrink-0" alt="Ring Dao" />
+            {(chainId === 46 || chainId === 701) && (
+              <Image src="/images/logo-icon.png" width="36" height="36" className="shrink-0" alt="Ring Dao" />
+            )}
             <Image src="/images/logo.png" width="100" height="36" className="shrink-0" alt="Ring Dao" />
-
-            {/* <span className="hidden py-1 text-lg font-semibold leading-tight text-[#fff] sm:block md:text-xl">
-              Aragonette
-            </span> */}
+            {chainId === 701 && (
+              <span className="hidden py-1 text-lg font-semibold leading-tight text-[#fff] sm:block md:text-xl">
+                Test Version
+              </span>
+            )}
           </Link>
           <div className="z-20 flex items-center gap-x-2">
             <div className="shrink-0">
diff --git a/context/Web3Modal.tsx b/context/Web3Modal.tsx
index 988853b4..5b1e32c0 100644
--- a/context/Web3Modal.tsx
+++ b/context/Web3Modal.tsx
@@ -10,7 +10,7 @@ import {
   PUB_WALLET_ICON,
   PUB_WEB3_ENDPOINT,
 } from "@/constants";
-import { mainnet } from "viem/chains";
+import {mainnet, darwinia, crab} from "viem/chains";
 
 // wagmi config
 const metadata = {
@@ -21,11 +21,13 @@ const metadata = {
 };
 
 export const config = createConfig({
-  chains: [PUB_CHAIN, mainnet],
+  chains: [PUB_CHAIN, mainnet, darwinia, crab],
   ssr: true,
   transports: {
     [PUB_CHAIN.id]: http(PUB_WEB3_ENDPOINT, { batch: true }),
-    [mainnet.id]: http(PUB_WEB3_ENDPOINT, { batch: true }),
+    [mainnet.id]: http(mainnet.rpcUrls.default.http[0], { batch: true }),
+    [darwinia.id]: http(darwinia.rpcUrls.default.http[0], { batch: true }),
+    [crab.id]: http(crab.rpcUrls.default.http[0], { batch: true }),
   },
   connectors: [
     walletConnect({