@tonconnect/ui - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

lib/index.d.ts

@@ -1,2 +0,2 @@
-import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, ConnectAdditionalRequest, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, ConnectAdditionalRequest, Wallet, WalletInfo, Account, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 import { Property } from 'csstype';
@@ -37,3 +37,2 @@
         primary: Color$1;
-        subhead: Color$1;
         secondary: Color$1;
@@ -64,3 +63,2 @@ };
         primary?: Color$1;
-        subhead?: Color$1;
         secondary?: Color$1;
@@ -195,2 +193,9 @@ };
 
+declare type WalletOpenMethod = 'qrcode' | 'universal-link';
+declare type WalletInfoWithOpenMethod = WalletInfoInjected | WalletInfoRemoteWithOpenMethod | (WalletInfoInjected & WalletInfoRemoteWithOpenMethod);
+declare type WalletInfoRemoteWithOpenMethod = WalletInfoRemote & {
+    openMethod: WalletOpenMethod;
+};
+declare type ConnectedWallet = Wallet & WalletInfoWithOpenMethod;
+
 declare class TonConnectUI {
@@ -204,2 +209,7 @@ static getWallets(): Promise<WalletInfo[]>;
     /**
+     * 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).
+     * Resolved value `true`/`false` indicates if the session was restored successfully.
+     */
+    readonly connectionRestored: Promise<boolean>;
+    /**
      * Current connection status.
@@ -219,3 +229,3 @@ */
      */
-    get walletInfo(): WalletInfo | null;
+    get walletInfo(): WalletInfoWithOpenMethod | null;
     /**
@@ -235,7 +245,7 @@ * Set and apply new UI options. Object with partial options should be passed. Passed options will be merged with current options.
      */
-    onStatusChange(callback: (wallet: (Wallet & WalletInfo) | null) => void, errorsHandler?: (err: TonConnectError) => void): ReturnType<ITonConnect['onStatusChange']>;
+    onStatusChange(callback: (wallet: ConnectedWallet | null) => void, errorsHandler?: (err: TonConnectError) => void): ReturnType<ITonConnect['onStatusChange']>;
     /**
      * Opens the modal window and handles a wallet connection.
      */
-    connectWallet(): Promise<Wallet & WalletInfo>;
+    connectWallet(): Promise<ConnectedWallet>;
     /**
@@ -264,2 +274,2 @@ * Disconnect wallet and clean localstorage.
 
-export { ActionConfiguration, BorderRadius, Color, ColorsSet, Locales, PartialColorsSet, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, TonConnectUI as default };
+export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Locales, PartialColorsSet, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletOpenMethod, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, TonConnectUI as default };

package.json

 {
   "name": "@tonconnect/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "scripts": {
@@ -11,3 +11,5 @@ "start": "vite --host",
   "nx": {
-    "tags": ["scope:ui"]
+    "tags": [
+      "scope:ui"
+    ]
   },
@@ -34,3 +36,6 @@ "repository": {
   "license": "Apache-2.0",
-  "files": ["lib", "dist"],
+  "files": [
+    "lib",
+    "dist"
+  ],
   "main": "./lib/index.umd.cjs",
@@ -37,0 +42,0 @@ "module": "./lib/index.js",

README.md

@@ -196,2 +196,26 @@ # TON Connect UI
 
+## Detect end of the connection restoring process
+Before restoring previous connected wallet TonConnect has to set up SSE connection with bridge, so you have to wait a little while connection restoring.
+If you need to update your UI depending on if connection is restoring, you can use `tonConnectUI.connectionRestored` promise.
+
+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).
+Resolved value `true`/`false` indicates if the session was restored successfully.
+
+
+```ts
+tonConnectUI.connectionRestored.then(restored => {
+    if (restored) {
+        console.log(
+            'Connection restored. Wallet:',
+            JSON.stringify({
+                ...tonConnectUI.wallet,
+                ...tonConnectUI.walletInfo
+            })
+        );
+    } else {
+        console.log('Connection was not restored.');
+    }
+});
+```
+
 ## UI customisation
@@ -367,16 +391,17 @@ TonConnect UI provides an interface that should be familiar and recognizable to the user when using various apps.
 
-| Element                              | Selector                         | Element description                                                                               |
-|--------------------------------------|----------------------------------|---------------------------------------------------------------------------------------------------|
-| Connect wallet modal container       | `#tc-wallets-modal-container`    | Container of the modal window that opens when you click on the "connect wallet" button.           |
-| Select wallet modal content          | `#tc-wallets-modal`              | Content of the modal window with wallet selection.                                                |
-| QR-code modal content                | `#tc-qr-modal`                   | Content of the modal window with QR-code.                                                         |
-| Action modal container               | `#tc-actions-modal-container`    | Container of the modal window that opens when you call `sendTransaction` or other action.         |
-| Confirm action modal content         | `#tc-confirm-modal`              | Content of the modal window asking for confirmation of the action in the wallet.                  |
-| "Transaction sent" modal content     | `#tc-transaction-sent-modal`     | Content of the modal window informing that the transaction was successfully sent.                 |
-| "Transaction canceled" modal content | `#tc-transaction-canceled-modal` | Content of the modal window informing that the transaction was not sent.                          |
-| "Connect Wallet" button              | `#tc-connect-button`             | "Connect Wallet" button element.                                                                  |
-| Wallet menu dropdown button          | `#tc-dropdown-button`            | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect).                 |
-| Wallet menu dropdown container       | `#tc-dropdown-container`         | Container of the dropdown that opens when you click on the "wallet menu" button with ton address. |
-| Wallet menu dropdown content         | `#tc-dropdown`                   | Content of the dropdown that opens when you click on the "wallet menu" button with ton address.   |
-| Notifications container              | `#tc-notifications`              | Container of the actions notifications.                                                           |
+| Element                              | Selector                         | Element description                                                                                                   |
+|--------------------------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| Connect wallet modal container       | `#tc-wallets-modal-container`    | Container of the modal window that opens when you click on the "connect wallet" button.                               |
+| Select wallet modal content          | `#tc-wallets-modal`              | Content of the modal window with wallet selection.                                                                    |
+| QR-code modal content                | `#tc-qr-modal`                   | Content of the modal window with QR-code.                                                                             |
+| Action modal container               | `#tc-actions-modal-container`    | Container of the modal window that opens when you call `sendTransaction` or other action.                             |
+| Confirm action modal content         | `#tc-confirm-modal`              | Content of the modal window asking for confirmation of the action in the wallet.                                      |
+| "Transaction sent" modal content     | `#tc-transaction-sent-modal`     | Content of the modal window informing that the transaction was successfully sent.                                     |
+| "Transaction canceled" modal content | `#tc-transaction-canceled-modal` | Content of the modal window informing that the transaction was not sent.                                              |
+| "Connect Wallet" button              | `#tc-connect-button`             | "Connect Wallet" button element.                                                                                      |
+| Wallet menu loading button           | `#tc-connect-button-loading`     | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
+| Wallet menu dropdown button          | `#tc-dropdown-button`            | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect).                                     |
+| Wallet menu dropdown container       | `#tc-dropdown-container`         | Container of the dropdown that opens when you click on the "wallet menu" button with ton address.                     |
+| Wallet menu dropdown content         | `#tc-dropdown`                   | Content of the dropdown that opens when you click on the "wallet menu" button with ton address.                       |
+| Notifications container              | `#tc-notifications`              | Container of the actions notifications.                                                                               |
 
@@ -383,0 +408,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3157426

increased by0.76%

Lines of code

23605

increased by0.65%

Number of lines in readme file

502

increased by5.24%

No dependency changes