@notabene/javascript-sdk 2.1.0 → 2.2.1

package/src/components/EmbeddedComponent.ts

@@ -102,7 +102,7 @@ export default class EmbeddedComponent<V, O> {
     this.removeEmbed();
     this.iframe = document.createElement('iframe');
     this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
-    this.iframe.allow = 'web-share; clipboard-write';
+    this.iframe.allow = 'web-share; clipboard-write; hid; bluetooth;';
     this.iframe.style.width = '100%';
     this.iframe.style.height = '0px';
     this.iframe.style.border = 'none';
@@ -173,15 +173,21 @@ export default class EmbeddedComponent<V, O> {
   completion(): Promise<TransactionResponse<V>> {
     return new Promise((resolve, reject) => {
       let removeComplete: undefined | (() => void) = undefined;
+      let removeCancel: undefined | (() => void) = undefined;
       let removeError: undefined | (() => void) = undefined;
       function cleanup() {
         if (removeComplete) removeComplete();
+        if (removeCancel) removeCancel();
         if (removeError) removeError();
       }
       removeComplete = this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
         cleanup();
       });
+      removeCancel = this.on(CMType.CANCEL, () => {
+        reject(new Error('User cancelled'));
+        cleanup();
+      });
       removeError = this.on('error', (message) => {
         reject(new Error((message as any).message));
         cleanup();
@@ -193,7 +199,7 @@ export default class EmbeddedComponent<V, O> {
    * Opens the component in a modal dialog
    */
 
-  openModal(): Promise<TransactionResponse<V>> {
+  async openModal(): Promise<TransactionResponse<V>> {
     if (this.modal) {
       this.closeModal();
     }
@@ -207,11 +213,11 @@ export default class EmbeddedComponent<V, O> {
 
     document.body.appendChild(this.modal);
     this.embed(this.modal, true);
-    this.on(CMType.CANCEL, () => {
+    const removeCancel = this.on(CMType.CANCEL, () => {
       this.closeModal();
     });
 
-    this.on(CMType.COMPLETE, () => {
+    const removeComplete = this.on(CMType.COMPLETE, () => {
       this.closeModal();
     });
 
@@ -220,8 +226,12 @@ export default class EmbeddedComponent<V, O> {
       // console.log('click');
       this.closeModal();
     });
-    return this.completion();
+    return this.completion().finally(() => {
+      removeCancel();
+      removeComplete();
+    });
   }
+
   /**
    * Closes the modal dialog
    *
@@ -235,4 +245,38 @@ export default class EmbeddedComponent<V, O> {
       this.modal = undefined;
     }
   }
+
+  /**
+   * Opens the component in a popup window. This may be needed to support many self-hosted wallets
+   * @returns A promise that resolves with the transaction response
+   * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#restrictions)
+   * @see [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+   */
+  async popup(): Promise<TransactionResponse<V>> {
+    const popup = window.open(
+      this.url,
+      '_blank',
+      'popup=true,width=600,height=600',
+    );
+    window.addEventListener('message', (event: MessageEvent) => {
+      if (event.source !== popup) {
+        return;
+      }
+      console.log('received message from popup', event.data);
+      this.eventManager?.setPort(event.ports[0]);
+    });
+
+    const removeCancel = this.on(CMType.CANCEL, () => {
+      popup?.close();
+    });
+
+    const removeComplete = this.on(CMType.COMPLETE, () => {
+      popup?.close();
+    });
+
+    return this.completion().finally(() => {
+      removeCancel();
+      removeComplete();
+    });
+  }
 }

package/src/types.ts

@@ -708,7 +708,7 @@ export type FieldTypes = {
  * - PENDING: Include VASPs neither allowed nor denied
  * @public
  */
-export const enum VASPSearchControl {
+export enum VASPSearchControl {
   ALLOWED = 'allowed',
   PENDING = 'pending',
 }
@@ -784,7 +784,7 @@ export interface TransactionOptions {
  * - CANCEL: Operation was cancelled
  * @public
  */
-export const enum CMType {
+export enum CMType {
   COMPLETE = 'complete',
   RESIZE = 'resize',
   RESULT = 'result',
@@ -885,7 +885,7 @@ export type ComponentMessage<T> =
  * - REQUEST_RESPONSE: Message requesting a response from component
  * @public
  */
-export const enum HMType {
+export enum HMType {
   UPDATE = 'update',
   REQUEST_RESPONSE = 'requestResponse',
 }

package/src/components/__tests__/EmbeddedComponent.test.ts

@@ -1,530 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import {
-  AgentType,
-  CMType,
-  HMType,
-  type HostMessage,
-  type Transaction,
-  type TransactionOptions,
-  type Withdrawal,
-} from '../../types';
-import { MessageEventManager } from '../../utils/MessageEventManager';
-import EmbeddedComponent from '../EmbeddedComponent';
-
-const url = 'https://example.com';
-const parentId = 'parent-container';
-const value: Partial<Transaction> = { amountDecimal: 100 };
-
-describe('EmbeddedComponent', () => {
-  describe('creation', () => {
-    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-    beforeEach(() => {
-      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
-        amountDecimal: 100,
-      });
-    });
-
-    test('sets value', () => {
-      expect(component.value).toStrictEqual(value);
-    });
-
-    test('sets url', () => {
-      expect(component.url).toBe(url);
-    });
-  });
-
-  describe('iframe', () => {
-    let document: Document;
-    let parentElement: HTMLElement;
-    let iframe: HTMLIFrameElement;
-    let window: Window;
-
-    beforeEach(() => {
-      parentElement = {
-        appendChild: vi.fn(),
-      } as unknown as HTMLElement;
-
-      iframe = {
-        style: {},
-        src: '',
-        contentWindow: {
-          focus: vi.fn(),
-        } as unknown as Window,
-        remove: vi.fn(),
-        setAttribute: vi.fn(),
-        addEventListener: vi.fn(),
-      } as unknown as HTMLIFrameElement;
-
-      document = {
-        createElement: vi.fn().mockReturnValue(iframe),
-        querySelector: vi.fn().mockReturnValue(parentElement),
-      } as unknown as Document;
-
-      window = {
-        addEventListener: vi.fn(),
-      } as unknown as Window;
-
-      vi.stubGlobal('document', document);
-      vi.stubGlobal('window', window);
-    });
-
-    afterEach(() => {
-      vi.unstubAllGlobals();
-    });
-
-    test('mount', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      component.mount(parentId);
-      expect(iframe?.src).toBe(url + '&embedded=true');
-      expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
-    });
-
-    test('on', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const messageType = 'customEvent';
-      const callback = vi.fn();
-      component.on(messageType, callback);
-      component.mount(parentId);
-
-      // Simulate receiving a message of the specified type
-      // and assert that the callback is called with the correct payload.
-    });
-
-    test('off', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const messageType = 'customEvent';
-      const callback = vi.fn();
-      component.on(messageType, callback);
-
-      // Simulate receiving a message of the specified type
-      // and assert that the callback is called with the correct payload.
-
-      component.off(messageType, callback);
-
-      // Simulate receiving another message of the specified type
-      // and assert that the callback is not called.
-    });
-
-    describe('connected to iframe', () => {
-      let messageHandler: (event: MessageEvent) => void;
-      let port: MessagePort;
-      let handshake: MessageEvent;
-      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-      let options: TransactionOptions;
-
-      beforeEach(() => {
-        port = {
-          postMessage: vi.fn(),
-          start: vi.fn(),
-          onmessage: null,
-        } as unknown as MessagePort;
-        handshake = {
-          source: iframe.contentWindow,
-          ports: [port],
-        } as unknown as MessageEvent;
-        window.addEventListener = vi
-          .fn()
-          .mockImplementation((event, handler) => {
-            messageHandler = handler;
-          });
-        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
-        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-          url,
-          value,
-          options,
-        );
-        component.mount(parentId);
-
-        expect(messageHandler).toBeDefined();
-        messageHandler(handshake);
-      });
-
-      test('send', () => {
-        const message: HostMessage<Withdrawal, TransactionOptions> = {
-          type: HMType.UPDATE,
-          value: {
-            requestId: 'id',
-          },
-          options: { allowedAgentTypes: [AgentType.PRIVATE] },
-        };
-        component.send(message);
-        expect(port.postMessage).toHaveBeenCalledWith(message);
-      });
-
-      describe('update', () => {
-        test('with out options', () => {
-          const newValue: Partial<Transaction> = { amountDecimal: 200 };
-
-          const message: HostMessage<Withdrawal, TransactionOptions> = {
-            type: HMType.UPDATE,
-            value: newValue,
-            options,
-          };
-
-          component.update(newValue);
-
-          expect(component.value).toBe(newValue);
-          expect(component.options).toBe(options);
-          expect(port.postMessage).toHaveBeenCalledWith(message);
-        });
-
-        test('with options', () => {
-          const newValue: Partial<Transaction> = { amountDecimal: 200 };
-          const newOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
-
-          const message: HostMessage<Withdrawal, TransactionOptions> = {
-            type: HMType.UPDATE,
-            value: newValue,
-            options: newOptions,
-          };
-
-          component.update(newValue, newOptions);
-
-          expect(component.value).toBe(newValue);
-          expect(component.options).toBe(newOptions);
-          expect(port.postMessage).toHaveBeenCalledWith(message);
-        });
-      });
-      // TODO not sure this actually does what I want it to do
-      describe('completion', () => {
-        test('resolves with response and cleans up listeners', async () => {
-          const response = { valid: true, value: 'completed' };
-          const completionPromise = component.completion();
-
-          port.onmessage!({
-            data: { type: CMType.COMPLETE, response },
-          } as unknown as MessageEvent);
-
-          const result = await completionPromise;
-          expect(result).toBe(response);
-
-          // Verify cleanup by sending another complete message - should not trigger anything
-          port.onmessage!({
-            data: { type: CMType.COMPLETE, response: { valid: false } },
-          } as unknown as MessageEvent);
-
-          // Original result should remain unchanged
-          expect(result).toBe(response);
-        });
-
-        test('rejects with error and cleans up listeners', async () => {
-          const errorMessage = 'Test error';
-          const completionPromise = component.completion();
-
-          port.onmessage!({
-            data: { type: 'error', message: errorMessage },
-          } as unknown as MessageEvent);
-
-          await expect(completionPromise).rejects.toThrow(errorMessage);
-
-          // Verify cleanup by sending another error - should not trigger anything
-          port.onmessage!({
-            data: { type: 'error', message: 'Different error' },
-          } as unknown as MessageEvent);
-
-          // Original rejection should remain
-          await expect(completionPromise).rejects.toThrow(errorMessage);
-        });
-      });
-    });
-  });
-
-  describe('modal', () => {
-    let document: Document;
-    let dialog: HTMLDialogElement;
-    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-
-    beforeEach(() => {
-      dialog = {
-        style: {},
-        showModal: vi.fn(),
-        close: vi.fn(),
-        remove: vi.fn(),
-        addEventListener: vi.fn(),
-        appendChild: vi.fn(), // Add this
-      } as unknown as HTMLDialogElement;
-
-      document = {
-        createElement: vi.fn().mockImplementation((tag) => {
-          if (tag === 'dialog') return dialog;
-          if (tag === 'iframe')
-            return {
-              style: {},
-              contentWindow: { focus: vi.fn() },
-              addEventListener: vi.fn(),
-            } as unknown as HTMLIFrameElement;
-        }),
-        body: {
-          appendChild: vi.fn(),
-        },
-      } as unknown as Document;
-
-      const mockDoc = document;
-      vi.stubGlobal('document', mockDoc); // Use intermediate variable
-
-      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-    });
-
-    afterEach(() => {
-      vi.unstubAllGlobals();
-    });
-
-    test('modal closes on cancel message', () => {
-      component.openModal();
-
-      // Trigger cancel message through event manager
-      component['eventManager']['handleMessage']({
-        data: { type: CMType.CANCEL },
-      } as MessageEvent);
-
-      expect(dialog.close).toHaveBeenCalled();
-      expect(dialog.remove).toHaveBeenCalled();
-      // await expect(completionPromise).rejects.toThrow();
-    });
-
-    test('modal closes on completion', async () => {
-      const completionPromise = component.openModal();
-      const response = { valid: true, value: 'completed' };
-
-      // Trigger complete message through event manager
-      component['eventManager']['handleMessage']({
-        data: { type: CMType.COMPLETE, response },
-      } as MessageEvent);
-
-      expect(dialog.close).toHaveBeenCalled();
-      expect(dialog.remove).toHaveBeenCalled();
-      await expect(completionPromise).resolves.toBe(response);
-    });
-  });
-
-  describe('error handling', () => {
-    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-    let mockMessageManager: (typeof component)['eventManager'];
-    let document: Document;
-    let parentElement: HTMLElement;
-
-    beforeEach(() => {
-      parentElement = {
-        appendChild: vi.fn(),
-      } as unknown as HTMLElement;
-
-      document = {
-        createElement: vi.fn().mockReturnValue({
-          style: {},
-          contentWindow: { focus: vi.fn() },
-        } as unknown as HTMLIFrameElement),
-        querySelector: vi.fn().mockReturnValue(parentElement),
-      } as unknown as Document;
-
-      const mockDoc = document;
-      vi.stubGlobal('document', mockDoc);
-
-      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      mockMessageManager = component['eventManager'];
-    });
-
-    test('handles invalid messages', () => {
-      const errors = [{ attribute: 'test', message: 'error' }];
-      const newValue = { ...value, extra: 'data' };
-
-      mockMessageManager['handleMessage']({
-        data: {
-          type: CMType.INVALID,
-          errors,
-          value: newValue,
-        },
-      } as MessageEvent);
-
-      expect(component.errors).toEqual(errors);
-      expect(component.value).toEqual(newValue);
-    });
-
-    test('handles resize messages', () => {
-      const mockIframe = {
-        style: {},
-        contentWindow: { focus: vi.fn() },
-      } as unknown as HTMLIFrameElement;
-
-      document.createElement = vi.fn().mockReturnValue(mockIframe);
-      document.querySelector = vi.fn().mockReturnValue(parentElement);
-
-      component.mount(parentId);
-
-      mockMessageManager['handleMessage']({
-        data: {
-          type: CMType.RESIZE,
-          height: 500,
-        },
-      } as MessageEvent);
-
-      expect(mockIframe.style.height).toBe('500px');
-    });
-  });
-
-  describe('event management', () => {
-    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-    let mockWindow: Window;
-    beforeEach(() => {
-      // Create a mock window without modifying global
-      mockWindow = {
-        addEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      } as unknown as Window;
-
-      vi.stubGlobal('window', mockWindow);
-
-      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-    });
-
-    afterEach(() => {
-      vi.unstubAllGlobals();
-    });
-
-    test('multiple listeners for same event type', () => {
-      const callback1 = vi.fn();
-      const callback2 = vi.fn();
-
-      component.on('test', callback1);
-      component.on('test', callback2);
-
-      // Trigger message via component's event manager
-      component['eventManager']['handleMessage']({
-        data: { type: 'test', payload: 'data' },
-      } as MessageEvent);
-
-      expect(callback1).toHaveBeenCalled();
-      expect(callback2).toHaveBeenCalled();
-    });
-
-    test('removal of specific listener', () => {
-      const callback1 = vi.fn();
-      const callback2 = vi.fn();
-
-      component.on('test', callback1);
-      component.on('test', callback2);
-      component.off('test', callback1);
-
-      component['eventManager']['handleMessage']({
-        data: { type: 'test', payload: 'data' },
-      } as MessageEvent);
-
-      expect(callback1).not.toHaveBeenCalled();
-      expect(callback2).toHaveBeenCalled();
-    });
-  });
-
-  describe('cleanup', () => {
-    let mockIframe: HTMLIFrameElement;
-    let parentElement: HTMLElement;
-    let document: Document;
-
-    beforeEach(() => {
-      mockIframe = {
-        style: {},
-        src: '',
-        contentWindow: {
-          focus: vi.fn(),
-        } as unknown as Window,
-        remove: vi.fn(),
-      } as unknown as HTMLIFrameElement;
-
-      parentElement = {
-        appendChild: vi.fn(),
-      } as unknown as HTMLElement;
-
-      document = {
-        createElement: vi.fn().mockReturnValue(mockIframe),
-        querySelector: vi.fn().mockReturnValue(parentElement),
-      } as unknown as Document;
-
-      const mockDoc = document;
-      vi.stubGlobal('document', mockDoc);
-    });
-
-    afterEach(() => {
-      vi.unstubAllGlobals();
-    });
-
-    test('removeEmbed cleans up iframe', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      component.mount(parentId);
-
-      component.removeEmbed();
-      expect(mockIframe.remove).toHaveBeenCalled();
-    });
-
-    test('cleanup on unmount', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const callback = vi.fn();
-      component.on('test', callback);
-
-      component.mount(parentId);
-
-      component.removeEmbed();
-
-      // Create a new event manager to simulate cleanup
-      component['eventManager'] = new MessageEventManager();
-
-      // Try to trigger message after cleanup
-      component['eventManager']['handleMessage']({
-        data: { type: 'test', payload: 'data' },
-      } as MessageEvent);
-
-      expect(callback).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('state management', () => {
-    test('maintains value and options state', () => {
-      const initialValue = { amountDecimal: 100 };
-      const initialOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
-
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        initialValue,
-        initialOptions,
-      );
-
-      expect(component.value).toEqual(initialValue);
-      expect(component.options).toEqual(initialOptions);
-    });
-
-    test('updates maintain state consistency', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const newValue = { amountDecimal: 200 };
-      const newOptions = { allowedAgentTypes: [AgentType.VASP] };
-
-      component.update(newValue, newOptions);
-
-      expect(component.value).toEqual(newValue);
-      expect(component.options).toEqual(newOptions);
-    });
-  });
-});