Merge pull request #24 from argentlabs/develop

release v1.0.21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starknetkit",
-  "version": "1.0.12",
+  "version": "1.0.21",
   "repository": "github:argentlabs/starknetkit",
   "private": false,
   "browser": {
@@ -104,7 +104,7 @@
     "zod": "^3.20.6"
   },
   "peerDependencies": {
-    "starknet": "5.18.0"
+    "starknet": "^5.18.0"
   },
   "gitHead": "b16688a8638cc138938e74e1a39d004760165d75"
 }

src/connectors/argentMobile/constants.ts

@@ -1 +1,15 @@
 export const DEFAULT_PROJECT_ID = "f2e613881f7a0e811295cdd57999e31b"
+
+export const DEFAULT_ARGENT_MOBILE_ICON = `<svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="32" height="32" rx="8" fill="#FF875B" />
+    <path
+      d="M18.316 8H13.684C13.5292 8 13.4052 8.1272 13.4018 8.28531C13.3082 12.7296 11.0323 16.9477 7.11513 19.9355C6.99077 20.0303 6.96243 20.2085 7.05335 20.3369L9.76349 24.1654C9.85569 24.2957 10.0353 24.3251 10.1618 24.2294C12.6111 22.3734 14.5812 20.1345 16 17.6529C17.4187 20.1345 19.389 22.3734 21.8383 24.2294C21.9646 24.3251 22.1443 24.2957 22.2366 24.1654L24.9467 20.3369C25.0375 20.2085 25.0092 20.0303 24.885 19.9355C20.9676 16.9477 18.6918 12.7296 18.5983 8.28531C18.5949 8.1272 18.4708 8 18.316 8Z"
+      fill="white"
+    />
+  </svg>`

src/connectors/argentMobile/helpers/inAppBrowser.ts

@@ -0,0 +1,13 @@
+import type { StarknetWindowObject } from "get-starknet-core"
+
+export const isInArgentMobileAppBrowser = (): boolean => {
+  if (!window?.starknet_argentX) {
+    return false
+  }
+
+  const starknetMobile = window?.starknet_argentX as StarknetWindowObject & {
+    isInAppBrowser: boolean
+  }
+
+  return starknetMobile?.isInAppBrowser
+}

src/connectors/argentMobile/helpers/index.ts

@@ -0,0 +1 @@
+export * from "./inAppBrowser"

src/connectors/argentMobile/index.ts

@@ -4,14 +4,18 @@ import type {
 } from "get-starknet-core"
 import type { AccountInterface } from "starknet"
 import { constants } from "starknet"
-import { DEFAULT_PROJECT_ID } from "./constants"
+import { DEFAULT_ARGENT_MOBILE_ICON, DEFAULT_PROJECT_ID } from "./constants"
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
   UserNotConnectedError,
 } from "../../errors"
 import { resetWalletConnect } from "../../helpers/resetWalletConnect"
-import { Connector } from "../connector"
+import {
+  Connector,
+  type ConnectorData,
+  type ConnectorIcons,
+} from "../connector"
 import type { StarknetAdapter } from "./modal/starknet/adapter"
 import { removeStarknetLastConnectedWallet } from "../../helpers/lastConnected"
 
@@ -49,23 +53,14 @@ export class ArgentMobileConnector extends Connector {
   }
 
   get name(): string {
-    return "Argent Mobile"
+    return "Argent (mobile)"
   }
 
