Merge branch 'refs/heads/feat/argent-one-button-connector' into feat/…

…argent-one-button-connector-ui

package.json

@@ -27,6 +27,11 @@
       "import": "./dist/starknetkit.js",
       "require": "./dist/starknetkit.cjs"
     },
+    "./injected": {
+      "types": "./dist/injectedConnector.d.ts",
+      "import": "./dist/injectedConnector.js",
+      "require": "./dist/injectedConnector.cjs"
+    },
     "./webwallet": {
       "types": "./dist/webwalletConnector.d.ts",
       "import": "./dist/webwalletConnector.js",
@@ -37,10 +42,15 @@
       "import": "./dist/argentMobile.js",
       "require": "./dist/argentMobile.cjs"
     },
-    "./injected": {
-      "types": "./dist/injectedConnector.d.ts",
-      "import": "./dist/injectedConnector.js",
-      "require": "./dist/injectedConnector.cjs"
+    "./argentCompound": {
+      "types": "./dist/argentCompound.d.ts",
+      "import": "./dist/argentCompound.js",
+      "require": "./dist/argentCompound.cjs"
+    },
+    "./braavos": {
+      "types": "./dist/braavos.d.ts",
+      "import": "./dist/braavos.js",
+      "require": "./dist/braavos.cjs"
     },
     "./window": {
       "types": "./dist/window.d.ts",

src/connectors/argentMobile/index.ts → src/connectors/argent/argentMobile/index.ts

@@ -17,20 +17,21 @@ import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
   UserRejectedRequestError,
-} from "../../errors"
-import { getStarknetChainId } from "../../helpers/getStarknetChainId"
-import { removeStarknetLastConnectedWallet } from "../../helpers/lastConnected"
-import { getRandomPublicRPCNode } from "../../helpers/publicRcpNodes"
-import { resetWalletConnect } from "../../helpers/resetWalletConnect"
+} from "../../../errors"
+import { getStarknetChainId } from "../../../helpers/getStarknetChainId"
+import { removeStarknetLastConnectedWallet } from "../../../helpers/lastConnected"
+import { getRandomPublicRPCNode } from "../../../helpers/publicRcpNodes"
+import { resetWalletConnect } from "../../../helpers/resetWalletConnect"
 import {
   Connector,
   type ConnectorData,
   type ConnectorIcons,
-} from "../connector"
-import { InjectedConnector, InjectedConnectorOptions } from "../injected"
+} from "../../connector"
+import { InjectedConnector, InjectedConnectorOptions } from "../../injected"
 import { DEFAULT_ARGENT_MOBILE_ICON, DEFAULT_PROJECT_ID } from "./constants"
-import { isInArgentMobileAppBrowser } from "./helpers"
+import { isInArgentMobileAppBrowser } from "../helpers"
 import type { StarknetAdapter } from "./modal/starknet/adapter"
