diff --git a/src/connectors/tokenboundAccount/helpers/openTokenboundwallet.ts b/src/connectors/tokenboundAccount/helpers/openTokenboundwallet.ts index 3783520..4380ede 100644 --- a/src/connectors/tokenboundAccount/helpers/openTokenboundwallet.ts +++ b/src/connectors/tokenboundAccount/helpers/openTokenboundwallet.ts @@ -13,6 +13,7 @@ interface Options { address: string parentWallet: string controller: Account + action: string } export const getTarget = (): ShadowRoot => { @@ -64,7 +65,11 @@ export const openTokenboundModal = async ( "message", async (event: MessageEvent) => { if (event.origin != origin) return - const { address, parentWallet }: Options = event.data + const { address, parentWallet, action }: Options = + event.data + if (action === "closeConnectKit") { + hideModal(modal) + } if (!parentWallet || !address) return const wallet_id = parentWallet.toLowerCase() const globalObject: Record = globalThis diff --git a/src/connectors/tokenboundAccount/starknetWindowObject/wormhole.ts b/src/connectors/tokenboundAccount/starknetWindowObject/wormhole.ts index e1609ee..f5b3e3f 100644 --- a/src/connectors/tokenboundAccount/starknetWindowObject/wormhole.ts +++ b/src/connectors/tokenboundAccount/starknetWindowObject/wormhole.ts @@ -5,15 +5,12 @@ const applyModalStyle = (iframe: HTMLIFrameElement) => { iframe.style.left = "50%" iframe.style.transform = "translate(-50%, -50%)" iframe.style.width = "100vw" - iframe.style.maxWidth = "840px" - iframe.style.height = "620px" - iframe.style.backgroundColor = "rgba(0,0,0,0.6)" + iframe.style.height = "100vh" + iframe.style.backgroundColor = "transparent" iframe.style.border = "none" - iframe.style.padding = "1rem" - // round corners - iframe.style.borderRadius = "40px" - // box shadow - iframe.style.boxShadow = "0px 4px 20px rgba(0, 0, 0, 0.5)" + iframe.style.opacity = "0" + iframe.style.transition = "opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)" + const background = document.createElement("div") background.style.display = "none" background.style.position = "fixed" @@ -21,11 +18,17 @@ const applyModalStyle = (iframe: HTMLIFrameElement) => { background.style.left = "0" background.style.right = "0" background.style.bottom = "0" - background.style.backgroundColor = "rgba(0, 0, 0, 0.5)" + background.style.transition = + "backgroundColor 0.4s cubic-bezier(0.4, 0, 0.2, 1)" background.style.zIndex = "99999" - ;(background.style as any).backdropFilter = "blur(4px)" + background.appendChild(iframe) + setTimeout(() => { + background.style.backgroundColor = "rgba(0,0,0,0.6)" + iframe.style.opacity = "1" + }, 500) + return background }