@notabene/javascript-sdk 1.34.0 → 2.0.0-RC

package/src/notabene.ts

@@ -1,318 +1,322 @@
-// @ts-ignore
-import { dom, node } from 'jsx-pragmatic';
-// @ts-ignore
-import zoid, { destroy } from 'zoid';
-import {
-  Fallback,
-  FieldsProps,
-  NonCustodialDeclarationType,
-  OptInFeature,
+import EmbeddedComponent from './components/EmbeddedComponent';
+import type {
+  Agent,
+  BlockchainAddress,
+  CAIP10,
+  CAIP19,
+  CAIP2,
+  CallbackOptions,
+  Cancel,
+  Completed,
+  ComponentMessage,
+  ComponentResponse,
+  ConnectionOptions,
+  ConnectionRequest,
+  Counterparty,
+  CryptoCredential,
+  DeclarationProof,
+  Deposit,
+  DepositRequest,
+  DepositRequestOptions,
+  Destination,
+  DID,
+  DTI,
+  Error,
+  FieldTypes,
+  HostMessage,
+  InvalidValue,
+  IVMS101,
+  LegalPerson,
+  LEI,
+  MicroTransferProof,
+  NationalIdentification,
+  NaturalPerson,
+  NotabeneAsset,
+  OwnershipProof,
+  Ready,
+  ResizeRequest,
+  ScreenshotProof,
+  SignatureProof,
   Theme,
+  ThresholdOptions,
   Transaction,
-  TransactionTypeAllowed,
-  WidgetType,
+  TransactionAsset,
+  TransactionOptions,
+  TransactionResponse,
+  TravelAddress,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
+  VASP,
+  VASPOptions,
+  Wallet,
+  Withdrawal,
+} from './types';
+import {
+  AgentType,
+  CMType,
+  HMType,
+  PersonType,
+  ProofStatus,
+  ProofTypes,
+  Status,
+  ValidationSections,
 } from './types';
-import { popupProps, widgetProps } from './zoidComponentProps';
+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 type {
+  Agent,
+  BlockchainAddress,
+  CAIP2,
+  CAIP10,
+  CAIP19,
+  CryptoCredential,
+  TravelAddress,
+  NotabeneAsset,
+  DTI,
+  VASPOptions,
+  NationalIdentification,
+  FieldTypes,
+  DID,
+  MessageCallback,
+  CallbackOptions,
+  Cancel,
+  Completed,
+  ComponentMessage,
+  ComponentResponse,
+  ConnectionRequest,
+  Counterparty,
+  DeclarationProof,
+  Deposit,
+  DepositRequest,
+  Destination,
+  Error,
+  HostMessage,
+  InvalidValue,
+  IVMS101,
+  LegalPerson,
+  LEI,
+  MicroTransferProof,
+  NaturalPerson,
+  OwnershipProof,
+  Ready,
+  ResizeRequest,
+  ScreenshotProof,
+  SignatureProof,
+  Theme,
+  ThresholdOptions,
+  Transaction,
+  TransactionAsset,
+  TransactionOptions,
+  TransactionResponse,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
+  VASP,
+  Wallet,
+  Withdrawal,
+};
+export {
+  CMType,
+  HMType,
+  ProofStatus,
+  ProofTypes,
+  PersonType,
+  Status,
+  AgentType,
+  ValidationSections,
+  decodeFragmentToObject,
+};
+
+/**
+ * Configuration for the Notabene SDK
+ *
+ * @public
+ */
+export interface NotabeneConfig {
+  /**
+   * The URL of the Notabene API node
+   */
+  nodeUrl?: string;
 
-interface NotabeneConfig {
-  widget: string;
-  container: string;
-  authToken: string;
-  vaspDID: string;
-  onValidStateChange(isValid: boolean): void;
-  onError(err: any): void;
+  /**
+   * The authentication token for the Notabene API
+   */
+  authToken?: string;
+
+  /**
+   * The URL of the Notabene UX components
+   */
+  uxUrl?: string;
+
+  /**
+   * Custom theme configuration for the UX components
+   */
   theme?: Theme;
-  dictionary?: { [key: string]: string };
-  transactionTypeAllowed?: TransactionTypeAllowed;
-  nonCustodialDeclarationType?: NonCustodialDeclarationType;
-  beneficiaryDetails?: string[]; // @deprecated beneficiaryDetails - do not delete yet
-  fieldsProps?: FieldsProps;
-  fallbacks?: Fallback[];
-  optInFeatures?: OptInFeature[];
-}
 
+  /**
+   * The locale to use for the UX components
+   */
+  locale?: string;
+}
+/**
+ * Primary constructor for Notabene UX elements
+ *
+ * This class provides methods to create and manage various Notabene components
+ * such as withdrawal assist, deposit assist, connect, and deposit request.
+ * It also handles URL generation and fragment decoding for these components.
+ *
+ * @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 locale?: string;
 
+  /**
+   * Creates a new instance of the Notabene SDK
+   *
+   * @param config - Configuration options for the Notabene SDK
+   */
   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' },
-    ];
+    this.uxUrl = config.uxUrl || 'https://connect.notabene.id';
+    this.nodeUrl = config.nodeUrl;
+    this.authToken = config.authToken;
+    this.theme = config.theme;
+    this.locale = config.locale;
   }
 
   /**
-   * Renders a new widget
-   * @param type - the type of widget to render
+   * Generates a URL for a Notabene component
+   *
+   * @param path - The path of the component
+   * @param value - Transaction data
+   * @param configuration - Optional transaction configuration
+   * @param callbacks - Optional callback configuration
+   * @returns component URL
+   * @internal
    */
