From c40bbadfb75885f77d1fb8b7217d9b4d5073fd0c Mon Sep 17 00:00:00 2001 From: bluecco Date: Wed, 1 Nov 2023 15:13:18 +0100 Subject: [PATCH 1/2] fix: webwallet popup size based on action --- .../webwallet}/helpers/trpc.ts | 65 ++++++++++++------- src/connectors/webwallet/index.ts | 11 ++-- .../webwallet/starknetWindowObject/account.ts | 27 +++++++- .../argentStarknetWindowObject.ts | 14 +++- .../getWebWalletStarknetObject.ts | 2 +- 5 files changed, 86 insertions(+), 33 deletions(-) rename src/{ => connectors/webwallet}/helpers/trpc.ts (70%) diff --git a/src/helpers/trpc.ts b/src/connectors/webwallet/helpers/trpc.ts similarity index 70% rename from src/helpers/trpc.ts rename to src/connectors/webwallet/helpers/trpc.ts index b9ec4f3..3351d2c 100644 --- a/src/helpers/trpc.ts +++ b/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 => createTRPCProxyClient({ 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") } diff --git a/src/connectors/webwallet/index.ts b/src/connectors/webwallet/index.ts index 1c990c8..fdf6a93 100644 --- a/src/connectors/webwallet/index.ts +++ b/src/connectors/webwallet/index.ts @@ -3,8 +3,8 @@ 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, @@ -12,8 +12,8 @@ import { 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 { 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 diff --git a/src/connectors/webwallet/starknetWindowObject/account.ts b/src/connectors/webwallet/starknetWindowObject/account.ts index 6788940..619a55d 100644 --- a/src/connectors/webwallet/starknetWindowObject/account.ts +++ b/src/connectors/webwallet/starknetWindowObject/account.ts @@ -9,7 +9,7 @@ import { } from "starknet" import type { StarknetMethods } from "../../../types/window" -import type { AppRouter } from "../../../helpers/trpc" +import { setPopupOptions, type AppRouter } from "../helpers/trpc" class UnimplementedSigner implements SignerInterface { async getPubKey(): Promise { @@ -50,6 +50,24 @@ export class MessageAccount extends Account implements AccountInterface { transactionsDetail, ) => { try { + /* updatePopupDimensions(385, 775) + updatePopupLocation("/review") */ + setPopupOptions({ + width: 385, + height: 775, + location: "/review", + }) + if (calls[0] && calls[0].entrypoint === "use_offchain_session") { + /* updatePopupDimensions(1, 1) + updatePopupLocation("/executeSessionTx") */ + setPopupOptions({ + width: 1, + height: 1, + location: "/executeSessionTx", + atLeftBottom: true, + }) + } + const txHash = await this.proxyLink.execute.mutate([ calls, abis, @@ -70,6 +88,13 @@ export class MessageAccount extends Account implements AccountInterface { typedData: typedData.TypedData, ): Promise => { try { + /* updatePopupDimensions(385, 440) + updatePopupLocation("/signMessage") */ + setPopupOptions({ + width: 385, + height: 440, + location: "/signMessage", + }) return await this.proxyLink.signMessage.mutate([typedData]) } catch (error) { if (error instanceof Error) { diff --git a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts index d8dbcc5..472e779 100644 --- a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts +++ b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts @@ -4,12 +4,12 @@ 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" export const userEventHandlers: WalletEvents[] = [] @@ -73,7 +73,15 @@ export const getArgentStarknetWindowObject = ( } try { - const selectedAddress: string = await proxyLink.enable.mutate() + /* updatePopupDimensions(886, 562) + updatePopupLocation("/interstitialLogin") */ + setPopupOptions({ + width: 886, + height: 562, + location: "/interstitialLogin", + }) + const enablePromise = proxyLink.enable.mutate() + const selectedAddress: string = await enablePromise await updateStarknetWindowObject( wallet, diff --git a/src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts b/src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts index 0e5f35c..ffca03d 100644 --- a/src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts +++ b/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" From 7080ade727a5820982f52636ee34335c34b28b90 Mon Sep 17 00:00:00 2001 From: bluecco Date: Thu, 2 Nov 2023 18:09:30 +0100 Subject: [PATCH 2/2] chore: refactor popup sizes with constants --- .../webwallet/helpers/popupSizes.ts | 12 +++++++++++ .../webwallet/starknetWindowObject/account.ts | 20 +++++++++---------- .../argentStarknetWindowObject.ts | 7 +++---- 3 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 src/connectors/webwallet/helpers/popupSizes.ts diff --git a/src/connectors/webwallet/helpers/popupSizes.ts b/src/connectors/webwallet/helpers/popupSizes.ts new file mode 100644 index 0000000..6bc46cb --- /dev/null +++ b/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 diff --git a/src/connectors/webwallet/starknetWindowObject/account.ts b/src/connectors/webwallet/starknetWindowObject/account.ts index 619a55d..2fde840 100644 --- a/src/connectors/webwallet/starknetWindowObject/account.ts +++ b/src/connectors/webwallet/starknetWindowObject/account.ts @@ -10,6 +10,12 @@ import { import type { StarknetMethods } from "../../../types/window" 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 { @@ -50,16 +56,12 @@ export class MessageAccount extends Account implements AccountInterface { transactionsDetail, ) => { try { - /* updatePopupDimensions(385, 775) - updatePopupLocation("/review") */ setPopupOptions({ - width: 385, - height: 775, + width: EXECUTE_POPUP_WIDTH, + height: EXECUTE_POPUP_HEIGHT, location: "/review", }) if (calls[0] && calls[0].entrypoint === "use_offchain_session") { - /* updatePopupDimensions(1, 1) - updatePopupLocation("/executeSessionTx") */ setPopupOptions({ width: 1, height: 1, @@ -88,11 +90,9 @@ export class MessageAccount extends Account implements AccountInterface { typedData: typedData.TypedData, ): Promise => { try { - /* updatePopupDimensions(385, 440) - updatePopupLocation("/signMessage") */ setPopupOptions({ - width: 385, - height: 440, + width: SIGN_MESSAGE_POPUP_WIDTH, + height: SIGN_MESSAGE_POPUP_HEIGHT, location: "/signMessage", }) return await this.proxyLink.signMessage.mutate([typedData]) diff --git a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts index 472e779..6b1984b 100644 --- a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts +++ b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts @@ -10,6 +10,7 @@ import type { ProviderInterface } from "starknet" import { setPopupOptions, type AppRouter } from "../helpers/trpc" import { MessageAccount } from "./account" +import { ENABLE_POPUP_HEIGHT, ENABLE_POPUP_WIDTH } from "../helpers/popupSizes" export const userEventHandlers: WalletEvents[] = [] @@ -73,11 +74,9 @@ export const getArgentStarknetWindowObject = ( } try { - /* updatePopupDimensions(886, 562) - updatePopupLocation("/interstitialLogin") */ setPopupOptions({ - width: 886, - height: 562, + width: ENABLE_POPUP_WIDTH, + height: ENABLE_POPUP_HEIGHT, location: "/interstitialLogin", }) const enablePromise = proxyLink.enable.mutate()