feat(ui): enhanced event tracking and version management

packages/ui/package.json

@@ -47,30 +47,31 @@
     }
   },
   "dependencies": {
+    "@tonconnect/sdk": "3.0.3-beta.0",
     "classnames": "^2.3.2",
     "deepmerge": "^4.2.2",
-    "@tonconnect/sdk": "3.0.3-beta.0",
     "ua-parser-js": "^1.0.35"
   },
   "devDependencies": {
-    "solid-js": "^1.5.1",
-    "solid-styled-components": "^0.28.5",
-    "solid-transition-group": "^0.0.12",
-    "@solid-primitives/i18n": "^1.1.2",
     "@floating-ui/dom": "^1.0.12",
-    "solid-floating-ui": "^0.2.0",
+    "@rollup/plugin-replace": "5.0.5",
+    "@solid-primitives/i18n": "^1.1.2",
+    "@types/node": "^18.11.17",
+    "@types/ua-parser-js": "^0.7.36",
+    "csstype": "^3.1.1",
+    "eslint-plugin-solid": "^0.7.3",
     "is-plain-object": "^5.0.0",
     "qrcode-generator": "^1.4.4",
-    "typescript": "^4.8.2",
-    "eslint-plugin-solid": "^0.7.3",
-    "vite": "^3.0.9",
-    "vite-plugin-solid": "^2.3.0",
-    "csstype": "^3.1.1",
-    "@types/node": "^18.11.17",
-    "rollup-plugin-dts": "^5.0.0",
     "rollup": "^3.8.0",
+    "rollup-plugin-dts": "^5.0.0",
     "solid-devtools": "^0.24.7",
-    "@types/ua-parser-js": "^0.7.36"
+    "solid-floating-ui": "^0.2.0",
+    "solid-js": "^1.5.1",
+    "solid-styled-components": "^0.28.5",
+    "solid-transition-group": "^0.0.12",
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9",
+    "vite-plugin-solid": "^2.3.0"
   },
   "typedoc": {
     "entryPoint": "./src/library.ts"

packages/ui/src/app/utils/web-api.ts

@@ -97,6 +97,16 @@ export async function createMacrotask(callback: () => void): Promise<void> {
     callback();
 }
 
+/**
+ * Create a macrotask using `requestAnimationFrame()` to ensure that any pending microtasks,
+ * such as asynchronous operations from other developers and browser APIs, are executed before.
+ * @param callback
+ */
+export async function createMacrotaskAsync<T>(callback: () => Promise<T>): Promise<T> {
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    return callback();
+}
+
 /**
  * Preload images after page load to improve UX and Web Vitals metrics without affecting initial page load performance.
  */

packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/index.tsx

@@ -16,12 +16,11 @@ import {
 import { ConnectorContext } from 'src/app/state/connector.context';
 import { Button, H3, QRIcon, RetryIcon } from 'src/app/components';
 import { appState } from 'src/app/state/app.state';
-import { openLinkBlank } from 'src/app/utils/web-api';
 import { setLastSelectedWalletInfo } from 'src/app/state/modals-state';
 import { useTheme } from 'solid-styled-components';
 import { MobileConnectionQR } from 'src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr';
 import { Translation } from 'src/app/components/typography/Translation';
-import { addReturnStrategy, redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
+import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
 
 export interface MobileConnectionProps {
     additionalRequest?: ConnectAdditionalRequest;

packages/ui/src/app/views/modals/wallets-modal/wallets-modal.tsx

@@ -1,6 +1,7 @@
 import {
     ConnectAdditionalRequest,
     isWalletInfoCurrentlyInjected,
+    Wallet,
     WalletInfo,
     WalletInfoRemote
 } from '@tonconnect/sdk';
@@ -17,7 +18,7 @@ import {
     useContext
 } from 'solid-js';
 import { ConnectorContext } from 'src/app/state/connector.context';
-import { getWalletsModalIsOpened, setWalletsModalState } from 'src/app/state/modals-state';
+import { getWalletsModalIsOpened } from 'src/app/state/modals-state';
 import { H1Styled, LoaderContainerStyled, StyledModal } from './style';
 import { TonConnectUiContext } from 'src/app/state/ton-connect-ui.context';
 import { useI18n } from '@solid-primitives/i18n';
@@ -43,6 +44,9 @@ export const WalletsModal: Component = () => {
 
     createEffect(() => {
         if (getWalletsModalIsOpened()) {
+            setSelectedWalletInfo(null);
+            setSelectedTab('universal');
+            setInfoTab(false);
             updateIsMobile();
         }
     });
@@ -107,7 +111,7 @@ export const WalletsModal: Component = () => {
         tonConnectUI!.closeModal(closeReason);
     };
 
-    const unsubscribe = connector.onStatusChange(wallet => {
+    const unsubscribe = connector.onStatusChange((wallet: Wallet | null) => {
         if (wallet) {
             onClose('wallet-selected');
         }

packages/ui/src/constants/version.ts

@@ -0,0 +1,3 @@
+declare const TON_CONNECT_UI_VERSION: string;
+
+export const tonConnectUiVersion: string = TON_CONNECT_UI_VERSION;

packages/ui/src/ton-connect-ui.ts

@@ -18,7 +18,12 @@ import { widgetController } from 'src/app/widget-controller';
 import { TonConnectUIError } from 'src/errors/ton-connect-ui.error';
 import { TonConnectUiCreateOptions } from 'src/models/ton-connect-ui-create-options';
 import { PreferredWalletStorage, WalletInfoStorage } from 'src/storage';
-import { getSystemTheme, preloadImages, subscribeToThemeChange } from 'src/app/utils/web-api';
+import {
+    createMacrotask, createMacrotaskAsync,
+    getSystemTheme,
+    preloadImages,
+    subscribeToThemeChange
+} from 'src/app/utils/web-api';
 import { TonConnectUiOptions } from 'src/models/ton-connect-ui-options';
 import { setBorderRadius, setColors, setTheme } from 'src/app/state/theme-state';
 import { mergeOptions } from 'src/app/utils/options';
@@ -38,6 +43,7 @@ import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy
 import { SingleWalletModalManager } from 'src/managers/single-wallet-modal-manager';
 import { SingleWalletModal, SingleWalletModalState } from 'src/models/single-wallet-modal';
 import { TonConnectUITracker } from 'src/tracker/ton-connect-ui-tracker';
+import { tonConnectUiVersion } from 'src/constants/version';
 
 export class TonConnectUI {
     public static getWallets(): Promise<WalletInfo[]> {
@@ -197,7 +203,10 @@ export class TonConnectUI {
             );
         }
 
-        this.tracker = new TonConnectUITracker(options?.eventDispatcher);
+        this.tracker = new TonConnectUITracker({
+            eventDispatcher: options?.eventDispatcher,
+            tonConnectUiVersion: tonConnectUiVersion
+        });
 
         this.modal = new WalletsModalManager({
             connector: this.connector,
@@ -232,8 +241,8 @@ export class TonConnectUI {
         this.subscribeToWalletChange();
 
         if (options?.restoreConnection !== false) {
-            this.tracker.trackConnectionRestoringStarted();
-            this.connectionRestored = new Promise(async resolve => {
+            this.connectionRestored = createMacrotaskAsync(async () => {
+                this.tracker.trackConnectionRestoringStarted();
                 await this.connector.restoreConnection();
 
                 if (!this.connector.connected) {
@@ -243,7 +252,7 @@ export class TonConnectUI {
                     this.tracker.trackConnectionRestoringCompleted(this.wallet);
                 }
 
-                resolve(this.connector.connected);
+                return this.connector.connected;
             });
         }
 
@@ -654,7 +663,11 @@ export class TonConnectUI {
             const { transaction, signal } = options;
 
             if (signal.aborted) {
-                this.tracker.trackTransactionSigningFailed(this.wallet, transaction, 'Transaction was cancelled');
+                this.tracker.trackTransactionSigningFailed(
+                    this.wallet,
+                    transaction,
+                    'Transaction was cancelled'
+                );
                 return reject(new TonConnectUIError('Transaction was not sent'));
             }
 
@@ -667,9 +680,13 @@ export class TonConnectUI {
             const onErrorsHandler = (reason: TonConnectError): void => {
                 reject(reason);
             };
-            
+
             const onCanceledHandler = (): void => {
-                this.tracker.trackTransactionSigningFailed(this.wallet, transaction, 'Transaction was cancelled');
+                this.tracker.trackTransactionSigningFailed(
+                    this.wallet,
+                    transaction,
+                    'Transaction was cancelled'
+                );
                 reject(new TonConnectUIError('Transaction was not sent'));
             };
 
@@ -679,11 +696,11 @@ export class TonConnectUI {
                 .sendTransaction(transaction, { onRequestSent: onRequestSent, signal: signal })
                 .then(result => {
                     signal.removeEventListener('abort', onCanceledHandler);
-                    return onTransactionHandler(result)
+                    return onTransactionHandler(result);
                 })
                 .catch(reason => {
                     signal.removeEventListener('abort', onCanceledHandler);
-                    return onErrorsHandler(reason)
+                    return onErrorsHandler(reason);
                 });
         });
     }