@notabene/javascript-sdk 1.32.0 → 2.0.0-next.2

package/src/notabene.ts

@@ -1,308 +1,202 @@
-// @ts-ignore
-import { dom, node } from 'jsx-pragmatic';
-import {
-  FieldsProps,
-  NonCustodialDeclarationType,
+import EmbeddedComponent from './components/EmbeddedComponent';
+import type {
+  Agent,
+  AgentType,
+  CallbackOptions,
+  ComponentMessage,
+  Counterparty,
+  DeclarationProof,
+  Destination,
+  HostMessage,
+  IVMS101,
+  MicroTransferProof,
+  OwnershipProof,
+  PersonType,
+  ProofStatus,
+  ProofTypes,
+  ScreenshotProof,
+  SignatureProof,
+  Status,
   Theme,
   Transaction,
-  TransactionTypeAllowed,
-  WidgetType,
-  Fallback,
-  OptInFeature,
+  TransactionAsset,
+  VASP,
+  Wallet,
+  Withdrawal,
 } from './types';
-// @ts-ignore
-import zoid, { destroy } from 'zoid';
-import { popupProps, widgetProps } from './zoidComponentProps';
-
-interface NotabeneConfig {
-  widget: string;
-  container: string;
+import { CMType, TransactionResponse } from './types';
+import { encodeObjectToFragment } from './utils/urls';
+
+export type {
+  CMType,
+  ComponentMessage,
+  EmbeddedComponent,
+  HostMessage,
+  Theme,
+  Counterparty,
+  Withdrawal,
+  Transaction,
+  TransactionResponse,
+  Destination as destination,
+  TransactionAsset,
+  SignatureProof,
+  ScreenshotProof,
+  MicroTransferProof,
+  DeclarationProof,
+  Notabene,
+  ProofStatus,
+  ProofTypes,
+  IVMS101,
+  PersonType,
+  Status,
+  VASP,
+  Wallet,
+  Agent,
+  AgentType,
+  OwnershipProof,
+};
+
+/**
+ * Configuration for the Notabene SDK
+ *
+ * @public
+ */
+export interface NotabeneConfig {
+  nodeUrl: string;
   authToken: string;
-  vaspDID: string;
-  onValidStateChange(isValid: boolean): void;
-  onError(err: any): void;
+  uxUrl?: string;
   theme?: Theme;
   dictionary?: { [key: string]: string };
-  transactionTypeAllowed?: TransactionTypeAllowed;
-  nonCustodialDeclarationType?: NonCustodialDeclarationType;
-  beneficiaryDetails?: string[]; // @deprecated beneficiaryDetails - do not delete yet
-  fieldsProps?: FieldsProps;
-  fallbacks?: Fallback[];
-  optInFeatures?: OptInFeature[];
 }
 
+/**
+ * Primary constructor for Notabene UX elements
+ *
+ * @public
+ */
+
 export default class Notabene {
-  private widget: zoid.ZoidComponent;
-  private popup: zoid.ZoidComponent;
-  private config: NotabeneConfig;
-  private tx: Transaction | undefined;
-  private error?: Error;
-  private widgetRendered: boolean;
-  private popupRendered: boolean;
-  private shouldBeDestroyed: boolean;
+  private nodeUrl: string;
+  private authToken: string;
+  private uxUrl: string;
+  private theme?: Theme;
+  private dictionary?: { [key: string]: string };
 
   constructor(config: NotabeneConfig) {
-    this.config = config;
-    this.config.nonCustodialDeclarationType =
-      config.nonCustodialDeclarationType || 'SIGNATURE';
-    this.config.transactionTypeAllowed = config.transactionTypeAllowed || 'ALL';
-    this.widgetRendered = false;
-    this.shouldBeDestroyed = false;
-    this.popupRendered = false;
-    this.config.fallbacks = this.config.fallbacks || [
-      { flow: 'WALLET_NOT_SUPPORTED', action: 'DECLARATION' },
-    ];
-  }
-
-  /**
-   * Renders a new widget
-   * @param type - the type of widget to render
-   */
-  public async renderWidget(
-    type: WidgetType = WidgetType.WITHDRAWAL
-  ): Promise<void> {
-    this._renderWidget(type);
+    this.uxUrl = config.uxUrl || 'https://ux.notabene.id';
+    this.nodeUrl = config.nodeUrl;
+    this.authToken = config.authToken;
+    this.theme = config.theme;
+    this.dictionary = config.dictionary;
   }
 
-  private async _renderWidget(type: WidgetType): Promise<void> {
-    if (this.widgetRendered) {
-      console.error(
-        'Notabene: Widget already rendered, please destroy it first'
-      );
-      this.config.onError(
-        new Error('Widget already rendered, please destroy it first')
-      );
-      return;
-    }
-
-    this.widget = await this.buildWidget();
-    this.popup = await this.buildPopup();
-    this.widget.updateProps({
-      transaction: this.tx,
-      type,
-    });
-    this.popup.updateProps({
-      transaction: this.tx,
-      type,
+  public componentUrl(
+    path: string,
+    value: Partial<Transaction>,
+    configuration?: any,
+    callbacks?: CallbackOptions,
+  ): string {
+    const url = new URL(this.uxUrl);
+    url.pathname = path;
+
+    const hash = encodeObjectToFragment({
+      authToken: this.authToken,
+      value,
+      configuration,
     });
-    this.popup.hide();
-    await this.widget.render(this.config.container);
-    await this.renderPopup();
-  }
-
-  private async renderPopup(): Promise<void> {
-    if (!this.popup) return;
+    url.hash = hash;
+    url.searchParams.set('nodeUrl', this.nodeUrl);
 
-    if (!this.popupRendered) {
-      await this.popup.render(this.config.container);
-      this.popupRendered = true;
+    if (this.theme) {
+      url.searchParams.set('theme', JSON.stringify(this.theme));
     }
-  }
-
-  public async destroyWidget(): Promise<void> {
-    if (!this.widgetRendered || !this.popupRendered) {
-      this.shouldBeDestroyed = true;
-      return;
+    if (this.dictionary) {
+      url.searchParams.set('dictionary', JSON.stringify(this.dictionary));
     }
-    await destroy();
-    this.shouldBeDestroyed = false;
-    this.widgetRendered = false;
-    this.popupRendered = false;
-  }
-
-  public setTransaction(tx: Transaction) {
-    this.tx = tx;
-    if (this.widgetRendered) {
-      this.widget.updateProps({
-        transaction: tx,
-      });
-      this.popup.updateProps({
-        transaction: tx,
-      });
+    if (callbacks) {
+      if (callbacks.callback)
+        url.searchParams.set('callback_url', callbacks.callback);
+      if (callbacks.redirectUri)
+        url.searchParams.set('redirect_uri', callbacks.redirectUri);
     }
-  }
-
-  private cleanUpDestroyedComponents() {
-    if (!this.shouldBeDestroyed) return;
-    this.destroyWidget();
-  }
-
-  private getWidgetUrl(): string {
-    const url = new URL(this.config.widget);
-    url.hash = `authToken=${this.config.authToken}`;
     return url.toString();
   }
 
-  private getAdditionalInfoUrl(): string {
-    const url = new URL(this.config.widget);
-    url.search = 'popup=true';
-    url.hash = `authToken=${this.config.authToken}`;
-    return url.toString();
+  public createComponent(
+    path: string,
+    value: Partial<Transaction>,
+    options?: any,
+    callbacks?: CallbackOptions,
+  ) {
+    return new EmbeddedComponent(
+      this.componentUrl(path, value, options, callbacks),
+      value,
+    );
   }
 
-  private handleError(err: any): void {
-    this.error = err;
-    if (this.widget && this.popup) {
-      this.widget.updateProps({
-        error: err,
-      });
-      this.popup.updateProps({
-        error: err,
-      });
-    }
-    if (!err || !this.config.onError) return;
-    this.config.onError(err);
+  public createWithdrawalAssist(
+    value: Partial<Withdrawal>,
+    options?: any,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent('withdrawal-assist', value, options, callbacks);
   }
 
-  private buildWidget(): zoid.ZoidComponent {
-    if (!this.config.authToken) {
-      console.error('Notabene: authToken is required');
-      return;
-    }
-
-    const builtWidget = zoid.create({
-      tag: 'widget',
-      url: this.getWidgetUrl(),
-      dimensions: {
-        width: '100%',
-        height: '280px',
+  public decodeFragmentToObject(fragment: string): Record<string, string> {
+    const pairs = fragment.slice(1).split('&');
+    return pairs.reduce(
+      (obj, pair) => {
+        const [key, value] = pair.split('=');
+        obj[decodeURIComponent(key)] = decodeURIComponent(value);
+        return obj;
       },
-      props: widgetProps,
-    })({
-      vaspDID: this.config.vaspDID,
-      transaction: {},
-      theme: this.config.theme,
-      dictionary: this.config.dictionary,
-      transactionTypeAllowed: this.config.transactionTypeAllowed,
-      nonCustodialDeclarationType: this.config.nonCustodialDeclarationType,
-      beneficiaryDetails: this.config.beneficiaryDetails,
-      fieldsProps: this.config.fieldsProps,
-      fallbacks: this.config.fallbacks,
-      optInFeatures: this.config.optInFeatures,
-      onRequireAdditionalInformation: () => {
-        this.popup.updateProps({
-          popupOpen: true,
-        });
-        this.popup.show();
-      },
-      onValidStateChange: (isValid: boolean) => {
-        this.config.onValidStateChange(isValid);
-      },
-      error: this.error,
-      onError: (err: any) => {
-        this.handleError(err);
-        console.debug('Notabene: Error handler called');
-      },
-      storeTransaction: (tx: Transaction) => {
-        this.setTransaction(tx);
-      },
-    });
-
-    builtWidget.event.on(zoid.EVENT.RENDERED, () => {
-      this.widgetRendered = true;
-      this.cleanUpDestroyedComponents();
-    });
-
-    return builtWidget;
+      {} as Record<string, string>,
+    );
   }
 
-  private buildPopup(): zoid.ZoidComponent {
-    if (!this.config.authToken) {
-      console.error('Notabene: authToken is required');
-      return;
-    }
-
-    const builtPopup = zoid.create({
-      tag: 'popup',
-      url: this.getAdditionalInfoUrl(),
-      children: () => {
-        return {
-          Transaction: this.tx,
-        };
-      },
-      dimensions: {
-        width: '100%',
-        height: '100%',
-      },
-      props: popupProps,
-      containerTemplate: ({ uid, doc, frame, prerenderFrame }: any) => {
-        return node(
-          'div',
-          { id: uid, class: 'nb-container' },
-          node(
-            'style',
-            null,
-            `
-            #${uid}.container {
-                border: 5px solid red;
-            }
-            .nb-overlay {
-              position: fixed;
-              width: 100vw;
-              height: 100vh;
-              top: 0;
-              left: 0;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background-color: rgba(0,0,0,0.5);
-            }
-            .nb-popup {
-              width: 100%;
-              height: 100%;
-            }
-            .nb-preloader {
-              display: none;
-            }
-          `
-          ),
-          node(
-            'div',
-            { class: 'nb-overlay' },
-            node('node', { el: frame, class: 'nb-popup' }),
-            node('node', { el: prerenderFrame, class: 'nb-preloader' })
-          )
-        ).render(dom({ doc }));
-      },
-    })({
-      vaspDID: this.config.vaspDID,
-      transaction: this.tx,
-      beneficiaryDetails: this.config.beneficiaryDetails,
-      fieldsProps: this.config.fieldsProps,
-      storeTransaction: (tx: Transaction) => {
-        this.setTransaction(tx);
-        console.debug('Notabene: Transaction stored');
-      },
-      close: () => {
-        this.popup.close();
-        console.debug('Notabene: Popup closing');
-      },
-      setPopupOpen: (isOpen: boolean) => {
-        this.popup.updateProps({
-          popupOpen: isOpen,
-        });
-      },
-      error: this.error,
-      onError: (err: any) => {
-        this.handleError(err);
-        console.debug('Notabene: Error handler called');
-      },
-      popupOpen: false,
-      theme: this.config.theme,
-      dictionary: this.config.dictionary,
-      transactionTypeAllowed: this.config.transactionTypeAllowed,
-      nonCustodialDeclarationType: this.config.nonCustodialDeclarationType,
-      fallbacks: this.config.fallbacks,
-      optInFeatures: this.config.optInFeatures,
-    });
-
-    builtPopup.event.on(zoid.EVENT.RENDERED, () => {
-      this.popupRendered = true;
-      this.cleanUpDestroyedComponents();
-    });
-
-    return builtPopup;
-  }
+  // private openModal(url: string): void {
+  //   if (this.modal) {
+  //     this.closeModal();
+  //   }
+  //   this.modal = document.createElement('div');
+  //   this.modal.style.position = 'fixed';
+  //   this.modal.style.top = '0';
+  //   this.modal.style.left = '0';
+  //   this.modal.style.width = '100%';
+  //   this.modal.style.height = '100%';
+  //   this.modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+  //   this.modal.style.display = 'flex';
+  //   this.modal.style.justifyContent = 'center';
+  //   this.modal.style.alignItems = 'center';
+  //   const iframe = document.createElement('iframe');
+  //   iframe.src = url;
+  //   iframe.setAttribute('allowtransparency', 'true');
+  //   // iframe.allowtransparency = true;
+  //   iframe.style.backgroundColor = 'transparent';
+  //   iframe.style.width = '90%';
+  //   iframe.style.height = '90%';
+  //   iframe.style.border = 'none';
+  //   iframe.style.overflow = 'hidden';
+  //   this.modal.appendChild(iframe);
+  //   document.body.appendChild(this.modal);
+  //   this.modal.addEventListener('click', () => {
+  //     console.log('click');
+  //     this.closeModal();
+  //   });
+  //   document.addEventListener('keydown', ({ key }) => {
+  //     console.log(`key: ${key}`);
+  //     if (key === 'Escape') {
+  //       console.log('esc');
+  //       this.closeModal();
+  //     }
+  //   });
+  // }
+
+  // private closeModal(): void {
+  //   if (this.modal) {
+  //     console.log('this.closeModal');
+  //     this.modal.remove();
+  //     this.modal = undefined;
+  //   }
+  // }
 }
-
-if (window) window.Notabene = Notabene;