Merge pull request #38 from argentlabs/BLO-1891

feat: add starknetkit hook and return connector object instead of wallet object when connecting with starknetkit

src/connectors/injected/index.ts

@@ -15,6 +15,7 @@ import {
   WALLET_NOT_FOUND_ICON_DARK,
   WALLET_NOT_FOUND_ICON_LIGHT,
 } from "./constants"
+import { removeStarknetLastConnectedWallet } from "../../helpers/lastConnected"
 /** Injected connector options. */
 export interface InjectedConnectorOptions {
   /** The wallet id. */
@@ -153,7 +154,7 @@ export class InjectedConnector extends Connector {
 
   async disconnect(): Promise<void> {
     this.ensureWallet()
-
+    removeStarknetLastConnectedWallet()
     if (!this.available()) {
       throw new ConnectorNotFoundError()
     }

src/connectors/webwallet/index.ts

@@ -18,6 +18,7 @@ import {
 } from "../../errors"
 import { DEFAULT_WEBWALLET_ICON, DEFAULT_WEBWALLET_URL } from "./constants"
 import { getWebWalletStarknetObject } from "./starknetWindowObject/getWebWalletStarknetObject"
+import { removeStarknetLastConnectedWallet } from "../../helpers/lastConnected"
 
 let _wallet: StarknetWindowObject | null = null
 
@@ -119,6 +120,7 @@ export class WebWalletConnector extends Connector {
     }
     _wallet = null
     this._wallet = _wallet
+    removeStarknetLastConnectedWallet()
   }
 
   async account(): Promise<AccountInterface> {

src/helpers/defaultConnectors.ts

@@ -16,7 +16,10 @@ export const defaultConnectors = ({
   webWalletUrl?: string
   provider?: ProviderInterface
 }): Connector[] => {
-  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  const isSafari =
+    typeof window !== "undefined"
+      ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+      : false
 
   const defaultConnectors: Connector[] = []
 

src/hooks/useStarknetkitConnectModal.ts

@@ -0,0 +1,23 @@
+import { connect } from "../main"
+import { ConnectOptions, ModalResult } from "../types/modal"
+
+type UseStarknetkitConnectors = {
+  starknetkitConnectModal: () => Promise<ModalResult>
+}
+
+const useStarknetkitConnectModal = (
+  options: Omit<ConnectOptions, "argentMobileOptions" | "webWalletUrl">,
+): UseStarknetkitConnectors => {
+  const starknetkitConnectModal = async (): Promise<ModalResult> => {
+    return await connect({
+      ...options,
+      resultType: options.resultType ?? "connector",
+    })
+  }
+
+  return {
+    starknetkitConnectModal,
+  }
+}
+
+export { useStarknetkitConnectModal }

src/main.ts

@@ -16,9 +16,9 @@ import {
 } from "./helpers/lastConnected"
 import { mapModalWallets } from "./helpers/mapModalWallets"
 import Modal from "./modal/Modal.svelte"
-import type { ConnectOptions, ModalWallet } from "./types/modal"
+import type { ConnectOptions, ModalResult, ModalWallet } from "./types/modal"
 
-import { Connector } from "./connectors"
+import { type Connector } from "./connectors"
 import css from "./theme.css?inline"
 
 let selectedConnector: Connector | null = null
@@ -31,9 +31,10 @@ export const connect = async ({
   webWalletUrl = DEFAULT_WEBWALLET_URL,
   argentMobileOptions,
   connectors = [],
+  resultType = "wallet",
   provider,
   ...restOptions
-}: ConnectOptions = {}): Promise<StarknetWindowObject | null> => {
+}: ConnectOptions = {}): Promise<ModalResult> => {
   // force null in case it was disconnected from mobile app
   selectedConnector = null
   const availableConnectors =
@@ -48,9 +49,17 @@ export const connect = async ({
   const lastWalletId = localStorage.getItem("starknetLastConnectedWallet")
   if (modalMode === "neverAsk") {
     const connector = availableConnectors.find((c) => c.id === lastWalletId)
-    await connector?.connect()
+
+    if (resultType === "wallet") {
+      await connector?.connect()
+    }
+
     selectedConnector = connector ?? null
-    return connector?.wallet ?? null
+
+    return {
+      connector,
+      wallet: connector?.wallet ?? null,
+    }
   }
 
   const installedWallets = await sn.getAvailableWallets(restOptions)
@@ -69,11 +78,19 @@ export const connect = async ({
 
     if (wallet) {
       const connector = availableConnectors.find((c) => c.id === lastWalletId)
-      await connector?.connect()
+
+      if (resultType === "wallet") {
+        await connector?.connect()
+      }
+
       if (connector) {
         selectedConnector = connector
       }
-      return wallet
+
+      return {
+        connector,
+        wallet: connector?.wallet ?? null,
+      }
     } // otherwise fallback to modal
   }
 
@@ -113,16 +130,26 @@ export const connect = async ({
       target: getTarget(),
       props: {
         dappName,
-        callback: async (value: StarknetWindowObject | null) => {
+        callback: async (connector: Connector | null) => {
           try {
-            if (value !== null && value.id !== "argentWebWallet") {
-              setStarknetLastConnectedWallet(value.id)
+            selectedConnector = connector
+
+            if (resultType === "wallet") {
+              await connector?.connect()
+
+              if (connector !== null && connector.id !== "argentWebWallet") {
+                setStarknetLastConnectedWallet(connector.id)
+              }
+
+              resolve({
+                connector,
+                wallet: connector?.wallet ?? null,
+              })
+            } else {
+              resolve({
+                connector,
+              })
             }
-            selectedConnector =
-              availableConnectors.find(
-                (c) => value !== null && c.id === value.id,
-              ) ?? null
-            resolve(value)
           } finally {
             setTimeout(() => modal.$destroy())
           }
@@ -150,7 +177,11 @@ export const disconnect = async (options: DisconnectOptions = {}) => {
 
 export type {
   ConnectedStarknetWindowObject,
+  Connector,
   DisconnectOptions,
   DisconnectedStarknetWindowObject,
   StarknetWindowObject,
+  defaultConnectors as starknetkitDefaultConnectors,
 }
+
+export { useStarknetkitConnectModal } from "./hooks/useStarknetkitConnectModal"

src/modal/Modal.svelte

@@ -5,11 +5,12 @@
   import ConnectorButton from "./ConnectorButton.svelte"
   import type { ModalWallet } from "../types/modal"
   import type { Connector } from "../connectors/connector"
+  import { InjectedConnector } from "../connectors/injected"
 
   export let dappName: string = window?.document.title ?? ""
   export let modalWallets: ModalWallet[]
   export let callback: (
-    value: StarknetWindowObject | null,
+    value: Connector | null,
   ) => Promise<void> = async () => {}
   export let theme: "light" | "dark" | null = null
 
@@ -27,8 +28,7 @@
   let cb = async (connector: Connector | null) => {
     setLoadingItem(connector?.id ?? false)
     try {
-      await connector?.connect()
-      await callback(connector?.wallet ?? null)
+      await callback(connector ?? null)
     } catch (e) {
       console.error(e)
     } finally {
@@ -50,17 +50,15 @@
 
     if (isInAppBrowser && window?.starknet_argentX) {
       try {
-        const enabledValue = await sn.enable(window?.starknet_argentX)
-        callback(enabledValue ?? window?.starknet_argentX)
+        callback(new InjectedConnector({ options: { id: "argentX" } }))
       } catch {}
       return
     }
 
     if (modalWallets.length === 1) {
       try {
         const [wallet] = modalWallets
-        await wallet.connector?.connect()
-        callback(wallet.connector.wallet)
+        await callback(wallet.connector)
       } catch (e) {
         console.error(e)
       }

src/types/modal.ts

@@ -1,4 +1,4 @@
-import type { GetWalletOptions } from "get-starknet-core"
+import type { GetWalletOptions, StarknetWindowObject } from "get-starknet-core"
 import type { Connector, ConnectorIcons } from "../connectors/connector"
 import type { ArgentMobileConnectorOptions } from "../connectors/argentMobile"
 import { ProviderInterface } from "starknet"
@@ -13,6 +13,7 @@ export interface ConnectOptions extends GetWalletOptions {
   modalTheme?: "light" | "dark" | "system"
   storeVersion?: StoreVersion | null
   webWalletUrl?: string
+  resultType?: "connector" | "wallet"
   provider?: ProviderInterface
 }
 
@@ -25,3 +26,8 @@ export type ModalWallet = {
   title?: string
   connector: Connector
 }
+
+export type ModalResult = {
+  connector: Connector
+  wallet?: StarknetWindowObject | null
+}