Merge pull request #12 from argentlabs/fix/state

chore: udate starknetjs and small fixes

package.json

@@ -25,7 +25,7 @@
     "popmotion": "^11.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "starknet": "^6.7.0",
+    "starknet": "^6.9.0",
     "starknetkit-latest": "npm:starknetkit@^1.1.9",
     "starknetkit-next": "npm:starknetkit@^2.2.9"
   },

src/app/starknetkitNext/page.tsx

@@ -16,6 +16,7 @@ import { WalletRpcMsgContainer } from "@/components/Actions/WalletRpcMsgContaine
 import { DisconnectButton } from "@/components/DisconnectButton"
 import { Section } from "@/components/Section"
 import { ARGENT_WEBWALLET_URL } from "@/constants"
+import { useWaitForTx } from "@/hooks/useWaitForTx"
 import {
   connectorAtom,
   connectorDataAtom,
@@ -35,6 +36,8 @@ export default function StarknetkitLatest() {
   const setConnector = useSetAtom(connectorAtom)
   const navigate = useRouter()
 
+  useWaitForTx()
+
   useEffect(() => {
     const autoConnect = async () => {
       const {

src/app/withStarknetReactLatest/page.tsx

@@ -9,6 +9,7 @@ import { Section } from "@/components/Section"
 import { ConnectStarknetReact } from "@/components/connect/ConnectStarknetReact"
 import { CHAIN_ID } from "@/constants"
 import { availableConnectors } from "@/helpers/connectorsLatest"
+import { useWaitForTx } from "@/hooks/useWaitForTx"
 import { Flex } from "@chakra-ui/react"
 import { mainnet, sepolia } from "@starknet-react/chains"
 import {
@@ -28,6 +29,8 @@ const StarknetReactDappContent = () => {
     undefined,
   )
 
+  useWaitForTx()
+
   useEffect(() => {
     const getChainId = async () => {
       setChainId(await account?.getChainId())

src/app/withStarknetReactNext/page.tsx

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

src/components/Actions/Mint.tsx

@@ -1,4 +1,3 @@
-import { useWaitForTx } from "@/hooks/useWaitForTx"
 import { mintToken, mintTokenRcpMethod } from "@/services/mint"
 import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
 import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext"

src/components/Actions/Transfer.tsx

@@ -1,4 +1,3 @@
-import { useWaitForTx } from "@/hooks/useWaitForTx"
 import { transfer, transferJSONRpcMethod } from "@/services/transfer"
 import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest"
 import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext"
@@ -43,9 +42,11 @@ const Transfer: FC<TransferProps> = ({ account, wallet }) => {
 
       e.preventDefault()
       setTransactionStatus("approve")
+
       const { transaction_hash } = account
         ? await transfer(account as Account, transferTo, transferAmount)
         : await transferJSONRpcMethod(wallet, transferTo, transferAmount)
+
       setLastTransactionHash(transaction_hash)
       setTransactionStatus("pending")
       setTransferAmount("")

src/hooks/useWaitForTx.ts

@@ -1,11 +1,17 @@
 import { provider } from "@/constants"
-import { useEffect, useState } from "react"
+import {
+  lastTxErrorAtom,
+  lastTxHashAtom,
+  lastTxStatusAtom,
+} from "@/state/transactionState"
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { useEffect } from "react"
 import { GatewayError } from "starknet"
 
 const useWaitForTx = () => {
-  const [lastTxHash, setLastTxHash] = useState("")
-  const [lastTxStatus, setLastTxStatus] = useState("idle")
-  const [lastTxError, setLastTxError] = useState("")
+  const lastTxHash = useAtomValue(lastTxHashAtom)
+  const [lastTxStatus, setLastTxStatus] = useAtom(lastTxStatusAtom)
+  const setLastTxError = useSetAtom(lastTxErrorAtom)
 
   useEffect(() => {
     const waitTx = async () => {
@@ -24,17 +30,11 @@ const useWaitForTx = () => {
         }
       }
     }
-    waitTx()
-  }, [lastTxStatus, lastTxHash])
 
-  return {
-    lastTxHash,
-    setLastTxHash,
-    lastTxError,
-    setLastTxError,
-    lastTxStatus,
-    setLastTxStatus,
-  }
+    if (lastTxHash && lastTxStatus === "pending") {
+      waitTx()
+    }
+  }, [lastTxStatus, lastTxHash])
 }
 
 export { useWaitForTx }