@tonconnect/ui - npm Package Compare versions

Comparing version 1.0.0-beta.7 to 2.0.0-beta.0

lib/index.d.ts

@@ -26,2 +26,3 @@ import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, ITonConnect, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
     accent: Color$1;
+    telegramButton: Color$1;
     icon: {
@@ -38,2 +39,4 @@ primary: Color$1;
         segment: Color$1;
+        tint: Color$1;
+        qr: Color$1;
     };
@@ -55,2 +58,3 @@ text: {
     accent?: Color$1;
+    telegramButton?: Color$1;
     icon?: {
@@ -67,2 +71,4 @@ primary?: Color$1;
         segment?: Color$1;
+        tint?: Color$1;
+        qr?: Color$1;
     };
@@ -127,2 +133,7 @@ text?: {
     /**
+     * Specifies return url for TWA-TWA connections.
+     * This will be applied as a return strategy if dApp is opened as a TWA and user selects TWA wallet (overrides `returnStrategy` if).
+     */
+    twaReturnUrl?: `${string}://${string}`;
+    /**
      * Specifies whether the method should redirect user to the connected wallet
@@ -189,3 +200,3 @@ * @default 'ios'
 declare type WalletInfoRemoteWithOpenMethod = WalletInfoRemote & {
-    openMethod: WalletOpenMethod;
+    openMethod?: WalletOpenMethod;
 };
@@ -229,3 +240,3 @@ declare type ConnectedWallet = Wallet & WalletInfoWithOpenMethod;
      */
-    get wallet(): (Wallet & WalletInfoWithOpenMethod) | null;
+    get wallet(): Wallet | (Wallet & WalletInfoWithOpenMethod) | null;
     /**
@@ -268,3 +279,3 @@ * Set and apply new UI options. Object with partial options should be passed. Passed options will be merged with current options.
     private subscribeToWalletChange;
-    private setPreferredWalletName;
+    private setPreferredWalletAppName;
     private getSelectedWalletInfo;
@@ -271,0 +282,0 @@ private updateWalletInfo;

package.json

 {
   "name": "@tonconnect/ui",
-  "version": "1.0.0-beta.7",
+  "version": "2.0.0-beta.0",
   "scripts": {
     "start": "vite --host",
     "dev": "vite",
-    "build": "vite build && rollup -c rollup.config.mjs && vite build -c vite.cdn-config.ts && node ./scripts/patch-build_ssr-fix.js"
+    "build": "tsc --noEmit --emitDeclarationOnly false && vite build && rollup -c rollup.config.mjs && vite build -c vite.cdn-config.ts && node ./scripts/patch-build_ssr-fix.js"
   },
@@ -52,3 +52,3 @@ "nx": {
     "deepmerge": "^4.2.2",
-    "@tonconnect/sdk": "^2.2.0",
+    "@tonconnect/sdk": "^3.0.0-beta.0",
     "ua-parser-js": "^1.0.35"
@@ -55,0 +55,0 @@ },

README.md

@@ -287,2 +287,29 @@ # TON Connect UI
 
+## Use inside TWA (Telegram web app)
+TonConnect UI will work in TWA in the same way as in a regular website!
+Basically, no changes are required from the dApp's developers. The only thing you have to set is a dynamic return strategy.
+
+Currently, it is impossible for TWA-wallets to redirect back to previous opened TWA-dApp like native wallet-apps do.
+It means, that you need to specify the return strategy as a link to your TWA that will be only applied if the dApp is opened in TWA mode.
+
+```ts
+tonConnectUI.uiOptions = {
+        twaReturnUrl: 'https://t.me/durov'
+    };
+```
+
+In other words,
+```ts
+if (isLinkToTelegram()) {
+    if (isInTWA()) {
+        FINAL_RETURN_STRATEGY = actionsConfiguration.twaReturnUrl || actionsConfiguration.returnStrategy;
+    } else {
+        FINAL_RETURN_STRATEGY = 'none';
+    }
+} else {
+    FINAL_RETURN_STRATEGY = actionsConfiguration.returnStrategy;
+}
+
+```
+
 ## Detect end of the connection restoring process
@@ -484,23 +511,24 @@ Before restoring previous connected wallet TonConnect has to set up SSE connection with bridge, so you have to wait a little while connection restoring.
 
-| Element                               | Selector                                      | Element description                                                                                                   |
-|---------------------------------------|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
-| Connect wallet modal container        | `[data-tc-wallets-modal-container="true"]`    | Container of the modal window that opens when you click on the "connect wallet" button.                               |
-| Select wallet mobile modal content    | `[data-tc-wallets-modal-mobile="true"]`       | Content of the mobile modal window with wallet selection.                                                             |
-| Select wallet desktop modal content   | `[data-tc-wallets-modal-desktop="true"]`      | Content of the desktop window with wallet selection.                                                                  |
-| Desktop Universal QR content          | `[data-tc-universal-qr-desktop="true"]`       | Universal QR page content under the tab bar in the desktop wallets selection modal window.                            |
-| Desktop wallets list content          | `[data-tc-select-wallet-desktop="true"]`      | Wallets list page content under the tab bar in the desktop wallets selection modal window.                            |
-| Concrete wallet QR-code modal content | `[data-tc-wallet-qr-modal-desktop="true"]`    | Content of the modal window with the concrete wallet QR-code.                                                         |
-| Action modal container                | `[data-tc-actions-modal-container="true"]`    | Container of the modal window that opens when you call `sendTransaction` or other action.                             |
-| Confirm action modal content          | `[data-tc-confirm-modal="true"]`              | Content of the modal window asking for confirmation of the action in the wallet.                                      |
-| "Transaction sent" modal content      | `[data-tc-transaction-sent-modal="true"]`     | Content of the modal window informing that the transaction was successfully sent.                                     |
-| "Transaction canceled" modal content  | `[data-tc-transaction-canceled-modal="true"]` | Content of the modal window informing that the transaction was not sent.                                              |
-| "Connect Wallet" button               | `[data-tc-connect-button="true"]`             | "Connect Wallet" button element.                                                                                      |
-| Wallet menu loading button            | `[data-tc-connect-button-loading="true"]`     | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
-| Wallet menu dropdown button           | `[data-tc-dropdown-button="true"]`            | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect).                                     |
-| Wallet menu dropdown container        | `[data-tc-dropdown-container="true"]`         | Container of the dropdown that opens when you click on the "wallet menu" button with ton address.                     |
-| Wallet menu dropdown content          | `[data-tc-dropdown="true"]`                   | Content of the dropdown that opens when you click on the "wallet menu" button with ton address.                       |
-| Notifications container               | `[data-tc-list-notifications="true"]`         | Container of the actions notifications.                                                                               |
-| Notification confirm                  | `[data-tc-notification-confirm="true"]`       | Confirmation notification element.                                                                                    |
-| Notification tx sent                  | `[data-tc-notification-tx-sent="true"]`       | Transaction sent notification element.                                                                                |
-| Notification cancelled tx             | `[data-tc-notification-tx-cancelled="true"]`  | Cancelled transaction notification element.                                                                           |
+| Element                              | Selector                                            | Element description                                                                                                   |
+|--------------------------------------|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| Connect wallet modal container       | `[data-tc-wallets-modal-container="true"]`          | Container of the modal window that opens when you click on the "connect wallet" button.                               |
+| Mobile universal modal page content  | `[data-tc-wallets-modal-universal-mobile="true"]`   | Content of the general mobile modal page with horizontal list.                                                        |
+| Desktop universal modal page content | `[data-tc-wallets-modal-universal-desktop="true"]`  | Content of the universal desktop modal page with QR.                                                                  |
+| Mobile selected wallet's modal page  | `[data-tc-wallets-modal-connection-mobile="true"]`  | Content of the selected wallet's modal page on mobile.                                                                |
+| Desktop selected wallet's modal page | `[data-tc-wallets-modal-connection-desktop="true"]` | Content of the selected wallet's modal page on desktop.                                                               |
+| Wallets list modal page              | `[data-tc-wallets-modal-list="true"]`               | Content of the modal page with all available wallets list (desktop and mobile).                                       |
+| Info modal page                      | `[data-tc-wallets-modal-info="true"]`               | Content of the modal page with "What is a wallet information".                                                        |
+| Action modal container               | `[data-tc-actions-modal-container="true"]`          | Container of the modal window that opens when you call `sendTransaction` or other action.                             |
+| Confirm action modal content         | `[data-tc-confirm-modal="true"]`                    | Content of the modal window asking for confirmation of the action in the wallet.                                      |
+| "Transaction sent" modal content     | `[data-tc-transaction-sent-modal="true"]`           | Content of the modal window informing that the transaction was successfully sent.                                     |
+| "Transaction canceled" modal content | `[data-tc-transaction-canceled-modal="true"]`       | Content of the modal window informing that the transaction was not sent.                                              |
+| "Connect Wallet" button              | `[data-tc-connect-button="true"]`                   | "Connect Wallet" button element.                                                                                      |
+| Wallet menu loading button           | `[data-tc-connect-button-loading="true"]`           | Button element which appears instead of "Connect Wallet" and dropdown menu buttons while restoring connection process |
+| Wallet menu dropdown button          | `[data-tc-dropdown-button="true"]`                  | Wallet menu button -- host of the dropdown wallet menu (copy address/disconnect).                                     |
+| Wallet menu dropdown container       | `[data-tc-dropdown-container="true"]`               | Container of the dropdown that opens when you click on the "wallet menu" button with ton address.                     |
+| Wallet menu dropdown content         | `[data-tc-dropdown="true"]`                         | Content of the dropdown that opens when you click on the "wallet menu" button with ton address.                       |
+| Notifications container              | `[data-tc-list-notifications="true"]`               | Container of the actions notifications.                                                                               |
+| Notification confirm                 | `[data-tc-notification-confirm="true"]`             | Confirmation notification element.                                                                                    |
+| Notification tx sent                 | `[data-tc-notification-tx-sent="true"]`             | Transaction sent notification element.                                                                                |
+| Notification cancelled tx            | `[data-tc-notification-tx-cancelled="true"]`        | Cancelled transaction notification element.                                                                           |
 
@@ -507,0 +535,0 @@ ---

No alert changes

Improved metrics

Total package byte prevSize

3454329

increased by20.14%

Lines of code

22074

increased by19.23%

Number of lines in readme file

642

increased by4.56%

Dependency changes

• + Added@tonconnect/isomorphic-eventsource@0.0.2(transitive)

• + Added@tonconnect/isomorphic-fetch@0.0.3(transitive)

• + Added@tonconnect/sdk@3.0.6(transitive)

• - Removed@tonconnect/isomorphic-eventsource@0.0.1(transitive)

• - Removed@tonconnect/isomorphic-fetch@0.0.2(transitive)

• - Removed@tonconnect/sdk@2.2.0(transitive)

• Updated@tonconnect/sdk@^3.0.0-beta.0