fix: next/image and network switch for mobile

Author: Nikuunj

components/ui/ConnectBtn.tsx

@@ -1,5 +1,6 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { motion } from "framer-motion";
+import Image from "next/image";
 
 function ConnectBtn() {
   return (
@@ -12,6 +13,8 @@ function ConnectBtn() {
         openConnectModal,
         mounted,
       }) => {
+        if (!mounted) return null;
+
         const connected = mounted && account && chain;
 
         if (!connected) {
@@ -42,24 +45,45 @@ function ConnectBtn() {
 
         return (
           <div className="flex items-center gap-2 font-bold">
-            {/* Chain Button */}
             <motion.button
               onClick={openChainModal}
               whileHover={{ scale: 1.035 }}
               whileTap={{ scale: 0.98 }}
               className="hidden items-center gap-1.5 rounded-xl bg-zinc-200 px-3 py-2 text-zinc-800 transition-colors duration-150 hover:bg-zinc-200 sm:flex dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700"
             >
               {chain.hasIcon && chain.iconUrl && (
-                <img
+                <Image
                   src={chain.iconUrl}
-                  alt={chain.name}
-                  className="h-6 w-6 shrink-0 rounded-full"
+                  alt={chain.name!}
+                  width={24}
+                  height={24}
+                  unoptimized
+                  className="shrink-0 rounded-full"
                 />
               )}
-              {/* Hidden below md, visible md+ */}
               <span className="hidden md:inline">{chain.name}</span>
               <span className="opacity-70">▾</span>
             </motion.button>
+            <motion.button
+              onClick={openChainModal}
+              whileHover={{ scale: 1.035 }}
+              whileTap={{ scale: 0.98 }}
+              className="flex items-center justify-center rounded-xl bg-zinc-200 p-2 text-zinc-800 transition-colors duration-150 hover:bg-zinc-300 sm:hidden dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700"
+              aria-label={`Switch network, current: ${chain.name}`}
+            >
+              {chain.hasIcon && chain.iconUrl ? (
+                <Image
+                  src={chain.iconUrl}
+                  alt={chain.name!}
+                  width={20}
+                  height={20}
+                  unoptimized
+                  className="shrink-0 rounded-full"
+                />
+              ) : (
+                <span className="text-xs">⛓</span>
+              )}
+            </motion.button>
 
             {/* Account Button */}
             <motion.button
@@ -68,18 +92,14 @@ function ConnectBtn() {
               whileTap={{ scale: 0.98 }}
               className="flex items-center gap-0 overflow-hidden rounded-xl bg-zinc-300 transition-colors duration-150 dark:border-zinc-700 dark:bg-zinc-800"
             >
-              {/* Balance pill */}
               {account.displayBalance && (
                 <span className="hidden bg-zinc-200 px-3 py-2 text-zinc-800 sm:inline dark:bg-zinc-900 dark:text-zinc-400">
                   {account.displayBalance}
                 </span>
               )}
-
-              {/* Address */}
               <span className="px-3 py-2 text-zinc-800 dark:text-white">
                 {account.displayName}
               </span>
-
               <span className="pr-2 text-black opacity-70 dark:text-white">
                 ▾
               </span>