Installation

To get started with Web Link SDK, clone the GitHub repository, and review the example application.

Next, you will need to install the @meshconnect/web-link-sdk package.

With npm (link):

npm install --save @meshconnect/web-link-sdk

With yarn:

yarn add @meshconnect/web-link-sdk

Then import the necessary components and types:

import {
  Link,
  LinkPayload,
  TransferFinishedPayload,
  createLink
} from '@meshconnect/web-link-sdk'

Creating Link Connection

The createLink function accepts one argument, a configuration Object typed LinkOptions and returns an Object with two functions, openLink and closeLink.

Calling openLink will display the Link UI in an iframe, and the overlay around it.
Calling the closeLink will close the already displayed Link UI. Please note, that the Link UI will close itself once the user finishes their workflow in Link UI.

createLink arguments

createLink code example

const meshLink = 
		createLink({
				clientId: 'clientId',
        onIntegrationConnected: (payload) => {},
        onExit: (error) => {},
        onTransferFinished: (transferData) => {},
        onEvent: (ev) => {},
				accessTokens: [],
				transferDestinationTokens: []
		})

onIntegrationConnected

The onIntegrationConnected callback is called when an integration is successfully connected. It takes one argument called payload with the type of LinkPayload

LinkPayload properties

onExit

The onExit callback is called, when the Link UI is closed. This can be due to an error, or the user can close the Link UI by choosing so.
It takes two arguments:

1. error with the type of string, which is the reason, why the Link UI was closed in an user friendly message.
2. summary object that contains session summary in following format

{
  /**
   *   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
}

onTransferFinished

The onTransferFinished callback is called, when an asset transfer is finished successfully or unsuccessfully.
It takes one argument called payload with the type of TransferFinishedSuccessPayload or TransferFinishedErrorPayload.

TransferFinishedSuccessPayload properties

See the type definition on our GitHub.

TransferFinishedErrorPayload properties

See the type definition on our GitHub.

onEvent

The onEvent callback is called, when various events occur within the Link UI.
It takes one argument, called event with the type of LinkEventType.

See Link UI Events for more details on events and their type definitions.

accessTokens

The accessTokens parameter is used to initialize crypto transfers flow at the 'Select asset step’ using previously obtained integration auth_token. It can be used if you have a valid auth_token and want to bypass authentication to jump right into a transfer.

The type of the accessTokens parameter is an array of IntegrationAccessToken, however, please note, only the first item in the array will be taken into account.

See the type definition on our GitHub.

accessTokens code example

const accessTokens = 
	[
	        {
	          accountId: 'accountId',
	          accountName: 'accountName',
	          accessToken: 'accessToken',
	          brokerType: 'brokerType',
	          brokerName: 'brokerName',
	        },
	 ]

const meshLink = 
		createLink({
				clientId: 'clientId',
        onIntegrationConnected: (payload) => {},
        onExit: (error) => {},
        onTransferFinished: (transferData) => {},
        onEvent: (ev) => {},
				accessTokens: accessTokens, // Provide a previously obtained integration auth_token 
				transferDestinationTokens: []
		})

transferDestinationTokens

The transferDestinationTokens are used for crypto transfers flow. It is an alternative way of providing target addresses for crypto transfers by using previously obtained integration auth_tokens.

See Link initialization and use cases for more details.

The type of the transferDestinationTokens parameter is an array of IntegrationAccessToken.

See the type definition on our GitHub.

transferDestinationTokens code example

const transferDestinationTokens = 
	[
	        {
	          accountId: 'accountId',
	          accountName: 'accountName',
	          accessToken: 'accessToken',
	          brokerType: 'brokerType',
	          brokerName: 'brokerName',
	        },
	 ]

const meshLink = 
		createLink({
				clientId: 'clientId',
        onIntegrationConnected: (payload) => {},
        onExit: (error) => {},
        onTransferFinished: (transferData) => {},
        onEvent: (ev) => {},
				accessTokens: [],  
				transferDestinationTokens: transferDestinationTokens // Provide a previously obtained integration auth_tokens to use as destination address
		})

openLink()

Calling openLink will display the Link UI in an iframe, and the overlay around it.

It takes linkToken as an argument, which can be obtained from the POST /api/v1/linktoken endpoint. Request must be preformed from the server side because it requires the client secret and ID.

See more about obtaining the linkToken and initialization use cases

openLink code example

const meshLink = 
		createLink({
				clientId: 'clientId',
        onIntegrationConnected: (payload) => {},
        onExit: (error) => {},
        onTransferFinished: (transferData) => {},
        onEvent: (ev) => {},
				accessTokens: [],
				transferDestinationTokens: []
		})

meshLink.openLink('linktoken') // Open the Link UI popup

closeLink()

Calling the closeLink will close the already displayed Link UI. Please note, that the Link UI will close itself once the user finishes their workflow in Link UI.

Typescript support

TypeScript definitions for @meshconnect/web-link-sdk are built into the NPM package.