@notabene/javascript-sdk 2.0.3 → 2.0.4-NEXT.0

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();
@@ -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,34 @@ 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)
+   */
+  public popup(): Promise<TransactionResponse<V>> {
+    const popup = window.open(this.url, '_blank', 'popup=true');
+    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/components/__tests__/EmbeddedComponent.test.ts

@@ -281,8 +281,8 @@ describe('EmbeddedComponent', () => {
       vi.unstubAllGlobals();
     });
 
-    test('modal closes on cancel message', () => {
-      component.openModal();
+    test('modal closes on cancel message', async () => {
+      const completionPromise = component.openModal();
 
       // Trigger cancel message through event manager
       component['eventManager']['handleMessage']({
@@ -291,7 +291,9 @@ describe('EmbeddedComponent', () => {
 
       expect(dialog.close).toHaveBeenCalled();
       expect(dialog.remove).toHaveBeenCalled();
-      // await expect(completionPromise).rejects.toThrow();
+
+      // Add expectation for the rejection
+      await expect(completionPromise).rejects.toThrow('User cancelled');
     });
 
     test('modal closes on completion', async () => {
@@ -527,4 +529,125 @@ describe('EmbeddedComponent', () => {
       expect(component.options).toEqual(newOptions);
     });
   });
+
+  describe('popup', () => {
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+    let mockWindow: Window;
+    let popupWindow: Window;
+
+    beforeEach(() => {
+      popupWindow = {
+        close: vi.fn(),
+      } as unknown as Window;
+
+      mockWindow = {
+        open: vi.fn().mockReturnValue(popupWindow),
+        addEventListener: vi.fn(),
+      } as unknown as Window;
+
+      vi.stubGlobal('window', mockWindow);
+
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+    });
+
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    test('opens popup window with correct parameters', () => {
+      component.popup();
+      expect(mockWindow.open).toHaveBeenCalledWith(url, '_blank', 'popup=true');
+    });
+
+    test('popup closes on cancel message', async () => {
+      const completionPromise = component.popup();
+
+      // Trigger cancel message through event manager
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.CANCEL },
+      } as MessageEvent);
+
+      expect(popupWindow.close).toHaveBeenCalled();
+      await expect(completionPromise).rejects.toThrow('User cancelled');
+    });
+
+    test('popup closes on completion', async () => {
+      const completionPromise = component.popup();
+      const response = { valid: true, value: 'completed' };
+
+      // Trigger complete message through event manager
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.COMPLETE, response },
+      } as MessageEvent);
+
+      expect(popupWindow.close).toHaveBeenCalled();
+      await expect(completionPromise).resolves.toBe(response);
+    });
+
+    test('handles message events from popup window', async () => {
+      const completionPromise = component.popup(); // Store the promise
+
+      // Get the event listener callback
+      const messageHandler =
+        // @ts-expect-error TS is getting confused with the mock
+        (mockWindow.addEventListener as vi.Mock).mock.calls.find(
+          // @ts-expect-error TS is getting confused with the mock
+          (call) => call[0] === 'message',
+        )?.[1];
+
+      expect(messageHandler).toBeDefined();
+
+      // Mock a message event from the popup
+      const mockPort = { start: vi.fn() };
+      const mockEvent = {
+        source: popupWindow,
+        ports: [mockPort],
+      };
+
+      // Call the handler
+      messageHandler(mockEvent);
+
+      // Verify the port was set in the event manager
+      expect(component['eventManager']['port']).toBe(mockPort);
+
+      // Clean up by completing the promise
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.COMPLETE, response: { valid: true } },
+      } as MessageEvent);
+
+      await completionPromise; // Wait for the promise to complete
+    });
+
+    test('ignores message events from other sources', async () => {
+      const completionPromise = component.popup();
+
+      const messageHandler =
+        // @ts-expect-error TS is getting confused with the mock
+        (mockWindow.addEventListener as vi.Mock).mock.calls.find(
+          // @ts-expect-error TS is getting confused with the mock
+          (call) => call[0] === 'message',
+        )?.[1];
+
+      // Mock a message event from a different source
+      const mockEvent = {
+        source: {} as Window,
+        ports: [{ start: vi.fn() }],
+      };
+
+      messageHandler(mockEvent);
+
+      // Verify the port was not set in the event manager
+      expect(component['eventManager']['port']).toBeUndefined();
+
+      // Clean up by completing the promise
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.COMPLETE, response: { valid: true } },
+      } as MessageEvent);
+
+      await completionPromise; // Wait for the promise to complete
+    });
+  });
 });

package/src/notabene.ts

