@tonconnect/ui 2.0.3-beta.1 → 2.0.3-beta.3

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, ConnectionEvent, ConnectionRestoringEvent, DisconnectionEvent, TransactionSigningEvent, ITonConnect, EventDispatcher, SdkActionEvent, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, VersionEvent, ConnectionEvent, ConnectionRestoringEvent, DisconnectionEvent, TransactionSigningEvent, ITonConnect, EventDispatcher, SdkActionEvent, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 export * from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
@@ -171,7 +171,7 @@ interface TonConnectUiOptions {
 /**
  * User action events.
  */
-declare type UserActionEvent = ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
+declare type UserActionEvent = VersionEvent | ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
 interface TonConnectUiOptionsWithManifest extends TonConnectUiCreateOptionsBase {

package/lib/index.mjs

@@ -42,7 +42,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var _a, _b, _c, _d, _e, _f, _g, _h;
-import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, encodeTelegramUrlParameters, isWalletInfoRemote, isWalletInfoCurrentlyEmbedded, BrowserEventDispatcher, createConnectionStartedEvent, createConnectionCompletedEvent, createConnectionErrorEvent, createConnectionRestoringStartedEvent, createConnectionRestoringCompletedEvent, createConnectionRestoringErrorEvent, createDisconnectionEvent, createTransactionSentForSignatureEvent, createTransactionSignedEvent, createTransactionSigningFailedEvent } from "@tonconnect/sdk";
+import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, encodeTelegramUrlParameters, isWalletInfoRemote, isWalletInfoCurrentlyEmbedded, createVersionInfo, BrowserEventDispatcher, createResponseVersionEvent, createRequestVersionEvent, createConnectionStartedEvent, createConnectionCompletedEvent, createConnectionErrorEvent, createConnectionRestoringStartedEvent, createConnectionRestoringCompletedEvent, createConnectionRestoringErrorEvent, createDisconnectionEvent, createTransactionSentForSignatureEvent, createTransactionSignedEvent, createTransactionSigningFailedEvent } from "@tonconnect/sdk";
 export * from "@tonconnect/sdk";
 import UAParser from "ua-parser-js";
 import deepmerge from "deepmerge";
@@ -1829,6 +1829,12 @@ function createMacrotask(callback) {
     callback();
   });
 }
