@notabene/javascript-sdk 1.10.6 → 1.10.14

package/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

package/.eslintignore

@@ -0,0 +1,3 @@
+dist
+.eslintrc.js
+jest.config.js

package/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+  },
+};

package/.gitlab-ci.yml

@@ -0,0 +1,77 @@
+image: registry.gitlab.com/notabene/devops/build-node-16-image
+
+variables:
+  NPM_TOKEN: ${CI_JOB_TOKEN}
+
+stages:
+  - install
+  - lint
+  - test
+  - build
+  - release
+
+install:
+  stage: install
+  cache:
+    paths:
+      - .yarn
+  artifacts:
+    paths:
+      - .yarn
+      - .pnp.cjs
+      - .pnp.loader.mjs
+  script:
+    - yarn
+
+lint:
+  stage: lint
+  needs:
+    - install
+  script:
+    - yarn lint
+
+test:
+  stage: test
+  needs:
+    - install
+  script:
+    - yarn test
+
+build:
+  stage: build
+  needs:
+    - install
+  script:
+    - yarn build
+  artifacts:
+    paths:
+      - dist
+
+publish-gitlab:
+  stage: release
+  needs:
+    - install
+    - build
+  variables:
+    GITLAB_USER_NAME: 'gitlab-ci'
+    GITLAB_USER_EMAIL: 'gitlab-ci@example.com'
+  before_script:
+    - git config --global user.email "$GITLAB_USER_EMAIL"
+    - git config --global user.name "$GITLAB_USER_NAME"
+    - |
+      {
+        echo "@${CI_PROJECT_ROOT_NAMESPACE}:registry=${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/npm/"
+        echo "${CI_API_V4_URL#https?}/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=\${CI_JOB_TOKEN}"
+      } | tee -a .npmrc
+  script:
+    - yarn semantic-release
+  only:
+    - master
+
+publish-npm:
+  stage: release
+  when: manual
+  script:
+    - yarn npm publish
+  only:
+    - tags

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint -e "${1}"

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

package/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test

package/.nvmrc

@@ -0,0 +1 @@
+v16

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "semi": true,
+    "singleQuote": true
+  }

package/.releaserc.json

@@ -0,0 +1,16 @@
+{
+    "branches": ["master"],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/gitlab",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": ["package.json"],
+          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+        }
+      ]
+    ]
+  }

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": ".yarn/sdks",
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package/package.json

