@meshconnect/web-link-sdk 2.1.0-rc.0 → 2.1.0-rc.2

package/src/utils/popup.test.ts

@@ -0,0 +1,50 @@
+import { addPopup, removePopup } from './popup'
+
+describe('Popup tests', () => {
+  test('addPopup should add correct popup', () => {
+    const link = 'https://some.domain?link_style=eyJpciI6IDIsICJpbyI6IDAuOH0='
+    addPopup(link)
+
+    const stylesElement = document.getElementById('mesh-link-popup__styles')
+    expect(stylesElement).toBeTruthy()
+    expect(stylesElement).toMatchSnapshot()
+
+    const popupElement = document.getElementById('mesh-link-popup')
+    expect(popupElement).toBeTruthy()
+
+    const iframeElement = document.getElementById('mesh-link-popup__iframe')
+    expect(iframeElement).toBeTruthy()
+    expect(iframeElement?.attributes.getNamedItem('src')?.nodeValue).toBe(link)
+  })
+
+  test('addPopup when popup already added should replace popup', () => {
+    addPopup('http://localhost/1')
+    addPopup('http://localhost/2')
+
+    const stylesElement = document.getElementById('mesh-link-popup__styles')
+    expect(stylesElement).toBeTruthy()
+
+    const popupElement = document.getElementById('mesh-link-popup')
+    expect(popupElement).toBeTruthy()
+
+    const iframeElement = document.getElementById('mesh-link-popup__iframe')
+    expect(iframeElement).toBeTruthy()
+    expect(iframeElement?.attributes.getNamedItem('src')?.nodeValue).toBe(
+      'http://localhost/2'
+    )
+  })
+
+  test('removePopup should remove popup', () => {
+    addPopup('http://localhost/1')
+    removePopup()
+
+    const stylesElement = document.getElementById('mesh-link-popup__styles')
+    expect(stylesElement).toBeFalsy()
+
+    const popupElement = document.getElementById('mesh-link-popup')
+    expect(popupElement).toBeFalsy()
+
+    const iframeElement = document.getElementById('mesh-link-popup__iframe')
+    expect(iframeElement).toBeFalsy()
+  })
+})

package/src/utils/popup.ts

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

package/src/utils/sdk-specs.test.ts

@@ -0,0 +1,17 @@
+import { sdkSpecs } from './sdk-specs';
+
+const sdkType = sdkSpecs
+
+describe('SDK Specs', () => {
+  test('should return the correct SDK type', () => {
+    const packageJSONContent = JSON.parse(
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('fs').readFileSync('package.json', 'utf8')
+    );
+
+    expect(sdkType).toEqual({
+      platform: 'web',
+      version: packageJSONContent.version
+    });
+  })
+})

package/src/utils/sdk-specs.ts

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

package/src/utils/style.test.ts

@@ -0,0 +1,33 @@
+import { getLinkStyle, getNumber } from './style'
+
+describe('Test style utils', () => {
+  test('verify function returns a style object', () => {
+    const link = 'https://some.domain?link_style=eyJpciI6IDI0LCAiaW8iOiAwLjF9'
+    const received = getLinkStyle(link)
+    expect(received).toEqual({ ir: 24, io: 0.1 })
+  })
+
+  test('verify function returns nothing on missing query param', () => {
+    const link = 'https://some.domain?other=12'
+    const received = getLinkStyle(link)
+    expect(received).toBeNull()
+  })
+
+  test('verify function returns nothing on wrong encoded value', () => {
+    const link = 'https://some.domain?link_style=eyJpciI6IDI0LCAiaW8iOiAwL'
+    const received = getLinkStyle(link)
+    expect(received).toBeUndefined()
+  })
+
+  test('verify function returns nothing on empty link', () => {
+    const link = ''
+    const received = getLinkStyle(link)
+    expect(received).toBeUndefined()
+  })
+
+  test('verify function returns correct number', () => {
+    expect(getNumber(10, 11)).toBe(11)
+    expect(getNumber(10, undefined)).toBe(10)
+    expect(getNumber(1, 0)).toBe(0)
+  })
+})

package/src/utils/style.ts

@@ -0,0 +1,15 @@
+import { LinkStyle } from './types'
+
+export function getLinkStyle(url: string): LinkStyle | undefined {
+  try {
+    const params = new URLSearchParams(new URL(url).search)
+    const style = params.get('link_style')
+    return style && JSON.parse(window.atob(style))
+  } catch (e) {
+    return undefined
+  }
+}
+
+export function getNumber(def: number, value?: number): number {
+  return value !== undefined ? value : def
+}

package/src/utils/types.ts

@@ -0,0 +1,156 @@
+import type { BrokerType } from '@meshconnect/node-api'
+import { SessionSymmary, LinkEventType } from './event-types'
+import { Hash, Chain } from 'viem'
+
+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 WagmiInjectedConnectorData {
+  id: string
+  name: string
+  type: string
+  icon?: string
+  uid: string
+}
+
+export interface ConnectReturnTypeAndTxHash {
+  accounts: string[]
+  chainId: number
+  txSigned: Hash
+}
+
+export interface IncomingConfig {
+  chains: Chain[]
+  transports: Record<number, string | string[]>
+}
+
+export interface AbiItem {
+  name: string
+  type: string
+  inputs: { name: string; type: string }[]
+  outputs?: { name: string; type: string }[]
+  stateMutability?: string
+}
+
+export type Abi = AbiItem[]
+
+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/src/utils/version.ts

@@ -0,0 +1 @@
+export const sdkVersion = '2.1.0-rc.loc'