v0.3.0

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.3.0](https://github.com/multiversx/mx-wallet-dapp/pull/48)] - 2024-08-02
+- [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
 - [Changed lit library to vanilla](https://github.com/multiversx/mx-wallet-dapp/pull/44)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-web-wallet-cross-window-provider",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Signing provider for dApps: Cross Window",
   "main": "out/index.js",
   "types": "out/index.d.js",

src/CrossWindowProvider/CrossWindowProvider.ts

@@ -1,26 +1,25 @@
 import { SignableMessage, Transaction } from '@multiversx/sdk-core';
-import { safeWindow } from '@multiversx/sdk-dapp-utils/out/constants/crossWindowProviderConstants';
 import {
   CrossWindowProviderRequestEnums,
   CrossWindowProviderResponseEnums,
   SignMessageStatusEnum
 } from '@multiversx/sdk-dapp-utils/out/enums/crossWindowProviderEnums';
-import { WindowManager } from '../WindowManager';
+import { safeWindow } from '../constants';
 import {
   ErrAccountNotConnected,
   ErrCannotSignSingleTransaction,
   ErrCouldNotGuardTransactions,
   ErrCouldNotLogin,
   ErrCouldNotSignMessage,
   ErrCouldNotSignTransactions,
-  ErrInstantiationFailed,
   ErrProviderNotInitialized,
   ErrTransactionCancelled
 } from '../errors';
+import { WindowManager } from '../WindowManager';
 import { PopupConsent } from './PopupConsent';
 import { confirmationDialogTag } from './PopupConsent/constants';
 
-interface ICrossWindowWalletAccount {
+export interface ICrossWindowWalletAccount {
   address: string;
   signature?: string;
   multisig?: string;
@@ -29,46 +28,55 @@ interface ICrossWindowWalletAccount {
 
 export class CrossWindowProvider {
   public account: ICrossWindowWalletAccount = { address: '' };
-  private initialized = false;
-  private windowManager: WindowManager;
-  private static _instance: CrossWindowProvider = new CrossWindowProvider();
+  protected initialized = false;
+  protected windowManager: WindowManager;
+  protected static _instance: CrossWindowProvider | null = null;
   private accessToken: string | undefined = undefined;
   protected _shouldShowConsentPopup = false;
 
-  private constructor() {
-    if (CrossWindowProvider._instance) {
-      throw new ErrInstantiationFailed();
-    }
-    this.windowManager = WindowManager.getInstance();
-    CrossWindowProvider._instance = this;
+  public constructor() {
+    this.windowManager = new WindowManager();
   }
 
   public setShouldShowConsentPopup(shouldShow: boolean) {
     this._shouldShowConsentPopup = shouldShow;
   }
 
-  private ensureConnected() {
+  protected ensureConnected() {
     if (!this.account.address) {
       throw new ErrAccountNotConnected();
     }
   }
 
-  private disconnect() {
+  protected disconnect() {
     this.account = { address: '' };
   }
 
   public static getInstance(): CrossWindowProvider {
+    if (!CrossWindowProvider._instance) {
+      CrossWindowProvider._instance = new CrossWindowProvider();
+      return CrossWindowProvider._instance;
+    }
+
     return CrossWindowProvider._instance;
   }
 
+  public getWindowManager(): WindowManager {
+    return this.windowManager;
+  }
+
   public setAddress(address: string): CrossWindowProvider {
     this.account.address = address;
-    return CrossWindowProvider._instance;
+    return this;
   }
 
   public setWalletUrl(url: string): CrossWindowProvider {
     this.windowManager.setWalletUrl(url);
-    return CrossWindowProvider._instance;
+    return this;
+  }
+
+  public setWalletWindow(): Promise<void> {
+    return this.windowManager.setWalletWindow();
   }
 
   async init(): Promise<boolean> {
@@ -279,8 +287,6 @@ export class CrossWindowProvider {
       CrossWindowProviderRequestEnums.cancelAction
     );
 
-    console.log(isWalletOpened);
-
     if (!isWalletOpened) {
       return;
     }
@@ -291,7 +297,7 @@ export class CrossWindowProvider {
     });
   }
 
-  protected async openPopupConsent(): Promise<boolean> {
+  public async openPopupConsent(): Promise<boolean> {
     await import('./PopupConsent/PopupConsent');
     const dialog = safeWindow.document?.createElement('div');
     const document = safeWindow.document;

src/CrossWindowProvider/PopupConsent/PopupConsent.ts

@@ -1,4 +1,4 @@
-import { safeWindow } from '@multiversx/sdk-dapp-utils/out/constants/crossWindowProviderConstants';
+import { safeWindow } from '../../constants';
 import { confirmationDialogTag } from './constants';
 import { getStyles } from './getStyles';
 
@@ -99,7 +99,7 @@ export class PopupConsent extends HTMLElement {
   }
 }
 
-const customElements = safeWindow?.customElements;
+const customElements = safeWindow.customElements;
 if (customElements && !customElements.get(confirmationDialogTag)) {
   customElements.define(confirmationDialogTag, PopupConsent);
 }

src/CrossWindowProvider/tests/Cancel.test.ts

@@ -1,5 +1,4 @@
 import { getWalletWindowMock, WalletWindowMockType } from '../../test-utils';
-import { WindowManager } from '../../WindowManager/WindowManager';
 import { CrossWindowProvider } from '../CrossWindowProvider';
 
 describe('CrossWindowProvider Login', () => {
@@ -9,11 +8,11 @@ describe('CrossWindowProvider Login', () => {
 
   beforeEach(() => {
     walletWindowMock = getWalletWindowMock();
-    WindowManager.getInstance().postMessage = jest
+    CrossWindowProvider.getInstance().getWindowManager().postMessage = jest
       .fn()
       .mockImplementation(() => undefined);
 
-    WindowManager.getInstance().isWalletOpened = jest
+    CrossWindowProvider.getInstance().getWindowManager().isWalletOpened = jest
       .fn()
       .mockImplementation(() => true);
 

src/CrossWindowProvider/tests/Login.test.ts

@@ -1,5 +1,4 @@
 import { getWalletWindowMock, WalletWindowMockType } from '../../test-utils';
-import { WindowManager } from '../../WindowManager/WindowManager';
 import { CrossWindowProvider } from '../CrossWindowProvider';
 
 describe('CrossWindowProvider Login', () => {
@@ -9,7 +8,7 @@ describe('CrossWindowProvider Login', () => {
 
   beforeEach(() => {
     walletWindowMock = getWalletWindowMock();
-    WindowManager.getInstance().postMessage = jest
+    CrossWindowProvider.getInstance().getWindowManager().postMessage = jest
       .fn()
       .mockImplementation(() => ({
         payload: {

src/CrossWindowProvider/tests/Logout.test.ts

@@ -1,5 +1,4 @@
 import { getWalletWindowMock, WalletWindowMockType } from '../../test-utils';
-import { WindowManager } from '../../WindowManager/WindowManager';
 import { CrossWindowProvider } from '../CrossWindowProvider';
 
 describe('CrossWindowProvider', () => {
@@ -9,11 +8,11 @@ describe('CrossWindowProvider', () => {
 
   beforeEach(() => {
     walletWindowMock = getWalletWindowMock();
-    WindowManager.getInstance().postMessage = jest
+    CrossWindowProvider.getInstance().getWindowManager().postMessage = jest
       .fn()
       .mockImplementation(() => true);
 
-    WindowManager.getInstance().closeConnection = jest
+    CrossWindowProvider.getInstance().getWindowManager().closeConnection = jest
       .fn()
       .mockImplementation(() => true);
 

src/CrossWindowProvider/tests/SignMessage.test.ts

@@ -1,6 +1,5 @@
 import { SignableMessage } from '@multiversx/sdk-core/out';
 import { getWalletWindowMock, WalletWindowMockType } from '../../test-utils';
-import { WindowManager } from '../../WindowManager/WindowManager';
 import { CrossWindowProvider } from '../CrossWindowProvider';
 
 describe('CrossWindowProvider Login', () => {
@@ -10,7 +9,7 @@ describe('CrossWindowProvider Login', () => {
 
   beforeEach(() => {
     walletWindowMock = getWalletWindowMock();
-    WindowManager.getInstance().postMessage = jest
+    CrossWindowProvider.getInstance().getWindowManager().postMessage = jest
       .fn()
       .mockImplementation(() => ({
         payload: {

src/CrossWindowProvider/tests/SignTransaction.test.ts

@@ -4,7 +4,6 @@ import {
   getWalletWindowMock,
   WalletWindowMockType
 } from '../../test-utils';
-import { WindowManager } from '../../WindowManager/WindowManager';
 import { CrossWindowProvider } from '../CrossWindowProvider';
 
 describe('CrossWindowProvider Login', () => {
@@ -22,7 +21,7 @@ describe('CrossWindowProvider Login', () => {
       senderUsername: 'sender'
     });
 
-    WindowManager.getInstance().postMessage = jest
+    CrossWindowProvider.getInstance().getWindowManager().postMessage = jest
       .fn()
       .mockImplementation(() => ({
         payload: { data: [mockTransaction.toPlainObject()] }

src/IFrameManager/IFrameProviderContentWindow.ts

@@ -0,0 +1,124 @@
+import { safeDocument } from '../constants';
+import {
+  bodyStyle,
+  collapsibleButtonStyle,
+  containerStyle,
+  headerStyle,
+  iframeStyle
+} from './iframeManager.styles';
+
+export class IFrameProviderContentWindow {
+  public iframe: HTMLIFrameElement;
+  public contentWindow: Window | null;
+  public walletAddress = '';
+
+  private readonly container: HTMLDivElement;
+  private readonly header: HTMLDivElement;
+  private readonly body: HTMLDivElement;
+
+  public constructor(props: { id: string; url: string; anchor?: HTMLElement }) {
+    const { id, url, anchor } = props;
+
+    this.container = safeDocument.createElement?.('div');
+    this.header = safeDocument.createElement?.('div');
+    this.body = safeDocument.createElement?.('div');
+    this.iframe = safeDocument.createElement?.('iframe');
+
+    this.buildWindow(id, url);
+    this.contentWindow = this.iframe.contentWindow;
+    this.setupWindow();
+
+    if (anchor) {
+      anchor.appendChild(this.container);
+    } else {
+      safeDocument.body?.appendChild?.(this.container);
+    }
+  }
+
+  private buildWindow(id: string, url: string) {
+    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;
+    this.iframe.style.cssText = iframeStyle;
+
+    this.buildContainer();
+  }
+
+  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.style.cssText = collapsibleButtonStyle;
+    collapsibleButton.onclick = () => {
+      this.body.style.visibility =
+        this.body.style.visibility === 'hidden' ? 'visible' : 'hidden';
+      this.container.style.height =
+        this.body.style.visibility === 'hidden' ? '50px' : '600px';
+      collapsibleButton.innerText =
+        this.body.style.visibility === 'hidden' ? '+' : '-';
+      this.container.style.setProperty(
+        'resize',
+        this.body.style.visibility === 'hidden' ? 'none' : 'both'
+      );
+    };
+    this.header.appendChild(collapsibleButton);
+  }
+
+  private buildContainer() {
+    this.container.appendChild(this.header);
+    this.container.appendChild(this.body);
+    this.body.appendChild(this.iframe);
+    this.buildHeader();
+  }
+
+  private setupWindow() {
+    this.iframe.onload = () => {
+      this.contentWindow = this.iframe.contentWindow;
+
+      const event = new CustomEvent('iframeWindowReady', {
+        detail: this.iframe
+      });
+
+      this.iframe.dispatchEvent(event);
+    };
+  }
+
+  public getContainer(): HTMLDivElement {
+    return this.container;
+  }
+
+  public getIframe(): HTMLIFrameElement {
+    return this.iframe;
+  }
+
+  public getContentWindow(): Window | null {
+    return this.contentWindow;
+  }
+
+  public setUrl(url: string): void {
+    this.iframe.setAttribute('src', url);
+  }
+
+  public remove(): void {
+    this.container.remove();
+  }
+
+  public setWalletVisible(visible: boolean): void {
+    this.container.style.visibility = visible ? 'visible' : 'hidden';
+  }
+
+  public addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject
+  ): void {
+    this.iframe.addEventListener(type, listener);
+  }
+}