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

Author: Aleksandar Cakalic

package.json

@@ -57,6 +57,16 @@
       "import": "./dist/braavos.js",
       "require": "./dist/braavos.cjs"
     },
+    "./metamask": {
+      "types": "./dist/metamask.d.ts",
+      "import": "./dist/metamask.js",
+      "require": "./dist/metamask.cjs"
+    },
+    "./keplr": {
+      "types": "./dist/keplr.d.ts",
+      "import": "./dist/keplr.js",
+      "require": "./dist/keplr.cjs"
+    },
     "./braavosMobile": {
       "types": "./dist/braavosMobile.d.ts",
       "import": "./dist/braavosMobile.js",
@@ -81,8 +91,8 @@
   ],
   "dependencies": {
     "@argent/x-ui": "^1.70.1",
-    "@starknet-io/get-starknet": "^4.0.2",
-    "@starknet-io/get-starknet-core": "^4.0.2",
+    "@starknet-io/get-starknet": "^4.0.4",
+    "@starknet-io/get-starknet-core": "^4.0.4",
     "@starknet-io/types-js": "^0.7.7",
     "@trpc/client": "^10.38.1",
     "@trpc/server": "^10.38.1",

pnpm-lock.yaml

@@ -188,12 +188,12 @@ export class StarknetAdapter
       const response = await this.client.request({ topic, chainId, request })
       argentModal.closeModal(true)
       return response
-    } catch (error) {
+    } catch (error: any) {
       argentModal.closeModal()
-      if (error instanceof Error) {
+      if (error instanceof Error || (error && error.message !== undefined)) {
         throw new Error(error.message)
       }
-      throw new Error("Unknow error on requestWallet")
+      throw new Error("Unknown error on requestWallet")
     }
   }
 

src/connectors/argent/argentMobile/modal/starknet/adapter.ts

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

src/connectors/injected/index.ts

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

src/connectors/injected/keplr.ts

@@ -61,6 +61,22 @@ const appRouter = t.router({
   }),
   connect: t.procedure.mutation(async () => ""),
   connectWebwallet: t.procedure
+    .input(
+      z.object({
+        theme: z.enum(["light", "dark", "auto"]).optional(),
+      }),
+    )
+    .output(
+      z.object({
+        account: z.string().array().optional(),
+        chainId: z.string().optional(),
+      }),
+    )
+    .mutation(async () => ({})),
+  connectWebwalletSSO: t.procedure
+    .input(
+      z.object({ token: z.string(), authorizedPartyId: z.string().optional() }),
+    )
     .output(
       z.object({
         account: z.string().array().optional(),

src/connectors/injected/metamask.ts

@@ -28,13 +28,19 @@ import {
 import { DEFAULT_WEBWALLET_ICON, DEFAULT_WEBWALLET_URL } from "./constants"
 import { openWebwallet } from "./helpers/openWebwallet"
 import { setPopupOptions } from "./helpers/trpc"
-import type { WebWalletStarknetWindowObject } from "./starknetWindowObject/argentStarknetWindowObject"
+import type {
+  Theme,
+  WebWalletStarknetWindowObject,
+} from "./starknetWindowObject/argentStarknetWindowObject"
 
 let _wallet: StarknetWindowObject | null = null
 let _address: string | null = null
 
 interface WebWalletConnectorOptions {
   url?: string
+  theme?: Theme
+  ssoToken?: string
+  authorizedPartyId?: string
 }
 
 export class WebWalletConnector extends Connector {
@@ -109,9 +115,24 @@ export class WebWalletConnector extends Connector {
     }
 
     try {
-      const { account, chainId } = await (
-        this._wallet as WebWalletStarknetWindowObject
-      ).connectWebwallet()
+      let account, chainId
+
+      if (this._options.ssoToken) {
+        const ssoReponse = await (
+          this._wallet as WebWalletStarknetWindowObject
+        ).connectWebwalletSSO(
+          this._options.ssoToken,
+          this._options.authorizedPartyId,
+        )
+        account = ssoReponse.account
+        chainId = ssoReponse.chainId
+      } else {
+        const connectResponse = await (
+          this._wallet as WebWalletStarknetWindowObject
+        ).connectWebwallet({ theme: this._options.theme })
+        account = connectResponse.account
+        chainId = connectResponse.chainId
+      }
 
       if (!account || !chainId) {
         return {}

src/connectors/webwallet/helpers/trpc.ts

@@ -33,9 +33,22 @@ export type LoginStatus = {
   isPreauthorized?: boolean
 }
 
+export type Theme = "light" | "dark"
+
+type ConnectWebwalletProps = {
+  theme?: Theme
+}
+
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
   getLoginStatus(): Promise<LoginStatus>
-  connectWebwallet(): Promise<{
+  connectWebwallet(props?: ConnectWebwalletProps): Promise<{
+    account?: string[]
+    chainId?: string
+  }>
+  connectWebwalletSSO(
+    token: string,
+    authorizedPartyId?: string,
+  ): Promise<{
     account?: string[]
     chainId?: string
   }>
@@ -50,8 +63,12 @@ export const getArgentStarknetWindowObject = (
     getLoginStatus: () => {
       return proxyLink.getLoginStatus.mutate()
     },
-    connectWebwallet: () => {
-      return proxyLink.connectWebwallet.mutate()
+    connectWebwallet: (props = {}) => {
+      const { theme } = props
+      return proxyLink.connectWebwallet.mutate({ theme })
+    },
+    connectWebwalletSSO: (token, authorizedPartyId) => {
+      return proxyLink.connectWebwalletSSO.mutate({ token, authorizedPartyId })
     },
     async request(call) {
       switch (call.type) {

src/connectors/webwallet/index.ts

@@ -20,7 +20,6 @@ const applyModalStyle = (iframe: HTMLIFrameElement) => {
   background.style.left = "0"
   background.style.right = "0"
   background.style.bottom = "0"
-  background.style.backgroundColor = "rgba(0, 0, 0, 0.5)"
   background.style.zIndex = "99999"
   ;(background.style as any).backdropFilter = "blur(4px)"