Implement IFrameProvider (#46)

* upgrade CrossWindowProvider and WindowManager and fix specs * small fixes * implement IFrameProvider * refactoring * use safewindow * revert changes related to popup consent on cross window provider * refactoring according to code review * refactoring according to code review * refactoring * refactoring * refactoring * refactoring according to code review * changelog update * 0.3.0-alpha.0 * small refactoring
multiversx · Aug 1, 2024 · d690029 · d690029
1 parent d912b78
commit d690029
Show file tree

Hide file tree

Showing 18 changed files with 4,994 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [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)
 

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.2.0",
+  "version": "0.3.0-alpha.0",
   "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
@@ -1,11 +1,10 @@
 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,
@@ -17,10 +16,11 @@ import {
   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 +29,59 @@ 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 {
+    if (!CrossWindowProvider._instance) {
+      throw new ErrInstantiationFailed();
+    }
+
     this.account.address = address;
     return CrossWindowProvider._instance;
   }
 
   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 +292,6 @@ export class CrossWindowProvider {
       CrossWindowProviderRequestEnums.cancelAction
     );
 
-    console.log(isWalletOpened);
-
     if (!isWalletOpened) {
       return;
     }
@@ -291,7 +302,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;

diff --git a/src/CrossWindowProvider/PopupConsent/PopupConsent.ts b/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);
 }
diff --git a/src/CrossWindowProvider/tests/Cancel.test.ts b/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);
 

diff --git a/src/CrossWindowProvider/tests/Login.test.ts b/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: {

diff --git a/src/CrossWindowProvider/tests/Logout.test.ts b/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);
 

diff --git a/src/CrossWindowProvider/tests/SignMessage.test.ts b/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: {

diff --git a/src/CrossWindowProvider/tests/SignTransaction.test.ts b/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()] }