refactor: state

src/app/starknetkitLatest/page.tsx

@@ -55,7 +55,7 @@ export default function StarknetkitLatest() {
     if (!wallet) {
       autoConnect()
     }
-  }, [])
+  }, [wallet])
 
   return (
     <Flex as="main" flexDirection="column" p="10" gap="4" w="dvw" h="100dvh">

src/app/starknetkitNext/page.tsx

@@ -63,7 +63,7 @@ export default function StarknetkitLatest() {
     if (!wallet) {
       autoConnect()
     }
-  }, [])
+  }, [wallet])
 
   return (
     <Flex as="main" flexDirection="column" p="10" gap="4" w="dvw" h="100dvh">
@@ -109,10 +109,12 @@ export default function StarknetkitLatest() {
                 </Flex>
               </Section>
             )}
-          <Flex>
-            <AddTokenNext />
-            <AddNetworkNext />
-          </Flex>
+          <Section>
+            <Flex>
+              <AddTokenNext />
+              <AddNetworkNext />
+            </Flex>
+          </Section>
           <Section>
             <WalletRpcMsgContainer wallet={wallet} />
           </Section>

src/app/withStarknetReactNext/page.tsx

@@ -1,3 +1,3 @@
 export default function StarknetReactNext() {
-  return <>todo</>
+  return <>TODO: wait for starknet-react v3</>
 }

src/components/AccountSection.tsx

@@ -1,13 +1,17 @@
-import { Box } from "@chakra-ui/react"
-import { Section } from "./Section"
-import { FC } from "react"
-import { constants } from "starknet"
-import { useAtomValue } from "jotai"
 import {
   lastTxErrorAtom,
   lastTxHashAtom,
   lastTxStatusAtom,
 } from "@/state/transactionState"
