@meshconnect/web-link-sdk 2.1.0-rc.1 → 2.1.0-rc.3

package/package.json

@@ -1,63 +1,43 @@
 {
   "name": "@meshconnect/web-link-sdk",
-  "version": "2.1.0-rc.1",
+  "version": "2.1.0-rc.3",
   "description": "A client-side JS library for integrating with Mesh Connect",
   "license": "MIT",
   "repository": "https://github.com/FrontFin/mesh-web-sdk.git",
   "homepage": "https://github.com/FrontFin/mesh-web-sdk",
   "devDependencies": {
-    "@babel/preset-env": "^7.20.0",
-    "@babel/preset-typescript": "^7.20.0",
-    "@swc/core": "^1.5.25",
-    "@types/jest": "^29.5.12",
-    "babel-jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
     "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.4.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^2.2.1",
+    "typescript": "^4.6.4",
     "ts-jest": "^29.1.2",
-    "tsup": "^8.1.0",
-    "util": "^0.12.4"
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.12",
+    "jest-environment-jsdom": "^29.7.0"
   },
   "dependencies": {
-    "@meshconnect/node-api": "^2.0.5",
-    "@wagmi/connectors": "^5.0.7",
-    "@wagmi/core": "^2.10.5",
-    "viem": "^2.x"
+    "@meshconnect/node-api": "^2.0.5"
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
-    "setupFiles": [
-      "./jest.setup.ts"
-    ],
     "testPathIgnorePatterns": [
       "/node_modules/",
       "/dist/"
     ],
     "coverageDirectory": "./coverage",
     "transform": {
-      "^.+\\.[tj]sx?$": [
-        "babel-jest",
-        {
-          "presets": [
-            "@babel/preset-env",
-            "@babel/preset-typescript"
-          ]
-        }
-      ]
+      "\\.[jt]sx?$": "ts-jest"
     },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(@wagmi/core|@wagmi/connectors)).+\\.js$"
-    ],
     "testEnvironmentOptions": {
       "url": "http://localhost/"
     }
   },
-  "main": "index.js",
-  "module": "index.mjs",
-  "types": "index.d.ts"
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
 }

package/utils/event-types.d.ts

