Merge pull request #19 from argentlabs/BLO-1746

fix: webwallet popup size based on action

src/connectors/webwallet/helpers/popupSizes.ts

@@ -0,0 +1,12 @@
+export const OFFCHAIN_SESSION_KEYS_EXECUTE_POPUP_WIDTH = 1
+export const OFFCHAIN_SESSION_KEYS_EXECUTE_POPUP_HEIGHT = 1
+
+/* all these sizes are optimistic */
+export const EXECUTE_POPUP_WIDTH = 385
+export const EXECUTE_POPUP_HEIGHT = 775
+
+export const SIGN_MESSAGE_POPUP_WIDTH = 385
+export const SIGN_MESSAGE_POPUP_HEIGHT = 440
+
+export const ENABLE_POPUP_WIDTH = 886
+export const ENABLE_POPUP_HEIGHT = 562

src/helpers/trpc.ts → src/connectors/webwallet/helpers/trpc.ts

@@ -1,15 +1,52 @@
-import { StarknetMethodArgumentsSchemas } from "../types/window"
 import type { CreateTRPCProxyClient } from "@trpc/client"
-import { createTRPCProxyClient, splitLink, loggerLink } from "@trpc/client"
+import { createTRPCProxyClient, loggerLink, splitLink } from "@trpc/client"
 import { initTRPC } from "@trpc/server"
 import { popupLink, windowLink } from "trpc-browser/link"
 import { z } from "zod"
+import { StarknetMethodArgumentsSchemas } from "../../../types/window"
+import { DEFAULT_WEBWALLET_URL } from "../constants"
 
 const t = initTRPC.create({
   isServer: false,
   allowOutsideOfServer: true,
 })
 
