Add: switch mainnet and testnet

staqeprotocol · Jun 15, 2024 · d6a0dad · d6a0dad
1 parent 3b90d6a
commit d6a0dad
Show file tree

Hide file tree

Showing 7 changed files with 1,668 additions and 1,480 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.28.6",
-    "@toqen/react": "^0.0.22",
+    "@toqen/react": "^0.0.27",
     "@wagmi/connectors": "^4.1.19",
     "@wagmi/core": "^2.6.10",
     "bs58": "^5.0.0",

diff --git a/src/app/pools/page.tsx b/src/app/pools/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
 
+import { NavbarContext } from "@/src/app/providers";
 import GradientWrapper from "@/src/components/GradientWrapper";
 import Bittorrent from "@/src/components/Icons/Bittorrent";
 import Scroll from "@/src/components/Icons/Scroll";
@@ -27,6 +28,13 @@ const PoolsPage = () => {
   const [size, setSize] = useState(2);
   const [user, setUser] = useState<`0x${string}`>(ZERO_ADDRESS);
 
+  const context = useContext(NavbarContext);
+  if (!context) {
+    throw new Error("ChildComponent must be used within a NavbarProvider");
+  }
+
+  const { isMainnet, setIsMainnet } = context;
+
   useEffect(() => {
     const queryParams =
       typeof window !== "undefined"
@@ -37,6 +45,16 @@ const PoolsPage = () => {
     setUser((queryParams.get("user") || ZERO_ADDRESS) as `0x${string}`);
   }, []);
 
+  useEffect(() => {
+    if (!chains || !account) return;
+    chains.forEach((chain: any) => {
+      const isActive = account.isConnected && account.chainId === chain.id;
+      if (isActive) {
+        setIsMainnet(!chain.testnet);
+      }
+    });
+  }, [account.chainId]);
+
   const getIcon = (chainId: number) => {
     switch (chainId) {
       case 80002:
@@ -69,6 +87,12 @@ const PoolsPage = () => {
             <Bittorrent />
           </div>
         );
+      case 199:
+        return (
+          <div className="w-30">
+            <Bittorrent />
+          </div>
+        );
       case 97:
         return <BinanceSmartChain size={30} />;
       default:
@@ -81,15 +105,27 @@ const PoolsPage = () => {
   return (
     <section className="custom-screen">
       <GradientWrapper wrapperclassname="max-w-3xl h-[250px] top-12 inset-0 sm:h-[300px] lg:h-[650px]">
-        <div role="tablist" className="tabs tabs-boxed opacity-80">
+        <div
+          role="tablist"
+          className="tabs tabs-boxed opacity-80 flex justify-around items-center justify-items-center gap-2"
+        >
           {chains.map((chain: any) => {
+            if (isMainnet) {
+              if (chain.testnet) return;
+            } else {
+              if (!chain.testnet) return;
+            }
             const isActive =
               account.isConnected && account.chainId === chain.id;
             return (
               <a
                 key={chain.id}
                 role="tab"
-                className={`tab z-10 ${isActive ? `tab-active bg-black/70 !important` : `tooltip hover:scale-110`}`}
+                className={`tab z-10 ${
+                  isActive
+                    ? `tab-active bg-black/70 !important`
+                    : `tooltip hover:scale-110`
+                }`}
                 data-tip={chain.name}
                 onClick={() => switchChain({ chainId: chain.id })}
               >

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -2,7 +2,7 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
-import { useState, type ReactNode } from "react";
+import { createContext, useState, type ReactNode } from "react";
 import { WagmiProvider } from "wagmi";
 
 import { config } from "@/src/wagmi";
@@ -11,13 +11,27 @@ type Props = {
   children: ReactNode;
 };
 
+interface NavbarContextProps {
+  isMainnet: boolean;
+  setIsMainnet: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const NavbarContext = createContext<NavbarContextProps | undefined>(
+  undefined
+);
+
 export function Providers({ children }: Props) {
   const [queryClient] = useState(() => new QueryClient());
+  const [isMainnet, setIsMainnet] = useState<boolean>(false);
 
   return (
     <WagmiProvider config={config as any}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider attribute="class">{children}</ThemeProvider>
+        <ThemeProvider attribute="class">
+          <NavbarContext.Provider value={{ isMainnet, setIsMainnet }}>
+            {children}
+          </NavbarContext.Provider>
+        </ThemeProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

diff --git a/src/components/UI/Navbar/Navbar.jsx b/src/components/UI/Navbar/Navbar.jsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { NavbarContext } from "@/src/app/providers";
 import Link from "next/link";
+import { useContext } from "react";
 
 import { useAccount, useConnect, useDisconnect } from "wagmi";
 
@@ -9,6 +11,17 @@ const Navbar = () => {
   const { connectors, connect } = useConnect();
   const { disconnect } = useDisconnect();
 
+  const context = useContext(NavbarContext);
+  if (!context) {
+    throw new Error("Navbar must be used within a NavbarProvider");
+  }
+
+  const { isMainnet, setIsMainnet } = context;
+
+  const toggleNetwork = () => {
+    setIsMainnet(!isMainnet);
+  };
+
   return (
     <header className="relative">
       <div className="custom-screen navbar bg-base-100">
@@ -68,11 +81,48 @@ const Navbar = () => {
         </div>
         <div className="navbar-end mr-4">
           {accountAddress ? (
-            <div className="font-mono">{`${accountAddress.slice(0, 5)}..${accountAddress.slice(accountAddress.length - 3)}`}</div>
+            <div className="dropdown dropdown-end">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-ghost btn-sm m-1"
+              >
+                <div className="font-mono">{`${accountAddress.slice(
+                  0,
+                  5
+                )}..${accountAddress.slice(accountAddress.length - 3)}`}</div>
+              </div>
+              <ul
+                tabIndex={0}
+                className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+              >
+                <li>
+                  <div className="flex justify-between">
+                    <span>Chain ID:</span>
+                    <span>{chainId}</span>
+                  </div>
+                </li>
+                <li>
+                  <div className="flex justify-end items-center justify-items-center gap-2">
+                    <span>Testnet</span>
+                    <input
+                      type="checkbox"
+                      className="toggle toggle-md"
+                      checked={isMainnet}
+                      onChange={toggleNetwork}
+                    />
+                    <span>Mainnet</span>
+                  </div>
+                </li>
+                <li>
+                  <a onClick={() => disconnect()}>Disconnect</a>
+                </li>
+              </ul>
+            </div>
           ) : (
             <button
               onClick={() => connect({ connector: connectors[0] })}
-              className="btn"
+              className="btn btn-ghost btn-sm m-1"
             >
               Connect
             </button>