npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@meshconnect/react-native-link-sdk

v2.1.9

Published

Mesh Connect React Native SDK.

Downloads

1,747

Readme

Mesh Connect React Native SDK

React Native library for integrating with Mesh Connect.

Quality Gate Status Coverage Maintainability Rating Reliability Rating Security Rating

Installation

With npm:

npm install --save @meshconnect/react-native-link-sdk

With yarn:

yarn add @meshconnect/react-native-link-sdk

💡 This package requires react-native-webview to be installed in your project. Some times it is not installed automatically (This is a known npm issue). You should install it manually via following command in this case:

npm install --save react-native-webview

# or with yarn
yarn add react-native-webview

Get Link token

Link token should be obtained from the POST /api/v1/linktoken endpoint. API reference for this request is available here. The request must be performed from the server side because it requires the client's secret. You will get the response in the following format:

{
  "content": {
    "linkToken": "{linkToken}"
  },
  "status": "ok",
  "message": ""
}

Launch Link

import React from 'react';
import {
  LinkConnect,
  LinkPayload,
  LinkSettings,
  LinkEventType,
  IntegrationAccessToken,
  TransferFinishedPayload,
  TransferFinishedSuccessPayload,
  TransferFinishedErrorPayload
} from '@meshconnect/react-native-link-sdk';

const accessTokens: IntegrationAccessToken = [
/* Your access tokens */
];

const transferDestinationTokens: IntegrationAccessToken = [
/* Your transfer destination tokens */
];

const linkSettings: LinkSettings = {
    accessTokens,
    transferDestinationTokens,
};

export const App = () => {
  return (
    <LinkConnect
      linkToken={"YOUR_LINKTOKEN"}
      settings={linkSettings}
      onIntegrationConnected={(payload: LinkPayload) => {
        // use broker account data
      }}
      onTransferFinished={(payload: TransferFinishedPayload) => {
        if (payload.status === 'success') {
          const successPayload = payload as TransferFinishedSuccessPayload
          // use transfer finished data
        } else {
          const errorPayload = payload as TransferFinishedErrorPayload
          // handle transfer error
        }
      }}
      onEvent={(event: LinkEventType) => {
          console.log(event);
      }}
      onExit={(err?: string) => {
        // use error message
      }}
    />
  )
}

export default App;

ℹ️ See full source code examples at examples/.

LinkConnect component arguments

| key | type | Required/Optional | description | |---------------------------|-------------------------------------------------|-------------------|------------------------------------------------------------| | linkToken | string | required | Link token | | settings | LinkSettings | optional | Settings object | | disableDomainWhiteList | boolean | optional | Disable origin whitelisting[1] | | onIntegrationConnected | (payload: LinkPayload) => void | optional | Callback called when users connects their accounts | | onTransferFinished | (payload: TransferFinishedPayload) => void | optional | Callback called when a crypto transfer is executed | | onExit | (err: string) => void) | optional | Called if connection not happened. Returns an error message | | onEvent | (event: LinkEventType) => void | optional | Callback called when an event is triggered |

The LinkSettings option allows to configure the Link behaviour:

  • accessTokens - an array of IntegrationAccessToken objects that is used as an origin for crypto transfer flow.
  • transferDestinationTokens - an array of IntegrationAccessToken objects that is used as a destination for crypto transfer flow.
  • disableDomainWhiteList - a boolean flag that allows to disable origin whitelisting. By default, the origin is whitelisted, with the following domains set:
    • *.meshconnect.com
    • *.getfront.com
    • *.walletconnect.com
    • *.walletconnect.org
    • *.walletlink.org
    • *.coinbase.com
    • *.okx.com
    • *.gemini.com
    • *.coinbase.com
    • *.hcaptcha.com
    • *.robinhood.com
    • *.google.com
    • https://meshconnect.com
    • https://getfront.com
    • https://walletconnect.com
    • https://walletconnect.org
    • https://walletlink.org
    • https://coinbase.com
    • https://okx.com
    • https://gemini.com
    • https://coinbase.com
    • https://hcaptcha.com
    • https://robinhood.com
    • https://google.com
    • https://front-web-platform-dev
    • https://front-b2b-api-test.azurewebsites.net
    • https://web.getfront.com
    • https://web.meshconnect.com
    • https://applink.robinhood.com
    • https://m.stripe.network
    • https://js.stripe.com
    • https://app.usercentrics.eu
    • robinhood://

V1 -> V2 migration guide

In Mesh Connect React Native SDK v2, url prop is removed from LinkConnect component. You should use linkToken prop instead of url prop. orError and onClose props are combined with onExit callback with an optional error message argument.

Following are the renamed props:

  • onBrokerConnected -> onIntegrationConnected
  • FrontPayload -> LinkPayload

The component FrontFinance is renamed to LinkConnect.

Typescript support

Typescript definitions for @meshconnect/react-native-link-sdk are built into the npm package.

Adding URL Schemes to Info.plist

To enable our SDK to interact with specific apps, please add the following URL schemes to your Info.plist file:

  1. Open your Info.plist file: This file is located in the ios directory of your React Native project.
  2. Add the following XML snippet within the <dict> tags (example for adding trust, robinhood, and metamask):
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>trust</string>
        <string>robinhood</string>
        <string>metamask</string>
    </array>

This configuration allows our SDK to query and interact with the specified apps, ensuring seamless integration and functionality.