Merge pull request #17 from argentlabs/fix/update-latest-starknet-rea…

…ct-v2

fix: update connector and injected connector for starknet-react v2

README.md

@@ -81,6 +81,19 @@ const wallet = await connect({ modalMode: "neverAsk" })
 await disconnect({ clearLastWallet: true })
 ```
 
+## Listen to account change
+
+```js
+const selectedConnectorWallet = getSelectedConnectorWallet()
+selectedConnectorWallet.on("accountsChanged", () => {
+  setWallet(prevState => {
+    const updatedWallet = { ...prevState }
+    updatedWallet.account = selectedConnectorWallet.account
+    return updatedWallet
+  })
+})
+```
+
 ## 📕 Guides
 
 Guides can be found [here](https://www.starknetkit.com/docs)

src/connectors/connector.ts

@@ -1,15 +1,14 @@
 import EventEmitter from "eventemitter3"
 
-import type {
-  AccountChangeEventHandler,
-  StarknetWindowObject,
-} from "get-starknet-core"
+import type { StarknetWindowObject } from "get-starknet-core"
 import type { AccountInterface } from "starknet"
 
 /** Connector data. */
 export type ConnectorData = {
   /** Connector account. */
   account?: string
+  /** Connector network. */
+  chainId?: bigint
 }
 
 /** Connector events. */
@@ -30,12 +29,6 @@ export abstract class Connector extends EventEmitter<ConnectorEvents> {
   abstract ready?(): Promise<boolean>
   abstract connect(): Promise<AccountInterface>
   abstract disconnect(): Promise<void>
-  abstract initEventListener?(
-    accountChangeCb: AccountChangeEventHandler,
-  ): Promise<void>
-  abstract removeEventListener?(
-    accountChangeCb: AccountChangeEventHandler,
-  ): Promise<void>
   abstract account(): Promise<AccountInterface | null>
   /** Unique connector id */
   abstract get id(): string

src/connectors/injected/index.ts

@@ -1,9 +1,6 @@
-import type {
-  AccountChangeEventHandler,
-  StarknetWindowObject,
-} from "get-starknet-core"
+import type { StarknetWindowObject } from "get-starknet-core"
 import { getStarknet } from "get-starknet-core"
-import { AccountInterface } from "starknet"
+import { AccountInterface, constants } from "starknet"
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
@@ -41,15 +38,74 @@ export class InjectedConnector extends Connector {
     return await this._wallet.isPreauthorized()
   }
 
+  async chainId(): Promise<bigint> {
+    this.ensureWallet()
+
+    if (!this._wallet) {
+      throw new ConnectorNotConnectedError()
+    }
+
+    const chainIdHex = await this._wallet.provider.getChainId()
+    const chainId = BigInt(chainIdHex)
+    return chainId
+  }
+
+  private async onAccountsChanged(accounts: string[] | string): Promise<void> {
+    let account: string | string[]
+    if (typeof accounts === "string") {
+      account = accounts
+    } else {
+      account = accounts[0]
+    }
+
+    if (account) {
+      const chainId = await this.chainId()
+      this.emit("change", { account, chainId })
+    } else {
+      this.emit("disconnect")
+    }
+  }
+
+  private onNetworkChanged(network?: string): void {
+    switch (network) {
+      // Argent
+      case "SN_MAIN":
+        this.emit("change", {
+          chainId: BigInt(constants.StarknetChainId.SN_MAIN),
+        })
+        break
+      case "SN_GOERLI":
+        this.emit("change", {
+          chainId: BigInt(constants.StarknetChainId.SN_GOERLI),
+        })
+        break
+      // Braavos
+      case "mainnet-alpha":
+        this.emit("change", {
+          chainId: BigInt(constants.StarknetChainId.SN_MAIN),
+        })
+        break
+      case "goerli-alpha":
+        this.emit("change", {
+          chainId: BigInt(constants.StarknetChainId.SN_GOERLI),
+        })
+        break
+      default:
+        this.emit("change", {})
+        break
+    }
+  }
+
   async connect(): Promise<AccountInterface> {
     await this.ensureWallet()
 
     if (!this._wallet) {
       throw new ConnectorNotFoundError()
     }
 
+    let accounts: string[]
     try {
-      await this._wallet.enable({ starknetVersion: "v5" })
+      accounts = await this._wallet.enable({ starknetVersion: "v5" })
     } catch {
       // NOTE: Argent v3.0.0 swallows the `.enable` call on reject, so this won't get hit.
       throw new UserRejectedRequestError()
@@ -68,6 +124,21 @@ export class InjectedConnector extends Connector {
     }
     */
 
+    if (!this._wallet.isConnected || !accounts) {
+      // NOTE: Argent v3.0.0 swallows the `.enable` call on reject, so this won't get hit.
+      throw new UserRejectedRequestError()
+    }
+
+    this._wallet.on("accountsChanged", async (accounts: string[] | string) => {
+      await this.onAccountsChanged(accounts)
+    })
+
+    this._wallet.on("networkChanged", (network?: string) => {
+      this.onNetworkChanged(network)
+    })
+
+    await this.onAccountsChanged(accounts)
+
     return this._wallet.account
   }
 
@@ -122,26 +193,6 @@ export class InjectedConnector extends Connector {
     return this._wallet
   }
 
-  async initEventListener(accountChangeCb: AccountChangeEventHandler) {
-    await this.ensureWallet()
-
-    if (!this._wallet) {
-      throw new ConnectorNotConnectedError()
-    }
-
-    this._wallet.on("accountsChanged", accountChangeCb)
-  }
-
-  async removeEventListener(accountChangeCb: AccountChangeEventHandler) {
-    await this.ensureWallet()
-
-    if (!this._wallet) {
-      throw new ConnectorNotConnectedError()
-    }
-
-    this._wallet.off("accountsChanged", accountChangeCb)
-  }
-
   private async ensureWallet() {
     const starknet = getStarknet()
     const installed = await starknet.getAvailableWallets()

src/main.ts

@@ -18,7 +18,7 @@ import { mapModalWallets } from "./helpers/mapModalWallets"
 import Modal from "./modal/Modal.svelte"
 import type { ConnectOptions, ModalWallet } from "./types/modal"
 
-import { ArgentMobileConnector, Connector } from "./connectors"
+import { Connector } from "./connectors"
 import css from "./theme.css?inline"
 
 let selectedConnector: Connector | null = null
@@ -110,6 +110,10 @@ export const connect = async ({
   })
 }
 
+// Should be used after a sucessful connect
+export const getSelectedConnectorWallet = () =>
+  selectedConnector ? selectedConnector.wallet : null
+
 export const disconnect = async (options: DisconnectOptions = {}) => {
   removeStarknetLastConnectedWallet()
   await selectedConnector.disconnect()