fix: update webwallet iframe

Author: bluecco

src/connectors/webwallet/helpers/openWebwallet.ts

@@ -71,7 +71,7 @@ export const openWebwallet = async (
       existingIframe.remove()
       existingModal.remove()
     }
-    const { iframe } = await createModal(origin, false)
+    const { iframe, backdrop } = await createModal(origin, false)
 
     const iframeTrpcProxyClient = trpcProxyClient({
       iframe: iframe.contentWindow ?? undefined,
@@ -80,7 +80,7 @@ export const openWebwallet = async (
     const starknetWindowObject = await getWebWalletStarknetObject(
       origin,
       iframeTrpcProxyClient,
-      { iframe },
+      { iframe, backdrop },
     )
     return starknetWindowObject
   } else {

src/connectors/webwallet/helpers/popupSizes.ts

@@ -5,5 +5,5 @@ 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
+export const ENABLE_POPUP_WIDTH = 420
+export const ENABLE_POPUP_HEIGHT = 438

src/connectors/webwallet/helpers/trpc.ts

@@ -11,6 +11,7 @@ import {
   deployAccountContractSchema,
 } from "../../../types/window"
 import { DEFAULT_WEBWALLET_URL } from "../constants"
+import { iframeId } from "../starknetWindowObject/wormhole"
 
 const t = initTRPC.create({
   isServer: false,
@@ -53,6 +54,14 @@ export const setPopupOptions = ({
   popupParams = `width=${width},height=${height},top=${y},left=${x},toolbar=no,menubar=no,scrollbars=no,location=no,status=no,popup=1`
 }
 
+export const setIframeSize = (width: number, height: number) => {
+  const iframe = document.getElementById(iframeId) as HTMLIFrameElement
+  if (iframe) {
+    iframe.style.minWidth = `${width}px`
+    iframe.style.minHeight = `${height}px`
+  }
+}
+
 // TODO: abstract AppRouter in order to have one single source of truth
 // At the moment, this is needed
 const appRouter = t.router({
@@ -64,7 +73,6 @@ const appRouter = t.router({
     .input(
       z.object({
         theme: z.enum(["light", "dark", "auto"]).optional(),
-        featureFlagIframeProtection: z.boolean().optional(),
       }),
     )
     .output(

src/connectors/webwallet/index.ts

@@ -41,7 +41,6 @@ interface WebWalletConnectorOptions {
   theme?: Theme
   ssoToken?: string
   authorizedPartyId?: string
-  featureFlagIframeProtection?: boolean
 }
 
 export class WebWalletConnector extends Connector {
@@ -132,8 +131,6 @@ export class WebWalletConnector extends Connector {
           this._wallet as WebWalletStarknetWindowObject
         ).connectWebwallet({
           theme: this._options.theme,
-          featureFlagIframeProtection:
-            this._options.featureFlagIframeProtection,
         })
         account = connectResponse.account
         chainId = connectResponse.chainId

src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts

@@ -8,12 +8,13 @@ import type {
 import type { CreateTRPCProxyClient } from "@trpc/client"
 import type { constants } from "starknet"
 import {
+  ENABLE_POPUP_WIDTH,
   EXECUTE_POPUP_HEIGHT,
   EXECUTE_POPUP_WIDTH,
   SIGN_MESSAGE_POPUP_HEIGHT,
   SIGN_MESSAGE_POPUP_WIDTH,
 } from "../helpers/popupSizes"
-import { setPopupOptions, type AppRouter } from "../helpers/trpc"
+import { setIframeSize, setPopupOptions, type AppRouter } from "../helpers/trpc"
 
 export const userEventHandlers: WalletEvents[] = []
 
@@ -37,7 +38,6 @@ export type Theme = "light" | "dark"
 
 type ConnectWebwalletProps = {
   theme?: Theme
-  featureFlagIframeProtection?: boolean
 }
 
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
@@ -65,10 +65,10 @@ export const getArgentStarknetWindowObject = (
       return proxyLink.getLoginStatus.mutate()
     },
     connectWebwallet: (props = {}) => {
-      const { theme, featureFlagIframeProtection } = props
+      const { theme } = props
+      setIframeSize(ENABLE_POPUP_WIDTH, ENABLE_POPUP_WIDTH)
       return proxyLink.connectWebwallet.mutate({
         theme,
-        featureFlagIframeProtection,
       })
     },
     connectWebwalletSSO: (token, authorizedPartyId) => {
@@ -93,6 +93,9 @@ export const getArgentStarknetWindowObject = (
             height: SIGN_MESSAGE_POPUP_HEIGHT,
             location: isSession ? "/signSessionKeys" : "/signMessage",
           })
+
+          setIframeSize(SIGN_MESSAGE_POPUP_WIDTH, SIGN_MESSAGE_POPUP_HEIGHT)
+
           const data = Array.isArray(call.params) ? call.params : [call.params]
           return proxyLink.signTypedData.mutate(data as any)
         }
@@ -110,6 +113,8 @@ export const getArgentStarknetWindowObject = (
             location: "/review",
           })
 
+          setIframeSize(EXECUTE_POPUP_WIDTH, EXECUTE_POPUP_HEIGHT)
+
           const hash = await proxyLink.addInvokeTransaction.mutate(calls)
 
           return { transaction_hash: hash }

src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts

@@ -6,6 +6,7 @@ import { hideModal, showModal } from "./wormhole"
 
 type IframeProps = {
   iframe: HTMLIFrameElement
+  backdrop: HTMLDivElement
 }
 
 export type ModalEvents =
@@ -38,15 +39,15 @@ export const getWebWalletStarknetObject = async (
   )
 
   if (iframeProps) {
-    const { iframe } = iframeProps
+    const { iframe, backdrop } = iframeProps
     proxyLink.updateModal.subscribe(undefined, {
       onData(modalEvent: ModalEvents) {
         switch (modalEvent.action) {
           case "show":
-            showModal(iframe)
+            showModal(iframe, backdrop)
             break
           case "hide":
-            hideModal(iframe)
+            hideModal(iframe, backdrop)
             break
         }
       },

src/connectors/webwallet/starknetWindowObject/wormhole.ts

@@ -1,25 +1,36 @@
 const applyModalStyle = (iframe: HTMLIFrameElement) => {
   iframe.style.display = "none"
-  iframe.style.border = "none"
+  iframe.style.borderRadius = "40px"
   iframe.style.inset = "0"
   iframe.style.position = "fixed"
-  iframe.style.width = "100%"
-  iframe.style.height = "100%"
-  iframe.style.backgroundColor = "rgba(0,0,0,0.5);"
+  iframe.style.top = "50%"
+  iframe.style.left = "50%"
+  iframe.style.transform = "translate(-50%, -50%)"
+  iframe.style.backgroundColor = "transparent"
   iframe.style.zIndex = "999999"
 }
 
-export const showModal = (iframe: HTMLIFrameElement) => {
+export const showModal = (
+  iframe: HTMLIFrameElement,
+  backdrop: HTMLDivElement,
+) => {
   iframe.style.display = "block"
+  backdrop.style.display = "block"
 }
 
-export const hideModal = (iframe: HTMLIFrameElement) => {
+export const hideModal = (
+  iframe: HTMLIFrameElement,
+  backdrop: HTMLDivElement,
+) => {
   iframe.style.display = "none"
+  backdrop.style.display = "none"
 }
 
+export const iframeId = "argent-webwallet-iframe"
+
 export const createModal = async (targetUrl: string, shouldShow: boolean) => {
   // make sure target url has always /iframes/comms as the path
-  const iframeId = "argent-webwallet-iframe"
+  const backdropId = "argent-webwallet-backdrop"
   const url = new URL(targetUrl)
   url.pathname = "/iframes/comms"
   targetUrl = url.toString()
@@ -34,20 +45,30 @@ export const createModal = async (targetUrl: string, shouldShow: boolean) => {
     "allow-top-navigation",
     "allow-popups",
   )
-  iframe.allow = "clipboard-write allowtransparency"
+  iframe.allow = "clipboard-write"
   iframe.id = iframeId
   iframe.setAttribute("allowtransparency", "true")
   iframe.setAttribute("transparent", "true")
 
   applyModalStyle(iframe)
   iframe.style.display = shouldShow ? "block" : "none"
 
-  const existingElement = document.getElementById(iframeId)
+  const backdrop = document.createElement("div")
+  backdrop.id = backdropId
+  backdrop.style.position = "fixed"
+  backdrop.style.inset = "0"
+  backdrop.style.backgroundColor = "rgba(0,0,0,0.5)"
+  backdrop.style.zIndex = "999998"
+  backdrop.style.width = "100dvw"
+  backdrop.style.height = "100dvh"
+  backdrop.style.backdropFilter = "blur(4px)"
 
+  const existingElement = document.getElementById(iframeId)
   if (existingElement) {
     // element exists but shadowRoot cannot be accessed
     // delete the element and create new
     existingElement.remove()
+    document.getElementById(backdropId)?.remove()
   }
   window.document.body.appendChild(iframe)
 
@@ -64,5 +85,7 @@ export const createModal = async (targetUrl: string, shouldShow: boolean) => {
     })
   })
 
-  return { iframe }
+  window.document.body.appendChild(backdrop)
+
+  return { iframe, backdrop }
 }