@meshconnect/web-link-sdk 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Link.d.ts +2 -2
- package/Link.js +161 -145
- package/README.md +120 -127
- package/cjs/Link.js +165 -149
- package/cjs/index.js +21 -21
- package/cjs/utils/event-types.js +31 -31
- package/cjs/utils/popup.js +39 -39
- package/cjs/utils/sdk-specs.js +8 -0
- package/cjs/utils/style.js +18 -18
- package/cjs/utils/types.js +2 -2
- package/cjs/utils/version.js +4 -0
- package/index.d.ts +3 -3
- package/index.js +3 -3
- package/package.json +6 -6
- package/utils/event-types.d.ts +152 -152
- package/utils/event-types.js +27 -27
- package/utils/popup.d.ts +3 -3
- package/utils/popup.js +34 -34
- package/utils/sdk-specs.d.ts +4 -0
- package/utils/sdk-specs.js +5 -0
- package/utils/style.d.ts +3 -3
- package/utils/style.js +13 -13
- package/utils/types.d.ts +103 -108
- package/utils/types.js +1 -1
- package/utils/version.d.ts +1 -0
- package/utils/version.js +1 -0
package/Link.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { LinkOptions, Link } from './utils/types';
|
|
2
|
-
export declare const createLink: (options: LinkOptions) => Link;
|
|
1
|
+
import { LinkOptions, Link } from './utils/types';
|
|
2
|
+
export declare const createLink: (options: LinkOptions) => Link;
|
package/Link.js
CHANGED
|
@@ -1,145 +1,161 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
function
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
var _a;
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import { addPopup, iframeId, removePopup } from './utils/popup';
|
|
49
|
+
import { isLinkEventTypeKey } from './utils/event-types';
|
|
50
|
+
import { sdkSpecs } from './utils/sdk-specs';
|
|
51
|
+
var currentOptions;
|
|
52
|
+
var iframeUrlObject;
|
|
53
|
+
var iframeElement = function () {
|
|
54
|
+
return document.getElementById(iframeId);
|
|
55
|
+
};
|
|
56
|
+
function eventsListener(event) {
|
|
57
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
58
|
+
switch (event.data.type) {
|
|
59
|
+
case 'brokerageAccountAccessToken': {
|
|
60
|
+
var payload = {
|
|
61
|
+
accessToken: event.data.payload
|
|
62
|
+
};
|
|
63
|
+
(_a = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onEvent) === null || _a === void 0 ? void 0 : _a.call(currentOptions, {
|
|
64
|
+
type: 'integrationConnected',
|
|
65
|
+
payload: payload
|
|
66
|
+
});
|
|
67
|
+
(_b = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onIntegrationConnected) === null || _b === void 0 ? void 0 : _b.call(currentOptions, payload);
|
|
68
|
+
break;
|
|
69
|
+
}
|
|
70
|
+
case 'delayedAuthentication': {
|
|
71
|
+
var payload = {
|
|
72
|
+
delayedAuth: event.data.payload
|
|
73
|
+
};
|
|
74
|
+
(_c = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onEvent) === null || _c === void 0 ? void 0 : _c.call(currentOptions, {
|
|
75
|
+
type: 'integrationConnected',
|
|
76
|
+
payload: payload
|
|
77
|
+
});
|
|
78
|
+
(_d = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onIntegrationConnected) === null || _d === void 0 ? void 0 : _d.call(currentOptions, payload);
|
|
79
|
+
break;
|
|
80
|
+
}
|
|
81
|
+
case 'transferFinished': {
|
|
82
|
+
var payload = event.data.payload;
|
|
83
|
+
(_e = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onEvent) === null || _e === void 0 ? void 0 : _e.call(currentOptions, {
|
|
84
|
+
type: 'transferCompleted',
|
|
85
|
+
payload: payload
|
|
86
|
+
});
|
|
87
|
+
(_f = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onTransferFinished) === null || _f === void 0 ? void 0 : _f.call(currentOptions, payload);
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
case 'close':
|
|
91
|
+
case 'done': {
|
|
92
|
+
var payload = (_g = event.data) === null || _g === void 0 ? void 0 : _g.payload;
|
|
93
|
+
(_h = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onExit) === null || _h === void 0 ? void 0 : _h.call(currentOptions, payload === null || payload === void 0 ? void 0 : payload.errorMessage, payload);
|
|
94
|
+
removePopup();
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
case 'oauthLinkOpen': {
|
|
98
|
+
if (event.data.link) {
|
|
99
|
+
var w = 700;
|
|
100
|
+
var h = 800;
|
|
101
|
+
var left = screen.width / 2 - w / 2;
|
|
102
|
+
var top_1 = screen.height / 2 - h / 2;
|
|
103
|
+
(_j = window
|
|
104
|
+
.open(event.data.link, '_blank', "popup,noopener,noreferrer,resizable,scrollbars,width=".concat(w, ",height=").concat(h, ",top=").concat(top_1, ",left=").concat(left))) === null || _j === void 0 ? void 0 : _j.focus();
|
|
105
|
+
}
|
|
106
|
+
break;
|
|
107
|
+
}
|
|
108
|
+
case 'loaded': {
|
|
109
|
+
if (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.accessTokens) {
|
|
110
|
+
(_k = iframeElement().contentWindow) === null || _k === void 0 ? void 0 : _k.postMessage({
|
|
111
|
+
type: 'meshSDKSpecs',
|
|
112
|
+
payload: __assign({}, sdkSpecs)
|
|
113
|
+
}, (iframeUrlObject === null || iframeUrlObject === void 0 ? void 0 : iframeUrlObject.origin) || 'https://web.meshconnect.com');
|
|
114
|
+
(_l = iframeElement().contentWindow) === null || _l === void 0 ? void 0 : _l.postMessage({ type: 'frontAccessTokens', payload: currentOptions.accessTokens }, (iframeUrlObject === null || iframeUrlObject === void 0 ? void 0 : iframeUrlObject.origin) || 'https://web.meshconnect.com');
|
|
115
|
+
}
|
|
116
|
+
if (currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.transferDestinationTokens) {
|
|
117
|
+
(_m = iframeElement().contentWindow) === null || _m === void 0 ? void 0 : _m.postMessage({
|
|
118
|
+
type: 'frontTransferDestinationTokens',
|
|
119
|
+
payload: currentOptions.transferDestinationTokens
|
|
120
|
+
}, (iframeUrlObject === null || iframeUrlObject === void 0 ? void 0 : iframeUrlObject.origin) || 'https://web.meshconnect.com');
|
|
121
|
+
}
|
|
122
|
+
(_o = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onEvent) === null || _o === void 0 ? void 0 : _o.call(currentOptions, { type: 'pageLoaded' });
|
|
123
|
+
break;
|
|
124
|
+
}
|
|
125
|
+
default: {
|
|
126
|
+
if (isLinkEventTypeKey(event.data.type)) {
|
|
127
|
+
(_p = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.onEvent) === null || _p === void 0 ? void 0 : _p.call(currentOptions, event.data);
|
|
128
|
+
}
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
export var createLink = function (options) {
|
|
134
|
+
var openLink = function (linkToken) { return __awaiter(void 0, void 0, void 0, function () {
|
|
135
|
+
var linkUrl;
|
|
136
|
+
var _a;
|
|
137
|
+
return __generator(this, function (_b) {
|
|
138
|
+
if (!linkToken) {
|
|
139
|
+
(_a = options === null || options === void 0 ? void 0 : options.onExit) === null || _a === void 0 ? void 0 : _a.call(options, 'Invalid link token!');
|
|
140
|
+
return [2 /*return*/];
|
|
141
|
+
}
|
|
142
|
+
currentOptions = options;
|
|
143
|
+
linkUrl = window.atob(linkToken);
|
|
144
|
+
iframeUrlObject = new URL(linkUrl);
|
|
145
|
+
window.removeEventListener('message', eventsListener);
|
|
146
|
+
addPopup(linkUrl);
|
|
147
|
+
window.addEventListener('message', eventsListener);
|
|
148
|
+
return [2 /*return*/];
|
|
149
|
+
});
|
|
150
|
+
}); };
|
|
151
|
+
var closeLink = function () {
|
|
152
|
+
var _a;
|
|
153
|
+
removePopup();
|
|
154
|
+
window.removeEventListener('message', eventsListener);
|
|
155
|
+
(_a = options.onExit) === null || _a === void 0 ? void 0 : _a.call(options);
|
|
156
|
+
};
|
|
157
|
+
return {
|
|
158
|
+
openLink: openLink,
|
|
159
|
+
closeLink: closeLink
|
|
160
|
+
};
|
|
161
|
+
};
|
package/README.md
CHANGED
|
@@ -1,127 +1,120 @@
|
|
|
1
|
-
# @meshconnect/web-link-sdk
|
|
2
|
-
|
|
3
|
-
A client-side JS library for integrating with Mesh Connect
|
|
4
|
-
|
|
5
|
-
### Install
|
|
6
|
-
|
|
7
|
-
With `npm`:
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
npm install --save @meshconnect/web-link-sdk
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
With `yarn`
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
yarn add @meshconnect/web-link-sdk
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### Getting Link token
|
|
20
|
-
|
|
21
|
-
Link token should be obtained from the GET `/api/v1/linktoken` endpoint. Api reference for this request is available [here](https://integration-api.getfront.com/apireference#tag/Managed-Account-Authentication/paths/~1api~1v1~1linktoken/post). Request must be preformed from the server side because it requires the client secret. You will get the response in the following format:
|
|
22
|
-
|
|
23
|
-
```json
|
|
24
|
-
{
|
|
25
|
-
"content": {
|
|
26
|
-
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
)
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
### Using tokens
|
|
122
|
-
|
|
123
|
-
You can use broker tokens to perform requests to get current balance, assets and execute transactions. Full API reference can be found [here](https://integration-api.meshconnect.com/apireference).
|
|
124
|
-
|
|
125
|
-
## Typescript support
|
|
126
|
-
|
|
127
|
-
TypeScript definitions for `@meshconnect/web-link-sdk` are built into the npm package.
|
|
1
|
+
# @meshconnect/web-link-sdk
|
|
2
|
+
|
|
3
|
+
A client-side JS library for integrating with Mesh Connect
|
|
4
|
+
|
|
5
|
+
### Install
|
|
6
|
+
|
|
7
|
+
With `npm`:
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm install --save @meshconnect/web-link-sdk
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
With `yarn`
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
yarn add @meshconnect/web-link-sdk
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Getting Link token
|
|
20
|
+
|
|
21
|
+
Link token should be obtained from the GET `/api/v1/linktoken` endpoint. Api reference for this request is available [here](https://integration-api.getfront.com/apireference#tag/Managed-Account-Authentication/paths/~1api~1v1~1linktoken/post). Request must be preformed from the server side because it requires the client secret. You will get the response in the following format:
|
|
22
|
+
|
|
23
|
+
```json
|
|
24
|
+
{
|
|
25
|
+
"content": {
|
|
26
|
+
"linkToken": "{linktoken}"
|
|
27
|
+
},
|
|
28
|
+
"status": "ok",
|
|
29
|
+
"message": ""
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
You can use `linkToken` value from this response to open the popup window with `openLink` method.
|
|
34
|
+
|
|
35
|
+
### Generating connection method
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { createLink } from '@meshconnect/web-link-sdk';
|
|
39
|
+
|
|
40
|
+
// ...
|
|
41
|
+
|
|
42
|
+
const linkConnection = createLink({
|
|
43
|
+
clientId: '<Your Mesh Connect Client Id>',
|
|
44
|
+
onIntegrationConnected: (data: LinkPayload) => {
|
|
45
|
+
// use broker account data
|
|
46
|
+
},
|
|
47
|
+
onExit: (error?: string) => {
|
|
48
|
+
if (error) {
|
|
49
|
+
// handle error
|
|
50
|
+
} else {
|
|
51
|
+
// ...
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Using connection to open auth link
|
|
58
|
+
|
|
59
|
+
To open authentication link provided by Front Finance Integration API you need to call `openLink` method:
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
linkConnection.openLink(linkToken)
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
ℹ️ See full source code example at [react-example/src/ui/Link.tsx](../../examples/react-example/src/ui/Link.tsx)
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { createLink, Link, LinkPayload } from '@meshconnect/web-link-sdk'
|
|
69
|
+
|
|
70
|
+
// ...
|
|
71
|
+
|
|
72
|
+
const [linkConnection, setLinkConnection] = useState<Link | null>(null)
|
|
73
|
+
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
setLinkConnection(createLink(options))
|
|
76
|
+
}, [])
|
|
77
|
+
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (authLink) {
|
|
80
|
+
linkConnection?.openLink(linkToken)
|
|
81
|
+
}
|
|
82
|
+
}, [linkConnection, authLink])
|
|
83
|
+
|
|
84
|
+
return <></>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Getting tokens
|
|
88
|
+
|
|
89
|
+
After successfull authentication on the Link session, the popup will be closed and the broker tokens will be passed to the `onIntegrationConnected` function.
|
|
90
|
+
`Link` instance will check if URL contains query parameters, load broker tokens and fire the events.
|
|
91
|
+
|
|
92
|
+
### Available Connection configuration options
|
|
93
|
+
|
|
94
|
+
ℹ️ See [src/types/index.ts](src/utils/types.ts) for exported types.
|
|
95
|
+
|
|
96
|
+
#### `createLink` arguments
|
|
97
|
+
|
|
98
|
+
| key | type | description |
|
|
99
|
+
| ------------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------ |
|
|
100
|
+
| `clientId` | `string` | Keys from https://dashboard.getfront.com/company/keys page |
|
|
101
|
+
| `onIntegrationConnected` | `(payload: LinkPayload) => void` | Callback called when users connects their accounts |
|
|
102
|
+
| `onExit` | `((error?: string \| undefined) => void) \| undefined` | Called if connection not happened |
|
|
103
|
+
| `onTransferFinished` | `(payload: TransferFinishedPayload) => void` | Callback called when a crypto transfer is executed |
|
|
104
|
+
| `onEvent` | `(payload: LinkEventType) => void` | A callback function that is called when various events occur within the Front iframe |
|
|
105
|
+
| `accessTokens` | `IntegrationAccessToken[]` | An array of integration access tokens |
|
|
106
|
+
|
|
107
|
+
#### `createLink` return value
|
|
108
|
+
|
|
109
|
+
| key | type | description |
|
|
110
|
+
| ----------- | -------------------------------------- | ------------------------ |
|
|
111
|
+
| `openLink` | `(linkToken: string) => Promise<void>` | Opens the Link UI popup |
|
|
112
|
+
| `closeLink` | `() => Promise<void>` | Closes the Link UI popup |
|
|
113
|
+
|
|
114
|
+
### Using tokens
|
|
115
|
+
|
|
116
|
+
You can use broker tokens to perform requests to get current balance, assets and execute transactions. Full API reference can be found [here](https://integration-api.meshconnect.com/apireference).
|
|
117
|
+
|
|
118
|
+
## Typescript support
|
|
119
|
+
|
|
120
|
+
TypeScript definitions for `@meshconnect/web-link-sdk` are built into the npm package.
|