@@ -8,7 +8,8 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "1.10.6",
+  "version": "1.10.14",
+  "main": "dist/index.js",
   "packageManager": "yarn@3.2.1",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "targets": {
@@ -32,9 +33,6 @@
     "process": false,
     "buffer": false
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "prepare": "husky install",
     "watch": "parcel watch",

package/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Notabene JavaScript Test</title>
+    <script
+      id="notabene"
+      async
+      src="http://localhost:3002/js/notabene.js"
+    ></script>
+    <script>
+      var script = document.querySelector('#notabene');
+      script.addEventListener('load', function () {
+        const nb = new Notabene({
+          widget: 'http://widget.notabene.id',
+          container: '#container',
+          authToken: '{ACCESS_TOKEN}',
+        });
+        nb.renderWidget().then(() => {
+          nb.setTransaction({
+            asset: 'ETH',
+            beneficiaryAddress: '0x8d12a197cb00d4747a1fe03395095ce2a5cc6819',
+            amount: '2000000000',
+          });
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="container" />
+  </body>
+</html>

package/src/lib/index.ts

@@ -0,0 +1 @@
+export { default as Notabene } from '../notabene';

package/src/module/index.ts

@@ -0,0 +1,9 @@
+import Notabene from '../notabene';
+
+declare global {
+  interface Window {
+    Notabene: typeof Notabene;
+  }
+}
+
+window.Notabene = Notabene;

package/src/notabene.ts

@@ -0,0 +1,249 @@
+// @ts-ignore
+import { dom, node } from 'jsx-pragmatic';
+// @ts-ignore
+import zoid from 'zoid';
+
+interface Theme {
+  primaryColor: string;
+  secondaryColor: string;
+  fontFamily: string;
+  logo: string;
+}
+interface NotabeneConfig {
+  widget: string;
+  container: string;
+  authToken: string;
+  onValidStateChange(): void;
+  theme: Theme;
+  dictionary: { [key: string]: string };
+}
+
+interface Transaction {
+  amount: string;
+  beneficiaryAddress: string;
+  asset: string;
+  originatorDid?: string;
+  originatorVASPDid?: string;
+  beneficiaryVASPname?: string;
+  beneficiaryName?: string;
+}
+
+export default class Notabene {
+  private widget: zoid.ZoidComponent;
+  private popup: zoid.ZoidComponent;
+  private config: NotabeneConfig;
+  private tx: Transaction | undefined;
+  private onValidStateChange: (isValid: boolean) => void;
+  private widgetRendered: boolean;
+  private popupRendered: boolean;
+  private theme: Theme;
+  private dictionary: { [key: string]: string };
+
+  constructor(config: NotabeneConfig) {
+    this.config = config;
+    this.theme = this.config.theme;
+    this.dictionary = this.config.dictionary;
+    this.widget = this.buildWidget();
+    this.popup = this.buildPopup();
+    this.onValidStateChange = config.onValidStateChange;
+    this.widgetRendered = false;
+    this.popupRendered = false;
+  }
+
+  public async renderWidget(): Promise<void> {
+    if (!this.widget) return;
+    this.widgetRendered
+      ? console.error('Notabene: Widget is already rendered')
+      : await this.widget.render(this.config.container);
+  }
+
+  public async renderPopup(): Promise<void> {
+    if (!this.popup) return;
+
+    this.popupRendered
+      ? this.popup.show()
+      : await this.popup.render(this.config.container);
+  }
+
+  public setTransaction(tx: Transaction) {
+    this.tx = tx;
+    this.widget.updateProps({
+      transaction: tx,
+    });
+    this.popup.updateProps({
+      transaction: tx,
+    });
+  }
+
+  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();
+  }
+
+  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: '440px',
+        height: '280px',
+      },
+      props: {
+        transaction: {
+          type: 'object',
+          required: false,
+        },
+        onRequireAdditionalInformation: {
+          type: 'function',
+        },
+        onValidStateChange: {
+          type: 'function',
+        },
+        storeTransaction: {
+          type: 'function',
+        },
+        theme: {
+          type: 'object',
+          required: false,
+        },
+        dictionary: {
+          type: 'object',
+          required: false,
+        },
+      },
+    })({
+      transaction: {},
+      theme: this.theme,
+      dictionary: this.dictionary,
+      onRequireAdditionalInformation: () => {
+        this.renderPopup();
+      },
+      onValidStateChange: (isValid: boolean) => {
+        this.onValidStateChange(isValid);
+      },
+      storeTransaction: (tx: Transaction) => {
+        this.setTransaction(tx);
+      },
+    });
+
+    builtWidget.event.on(zoid.EVENT.RENDERED, (err: any) => {
+      this.widgetRendered = true;
+    });
+
+    return builtWidget;
+  }
+
+  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: '608px',
+        height: '100%',
+      },
+      props: {
+        transaction: {
+          type: 'object',
+          required: false,
+        },
+        storeTransaction: {
+          type: 'function',
+        },
+        close: {
+          type: 'function',
+        },
+        theme: {
+          type: 'object',
+          required: false,
+        },
+        dictionary: {
+          type: 'object',
+          required: false,
+        },
+      },
+      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 {
+              max-width: 608px;
+              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 }));
+      },
+    })({
+      transaction: this.tx,
+      storeTransaction: (tx: Transaction) => {
+        this.setTransaction(tx);
+        console.debug('Notabene: Transaction stored');
+      },
+      close: () => {
+        this.popup.close();
+        console.debug('Notabene: Popup closing');
+      },
+      theme: this.theme,
+      dictionary: this.dictionary,
+    });
+
+    builtPopup.event.on(zoid.EVENT.RENDERED, (err: any) => {
+      this.popupRendered = true;
+    });
+
+    return builtPopup;
+  }
+}
+
+window.Notabene = Notabene;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "ES2020",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "baseUrl": "src",
+    "lib": ["dom", "es2016"]
+  },
+  "include": ["./src"],
+  "exclude": [".git", "node_modules"]
+}