@notabene/javascript-sdk 2.0.0-next.15 → 2.0.0-next.17

package/package.json

@@ -9,7 +9,7 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "2.0.0-next.15",
+  "version": "2.0.0-next.17",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",
@@ -30,6 +30,7 @@
     "build:clean": "rimraf dist/ ts-out",
     "build": "yarn lint && vite build && tsc && api-extractor run && yarn docs ",
     "lint": "eslint .",
+    "format": "prettier --write .",
     "test": "vitest",
     "release": "semantic-release",
     "publish": "yarn build && npm publish --tag next"
@@ -37,32 +38,32 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@eslint/js": "^9.10.0",
+    "@eslint/js": "^9.13.0",
     "@fast-check/vitest": "^0.1.3",
-    "@microsoft/api-extractor": "^7.47.9",
+    "@microsoft/api-extractor": "^7.47.11",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^9.5.1",
-    "@semantic-release/npm": "^9.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
-    "eslint": "^9.10.0",
+    "@semantic-release/gitlab": "^13.2.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "fast-check": "^3.22.0",
-    "globals": "^15.9.0",
-    "husky": "^7.0.4",
-    "jsdom": "^25.0.0",
-    "lint-staged": "^12.5.0",
-    "organize-imports-cli": "^0.9.0",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.2.10",
+    "organize-imports-cli": "^0.10.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "semantic-release": "^24.1.1",
-    "typedoc": "^0.26.7",
-    "typedoc-plugin-markdown": "^4.2.7",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.6",
-    "vitest": "^2.1.1"
+    "semantic-release": "^24.1.3",
+    "typedoc": "^0.26.10",
+    "typedoc-plugin-markdown": "^4.2.9",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3"
   },
   "lint-staged": {
     "*.ts": [

package/src/components/EmbeddedComponent.ts

@@ -1,8 +1,8 @@
 import {
   CMType,
-  ComponentRequest,
   HMType,
   HostMessage,
+  TransactionResponse,
   ValidationError,
 } from '../types';
 import {
@@ -15,13 +15,13 @@ import {
  * @public
  */
 
-export default class EmbeddedComponent<V, R> {
+export default class EmbeddedComponent<V> {
   private _url: string;
-  private _value: V;
+  private _value: Partial<V>;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager;
+  private eventManager: MessageEventManager<V>;
   private modal?: HTMLDialogElement;
 
   /**
@@ -30,10 +30,10 @@ export default class EmbeddedComponent<V, R> {
    * @param value - The initial transaction value
    */
 
-  constructor(url: string, value: V) {
+  constructor(url: string, value: Partial<V>) {
     this._url = url;
     this._value = value;
-    this.eventManager = new MessageEventManager();
+    this.eventManager = new MessageEventManager<V>();
     this.on(CMType.INVALID, (message) => {
       if (message.type === CMType.INVALID) {
         this._errors = message.errors;
@@ -59,7 +59,7 @@ export default class EmbeddedComponent<V, R> {
    * @returns The current transaction value
    */
 
-  public get value(): V {
+  public get value(): Partial<V> {
     return this._value;
   }
 
@@ -92,7 +92,7 @@ export default class EmbeddedComponent<V, R> {
    */
 
   embed(parent: Element, modal: boolean = false) {
-    console.log(this.url);
+    // console.log(this.url);
     this.iframe = document.createElement('iframe');
     this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
     this.iframe.allow = 'web-share';
@@ -108,7 +108,7 @@ export default class EmbeddedComponent<V, R> {
       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]);
     });
 
@@ -119,7 +119,7 @@ export default class EmbeddedComponent<V, R> {
    * Sends a message to the embedded component
    * @param message - The message to send
    */
-  send(message: HostMessage): void {
+  send(message: HostMessage<V>): void {
     this.eventManager.send(message);
   }
 
@@ -129,7 +129,7 @@ export default class EmbeddedComponent<V, R> {
    * @param callback - The callback function to execute when the message is received
    */
 
-  on(messageType: string, callback: MessageCallback): void {
+  on(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.on(messageType, callback);
   }
 
@@ -139,7 +139,7 @@ export default class EmbeddedComponent<V, R> {
    * @param callback - The callback function to remove
    */
 
-  off(messageType: string, callback: MessageCallback): void {
+  off(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.off(messageType, callback);
   }
 
@@ -147,9 +147,9 @@ export default class EmbeddedComponent<V, R> {
    * Updates the transaction value and sends an update message to the component
    * @param value - The new transaction value
    */
-  update(value: V) {
+  update(value: Partial<V>) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value: value as ComponentRequest });
+    this.send({ type: HMType.UPDATE, value: value });
   }
 
   /**
@@ -157,7 +157,7 @@ export default class EmbeddedComponent<V, R> {
    * @returns A promise that resolves with the transaction response
    */
 
-  completion(): Promise<R> {
+  completion(): Promise<TransactionResponse<V>> {
     return new Promise((resolve, reject) => {
       this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
@@ -172,26 +172,24 @@ export default class EmbeddedComponent<V, R> {
    * Opens the component in a modal dialog
    */
 
-  openModal(): Promise<R> {
+  openModal(): Promise<TransactionResponse<V>> {
     if (this.modal) {
       this.closeModal();
     }
     this.modal = document.createElement('dialog');
     this.modal.style.border = 'none';
-    this.modal.style.backgroundColor = 'transparent';
+    this.modal.style.backgroundColor = 'white';
     this.modal.style.maxWidth = '100vw';
     this.modal.style.maxHeight = '100vh';
     this.modal.style.width = '600px';
-    this.modal.style.height = '800px';
+    this.modal.style.height = '600px';
 
     document.body.appendChild(this.modal);
     this.embed(this.modal, true);
     this.on(CMType.CANCEL, () => {
       this.closeModal();
     });
-    this.on(CMType.CLOSE, () => {
-      this.closeModal();
-    });
+
     this.on(CMType.COMPLETE, () => {
       this.closeModal();
     });
@@ -210,7 +208,7 @@ export default class EmbeddedComponent<V, R> {
 
   closeModal(): void {
     if (this.modal) {
-      console.log('closeModal');
+      // console.log('closeModal');
       this.modal?.close();
       this.modal.remove();
       this.modal = undefined;

package/src/components/__tests__/EmbeddedComponent.test.ts

@@ -4,7 +4,6 @@ import {
   HMType,
   HostMessage,
   Transaction,
-  TransactionResponse,
   Withdrawal,
 } from '../../types';
 import EmbeddedComponent from '../EmbeddedComponent';
@@ -15,15 +14,11 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >;
+    let component: EmbeddedComponent<Withdrawal>;
     beforeEach(() => {
-      component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<Withdrawal>(url, {
+        amountDecimal: 100,
+      });
     });
 
     test('sets value', () => {
@@ -73,20 +68,14 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       component.mount(parentId);
-      expect(iframe?.src).toBe(url);
+      expect(iframe?.src).toBe(url + '&embedded=true');
       expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
     });
 
     test('on', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -97,10 +86,7 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -118,10 +104,7 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >;
+      let component: EmbeddedComponent<Withdrawal>;
 
       beforeEach(() => {
         port = {
@@ -138,10 +121,7 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent<
-          Partial<Withdrawal>,
-          TransactionResponse<Withdrawal>
-        >(url, value);
+        component = new EmbeddedComponent<Withdrawal>(url, value);
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -149,7 +129,7 @@ describe('EmbeddedComponent', () => {
       });
 
       test('send', () => {
-        const message: HostMessage = {
+        const message: HostMessage<Withdrawal> = {
           type: HMType.UPDATE,
           value: {
             requestId: 'id',
@@ -175,7 +155,7 @@ describe('EmbeddedComponent', () => {
         // @ts-expect-error - we've already verified that port exists
         port.onmessage({
           data: { type: CMType.COMPLETE, response },
-        } as MessageEvent);
+        });
 
         promise.then((result) => {
           expect(result).toBe(response);

package/src/locales.ts

@@ -0,0 +1,47 @@
+export const languages = {
+  ar: 'العربية (Arabic)',
+  bg: 'български (Bulgarian)',
+  ca: 'Català (Catalan)',
+  cs: 'Čeština (Czech)',
+  da: 'Dansk (Danish)',
+  de: 'Deutsch (German)',
+  el: 'Ελληνικά (Greek)',
+  en: 'English (English)',
+  es: 'Español (Spanish)',
+  et: 'Eesti (Estonian)',
+  fa: 'فارسی (Persian)',
+  fi: 'Suomi (Finnish)',
+  fr: 'Français (French)',
+  he: 'עברית (Hebrew)',
+  hr: 'Hrvatski (Croatian)',
+  hu: 'Magyar (Hungarian)',
+  hy: 'Հայերեն (Armenian)',
+  id: 'Bahasa Indonesia (Indonesian)',
+  is: 'Íslenska (Icelandic)',
+  it: 'Italiano (Italian)',
+  ja: '日本語 (Japanese)',
+  ka: 'ქართული (Georgian)',
+  ko: '한국어 (Korean)',
+  lt: 'Lietuvių (Lithuanian)',
+  lv: 'Latviešu (Latvian)',
+  mn: 'Монгол (Mongolian)',
+  ms: 'Bahasa Melayu (Malay)',
+  mt: 'Malti (Maltese)',
+  nl: 'Nederlands (Dutch)',
+  no: 'Norsk (Norwegian)',
+  pl: 'Polski (Polish)',
+  pt: 'Português (Portuguese)',
+  ro: 'Română (Romanian)',
+  ru: 'Русский (Russian)',
+  sk: 'Slovenčina (Slovak)',
+  sl: 'Slovenščina (Slovenian)',
+  sr: 'Српски (Serbian)',
+  sv: 'Svenska (Swedish)',
+  sw: 'Kiswahili (Swahili)',
+  th: 'ไทย (Thai)',
+  tl: 'Tagalog (Tagalog)',
+  tr: 'Türkçe (Turkish)',
+  uk: 'Українська (Ukrainian)',
+  vi: 'Tiếng Việt (Vietnamese)',
+  zh: '中文 (Chinese)',
+};

package/src/notabene.ts

@@ -4,7 +4,6 @@ import type {
   CallbackOptions,
   ComponentMessage,
   ConnectionRequest,
-  ConnectionResponse,
   Counterparty,
   DeclarationProof,
   Deposit,
@@ -35,11 +34,11 @@ import {
 } from './types';
 import { encodeObjectToFragment } from './utils/urls';
 
+// Must be exported for React Native SDK to use
+export { default as EmbeddedComponent } from './components/EmbeddedComponent';
 export type {
   ComponentMessage,
-  EmbeddedComponent,
   ConnectionRequest,
-  ConnectionResponse,
   HostMessage,
   Theme,
   Counterparty,
@@ -182,13 +181,13 @@ export default class Notabene {
    * @returns A new EmbeddedComponent instance
    * @internal
    */
-  createComponent<V, R>(
+  createComponent<V>(
     path: string,
-    value: V,
+    value: Partial<V>,
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return new EmbeddedComponent<V, R>(
+    return new EmbeddedComponent<V>(
       this.componentUrl(path, value, options, callbacks),
       value,
     );
@@ -207,10 +206,12 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >('withdrawal-assist', value, options, callbacks);
+    return this.createComponent<Withdrawal>(
+      'withdrawal-assist',
+      value,
+      options,
+      callbacks,
+    );
   }
 
   /**
@@ -227,10 +228,12 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >('wallet-assist', value, options, callbacks);
+    return this.createComponent<Withdrawal>(
+      'wallet-assist',
+      value,
+      options,
+      callbacks,
+    );
   }
 
   /**
@@ -247,7 +250,7 @@ export default class Notabene {
     options?: any,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Partial<Deposit>, TransactionResponse<Deposit>>(
+    return this.createComponent<Deposit>(
       'deposit-assist',
       value,
       options,
@@ -269,7 +272,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<ConnectionRequest, ConnectionResponse>(
+    return this.createComponent<ConnectionRequest>(
       'connect',
       value,
       options,
@@ -291,10 +294,12 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<
-      DepositRequest,
-      TransactionResponse<DepositRequest>
-    >('deposit-request', value, options, callbacks);
+    return this.createComponent<DepositRequest>(
+      'deposit-request',
+      value,
+      options,
+      callbacks,
+    );
   }
 
   /**

package/src/types.ts

@@ -355,17 +355,6 @@ export interface ConnectionRequest extends ComponentRequest {
   asset: TransactionAsset;
 }
 
-/**
- * An object representing a connection response
- * @public
- */
-export interface ConnectionResponse extends ComponentResponse {
-  value: ConnectionRequest;
-  ivms: IVMS101;
-  proof?: OwnershipProof;
-  txCreate?: V1Transaction;
-}
-
 /**
  * The verification status of a transaction
  * @public
@@ -469,19 +458,19 @@ export const enum CMType {
   RESULT = 'result',
   READY = 'ready',
   INVALID = 'invalid',
-  MODAL = 'openModal',
   ERROR = 'error',
-  CLOSE = 'closeModal',
   CANCEL = 'cancel',
 }
 
 /**
  * Represents a completed component message
+ * @typeParam T - The overall Value type being returned
+ * @param response - The Response object which wraps T
  * @public
  */
-export type Completed = {
+export type Completed<T> = {
   type: CMType.COMPLETE;
-  response: ComponentResponse;
+  response: TransactionResponse<T>;
 };
 
 /**
@@ -493,8 +482,8 @@ export type Ready = {
 };
 
 /**
- * Represents a resize request component message
- * @public
+ * Represents a resize request component message. This is handled by the library.
+ * @internal
  */
 export type ResizeRequest = {
   type: CMType.RESIZE;
@@ -503,6 +492,7 @@ export type ResizeRequest = {
 
 /**
  * Represents an error component message
+ * @param message - Error message
  * @public
  */
 export type Error = {
@@ -512,7 +502,7 @@ export type Error = {
 
 /**
  * Represents a cancel component message
- * @public
+ * @internal
  */
 export type Cancel = {
   type: CMType.CANCEL;
@@ -520,11 +510,14 @@ export type Cancel = {
 
 /**
  * Represents an invalid value component message
- * @public
+ * @typeParam T - The overall Value type being returned
+ * @param value - The current Partial value
+ * @param errors - Array of validation errors
+ * @internal
  */
-export type InvalidValue = {
+export type InvalidValue<T> = {
   type: CMType.INVALID;
-  value: any;
+  value: Partial<T>;
   errors: ValidationError[];
 };
 
@@ -532,13 +525,13 @@ export type InvalidValue = {
  * Component Message
  * @public
  */
-export type ComponentMessage =
-  | Completed
+export type ComponentMessage<T> =
+  | Completed<T>
   | Cancel
   | Error
   | Ready
   | ResizeRequest
-  | InvalidValue;
+  | InvalidValue<T>;
 
 /**
  * Host Message Types
@@ -551,19 +544,19 @@ export const enum HMType {
 }
 
 /**
- * Represents an update value host message
+ * Represents an update value host message. This is sent from Host to component.
  * @public
  */
-export type UpdateValue = {
+export type UpdateValue<T> = {
   type: HMType.UPDATE;
-  value: ComponentRequest;
+  value: Partial<T>;
 };
 
 /**
  * Host Messages
  * @public
  */
-export type HostMessage = UpdateValue;
+export type HostMessage<T> = UpdateValue<T>;
 
 /**
  * Options for callback and redirect URIs
@@ -592,6 +585,7 @@ export enum ProofStatus {
 export enum ProofTypes {
   SelfDeclaration = 'self-declaration',
   PersonalSignEIP191 = 'eip-191',
+  SIWE = 'siwe',
   PersonalSignEIP712 = 'eip-712',
   PersonalSignBIP137 = 'bip-137',
   PersonalSignXPUB = 'xpub',
@@ -619,6 +613,7 @@ export interface SignatureProof extends OwnershipProof {
     | ProofTypes.PersonalSignEIP191
     | ProofTypes.PersonalSignEIP712
     | ProofTypes.PersonalSignBIP137
+    | ProofTypes.SIWE
     | ProofTypes.PersonalSignXPUB;
   proof: string;
   attestation: string;

package/src/utils/MessageEventManager.ts

@@ -1,9 +1,9 @@
 import { ComponentMessage, HostMessage } from '../types';
 
-export type MessageCallback = (message: ComponentMessage) => void;
+export type MessageCallback<T> = (message: ComponentMessage<T>) => void;
 
-export class MessageEventManager {
-  private listeners: Map<string, Set<MessageCallback>> = new Map();
+export class MessageEventManager<T> {
+  private listeners: Map<string, Set<MessageCallback<T>>> = new Map();
   private port?: MessagePort;
 
   constructor() {
@@ -16,14 +16,14 @@ export class MessageEventManager {
     this.port.start();
   }
 
-  on(messageType: string, callback: MessageCallback): void {
+  on(messageType: string, callback: MessageCallback<T>): void {
     if (!this.listeners.has(messageType)) {
       this.listeners.set(messageType, new Set());
     }
     this.listeners.get(messageType)!.add(callback);
   }
 
-  off(messageType: string, callback: MessageCallback): void {
+  off(messageType: string, callback: MessageCallback<T>): void {
     const callbacks = this.listeners.get(messageType);
     if (callbacks) {
       callbacks.delete(callback);
@@ -33,8 +33,8 @@ export class MessageEventManager {
     }
   }
 
-  private handleMessage(event: MessageEvent): void {
-    console.log('received message', event.data);
+  private handleMessage(event: MessageEvent<ComponentMessage<T>>): void {
+    // console.log('received message', event.data);
     const message = event.data;
     if (typeof message === 'object' && message !== null && 'type' in message) {
       const messageType = message.type as string;
@@ -46,7 +46,7 @@ export class MessageEventManager {
   }
 
   // Method to send messages through the port
-  send(message: HostMessage): void {
+  send(message: HostMessage<T>): void {
     if (this.port) {
       this.port.postMessage(message);
     }

package/src/utils/__tests__/MessageEventManager.test.ts

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { HMType, UpdateValue } from '../../types';
+import { HMType, UpdateValue, Withdrawal } from '../../types';
 import { MessageEventManager } from '../MessageEventManager';
 
 describe('MessageEventManager', () => {
-  let messageEventManager: MessageEventManager;
+  let messageEventManager: MessageEventManager<Withdrawal>;
   let mockPort: MessagePort;
 
   beforeEach(() => {
@@ -73,7 +73,7 @@ describe('MessageEventManager', () => {
     });
 
     it('should send messages through the port', () => {
-      const message: UpdateValue = {
+      const message: UpdateValue<Withdrawal> = {
         type: HMType.UPDATE,
         value: { requestId: 'id' },
       };