chore: add switch network buttn

src/app/starknetkitLatest/page.tsx

@@ -7,13 +7,14 @@ import { Declare } from "@/components/Actions/Declare"
 import { DeployLatest } from "@/components/Actions/Deploy"
 import { MintLatest } from "@/components/Actions/Mint"
 import { SignMessageLatest } from "@/components/Actions/SignMessage"
+import { SwitchNetworkLatest } from "@/components/Actions/SwitchNetwork"
 import { TransferLatest } from "@/components/Actions/Transfer"
 import { DisconnectButton } from "@/components/DisconnectButton"
 import { Section } from "@/components/Section"
 import { ARGENT_WEBWALLET_URL, provider } from "@/constants"
 import { useWaitForTx } from "@/hooks/useWaitForTx"
 import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
-import { Flex } from "@chakra-ui/react"
+import { Flex, Switch } from "@chakra-ui/react"
 import { useAtom } from "jotai"
 import { RESET } from "jotai/utils"
 import { useRouter } from "next/navigation"
@@ -93,6 +94,7 @@ export default function StarknetkitLatest() {
             <Flex>
               <AddTokenLatest />
               <AddNetworkLatest />
+              <SwitchNetworkLatest />
             </Flex>
           </Section>
         </>

src/app/starknetkitNext/page.tsx

@@ -11,6 +11,7 @@ import { SessionKeysExecuteOutside } from "@/components/Actions/SessionKeysExecu
 import { SessionKeysSign } from "@/components/Actions/SessionKeysSign"
 import { SessionKeysTypedDataOutside } from "@/components/Actions/SessionKeysTypedDataOutside"
 import { SignMessageNext } from "@/components/Actions/SignMessage"
+import { SwitchNetworkNext } from "@/components/Actions/SwitchNetwork"
 import { TransferNext } from "@/components/Actions/Transfer"
 import { WalletRpcMsgContainer } from "@/components/Actions/WalletRpcMsgContainer"
 import { DisconnectButton } from "@/components/DisconnectButton"
@@ -137,6 +138,7 @@ export default function StarknetkitLatest() {
             <Flex>
               <AddTokenNext />
               <AddNetworkNext />
+              <SwitchNetworkNext />
             </Flex>
           </Section>
           <Section>

src/components/Actions/SwitchNetwork.tsx

@@ -0,0 +1,63 @@
+import {
+  addNetworkLatest,
+  addNetworkNext,
+  switchNetworkLatest,
+  switchNetworkNext,
+} from "@/services/addNetwork.ts"
+import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
+import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext"
+import { Flex, Heading } from "@chakra-ui/react"
+import { useAtomValue } from "jotai"
+import { FC, useState } from "react"
+
+const SwitchNetworkLatest = () => {
+  const wallet = useAtomValue(walletStarknetkitLatestAtom)
+  return (
+    <SwitchNetwork
+      switchNetworkFn={async () => await switchNetworkLatest(wallet)}
+    />
+  )
+}
+
+const SwitchNetworkNext = () => {
+  const wallet = useAtomValue(walletStarknetkitNextAtom)
+  return (
+    <SwitchNetwork
+      switchNetworkFn={async () => await switchNetworkNext(wallet)}
+    />
+  )
+}
+
+interface SwitchNetworkProps {
+  switchNetworkFn: () => Promise<void>
+}
+
+const SwitchNetwork: FC<SwitchNetworkProps> = ({ switchNetworkFn }) => {
+  const [switchNetworkError, setSwitchNetworkError] = useState("")
+
+  const handleSwitchNetwork = async () => {
+    try {
+      await switchNetworkFn()
+      setSwitchNetworkError("")
+    } catch (error) {
+      setSwitchNetworkError((error as any).message)
+    }
+  }
+
+  return (
+    <Flex direction="column" gap="3" flex="1">
+      <Heading as="h2">Network</Heading>
+      <Flex
+        as="button"
+        color="#0097fc"
+        fontWeight="bold"
+        onClick={handleSwitchNetwork}
+      >
+        Switch network
+      </Flex>
+      <span className="error-message">{switchNetworkError}</span>
+    </Flex>
+  )
+}
+
+export { SwitchNetworkLatest, SwitchNetworkNext }

src/services/addNetwork.ts.ts

@@ -18,6 +18,35 @@ export const addNetworkNext = async (
     },
   })
 }
+export const switchNetworkNext = async (
+  wallet: StarknetWindowObjectNext | undefined | null,
+) => {
+  if (!wallet) {
+    throw Error("starknet wallet not connected")
+  }
+
+  await wallet.request({
+    type: "wallet_switchStarknetChain",
+    params: {
+      chainId: "SN_DAPP_TEST",
+    },
+  })
+}
+
+export const switchNetworkLatest = async (
+  wallet: StarknetWindowObjectLatest | undefined | null,
+) => {
+  if (!wallet) {
+    throw Error("starknet wallet not connected")
+  }
+
+  await wallet.request({
+    type: "wallet_switchStarknetChain",
+    params: {
+      chainId: "SN_DAPP_TEST",
+    },
+  })
+}
 
 export const addNetworkLatest = async (
   wallet: StarknetWindowObjectLatest | undefined | null,