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

package/src/utils/popup.test.ts

@@ -1,50 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/src/utils/style.test.ts

@@ -1,33 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,156 +0,0 @@
-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

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