feat: upgrade argent webwallet connect with one call

src/connectors/webwallet/helpers/openWebwallet.ts

@@ -76,7 +76,7 @@ export const openWebwallet = async (
     const iframeTrpcProxyClient = trpcProxyClient({
       iframe: iframe.contentWindow ?? undefined,
     })
-    await iframeTrpcProxyClient.authorize.mutate()
+
     const starknetWindowObject = await getWebWalletStarknetObject(
       origin,
       iframeTrpcProxyClient,

src/connectors/webwallet/helpers/trpc.ts

@@ -1,3 +1,4 @@
+import { Permission } from "@starknet-io/types-js"
 import type { CreateTRPCProxyClient } from "@trpc/client"
 import { createTRPCProxyClient, loggerLink, splitLink } from "@trpc/client"
 import { initTRPC } from "@trpc/server"
@@ -10,7 +11,6 @@ import {
   deployAccountContractSchema,
 } from "../../../types/window"
 import { DEFAULT_WEBWALLET_URL } from "../constants"
-import { Permission } from "@starknet-io/types-js"
 
 const t = initTRPC.create({
   isServer: false,
@@ -60,6 +60,14 @@ const appRouter = t.router({
     return true
   }),
   connect: t.procedure.mutation(async () => ""),
+  connectWebwallet: t.procedure
+    .output(
+      z.object({
+        account: z.string().array().optional(),
+        chainId: z.string().optional(),
+      }),
+    )
+    .mutation(async () => ({})),
   enable: t.procedure.output(z.string()).mutation(async () => ""),
   execute: t.procedure
     .input(StarknetMethodArgumentsSchemas.execute)

src/connectors/webwallet/index.ts

@@ -1,9 +1,3 @@
-import {
-  AccountInterface,
-  ProviderInterface,
-  ProviderOptions,
-  WalletAccount,
-} from "starknet"
 import {
   Permission,
   RequestFnCall,
@@ -12,6 +6,12 @@ import {
   type AccountChangeEventHandler,
   type StarknetWindowObject,
 } from "@starknet-io/types-js"
+import {
+  AccountInterface,
+  ProviderInterface,
+  ProviderOptions,
+  WalletAccount,
+} from "starknet"
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
@@ -27,6 +27,7 @@ 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"
 
 let _wallet: StarknetWindowObject | null = null
 
@@ -104,26 +105,23 @@ export class WebWalletConnector extends Connector {
       throw new ConnectorNotFoundError()
     }
 
-    let accounts: string[]
-
     try {
-      accounts = await this._wallet.request({
-        type: "wallet_requestAccounts",
-        params: { silent_mode: false }, // explicit to show the modal
-      })
-    } catch {
-      throw new UserRejectedRequestError()
-    }
+      const { account, chainId } = await (
+        this._wallet as WebWalletStarknetWindowObject
+      ).connectWebwallet()
 
-    // Prevent trpc from throwing an error (closed prematurely)
-    // this happens when 2 requests to webwallet are made in a row (trpc-browser is closing the first popup and requesting a new one right after)
-    // won't be needed with chrome iframes will be enabled again (but still needed for other browsers)
-    await new Promise((r) => setTimeout(r, 200))
-    const chainId = await this.chainId()
+      if (!account || !chainId) {
+        return {}
+      }
 
-    return {
-      account: accounts[0],
-      chainId,
+      const hexChainId = getStarknetChainId(chainId)
+
+      return {
+        account: account[0],
+        chainId: BigInt(hexChainId),
+      }
+    } catch {
+      throw new UserRejectedRequestError()
     }
   }
 
@@ -209,3 +207,5 @@ export class WebWalletConnector extends Connector {
     this._wallet = _wallet
   }
 }
+
+export type { WebWalletStarknetWindowObject }

src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts

@@ -1,12 +1,12 @@
-import type { CreateTRPCProxyClient } from "@trpc/client"
-import type { constants } from "starknet"
 import type {
   AccountChangeEventHandler,
   NetworkChangeEventHandler,
   RpcTypeToMessageMap,
   StarknetWindowObject,
   WalletEvents,
 } from "@starknet-io/types-js"
+import type { CreateTRPCProxyClient } from "@trpc/client"
+import type { constants } from "starknet"
 import {
   EXECUTE_POPUP_HEIGHT,
   EXECUTE_POPUP_WIDTH,
@@ -35,7 +35,12 @@ export type LoginStatus = {
 
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
   getLoginStatus(): Promise<LoginStatus>
+  connectWebwallet(): Promise<{
+    account?: string[]
+    chainId?: string
+  }>
 }
+
 export const getArgentStarknetWindowObject = (
   options: GetArgentStarknetWindowObject,
   proxyLink: CreateTRPCProxyClient<AppRouter>,
@@ -45,6 +50,9 @@ export const getArgentStarknetWindowObject = (
     getLoginStatus: () => {
       return proxyLink.getLoginStatus.mutate()
     },
+    connectWebwallet: () => {
+      return proxyLink.connectWebwallet.mutate()
+    },
     async request(call) {
       switch (call.type) {
         case "wallet_requestAccounts": {