@meshconnect/react-native-link-sdk
Version:
Mesh Connect React Native SDK.
186 lines (158 loc) • 8.34 kB
Markdown
# Mesh Connect React Native SDK
React Native library for integrating with Mesh Connect.
[](https://sonarqube.getfront.com/dashboard?id=FrontFin_mesh-react-native-sdk_AYtDIH_UIVHuUYros6Ac)
[](https://sonarqube.getfront.com/dashboard?id=FrontFin_mesh-react-native-sdk_AYtDIH_UIVHuUYros6Ac)
[](https://sonarqube.getfront.com/dashboard?id=FrontFin_mesh-react-native-sdk_AYtDIH_UIVHuUYros6Ac)
[](https://sonarqube.getfront.com/dashboard?id=FrontFin_mesh-react-native-sdk_AYtDIH_UIVHuUYros6Ac)
[](https://sonarqube.getfront.com/dashboard?id=FrontFin_mesh-react-native-sdk_AYtDIH_UIVHuUYros6Ac)
## 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](https://stackoverflow.com/questions/18401606/npm-doesnt-install-module-dependencies)). You should install it manually via following command in this case:
```bash
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](https://docs.meshconnect.com/reference/post_api-v1-linktoken). 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:
```json
{
"content": {
"linkToken": "{linkToken}"
},
"status": "ok",
"message": ""
}
```
## Launch Link
```tsx
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,
language: 'en'
};
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/](https://github.com/FrontFin/mesh-react-native-sdk/tree/main/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:
- `language` - Link UI language.
- `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.