fix: switch to base sepolia on mobile web browsers (#37)

heyJonBray · Aug 6, 2024 · c36cf75 · c36cf75
1 parent e5aeb1c
commit c36cf75
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+certificates
diff --git a/src/app/page.js b/src/app/page.js
@@ -4,17 +4,20 @@ import React from "react";
 import Lottie from "react-lottie-player";
 import lottieJson from "@/assets/animations/blue_planet.json";
 import lottieJson2 from "@/assets/animations/planet_orbit1.json";
-import TestNetCard from "@/components/guide/Testnet";
-import { Image } from "@chakra-ui/react";
+import {baseSepolia} from "thirdweb/chains";
+import {Image} from "@chakra-ui/react";
 
 import TokenTable from "@/components/testing/TokenTable";
 
 import WriteHedges from "@/components/testing/WriteHedges";
 
-import { motion } from "framer-motion";
+import {motion} from "framer-motion";
 import Footer from "@/components/Footer";
+import {useSwitchActiveWalletChain, useActiveWalletChain} from "thirdweb/react";
 
 function Page() {
+  const activeChain = useActiveWalletChain();
+  const switchChain = useSwitchActiveWalletChain();
   const glitchVariants = {
     visible: {
       textShadow: [
@@ -32,36 +35,19 @@ function Page() {
     },
   };
   const headingVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
+    hidden: {opacity: 0, y: 20},
+    visible: {opacity: 1, y: 0},
   };
   const containerVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
+    hidden: {opacity: 0, y: 20},
+    visible: {opacity: 1, y: 0},
   };
 
   const itemVariants = {
-    hidden: { opacity: 0, x: -20 },
-    visible: { opacity: 1, x: 0 },
-  };
-  const connectToBaseSepolia = () => {
-    window.ethereum.request({
-      method: "wallet_addEthereumChain",
-      params: [
-        {
-          chainId: "0x14a34",
-          rpcUrls: ["https://sepolia.base.org"],
-          chainName: "Base Sepolia Testnet",
-          nativeCurrency: {
-            name: "ETH",
-            symbol: "ETH",
-            decimals: 18,
-          },
-          blockExplorerUrls: ["https://sepolia.basescan.org/"],
-        },
-      ],
-    });
+    hidden: {opacity: 0, x: -20},
+    visible: {opacity: 1, x: 0},
   };
+
   return (
     <>
       <div className="bg-[#000] lg:min-h-[100vh] 2xl:min-h-[50vh] px-8 pt-8 max-w-screen-2xl mx-auto relative">
@@ -73,7 +59,7 @@ function Page() {
               initial="hidden"
               animate="visible"
               variants={headingVariants}
-              transition={{ duration: 0.6 }}
+              transition={{duration: 0.6}}
             >
               Xeon
             </motion.h3>
@@ -82,7 +68,7 @@ function Page() {
               initial="hidden"
               animate="visible"
               variants={headingVariants}
-              transition={{ duration: 0.6, delay: 0.2 }}
+              transition={{duration: 0.6, delay: 0.2}}
             >
               Testnet
             </motion.h3>
@@ -91,7 +77,7 @@ function Page() {
               initial="hidden"
               animate="visible"
               variants={headingVariants}
-              transition={{ duration: 0.6, delay: 0.4 }}
+              transition={{duration: 0.6, delay: 0.4}}
             >
               Guide
             </motion.h3>
@@ -131,10 +117,14 @@ function Page() {
               </p>
               <div className="flex justify-center  mt-3 w-[86%]">
                 <button
+                  disabled={activeChain?.id === baseSepolia?.id}
                   className="text-white bg-button-gradient mx-auto rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue"
-                  onClick={connectToBaseSepolia}
+                  onClick={() => switchChain(baseSepolia)}
                 >
-                  Connect to Base Sepolia
+                  {activeChain?.id !== baseSepolia?.id
+                    ? "Connect"
+                    : "Connected"}{" "}
+                  to Base Sepolia
                 </button>
               </div>
 
@@ -143,23 +133,23 @@ function Page() {
                 initial="hidden"
                 animate="visible"
                 variants={containerVariants}
-                transition={{ duration: 0.6 }}
+                transition={{duration: 0.6}}
               >
                 <motion.a
                   href="https://docs.xeon-protocol.io/documentation"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="border-2 p-1 md:p-2 border-dashed border-light-purple rounded-md text-grey text-xs md:text-base"
                   variants={itemVariants}
-                  transition={{ duration: 0.6, delay: 0.2 }}
+                  transition={{duration: 0.6, delay: 0.2}}
                 >
                   Read Manual
                 </motion.a>
                 <motion.a
                   href="/guide"
                   className="border-2 p-1 md:p-2 border-dashed border-light-purple rounded-md text-grey text-xs md:text-base"
                   variants={itemVariants}
-                  transition={{ duration: 0.6, delay: 0.4 }}
+                  transition={{duration: 0.6, delay: 0.4}}
                 >
                   Jump to Guide Page
                 </motion.a>
@@ -169,7 +159,7 @@ function Page() {
                   rel="noopener noreferrer"
                   className="border-2 p-1 md:p-2 border-dashed border-light-purple rounded-md text-grey text-xs md:text-base"
                   variants={itemVariants}
-                  transition={{ duration: 0.6, delay: 0.6 }}
+                  transition={{duration: 0.6, delay: 0.6}}
                 >
                   Telegram Support
                 </motion.a>
@@ -178,7 +168,7 @@ function Page() {
                 initial="hidden"
                 animate="visible"
                 variants={containerVariants}
-                transition={{ duration: 0.6, delay: 0.8 }}
+                transition={{duration: 0.6, delay: 0.8}}
               >
                 <p className="text-grey md:text-lg md:ml-[-20px] mt-5">{`{  Welcome to the Instruction Portal for the Neon Hedge test platform  }`}</p>
               </motion.div>

diff --git a/src/components/ConnectWallet/NetworkChecker.js b/src/components/ConnectWallet/NetworkChecker.js
@@ -6,53 +6,23 @@ import {
   useConnect,
   ConnectButton,
 } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
-import { useEffect, useState } from "react";
-import { Box, Text, Spinner, Flex } from "@chakra-ui/react";
-import { baseSepolia } from "thirdweb/chains";
+import {createWallet} from "thirdweb/wallets";
+import {useEffect, useState} from "react";
+import {Box, Text, Spinner, Flex} from "@chakra-ui/react";
+import {baseSepolia} from "thirdweb/chains";
 import Lottie from "react-lottie-player";
 import lottieJson from "@/assets/animations/planet_orbit3.json";
 import loadingLottie from "@/assets/animations/loader.json";
-import { client } from "./client";
+
+import {client} from "./client";
 
 const NetworkChecker = () => {
   const activeChain = useActiveWalletChain();
   const switchChain = useSwitchActiveWalletChain();
   const connectionStatus = useActiveWalletConnectionStatus();
-  const { connect, isConnecting, error } = useConnect();
+  const {connect, isConnecting, error} = useConnect();
   const [loading, setLoading] = useState(true);
 
-  const connectToBaseSepolia = () => {
-    console.log("Button clicked: connectToBaseSepolia");
-    if (window.ethereum) {
-      window.ethereum
-        .request({
-          method: "wallet_addEthereumChain",
-          params: [
-            {
-              chainId: "0x14a34",
-              rpcUrls: ["https://sepolia.base.org"],
-              chainName: "Base Sepolia Testnet",
-              nativeCurrency: {
-                name: "ETH",
-                symbol: "ETH",
-                decimals: 18,
-              },
-              blockExplorerUrls: ["https://sepolia.basescan.org/"],
-            },
-          ],
-        })
-        .then(() => {
-          console.log("Network switch request sent");
-        })
-        .catch((error) => {
-          console.error("Failed to switch network", error);
-        });
-    } else {
-      console.error("Ethereum object not found");
-    }
-  };
-
   useEffect(() => {
     if (connectionStatus === "unknown" || connectionStatus === "connecting") {
       return;
@@ -151,7 +121,7 @@ const NetworkChecker = () => {
         </Text>
 
         <button
-          onClick={connectToBaseSepolia}
+          onClick={() => switchChain(baseSepolia)}
           className="text-white bg-button-gradient mt-5 rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue"
         >
           Connect to Base Sepolia