diff --git a/CHANGELOG.md b/CHANGELOG.md index d2e387c..1484134 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [Fix IFrame Provider issues](https://github.com/multiversx/mx-wallet-dapp/pull/47) - [Implement IFrameProvider](https://github.com/multiversx/mx-wallet-dapp/pull/46) ## [[0.1.3](https://github.com/multiversx/mx-wallet-dapp/pull/45)] - 2024-05-29 diff --git a/package-lock.json b/package-lock.json index 129523d..f3e792c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@multiversx/sdk-web-wallet-cross-window-provider", - "version": "0.3.0-alpha.0", + "version": "0.3.0-alpha.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@multiversx/sdk-web-wallet-cross-window-provider", - "version": "0.3.0-alpha.0", + "version": "0.3.0-alpha.2", "license": "GPL-3.0-or-later", "dependencies": { "@types/jest": "^29.5.11", diff --git a/package.json b/package.json index 11c1a85..035883b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@multiversx/sdk-web-wallet-cross-window-provider", - "version": "0.3.0-alpha.0", + "version": "0.3.0-alpha.2", "description": "Signing provider for dApps: Cross Window", "main": "out/index.js", "types": "out/index.d.js", diff --git a/src/CrossWindowProvider/CrossWindowProvider.ts b/src/CrossWindowProvider/CrossWindowProvider.ts index 5f797a8..ef45fb6 100644 --- a/src/CrossWindowProvider/CrossWindowProvider.ts +++ b/src/CrossWindowProvider/CrossWindowProvider.ts @@ -12,7 +12,6 @@ import { ErrCouldNotLogin, ErrCouldNotSignMessage, ErrCouldNotSignTransactions, - ErrInstantiationFailed, ErrProviderNotInitialized, ErrTransactionCancelled } from '../errors'; @@ -67,12 +66,8 @@ export class CrossWindowProvider { } public setAddress(address: string): CrossWindowProvider { - if (!CrossWindowProvider._instance) { - throw new ErrInstantiationFailed(); - } - this.account.address = address; - return CrossWindowProvider._instance; + return this; } public setWalletUrl(url: string): CrossWindowProvider { diff --git a/src/IFrameManager/IFrameProviderContentWindow.ts b/src/IFrameManager/IFrameProviderContentWindow.ts index 41b4e3a..5e8c3d3 100644 --- a/src/IFrameManager/IFrameProviderContentWindow.ts +++ b/src/IFrameManager/IFrameProviderContentWindow.ts @@ -1,7 +1,6 @@ -import { safeDocument, safeWindow } from '../constants'; +import { safeDocument } from '../constants'; import { bodyStyle, - closeWalletButtonStyle, collapsibleButtonStyle, containerStyle, headerStyle, @@ -17,17 +16,8 @@ export class IFrameProviderContentWindow { private readonly header: HTMLDivElement; private readonly body: HTMLDivElement; - private readonly onClose: (() => void) | undefined = undefined; - - public constructor(props: { - id: string; - url: string; - anchor?: HTMLElement; - onClose?: () => void; - }) { - const { id, url, anchor, onClose } = props; - - this.onClose = onClose; + public constructor(props: { id: string; url: string; anchor?: HTMLElement }) { + const { id, url, anchor } = props; this.container = safeDocument.createElement?.('div'); this.header = safeDocument.createElement?.('div'); @@ -36,7 +26,6 @@ export class IFrameProviderContentWindow { this.buildWindow(id, url); this.contentWindow = this.iframe.contentWindow; - this.setupWindow(); if (anchor) { @@ -47,35 +36,26 @@ export class IFrameProviderContentWindow { } private buildWindow(id: string, url: string) { - this.container.setAttribute('data-draggable', 'true'); - this.container.setAttribute('data-resizable', 'true'); - this.header.setAttribute('data-drag-handle', 'true'); + this.container.id = `window-container-${id}`; + this.iframe.id = id; + this.iframe.src = url; + this.container.style.cssText = containerStyle; this.header.style.cssText = headerStyle; this.body.style.cssText = bodyStyle; - - const { collapsibleButton, closeWalletButton } = this.getHeaderButtons(); - - this.header.appendChild(closeWalletButton); - this.header.appendChild(collapsibleButton); - this.container.appendChild(this.header); - this.container.appendChild(this.body); - - this.iframe.id = id; - this.iframe.src = url; this.iframe.style.cssText = iframeStyle; - this.body.appendChild(this.iframe); + this.buildContainer(); } - private getHeaderButtons() { + private buildHeader() { const title = safeDocument.createElement?.('span'); title.innerText = 'Wallet'; this.header.appendChild(title); const collapsibleButton = safeDocument.createElement?.('span'); collapsibleButton.id = 'iframe-toggle-button'; - collapsibleButton.innerText = '+'; + collapsibleButton.innerText = '-'; collapsibleButton.style.cssText = collapsibleButtonStyle; collapsibleButton.onclick = () => { this.body.style.visibility = @@ -89,16 +69,14 @@ export class IFrameProviderContentWindow { this.body.style.visibility === 'hidden' ? 'none' : 'both' ); }; + this.header.appendChild(collapsibleButton); + } - const closeWalletButton = safeDocument.createElement?.('span'); - closeWalletButton.id = 'iframe-close-button'; - closeWalletButton.innerText = '✖'; - closeWalletButton.style.cssText = closeWalletButtonStyle; - closeWalletButton.onclick = () => { - this.container.remove(); - this.onClose?.(); - }; - return { collapsibleButton, closeWalletButton }; + private buildContainer() { + this.container.appendChild(this.header); + this.container.appendChild(this.body); + this.body.appendChild(this.iframe); + this.buildHeader(); } private setupWindow() { @@ -111,9 +89,6 @@ export class IFrameProviderContentWindow { this.iframe.dispatchEvent(event); }; - - this.setupResizable(); - this.setupDraggable(); } public getContainer(): HTMLDivElement { @@ -146,54 +121,4 @@ export class IFrameProviderContentWindow { ): void { this.iframe.addEventListener(type, listener); } - - private setupResizable() { - this.container.style.setProperty('resize', 'both'); - this.container.style.setProperty('overflow', 'hidden'); - } - - private setupDraggable() { - this.container.ondragstart = () => { - return false; - }; - - this.header.onmousedown = (event) => { - const shiftX = - event.clientX - this.container.getBoundingClientRect().left; - const shiftY = event.clientY - this.container.getBoundingClientRect().top; - - // moves the window at (pageX, pageY) coordinates - // taking initial shifts into account - const moveAt = (pageX: number, pageY: number) => { - this.container.style.left = pageX - shiftX + 'px'; - this.container.style.top = pageY - shiftY + 'px'; - }; - - this.container.style.position = 'absolute'; - this.container.style.zIndex = '1000'; - - moveAt(event.pageX, event.pageY); - - const onMouseMove = (ev: MouseEvent) => { - moveAt(ev.pageX, ev.pageY); - safeWindow.getSelection()?.removeAllRanges(); - }; - - // move the container on mousemove - safeDocument.addEventListener?.('mousemove', onMouseMove); - - // drop the container, remove unneeded handlers - this.container.onmouseup = () => { - safeDocument.removeEventListener?.('mousemove', onMouseMove); - this.container.onmouseup = null; - }; - - // drop the header, remove unneeded handlers - this.header.onmouseup = () => { - safeDocument.removeEventListener?.('mousemove', onMouseMove); - this.header.removeEventListener('mouseup', onMouseMove); - this.header.onmouseup = null; - }; - }; - } } diff --git a/src/IFrameManager/IframeManager.ts b/src/IFrameManager/IframeManager.ts index 727e0af..073e316 100644 --- a/src/IFrameManager/IframeManager.ts +++ b/src/IFrameManager/IframeManager.ts @@ -10,12 +10,7 @@ import { IFrameProviderContentWindow } from './IFrameProviderContentWindow'; export class IframeManager extends WindowManager { private floatingWalletComponent: IFrameProviderContentWindow | null = null; - private readonly onClose: (() => void) | undefined = undefined; - - constructor(props?: { onClose?: () => void }) { - super(); - this.onClose = props?.onClose; - } + private readonly iframeId = 'floating-wallet'; public get floatingWallet() { return this.floatingWalletComponent; @@ -66,13 +61,9 @@ export class IframeManager extends WindowManager { const anchor = safeDocument.getElementById?.('root'); this.floatingWalletComponent = new IFrameProviderContentWindow({ - id: 'floating-wallet', + id: this.iframeId, anchor, - url: this.walletUrl, - onClose: () => { - this.closeConnection(); - this.onClose?.(); - } + url: this.walletUrl }); this.floatingWalletComponent.walletAddress = this.walletUrl; @@ -92,6 +83,7 @@ export class IframeManager extends WindowManager { } this.walletWindow = iframe.contentWindow; + this.setWalletVisible(true); } public setWalletVisible(visible: boolean): void { diff --git a/src/IFrameManager/iframeManager.styles.ts b/src/IFrameManager/iframeManager.styles.ts index d843cbb..80ecf26 100644 --- a/src/IFrameManager/iframeManager.styles.ts +++ b/src/IFrameManager/iframeManager.styles.ts @@ -4,10 +4,11 @@ export const containerStyle = ` border: 1px solid #0d0e10; border-radius: 5px; z-index: 9999; - position: absolute; + position: fixed; bottom: 0; - right: 0; + left: 2rem; visibility: hidden; + padding-bottom: 10px; `; export const headerStyle = ` @@ -51,29 +52,4 @@ export const collapsibleButtonStyle = ` z-index: 50; user-select: none; float: right; - `; - -export const closeWalletButtonStyle = ` - width: 30px; - height: 30px; - cursor: pointer; - margin-top: 0px; - display: inline-block; - cursor: pointer; - margin-top: 5px; - padding: 0px; - box-sizing: content-box; - font-family: sans-serif; - text-align: center; - font-size: 30px; - line-height: 14px; - border-width: 0px; - border-radius: 2px; - border-color: rgb(170, 170, 170); - border-style: solid; - background-color: transparent; - color: gray; - z-index: 50; - user-select: none; - float: right; - `; + `; \ No newline at end of file diff --git a/src/IFrameProvider/IframeProvider.ts b/src/IFrameProvider/IframeProvider.ts index 1cf9605..f66210f 100644 --- a/src/IFrameProvider/IframeProvider.ts +++ b/src/IFrameProvider/IframeProvider.ts @@ -8,10 +8,7 @@ import { IframeManager } from '../IFrameManager/IframeManager'; export class IframeProvider extends CrossWindowProvider { public constructor() { super(); - this.windowManager = new IframeManager({ - // TODO check why the logout is not sending logout request through postMessage - onClose: this.logout.bind(this) - }); + this.windowManager = new IframeManager(); } public static getInstance(): IframeProvider { @@ -46,12 +43,17 @@ export class IframeProvider extends CrossWindowProvider { throw new ErrProviderNotInitialized(); } - this.ensureConnected(); - const connectionClosed = await this.windowManager.closeConnection(); + try { + this.ensureConnected(); + await this.windowManager.closeConnection(); + } catch (e) { + console.error(e); + } + this.initialized = false; this.disconnect(); - return connectionClosed; + return true; } public override async openPopupConsent(): Promise {