@@ -0,0 +1,152 @@
+import { LinkPayload, TransferFinishedPayload } from './types';
+export type LinkEventType = IntegrationConnected | IntegrationConnectionError | TransferCompleted | IntegrationSelected | CredentialsEntered | TransferStarted | TransferPreviewed | TransferPreviewError | TransferExecutionError | PageLoaded | IntegrationMfaRequired | IntegrationMfaEntered | IntegrationOAuthStarted | IntegrationAccountSelectionRequired | TransferAssetSelected | TransferNetworkSelected | TransferAmountEntered | TransferMfaRequired | TransferMfaEntered | TransferKycRequired | DoneEvent | CloseEvent;
+declare const LINK_EVENT_TYPE_KEYS: readonly ["integrationConnected", "integrationConnectionError", "integrationMfaRequired", "integrationMfaEntered", "integrationOAuthStarted", "integrationAccountSelectionRequired", "transferCompleted", "integrationSelected", "credentialsEntered", "transferStarted", "transferPreviewed", "transferPreviewError", "transferExecutionError", "pageLoaded", "transferAssetSelected", "transferNetworkSelected", "transferAmountEntered", "transferMfaRequired", "transferMfaEntered", "transferKycRequired", "done", "close"];
+export type LinkEventTypeKeys = (typeof LINK_EVENT_TYPE_KEYS)[number];
+export declare function isLinkEventTypeKey(key: string): key is LinkEventTypeKeys;
+interface LinkEventBase {
+    type: LinkEventTypeKeys;
+}
+export interface PageLoaded {
+    type: 'pageLoaded';
+}
+export interface IntegrationConnected extends LinkEventBase {
+    type: 'integrationConnected';
+    payload: LinkPayload;
+}
+export interface IntegrationConnectionError extends LinkEventBase {
+    type: 'integrationConnectionError';
+    payload: {
+        errorMessage: string;
+    };
+}
+export interface TransferCompleted extends LinkEventBase {
+    type: 'transferCompleted';
+    payload: TransferFinishedPayload;
+}
+export interface IntegrationSelected extends LinkEventBase {
+    type: 'integrationSelected';
+    payload: {
+        integrationType: string;
+        integrationName: string;
+    };
+}
+export interface CredentialsEntered extends LinkEventBase {
+    type: 'credentialsEntered';
+}
+export interface TransferStarted extends LinkEventBase {
+    type: 'transferStarted';
+}
+export interface TransferPreviewed extends LinkEventBase {
+    type: 'transferPreviewed';
+    payload: {
+        amount: number;
+        symbol: string;
+        toAddress: string;
+        networkId: string;
+        previewId: string;
+        networkName?: string;
+        amountInFiat?: number;
+        estimatedNetworkGasFee?: {
+            fee?: number;
+            feeCurrency?: string;
+            feeInFiat?: number;
+        };
+    };
+}
+export interface TransferPreviewError extends LinkEventBase {
+    type: 'transferPreviewError';
+    payload: {
+        errorMessage: string;
+    };
+}
+export interface TransferExecutionError extends LinkEventBase {
+    type: 'transferExecutionError';
+    payload: {
+        errorMessage: string;
+    };
+}
+export interface IntegrationMfaRequired extends LinkEventBase {
+    type: 'integrationMfaRequired';
+}
+export interface IntegrationMfaEntered extends LinkEventBase {
+    type: 'integrationMfaEntered';
+}
+export interface IntegrationOAuthStarted extends LinkEventBase {
+    type: 'integrationOAuthStarted';
+}
+export interface IntegrationAccountSelectionRequired extends LinkEventBase {
+    type: 'integrationAccountSelectionRequired';
+}
+export interface TransferAssetSelected extends LinkEventBase {
+    type: 'transferAssetSelected';
+    payload: {
+        symbol: string;
+    };
+}
+export interface TransferNetworkSelected extends LinkEventBase {
+    type: 'transferNetworkSelected';
+    payload: {
+        id: string;
+        name: string;
+    };
+}
+export interface TransferAmountEntered extends LinkEventBase {
+    type: 'transferAmountEntered';
+}
+export interface TransferMfaRequired extends LinkEventBase {
+    type: 'transferMfaRequired';
+}
+export interface TransferMfaEntered extends LinkEventBase {
+    type: 'transferMfaEntered';
+}
+export interface TransferKycRequired extends LinkEventBase {
+    type: 'transferKycRequired';
+}
+export interface DoneEvent extends LinkEventBase {
+    type: 'done';
+    payload: SessionSymmary;
+}
+export interface CloseEvent extends LinkEventBase {
+    type: 'close';
+    payload: SessionSymmary;
+}
+export interface SessionSymmary {
+    /**
+     *   Current page of application. Possible values:
+     * `startPage`
+     * `integrationsCatalogPage`
+     * `integrationLoginPage`
+     * `integrationMfaPage`
+     * `integrationAccountSelectPage`
+     * `integrationConnectedPage`
+     * `errorPage`
+     * `transferKycPage`
+     * `transferHoldingSelectionPage`
+     * `transferNetworkSelectionPage`
+     * `transferAmountSelectionPage`
+     * `transferPreviewPage`
+     * `transferMfaPage`
+     * `transferFundingPage`
+     * `transferExecutedPage`
+     * `termsAndConditionPage`
+     *
+     * This list may change in future.
+     */
+    page: string;
+    /** Selected integration */
+    selectedIntegration?: {
+        id?: string;
+        name?: string;
+    };
+    /** Transfer information */
+    transfer?: {
+        previewId?: string;
+        symbol?: string;
+        amount?: number;
+        amountInFiat?: number;
+        transactionId?: string;
+        networkId?: string;
+    };
+    errorMessage?: string;
+}
+export {};

package/utils/event-types.js

@@ -0,0 +1,27 @@
+var LINK_EVENT_TYPE_KEYS = [
+    'integrationConnected',
+    'integrationConnectionError',
+    'integrationMfaRequired',
+    'integrationMfaEntered',
+    'integrationOAuthStarted',
+    'integrationAccountSelectionRequired',
+    'transferCompleted',
+    'integrationSelected',
+    'credentialsEntered',
+    'transferStarted',
+    'transferPreviewed',
+    'transferPreviewError',
+    'transferExecutionError',
+    'pageLoaded',
+    'transferAssetSelected',
+    'transferNetworkSelected',
+    'transferAmountEntered',
+    'transferMfaRequired',
+    'transferMfaEntered',
+    'transferKycRequired',
+    'done',
+    'close'
+];
+export function isLinkEventTypeKey(key) {
+    return LINK_EVENT_TYPE_KEYS.includes(key);
+}

