Merge pull request #57 from multiversx/development

v0.4.1

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Update README](https://github.com/multiversx/mx-sdk-js-web-wallet-cross-window-provider/pull/55)
 
 
+## [[0.4.1](https://github.com/multiversx/mx-sdk-js-web-wallet-cross-window-provider/pull/57)] - 2024-08-12
+- [Fix SSR support](https://github.com/multiversx/mx-sdk-js-web-wallet-cross-window-provider/pull/56)
+
 ## [[0.4.0](https://github.com/multiversx/mx-sdk-js-web-wallet-cross-window-provider/pull/54)] - 2024-08-07
 - [Remove IFrame Provider](https://github.com/multiversx/mx-sdk-js-web-wallet-cross-window-provider/pull/53)
 

package.json

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

src/CrossWindowProvider/CrossWindowProvider.ts

@@ -16,8 +16,8 @@ import {
   ErrTransactionCancelled
 } from '../errors';
 import { WindowManager } from '../WindowManager';
-import { PopupConsent } from './PopupConsent';
 import { confirmationDialogTag } from './PopupConsent/constants';
+import { PopupConsentModel } from './PopupConsent/PopupConsent.model';
 
 export interface ICrossWindowWalletAccount {
   address: string;
@@ -298,31 +298,39 @@ export class CrossWindowProvider {
   }
 
   public async openPopupConsent(): Promise<boolean> {
-    await import('./PopupConsent/PopupConsent');
-    const dialog = safeWindow.document?.createElement('div');
-    const document = safeWindow.document;
-
-    if (!this._shouldShowConsentPopup || !document || !dialog) {
+    if (
+      !this._shouldShowConsentPopup ||
+      typeof document === 'undefined' ||
+      typeof window === 'undefined'
+    ) {
       return true;
     }
 
-    const popup = safeWindow.document?.createElement(
+    const module = await import('./PopupConsent/PopupConsent');
+    const PopupConsent = module.PopupConsent;
+
+    const customElements = safeWindow.customElements;
+    if (customElements && !customElements.get(confirmationDialogTag)) {
+      customElements.define(confirmationDialogTag, PopupConsent);
+    }
+
+    const popup = document.createElement(
       confirmationDialogTag
-    ) as PopupConsent;
+    ) as PopupConsentModel & HTMLElement;
 
     popup.walletUrl = this.windowManager.walletUrl;
 
-    safeWindow.document?.body.appendChild(popup);
+    document.body.appendChild(popup);
 
     const popupConsentResponse: boolean = await new Promise<boolean>(
       (resolve) => {
         popup.onConfirm = () => {
           resolve(true);
-          safeWindow.document?.body.removeChild(popup);
+          document.body.removeChild(popup);
         };
         popup.onCancel = () => {
           resolve(false);
-          safeWindow.document?.body.removeChild(popup);
+          document.body.removeChild(popup);
         };
       }
     );

src/CrossWindowProvider/PopupConsent/PopupConsent.model.ts

@@ -0,0 +1,22 @@
+export interface PopupConsentModel {
+  walletUrl: string;
+  identifier: string;
+  events: {
+    confirm: string;
+    cancel: string;
+    mounted: string;
+  };
+
+  onCancel: () => void;
+  onConfirm: () => void;
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string,
+    newValue: string
+  ): void;
+  render(): void;
+  toggleEvents(action: 'removeEventListener' | 'addEventListener'): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}

src/CrossWindowProvider/PopupConsent/PopupConsent.ts

@@ -1,8 +1,8 @@
-import { safeWindow } from '../../constants';
 import { confirmationDialogTag } from './constants';
 import { getStyles } from './getStyles';
+import { PopupConsentModel } from './PopupConsent.model';
 
-export class PopupConsent extends HTMLElement {
+export class PopupConsent extends HTMLElement implements PopupConsentModel {
   public walletUrl = '';
   public identifier: string = confirmationDialogTag;
   public onCancel = () => {
@@ -97,9 +97,4 @@ export class PopupConsent extends HTMLElement {
   disconnectedCallback() {
     this.toggleEvents('removeEventListener');
   }
-}
-
-const customElements = safeWindow.customElements;
-if (customElements && !customElements.get(confirmationDialogTag)) {
-  customElements.define(confirmationDialogTag, PopupConsent);
-}
+}

src/WindowManager/WindowManager.ts

@@ -39,7 +39,7 @@ export class WindowManager {
   }
 
   async init(): Promise<boolean> {
-    this.initialized = true;
+    this.initialized = typeof window !== 'undefined';
     return this.initialized;
   }