@tonconnect/ui 2.0.2 → 2.0.3-beta.1

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, ITonConnect, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, 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';
 
@@ -168,6 +168,11 @@ interface TonConnectUiOptions {
     enableAndroidBackHandler?: boolean;
 }
 
+/**
+ * User action events.
+ */
+declare type UserActionEvent = ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
+
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
 interface TonConnectUiOptionsWithManifest extends TonConnectUiCreateOptionsBase {
     /**
@@ -193,6 +198,11 @@ interface TonConnectUiCreateOptionsBase extends TonConnectUiOptions {
      * @default `div#tc-widget-root`.
      */
     widgetRootId?: string;
+    /**
+     * Event dispatcher to track user actions. By default, it uses `window.dispatchEvent` for browser environment.
+     * @default BrowserEventDispatcher.
+     */
+    eventDispatcher?: EventDispatcher<UserActionEvent | SdkActionEvent>;
 }
 
 declare type WalletOpenMethod = 'qrcode' | 'universal-link' | 'custom-deeplink';
@@ -218,8 +228,9 @@ interface WalletsModal {
     open: () => void;
     /**
      * Close the modal.
+     * @default 'action-cancelled'
      */
-    close: () => void;
+    close: (reason?: WalletsModalCloseReason) => void;
     /**
      * Subscribe to the modal window status changes.
      */
@@ -307,6 +318,11 @@ declare class TonConnectUI {
     static getWallets(): Promise<WalletInfo[]>;
     private readonly walletInfoStorage;
     private readonly preferredWalletStorage;
+    /**
+     * Emits user action event to the EventDispatcher. By default, it uses `window.dispatchEvent` for browser environment.
+     * @private
+     */
+    private readonly tracker;
     private walletInfo;
     private systemThemeChangeUnsubscribe;
     private actionsConfiguration?;
@@ -377,7 +393,7 @@ declare class TonConnectUI {
     /**
      * Closes the modal window.
      */
-    closeModal(): void;
+    closeModal(reason?: WalletsModalCloseReason): void;
     /**
      * Subscribe to the modal window state changes, returns a function which has to be called to unsubscribe.
      */
@@ -395,7 +411,7 @@ declare class TonConnectUI {
      * Close the single wallet modal window.
      * @experimental
      */
-    closeSingleWalletModal(): void;
+    closeSingleWalletModal(closeReason?: WalletsModalCloseReason): void;
     /**
      * Subscribe to the single wallet modal window state changes, returns a function which has to be called to unsubscribe.
      * @experimental
@@ -480,4 +496,4 @@ declare class TonConnectUIError extends TonConnectError {
     constructor(...args: ConstructorParameters<typeof Error>);
 }
 
-export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };
+export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, UserActionEvent, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };

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 } from "@tonconnect/sdk";
+import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, encodeTelegramUrlParameters, isWalletInfoRemote, isWalletInfoCurrentlyEmbedded, BrowserEventDispatcher, 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";
@@ -10031,18 +10031,26 @@ const WalletsModal = () => {
     return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
   });
   const onClose = (closeReason) => {
-    setWalletsModalState({
-      status: "closed",
-      closeReason
-    });
-    setSelectedWalletInfo(null);
-    setInfoTab(false);
+    tonConnectUI.closeModal(closeReason);
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
       onClose("wallet-selected");
     }
   });
+  const onSelectAllWallets = () => {
+    setSelectedTab("all-wallets");
+  };
+  const onSelectUniversal = () => {
+    setSelectedTab("universal");
+  };
+  const clearSelectedWalletInfo = () => {
+    setSelectedWalletInfo(null);
+  };
+  onCleanup(() => {
+    setSelectedWalletInfo(null);
+    setInfoTab(false);
+  });
   onCleanup(unsubscribe);
   return createComponent(StyledModal, {
     get opened() {
@@ -10107,7 +10115,7 @@ const WalletsModal = () => {
                         get additionalRequest() {
                           return additionalRequest();
                         },
-                        onBackClick: () => setSelectedWalletInfo(null)
+                        onBackClick: clearSelectedWalletInfo
                       });
                     }
                   }), createComponent(Match, {
@@ -10126,7 +10134,7 @@ const WalletsModal = () => {
                         get additionalRequest() {
                           return additionalRequest();
                         },
-                        onSelectAllWallets: () => setSelectedTab("all-wallets")
+                        onSelectAllWallets
                       });
                     }
                   }), createComponent(Match, {
@@ -10138,7 +10146,7 @@ const WalletsModal = () => {
                         get walletsList() {
                           return walletsList();
                         },
-                        onBack: () => setSelectedTab("universal"),
+                        onBack: onSelectUniversal,
                         onSelect: setSelectedWalletInfo
                       });
                     }
@@ -10393,6 +10401,7 @@ const SingleWalletModal = () => {
     }
   });
   const connector = useContext(ConnectorContext);
+  const tonConnectUI = useContext(TonConnectUiContext);
   const [infoTab, setInfoTab] = createSignal(false);
   const additionalRequestLoading = () => {
     var _a2;
@@ -10406,11 +10415,7 @@ const SingleWalletModal = () => {
     return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
   });
   const onClose = (closeReason) => {
-    setSingleWalletModalState({
-      status: "closed",
-      closeReason
-    });
-    setInfoTab(false);
+    tonConnectUI.closeSingleWalletModal(closeReason);
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
@@ -10418,6 +10423,9 @@ const SingleWalletModal = () => {
     }
   });
   onCleanup(unsubscribe);
+  onCleanup(() => {
+    setInfoTab(false);
+  });
   return createComponent(StyledModal, {
     get opened() {
       return getSingleWalletModalIsOpened();
@@ -10567,8 +10575,10 @@ class WalletsModalManager {
     __publicField(this, "connector");
     __publicField(this, "setConnectRequestParametersCallback");
     __publicField(this, "consumers", []);
+    __publicField(this, "tracker");
     __publicField(this, "state", walletsModalState());
     this.connector = options.connector;
+    this.tracker = options.tracker;
     this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
     createEffect(() => {
       const state = walletsModalState();
@@ -10578,6 +10588,7 @@ class WalletsModalManager {
   }
   open() {
     return __async(this, null, function* () {
+      this.tracker.trackConnectionStarted();
       const walletsList = yield this.connector.getWallets();
       const embeddedWallet = walletsList.find(isWalletInfoCurrentlyEmbedded);
       if (embeddedWallet) {
@@ -10587,8 +10598,11 @@ class WalletsModalManager {
       }
     });
   }
-  close() {
-    widgetController.closeWalletsModal("action-cancelled");
+  close(reason = "action-cancelled") {
+    if (reason === "action-cancelled") {
+      this.tracker.trackConnectionError("Connection was cancelled");
+    }
+    widgetController.closeWalletsModal(reason);
   }
   onStateChange(onChange) {
     this.consumers.push(onChange);
@@ -10648,8 +10662,10 @@ class SingleWalletModalManager {
     __publicField(this, "connector");
     __publicField(this, "setConnectRequestParametersCallback");
     __publicField(this, "consumers", []);
+    __publicField(this, "tracker");
     __publicField(this, "state", singleWalletModalState());
     this.connector = options.connector;
+    this.tracker = options.tracker;
     this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
     createEffect(() => {
       const state = singleWalletModalState();
@@ -10659,6 +10675,7 @@ class SingleWalletModalManager {
   }
   open(wallet) {
     return __async(this, null, function* () {
+      this.tracker.trackConnectionStarted();
       const fetchedWalletsList = yield this.connector.getWallets();
       const walletsList = applyWalletsListConfiguration(
         fetchedWalletsList,
@@ -10675,10 +10692,15 @@ class SingleWalletModalManager {
       if (isExternalWalletExist) {
         return this.openSingleWalletModal(externalWallet);
       }
-      throw new TonConnectUIError(`Trying to open modal window with unknown wallet "${wallet}".`);
+      const error = `Trying to open modal window with unknown wallet "${wallet}".`;
+      this.tracker.trackConnectionError(error);
+      throw new TonConnectUIError(error);
     });
   }
-  close() {
+  close(reason = "action-cancelled") {
+    if (reason === "action-cancelled") {
+      this.tracker.trackConnectionError("Connection was cancelled");
+    }
     widgetController.closeSingleWalletModal("action-cancelled");
   }
   onStateChange(onChange) {
@@ -10717,10 +10739,96 @@ class SingleWalletModalManager {
     });
   }
 }
+class TonConnectUITracker {
+  constructor(eventDispatcher) {
+    __publicField(this, "eventPrefix", "ton-connect-ui-");
+    __publicField(this, "eventDispatcher");
+    this.eventDispatcher = eventDispatcher != null ? eventDispatcher : new BrowserEventDispatcher();
+  }
+  dispatchUserActionEvent(eventDetails) {
+    var _a2;
+    try {
+      const eventName = `${this.eventPrefix}${eventDetails.type}`;
+      (_a2 = this.eventDispatcher) == null ? void 0 : _a2.dispatchEvent(eventName, eventDetails).catch();
+    } catch (e2) {
+    }
+  }
+  trackConnectionStarted(...args) {
+    try {
+      const event = createConnectionStartedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackConnectionCompleted(...args) {
+    try {
+      const event = createConnectionCompletedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackConnectionError(...args) {
+    try {
+      const event = createConnectionErrorEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackConnectionRestoringStarted(...args) {
+    try {
+      const event = createConnectionRestoringStartedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackConnectionRestoringCompleted(...args) {
+    try {
+      const event = createConnectionRestoringCompletedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackConnectionRestoringError(...args) {
+    try {
+      const event = createConnectionRestoringErrorEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackDisconnection(...args) {
+    try {
+      const event = createDisconnectionEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackTransactionSentForSignature(...args) {
+    try {
+      const event = createTransactionSentForSignatureEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackTransactionSigned(...args) {
+    try {
+      const event = createTransactionSignedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+  trackTransactionSigningFailed(...args) {
+    try {
+      const event = createTransactionSigningFailedEvent(...args);
+      this.dispatchUserActionEvent(event);
+    } catch (e2) {
+    }
+  }
+}
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
     __publicField(this, "preferredWalletStorage", new PreferredWalletStorage());
+    __publicField(this, "tracker");
     __publicField(this, "walletInfo", null);
     __publicField(this, "systemThemeChangeUnsubscribe", null);
     __publicField(this, "actionsConfiguration");
@@ -10734,20 +10842,26 @@ class TonConnectUI {
     if (options && "connector" in options && options.connector) {
       this.connector = options.connector;
     } else if (options && "manifestUrl" in options && options.manifestUrl) {
-      this.connector = new TonConnect({ manifestUrl: options.manifestUrl });
+      this.connector = new TonConnect({
+        manifestUrl: options.manifestUrl,
+        eventDispatcher: options == null ? void 0 : options.eventDispatcher
+      });
     } else {
       throw new TonConnectUIError(
         "You have to specify a `manifestUrl` or a `connector` in the options."
       );
     }
+    this.tracker = new TonConnectUITracker(options == null ? void 0 : options.eventDispatcher);
     this.modal = new WalletsModalManager({
       connector: this.connector,
+      tracker: this.tracker,
       setConnectRequestParametersCallback: (callback) => {
         this.connectRequestParametersCallback = callback;
       }
     });
     this.singleWalletModal = new SingleWalletModalManager({
       connector: this.connector,
+      tracker: this.tracker,
       setConnectRequestParametersCallback: (callback) => {
         this.connectRequestParametersCallback = callback;
       }
@@ -10760,10 +10874,14 @@ 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* () {
         yield this.connector.restoreConnection();
         if (!this.connector.connected) {
+          this.tracker.trackConnectionRestoringError("Connection was not restored");
           this.walletInfoStorage.removeWalletInfo();
+        } else {
+          this.tracker.trackConnectionRestoringCompleted(this.wallet);
         }
         resolve(this.connector.connected);
       }));
@@ -10861,8 +10979,8 @@ class TonConnectUI {
       return this.modal.open();
     });
   }
-  closeModal() {
-    this.modal.close();
+  closeModal(reason) {
+    this.modal.close(reason);
   }
   onModalStateChange(onChange) {
     return this.modal.onStateChange(onChange);
@@ -10875,8 +10993,8 @@ class TonConnectUI {
       return this.singleWalletModal.open(wallet);
     });
   }
-  closeSingleWalletModal() {
-    this.singleWalletModal.close();
+  closeSingleWalletModal(closeReason) {
+    this.singleWalletModal.close(closeReason);
   }
   onSingleWalletModalStateChange(onChange) {
     return this.singleWalletModal.onStateChange(onChange);
@@ -10896,6 +11014,7 @@ class TonConnectUI {
     });
   }
   disconnect() {
+    this.tracker.trackDisconnection(this.wallet, "dapp");
     widgetController.clearAction();
     widgetController.removeSelectedWalletInfo();
     this.walletInfoStorage.removeWalletInfo();
@@ -10903,7 +11022,9 @@ class TonConnectUI {
   }
   sendTransaction(tx, options) {
     return __async(this, null, function* () {
+      this.tracker.trackTransactionSentForSignature(this.wallet, tx);
       if (!this.connected) {
+        this.tracker.trackTransactionSigningFailed(this.wallet, tx, "Wallet was not connected");
         throw new TonConnectUIError("Connect wallet to send a transaction.");
       }
       if (isInTMA()) {
@@ -10965,6 +11086,7 @@ class TonConnectUI {
           },
           onRequestSent
         );
+        this.tracker.trackTransactionSigned(this.wallet, tx, result);
         widgetController.setAction({
           name: "transaction-sent",
           showNotification: notifications2.includes("success"),
@@ -10972,6 +11094,7 @@ class TonConnectUI {
         });
         return result;
       } catch (e2) {
+        this.tracker.trackTransactionSigningFailed(this.wallet, tx, e2.message);
         widgetController.setAction({
           name: "transaction-canceled",
           showNotification: notifications2.includes("error"),
@@ -11028,23 +11151,28 @@ class TonConnectUI {
   waitForWalletConnection(options) {
     return __async(this, null, function* () {
       return new Promise((resolve, reject) => {
+        this.tracker.trackConnectionStarted();
         const { ignoreErrors = false, signal = null } = options;
         if (signal && signal.aborted) {
+          this.tracker.trackConnectionError("Connection was cancelled");
           return reject(new TonConnectUIError("Wallet was not connected"));
         }
         const onStatusChangeHandler = (wallet) => __async(this, null, function* () {
           if (!wallet) {
+            this.tracker.trackConnectionError("Connection was cancelled");
             if (ignoreErrors) {
               return;
             }
             unsubscribe();
             reject(new TonConnectUIError("Wallet was not connected"));
           } else {
+            this.tracker.trackConnectionCompleted(wallet);
             unsubscribe();
             resolve(wallet);
           }
         });
         const onErrorsHandler = (reason) => {
+          this.tracker.trackConnectionError(reason.message);
           if (ignoreErrors) {
             return;
           }