-  get icon(): string {
-    return `<svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect width="32" height="32" rx="8" fill="#FF875B" />
-    <path
-      d="M18.316 8H13.684C13.5292 8 13.4052 8.1272 13.4018 8.28531C13.3082 12.7296 11.0323 16.9477 7.11513 19.9355C6.99077 20.0303 6.96243 20.2085 7.05335 20.3369L9.76349 24.1654C9.85569 24.2957 10.0353 24.3251 10.1618 24.2294C12.6111 22.3734 14.5812 20.1345 16 17.6529C17.4187 20.1345 19.389 22.3734 21.8383 24.2294C21.9646 24.3251 22.1443 24.2957 22.2366 24.1654L24.9467 20.3369C25.0375 20.2085 25.0092 20.0303 24.885 19.9355C20.9676 16.9477 18.6918 12.7296 18.5983 8.28531C18.5949 8.1272 18.4708 8 18.316 8Z"
-      fill="white"
-    />
-  </svg>`
+  get icon(): ConnectorIcons {
+    return {
+      dark: DEFAULT_ARGENT_MOBILE_ICON,
+      light: DEFAULT_ARGENT_MOBILE_ICON,
+    }
   }
 
   get wallet(): StarknetWindowObject {
@@ -75,14 +70,21 @@ export class ArgentMobileConnector extends Connector {
     return this._wallet
   }
 
-  async connect(): Promise<AccountInterface> {
+  async connect(): Promise<ConnectorData> {
     await this.ensureWallet()
 
     if (!this._wallet) {
       throw new ConnectorNotFoundError()
     }
 
-    return this._wallet.account as unknown as AccountInterface
+    const account = this._wallet.account as unknown as AccountInterface
+
+    const chainId = await this.chainId()
+
+    return {
+      account: account.address,
+      chainId,
+    }
   }
 
   async disconnect(): Promise<void> {
@@ -101,22 +103,24 @@ export class ArgentMobileConnector extends Connector {
     this._wallet = null
   }
 
-  async account(): Promise<AccountInterface | null> {
-    /* 
-    Don't throw an exception if the wallet is not connected. 
-    This is needed because when argentMobile and webwallet connectors are used together with starknet-react, 
-    it would always try to retrieve the account since the connectors are always available (and throw an exception since the value is null)
-
-    https://github.com/apibara/starknet-react/blob/226e4cb1d8e9b478dc57d45a98a59a57733572bb/packages/core/src/hooks/useAccount.ts#L92
-    
-   */
+  async account(): Promise<AccountInterface> {
     if (!this._wallet || !this._wallet.account) {
-      return null
+      throw new ConnectorNotConnectedError()
     }
 
     return this._wallet.account as AccountInterface
   }
 
+  async chainId(): Promise<bigint> {
+    if (!this._wallet || !this.wallet.account || !this._wallet.provider) {
+      throw new ConnectorNotConnectedError()
+    }
+
+    const chainIdHex = await this._wallet.provider.getChainId()
+    const chainId = BigInt(chainIdHex)
+    return chainId
+  }
+
   // needed, methods required by starknet-react. Otherwise an exception is throwd
   async initEventListener(accountChangeCb: AccountChangeEventHandler) {
     if (!this._wallet) {
@@ -141,7 +145,7 @@ export class ArgentMobileConnector extends Connector {
     const { getStarknetWindowObject } = await import("./modal")
     const { chainId, projectId, dappName, description, url } = this._options
     const options = {
-      chainId: chainId ?? "SN_GOERLI",
+      chainId: chainId ?? constants.NetworkName.SN_MAIN,
       name: dappName,
       projectId: projectId ?? DEFAULT_PROJECT_ID,
       description,
@@ -180,3 +184,5 @@ export class ArgentMobileConnector extends Connector {
     })
   }
 }
+
+export { isInArgentMobileAppBrowser } from "./helpers"

src/connectors/argentMobile/modal/adapter.ts

@@ -63,7 +63,7 @@ export abstract class NamespaceAdapter {
   }: SessionTypes.Struct) => {
     const chain = this.formatChainId(this.chainId)
     if (requiredNamespaces) {
-      return !!requiredNamespaces[this.namespace]?.chains.includes(chain)
+      return !!requiredNamespaces[this.namespace]?.chains?.includes(chain)
     }
     return !!namespaces?.[this.namespace]?.accounts.some((account) =>
       account.startsWith(chain),

src/connectors/argentMobile/modal/argentModal.ts

@@ -121,9 +121,11 @@ class ArgentModal {
     }
 
     if (device === "android" || device === "ios") {
-      const toMobileApp = document.createElement("a")
-      toMobileApp.setAttribute("href", urls[device])
-      toMobileApp.setAttribute("target", "_blank")
+      const toMobileApp = document.createElement("button")
+      toMobileApp.style.display = "none"
+      toMobileApp.addEventListener("click", () => {
+        window.location.href = urls[device]
+      })
       toMobileApp.click()
 
       return

src/connectors/argentMobile/modal/index.ts

@@ -11,4 +11,5 @@ export type { StarknetWindowObject, IArgentLoginOptions }
 
 export const getStarknetWindowObject = async (
   options: IArgentLoginOptions,
-): Promise<ConnectedStarknetWindowObject> => login(options, StarknetAdapter)
+): Promise<ConnectedStarknetWindowObject | null> =>
+  login(options, StarknetAdapter)

src/connectors/argentMobile/modal/login.ts

@@ -37,7 +37,14 @@ export const login = async <TAdapter extends NamespaceAdapter>(
     walletConnect,
   }: IArgentLoginOptions,
   Adapter: new (options: NamespaceAdapterOptions) => TAdapter,
-): Promise<TAdapter> => {
+): Promise<TAdapter | null> => {
+  if (!bridgeUrl) {
+    throw new Error("bridgeUrl is required")
+  }
+
+  if (!mobileUrl) {
+    throw new Error("mobileUrl is required")
+  }
   argentModal.bridgeUrl = bridgeUrl
   argentModal.mobileUrl = mobileUrl
   argentModal.type = modalType
@@ -101,6 +108,7 @@ export const login = async <TAdapter extends NamespaceAdapter>(
   } catch (error) {
     console.error("@argent/login::error")
     argentModal.closeModal()
+    return null
   }
 }
 

src/connectors/connector.ts

@@ -1,7 +1,14 @@
 import EventEmitter from "eventemitter3"
-
 import type { StarknetWindowObject } from "get-starknet-core"
-import type { AccountInterface } from "starknet"
+import { AccountInterface } from "starknet"
+
+/** Connector icons, as base64 encoded svg. */
+export type ConnectorIcons = {
+  /** Dark-mode icon. */
+  dark?: string
+  /** Light-mode icon. */
+  light?: string
+}
 
 /** Connector data. */
 export type ConnectorData = {
@@ -20,22 +27,27 @@ export interface ConnectorEvents {
   /** Emitted when connection is lost. */
   disconnect(): void
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export abstract class Connector extends EventEmitter<ConnectorEvents> {
+  /** Unique connector id. */
+  abstract get id(): string
+  /** Connector name. */
+  abstract get name(): string
+  /** Connector icons. */
+  abstract get icon(): ConnectorIcons
+
   /** Whether connector is available for use */
   abstract available(): boolean
-
   /** Whether connector is already authorized */
-  abstract ready?(): Promise<boolean>
-  abstract connect(): Promise<AccountInterface>
+  abstract ready(): Promise<boolean>
+  /** Connect wallet. */
+  abstract connect(): Promise<ConnectorData>
+  /** Disconnect wallet. */
   abstract disconnect(): Promise<void>
-  abstract account(): Promise<AccountInterface | null>
-  /** Unique connector id */
-  abstract get id(): string
-  /** Connector name */
-  abstract get name(): string
-  /** Connector icon */
-  abstract get icon(): string
+  /** Get current account. */
+  abstract account(): Promise<AccountInterface>
+  /** Get current chain id. */
+  abstract chainId(): Promise<bigint>
   /**  Connector StarknetWindowObject */
   abstract get wallet(): StarknetWindowObject
 }

src/connectors/injected/constants.ts

@@ -1 +1,6 @@
 export const ARGENT_X_ICON = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iOCIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE4LjQwMTggNy41NTU1NkgxMy41OTgyQzEzLjQzNzcgNy41NTU1NiAxMy4zMDkxIDcuNjg3NDcgMTMuMzA1NiA3Ljg1MTQzQzEzLjIwODUgMTIuNDYwMyAxMC44NDg0IDE2LjgzNDcgNi43ODYwOCAxOS45MzMxQzYuNjU3MTEgMjAuMDMxNCA2LjYyNzczIDIwLjIxNjIgNi43MjIwMiAyMC4zNDkzTDkuNTMyNTMgMjQuMzE5NkM5LjYyODE1IDI0LjQ1NDggOS44MTQ0NCAyNC40ODUzIDkuOTQ1NTggMjQuMzg2QzEyLjQ4NTYgMjIuNDYxMyAxNC41Mjg3IDIwLjEzOTUgMTYgMTcuNTY2QzE3LjQ3MTMgMjAuMTM5NSAxOS41MTQ1IDIyLjQ2MTMgMjIuMDU0NSAyNC4zODZDMjIuMTg1NiAyNC40ODUzIDIyLjM3MTkgMjQuNDU0OCAyMi40Njc2IDI0LjMxOTZMMjUuMjc4MSAyMC4zNDkzQzI1LjM3MjMgMjAuMjE2MiAyNS4zNDI5IDIwLjAzMTQgMjUuMjE0IDE5LjkzMzFDMjEuMTUxNiAxNi44MzQ3IDE4Ljc5MTUgMTIuNDYwMyAxOC42OTQ2IDcuODUxNDNDMTguNjkxMSA3LjY4NzQ3IDE4LjU2MjMgNy41NTU1NiAxOC40MDE4IDcuNTU1NTZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjQuNzIzNiAxMC40OTJMMjQuMjIzMSA4LjkyNDM5QzI0LjEyMTMgOC42MDYxNCAyMy44NzM0IDguMzU4MjQgMjMuNTU3NyA4LjI2MDIzTDIyLjAwMzkgNy43NzU5NUMyMS43ODk1IDcuNzA5MDYgMjEuNzg3MyA3LjQwMTc3IDIyLjAwMTEgNy4zMzIwMUwyMy41NDY5IDYuODI0NjZDMjMuODYwOSA2LjcyMTQ2IDI0LjEwNiA2LjQ2OTUyIDI0LjIwMjcgNi4xNTAxMUwyNC42Nzk4IDQuNTc1MDJDMjQuNzQ1OCA0LjM1NzA5IDI1LjA0ODkgNC4zNTQ3NyAyNS4xMTgzIDQuNTcxNTZMMjUuNjE4OCA2LjEzOTE1QzI1LjcyMDYgNi40NTc0IDI1Ljk2ODYgNi43MDUzMSAyNi4yODQyIDYuODAzOUwyNy44MzggNy4yODc2MUMyOC4wNTI0IDcuMzU0NSAyOC4wNTQ3IDcuNjYxNzkgMjcuODQwOCA3LjczMjEzTDI2LjI5NSA4LjIzOTQ4QzI1Ljk4MTEgOC4zNDIxIDI1LjczNiA4LjU5NDA0IDI1LjYzOTMgOC45MTQwMkwyNS4xNjIxIDEwLjQ4ODVDMjUuMDk2MSAxMC43MDY1IDI0Ljc5MyAxMC43MDg4IDI0LjcyMzYgMTAuNDkyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==`
+
+// Icons used when the injected wallet is not found and no icon is provided.
+// question-mark-circle from heroicons with color changed to black/white.
+export const WALLET_NOT_FOUND_ICON_LIGHT = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iYmxhY2siPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkuODc5IDcuNTE5YzEuMTcxLTEuMDI1IDMuMDcxLTEuMDI1IDQuMjQyIDAgMS4xNzIgMS4wMjUgMS4xNzIgMi42ODcgMCAzLjcxMi0uMjAzLjE3OS0uNDMuMzI2LS42Ny40NDItLjc0NS4zNjEtMS40NS45OTktMS40NSAxLjgyN3YuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6bS05IDUuMjVoLjAwOHYuMDA4SDEydi0uMDA4eiIgLz4KPC9zdmc+`
+export const WALLET_NOT_FOUND_ICON_DARK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0id2hpdGUiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkuODc5IDcuNTE5YzEuMTcxLTEuMDI1IDMuMDcxLTEuMDI1IDQuMjQyIDAgMS4xNzIgMS4wMjUgMS4xNzIgMi42ODcgMCAzLjcxMi0uMjAzLjE3OS0uNDMuMzI2LS42Ny40NDItLjc0NS4zNjEtMS40NS45OTktMS40NSAxLjgyN3YuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6bS05IDUuMjVoLjAwOHYuMDA4SDEydi0uMDA4eiIgLz4KPC9zdmc+Cg==`