+import { ArgentX } from "../../injected/argentX"
 
 export interface ArgentMobileConnectorOptions {
   dappName: string
@@ -40,11 +41,12 @@ export interface ArgentMobileConnectorOptions {
   url: string
   icons?: string[]
   rpcUrl?: string
+  isCompoundConnector?: boolean
 }
 
 export class ArgentMobileBaseConnector extends Connector {
   private _wallet: StarknetWindowObject | null = null
-  private _options: ArgentMobileConnectorOptions
+  private readonly _options: ArgentMobileConnectorOptions
 
   constructor(options: ArgentMobileConnectorOptions) {
     super()
@@ -76,7 +78,7 @@ export class ArgentMobileBaseConnector extends Connector {
   }
 
   get name(): string {
-    return "Argent (mobile)"
+    return this._options.isCompoundConnector ? "Argent" : "Argent (mobile)" // TODO ditch isCompoundConnector
   }
 
   get icon(): ConnectorIcons {
@@ -258,9 +260,7 @@ export class ArgentMobileConnector {
     inAppBrowserOptions,
   }: ArgentMobileConnectorInitParams): Connector {
     if (isInArgentMobileAppBrowser()) {
-      return new InjectedConnector({
-        options: { id: "argentX", ...inAppBrowserOptions },
-      })
+      return new ArgentX(inAppBrowserOptions)
     } else {
       return new ArgentMobileBaseConnector(options)
     }

src/connectors/argentMobile/modal/argentModal.ts → src/connectors/argent/argentMobile/modal/argentModal.ts

@@ -68,7 +68,7 @@ class ArgentModal {
   private popupWindow?: Window
   private closingTimeout?: NodeJS.Timeout
 
-  public showConnectionModal(wcUri: string) {
+  public showWalletConnectModal(wcUri: string) {
     const wcParam = encodeURIComponent(wcUri)
     const href = encodeURIComponent(window.location.href)
 

src/connectors/argentMobile/modal/login.ts → src/connectors/argent/argentMobile/modal/login.ts

@@ -8,7 +8,7 @@ const Network: typeof constants.NetworkName = constants.NetworkName
 
 import type { NamespaceAdapter, NamespaceAdapterOptions } from "./adapter"
 import { argentModal } from "./argentModal"
-import { resetWalletConnect } from "../../../helpers/resetWalletConnect"
+import { resetWalletConnect } from "../../../../helpers/resetWalletConnect"
 
 export interface IArgentLoginOptions {
   projectId?: string
@@ -101,7 +101,7 @@ export const login = async <TAdapter extends NamespaceAdapter>(
 
     // Open QRCode modal if a URI was returned (i.e. we're not connecting an existing pairing).
     if (uri) {
-      argentModal.showConnectionModal(uri)
+      argentModal.showWalletConnectModal(uri)
       argentModal.wcUri = uri
 
       // Await session approval from the wallet.

src/connectors/argent/helpers/getInjectedArgentX.ts

@@ -0,0 +1,9 @@
+import type { StarknetWindowObject } from "@starknet-io/types-js"
+
+export function getInjectedArgentX() {
+  return window?.starknet_argentX as
+    | (StarknetWindowObject & {
+        isInAppBrowser: boolean
+      })
+    | undefined
+}

src/connectors/argent/helpers/inAppBrowser.ts

@@ -0,0 +1,15 @@
+import { getInjectedArgentX } from "./getInjectedArgentX"
+
+export const isInArgentMobileAppBrowser = (): boolean => {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  const argentX = getInjectedArgentX()
+
+  if (!argentX) {
+    return false
+  }
+
+  return argentX.isInAppBrowser
+}

src/connectors/argent/index.ts

@@ -0,0 +1,83 @@
+import { ArgentX } from "../injected/argentX"
+import {
+  ArgentMobileBaseConnector,
+  ArgentMobileConnectorOptions,
+  isInArgentMobileAppBrowser,
+} from "./argentMobile"
+
+import { getInjectedArgentX } from "./helpers/getInjectedArgentX"
+import { DEFAULT_ARGENT_MOBILE_ICON } from "./argentMobile/constants"
+import { StarknetkitCompoundConnector } from "../connector"
+
+/**
+ * Checks if window object has injected ArgentX
+ */
+function hasInjectedArgentX(): boolean {
+  return Boolean(getInjectedArgentX())
+}
+
+type ArgentCompoundSettings = ArgentMobileConnectorOptions
+
+// TODO think about naming
+//  - ArgentUnified
+//  - ArgentOneButton
+//  - ArgentCompound
+//  - Argent
+
+// TODO
+//  - get qr code
+//  - get full modal for both ux flows?
+
+export class ArgentCompound
+  extends StarknetkitCompoundConnector
+  implements StarknetkitCompoundConnector
+{
+  readonly argentX?: ArgentX
+  readonly argentMobile?: ArgentMobileBaseConnector
+
+  readonly connector: ArgentX | ArgentMobileBaseConnector
+  readonly fallbackConnector: ArgentX | ArgentMobileBaseConnector
+
+  constructor(settings: ArgentCompoundSettings) {
+    super()
+
+    this.argentX = new ArgentX({
+      name: "Argent",
+      icon: DEFAULT_ARGENT_MOBILE_ICON,
+      isCompoundConnector: true,
+    })
+    this.argentMobile = new ArgentMobileBaseConnector({
+      isCompoundConnector: true,
+      ...settings,
+    })
+
+    if (hasInjectedArgentX() || isInArgentMobileAppBrowser()) {
+      this.connector = this.argentX
+      this.fallbackConnector = this.argentMobile
+    } else {
+      this.connector = this.argentMobile
+      this.fallbackConnector = this.argentX
+    }
+  }
+
+  getArgentXConnector() {
+    return this.argentX
+  }
+
+  getArgentMobileConnector() {
+    return this.argentMobile
+  }
+}
+
+//
+// // Second way
+// const compoundConnector = new ArgentCompound({
+//   url: typeof window !== "undefined" ? window.location.href : "",
+//   dappName: "Example dapp",
+// })
+//
+// compoundConnector.getConector()
+//
+// compoundConnector.getArgentX()
+// compoundConnector.getArgentMobile()
+// compoundConnector.getFallback()

src/connectors/connector.ts

@@ -58,9 +58,20 @@ export abstract class Connector extends EventEmitter<ConnectorEvents> {
   abstract request<T extends RpcMessage["type"]>(
     call: RequestFnCall<T>,
   ): Promise<RpcTypeToMessageMap[T]["result"]>
+
+  // getConnector() { TODO?
+  //   return this
+  // }
 }
 
 export abstract class StarknetkitConnector extends Connector {
   /**  Connector StarknetWindowObject */
   abstract get wallet(): StarknetWindowObject
+  abstract isCompoundConnector?: boolean // TODO I don't need this prolly
+}
+
+export abstract class StarknetkitCompoundConnector {
+  readonly isCompoundConnector = true
+  abstract connector: StarknetkitConnector
+  abstract fallbackConnector: StarknetkitConnector
 }

src/connectors/index.ts

@@ -1,4 +1,3 @@
 export * from "./connector"
 export * from "./injected"
 export * from "./webwallet"
-export * from "./argentMobile"

src/connectors/injected/argentX.ts

@@ -0,0 +1,7 @@
+import { InjectedConnector, InjectedConnectorOptions } from "./index"
+
+export class ArgentX extends InjectedConnector {
+  constructor(options?: Omit<InjectedConnectorOptions, "id">) {
+    super({ options: { id: "argentX", ...options } })
+  }
+}

src/connectors/injected/braavos.ts

@@ -0,0 +1,7 @@
+import { InjectedConnector, InjectedConnectorOptions } from "./index"
+
+export class Braavos extends InjectedConnector {
+  constructor(options?: Omit<InjectedConnectorOptions, "id">) {
+    super({ options: { id: "braavos", ...options } })
+  }
+}

src/connectors/injected/index.ts

@@ -35,15 +35,7 @@ export interface InjectedConnectorOptions {
   name?: string
   /** Wallet icons. */
   icon?: ConnectorIcons
-}
-
-export interface InjectedConnectorOptions {
-  /** The wallet id. */
-  id: string
-  /** Wallet human readable name. */
-  name?: string
-  /** Wallet icons. */
-  icon?: ConnectorIcons
+  isCompoundConnector?: boolean
 }
 
 //  Icons used when the injected wallet is not installed
@@ -69,6 +61,7 @@ export class InjectedConnector extends Connector {
   }
 
   get name(): string {
+    console.log("HERE", this._options)
     this.ensureWallet()
     return this._options.name ?? this._wallet?.name ?? this._options.id
   }

src/helpers/defaultConnectors.ts

@@ -1,35 +1,35 @@
-import { StarknetkitConnector } from "../connectors"
 import {
-  ArgentMobileBaseConnector,
-  type ArgentMobileConnectorOptions,
-} from "../connectors/argentMobile"
-import { InjectedConnector } from "../connectors/injected"
+  StarknetkitCompoundConnector,
+  StarknetkitConnector,
+} from "../connectors"
+import { type ArgentMobileConnectorOptions } from "../connectors/argent/argentMobile"
 import { WebWalletConnector } from "../connectors/webwallet"
+import { Braavos } from "../connectors/injected/braavos"
+import { ArgentCompound } from "../connectors/argent"
 
 export const defaultConnectors = ({
   argentMobileOptions,
   webWalletUrl,
 }: {
   argentMobileOptions: ArgentMobileConnectorOptions
   webWalletUrl?: string
-}): StarknetkitConnector[] => {
+}): (StarknetkitConnector | StarknetkitCompoundConnector)[] => {
   const isSafari =
     typeof window !== "undefined"
       ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
       : false
 
-  const defaultConnectors: StarknetkitConnector[] = []
+  const defaultConnectors: (
+    | StarknetkitConnector
+    | StarknetkitCompoundConnector
+  )[] = []
+
+  defaultConnectors.push(new ArgentCompound(argentMobileOptions))
 
   if (!isSafari) {
-    defaultConnectors.push(
-      new InjectedConnector({ options: { id: "argentX" } }),
-    )
-    defaultConnectors.push(
-      new InjectedConnector({ options: { id: "braavos" } }),
-    )
+    defaultConnectors.push(new Braavos())
   }
 
-  defaultConnectors.push(new ArgentMobileBaseConnector(argentMobileOptions))
   defaultConnectors.push(new WebWalletConnector({ url: webWalletUrl }))
 
   return defaultConnectors