feat: add network switch

zCloak-Network · Feb 22, 2024 · 0577d1d · 0577d1d
1 parent ba77fb2
commit 0577d1d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/src/pages/game/_components/Header.tsx b/src/pages/game/_components/Header.tsx
@@ -16,6 +16,7 @@ import {
 } from "../_utils";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import useSolana from "../_utils/useSolana";
+import { NetworkSwitch } from "./NetworkSwitch";
 
 // eslint-disable-next-line react/display-name
 const Header = forwardRef((_props, ref) => {
@@ -178,6 +179,9 @@ const Header = forwardRef((_props, ref) => {
             </div>
           </div>
         ) : null}
+
+        <NetworkSwitch />
+
         {network !== "solana" && <w3m-button balance={"hide"} />}
         {network === "solana" && (
           <WalletMultiButton

diff --git a/src/pages/game/_components/NetworkSwitch.tsx b/src/pages/game/_components/NetworkSwitch.tsx
@@ -0,0 +1,30 @@
+import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useCurrentChain } from "../_utils";
+
+export const NetworkSwitch = () => {
+  const { open } = useWeb3Modal();
+  const chain = useCurrentChain();
+  console.log(chain);
+  return (
+    <>
+      {chain?.name ? (
+        <div
+          className="border rounded-box cursor-pointer flex font-semibold bg-[#d9eafe] border-[#4296fc] h-[30px] text-sm px-4 text-[#4296fc] z-50 relative items-center hover:opacity-80"
+          onClick={() => open({ view: "Networks" })}
+        >
+          {/*  */}
+          <svg
+            fill="currentColor"
+            viewBox="0 0 32 32"
+            className="h-[18px] mr-2 w-[18px]"
+          >
+            <g id="SVGRepo_iconCarrier">
+              <path d="M27 21.75c-0.795 0.004-1.538 0.229-2.169 0.616l0.018-0.010-2.694-2.449c0.724-1.105 1.154-2.459 1.154-3.913 0-1.572-0.503-3.027-1.358-4.212l0.015 0.021 3.062-3.062c0.57 0.316 1.249 0.503 1.971 0.508h0.002c2.347 0 4.25-1.903 4.25-4.25s-1.903-4.25-4.25-4.25c-2.347 0-4.25 1.903-4.25 4.25v0c0.005 0.724 0.193 1.403 0.519 1.995l-0.011-0.022-3.062 3.062c-1.147-0.84-2.587-1.344-4.144-1.344-0.868 0-1.699 0.157-2.467 0.443l0.049-0.016-0.644-1.17c0.726-0.757 1.173-1.787 1.173-2.921 0-2.332-1.891-4.223-4.223-4.223s-4.223 1.891-4.223 4.223c0 2.332 1.891 4.223 4.223 4.223 0.306 0 0.605-0.033 0.893-0.095l-0.028 0.005 0.642 1.166c-1.685 1.315-2.758 3.345-2.758 5.627 0 0.605 0.076 1.193 0.218 1.754l-0.011-0.049-0.667 0.283c-0.78-0.904-1.927-1.474-3.207-1.474-2.334 0-4.226 1.892-4.226 4.226s1.892 4.226 4.226 4.226c2.334 0 4.226-1.892 4.226-4.226 0-0.008-0-0.017-0-0.025v0.001c-0.008-0.159-0.023-0.307-0.046-0.451l0.003 0.024 0.667-0.283c1.303 2.026 3.547 3.349 6.1 3.349 1.703 0 3.268-0.589 4.503-1.574l-0.015 0.011 2.702 2.455c-0.258 0.526-0.41 1.144-0.414 1.797v0.001c0 2.347 1.903 4.25 4.25 4.25s4.25-1.903 4.25-4.25c0-2.347-1.903-4.25-4.25-4.25v0zM8.19 5c0-0.966 0.784-1.75 1.75-1.75s1.75 0.784 1.75 1.75c0 0.966-0.784 1.75-1.75 1.75v0c-0.966-0.001-1.749-0.784-1.75-1.75v-0zM5 22.42c-0.966-0.001-1.748-0.783-1.748-1.749s0.783-1.749 1.749-1.749c0.966 0 1.748 0.782 1.749 1.748v0c-0.001 0.966-0.784 1.749-1.75 1.75h-0zM27 3.25c0.966 0 1.75 0.784 1.75 1.75s-0.784 1.75-1.75 1.75c-0.966 0-1.75-0.784-1.75-1.75v0c0.001-0.966 0.784-1.749 1.75-1.75h0zM11.19 16c0-0.001 0-0.002 0-0.003 0-2.655 2.152-4.807 4.807-4.807 1.328 0 2.53 0.539 3.4 1.409l0.001 0.001 0.001 0.001c0.87 0.87 1.407 2.072 1.407 3.399 0 2.656-2.153 4.808-4.808 4.808s-4.808-2.153-4.808-4.808c0-0 0-0 0-0v0zM27 27.75c-0.966 0-1.75-0.784-1.75-1.75s0.784-1.75 1.75-1.75c0.966 0 1.75 0.784 1.75 1.75v0c-0.001 0.966-0.784 1.749-1.75 1.75h-0z"></path>{" "}
+            </g>
+          </svg>
+          {chain?.name}
+        </div>
+      ) : null}
+    </>
+  );
+};