@tonconnect/ui 0.0.12 → 0.0.13
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/README.md +39 -14
- package/dist/tonconnect-ui.min.js +28 -12
- package/dist/tonconnect-ui.min.js.map +1 -1
- package/lib/index.d.ts +17 -7
- package/lib/index.js +182 -118
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +182 -118
- package/lib/index.umd.js.map +1 -1
- package/package.json +8 -3
package/README.md
CHANGED
|
@@ -193,6 +193,30 @@ const defaultBehaviour = {
|
|
|
193
193
|
}
|
|
194
194
|
```
|
|
195
195
|
|
|
196
|
+
## Detect end of the connection restoring process
|
|
197
|
+
Before restoring previous connected wallet TonConnect has to set up SSE connection with bridge, so you have to wait a little while connection restoring.
|
|
198
|
+
If you need to update your UI depending on if connection is restoring, you can use `tonConnectUI.connectionRestored` promise.
|
|
199
|
+
|
|
200
|
+
Promise that resolves after end of th connection restoring process (promise will fire after `onStatusChange`, so you can get actual information about wallet and session after when promise resolved).
|
|
201
|
+
Resolved value `true`/`false` indicates if the session was restored successfully.
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
```ts
|
|
205
|
+
tonConnectUI.connectionRestored.then(restored => {
|
|
206
|
+
if (restored) {
|
|
207
|
+
console.log(
|
|
208
|
+
'Connection restored. Wallet:',
|
|
209
|
+
JSON.stringify({
|
|
210
|
+
...tonConnectUI.wallet,
|
|
211
|
+
...tonConnectUI.walletInfo
|
|
212
|
+
})
|
|
213
|
+
);
|
|
214
|
+
} else {
|
|
215
|
+
console.log('Connection was not restored.');
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
```
|
|
219
|
+
|
|
196
220
|
## UI customisation
|
|
197
221
|
TonConnect UI provides an interface that should be familiar and recognizable to the user when using various apps.
|
|
198
222
|
However, the app developer can make changes to this interface to keep it consistent with the app interface.
|
|
@@ -363,20 +387,21 @@ tonConnectUI.uiOptions = {
|
|
|
363
387
|
It is not recommended to customise TonConnect UI elements via css as it may confuse the user when looking for known and familiar UI elements such as connect button/modals.
|
|
364
388
|
However, it is possible if needed. You can add css styles to the specified selectors of the UI element. See list of selectors in the table below:
|
|
365
389
|
|
|
366
|
-
| Element | Selector | Element description
|
|
367
|
-
|
|
368
|
-
| Connect wallet modal container | `#tc-wallets-modal-container` | Container of the modal window that opens when you click on the "connect wallet" button.
|
|
369
|
-
| Select wallet modal content | `#tc-wallets-modal` | Content of the modal window with wallet selection.
|
|
370
|
-
| QR-code modal content | `#tc-qr-modal` | Content of the modal window with QR-code.
|
|
371
|
-
| Action modal container | `#tc-actions-modal-container` | Container of the modal window that opens when you call `sendTransaction` or other action.
|
|
372
|
-
| Confirm action modal content | `#tc-confirm-modal` | Content of the modal window asking for confirmation of the action in the wallet.
|
|
373
|
-
| "Transaction sent" modal content | `#tc-transaction-sent-modal` | Content of the modal window informing that the transaction was successfully sent.
|
|
374
|
-
| "Transaction canceled" modal content | `#tc-transaction-canceled-modal` | Content of the modal window informing that the transaction was not sent.
|
|
375
|
-
| "Connect Wallet" button | `#tc-connect-button` | "Connect Wallet" button element.
|
|
376
|
-
| Wallet menu
|
|
377
|
-
| Wallet menu dropdown
|
|
378
|
-
| Wallet menu dropdown
|
|
379
|
-
|
|
|
390
|
+
| Element | Selector | Element description |
|
|
391
|
+
|--------------------------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
|
|
392
|
+
| Connect wallet modal container | `#tc-wallets-modal-container` | Container of the modal window that opens when you click on the "connect wallet" button. |
|
|
393
|
+
| Select wallet modal content | `#tc-wallets-modal` | Content of the modal window with wallet selection. |
|
|
394
|
+
| QR-code modal content | `#tc-qr-modal` | Content of the modal window with QR-code. |
|
|
395
|
+
| Action modal container | `#tc-actions-modal-container` | Container of the modal window that opens when you call `sendTransaction` or other action. |
|
|
396
|
+
| Confirm action modal content | `#tc-confirm-modal` | Content of the modal window asking for confirmation of the action in the wallet. |
|
|
397
|
+
| "Transaction sent" modal content | `#tc-transaction-sent-modal` | Content of the modal window informing that the transaction was successfully sent. |
|
|
398
|
+
| "Transaction canceled" modal content | `#tc-transaction-canceled-modal` | Content of the modal window informing that the transaction was not sent. |
|
|
399
|
+
| "Connect Wallet" button | `#tc-connect-button` | "Connect Wallet" button element. |
|
|
400
|
+
| Wallet menu loading button | `#tc-connect-button-loading` | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
|
|
401
|
+
| Wallet menu dropdown button | `#tc-dropdown-button` | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect). |
|
|
402
|
+
| Wallet menu dropdown container | `#tc-dropdown-container` | Container of the dropdown that opens when you click on the "wallet menu" button with ton address. |
|
|
403
|
+
| Wallet menu dropdown content | `#tc-dropdown` | Content of the dropdown that opens when you click on the "wallet menu" button with ton address. |
|
|
404
|
+
| Notifications container | `#tc-notifications` | Container of the actions notifications. |
|
|
380
405
|
|
|
381
406
|
|
|
382
407
|
## Customize the list of displayed wallets
|