Merge pull request #115 from argentlabs/fix/iframe-size

fix: add methods to update iframe size
argentlabs · Jul 16, 2024 · d222998 · d222998
2 parents 9532441 + 81d8fa5
commit d222998
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts b/src/connectors/webwallet/starknetWindowObject/getWebWalletStarknetObject.ts
@@ -2,19 +2,27 @@ import type { CreateTRPCProxyClient } from "@trpc/client"
 import type { AppRouter } from "../helpers/trpc"
 import type { WebWalletStarknetWindowObject } from "./argentStarknetWindowObject"
 import { getArgentStarknetWindowObject } from "./argentStarknetWindowObject"
-import { hideModal, setIframeHeight, showModal } from "./wormhole"
+import {
+  hideModal,
+  setIframeHeight,
+  setIframeSize,
+  setIframeWidth,
+  showModal,
+} from "./wormhole"
 
 type IframeProps = {
   modal: HTMLDivElement
   iframe: HTMLIFrameElement
 }
 
-type ModalEvents =
+export type ModalEvents =
   | {
       action: "show" | "hide"
       visible: boolean
     }
   | { action: "updateHeight"; height: number }
+  | { action: "updateWidth"; width: number }
+  | { action: "updateSize"; width: number; height: number }
 
 export const getWebWalletStarknetObject = async (
   target: string,
@@ -49,6 +57,13 @@ export const getWebWalletStarknetObject = async (
             break
           case "updateHeight":
             setIframeHeight(iframe, modalEvent.height)
+            break
+          case "updateWidth":
+            setIframeWidth(iframe, modalEvent.width)
+            break
+          case "updateSize":
+            setIframeSize(iframe, modalEvent.width, modalEvent.height)
+            break
         }
       },
     })

diff --git a/src/connectors/webwallet/starknetWindowObject/wormhole.ts b/src/connectors/webwallet/starknetWindowObject/wormhole.ts
@@ -41,6 +41,19 @@ export const setIframeHeight = (modal: HTMLIFrameElement, height: number) => {
   modal.style.height = `min(${height || 420}px, 100%)`
 }
 
+export const setIframeWidth = (modal: HTMLIFrameElement, height: number) => {
+  modal.style.width = `min(${height || 380}px, 100%)`
+}
+
+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 createModal = async (targetUrl: string, shouldShow: boolean) => {
   // make sure target url has always /iframes/comms as the path
   const url = new URL(targetUrl)