Merge pull request #20 from TONSolutions/te-662

feat(ton-connect): add ton connect events

README.md

@@ -34,9 +34,9 @@ Start capturing valuable insights with Telemetree and make data-driven decisions
 Consider visiting our resources for more info about the state of the Telegram Mini Apps ecosystem and Telegram analytics.
 
 - [Website](https://www.telemetree.io/)
-- [Twitter](https://x.com/telemetree_HQ) 
+- [Twitter](https://x.com/telemetree_HQ)
 - [Telegram channel](https://t.me/telemetree_en)
-- [LinkedIn](https://linkedin.com/company/telemetree) 
+- [LinkedIn](https://linkedin.com/company/telemetree)
 - [Medium](https://medium.com/@telemetree)
 - [Documentation](https://docs.telemetree.io/)
 
@@ -83,6 +83,9 @@ builder.track('transfer', {
   method: 'TON',
 });
 ```
+
+In order to track TON related operations, such as wallet connections, signed transactions etc, you should use `@tonconnect/ui` or `@tonconnect/ui-react`. When these libs are detected, Telemetree will automatically log on-chain events.
+
 ## Other SDKs
 Telemetree SDKs are available for various frameworks and environments, making it easy to incorporate powerful analytics into any Telegram Mini App.
 - React SDK: https://github.com/TONSolutions/telemetree-react

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonsolutions/telemetree-react",
-  "version": "1.2.0",
+  "version": "1.2.5",
   "main": "./lib/index.сjs",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",
@@ -37,7 +37,7 @@
   "files": [
     "lib"
   ],
-  "author": "strd0x",
+  "author": "Vlad Arbatov",
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
@@ -58,13 +58,16 @@
     "vite-plugin-dts": "^3.6.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0"
+    "react": ">=17.0.0",
+    "@tonconnect/ui-react": "^2.0.9",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesOptional": {
+    "@tonconnect/ui-react": true
   },
   "dependencies": {
-    "@testing-library/react": "^16.0.0",
     "crypto-js": "^4.2.0",
-    "jsencrypt": "^3.3.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "jsencrypt": "^3.3.2"
   },
   "repository": {
     "type": "git",

src/builders/event.builder.ts

@@ -160,6 +160,9 @@ export class EventBuilder implements IEventBuilder {
     eventProperties: Record<string, any>,
   ): BaseEvent {
     const config = getConfig();
+    // Ensure wallet address is properly extracted from properties
+    const walletAddress = eventProperties.wallet || eventProperties.address;
+
     return createEvent(
       this.appName,
       eventName,
@@ -172,7 +175,7 @@ export class EventBuilder implements IEventBuilder {
       this.data.chat_instance || '0',
       getCurrentUTCTimestamp(),
       eventName.startsWith(config.defaultSystemEventPrefix),
-      eventProperties.wallet,
+      walletAddress, // Modified to handle both wallet and address properties
       this.sessionIdentifier,
     );
   }
@@ -225,22 +228,34 @@ export class EventBuilder implements IEventBuilder {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
+      // Enhanced logging with clearer transaction details
+      const params = event.eventDetails.params;
       Logger.info('Event processed successfully', {
         eventType: event.eventType,
+        details: {
+          ...params,
+          // Add transaction summary if messages exist
+          ...(params.messages?.[0] && {
+            transaction: {
+              from: params.from,
+              to: params.messages[0].address,
+              amount: params.messages[0].amount,
+            },
+          }),
+          // Keep original messages array for full details
+          timestamp: event.timestamp,
+        },
       });
     } catch (error) {
-      if (error instanceof Error) {
-        Logger.error('Error processing event', {
-          error: error.message,
-          stack: error.stack,
-          eventType: event.eventType,
-        });
-      } else {
-        Logger.error('Unknown error processing event', {
-          error,
-          eventType: event.eventType,
-        });
-      }
+      Logger.error('Error processing event', {
+        error: error instanceof Error ? error.message : 'Unknown error',
+        stack: error instanceof Error ? error.stack : undefined,
+        eventType: event.eventType,
+        details: {
+          params: event.eventDetails?.params,
+          timestamp: event.eventDetails?.params?.timestamp || event.timestamp,
+        },
+      });
     }
   }
 }

src/components/TwaAnalyticsProvider.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   createContext,
   FunctionComponent,
   memo,
@@ -8,10 +8,11 @@ import {
 } from 'react';
 import { EventBuilder } from '../builders';
 import { loadTelegramWebAppData, webViewHandler } from '../telegram/telegram';
-import { TonConnectStorageData } from '../models/tonconnect-storage-data';
 import { EventType } from '../enum/event-type.enum';
 import { getConfig } from '../config';
 import { Telegram } from '../telegram';
+import { TonConnectObserver } from '../observers/ton-connect.observer';
+import { Logger } from '../utils/logger';
 
 declare global {
   interface Window {
@@ -23,6 +24,10 @@ declare global {
   }
 }
 
+export const TwaAnalyticsProviderContext = createContext<EventBuilder | null>(
+  null,
+);
+
 export type TwaAnalyticsProviderOptions = {
   projectId: string;
   apiKey: string;
@@ -33,15 +38,6 @@ export type TwaAnalyticsProviderProps = {
   children: ReactNode;
 } & TwaAnalyticsProviderOptions;
 
-export const TwaAnalyticsProviderContext = createContext<EventBuilder | null>(
-  null,
-);
-
-const WalletConnectedKey = 'walletConnected';
-
-const TonConnectLocalStorageKey = 'ton-connect-storage_bridge-connection';
-const TonConnectProviderNameLocalStorageKey = 'ton-connect-ui_preferred-wallet';
-
 export type TwaAnalyticsConfig = {
   host: string;
   auto_capture: boolean;
@@ -83,6 +79,24 @@ const TwaAnalyticsProvider: FunctionComponent<TwaAnalyticsProviderProps> = ({
     );
   }, []);
 
+  // Initialize TON Connect observer with await
+  useEffect(() => {
+    let observer: TonConnectObserver | null = null;
+
+    try {
+      observer = new TonConnectObserver(eventBuilder);
+      Logger.info('TON Connect observer initialized successfully');
+    } catch (error) {
+      Logger.error('Failed to initialize TON Connect observer', {
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+
+    return () => {
+      observer?.destroy();
+    };
+  }, [eventBuilder]);
+
   useEffect(() => {
     webViewHandler?.onEvent('main_button_pressed', (event: string) => {
       eventBuilder.track(EventType.MainButtonPressed, {});
@@ -391,4 +405,5 @@ const TwaAnalyticsProvider: FunctionComponent<TwaAnalyticsProviderProps> = ({
   );
 };
 
-export default memo(TwaAnalyticsProvider);
+// Export the component as default
+export default TwaAnalyticsProvider;

src/components/index.ts

@@ -1,6 +1,7 @@
+export { default as TwaAnalyticsProvider } from './TwaAnalyticsProvider';
 export {
-  default as TwaAnalyticsProvider,
-  type TwaAnalyticsProviderOptions,
-  type TwaAnalyticsProviderProps,
   TwaAnalyticsProviderContext,
+  type TwaAnalyticsProviderProps,
+  type TwaAnalyticsProviderOptions,
+  type TwaAnalyticsConfig,
 } from './TwaAnalyticsProvider';

src/enum/event-type.enum.ts

@@ -38,4 +38,31 @@ export enum EventType {
   ShareToStory = 'Story shared',
   SessionStart = 'Session start',
   SessionEnd = 'Session end',
+
+  // Wallet events
+  WalletConnectStarted = 'Wallet connect started',
+  WalletConnected = 'Wallet connected',
+  WalletConnectError = 'Wallet connect error',
+  WalletConnectionRestoringStarted = 'Wallet connection restoring started',
+  WalletConnectionRestored = 'Wallet connection restored',
+  WalletConnectionRestoreError = 'Wallet connection restore error',
+  WalletDisconnected = 'Wallet disconnected',
+
+  // Transaction events
+  TransactionSentForSignature = 'Transaction sent for signature',
+  TransactionSigned = 'Transaction signed',
+  TransactionSigningFailed = 'Transaction signing failed',
+}
+
+export enum TonConnectEvent {
+  WalletConnectStarted = 'connection-started',
+  WalletConnectSuccess = 'connection-completed',
+  WalletConnectError = 'connection-error',
+  ConnectionRestoringStarted = 'connection-restoring-started',
+  ConnectionRestoringSuccess = 'connection-restoring-completed',
+  ConnectionRestoringError = 'connection-restoring-error',
+  WalletDisconnect = 'disconnection',
+  TransactionSentForSignature = 'transaction-sent-for-signature',
+  TransactionSigned = 'transaction-signed',
+  TransactionSigningFailed = 'transaction-signing-failed',
 }