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

package/src/notabene.ts

@@ -1,59 +1,126 @@
 import EmbeddedComponent from './components/EmbeddedComponent';
 import type {
   Agent,
-  AgentType,
+  BlockchainAddress,
+  CAIP10,
+  CAIP19,
+  CAIP2,
   CallbackOptions,
+  Cancel,
+  Completed,
   ComponentMessage,
+  ComponentResponse,
+  ConnectionRequest,
   Counterparty,
+  CryptoCredential,
   DeclarationProof,
+  Deposit,
+  DepositRequest,
   Destination,
+  DID,
+  DTI,
+  Error,
+  FieldTypes,
   HostMessage,
+  InvalidValue,
   IVMS101,
+  LegalPerson,
+  LEI,
   MicroTransferProof,
+  NationalIdentification,
+  NaturalPerson,
+  NotabeneAsset,
   OwnershipProof,
-  PersonType,
-  ProofStatus,
-  ProofTypes,
+  Ready,
+  ResizeRequest,
   ScreenshotProof,
   SignatureProof,
-  Status,
   Theme,
   Transaction,
   TransactionAsset,
+  TransactionOptions,
+  TransactionResponse,
+  TravelAddress,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
   VASP,
+  VASPOptions,
   Wallet,
   Withdrawal,
 } from './types';
-import { CMType, TransactionResponse } from './types';
+import {
+  AgentType,
+  CMType,
+  HMType,
+  PersonType,
+  ProofStatus,
+  ProofTypes,
+  Status,
+} from './types';
+import { type MessageCallback } from './utils/MessageEventManager';
 import { encodeObjectToFragment } from './utils/urls';
-
+// Must be exported for React Native SDK to use
+export { default as EmbeddedComponent } from './components/EmbeddedComponent';
 export type {
-  CMType,
+  Agent,
+  BlockchainAddress,
+  CAIP2,
+  CAIP10,
+  CAIP19,
+  CryptoCredential,
+  TravelAddress,
+  NotabeneAsset,
+  DTI,
+  VASPOptions,
+  NationalIdentification,
+  FieldTypes,
+  DID,
+  MessageCallback,
+  CallbackOptions,
+  Cancel,
+  Completed,
   ComponentMessage,
-  EmbeddedComponent,
+  ComponentResponse,
+  ConnectionRequest,
+  Counterparty,
+  DeclarationProof,
+  Deposit,
+  DepositRequest,
+  Destination,
+  Error,
   HostMessage,
+  InvalidValue,
+  IVMS101,
+  LegalPerson,
+  LEI,
+  MicroTransferProof,
+  NaturalPerson,
+  OwnershipProof,
+  Ready,
+  ResizeRequest,
+  ScreenshotProof,
+  SignatureProof,
   Theme,
-  Counterparty,
-  Withdrawal,
   Transaction,
-  TransactionResponse,
-  Destination as destination,
   TransactionAsset,
-  SignatureProof,
-  ScreenshotProof,
-  MicroTransferProof,
-  DeclarationProof,
-  Notabene,
+  TransactionOptions,
+  TransactionResponse,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
+  VASP,
+  Wallet,
+  Withdrawal,
+};
+export {
+  CMType,
+  HMType,
   ProofStatus,
   ProofTypes,
-  IVMS101,
   PersonType,
   Status,
-  VASP,
-  Wallet,
-  Agent,
   AgentType,
-  OwnershipProof,
 };
 
 /**
@@ -62,38 +129,74 @@ export type {
  * @public
  */
 export interface NotabeneConfig {
-  nodeUrl: string;
-  authToken: string;
+  /**
+   * The URL of the Notabene API node
+   */
+  nodeUrl?: string;
+
+  /**
+   * 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 };
-}
 
+  /**
+   * 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 nodeUrl: string;
-  private authToken: string;
+  private nodeUrl?: string;
+  private authToken?: string;
   private uxUrl: string;
   private theme?: Theme;
-  private dictionary?: { [key: string]: string };
+  private locale?: string;
 
+  /**
+   * Creates a new instance of the Notabene SDK
+   *
+   * @param config - Configuration options for the Notabene SDK
+   */
   constructor(config: NotabeneConfig) {
-    this.uxUrl = config.uxUrl || 'https://ux.notabene.id';
+    this.uxUrl = config.uxUrl || 'https://connect.notabene.id';
     this.nodeUrl = config.nodeUrl;
     this.authToken = config.authToken;
     this.theme = config.theme;
-    this.dictionary = config.dictionary;
+    this.locale = config.locale;
   }
 
-  public componentUrl(
+  /**
+   * 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
+   */
+  componentUrl<V, O>(
     path: string,
-    value: Partial<Transaction>,
-    configuration?: any,
+    value: V,
+    configuration?: O,
     callbacks?: CallbackOptions,
   ): string {
     const url = new URL(this.uxUrl);
@@ -105,13 +208,13 @@ export default class Notabene {
       configuration,
     });
     url.hash = hash;
-    url.searchParams.set('nodeUrl', this.nodeUrl);
+    if (this.nodeUrl) url.searchParams.set('nodeUrl', this.nodeUrl);
 
     if (this.theme) {
       url.searchParams.set('theme', JSON.stringify(this.theme));
     }
-    if (this.dictionary) {
-      url.searchParams.set('dictionary', JSON.stringify(this.dictionary));
+    if (this.locale) {
+      url.searchParams.set('locale', this.locale);
     }
     if (callbacks) {
       if (callbacks.callback)
@@ -122,26 +225,122 @@ export default class Notabene {
     return url.toString();
   }
 
-  public createComponent(
+  /**
+   * 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<Transaction>,
-    options?: any,
+    value: Partial<V>,
+    options?: O,
     callbacks?: CallbackOptions,
   ) {
-    return new EmbeddedComponent(
+    return new EmbeddedComponent<V, O>(
       this.componentUrl(path, value, options, callbacks),
       value,
+      options,
     );
   }
 
+  /**
+   * 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,
+    );
+  }
+
+  /**
+   * Creates a deposit assist component
+   *
+   * @param value - Deposit transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for deposit assistance
+   * @alpha
+   */
+  public createDepositAssist(
+    value: Partial<Deposit>,
     options?: any,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent('withdrawal-assist', value, options, callbacks);
+    return this.createComponent<Deposit, any>(
+      'deposit-assist',
+      value,
+      options,
+      callbacks,
+    );
+  }
+
+  /**
+   * 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?: TransactionOptions,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent<ConnectionRequest, TransactionOptions>(
+      'connect',
+      value,
+      options,
+      callbacks,
+    );
+  }
+
+  /**
+   * 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?: TransactionOptions,
+    callbacks?: CallbackOptions,
+  ) {
+    return this.createComponent<DepositRequest, TransactionOptions>(
+      'deposit-request',
+      value,
+      options,
+      callbacks,
+    );
   }
 
+  /**
+   * Decodes a URL fragment into an object
+   *
+   * @param fragment - The URL fragment to decode
+   * @returns An object containing the decoded key-value pairs
+   */
   public decodeFragmentToObject(fragment: string): Record<string, string> {
     const pairs = fragment.slice(1).split('&');
     return pairs.reduce(
@@ -153,50 +352,4 @@ export default class Notabene {
       {} as Record<string, string>,
     );
   }
-
-  // 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;
-  //   }
-  // }
 }