@brokerize/elements 1.0.1
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/CHANGELOG.md +88 -0
- package/LICENSE.md +1 -0
- package/README.md +791 -0
- package/dist/assets/README.md +2 -0
- package/dist/assets/loading-animations/brokerize_a81c25a0.svg +158 -0
- package/dist/assets/loading-animations/loading_ca40b31e.svg +188 -0
- package/dist/assets/loading-animations/order_f6ca3ead.svg +368 -0
- package/dist/assets/loading-animations/spinner_136200f6.svg +248 -0
- package/dist/bundle.d.ts +956 -0
- package/dist/bundle.es.js +59959 -0
- package/dist/bundle.umd.js +350 -0
- package/dist/tsdoc-metadata.json +11 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,791 @@
|
|
|
1
|
+
# brokerize elements
|
|
2
|
+
|
|
3
|
+
`brokerize elements` is the official UI elements library for the brokerize API. Together with `@brokerize/client` it provides drop-in brokerage UI elements for various trading use cases.
|
|
4
|
+
|
|
5
|
+
# how to install
|
|
6
|
+
|
|
7
|
+
The brokerize client libraries are not yet publicly available, so you will need to get a token to be able to install it from our private package registry.
|
|
8
|
+
|
|
9
|
+
Once you have the token, this is how you add it to a project:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
$ npm init -y
|
|
13
|
+
$ npm config set @brokerize:registry https://npm.pkg.github.com --location project
|
|
14
|
+
$ npm config set 'https://npm.pkg.github.com/:_authToken' --location project "<PROVIDED_GITHUB_PACKAGE_INSTALL_TOKEN>"
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## usage example
|
|
18
|
+
|
|
19
|
+
To use brokerize elements, an instance of _brokerize client_ must be created first.
|
|
20
|
+
This is used by the the UI elements to interact with the API.
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { Brokerize } from '@brokerize/client';
|
|
24
|
+
const brokerizeClient = new Brokerize({
|
|
25
|
+
// API configuration
|
|
26
|
+
basePath: BROKERIZE_API_URL /* https://api-preview.brokerize.com for our preview environment */,
|
|
27
|
+
clientId: '<YOUR-API-CLIENT-ID>',
|
|
28
|
+
cognito: {
|
|
29
|
+
Endpoint: '<PROVIDED-COGNITO-ENDPOINT>',
|
|
30
|
+
ClientId: '<PROVIDED-COGNITO-CLIENT-ID>',
|
|
31
|
+
UserPoolId: '<PROVIDED-COGNITO-USERPOOL-ID>'
|
|
32
|
+
},
|
|
33
|
+
// provide global dependencies
|
|
34
|
+
fetch: globalThis.fetch.bind(globalThis),
|
|
35
|
+
createAbortController: () => new AbortController(),
|
|
36
|
+
createWebSocket: (url, protocol) => new WebSocket(url, protocol)
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
| Property | Description | optional |
|
|
41
|
+
| :-------------------- | ---------------------------------------------------------------------------------------------------------------------- | :------: |
|
|
42
|
+
| basePath | The API base path | ❌ |
|
|
43
|
+
| clientId | Your Client ID for the brokerize API | ❌ |
|
|
44
|
+
| cognito | Configuration for logging in brokerize users (not relevant for most clients) | ✅ |
|
|
45
|
+
| fetch | Optional custom implementation of `fetch` | ✅ |
|
|
46
|
+
| createAbortController | Optional create function (should return an instance of `AbortController` that is compatible with the provided `fetch`) | ✅ |
|
|
47
|
+
| createWebSocket | Optional create function for WebSockets | ✅ |
|
|
48
|
+
|
|
49
|
+
## theming
|
|
50
|
+
|
|
51
|
+
In order to use the UI elements, a `theme` should be configured (if no theme is defined, a default theme will be used). You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON.
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
const theme = {
|
|
55
|
+
layout: 'columns',
|
|
56
|
+
logoStyle: 'light',
|
|
57
|
+
tokens: {
|
|
58
|
+
'zl-primary-color': 'red',
|
|
59
|
+
'zl-primary-bg-color': 'white',
|
|
60
|
+
'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
|
|
61
|
+
'zl-outline-color': 'var(--zl-color-primary-light)',
|
|
62
|
+
'zl-default-text-color': 'var(--zl-color-gray-darkest)',
|
|
63
|
+
'zl-secondary-text-color': 'var(--zl-color-gray-darkest)',
|
|
64
|
+
'zl-placeholder-text-color': 'var(--zl-color-gray-darker)',
|
|
65
|
+
'zl-success-color': '#3db969',
|
|
66
|
+
'zl-error-color': '#ff3e3e',
|
|
67
|
+
'zl-buy-color': 'var(--zl-success-color)',
|
|
68
|
+
'zl-sell-color': 'var(--zl-error-color)',
|
|
69
|
+
'zl-app-font-size': 'var(--zl-font-size-sm, 1rem)',
|
|
70
|
+
'zl-input-bg-color': 'var(--zl-primary-bg-color)',
|
|
71
|
+
'zl-input-border-color': 'var(--zl-default-border-color)',
|
|
72
|
+
'zl-notification-info-color': 'var(--zl-color-gray-darkest)',
|
|
73
|
+
'zl-notification-info-color': 'var(--zl-color-gray-darkest)',
|
|
74
|
+
'zl-notification-bg-color': 'var(--zl-color-lightest)',
|
|
75
|
+
'zl-form-item-gap': 'var(--zl-spacing-02) var(--zl-spacing-03)',
|
|
76
|
+
'zl-form-item-error-border-width': '0px'
|
|
77
|
+
};
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## How to use brokerize-web-components
|
|
81
|
+
|
|
82
|
+
instead of using the create-methods, all components are also offered as standard web-components. Using them is as simple as
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<brokerize-main [apiCtx]="apiCtx" [theme]="theme" />
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
where the context is retrieved from the client
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
const apiCtx = await this.client.createAuthorizedContext(authCtxCfg);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
and a theme can be provided in the same manner as in the [theming section](#theming).
|
|
95
|
+
The above code is valid for Angular (and it's way of binding properties). Most frameworks allow to integrate custom elements similarly.
|
|
96
|
+
|
|
97
|
+
## BrokerList
|
|
98
|
+
|
|
99
|
+
A view that lets the user pick a broker for logging in. Selection of the broker as well as showing / accepting the terms and conditions of the given broker is handled inside the component.
|
|
100
|
+
|
|
101
|
+
It calls the `onLogin` callback when the user has accepted the terms and conditions and clicked on `Login`:
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
createBrokerList({
|
|
105
|
+
authorizedApiContext,
|
|
106
|
+
theme,
|
|
107
|
+
addFrame,
|
|
108
|
+
renderTo,
|
|
109
|
+
onLogin({ brokerName }) {
|
|
110
|
+
// show the login process for broker `brokerName` here
|
|
111
|
+
},
|
|
112
|
+
openExternalLink
|
|
113
|
+
});
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
<img src="example-screenshots/broker-list.png" width="500"/>
|
|
117
|
+
|
|
118
|
+
### web component
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<brokerize-broker-list ... />
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### properties
|
|
125
|
+
|
|
126
|
+
| Property | Description | optional |
|
|
127
|
+
| :------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | :------: |
|
|
128
|
+
| client | Instance of the `@brokerize/client` | ❌ |
|
|
129
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
130
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
131
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
132
|
+
| confirmationStorage | An implementation of a `ConfirmationStorage` which stores whether users have accepted legal terms. By default, this will try to use the `LocalStorage` | ✅ |
|
|
133
|
+
|
|
134
|
+
### events
|
|
135
|
+
|
|
136
|
+
| event | Description |
|
|
137
|
+
| :---- | ----------------------------------------------------------------------------------- |
|
|
138
|
+
| login | is fired when the user has accepted the terms and conditions and clicked on `Login` |
|
|
139
|
+
|
|
140
|
+
## BrokerLoginForm
|
|
141
|
+
|
|
142
|
+
```typescript
|
|
143
|
+
createBrokerLoginForm({
|
|
144
|
+
authorizedApiContext,
|
|
145
|
+
theme,
|
|
146
|
+
addFrame,
|
|
147
|
+
renderTo,
|
|
148
|
+
brokerName,
|
|
149
|
+
performOAuthRedirect({ url }) {
|
|
150
|
+
/*
|
|
151
|
+
if the broker login is implemented using OAuth redirects,
|
|
152
|
+
this callback will be called with the URL to redirect to.
|
|
153
|
+
After login, the client will redirect back to the configurated application URL.
|
|
154
|
+
|
|
155
|
+
After that redirect, the client application must use `confirmOAuth` to confirm
|
|
156
|
+
the session.
|
|
157
|
+
*/
|
|
158
|
+
},
|
|
159
|
+
onExit: ({ loggedIn }) => {
|
|
160
|
+
/* application can handle a successful broker login (e.g. show a SessionsTable or PortfolioTable) */
|
|
161
|
+
},
|
|
162
|
+
openExternalLink
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
<img src="example-screenshots/broker-login-form.png" width="500"/>
|
|
167
|
+
|
|
168
|
+
### Webcomponent
|
|
169
|
+
|
|
170
|
+
```html
|
|
171
|
+
<brokerize-broker-login-form ... />
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### properties
|
|
175
|
+
|
|
176
|
+
| Property | Description | optional |
|
|
177
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
178
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
179
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
180
|
+
| returnToUrl | URL to return to after login | ✅ |
|
|
181
|
+
| brokerName | The `brokerName` as per the `GetBrokers` endpoint from the API | ❌ |
|
|
182
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
183
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
184
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
185
|
+
|
|
186
|
+
### events
|
|
187
|
+
|
|
188
|
+
| event | Description |
|
|
189
|
+
| :------- | ------------------------------------------------------------------- |
|
|
190
|
+
| guest | is fired when the user clicks the guest login |
|
|
191
|
+
| login | is fired when the user has successfully logged in |
|
|
192
|
+
| redirect | is fired when a redirect to the broker login page should take place |
|
|
193
|
+
|
|
194
|
+
## Brokerize Login
|
|
195
|
+
|
|
196
|
+
As described in the OpenAPI specification, users can either log in with their brokerize account or create a guest user. This will create a guest user with the API and a corresponding `AuthorizedApiContext`:
|
|
197
|
+
|
|
198
|
+
```typescript
|
|
199
|
+
const user = await brokerizeClient.createGuestUser();
|
|
200
|
+
const apiCtx = brokerizeClient.createAuthorizedContext(user);
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
`apiCtx` can now be used to interact with the API (you can also use that instance directly in your application code).
|
|
204
|
+
|
|
205
|
+
If you want to support users to choose between logging in with their brokerize credentials or using a guest account, use `LoginForm` to retrieve either `AuthorizedApiContext` like this:
|
|
206
|
+
|
|
207
|
+
```javascript
|
|
208
|
+
Brokerize.Elements.createLoginForm({
|
|
209
|
+
renderTo: $el,
|
|
210
|
+
theme,
|
|
211
|
+
addFrame,
|
|
212
|
+
client: brokerizeClient,
|
|
213
|
+
onGuestLogin() {
|
|
214
|
+
client.createGuestUser().then(
|
|
215
|
+
(authCtxCfg) => {
|
|
216
|
+
setLogin(authCtxCfg);
|
|
217
|
+
},
|
|
218
|
+
(err) => showError(err)
|
|
219
|
+
);
|
|
220
|
+
},
|
|
221
|
+
onLogin(authCtxCfg) {
|
|
222
|
+
setLogin(authCtxCfg);
|
|
223
|
+
},
|
|
224
|
+
openExternalLink
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
function setLogin(authCtxCfg) {
|
|
228
|
+
apiCtx = client.createAuthorizedContext(cfg);
|
|
229
|
+
}
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
<img src="example-screenshots/brokerize-login.png" width="500"/>
|
|
233
|
+
|
|
234
|
+
### web component
|
|
235
|
+
|
|
236
|
+
```html
|
|
237
|
+
<brokerize-login ... />
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### properties
|
|
241
|
+
|
|
242
|
+
| Property | Description | optional |
|
|
243
|
+
| :------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
244
|
+
| client | Instance of the `@brokerize/client` | ❌ |
|
|
245
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
246
|
+
|
|
247
|
+
### events
|
|
248
|
+
|
|
249
|
+
| event | Description |
|
|
250
|
+
| :---- | ------------------------------------------------- |
|
|
251
|
+
| guest | is fired when the user clicks the guest login |
|
|
252
|
+
| login | is fired when the user has successfully logged in |
|
|
253
|
+
|
|
254
|
+
## Brokerize Main
|
|
255
|
+
|
|
256
|
+
The main component is the default goto component for the simplest and quickest brokerize experience, as all the default behavior is already interconnected and ready to use. You just need to integrate this one component and can use all of brokerize's features.
|
|
257
|
+
|
|
258
|
+
```typescript
|
|
259
|
+
createBrokerizeMain({
|
|
260
|
+
authorizedApiContext,
|
|
261
|
+
theme,
|
|
262
|
+
renderTo,
|
|
263
|
+
addFrame,
|
|
264
|
+
useNavigation: true,
|
|
265
|
+
onNavigationStateChange(state) {
|
|
266
|
+
// react to interanal navigation changes
|
|
267
|
+
},
|
|
268
|
+
openExternalLink
|
|
269
|
+
});
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### Webcomponent
|
|
273
|
+
|
|
274
|
+
```html
|
|
275
|
+
<brokerize-main ... />
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### properties
|
|
279
|
+
|
|
280
|
+
| Property | Description | optional |
|
|
281
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
282
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
283
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
284
|
+
| useNavigation | Show the default navigation bar on `BrokerizeMain` | ✅ |
|
|
285
|
+
| addFrame | Add a "powered by brokerize" frame to the component. Defaults to true. | ✅ |
|
|
286
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
287
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
288
|
+
| returnToUrl | URL to return to after login | ✅ |
|
|
289
|
+
|
|
290
|
+
### events
|
|
291
|
+
|
|
292
|
+
| event | Description |
|
|
293
|
+
| :-------------------- | ------------------------------------------------------- |
|
|
294
|
+
| navigationStateChange | is fired when the current navigational state is changed |
|
|
295
|
+
|
|
296
|
+
## CancelOrderForm
|
|
297
|
+
|
|
298
|
+
A view that allows the user to cancel an order (includes an order receipt and the form UI for selecting an authorization method, requesting a challenge etc.).
|
|
299
|
+
|
|
300
|
+
```typescript
|
|
301
|
+
createCancelOrderForm({
|
|
302
|
+
authorizedApiContext,
|
|
303
|
+
theme,
|
|
304
|
+
addFrame,
|
|
305
|
+
renderTo,
|
|
306
|
+
sessionId,
|
|
307
|
+
onExit({ canceled }) {
|
|
308
|
+
/* when the process is completed or aborted (can be used to remove the view) */
|
|
309
|
+
},
|
|
310
|
+
openExternalLink
|
|
311
|
+
});
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
### Webcomponent
|
|
315
|
+
|
|
316
|
+
```html
|
|
317
|
+
<brokerize-cancel-order-form ... />
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
### properties
|
|
321
|
+
|
|
322
|
+
| Property | Description | optional |
|
|
323
|
+
| :---------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
324
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
325
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
326
|
+
| orderId | Id of the order to show/edit | ❌ |
|
|
327
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
328
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
329
|
+
|
|
330
|
+
### events
|
|
331
|
+
|
|
332
|
+
| event | Description |
|
|
333
|
+
| :------- | --------------------------------------------------------- |
|
|
334
|
+
| navigate | is fired when the user clicks a link in then orderReceipt |
|
|
335
|
+
| exit | is fired when the changeOrderForm exits |
|
|
336
|
+
|
|
337
|
+
## ChangeOrderForm
|
|
338
|
+
|
|
339
|
+
A view that allows the user to make changes to an order.
|
|
340
|
+
|
|
341
|
+
```typescript
|
|
342
|
+
createChangeOrderForm({
|
|
343
|
+
authorizedApiContext,
|
|
344
|
+
theme,
|
|
345
|
+
addFrame,
|
|
346
|
+
renderTo,
|
|
347
|
+
orderId,
|
|
348
|
+
onExit() {
|
|
349
|
+
/* when the process is completed or aborted (can be used to remove the view) */
|
|
350
|
+
},
|
|
351
|
+
openExternalLink
|
|
352
|
+
});
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
### Webcomponent
|
|
356
|
+
|
|
357
|
+
```html
|
|
358
|
+
<brokerize-change-order-form ... />
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
### properties
|
|
362
|
+
|
|
363
|
+
| Property | Description | optional |
|
|
364
|
+
| :----------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
365
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
366
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
367
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
368
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
369
|
+
| orderId | Id of the order to show/edit | ❌ |
|
|
370
|
+
| saveDownloadedFile | Custom implementation of "save download as..." | ✅ |
|
|
371
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
372
|
+
|
|
373
|
+
### events
|
|
374
|
+
|
|
375
|
+
| event | Description |
|
|
376
|
+
| :---- | --------------------------------------- |
|
|
377
|
+
| exit | is fired when the changeOrderForm exits |
|
|
378
|
+
|
|
379
|
+
## OrderForm
|
|
380
|
+
|
|
381
|
+
A form for trading a given ISIN in a given portfolio.
|
|
382
|
+
|
|
383
|
+
```typescript
|
|
384
|
+
createOrderForm({
|
|
385
|
+
authorizedApiContext,
|
|
386
|
+
theme,
|
|
387
|
+
addFrame,
|
|
388
|
+
renderTo: document.getElementById('orderFormArea'),
|
|
389
|
+
isin: 'DE0007493991',
|
|
390
|
+
portfolioId: '<portfolioId>',
|
|
391
|
+
onOrderCreated(response) {
|
|
392
|
+
/* for example, show the order receipt after creation. */
|
|
393
|
+
},
|
|
394
|
+
openExternalLink
|
|
395
|
+
// quotesProvider
|
|
396
|
+
});
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
<img src="example-screenshots/orderform.png" width="500"/>
|
|
400
|
+
|
|
401
|
+
### Webcomponent
|
|
402
|
+
|
|
403
|
+
```html
|
|
404
|
+
<brokerize-order-form ... />
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
### properties
|
|
408
|
+
|
|
409
|
+
| Property | Description | optional |
|
|
410
|
+
| :----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: |
|
|
411
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
412
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
413
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
414
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
415
|
+
| portfolioId | Id of the requested portfolio | ❌ |
|
|
416
|
+
| isin | ISIN selected for trading | ❌ |
|
|
417
|
+
| preferredExchangeId | One of the Exchange IDs as returned by the brokerize API's GetExchanges endpoint, will be set as the default exchange _if_ supported by the broker | ✅ |
|
|
418
|
+
| lockOrderDirection | If true, users cannot change the order direction. A direction must be provided in `initialOrder.direction` in this case. | ✅ |
|
|
419
|
+
| overrideBrokerExchangeId | If provided, the given broker exchange id will be pre-selected in the OrderForm. Note that depending on `PreparedTrade.noExchangeDefault`, frontends are obligated to present a selection of exchanges before passing this value, as brokers may not allow pre-selecting exchanges. Make sure to only pass this value if the user has already selected an exchange and knows their options. The value will only be applied if it is available via PreparedTrade - the frontend should check this before passing the value. If you are not sure whether you should use it: don't and use `preferredExchangeId` instead | ✅ |
|
|
420
|
+
| initialOrderCreateValues | The initial values to start the order form with | ✅ |
|
|
421
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
422
|
+
| saveDownloadedFile | Custom implementation of "save download as..." | ✅ |
|
|
423
|
+
| quotesProvider | Custom implementation of a quotes provider | ✅ |
|
|
424
|
+
|
|
425
|
+
### events
|
|
426
|
+
|
|
427
|
+
| event | Description |
|
|
428
|
+
| :------- | ------------------------------------------------ |
|
|
429
|
+
| created | is fired when an order is created |
|
|
430
|
+
| navigate | is fired when the user clicks the portfolio link |
|
|
431
|
+
|
|
432
|
+
## OrderReceipt
|
|
433
|
+
|
|
434
|
+
Display a summary of order receipt data
|
|
435
|
+
|
|
436
|
+
```typescript
|
|
437
|
+
createOrderReceipt({
|
|
438
|
+
authorizedApiContext,
|
|
439
|
+
theme,
|
|
440
|
+
addFrame,
|
|
441
|
+
renderTo: document.getElementById('area'),
|
|
442
|
+
orderId,
|
|
443
|
+
openExternalLink
|
|
444
|
+
});
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
<img src="example-screenshots/order-receipt.png" width="500"/>
|
|
448
|
+
|
|
449
|
+
### Webcomponent
|
|
450
|
+
|
|
451
|
+
```html
|
|
452
|
+
<brokerize-order-receipt ... />
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
### properties
|
|
456
|
+
|
|
457
|
+
| Property | Description | optional |
|
|
458
|
+
| :---------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
459
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
460
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
461
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
462
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
463
|
+
| orderId | Id of the order to show/edit | ❌ |
|
|
464
|
+
|
|
465
|
+
### events
|
|
466
|
+
|
|
467
|
+
| event | Description |
|
|
468
|
+
| :------- | ------------------------------------------------ |
|
|
469
|
+
| navigate | is fired when the user clicks the portfolio link |
|
|
470
|
+
|
|
471
|
+
## OrderTable
|
|
472
|
+
|
|
473
|
+
A view for listing the orders in the given portfolio.
|
|
474
|
+
|
|
475
|
+
```typescript
|
|
476
|
+
createOrderTable({
|
|
477
|
+
authorizedApiContext,
|
|
478
|
+
theme,
|
|
479
|
+
addFrame,
|
|
480
|
+
renderTo,
|
|
481
|
+
portfolioId,
|
|
482
|
+
openExternalLink
|
|
483
|
+
});
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
### Webcomponent
|
|
487
|
+
|
|
488
|
+
```html
|
|
489
|
+
<brokerize-order-table ... />
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
### properties
|
|
493
|
+
|
|
494
|
+
| Property | Description | optional |
|
|
495
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
496
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
497
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
498
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
499
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
500
|
+
| portfolioId | Id of the requested portfolio | ❌ |
|
|
501
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
502
|
+
|
|
503
|
+
### events
|
|
504
|
+
|
|
505
|
+
| event | Description |
|
|
506
|
+
| :---------- | -------------------------------------------------------- |
|
|
507
|
+
| cancelOrder | is fired when the user clicks cancel order menu item |
|
|
508
|
+
| editOrder | is fired when the user clicks the change order menu item |
|
|
509
|
+
| showReceipt | is fired when the user clicks the show receipt menu item |
|
|
510
|
+
|
|
511
|
+
## PortfolioTable
|
|
512
|
+
|
|
513
|
+
Show a list of all portfolios that are added to the user's account.
|
|
514
|
+
|
|
515
|
+
```typescript
|
|
516
|
+
createPortfolioTable({
|
|
517
|
+
authorizedApiContext,
|
|
518
|
+
theme,
|
|
519
|
+
addFrame,
|
|
520
|
+
renderTo,
|
|
521
|
+
onNavigate(portfolio: { id, portfolioName, ... }) {},
|
|
522
|
+
openExternalLink
|
|
523
|
+
});
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
<img src="example-screenshots/portfolio-table.png" width="500"/>
|
|
527
|
+
|
|
528
|
+
### Webcomponent
|
|
529
|
+
|
|
530
|
+
```html
|
|
531
|
+
<brokerize-portfolio-table ... />
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
### properties
|
|
535
|
+
|
|
536
|
+
| Property | Description | optional |
|
|
537
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
538
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
539
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
540
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
541
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
542
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
543
|
+
|
|
544
|
+
### events
|
|
545
|
+
|
|
546
|
+
| event | Description |
|
|
547
|
+
| :------- | ----------------------------------------------------------------------------- |
|
|
548
|
+
| navigate | is fired when the user clicks a link that should navigate to a different view |
|
|
549
|
+
|
|
550
|
+
## PortfolioView
|
|
551
|
+
|
|
552
|
+
Shows a combined view for _one_ portfolio with important keyfigures like overall profit/loss in the footer bar, the list of open positions as well as open, cancelled and executed orders.
|
|
553
|
+
|
|
554
|
+
```
|
|
555
|
+
createPortfolioView({
|
|
556
|
+
addFrame,
|
|
557
|
+
|
|
558
|
+
portfolioId: string;
|
|
559
|
+
|
|
560
|
+
onBuy: (opts: { isin: string }) => {
|
|
561
|
+
/* handle the user's "buy" click here */
|
|
562
|
+
}
|
|
563
|
+
onSell: (opts: { isin: string; availableSize: number }) => {
|
|
564
|
+
/* handle the user's "sell" click here */
|
|
565
|
+
}
|
|
566
|
+
onCancelOrder: (opts: { orderId: string }) => {
|
|
567
|
+
/* handle the user's "cancel order" click here */
|
|
568
|
+
}
|
|
569
|
+
onChangeOrder: (opts: { orderId: string }) => {
|
|
570
|
+
/* handle the user's "change order" click here */
|
|
571
|
+
}
|
|
572
|
+
onShowReceipt: (opts: { orderId: string }) => {
|
|
573
|
+
/* handle the user's "show order receipt" click here */
|
|
574
|
+
},
|
|
575
|
+
openExternalLink
|
|
576
|
+
})
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
### Webcomponent
|
|
580
|
+
|
|
581
|
+
```html
|
|
582
|
+
<brokerize-portfolio-view ... />
|
|
583
|
+
```
|
|
584
|
+
|
|
585
|
+
### properties
|
|
586
|
+
|
|
587
|
+
| Property | Description | optional |
|
|
588
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
589
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
590
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
591
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
592
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
593
|
+
| portfolioId | Id of the requested portfolio | ❌ |
|
|
594
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
595
|
+
|
|
596
|
+
### events
|
|
597
|
+
|
|
598
|
+
| event | Description |
|
|
599
|
+
| :---------- | -------------------------------------------------------- |
|
|
600
|
+
| buy | is fired when the user clicks the buy menu item |
|
|
601
|
+
| sell | is fired when the user clicks the sell menu item |
|
|
602
|
+
| showReceipt | is fired when the user clicks the showreceipt menu item |
|
|
603
|
+
| editOrder | is fired when the user clicks the edit order menu item |
|
|
604
|
+
| cancelOrder | is fired when the user clicks the cancel order menu item |
|
|
605
|
+
|
|
606
|
+
## PositionsTable
|
|
607
|
+
|
|
608
|
+
A view for listing the current open positions in the given portfolio.
|
|
609
|
+
|
|
610
|
+
```typescript
|
|
611
|
+
createPositionsTable({
|
|
612
|
+
authorizedApiContext,
|
|
613
|
+
theme,
|
|
614
|
+
addFrame,
|
|
615
|
+
renderTo,
|
|
616
|
+
portfolioId,
|
|
617
|
+
onTradeInstrument: (opts: {
|
|
618
|
+
isin: string;
|
|
619
|
+
direction: Direction
|
|
620
|
+
}) => void,
|
|
621
|
+
openExternalLink
|
|
622
|
+
});
|
|
623
|
+
```
|
|
624
|
+
|
|
625
|
+
<img src="example-screenshots/positions-table.png" width="500"/>
|
|
626
|
+
|
|
627
|
+
### Webcomponent
|
|
628
|
+
|
|
629
|
+
```html
|
|
630
|
+
<brokerize-positions-table ... />
|
|
631
|
+
```
|
|
632
|
+
|
|
633
|
+
### properties
|
|
634
|
+
|
|
635
|
+
| Property | Description | optional |
|
|
636
|
+
| :--------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
637
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
638
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
639
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
640
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
641
|
+
| portfolioId | Id of the requested portfolio | ❌ |
|
|
642
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
643
|
+
|
|
644
|
+
### events
|
|
645
|
+
|
|
646
|
+
| event | Description |
|
|
647
|
+
| :---- | --------------------------------------------- |
|
|
648
|
+
| buy | is fired when the user clicks the buy button |
|
|
649
|
+
| sell | is fired when the user clicks the sell button |
|
|
650
|
+
|
|
651
|
+
## SessionsTable
|
|
652
|
+
|
|
653
|
+
A list of the user's active broker sessions. This is where users can log out from specific broker sessions and enable session TANs for sessions.
|
|
654
|
+
|
|
655
|
+
```typescript
|
|
656
|
+
createSessionsTable({
|
|
657
|
+
authorizedApiContext,
|
|
658
|
+
theme,
|
|
659
|
+
addFrame,
|
|
660
|
+
renderTo,
|
|
661
|
+
onEnableSessionTan({ sessionId }) {
|
|
662
|
+
/* here: show the enable session tan form */
|
|
663
|
+
},
|
|
664
|
+
openExternalLink
|
|
665
|
+
});
|
|
666
|
+
```
|
|
667
|
+
|
|
668
|
+
### Webcomponent
|
|
669
|
+
|
|
670
|
+
```html
|
|
671
|
+
<brokerize-sessions-table ... />
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
### properties
|
|
675
|
+
|
|
676
|
+
| Property | Description | optional |
|
|
677
|
+
| :----------------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
678
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
679
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
680
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
681
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
682
|
+
| parentHasNoPadding | For the brokerize frame: control whether the parent element already adds a padding | ✅ |
|
|
683
|
+
| openExternalLink | A function for handling links to external documents, e.g. cost estimations | ✅ |
|
|
684
|
+
|
|
685
|
+
### events
|
|
686
|
+
|
|
687
|
+
| event | Description |
|
|
688
|
+
| :--------------- | ------------------------------------------------------------ |
|
|
689
|
+
| enableSessionTan | is fired when the user clicks the enableSessionTan menu item |
|
|
690
|
+
|
|
691
|
+
## SessionTanForm
|
|
692
|
+
|
|
693
|
+
A view for enabling session TAN for a session (the user may select an authorization method, request a challenge etc.).
|
|
694
|
+
|
|
695
|
+
```typescript
|
|
696
|
+
createSessionTanForm({
|
|
697
|
+
authorizedApiContext,
|
|
698
|
+
addFrame,
|
|
699
|
+
theme,
|
|
700
|
+
renderTo,
|
|
701
|
+
sessionId,
|
|
702
|
+
onExit({ canceled }) {
|
|
703
|
+
/* when the process is completed or aborted (can be used to remove the view) */
|
|
704
|
+
},
|
|
705
|
+
openExternalLink
|
|
706
|
+
});
|
|
707
|
+
```
|
|
708
|
+
|
|
709
|
+
<img src="example-screenshots/session-tan-form.png" width="500"/>
|
|
710
|
+
|
|
711
|
+
### Webcomponent
|
|
712
|
+
|
|
713
|
+
```html
|
|
714
|
+
<brokerize-session-tan ... />
|
|
715
|
+
```
|
|
716
|
+
|
|
717
|
+
### properties
|
|
718
|
+
|
|
719
|
+
| Property | Description | optional |
|
|
720
|
+
| :---------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
721
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
722
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|
|
723
|
+
| addFrame | Add a "powered by brokerize" frame to the component | ✅ |
|
|
724
|
+
| supportLink | Add a support link to the brokerize frame config, e.g. `{ emailSubject: 'Help needed for trading in XYZ app'}` | ✅ |
|
|
725
|
+
| sessionId | Id of the requested session | ❌ |
|
|
726
|
+
|
|
727
|
+
### events
|
|
728
|
+
|
|
729
|
+
| event | Description |
|
|
730
|
+
| :---- | -------------------------------------- |
|
|
731
|
+
| exit | is fired when the sessionTanForm exits |
|
|
732
|
+
|
|
733
|
+
## ModalHost
|
|
734
|
+
|
|
735
|
+
To use the default modals simply put a modalhost instance into your root layout.
|
|
736
|
+
|
|
737
|
+
```typescript
|
|
738
|
+
|
|
739
|
+
// in your page, put sth like <div id="brokerize-modal"></div> at the end of your page (this makes sure our modal will be topmost)
|
|
740
|
+
const renderTo = document.getElementById('brokerize-modal');
|
|
741
|
+
const modalHost = createModalHost{
|
|
742
|
+
authorizedApiContext,
|
|
743
|
+
theme,
|
|
744
|
+
renderTo
|
|
745
|
+
});
|
|
746
|
+
|
|
747
|
+
/* whenever you recreate the modal host (e.g. when the authorizedApiContext must be replaced), make sure to destroy the existing one first,
|
|
748
|
+
as only one modal host is allowed globally at any given time. */
|
|
749
|
+
// modalHost.destroy();
|
|
750
|
+
```
|
|
751
|
+
|
|
752
|
+
To customize the behavior of certain modals you can get a reference to the modalService by importing it from the elements and overriding one or many of its methods.
|
|
753
|
+
|
|
754
|
+
```typescript
|
|
755
|
+
import { modalService } from '@brokerize/elements';
|
|
756
|
+
|
|
757
|
+
modalService.override(...);
|
|
758
|
+
```
|
|
759
|
+
|
|
760
|
+
Where the interface of the modalService is defined as follows:
|
|
761
|
+
|
|
762
|
+
```typescript
|
|
763
|
+
export declare interface ModalService {
|
|
764
|
+
showSecurityInformation(title: string, content: string): void;
|
|
765
|
+
showConfirm(msg: string): Promise<boolean>;
|
|
766
|
+
showSessionTanModal(sessionId: string): void;
|
|
767
|
+
setActivated(): void;
|
|
768
|
+
override(overrides: Partial<ModalService>): void;
|
|
769
|
+
showReceipt(data: ReceiptData, showActions: boolean, handleOrderTableAction: (e: any) => void): void;
|
|
770
|
+
showDetailedTable(table: Models.GenericTable): void;
|
|
771
|
+
showPositionDetail(
|
|
772
|
+
position: Models.Position,
|
|
773
|
+
row?: TableRow,
|
|
774
|
+
header?: Header,
|
|
775
|
+
handleTableAction?: (actionId: string, rowId: string) => void
|
|
776
|
+
): void;
|
|
777
|
+
}
|
|
778
|
+
```
|
|
779
|
+
|
|
780
|
+
### Webcomponent
|
|
781
|
+
|
|
782
|
+
```html
|
|
783
|
+
<brokerize-modal-host ... />
|
|
784
|
+
```
|
|
785
|
+
|
|
786
|
+
### properties
|
|
787
|
+
|
|
788
|
+
| Property | Description | optional |
|
|
789
|
+
| :------- | -------------------------------------------------------------------------------------------------------------- | :------: |
|
|
790
|
+
| apiCtx | Instance of `AuthorizedApiContext` from `@brokerize/client` | ❌ |
|
|
791
|
+
| theme | You can use the <a href="https://app.brokerize.com/theming">brokerize theme designer</a> to build a theme JSON | ✅ |
|