Add Sepolia network switch button

Author: tmdefi

packages/nextjs/components/helper/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx

@@ -1,8 +1,15 @@
-import { useDisconnect } from "wagmi";
-import { ArrowLeftOnRectangleIcon, ChevronDownIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { useDisconnect, useSwitchChain } from "wagmi";
+import {
+  ArrowLeftOnRectangleIcon,
+  ArrowsRightLeftIcon,
+  ChevronDownIcon,
+  ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
+import { sepolia } from "~~/utils/chains";
 
 export const WrongNetworkDropdown = () => {
   const { disconnect } = useDisconnect();
+  const { switchChain, isPending } = useSwitchChain();
 
   return (
     <div className="dropdown dropdown-end mr-2">
@@ -20,6 +27,17 @@ export const WrongNetworkDropdown = () => {
             <span>Switch to Sepolia from your wallet to use DarkONNET transactions.</span>
           </span>
         </li>
+        <li>
+          <button
+            className="smooth-action menu-item btn-sm rounded-xl! flex gap-3 py-3"
+            type="button"
+            disabled={isPending}
+            onClick={() => switchChain({ chainId: sepolia.id })}
+          >
+            <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
+            <span>{isPending ? "Opening wallet..." : "Switch to Sepolia"}</span>
+          </button>
+        </li>
         <li>
           <button
             className="smooth-action menu-item text-error btn-sm rounded-xl! flex gap-3 py-3"