@@ -33,7 +33,6 @@ import type {
   NaturalPerson,
   NotabeneAsset,
   OwnershipProof,
-  Ready,
   ResizeRequest,
   ScreenshotProof,
   SignatureProof,
@@ -61,6 +60,7 @@ import {
   ProofTypes,
   Status,
   ValidationSections,
+  VASPSearchControl,
 } from './types';
 import { type MessageCallback } from './utils/MessageEventManager';
 import { decodeFragmentToObject, encodeObjectToFragment } from './utils/urls';
@@ -76,6 +76,7 @@ export {
   ProofTypes,
   Status,
   ValidationSections,
+  VASPSearchControl,
 };
 export type {
   Agent,
@@ -110,7 +111,6 @@ export type {
   NaturalPerson,
   NotabeneAsset,
   OwnershipProof,
-  Ready,
   ResizeRequest,
   ScreenshotProof,
   SignatureProof,

package/src/types.ts

@@ -235,10 +235,10 @@ export type ISOCurrency = string;
  * @public
  */
 export type Theme = {
-  primaryColor: string;
-  secondaryColor: string;
-  fontFamily: string;
-  logo: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  fontFamily?: string;
+  logo?: string;
 };
 
 /**
@@ -700,6 +700,19 @@ export type FieldTypes = {
   legalPerson?: LegalPersonFields;
 };
 
+/**
+ * VASP Visibility Control representing allow/deny behaviour for VASP visibility
+ *
+ * @remarks
+ * - ALLOWED: Include VASPs you have explicitly allowed in the Notabene Network
+ * - PENDING: Include VASPs neither allowed nor denied
+ * @public
+ */
+export const enum VASPSearchControl {
+  ALLOWED = 'allowed',
+  PENDING = 'pending',
+}
+
 /**
  * Options for which VASPs to be searchable
  * @public
@@ -707,6 +720,7 @@ export type FieldTypes = {
 export type VASPOptions = {
   addUnknown?: boolean;
   onlyActive?: boolean;
+  searchable?: VASPSearchControl[]; // If array left empty all VASPs will be searchable
 };
 
 /**
@@ -765,7 +779,6 @@ export interface TransactionOptions {
  * - COMPLETE: Indicates a completed operation with response data
  * - RESIZE: Request to adjust component size/dimensions
  * - RESULT: Operation result notification
- * - READY: Component is initialized and ready
  * - INVALID: Validation failed with errors
  * - ERROR: Operation encountered an error
  * - CANCEL: Operation was cancelled
@@ -775,7 +788,6 @@ export const enum CMType {
   COMPLETE = 'complete',
   RESIZE = 'resize',
   RESULT = 'result',
-  READY = 'ready',
   INVALID = 'invalid',
   ERROR = 'error',
   CANCEL = 'cancel',
@@ -792,14 +804,6 @@ export type Completed<T> = {
   response: TransactionResponse<T>;
 };
 
-/**
- * Represents a ready component message
- * @public
- */
-export type Ready = {
-  type: CMType.READY;
-};
-
 /**
  * Represents a resize request component message. This is handled by the library.
  * @internal
@@ -812,11 +816,15 @@ export type ResizeRequest = {
 /**
  * Represents an error component message
  * @param message - Error message
+ * @param description - Description of the error message
+ * @param identifier - Identifier code of the error message
  * @public
  */
 export type Error = {
   type: CMType.ERROR;
   message: string;
+  description?: string;
+  identifier?: string;
 };
 
 /**
@@ -849,7 +857,6 @@ export type InvalidValue<T> = {
  * - Completed: Operation finished successfully with response data
  * - Cancel: User cancelled the operation
  * - Error: Operation failed with error message
- * - Ready: Component initialized and ready for use
  * - ResizeRequest: Component needs to adjust its dimensions
  * - InvalidValue: Validation failed with current partial value
  *
@@ -858,7 +865,6 @@ export type InvalidValue<T> = {
  * @see {@link Completed} For successful completion message format
  * @see {@link Cancel} For cancellation message format
  * @see {@link Error} For error message format
- * @see {@link Ready} For ready message format
  * @see {@link ResizeRequest} For resize message format
  * @see {@link InvalidValue} For validation failure message format
  * @public
@@ -867,7 +873,6 @@ export type ComponentMessage<T> =
   | Completed<T>
   | Cancel
   | Error
-  | Ready
   | ResizeRequest
   | InvalidValue<T>;
 

package/src/utils/__tests__/MessageEventManager.test.ts

@@ -1,6 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import {
-  HMType,
   type TransactionOptions,
   type UpdateValue,
   type Withdrawal,
@@ -34,13 +33,13 @@ describe('MessageEventManager', () => {
     });
 
     it('should subscribe and receive messages of a specific type', () => {
-      const readyHandler = vi.fn();
-      messageEventManager.on('ready', readyHandler);
+      const completeHandler = vi.fn();
+      messageEventManager.on('complete', completeHandler);
 
-      const readyMessage = { type: 'ready' };
-      mockPort.onmessage!({ data: readyMessage } as MessageEvent);
+      const completeMessage = { type: 'complete' };
+      mockPort.onmessage!({ data: completeMessage } as MessageEvent);
 
-      expect(readyHandler).toHaveBeenCalledWith(readyMessage);
+      expect(completeHandler).toHaveBeenCalledWith(completeMessage);
     });
 
     it('should not call handlers for different message types', () => {
@@ -82,7 +81,8 @@ describe('MessageEventManager', () => {
 
     it('should send messages through the port', () => {
       const message: UpdateValue<Withdrawal, TransactionOptions> = {
-        type: HMType.UPDATE,
+        // @ts-expect-error Type '"update"' is not assignable to type 'HMType.UPDATE'.
+        type: 'update',
         value: { requestId: 'id' },
       };
       messageEventManager.send(message);

package/docs/types/type-aliases/Ready.md

@@ -1,21 +0,0 @@
-[**@notabene/javascript-sdk**](../../README.md) • **Docs**
-
-***
-
-[@notabene/javascript-sdk](../../modules.md) / [types](../README.md) / Ready
-
-# Type Alias: Ready
-
-> **Ready**: `object`
-
-Represents a ready component message
-
-## Type declaration
-
-### type
-
-> **type**: [`READY`](../enumerations/CMType.md#ready)
-
-## Defined in
-
-[types.ts:799](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/675e0bac9f2136d1cf47e6f5980760f80d3d1995/src/types.ts#L799)