package/utils/popup.d.ts

@@ -0,0 +1,3 @@
+export declare const iframeId = "mesh-link-popup__iframe";
+export declare function removePopup(): void;
+export declare function addPopup(iframeLink: string): void;

package/utils/popup.js

@@ -0,0 +1,34 @@
+import { getLinkStyle, getNumber } from './style';
+var popupId = 'mesh-link-popup';
+var backdropId = 'mesh-link-popup__backdrop';
+var popupContentId = 'mesh-link-popup__popup-content';
+var stylesId = 'mesh-link-popup__styles';
+export var iframeId = 'mesh-link-popup__iframe';
+var getPopupHtml = function (link) { return "\n<div id=\"".concat(popupId, "\">\n  <div id=\"").concat(backdropId, "\"></div>\n  <div id=\"").concat(popupContentId, "\">\n    <iframe id=\"").concat(iframeId, "\" src=\"").concat(link, "\" allow=\"clipboard-read *; clipboard-write *\" />\n  </div>\n</div>\n"); };
+var getStyles = function (style) { return "\n<style id=\"".concat(stylesId, "\">\n  body {\n    position: fixed;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    overflow: hidden;\n  }\n\n  #").concat(popupId, " {\n    all: unset;\n    position: fixed;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n  }\n\n  #").concat(backdropId, " {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    z-index: 10000;\n    background: black;\n    opacity: ").concat(getNumber(0.6, style === null || style === void 0 ? void 0 : style.io), ";\n  }\n\n  #").concat(popupContentId, " {\n    position: absolute;\n    height: 80%;\n    max-height: 710px;\n    min-height: 685px;\n    margin: auto;\n    z-index: 10001;\n    width: 30%;\n    max-width: 430px;\n    min-width: 380px;\n    display: flex;\n    flex-direction: column;\n    border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n    background: white;\n    flex-grow: 1;\n  }\n\n  #").concat(popupContentId, " iframe {\n    border: none;\n    width: 100%;\n    flex-grow: 1;\n    border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n  }\n\n  @media only screen and (max-width: 768px) {\n    #").concat(popupContentId, " {\n      height: 100vh;\n      width: 100vw;\n      max-width: 100%;\n      min-width: 100%;\n      max-height: 100%;\n      min-height: 100%;\n      border-radius: 0px;\n    }\n\n    #").concat(popupContentId, " iframe {\n      border-radius: 0px;\n    }\n  }\n\n  @media only screen and (max-height: 710px) {\n    #").concat(popupContentId, " {\n      max-height: 100%;\n      min-height: 100%;\n    }\n  }\n</style>\n"); };
+export function removePopup() {
+    var _a, _b;
+    var existingPopup = window.document.getElementById(popupId);
+    (_a = existingPopup === null || existingPopup === void 0 ? void 0 : existingPopup.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existingPopup);
+    var existingStyles = window.document.getElementById(stylesId);
+    (_b = existingStyles === null || existingStyles === void 0 ? void 0 : existingStyles.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(existingStyles);
+}
+export function addPopup(iframeLink) {
+    var style = getLinkStyle(iframeLink);
+    removePopup();
+    var popup = getPopupHtml(iframeLink);
+    var stylesElement = htmlToElement(getStyles(style));
+    if (stylesElement) {
+        window.document.head.appendChild(stylesElement);
+    }
+    var popupElement = htmlToElement(popup);
+    if (popupElement) {
+        window.document.body.appendChild(popupElement);
+    }
+}
+function htmlToElement(html) {
+    var template = document.createElement('template');
+    html = html.trim();
+    template.innerHTML = html;
+    return template.content.firstChild;
+}

package/utils/sdk-specs.d.ts

@@ -0,0 +1,4 @@
+export declare const sdkSpecs: {
+    platform: string;
+    version: string;
+};

package/utils/sdk-specs.js

@@ -0,0 +1,5 @@
+import { sdkVersion } from './version';
+export var sdkSpecs = {
+    platform: 'web',
+    version: sdkVersion
+};

package/utils/style.d.ts

@@ -0,0 +1,3 @@
+import { LinkStyle } from './types';
+export declare function getLinkStyle(url: string): LinkStyle | undefined;
+export declare function getNumber(def: number, value?: number): number;

package/utils/style.js

@@ -0,0 +1,13 @@
+export function getLinkStyle(url) {
+    try {
+        var params = new URLSearchParams(new URL(url).search);
+        var style = params.get('link_style');
+        return style && JSON.parse(window.atob(style));
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+export function getNumber(def, value) {
+    return value !== undefined ? value : def;
+}

package/utils/types.d.ts

@@ -0,0 +1,103 @@
+import type { BrokerType } from '@meshconnect/node-api';
+import { SessionSymmary, LinkEventType } from './event-types';
+export type EventType = 'brokerageAccountAccessToken' | 'delayedAuthentication' | 'loaded' | 'oauthLinkOpen' | 'transferFinished';
+export interface Link {
+    /**
+     * A function that takes linkToken parameter from `/api/v1/linktoken` endpoint as an input, and opens the Link UI popup
+     */
+    openLink: (linkToken: string) => Promise<void>;
+    /**
+     * A function to close Link UI popup
+     */
+    closeLink: () => void;
+}
+export interface AccountToken {
+    account: Account;
+    accessToken: string;
+    refreshToken?: string;
+}
+export interface Account {
+    accountId: string;
+    accountName: string;
+    fund?: number;
+    cash?: number;
+    isReconnected?: boolean;
+}
+export interface BrandInfo {
+    brokerLogo: string;
+    brokerPrimaryColor?: string;
+}
+export interface LinkPayload {
+    accessToken?: AccessTokenPayload;
+    delayedAuth?: DelayedAuthPayload;
+}
+export interface AccessTokenPayload {
+    accountTokens: AccountToken[];
+    brokerBrandInfo: BrandInfo;
+    expiresInSeconds?: number;
+    refreshTokenExpiresInSeconds?: number;
+    brokerType: BrokerType;
+    brokerName: string;
+}
+export interface DelayedAuthPayload {
+    refreshTokenExpiresInSeconds?: number;
+    brokerType: BrokerType;
+    refreshToken: string;
+    brokerName: string;
+    brokerBrandInfo: BrandInfo;
+}
+export interface TransferFinishedPayload {
+    status: 'success';
+    txId: string;
+    fromAddress: string;
+    toAddress: string;
+    symbol: string;
+    amount: number;
+    networkId: string;
+}
+export interface IntegrationAccessToken {
+    accountId: string;
+    accountName: string;
+    accessToken: string;
+    brokerType: BrokerType;
+    brokerName: string;
+}
+export interface LinkOptions {
+    /**
+     * Client ID that can be obtained at https://dashboard.meshconnect.com/company/keys
+     */
+    clientId: string;
+    /**
+     * A callback function that is called when an integration is successfully connected.
+     * It receives a payload of type `LinkPayload`.
+     */
+    onIntegrationConnected: (payload: LinkPayload) => void;
+    /**
+     * (Optional) A callback function that is called when the Front iframe is closed.
+     */
+    onExit?: (error?: string, summary?: SessionSymmary) => void;
+    /**
+     * (Optional) A callback function that is called when a transfer is finished.
+     * It receives a payload of type `TransferFinishedPayload`.
+     */
+    onTransferFinished?: (payload: TransferFinishedPayload) => void;
+    /**
+     * (Optional) A callback function that is called when various events occur within the Front iframe.
+     * It receives an object with type `LinkEventTypeKeys` indicating the event, and an optional 'payload' containing additional data.
+     */
+    onEvent?: (event: LinkEventType) => void;
+    /**
+     * (Optional) An array of integration access tokens.
+     * These access tokens are used to initialize crypto transfers flow at 'Select asset step'
+     */
+    accessTokens?: IntegrationAccessToken[];
+    /**
+     * (Optional) An array of integration access tokens.
+     * Can be used to initialize the crypto transfers flow as an alternative to the target addresses.
+     */
+    transferDestinationTokens?: IntegrationAccessToken[];
+}
+export interface LinkStyle {
+    ir: number;
+    io: number;
+}

package/utils/types.js

@@ -0,0 +1 @@
+export {};

package/utils/version.d.ts

@@ -0,0 +1 @@
+export declare const sdkVersion = "2.1.0-rc.3";

package/utils/version.js

@@ -0,0 +1 @@
+export var sdkVersion = '2.1.0-rc.3';