Feat/e2e with event

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starknet-io/get-starknet-example",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "private": true,
   "type": "module",
   "scripts": {

e2e/src/App.tsx

@@ -7,41 +7,62 @@ 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)
 
     if (selectedWalletSWO) {
       const myFrontendProviderUrl =
-        "https://free-rpc.nethermind.io/sepolia-juno/v0_7"
+        "https://free-rpc.nethermind.io/mainnet-juno/v0_7"
       const myWalletAccount = new WalletAccount(
         { nodeUrl: myFrontendProviderUrl },
         selectedWalletSWO,
       )
       setWalletAccount(myWalletAccount)
       setWallet(selectedWalletSWO)
+      setWalletChainId(
+        await selectedWalletSWO.request({
+          type: "wallet_requestChainId",
+        }),
+      )
+      setWalletAddress(myWalletAccount.address)
+      setWalletName(selectedWalletSWO?.name || "")
+      // Set the wallet globally if needed
+      window.wallet = myWalletAccount
+      window.swo = selectedWalletSWO
+      // myWalletAccount.walletProvider.on("networkChanged", (res,acc) => {
+      //   console.log(res,acc)
+      // })
     }
-
-    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 = {
@@ -55,6 +76,28 @@ function App() {
     },
   }
 
+  useEffect(() => {
+    if (!wallet) return
+
+    const handleNetworkChange = (chainId: any, accounts: any) => {
+      setWalletAddress(accounts[0])
+      setWalletChainId(chainId)
+    }
+
+    const handleAccountChange = (accounts: any) => {
+      setWalletAddress(accounts[0])
+    }
+
+    wallet.on("networkChanged", handleNetworkChange)
+    wallet.on("accountsChanged", 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
+    // }
+  }, [wallet])
+
   const methods = [
     {
       name: "wallet_watchAsset",
@@ -91,10 +134,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}`)
@@ -104,11 +157,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}`)
@@ -119,17 +182,18 @@ function App() {
     {
       name: "wallet_requestChainId",
       label: "Request Chain ID",
-      accountWallet: async () => {
-        if (walletAccount) {
-          try {
-            const response = await walletAccount.getChainId()
-            setResult(response) // Display plain text
-          } catch (error: any) {
-            console.log(error)
-            setResult(`Error: ${error.message}`)
-          }
-        }
-      },
+      accountWallet: null,
+      // accountWallet: async () => {
+      //   if (walletAccount) {
+      //     try {
+      //       const response = await walletAccount.getChainId()
+      //       setResult(response) // Display plain text
+      //     } catch (error: any) {
+      //       console.log(error)
+      //       setResult(`Error: ${error.message}`)
+      //     }
+      //   }
+      // },
       rpc: async () => {
         if (wallet) {
           try {
@@ -192,7 +256,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({
@@ -374,11 +437,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>

example/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @starknet-io/get-starknet-example
 
+## 4.0.5
+
+### Patch Changes
+
+- @starknet-io/get-starknet@4.0.5
+
+## 4.0.4
+
+### Patch Changes
+
+- @starknet-io/get-starknet@4.0.4
+
+## 4.0.3
+
+### Patch Changes
+
+- @starknet-io/get-starknet@4.0.3
+
 ## 4.0.2
 
 ### Patch Changes

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starknet-io/get-starknet-example",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -27,5 +27,5 @@
     "prettier-plugin-packagejson": "^2.2.18",
     "prettier-plugin-svelte": "^2.7.0"
   },
-  "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195"
+  "packageManager": "pnpm@8.0.0"
 }

packages/core/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @starknet-io/get-starknet-core
 
+## 4.0.5
+
+### Patch Changes
+
+- 0263b88: Decouple Virtual Wallet Discovery for async workflow
+
+## 4.0.4
+
+### Patch Changes
+
+- d2fee96: Fix loading MetaMask Virtual Wallet dynamically in WalletAccount and
+  add support for RPC APIs (wallet_supportedWalletApi and wallet_supportedSpecs)
+  in get-starknet v4 integration.
+
+## 4.0.3
+
+### Patch Changes
+
+- 93f3705: Fix MetaMask provider detection and handling in get-starknet v4
+  integration.
+
 ## 4.0.2
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starknet-io/get-starknet-core",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "keywords": [
     "starknet",
     "starkware",
@@ -31,7 +31,8 @@
   },
   "dependencies": {
     "@module-federation/runtime": "^0.1.2",
-    "@starknet-io/types-js": "^0.7.7"
+    "@starknet-io/types-js": "^0.7.7",
+    "async-mutex": "^0.5.0"
   },
   "devDependencies": {
     "c8": "^7.12.0",

packages/core/src/main.ts

@@ -13,6 +13,7 @@ import { sortBy } from "./wallet/sort"
 import {
   initiateVirtualWallets,
   resolveVirtualWallet,
+  virtualWallets,
 } from "./wallet/virtualWallets"
 import { Permission, type StarknetWindowObject } from "@starknet-io/types-js"
 
@@ -116,6 +117,29 @@ export function getStarknet(
 
       return firstAuthorizedWallet
     },
+    discoverVirtualWallets: async (
+      walletNamesOrIds: string[] = [],
+    ): Promise<void> => {
+      const walletNamesOrIdsSet = new Set(walletNamesOrIds)
+
+      const virtualWalletToDiscover =
+        walletNamesOrIdsSet.size > 0
+          ? virtualWallets.filter(
+              (virtualWallet) =>
+                walletNamesOrIdsSet.has(virtualWallet.name) ||
+                walletNamesOrIdsSet.has(virtualWallet.id),
+            )
+          : virtualWallets
+
+      await Promise.all(
+        virtualWalletToDiscover.map(async (virtualWallet) => {
+          const hasSupport = await virtualWallet.hasSupport(windowObject)
+          if (hasSupport) {
+            windowObject[virtualWallet.windowKey] = virtualWallet
+          }
+        }),
+      )
+    },
     enable: async (inputWallet, options) => {
       let wallet: StarknetWindowObject
       if (isVirtualWallet(inputWallet)) {

packages/core/src/types.ts

@@ -69,6 +69,7 @@ export interface GetStarknetResult {
   ) => Promise<StarknetWindowObject[]> // Returns only preauthorized wallets available in the window object
   getDiscoveryWallets: (options?: GetWalletOptions) => Promise<WalletProvider[]> // Returns all wallets in existence (from discovery file)
   getLastConnectedWallet: () => Promise<StarknetWindowObject | null | undefined> // Returns the last wallet connected when it's still connected
+  discoverVirtualWallets: () => Promise<void> // Discovers the virtual wallets by calling their hasSupport methods
   enable: (
     wallet: StarknetWindowObject | VirtualWallet,
     options?: RequestAccountsParameters,

packages/core/src/wallet/virtualWallets/index.ts

@@ -6,9 +6,11 @@ const virtualWallets: VirtualWallet[] = [metaMaskVirtualWallet]
 
 function initiateVirtualWallets(windowObject: Record<string, unknown>) {
   virtualWallets.forEach(async (virtualWallet) => {
-    const hasSupport = await virtualWallet.hasSupport(windowObject)
-    if (hasSupport) {
-      windowObject[virtualWallet.windowKey] = virtualWallet
+    if (!(virtualWallet.windowKey in windowObject)) {
+      const hasSupport = await virtualWallet.hasSupport(windowObject)
+      if (hasSupport) {
+        windowObject[virtualWallet.windowKey] = virtualWallet
+      }
     }
   })
 }
@@ -28,4 +30,4 @@ async function resolveVirtualWallet(
   return wallet
 }
 
-export { initiateVirtualWallets, resolveVirtualWallet }
+export { initiateVirtualWallets, resolveVirtualWallet, virtualWallets }