+import {
+  starknetReactVersionAtom,
+  starknetkitVersionAtom,
+} from "@/state/versionState"
+import { Box, Flex, Heading } from "@chakra-ui/react"
+import { useAtomValue } from "jotai"
+import { FC } from "react"
+import { constants } from "starknet"
+import { Section } from "./Section"
 
 interface AccountSectionProps {
   address?: string
@@ -18,23 +22,35 @@ const AccountSection: FC<AccountSectionProps> = ({ address, chainId }) => {
   const lastTxHash = useAtomValue(lastTxHashAtom)
   const lastTxStatus = useAtomValue(lastTxStatusAtom)
   const lastTxError = useAtomValue(lastTxErrorAtom)
+  const starknetkitVersion = useAtomValue(starknetkitVersionAtom)
+  const starknetReactVersion = useAtomValue(starknetReactVersionAtom)
+
   return (
-    <Section>
-      <Box>Account: {address}</Box>
-      <Box>Chain: {chainId}</Box>
-      <Box
-        cursor={lastTxHash ? "pointer" : "default"}
-        _hover={{ textDecoration: lastTxHash ? "underline" : "none" }}
-        onClick={() => {
-          if (!lastTxHash) return
-          window.open(`https://sepolia.starkscan.co/tx/${lastTxHash}`, "_blank")
-        }}
-      >
-        Last tx hash: {lastTxHash || "---"}
-      </Box>
-      <Box>Tx status: {lastTxStatus}</Box>
-      <Box color="##ff4848">{lastTxError?.toString()}</Box>
-    </Section>
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Heading>{starknetkitVersion}</Heading>
+        {starknetReactVersion && <Heading>{starknetReactVersion}</Heading>}
+      </Flex>
+      <Section>
+        <Box>Account: {address}</Box>
+        <Box>Chain: {chainId}</Box>
+        <Box
+          cursor={lastTxHash ? "pointer" : "default"}
+          _hover={{ textDecoration: lastTxHash ? "underline" : "none" }}
+          onClick={() => {
+            if (!lastTxHash) return
+            window.open(
+              `https://sepolia.starkscan.co/tx/${lastTxHash}`,
+              "_blank",
+            )
+          }}
+        >
+          Last tx hash: {lastTxHash || "---"}
+        </Box>
+        <Box>Tx status: {lastTxStatus}</Box>
+        <Box color="##ff4848">{lastTxError?.toString()}</Box>
+      </Section>
+    </>
   )
 }
 

src/components/DisconnectButton.tsx

@@ -8,6 +8,10 @@ import {
   lastTxHashAtom,
   lastTxStatusAtom,
 } from "@/state/transactionState"
+import {
+  starknetReactVersionAtom,
+  starknetkitVersionAtom,
+} from "@/state/versionState"
 import { Box, Button, Flex } from "@chakra-ui/react"
 import { useSetAtom } from "jotai"
 import { RESET } from "jotai/utils"
@@ -30,6 +34,8 @@ const DisconnectButton: FC<DisconnectButtonProps> = ({
   const setAccountSessionSignature = useSetAtom(accountSessionSignatureAtom)
   const setSessionRequest = useSetAtom(sessionRequestAtom)
   const setSessionAccount = useSetAtom(sessionAccountAtom)
+  const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
+  const setStarknetReactVersion = useSetAtom(starknetReactVersionAtom)
 
   return (
     <Flex justifyContent="flex-end">
@@ -46,7 +52,9 @@ const DisconnectButton: FC<DisconnectButtonProps> = ({
             setSessionAccount(RESET)
             setSessionRequest(RESET)
             setAccountSessionSignature(RESET)
-            navigate.replace("/")
+            setStarknetkitVersion(RESET)
+            setStarknetReactVersion(RESET)
+            navigate.push("/")
           }}
         >
           Disconnect

src/components/connect/ConnectButtonStarknetkitLatest.tsx

@@ -1,14 +1,16 @@
 import { ARGENT_WEBWALLET_URL, provider } from "@/constants"
-import { Button, Flex } from "@chakra-ui/react"
+import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
+import { starknetkitVersionAtom } from "@/state/versionState"
+import { Button } from "@chakra-ui/react"
+import { useSetAtom } from "jotai"
+import { useRouter } from "next/navigation"
 import { FC } from "react"
 import { constants } from "starknet"
 import { connect } from "starknetkit-latest"
-import { useSetAtom } from "jotai"
-import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
-import { useRouter } from "next/navigation"
 
 const ConnectButtonStarknetkitLatest: FC = () => {
   const setWallet = useSetAtom(walletStarknetkitLatestAtom)
+  const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
   const navigate = useRouter()
 
   const connectFn = async () => {
@@ -26,7 +28,9 @@ const ConnectButtonStarknetkitLatest: FC = () => {
       })
 
       setWallet(wallet)
-
+      setStarknetkitVersion(
+        `starknetkit@latest (${process.env.starknetkitLatestVersion})`,
+      )
       navigate.push("/starknetkitLatest")
     } catch (e) {
       console.error(e)

src/components/connect/ConnectButtonStarknetkitNext.tsx

@@ -4,6 +4,7 @@ import {
   connectorDataAtom,
   walletStarknetkitNextAtom,
 } from "@/state/connectedWalletStarknetkitNext"
+import { starknetkitVersionAtom } from "@/state/versionState"
 import { Button, Flex } from "@chakra-ui/react"
 import { useSetAtom } from "jotai"
 import { useRouter } from "next/navigation"
@@ -14,6 +15,7 @@ const ConnectButtonStarknetkitNext = () => {
   const setWallet = useSetAtom(walletStarknetkitNextAtom)
   const setConnectorData = useSetAtom(connectorDataAtom)
   const setConnector = useSetAtom(connectorAtom)
+  const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
   const navigate = useRouter()
 
   const connectFn = async () => {
@@ -32,7 +34,9 @@ const ConnectButtonStarknetkitNext = () => {
     setWallet(wallet)
     setConnectorData(connectorData)
     setConnector(connector)
-
+    setStarknetkitVersion(
+      `starknetkit@next (${process.env.starknetkitNextVersion})`,
+    )
     navigate.push("/starknetkitNext")
   }
 
@@ -43,7 +47,7 @@ const ConnectButtonStarknetkitNext = () => {
         rounded="lg"
         colorScheme="primary"
         onClick={connectFn}
-        h="16"
+        h="20"
         w="full"
       >
         starknetkit@next ({process.env.starknetkitNextVersion})

src/components/connect/ConnectStarknetReact.tsx

@@ -1,13 +1,20 @@
 import { availableConnectors } from "@/helpers/connectorsLatest"
+import {
+  starknetReactVersionAtom,
+  starknetkitVersionAtom,
+} from "@/state/versionState"
 import { Button, Flex, Heading, Image } from "@chakra-ui/react"
 import { useConnect } from "@starknet-react/core"
+import { useSetAtom } from "jotai"
 import React, { useEffect, useState } from "react"
 import { useStarknetkitConnectModal } from "starknetkit-latest"
 import { isInArgentMobileAppBrowser } from "starknetkit-latest/argentMobile"
 
 const ConnectStarknetReact = () => {
   const { connectAsync, connectors } = useConnect()
   const [isClient, setIsClient] = useState(false)
+  const setStarknetkitVersion = useSetAtom(starknetkitVersionAtom)
+  const setStarknetReactVersion = useSetAtom(starknetReactVersionAtom)
 
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
     connectors: availableConnectors,
@@ -49,6 +56,12 @@ const ConnectStarknetReact = () => {
               key={connector.id}
               onClick={async () => {
                 await connectAsync({ connector })
+                setStarknetkitVersion(
+                  `starknetkit@latest (${process.env.starknetkitNextVersion})`,
+                )
+                setStarknetReactVersion(
+                  `starknet-react (${process.env.starknetReactVersion})`,
+                )
               }}
               alignItems="center"
               justifyContent="flex-start"
@@ -83,6 +96,12 @@ const ConnectStarknetReact = () => {
           const { connector } = await starknetkitConnectModal()
           if (!connector) return // or throw error
           await connectAsync({ connector: connector as any })
+          setStarknetkitVersion(
+            `starknetkit@latest (${process.env.starknetkitNextVersion})`,
+          )
+          setStarknetReactVersion(
+            `starknet-react (${process.env.starknetReactVersion})`,
+          )
         }}
         alignItems="center"
         justifyContent="flex-start"

src/state/versionState.ts

@@ -0,0 +1,8 @@
+import { atomWithReset } from "jotai/utils"
+
+export const starknetkitVersionAtom = atomWithReset<string | undefined>(
+  undefined,
+)
+export const starknetReactVersionAtom = atomWithReset<string | undefined>(
+  undefined,
+)