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

package/src/Link.ts

@@ -0,0 +1,350 @@
+import {
+  LinkOptions,
+  Link,
+  EventType,
+  AccessTokenPayload,
+  DelayedAuthPayload,
+  TransferFinishedPayload,
+  LinkPayload
+} from './utils/types'
+import { addPopup, iframeId, removePopup } from './utils/popup'
+import { LinkEventType, isLinkEventTypeKey } from './utils/event-types'
+import {
+  WalletBrowserEventType,
+  isWalletBrowserEventTypeKey
+} from './utils/wallet-browser-event-types'
+import { sdkSpecs } from './utils/sdk-specs'
+import {
+  connectToSpecificWallet,
+  sendTransactionFromSDK,
+  switchChainFromSDK,
+  getWagmiCoreInjectedData,
+  sendNonNativeTransactionFromSDK,
+  disconnectAllAccounts
+} from './utils/wagmiCoreConnectorsUtils'
+
+let currentOptions: LinkOptions | undefined
+const possibleOrigins = new Set<string>([
+  'https://web.meshconnect.com',
+  'https://web.getfront.com'
+])
+
+const iframeElement = () => {
+  return document.getElementById(iframeId) as HTMLIFrameElement
+}
+
+function sendMessageToIframe(message: unknown) {
+  possibleOrigins.forEach(origin => {
+    try {
+      iframeElement().contentWindow?.postMessage(message, origin)
+    } catch (e) {
+      console.error('Mesh SDK: Failed to deliver message to the iframe')
+      console.error(e)
+    }
+  })
+}
+
+async function handleLinkEvent(
+  event:
+    | MessageEvent<{
+        type: EventType
+        payload?:
+          | AccessTokenPayload
+          | DelayedAuthPayload
+          | TransferFinishedPayload
+        link?: string
+      }>
+    | MessageEvent<LinkEventType>
+) {
+  switch (event.data.type) {
+    case 'brokerageAccountAccessToken': {
+      const payload: LinkPayload = {
+        accessToken: event.data.payload as AccessTokenPayload
+      }
+      currentOptions?.onEvent?.({
+        type: 'integrationConnected',
+        payload: payload
+      })
+      currentOptions?.onIntegrationConnected?.(payload)
+      break
+    }
+    case 'delayedAuthentication': {
+      const payload: LinkPayload = {
+        delayedAuth: event.data.payload as DelayedAuthPayload
+      }
+      currentOptions?.onEvent?.({
+        type: 'integrationConnected',
+        payload: payload
+      })
+      currentOptions?.onIntegrationConnected?.(payload)
+      break
+    }
+    case 'transferFinished': {
+      const payload = event.data.payload as TransferFinishedPayload
+
+      currentOptions?.onEvent?.({
+        type: 'transferCompleted',
+        payload: payload
+      })
+      currentOptions?.onTransferFinished?.(payload)
+      break
+    }
+    case 'close':
+    case 'done': {
+      const payload = event.data?.payload
+      currentOptions?.onExit?.(payload?.errorMessage, payload)
+      removePopup()
+      break
+    }
+    case 'oauthLinkOpen': {
+      if (event.data.link) {
+        const w = 700
+        const h = 800
+        const left = screen.width / 2 - w / 2
+        const top = screen.height / 2 - h / 2
+        window
+          .open(
+            event.data.link,
+            '_blank',
+            `popup,noopener,noreferrer,resizable,scrollbars,width=${w},height=${h},top=${top},left=${left}`
+          )
+          ?.focus()
+      }
+
+      break
+    }
+    case 'loaded': {
+      sendMessageToIframe({
+        type: 'meshSDKSpecs',
+        payload: { ...sdkSpecs }
+      })
+      if (currentOptions?.accessTokens) {
+        sendMessageToIframe({
+          type: 'frontAccessTokens',
+          payload: currentOptions.accessTokens
+        })
+      }
+      if (currentOptions?.transferDestinationTokens) {
+        sendMessageToIframe({
+          type: 'frontTransferDestinationTokens',
+          payload: currentOptions.transferDestinationTokens
+        })
+      }
+      const injectedConnectors = await getWagmiCoreInjectedData()
+      if (injectedConnectors) {
+        sendMessageToIframe({
+          type: 'SDKinjectedWagmiConnectorsData',
+          payload: injectedConnectors
+        })
+      }
+      currentOptions?.onEvent?.({ type: 'pageLoaded' })
+      break
+    }
+    default: {
+      if (isLinkEventTypeKey(event.data.type)) {
+        currentOptions?.onEvent?.(event.data)
+      }
+      break
+    }
+  }
+}
+
+async function handleWalletBrowserEvent(
+  event: MessageEvent<WalletBrowserEventType>
+) {
+  switch (event.data.type) {
+    case 'walletBrowserInjectedWalletSelected': {
+      const payload = event.data.payload
+      try {
+        const result = await connectToSpecificWallet(payload.integrationName)
+        if (result instanceof Error) {
+          throw result
+        }
+        sendMessageToIframe({
+          type: 'SDKinjectedConnectionCompleted',
+          payload: {
+            accounts: result.accounts,
+            chainId: result.chainId,
+            signedTxHash: result.txSigned
+          }
+        })
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKinjectedConnectionCompleted')
+      }
+      break
+    }
+    case 'walletBrowserChainSwitchRequest': {
+      const payload = event.data.payload
+      try {
+        const result = await switchChainFromSDK(payload.chainId)
+        if (result instanceof Error) {
+          throw result
+        }
+        sendMessageToIframe({
+          type: 'SDKswitchChainCompleted',
+          payload: result
+        })
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKswitchChainCompleted')
+      }
+      break
+    }
+    case 'walletBrowserNativeTransferRequest': {
+      const payload = event.data.payload
+      try {
+        const result = await sendTransactionFromSDK(
+          payload.toAddress,
+          payload.amount,
+          payload.decimalPlaces,
+          payload.chainId,
+          payload.account
+        )
+        if (result instanceof Error) {
+          throw result
+        }
+        sendMessageToIframe({
+          type: 'SDKnativeTransferCompleted',
+          payload: result
+        })
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKnativeTransferCompleted')
+      }
+      break
+    }
+    case 'walletBrowserNonNativeTransferRequest': {
+      const payload = event.data.payload
+      try {
+        const result = await sendNonNativeTransactionFromSDK(
+          payload.address,
+          JSON.parse(payload.abi),
+          payload.functionName,
+          payload.args
+        )
+        if (result instanceof Error) {
+          throw result
+        }
+        sendMessageToIframe({
+          type: 'SDKnonNativeTransferCompleted',
+          payload: result
+        })
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKnonNativeTransferCompleted')
+      }
+      break
+    }
+    case 'walletBrowserNativeSmartDeposit': {
+      const payload = event.data.payload
+      try {
+        const result = await sendNonNativeTransactionFromSDK(
+          payload.address,
+          JSON.parse(payload.abi),
+          payload.functionName,
+          payload.args,
+          payload.value
+        )
+        if (result instanceof Error) {
+          throw result
+        }
+        sendMessageToIframe({
+          type: 'SDKnativeSmartDepositCompleted',
+          payload: {
+            txHash: result
+          }
+        })
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKnativeSmartDepositCompleted')
+      }
+      break
+    }
+    case 'walletBrowserNonNativeSmartDeposit': {
+      const payload = event.data.payload
+      try {
+        const result = await sendNonNativeTransactionFromSDK(
+          payload.address,
+          JSON.parse(payload.abi),
+          payload.functionName,
+          payload.args
+        )
+        if (result) {
+          sendMessageToIframe({
+            type: 'SDKnonNativeSmartDepositCompleted',
+            payload: {
+              txHash: result
+            }
+          })
+        } else {
+          throw new Error('Transfer failed')
+        }
+      } catch (error) {
+        handleErrorAndSendMessage(error, 'SDKnonNativeSmartDepositCompleted')
+      }
+      break
+    }
+    case 'walletBrowserDisconnect': {
+      disconnectAllAccounts()
+      sendMessageToIframe({
+        type: 'SDKdisconnectSuccess'
+      })
+      break
+    }
+  }
+}
+
+async function eventsListener(
+  event: MessageEvent<
+    LinkEventType | WalletBrowserEventType | { type: EventType }
+  >
+) {
+  if (isWalletBrowserEventTypeKey(event.data.type)) {
+    await handleWalletBrowserEvent(
+      event as MessageEvent<WalletBrowserEventType>
+    )
+  } else {
+    await handleLinkEvent(event as MessageEvent<{ type: EventType }>)
+  }
+}
+
+function handleErrorAndSendMessage(error: unknown, messageType: string) {
+  let errorMessage = 'An unexpected error occurred'
+  if (error instanceof Error) {
+    errorMessage = error.message
+  }
+  sendMessageToIframe({
+    type: messageType,
+    payload: {
+      error: errorMessage
+    }
+  })
+}
+
+export const createLink = (options: LinkOptions): Link => {
+  const openLink = async (linkToken: string) => {
+    if (!linkToken) {
+      options?.onExit?.('Invalid link token!')
+      return
+    }
+
+    currentOptions = options
+    const linkUrl = window.atob(linkToken)
+    const iframeUrlObject = new URL(linkUrl)
+    if (iframeUrlObject.origin) {
+      possibleOrigins.add(iframeUrlObject.origin)
+    }
+
+    window.removeEventListener('message', eventsListener)
+    addPopup(linkUrl)
+    window.addEventListener('message', eventsListener)
+  }
+
+  const closeLink = () => {
+    removePopup()
+    window.removeEventListener('message', eventsListener)
+    options.onExit?.()
+    disconnectAllAccounts()
+  }
+
+  return {
+    openLink: openLink,
+    closeLink: closeLink
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './utils/types'
+export * from './utils/event-types'
+export { createLink } from './Link'

package/src/utils/__snapshots__/popup.test.ts.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popup tests addPopup should add correct popup 1`] = `
+<style
+  id="mesh-link-popup__styles"
+>
+  
+  body {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+  }
+
+  #mesh-link-popup {
+    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;
+  }
+
+  #mesh-link-popup__backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10000;
+    background: black;
+    opacity: 0.8;
+  }
+
+  #mesh-link-popup__popup-content {
+    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: 2px;
+    background: white;
+    flex-grow: 1;
+  }
+
+  #mesh-link-popup__popup-content iframe {
+    border: none;
+    width: 100%;
+    flex-grow: 1;
+    border-radius: 2px;
+  }
+
+  @media only screen and (max-width: 768px) {
+    #mesh-link-popup__popup-content {
+      height: 100vh;
+      width: 100vw;
+      max-width: 100%;
+      min-width: 100%;
+      max-height: 100%;
+      min-height: 100%;
+      border-radius: 0px;
+    }
+
+    #mesh-link-popup__popup-content iframe {
+      border-radius: 0px;
+    }
+  }
+
+  @media only screen and (max-height: 710px) {
+    #mesh-link-popup__popup-content {
+      max-height: 100%;
+      min-height: 100%;
+    }
+  }
+
+</style>
+`;

package/src/utils/event-types.test.ts

@@ -0,0 +1,24 @@
+import { isLinkEventTypeKey } from './event-types'
+
+describe('Event types tests', () => {
+  test.each([
+    'integrationConnected',
+    'integrationConnectionError',
+    'transferCompleted',
+    'integrationSelected',
+    'credentialsEntered',
+    'transferStarted',
+    'transferPreviewed',
+    'transferPreviewError',
+    'transferExecutionError'
+  ])(
+    'isLinkEventTypeKey should return true if parameter is "%s"',
+    eventType => {
+      expect(isLinkEventTypeKey(eventType)).toBe(true)
+    }
+  )
+
+  test('isLinkEventTypeKey should return false if parameter is not event', () => {
+    expect(isLinkEventTypeKey('test')).toBe(false)
+  })
+})

package/src/utils/event-types.ts

@@ -0,0 +1,226 @@
+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
+
+const 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'
+] as const
+
+export type LinkEventTypeKeys = (typeof LINK_EVENT_TYPE_KEYS)[number]
+
+export function isLinkEventTypeKey(key: string): key is LinkEventTypeKeys {
+  return LINK_EVENT_TYPE_KEYS.includes(key as 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
+}