@notabene/javascript-sdk 1.34.0 → 2.0.0-RC

package/src/__tests__/notabene.test.ts

@@ -0,0 +1,270 @@
+import { fc, test } from '@fast-check/vitest';
+import { describe } from 'vitest';
+import Notabene from '../notabene';
+import {
+  abitraryCallbackOptions,
+  arbitraryComponent,
+  arbitraryConnectionOptions,
+  arbitraryConnectionRequest,
+  arbitraryDepositRequest,
+  arbitraryDepositRequestOptions,
+  arbitraryLocale,
+  arbitraryTransactionOptions,
+  arbitraryWithdrawal,
+} from '../utils/arbitraries';
+
+describe('Notabene', () => {
+  describe('defaults', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('locale', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      arbitraryLocale(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, locale) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+          locale,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('locale') === locale &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('minimal', () => {
+    test.prop([arbitraryComponent(), fc.object()])(
+      'Should set the correct values',
+      (component, value) => {
+        const notabene = new Notabene({});
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash === `#value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.hostname === 'connect.notabene.id' &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with uxUrl', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.webAuthority(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, uxAuthority, value) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+          uxUrl: `https://${uxAuthority}`,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        const [domain, port] = uxAuthority.split(':');
+        return (
+          url.hostname === domain &&
+          url.port === (port || '') &&
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with value and configuration', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, configuration) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(
+          notabene.componentUrl(component, value, configuration),
+        );
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(configuration))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with value and configuration', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      fc.object(),
+      abitraryCallbackOptions(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, configuration, callbacks) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(
+          notabene.componentUrl(component, value, configuration, callbacks),
+        );
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(configuration))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}` &&
+          url.searchParams.get('callback_url') === callbacks.callback &&
+          url.searchParams.get('redirect_uri') === callbacks.redirectUri
+        );
+      },
+    );
+  });
+
+  describe('createWithdrawalAssist', () => {
+    test.prop([
+      fc.string({ minLength: 3 }), // authToken
+      fc.webUrl(), // nodeUrl
+      arbitraryWithdrawal(),
+      arbitraryTransactionOptions(), // options
+      abitraryCallbackOptions(), // callbacks
+    ])(
+      'Should create withdrawal assist component with correct URL',
+      (authToken, nodeUrl, value, options, callbacks) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+
+        const component = notabene.createWithdrawalAssist(
+          value,
+          options,
+          callbacks,
+        );
+        const url = new URL(component.url);
+
+        return (
+          url.pathname === '/withdrawal-assist' &&
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(options))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('callback_url') === callbacks.callback &&
+          url.searchParams.get('redirect_uri') === callbacks.redirectUri
+        );
+      },
+    );
+  });
+
+  describe('createDepositRequest', () => {
+    test.prop([
+      fc.string({ minLength: 3 }), // authToken
+      fc.webUrl(), // nodeUrl
+      arbitraryDepositRequest(),
+      arbitraryDepositRequestOptions(), // options
+      abitraryCallbackOptions(), // callbacks
+    ])(
+      'Should create deposit assist component with correct URL',
+      (authToken, nodeUrl, value, options, callbacks) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+
+        const component = notabene.createDepositRequest(
+          value,
+          options,
+          callbacks,
+        );
+        const url = new URL(component.url);
+
+        return (
+          url.pathname === '/deposit-request' &&
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(options))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('callback_url') === callbacks.callback &&
+          url.searchParams.get('redirect_uri') === callbacks.redirectUri
+        );
+      },
+    );
+  });
+
+  describe('createConnectWallet', () => {
+    test.prop([
+      fc.string({ minLength: 3 }), // authToken
+      fc.webUrl(), // nodeUrl
+      arbitraryConnectionRequest(),
+      arbitraryConnectionOptions(), // options
+      abitraryCallbackOptions(), // callbacks
+    ])(
+      'Should create connect wallet component with correct URL',
+      (authToken, nodeUrl, value, options, callbacks) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+
+        const component = notabene.createConnectWallet(
+          value,
+          options,
+          callbacks,
+        );
+        const url = new URL(component.url);
+
+        return (
+          url.pathname === '/connect' &&
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(options))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('callback_url') === callbacks.callback &&
+          url.searchParams.get('redirect_uri') === callbacks.redirectUri
+        );
+      },
+    );
+  });
+});

package/src/components/EmbeddedComponent.ts

@@ -0,0 +1,237 @@
+import {
+  CMType,
+  HMType,
+  HostMessage,
+  TransactionResponse,
+  ValidationError,
+} from '../types';
+import {
+  MessageCallback,
+  MessageEventManager,
+} from '../utils/MessageEventManager';
+
+/**
+ * An embedded Notabene component
+ * @public
+ */
+
+export default class EmbeddedComponent<V, O> {
+  private _url: string;
+  private _value: Partial<V>;
+  private _options?: O;
+  private _errors: ValidationError[] = [];
+
+  private iframe?: HTMLIFrameElement;
+  private eventManager: MessageEventManager<V, O>;
+  private modal?: HTMLDialogElement;
+
+  /**
+   * Creates an instance of EmbeddedComponent.
+   * @param url - The URL of the embedded component
+   * @param value - The initial transaction value
+   */
+
+  constructor(url: string, value: Partial<V>, options?: O) {
+    this._url = url;
+    this._value = value;
+    this._options = options;
+    this.eventManager = new MessageEventManager<V, O>();
+    this.on(CMType.INVALID, (message) => {
+      if (message.type === CMType.INVALID) {
+        this._errors = message.errors;
+        this._value = message.value as V;
+      }
+    });
+    this.on(CMType.RESIZE, (message) => {
+      if (message.type === CMType.RESIZE) {
+        if (this.iframe) this.iframe.style.height = `${message.height}px`;
+      }
+    });
+  }
+  /**
+   * Gets the URL of the embedded component
+   * @returns The URL of the embedded component
+   */
+
+  public get url(): string {
+    return this._url;
+  }
+  /**
+   * Gets the current transaction value
+   * @returns The current transaction value
+   */
+
+  public get value(): Partial<V> {
+    return this._value;
+  }
+
+  public get options(): O | undefined {
+    return this._options;
+  }
+
+  public get errors(): ValidationError[] {
+    return this._errors;
+  }
+
+  /**
+   * Opens the component URL in the current window
+   */
+
+  public open() {
+    document.location.href = this.url;
+  }
+
+  /**
+   * Mounts the component to a parent element
+   * @param parentId - The ID of the parent element
+   * @throws Will throw an error if the parent element is not found
+   */
+
+  mount(parentId: string) {
+    const parent = document.querySelector(parentId);
+    if (!parent) throw new Error(`parentID ${parentId} not found`);
+    this.embed(parent);
+  }
+
+  /**
+   * Embeds the component into a parent element
+   * @param parent - The parent element to embed the component into
+   */
+  embed(parent: Element, modal: boolean = false) {
+    // console.log(this.url);
+    this.removeEmbed();
+    this.iframe = document.createElement('iframe');
+    this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
+    this.iframe.allow = 'web-share';
+    this.iframe.style.width = '100%';
+    this.iframe.style.height = '100px';
+    this.iframe.style.border = 'none';
+    this.iframe.style.overflow = 'hidden';
+    // this.iframe.setAttribute('allowtransparency', 'true');
+    // this.iframe.style.backgroundColor = 'transparent';
+    parent.appendChild(this.iframe);
+
+    window.addEventListener('message', (event: MessageEvent) => {
+      if (event.source !== this.iframe?.contentWindow) {
+        return;
+      }
+      // console.log('received message from iframe', event.data);
+      this.eventManager?.setPort(event.ports[0]);
+    });
+
+    this.iframe?.contentWindow?.focus();
+  }
+
+  removeEmbed() {
+    if (this.iframe) this.iframe.remove();
+  }
+
+  /**
+   * Sends a message to the embedded component
+   * @param message - The message to send
+   */
+  send(message: HostMessage<V, O>): void {
+    this.eventManager.send(message);
+  }
+
+  /**
+   * Adds an event listener for a specific message type
+   * @param messageType - The type of message to listen for
+   * @param callback - The callback function to execute when the message is received
+   */
+
+  on(messageType: string, callback: MessageCallback<V>): () => void {
+    return this.eventManager.on(messageType, callback);
+  }
+
+  /**
+   * Removes an event listener for a specific message type
+   * @param messageType - The type of message to stop listening for
+   * @param callback - The callback function to remove
+   */
+
+  off(messageType: string, callback: MessageCallback<V>): void {
+    this.eventManager.off(messageType, callback);
+  }
+
+  /**
+   * Updates the transaction value and sends an update message to the component
+   * @param value - The new transaction value
+   */
+  update(value: Partial<V>, options?: O) {
+    this._value = value;
+    if (options) this._options = options;
+    this.send({ type: HMType.UPDATE, value, options: this._options });
+  }
+
+  /**
+   * Waits for the component to complete and returns the transaction response
+   * @returns A promise that resolves with the transaction response
+   */
+
+  completion(): Promise<TransactionResponse<V>> {
+    return new Promise((resolve, reject) => {
+      let removeComplete: undefined | (() => void) = undefined;
+      let removeError: undefined | (() => void) = undefined;
+      function cleanup() {
+        if (removeComplete) removeComplete();
+        if (removeError) removeError();
+      }
+      removeComplete = this.on(CMType.COMPLETE, (message) => {
+        resolve((message as any).response);
+        cleanup();
+      });
+      removeError = this.on('error', (message) => {
+        reject(new Error((message as any).message));
+        cleanup();
+      });
+    });
+  }
+
+  /**
+   * Opens the component in a modal dialog
+   */
+
+  openModal(): Promise<TransactionResponse<V>> {
+    if (this.modal) {
+      this.closeModal();
+    }
+    this.modal = document.createElement('dialog');
+    this.modal.style.border = 'none';
+    this.modal.style.backgroundColor = 'white';
+    this.modal.style.maxWidth = '100vw';
+    this.modal.style.maxHeight = '100vh';
+    this.modal.style.width = '600px';
+    this.modal.style.height = '600px';
+
+    document.body.appendChild(this.modal);
+    this.embed(this.modal, true);
+    this.on(CMType.CANCEL, () => {
+      this.closeModal();
+    });
+
+    this.on(CMType.COMPLETE, () => {
+      this.closeModal();
+    });
+
+    this.modal.showModal();
+    this.modal.addEventListener('click', () => {
+      // console.log('click');
+      this.closeModal();
+    });
+    return this.completion();
+  }
+  /**
+   * Closes the modal dialog
+   *
+   */
+
+  closeModal(): void {
+    if (this.modal) {
+      // console.log('closeModal');
+      this.modal?.close();
+      this.modal.remove();
+      this.modal = undefined;
+    }
+  }
+}