+function createMacrotaskAsync(callback) {
+  return __async(this, null, function* () {
+    yield new Promise((resolve) => requestAnimationFrame(resolve));
+    return callback();
+  });
+}
 function preloadImages(images) {
   if (document.readyState !== "complete") {
     window.addEventListener("load", () => createMacrotask(() => preloadImages(images)), {
@@ -7159,7 +7165,7 @@ const computePosition$1 = (reference, floating, config) => __async(void 0, null,
   } = config;
   const validMiddleware = middleware.filter(Boolean);
   const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(floating);
-  if ({}.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== "production") {
     if (platform2 == null) {
       console.error(["Floating UI: `platform` property was not passed to config. If you", "want to use Floating UI on the web, install @floating-ui/dom", "instead of the /core package. Otherwise, you can create your own", "`platform`: https://floating-ui.com/docs/platform"].join(" "));
     }
@@ -7216,7 +7222,7 @@ const computePosition$1 = (reference, floating, config) => __async(void 0, null,
     middlewareData = __spreadProps(__spreadValues({}, middlewareData), {
       [name]: __spreadValues(__spreadValues({}, middlewareData[name]), data)
     });
-    if ({}.NODE_ENV !== "production") {
+    if (process.env.NODE_ENV !== "production") {
       if (resetCount > 50) {
         console.warn(["Floating UI: The middleware lifecycle appears to be running in an", "infinite loop. This is usually caused by a `reset` continually", "being returned without a break condition."].join(" "));
       }
@@ -8643,10 +8649,14 @@ const DesktopConnectionModal = (props) => {
   });
   onCleanup(unsubscribe);
   const generateUniversalLink = () => {
-    setUniversalLink(connector.connect({
-      universalLink: props.wallet.universalLink,
-      bridgeUrl: props.wallet.bridgeUrl
-    }, props.additionalRequest));
+    try {
+      const universalLink2 = connector.connect({
+        universalLink: props.wallet.universalLink,
+        bridgeUrl: props.wallet.bridgeUrl
+      }, props.additionalRequest);
+      setUniversalLink(universalLink2);
+    } catch (e2) {
+    }
   };
   createEffect(() => {
     if (untrack(mode) !== "extension" && (supportsMobile(props.wallet) || supportsDesktop(props.wallet))) {
@@ -9626,6 +9636,17 @@ const MobileUniversalQR = (props) => {
     }
   })];
 };
+function getUniqueBridges(walletsList) {
+  const uniqueBridges = new Set(
+    walletsList.filter(isWalletInfoRemote).map((item) => item.bridgeUrl)
+  );
+  return Array.from(uniqueBridges).map((bridgeUrl) => ({ bridgeUrl }));
+}
+function bridgesIsEqual(left, right) {
+  const leftSet = new Set(left == null ? void 0 : left.map((i2) => i2.bridgeUrl));
+  const rightSet = new Set(right == null ? void 0 : right.map((i2) => i2.bridgeUrl));
+  return leftSet.size === rightSet.size && [...leftSet].every((value) => rightSet.has(value));
+}
 const _tmpl$$1 = /* @__PURE__ */ template$1(`<li></li>`), _tmpl$2 = /* @__PURE__ */ template$1(`<div data-tc-wallets-modal-universal-mobile="true"></div>`);
 const MobileUniversalModal = (props) => {
   const [showQR, setShowQR] = createSignal(false);
@@ -9633,10 +9654,10 @@ const MobileUniversalModal = (props) => {
   const connector = appState.connector;
   const walletsList = () => props.walletsList.filter((w) => supportsMobile(w) && w.appName !== AT_WALLET_APP_NAME);
   const shouldShowMoreButton = () => walletsList().length > 7;
-  const walletsBridges = () => [...new Set(props.walletsList.filter(isWalletInfoRemote).map((item) => item.bridgeUrl)).values()].map((bridgeUrl) => ({
-    bridgeUrl
-  }));
-  const getUniversalLink = () => connector.connect(walletsBridges(), props.additionalRequest);
+  const walletsBridges = createMemo(() => getUniqueBridges(props.walletsList), null, {
+    equals: bridgesIsEqual
+  });
+  const getUniversalLink = createMemo(() => connector.connect(walletsBridges(), props.additionalRequest));
   setLastSelectedWalletInfo({
     openMethod: "universal-link"
   });
@@ -9924,9 +9945,9 @@ const _tmpl$ = /* @__PURE__ */ template$1(`<li></li>`);
 const DesktopUniversalModal = (props) => {
   const [popupOpened, setPopupOpened] = createSignal(false);
   const connector = appState.connector;
-  const walletsBridges = () => [...new Set(props.walletsList.filter(isWalletInfoRemote).map((item) => item.bridgeUrl)).values()].map((bridgeUrl) => ({
-    bridgeUrl
-  }));
+  const walletsBridges = createMemo(() => getUniqueBridges(props.walletsList), null, {
+    equals: bridgesIsEqual
+  });
   setLastSelectedWalletInfo({
     openMethod: "qrcode"
   });
@@ -9988,6 +10009,9 @@ const WalletsModal = () => {
   createEffect(() => locale(appState.language));
   createEffect(() => {
     if (getWalletsModalIsOpened()) {
+      setSelectedWalletInfo(null);
+      setSelectedTab("universal");
+      setInfoTab(false);
       updateIsMobile();
     }
   });
@@ -10740,90 +10764,141 @@ class SingleWalletModalManager {
   }
 }
 class TonConnectUITracker {
-  constructor(eventDispatcher) {
+  constructor(options) {
     __publicField(this, "eventPrefix", "ton-connect-ui-");
+    __publicField(this, "tonConnectUiVersion");
+    __publicField(this, "tonConnectSdkVersion", null);
     __publicField(this, "eventDispatcher");
-    this.eventDispatcher = eventDispatcher != null ? eventDispatcher : new BrowserEventDispatcher();
+    var _a2;
+    this.eventDispatcher = (_a2 = options == null ? void 0 : options.eventDispatcher) != null ? _a2 : new BrowserEventDispatcher();
+    this.tonConnectUiVersion = options.tonConnectUiVersion;
+    this.init().catch();
+  }
+  get version() {
+    return createVersionInfo({
+      ton_connect_sdk_lib: this.tonConnectSdkVersion,
+      ton_connect_ui_lib: this.tonConnectUiVersion
+    });
+  }
+  init() {
+    return __async(this, null, function* () {
+      try {
+        yield this.setRequestVersionHandler();
+        this.tonConnectSdkVersion = yield this.requestTonConnectSdkVersion();
+      } catch (e2) {
+      }
+    });
+  }
+  setRequestVersionHandler() {
+    return __async(this, null, function* () {
+      yield this.eventDispatcher.addEventListener("ton-connect-ui-request-version", () => __async(this, null, function* () {
+        yield this.eventDispatcher.dispatchEvent(
+          "ton-connect-ui-response-version",
+          createResponseVersionEvent(this.tonConnectUiVersion)
+        );
+      }));
+    });
+  }
+  requestTonConnectSdkVersion() {
+    return __async(this, null, function* () {
+      return new Promise((resolve, reject) => __async(this, null, function* () {
+        try {
+          yield this.eventDispatcher.addEventListener(
+            "ton-connect-response-version",
+            (event) => {
+              resolve(event.detail.version);
+            },
+            { once: true }
+          );
+          yield this.eventDispatcher.dispatchEvent(
+            "ton-connect-request-version",
+            createRequestVersionEvent()
+          );
+        } catch (e2) {
+          reject(e2);
+        }
+      }));
+    });
   }
   dispatchUserActionEvent(eventDetails) {
     var _a2;
     try {
-      const eventName = `${this.eventPrefix}${eventDetails.type}`;
-      (_a2 = this.eventDispatcher) == null ? void 0 : _a2.dispatchEvent(eventName, eventDetails).catch();
+      (_a2 = this.eventDispatcher) == null ? void 0 : _a2.dispatchEvent(`${this.eventPrefix}${eventDetails.type}`, eventDetails).catch();
     } catch (e2) {
     }
   }
   trackConnectionStarted(...args) {
     try {
-      const event = createConnectionStartedEvent(...args);
+      const event = createConnectionStartedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackConnectionCompleted(...args) {
     try {
-      const event = createConnectionCompletedEvent(...args);
+      const event = createConnectionCompletedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackConnectionError(...args) {
     try {
-      const event = createConnectionErrorEvent(...args);
+      const event = createConnectionErrorEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackConnectionRestoringStarted(...args) {
     try {
-      const event = createConnectionRestoringStartedEvent(...args);
+      const event = createConnectionRestoringStartedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackConnectionRestoringCompleted(...args) {
     try {
-      const event = createConnectionRestoringCompletedEvent(...args);
+      const event = createConnectionRestoringCompletedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackConnectionRestoringError(...args) {
     try {
-      const event = createConnectionRestoringErrorEvent(...args);
+      const event = createConnectionRestoringErrorEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackDisconnection(...args) {
     try {
-      const event = createDisconnectionEvent(...args);
+      const event = createDisconnectionEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackTransactionSentForSignature(...args) {
     try {
-      const event = createTransactionSentForSignatureEvent(...args);
+      const event = createTransactionSentForSignatureEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackTransactionSigned(...args) {
     try {
-      const event = createTransactionSignedEvent(...args);
+      const event = createTransactionSignedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
   trackTransactionSigningFailed(...args) {
     try {
-      const event = createTransactionSigningFailedEvent(...args);
+      const event = createTransactionSigningFailedEvent(this.version, ...args);
       this.dispatchUserActionEvent(event);
     } catch (e2) {
     }
   }
 }
+const tonConnectUiVersion = "2.0.3-beta.3";
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
@@ -10851,7 +10926,10 @@ class TonConnectUI {
         "You have to specify a `manifestUrl` or a `connector` in the options."
       );
     }
-    this.tracker = new TonConnectUITracker(options == null ? void 0 : options.eventDispatcher);
+    this.tracker = new TonConnectUITracker({
+      eventDispatcher: options == null ? void 0 : options.eventDispatcher,
+      tonConnectUiVersion
+    });
     this.modal = new WalletsModalManager({
       connector: this.connector,
       tracker: this.tracker,
@@ -10874,8 +10952,8 @@ class TonConnectUI {
     const rootId = this.normalizeWidgetRoot(options == null ? void 0 : options.widgetRootId);
     this.subscribeToWalletChange();
     if ((options == null ? void 0 : options.restoreConnection) !== false) {
-      this.tracker.trackConnectionRestoringStarted();
-      this.connectionRestored = new Promise((resolve) => __async(this, null, function* () {
+      this.connectionRestored = createMacrotaskAsync(() => __async(this, null, function* () {
+        this.tracker.trackConnectionRestoringStarted();
         yield this.connector.restoreConnection();
         if (!this.connector.connected) {
           this.tracker.trackConnectionRestoringError("Connection was not restored");
@@ -10883,7 +10961,7 @@ class TonConnectUI {
         } else {
           this.tracker.trackConnectionRestoringCompleted(this.wallet);
         }
-        resolve(this.connector.connected);
+        return this.connector.connected;
       }));
     }
     this.uiOptions = mergeOptions(options, { uiPreferences: { theme: "SYSTEM" } });
@@ -11094,7 +11172,6 @@ class TonConnectUI {
         });
         return result;
       } catch (e2) {
-        this.tracker.trackTransactionSigningFailed(this.wallet, tx, e2.message);
         widgetController.setAction({
           name: "transaction-canceled",
           showNotification: notifications2.includes("error"),
@@ -11201,6 +11278,11 @@ class TonConnectUI {
       return new Promise((resolve, reject) => {
         const { transaction, signal } = options;
         if (signal.aborted) {
+          this.tracker.trackTransactionSigningFailed(
+            this.wallet,
+            transaction,
+            "Transaction was cancelled"
+          );
           return reject(new TonConnectUIError("Transaction was not sent"));
         }
         const onTransactionHandler = (transaction2) => __async(this, null, function* () {
@@ -11209,14 +11291,22 @@ class TonConnectUI {
         const onErrorsHandler = (reason) => {
           reject(reason);
         };
-        this.connector.sendTransaction(transaction, { onRequestSent, signal }).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
-        signal.addEventListener(
-          "abort",
-          () => {
-            reject(new TonConnectUIError("Transaction was not sent"));
-          },
-          { once: true }
-        );
+        const onCanceledHandler = () => {
+          this.tracker.trackTransactionSigningFailed(
+            this.wallet,
+            transaction,
+            "Transaction was cancelled"
+          );
+          reject(new TonConnectUIError("Transaction was not sent"));
+        };
+        signal.addEventListener("abort", onCanceledHandler, { once: true });
+        this.connector.sendTransaction(transaction, { onRequestSent, signal }).then((result) => {
+          signal.removeEventListener("abort", onCanceledHandler);
+          return onTransactionHandler(result);
+        }).catch((reason) => {
+          signal.removeEventListener("abort", onCanceledHandler);
+          return onErrorsHandler(reason);
+        });
       });
     });
   }