@notabene/javascript-sdk 2.0.0-next.9 → 2.0.1

package/src/__tests__/notabene.test.ts

@@ -1,8 +1,17 @@
 import { fc, test } from '@fast-check/vitest';
 import { describe } from 'vitest';
-import { abitraryCallbackOptions, arbitraryComponent } from '../arbitraries';
 import Notabene from '../notabene';
-import { arbitraryLocale } from '../utils/arbitraries';
+import {
+  abitraryCallbackOptions,
+  arbitraryComponent,
+  arbitraryConnectionOptions,
+  arbitraryConnectionRequest,
+  arbitraryDepositRequest,
+  arbitraryDepositRequestOptions,
+  arbitraryLocale,
+  arbitraryTransactionOptions,
+  arbitraryWithdrawal,
+} from '../utils/arbitraries';
 
 describe('Notabene', () => {
   describe('defaults', () => {
@@ -156,4 +165,106 @@ describe('Notabene', () => {
       },
     );
   });
+
+  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/arbitraries.ts

@@ -1,13 +0,0 @@
-import fc from 'fast-check';
-import { CallbackOptions } from './types';
-
-const COMPONENT_MATCHER = /^[a-z0-9-_]+$/;
-// Arbitraries
-export const arbitraryComponent = (): fc.Arbitrary<string> =>
-  fc.stringMatching(COMPONENT_MATCHER);
-
-export const abitraryCallbackOptions = (): fc.Arbitrary<CallbackOptions> =>
-  fc.record({
-    callback: fc.webUrl(),
-    redirectUri: fc.webUrl(),
-  });

package/src/components/EmbeddedComponent.ts

@@ -2,7 +2,6 @@ import {
   CMType,
   HMType,
   HostMessage,
-  Transaction,
   TransactionResponse,
   ValidationError,
 } from '../types';
@@ -15,25 +14,32 @@ import {
  * An embedded Notabene component
  * @public
  */
-export default class EmbeddedComponent {
+
+export default class EmbeddedComponent<V, O> {
   private _url: string;
-  private _value: Partial<Transaction>;
+  private _value: Partial<V>;
+  private _options?: O;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager;
-  private ready = false;
+  private eventManager: MessageEventManager<V, O>;
   private modal?: HTMLDialogElement;
-  // private popup?: HTMLElement;
 
-  constructor(url: string, value: Partial<Transaction>) {
+  /**
+   * 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.eventManager = new MessageEventManager();
+    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 Transaction;
+        this._value = message.value as V;
       }
     });
     this.on(CMType.RESIZE, (message) => {
@@ -42,131 +48,187 @@ export default class EmbeddedComponent {
       }
     });
   }
+  /**
+   * 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<Transaction> {
+  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);
   }
 
-  embed(parent: Element) {
+  /**
+   * 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;
+    this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
+    this.iframe.allow = 'web-share; clipboard-write';
     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';
+    this.iframe.scrolling = 'no';
+    // 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);
+      // console.log('received message from iframe', event.data);
       this.eventManager?.setPort(event.ports[0]);
-      this.ready = true;
     });
 
     this.iframe?.contentWindow?.focus();
   }
 
-  send(message: HostMessage): void {
+  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);
   }
 
-  on(messageType: string, callback: MessageCallback): void {
-    this.eventManager.on(messageType, callback);
+  /**
+   * 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);
   }
 
-  off(messageType: string, callback: MessageCallback): void {
+  /**
+   * 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);
   }
 
-  update(value: Partial<Transaction>) {
+  /**
+   * 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;
-    this.send({ type: HMType.UPDATE, value });
+    if (options) this._options = options;
+    this.send({ type: HMType.UPDATE, value, options: this._options });
   }
 
-  completion(): Promise<TransactionResponse> {
+  /**
+   * 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) => {
-      this.closeModal();
-      this.on(CMType.COMPLETE, (message) => {
+      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();
       });
-      this.on('error', (message) => {
+      removeError = this.on('error', (message) => {
         reject(new Error((message as any).message));
+        cleanup();
       });
     });
   }
 
-  // popup(): void {
-  //   this.popup = document.createElement('div');
-  //   this.popup.style;
-  // }
+  /**
+   * Opens the component in a modal dialog
+   */
 
-  openModal(): void {
+  openModal(): Promise<TransactionResponse<V>> {
     if (this.modal) {
       this.closeModal();
     }
     this.modal = document.createElement('dialog');
-    // this.modal.style.maxWidth = '600px';
-    // this.modal.style.border = 'none !important';
-    // this.modal.style.background = 'transparent';
-    // this.modal.style.flexDirection = 'column';
-    // this.modal.style.alignItems = 'end';
-    // const close = document.createElement('button');
-    // close.innerText = 'X';
-    // close.style.fontSize = '1rem';
-    // close.style.padding = '0.25rem 0.5rem';
-    // close.style.display = 'block';
-    // close.style.background = 'white';
-    // close.style.color = '#aaa';
-    // close.style.border = '#aaa';
-    // close.addEventListener('click', () => this.closeModal());
-    // this.modal.appendChild(close);
-    // this.modal.css;
-    // this.modal.style.position = 'fixed';
-    // this.modal.style.bottom = '0';
-    // this.modal.style.left = '0';
-    // this.modal.style.right = '0';
-    // this.modal.style.top = '0';
-    // this.modal.style.left = '0';
-    // this.modal.style.width = '100%';
-    // this.modal.style.height = '100%';
-    // this.modal.style.backgroundColor = 'transparent';
-    // this.modal.style.display = 'flex';
-    // this.modal.style.justifyContent = 'center';
-    // this.modal.style.alignItems = 'center';
+    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);
+    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
+   *
+   */
 
-  private closeModal(): void {
+  closeModal(): void {
     if (this.modal) {
-      console.log('closeModal');
+      // console.log('closeModal');
       this.modal?.close();
       this.modal.remove();
       this.modal = undefined;