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

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

@@ -24,4 +24,4 @@ Represents a resize request component message. This is handled by the library.
 
 ## Defined in
 
-[types.ts:807](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L807)
+[types.ts:811](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L811)

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

@@ -12,4 +12,4 @@ The source of a transaction
 
 ## Defined in
 
-[types.ts:207](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L207)
+[types.ts:207](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L207)

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

@@ -12,22 +12,22 @@ The theme of the Notabene SDK
 
 ## Type declaration
 
-### fontFamily
+### fontFamily?
 
-> **fontFamily**: `string`
+> `optional` **fontFamily**: `string`
 
-### logo
+### logo?
 
-> **logo**: `string`
+> `optional` **logo**: `string`
 
-### primaryColor
+### primaryColor?
 
-> **primaryColor**: `string`
+> `optional` **primaryColor**: `string`
 
-### secondaryColor
+### secondaryColor?
 
-> **secondaryColor**: `string`
+> `optional` **secondaryColor**: `string`
 
 ## Defined in
 
-[types.ts:237](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L237)
+[types.ts:237](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L237)

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

@@ -12,4 +12,4 @@ The asset of a transaction either a Notabene asset, a CAIP-19 asset, or a DTI.
 
 ## Defined in
 
-[types.ts:145](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L145)
+[types.ts:145](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L145)

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

@@ -34,4 +34,4 @@ VASPs and blockchain networks while maintaining privacy.
 
 ## Defined in
 
-[types.ts:186](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L186)
+[types.ts:186](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L186)

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

@@ -12,4 +12,4 @@ A Uniform Resource Identifier
 
 ## Defined in
 
-[types.ts:213](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L213)
+[types.ts:213](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L213)

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

@@ -24,4 +24,4 @@ Format: 8-4-4-4-12 hexadecimal digits
 
 ## Defined in
 
-[types.ts:39](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L39)
+[types.ts:39](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L39)

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

@@ -51,4 +51,4 @@ and its configuration without requiring a full reload/reinitialize.
 
 ## Defined in
 
-[types.ts:907](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L907)
+[types.ts:912](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L912)

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

@@ -33,4 +33,4 @@ Used for backwards compatibility with V1 API transaction payloads:
 
 ## Defined in
 
-[types.ts:605](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L605)
+[types.ts:605](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L605)

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

@@ -46,4 +46,4 @@ Transaction payload suitable for calling Notabene v1 tx/create
 
 ## Defined in
 
-[types.ts:611](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L611)
+[types.ts:611](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L611)

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

@@ -20,6 +20,10 @@ Options for which VASPs to be searchable
 
 > `optional` **onlyActive**: `boolean`
 
+### searchable?
+
+> `optional` **searchable**: [`VASPSearchControl`](../enumerations/VASPSearchControl.md)[]
+
 ## Defined in
 
-[types.ts:707](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L707)
+[types.ts:720](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L720)

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

@@ -22,4 +22,4 @@ Validation error
 
 ## Defined in
 
-[types.ts:677](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L677)
+[types.ts:677](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L677)

package/package.json

@@ -9,8 +9,8 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "packageManager": "yarn@3.2.2",
-  "version": "2.0.2",
+  "packageManager": "yarn@4.5.1",
+  "version": "2.0.4-NEXT.0",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",
@@ -27,17 +27,18 @@
     "prepare": "husky",
     "dev": "vite",
     "preview": "vite preview",
-    "watch": "parcel watch",
     "build:dev": "yarn build && yarn dev",
-    "build:clean": "rimraf dist/ ts-out coverage temp etc",
-    "build": "yarn lint && vite build && tsc && api-extractor run && yarn docs",
-    "lint": "eslint .",
-    "format": "prettier --write .",
+    "build:clean": "rimraf dist ts-out coverage temp",
+    "build": "yarn lint && vite build && yarn typecheck && api-extractor run && yarn docs",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "yarn lint --fix --cache --no-warn-ignored",
+    "format": "prettier --write --cache .",
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write .",
     "test": "vitest",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --skipLibCheck",
     "coverage": "vitest run --coverage --coverage.extension=.ts",
-    "release": "semantic-release",
-    "publish": "yarn build && npm publish"
+    "release": "semantic-release"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
@@ -48,8 +49,6 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^13.2.1",
     "@semantic-release/npm": "^12.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
     "@vitest/coverage-v8": "2.1.3",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
@@ -59,8 +58,8 @@
     "husky": "^9.1.6",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
-    "organize-imports-cli": "^0.10.0",
     "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.0",
     "typedoc": "^0.26.11",
@@ -72,8 +71,10 @@
   },
   "lint-staged": {
     "*.ts": [
+      "yarn format:check",
       "organize-imports-cli",
-      "eslint --fix"
+      "yarn lint:fix",
+      "yarn test --run"
     ]
   },
   "commitlint": {

package/src/components/EmbeddedComponent.ts

@@ -102,8 +102,9 @@ 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';
     this.iframe.style.overflow = 'hidden';
     this.iframe.scrolling = 'no';
@@ -172,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();
@@ -206,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();
     });
 
@@ -219,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
    *
@@ -234,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,26 +60,30 @@ import {
   ProofTypes,
   Status,
   ValidationSections,
+  VASPSearchControl,
 } from './types';
 import { type MessageCallback } from './utils/MessageEventManager';
 import { decodeFragmentToObject, encodeObjectToFragment } from './utils/urls';
 // Must be exported for React Native SDK to use
 export { default as EmbeddedComponent } from './components/EmbeddedComponent';
+export {
+  AgentType,
+  CMType,
+  decodeFragmentToObject,
+  HMType,
+  PersonType,
+  ProofStatus,
+  ProofTypes,
+  Status,
+  ValidationSections,
+  VASPSearchControl,
+};
 export type {
   Agent,
   BlockchainAddress,
-  CAIP2,
   CAIP10,
   CAIP19,
-  CryptoCredential,
-  TravelAddress,
-  NotabeneAsset,
-  DTI,
-  VASPOptions,
-  NationalIdentification,
-  FieldTypes,
-  DID,
-  MessageCallback,
+  CAIP2,
   CallbackOptions,
   Cancel,
   Completed,
@@ -88,20 +91,26 @@ export type {
   ComponentResponse,
   ConnectionRequest,
   Counterparty,
+  CryptoCredential,
   DeclarationProof,
   Deposit,
   DepositRequest,
   Destination,
+  DID,
+  DTI,
   Error,
+  FieldTypes,
   HostMessage,
   InvalidValue,
   IVMS101,
   LegalPerson,
   LEI,
+  MessageCallback,
   MicroTransferProof,
+  NationalIdentification,
   NaturalPerson,
+  NotabeneAsset,
   OwnershipProof,
-  Ready,
   ResizeRequest,
   ScreenshotProof,
   SignatureProof,
@@ -111,24 +120,15 @@ export type {
   TransactionAsset,
   TransactionOptions,
   TransactionResponse,
+  TravelAddress,
   UpdateValue,
   V1Transaction,
   ValidationError,
   VASP,
+  VASPOptions,
   Wallet,
   Withdrawal,
 };
-export {
-  CMType,
-  HMType,
-  ProofStatus,
-  ProofTypes,
-  PersonType,
-  Status,
-  AgentType,
-  ValidationSections,
-  decodeFragmentToObject,
-};
 
 /**
  * Configuration for the Notabene SDK

package/src/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Address,
   Beneficiary,
   ISOCountryCode,
@@ -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>;