feat: add iframe protection feature flag

Author: bluecco

src/connectors/webwallet/helpers/openWebwallet.ts

@@ -63,8 +63,8 @@ export const openWebwallet = async (
     const modalId = "argent-webwallet-modal"
     const iframeId = "argent-webwallet-iframe"
 
-    const existingIframe = document.getElementById(modalId)
-    const existingModal = document.getElementById(iframeId)
+    const existingModal = document.getElementById(modalId)
+    const existingIframe = document.getElementById(iframeId)
 
     // avoid duplicate iframes
     if (existingIframe && existingIframe && existingModal) {

src/connectors/webwallet/helpers/trpc.ts

@@ -64,6 +64,7 @@ const appRouter = t.router({
     .input(
       z.object({
         theme: z.enum(["light", "dark", "auto"]).optional(),
+        featureFlagIframeProtection: z.boolean().optional(),
       }),
     )
     .output(

src/connectors/webwallet/index.ts

@@ -8,8 +8,8 @@ import {
 } from "@starknet-io/types-js"
 import {
   Account,
-  AccountInterface,
-  ProviderInterface,
+  type AccountInterface,
+  type ProviderInterface,
   type ProviderOptions,
 } from "starknet"
 import {
@@ -41,6 +41,7 @@ interface WebWalletConnectorOptions {
   theme?: Theme
   ssoToken?: string
   authorizedPartyId?: string
+  featureFlagIframeProtection?: boolean
 }
 
 export class WebWalletConnector extends Connector {
@@ -129,7 +130,11 @@ export class WebWalletConnector extends Connector {
       } else {
         const connectResponse = await (
           this._wallet as WebWalletStarknetWindowObject
-        ).connectWebwallet({ theme: this._options.theme })
+        ).connectWebwallet({
+          theme: this._options.theme,
+          featureFlagIframeProtection:
+            this._options.featureFlagIframeProtection,
+        })
         account = connectResponse.account
         chainId = connectResponse.chainId
       }

src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts

@@ -37,6 +37,7 @@ export type Theme = "light" | "dark"
 
 type ConnectWebwalletProps = {
   theme?: Theme
+  featureFlagIframeProtection?: boolean
 }
 
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
@@ -64,8 +65,11 @@ export const getArgentStarknetWindowObject = (
       return proxyLink.getLoginStatus.mutate()
     },
     connectWebwallet: (props = {}) => {
-      const { theme } = props
-      return proxyLink.connectWebwallet.mutate({ theme })
+      const { theme, featureFlagIframeProtection } = props
+      return proxyLink.connectWebwallet.mutate({
+        theme,
+        featureFlagIframeProtection,
+      })
     },
     connectWebwalletSSO: (token, authorizedPartyId) => {
       return proxyLink.connectWebwalletSSO.mutate({ token, authorizedPartyId })

src/connectors/webwallet/starknetWindowObject/wormhole.ts

@@ -39,7 +39,7 @@ export const createModal = async (targetUrl: string, shouldShow: boolean) => {
   iframe.setAttribute("allowtransparency", "true")
   iframe.setAttribute("transparent", "true")
 
-  applyModalStyle(/* modal, */ iframe)
+  applyModalStyle(iframe)
   iframe.style.display = shouldShow ? "block" : "none"
 
   const existingElement = document.getElementById(iframeId)