feat: add event management

Consensys · Nov 6, 2024 · 1360dfe · 1360dfe
1 parent dcca68a
commit 1360dfe
Showing 1 changed file with 71 additions and 17 deletions.
diff --git a/e2e/src/App.tsx b/e2e/src/App.tsx
@@ -7,17 +7,25 @@ import {
   connect,
   disconnect,
 } from "@starknet-io/get-starknet"
-import { useState } from "react"
-import { WalletAccount, constants, hash } from "starknet"
+import { useEffect, useState } from "react"
+import { WalletAccount, constants } from "starknet"
 
 // adjust path as needed
 
+type Chains = Record<string, string>
+
+const chains: Chains = {
+  [constants.StarknetChainId.SN_MAIN]: "main",
+  [constants.StarknetChainId.SN_SEPOLIA]: "testnet",
+}
+
 function App() {
   const [walletName, setWalletName] = useState("")
   const [wallet, setWallet] = useState<StarknetWindowObject | null>(null)
   const [walletAccount, setWalletAccount] = useState<WalletAccount | null>(null)
   const [walletAddress, setWalletAddress] = useState<string | null>(null)
-  const [result, setResult] = useState<string | boolean>("") // State to hold the result for display
+  const [walletChainId, setWalletChainId] = useState<string | null>(null)
+  const [result, setResult] = useState<string | boolean>("")
 
   async function handleConnect(options?: ConnectOptions) {
     const selectedWalletSWO = await connect(options)
@@ -31,23 +39,26 @@ function App() {
       )
       setWalletAccount(myWalletAccount)
       setWallet(selectedWalletSWO)
+      setWalletChainId(selectedWalletSWO.chainId)
+      setWalletAddress(selectedWalletSWO?.selectedAddress)
+      setWalletName(selectedWalletSWO?.name || "")
+      // Set the wallet globally if needed
+      window.wallet = myWalletAccount
 
-      myWalletAccount.onNetworkChanged((chainId, accounts) => {
-        console.log("Network change event")
-        console.log(chainId)
-        console.log(accounts)
+      myWalletAccount.walletProvider.on("accountsChanged", (res) => {
+        console.log(res)
       })
     }
-
-    setWalletName(selectedWalletSWO?.name || "")
   }
 
   async function handleDisconnect(options?: DisconnectOptions) {
     await disconnect(options)
     setWalletName("")
     setWallet(null)
     setWalletAddress(null)
-    setResult("") // Clear result on disconnect
+    setWalletAccount(null)
+    setWalletChainId(null)
+    setResult("")
   }
 
   const tokenToWatch = {
@@ -61,6 +72,28 @@ function App() {
     },
   }
 
+  useEffect(() => {
+    if (!walletAccount) return
+
+    const handleNetworkChange = (chainId: any, accounts: any) => {
+      setWalletAddress(accounts[0])
+      setWalletChainId(chainId)
+    }
+
+    const handleAccountChange = (accounts: any) => {
+      setWalletAddress(accounts[0])
+    }
+
+    walletAccount.onNetworkChanged(handleNetworkChange)
+    walletAccount.onAccountChange(handleAccountChange)
+
+    // Manual cleanup strategy: reset listeners on new `walletAccount`
+    return () => {
+      walletAccount.onNetworkChanged(() => {}) // Replaces the listener with a no-op
+      walletAccount.onAccountChange(() => {}) // Replaces the listener with a no-op
+    }
+  }, [walletAccount])
+
   const methods = [
     {
       name: "wallet_watchAsset",
@@ -97,10 +130,20 @@ function App() {
       accountWallet: async () => {
         if (walletAccount) {
           try {
+            const targetChainId =
+              walletChainId === constants.StarknetChainId.SN_SEPOLIA
+                ? constants.StarknetChainId.SN_MAIN
+                : constants.StarknetChainId.SN_SEPOLIA
+
             const response = await walletAccount.switchStarknetChain(
-              constants.StarknetChainId.SN_SEPOLIA,
+              targetChainId,
             )
             setResult(response) // Display plain text
+            setWalletChainId(targetChainId) // Update the local state
+            const accounts = await walletAccount?.requestAccounts()
+            if (accounts) {
+              setWalletAddress(accounts[0])
+            }
           } catch (error: any) {
             console.log(error)
             setResult(`Error: ${error.message}`)
@@ -110,11 +153,21 @@ function App() {
       rpc: async () => {
         if (wallet) {
           try {
+            const targetChainId =
+              walletChainId === constants.StarknetChainId.SN_SEPOLIA
+                ? constants.StarknetChainId.SN_MAIN
+                : constants.StarknetChainId.SN_SEPOLIA
+
             const response = await wallet.request({
               type: "wallet_switchStarknetChain",
-              params: { chainId: constants.StarknetChainId.SN_SEPOLIA },
+              params: { chainId: targetChainId },
             })
             setResult(response) // Display plain text
+            setWalletChainId(targetChainId) // Update the local state
+            const accounts = await walletAccount?.requestAccounts()
+            if (accounts) {
+              setWalletAddress(accounts[0])
+            }
           } catch (error: any) {
             console.log(error)
             setResult(`Error: ${error.message}`)
@@ -198,7 +251,6 @@ function App() {
       label: "Add Invoke Transaction",
       accountWallet: null, // Not implemented
       rpc: async () => {
-        console.log(walletAddress)
         if (wallet && walletAddress) {
           try {
             const response = await wallet.request({
@@ -380,11 +432,13 @@ function App() {
         </div>
       </div>
 
-      {walletName && (
+      {walletName && walletChainId && (
         <div>
-          <h2>
-            Selected Wallet: <pre>{walletName}</pre>
-          </h2>
+          <h4>
+            <pre>Wallet: {walletName}</pre>
+            <pre>Chain: {chains[walletChainId]}</pre>
+            <pre>Address: {walletAddress}</pre>
+          </h4>
           <div className="method-table">
             <div className="table-header">
               <span>Method Name</span>