-  public async renderWidget(
-    type: WidgetType = WidgetType.WITHDRAWAL
-  ): Promise<void> {
-    this._renderWidget(type);
-  }
+  componentUrl<V, O>(
+    path: string,
+    value: V,
+    configuration?: O,
+    callbacks?: CallbackOptions,
+  ): string {
+    const url = new URL(this.uxUrl);
+    url.pathname = path;
 
-  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,
+    const hash = encodeObjectToFragment({
+      authToken: this.authToken,
+      value,
+      configuration,
     });
-    this.popup.updateProps({
-      transaction: this.tx,
-      type,
-    });
-    this.popup.hide();
-    await this.widget.render(this.config.container);
-    await this.renderPopup();
-  }
+    url.hash = hash;
+    if (this.nodeUrl) url.searchParams.set('nodeUrl', this.nodeUrl);
 
-  private async renderPopup(): Promise<void> {
-    if (!this.popup) return;
-
-    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.locale) {
+      url.searchParams.set('locale', this.locale);
     }
-    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();
+  /**
+   * Creates a new embedded component
+   *
+   * @param path - The path of the component
+   * @param value - Transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance
+   * @internal
+   */
+  createComponent<V, O>(
+    path: string,
+    value: Partial<V>,
+    options?: O,
+    callbacks?: CallbackOptions,
+  ) {
+    return new EmbeddedComponent<V, O>(
+      this.componentUrl(path, value, options, callbacks),
+      value,
+      options,
+    );
   }
 
-  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);
+  /**
+   * Creates a withdrawal assist component
+   *
+   * @param value - Withdrawal transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for withdrawal assistance
+   */
+  public createWithdrawalAssist(
+    value: Partial<Withdrawal>,
+    options?: TransactionOptions,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent<Withdrawal, TransactionOptions>(
+      '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',
-      },
-      attributes: {
-        iframe: {
-          allow: 'usb *;bluetooth *',
-        },
-      },
-      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;
+  /**
+   * Creates a connect component
+   *
+   * @param value - Connection request data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for connection
+   * @alpha
+   */
+  public createConnectWallet(
+    value: ConnectionRequest,
+    options?: ConnectionOptions,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent<ConnectionRequest, ConnectionOptions>(
+      'connect',
+      value,
+      options,
+      callbacks,
+    );
   }
 
-  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%',
-      },
-      attributes: {
-        iframe: {
-          allow: 'usb *;bluetooth *',
-        },
-      },
-      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;
+  /**
+   * Creates a deposit request component
+   *
+   * @param value - Deposit request data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for deposit requests
+   * @public
+   */
+  public createDepositRequest(
+    value: DepositRequest,
+    options?: DepositRequestOptions,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent<DepositRequest, DepositRequestOptions>(
+      'deposit-request',
+      value,
+      options,
+      callbacks,
+    );
   }
 }
-
-if (window) window.Notabene = Notabene;