[HOLD] Beta argent ww iframe

.github/workflows/release.yml

@@ -5,6 +5,7 @@ on:
       - develop
       - main
       - beta-braavos-mobile
+      - beta-argent-ww-iframe
       - hotfix\/v[0-9]+.[0-9]+.[0-9]+
 
 jobs:

.releaserc

@@ -12,6 +12,10 @@
     {
       "name": "beta-braavos-mobile",
       "prerelease": true
+    },
+    {
+      "name": "beta-argent-ww-iframe",
+      "prerelease": true
     }
   ],
   "plugins": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starknetkit",
-  "version": "2.5.0",
+  "version": "2.5.1-beta-argent-ww-iframe.1",
   "repository": "github:argentlabs/starknetkit",
   "private": false,
   "browser": {

src/connectors/webwallet/helpers/openWebwallet.ts

@@ -71,7 +71,7 @@ export const openWebwallet = async (
       existingIframe.remove()
       existingModal.remove()
     }
-    const { iframe, modal } = await createModal(origin, false)
+    const { iframe } = 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,
-      { modal, iframe },
+      { iframe },
     )
     return starknetWindowObject
   } else {

src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts

@@ -2,16 +2,9 @@ import type { CreateTRPCProxyClient } from "@trpc/client"
 import type { AppRouter } from "../helpers/trpc"
 import type { WebWalletStarknetWindowObject } from "./argentStarknetWindowObject"
 import { getArgentStarknetWindowObject } from "./argentStarknetWindowObject"
-import {
-  hideModal,
-  setIframeHeight,
-  setIframeSize,
-  setIframeWidth,
-  showModal,
-} from "./wormhole"
+import { hideModal, showModal } from "./wormhole"
 
 type IframeProps = {
-  modal: HTMLDivElement
   iframe: HTMLIFrameElement
 }
 
@@ -45,24 +38,15 @@ export const getWebWalletStarknetObject = async (
   )
 
   if (iframeProps) {
-    const { iframe, modal } = iframeProps
+    const { iframe } = iframeProps
     proxyLink.updateModal.subscribe(undefined, {
       onData(modalEvent: ModalEvents) {
         switch (modalEvent.action) {
           case "show":
-            showModal(modal)
+            showModal(iframe)
             break
           case "hide":
-            hideModal(modal)
-            break
-          case "updateHeight":
-            setIframeHeight(iframe, modalEvent.height)
-            break
-          case "updateWidth":
-            setIframeWidth(iframe, modalEvent.width)
-            break
-          case "updateSize":
-            setIframeSize(iframe, modalEvent.width, modalEvent.height)
+            hideModal(iframe)
             break
         }
       },

src/connectors/webwallet/starknetWindowObject/wormhole.ts

@@ -1,61 +1,25 @@
 const applyModalStyle = (iframe: HTMLIFrameElement) => {
-  // middle of the screen
-  iframe.style.position = "fixed"
-  iframe.style.top = "50%"
-  iframe.style.left = "50%"
-  iframe.style.transform = "translate(-50%, -50%)"
-  iframe.style.width = "380px"
-  iframe.style.height = "420px"
+  iframe.style.display = "none"
   iframe.style.border = "none"
-
-  // round corners
-  iframe.style.borderRadius = "40px"
-  // box shadow
-  iframe.style.boxShadow = "0px 4px 20px rgba(0, 0, 0, 0.5)"
-
-  const background = document.createElement("div")
-  background.style.display = "none"
-  background.style.position = "fixed"
-  background.style.top = "0"
-  background.style.left = "0"
-  background.style.right = "0"
-  background.style.bottom = "0"
-  background.style.backgroundColor = "rgba(0, 0, 0, 0.5)"
-  background.style.zIndex = "99999"
-  ;(background.style as any).backdropFilter = "blur(4px)"
-
-  background.appendChild(iframe)
-
-  return background
-}
-
-export const showModal = (modal: HTMLDivElement) => {
-  modal.style.display = "block"
-}
-
-export const hideModal = (modal: HTMLDivElement) => {
-  modal.style.display = "none"
-}
-
-export const setIframeHeight = (modal: HTMLIFrameElement, height: number) => {
-  modal.style.height = `min(${height || 420}px, 100%)`
+  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.zIndex = "999999"
 }
 
-export const setIframeWidth = (modal: HTMLIFrameElement, height: number) => {
-  modal.style.width = `min(${height || 380}px, 100%)`
+export const showModal = (iframe: HTMLIFrameElement) => {
+  iframe.style.display = "block"
 }
 
-export const setIframeSize = (
-  modal: HTMLIFrameElement,
-  width: number,
-  height: number,
-) => {
-  modal.style.width = `min(${width || 380}px, 100%)`
-  modal.style.height = `min(${height || 420}px, 100%)`
+export const hideModal = (iframe: HTMLIFrameElement) => {
+  iframe.style.display = "none"
 }
 
 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 url = new URL(targetUrl)
   url.pathname = "/iframes/comms"
   targetUrl = url.toString()
@@ -70,15 +34,22 @@ export const createModal = async (targetUrl: string, shouldShow: boolean) => {
     "allow-top-navigation",
     "allow-popups",
   )
-  iframe.allow = "clipboard-write"
-  iframe.id = "argent-webwallet-iframe"
+  iframe.allow = "clipboard-write allowtransparency"
+  iframe.id = iframeId
+  iframe.setAttribute("allowtransparency", "true")
+  iframe.setAttribute("transparent", "true")
+
+  applyModalStyle(/* modal, */ iframe)
+  iframe.style.display = shouldShow ? "block" : "none"
 
-  const modal = applyModalStyle(iframe)
-  modal.style.display = shouldShow ? "block" : "none"
-  modal.id = "argent-webwallet-modal"
+  const existingElement = document.getElementById(iframeId)
 
-  // append the modal to the body
-  window.document.body.appendChild(modal)
+  if (existingElement) {
+    // element exists but shadowRoot cannot be accessed
+    // delete the element and create new
+    existingElement.remove()
+  }
+  window.document.body.appendChild(iframe)
 
   // wait for the iframe to load
   await new Promise<void>((resolve, reject) => {
@@ -93,5 +64,5 @@ export const createModal = async (targetUrl: string, shouldShow: boolean) => {
     })
   })
 
-  return { iframe, modal }
+  return { iframe }
 }