+let popupOrigin = DEFAULT_WEBWALLET_URL
+let popupLocation = ""
+let popupParams = ""
+
+interface SetPopupOptions {
+  width?: number
+  height?: number
+  origin?: string
+  location?: string
+  atLeftBottom?: boolean
+}
+
+export const setPopupOptions = ({
+  width = 775,
+  height = 385,
+  origin,
+  location,
+  atLeftBottom = false,
+}: SetPopupOptions) => {
+  const parentWidth =
+    window?.outerWidth ?? window?.innerWidth ?? window?.screen.width ?? 0
+  const parentHeight =
+    window?.outerHeight ?? window?.innerHeight ?? window?.screen.height ?? 0
+  const parentLeft = window?.screenLeft ?? window?.screenX ?? 0
+  const parentTop = window?.screenTop ?? window?.screenY ?? 0
+
+  const x = atLeftBottom ? 0 : parentLeft + parentWidth / 2 - width / 2
+  const y = atLeftBottom
+    ? window.screen.availHeight + 10
+    : parentTop + parentHeight / 2 - height / 2
+
+  popupOrigin = origin ?? popupOrigin
+  popupLocation = location ?? location
+  popupParams = `width=${width},height=${height},top=${y},left=${x},toolbar=no,menubar=no,scrollbars=no,location=no,status=no,popup=1`
+}
+
 // TODO: abstract AppRouter in order to have one single source of truth
 // At the moment, this is needed
 const appRouter = t.router({
@@ -57,13 +94,11 @@ const appRouter = t.router({
 export type AppRouter = typeof appRouter
 
 type TRPCProxyClientOptions = {
-  origin: string
   iframe?: Window
 }
 
 export const trpcProxyClient = ({
   iframe,
-  origin,
 }: TRPCProxyClientOptions): CreateTRPCProxyClient<AppRouter> =>
   createTRPCProxyClient<AppRouter>({
     links: [
@@ -98,30 +133,14 @@ export const trpcProxyClient = ({
         false: popupLink({
           listenWindow: window,
           createPopup: () => {
-            const h = 562
-            const w = 886
-
             // parent is the window that opened this window; if not detected then it falls back to the current screen
-            const parentWidth =
-              window?.outerWidth ??
-              window?.innerWidth ??
-              window?.screen.width ??
-              0
-            const parentHeight =
-              window?.outerHeight ??
-              window?.innerHeight ??
-              window?.screen.height ??
-              0
-            const parentLeft = window?.screenLeft ?? window?.screenX ?? 0
-            const parentTop = window?.screenTop ?? window?.screenY ?? 0
 
-            const y = parentTop + parentHeight / 2 - h / 2
-            const x = parentLeft + parentWidth / 2 - w / 2
             const popup = window.open(
-              origin,
+              `${popupOrigin}${popupLocation}`,
               "popup",
-              `width=${w},height=${h},top=${y},left=${x},toolbar=no,menubar=no,scrollbars=no,location=no,status=no,popup=1`,
+              popupParams,
             )
+
             if (!popup) {
               throw new Error("Could not open popup")
             }

src/connectors/webwallet/index.ts

@@ -3,17 +3,17 @@ import type {
   StarknetWindowObject,
 } from "get-starknet-core"
 import type { AccountInterface } from "starknet"
-import { trpcProxyClient } from "../../helpers/trpc"
 import { Connector } from "../connector"
+import { setPopupOptions, trpcProxyClient } from "./helpers/trpc"
 
 import {
   ConnectorNotConnectedError,
   ConnectorNotFoundError,
   UserNotConnectedError,
   UserRejectedRequestError,
 } from "../../errors"
-import { getWebWalletStarknetObject } from "./starknetWindowObject/getWebWalletStarknetObject"
 import { DEFAULT_WEBWALLET_URL } from "./constants"
+import { getWebWalletStarknetObject } from "./starknetWindowObject/getWebWalletStarknetObject"
 
 let _wallet: StarknetWindowObject | null = null
 
@@ -160,10 +160,11 @@ export class WebWalletConnector extends Connector {
 
   private async ensureWallet(): Promise<void> {
     const origin = this._options.url || DEFAULT_WEBWALLET_URL
-    const wallet = await getWebWalletStarknetObject(
+    setPopupOptions({
       origin,
-      trpcProxyClient({ origin: `${origin}/interstitialLogin` }),
-    )
+      location: "/interstitialLogin",
+    })
+    const wallet = await getWebWalletStarknetObject(origin, trpcProxyClient({}))
 
     _wallet = wallet ?? null
     this._wallet = _wallet

src/connectors/webwallet/starknetWindowObject/account.ts

@@ -9,7 +9,13 @@ import {
 } from "starknet"
 import type { StarknetMethods } from "../../../types/window"
 
-import type { AppRouter } from "../../../helpers/trpc"
+import { setPopupOptions, type AppRouter } from "../helpers/trpc"
+import {
+  EXECUTE_POPUP_HEIGHT,
+  EXECUTE_POPUP_WIDTH,
+  SIGN_MESSAGE_POPUP_HEIGHT,
+  SIGN_MESSAGE_POPUP_WIDTH,
+} from "../helpers/popupSizes"
 
 class UnimplementedSigner implements SignerInterface {
   async getPubKey(): Promise<string> {
@@ -50,6 +56,20 @@ export class MessageAccount extends Account implements AccountInterface {
     transactionsDetail,
   ) => {
     try {
+      setPopupOptions({
+        width: EXECUTE_POPUP_WIDTH,
+        height: EXECUTE_POPUP_HEIGHT,
+        location: "/review",
+      })
+      if (calls[0] && calls[0].entrypoint === "use_offchain_session") {
+        setPopupOptions({
+          width: 1,
+          height: 1,
+          location: "/executeSessionTx",
+          atLeftBottom: true,
+        })
+      }
+
       const txHash = await this.proxyLink.execute.mutate([
         calls,
         abis,
@@ -70,6 +90,11 @@ export class MessageAccount extends Account implements AccountInterface {
     typedData: typedData.TypedData,
   ): Promise<Signature> => {
     try {
+      setPopupOptions({
+        width: SIGN_MESSAGE_POPUP_WIDTH,
+        height: SIGN_MESSAGE_POPUP_HEIGHT,
+        location: "/signMessage",
+      })
       return await this.proxyLink.signMessage.mutate([typedData])
     } catch (error) {
       if (error instanceof Error) {

src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts

@@ -4,12 +4,13 @@ import type {
   ConnectedStarknetWindowObject,
   NetworkChangeEventHandler,
   StarknetWindowObject,
+  WalletEvents,
 } from "get-starknet-core"
-import type { WalletEvents } from "get-starknet-core"
 import type { ProviderInterface } from "starknet"
 
+import { setPopupOptions, type AppRouter } from "../helpers/trpc"
 import { MessageAccount } from "./account"
-import type { AppRouter } from "../../../helpers/trpc"
+import { ENABLE_POPUP_HEIGHT, ENABLE_POPUP_WIDTH } from "../helpers/popupSizes"
 
 export const userEventHandlers: WalletEvents[] = []
 
@@ -73,7 +74,13 @@ export const getArgentStarknetWindowObject = (
       }
 
       try {
-        const selectedAddress: string = await proxyLink.enable.mutate()
+        setPopupOptions({
+          width: ENABLE_POPUP_WIDTH,
+          height: ENABLE_POPUP_HEIGHT,
+          location: "/interstitialLogin",
+        })
+        const enablePromise = proxyLink.enable.mutate()
+        const selectedAddress: string = await enablePromise
 
         await updateStarknetWindowObject(
           wallet,

src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts

@@ -2,7 +2,7 @@ import type { CreateTRPCProxyClient } from "@trpc/client"
 import { SequencerProvider } from "starknet"
 
 import { mapTargetUrlToNetworkId } from "../../../helpers/mapTargetUrlToNetworkId"
-import type { AppRouter } from "../../../helpers/trpc"
+import type { AppRouter } from "../helpers/trpc"
 import type { WebWalletStarknetWindowObject } from "./argentStarknetWindowObject"
 import { getArgentStarknetWindowObject } from "./argentStarknetWindowObject"