Fix IFrame Provider issues (#47)

* fix small issues on IFrame Provider and CrossWindow Provider * add missing changes from last commit * remove setAddress override * 0.3.0-alpha.1 * fix iframe provider position and logout behavior * 0.3.0-alpha.2 * changelog update
multiversx · Aug 2, 2024 · 18b0e37 · 18b0e37
1 parent d690029
commit 18b0e37
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 148 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
-  `;
+  `;
diff --git 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<boolean> {