Merge branch 'feature/tracking'

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tonkeeper/desktop",
-    "version": "3.4.8",
+    "version": "3.4.9",
     "description": "Your desktop wallet on The Open Network",
     "main": ".webpack/main",
     "repository": {

apps/desktop/src/app/App.tsx

@@ -27,10 +27,7 @@ import {
 } from '@tonkeeper/uikit/dist/components/transfer/FavoriteNotification';
 import SendActionNotification from '@tonkeeper/uikit/dist/components/transfer/SendNotifications';
 import SendNftNotification from '@tonkeeper/uikit/dist/components/transfer/nft/SendNftNotification';
-import {
-    AmplitudeAnalyticsContext,
-    useAmplitudeAnalytics
-} from '@tonkeeper/uikit/dist/hooks/amplitude';
+import { AmplitudeAnalyticsContext, useTrackLocation } from '@tonkeeper/uikit/dist/hooks/amplitude';
 import { AppContext, WalletStateContext } from '@tonkeeper/uikit/dist/hooks/appContext';
 import {
     AfterImportAction,
@@ -60,7 +57,7 @@ import { useTranslation } from 'react-i18next';
 import { MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { DesktopAppSdk } from '../libs/appSdk';
-import { useAppHeight, useAppWidth } from '../libs/hooks';
+import { useAnalytics, useAppHeight, useAppWidth } from '../libs/hooks';
 import { DeepLinkSubscription } from './components/DeepLink';
 import { TonConnectSubscription } from './components/TonConnectSubscription';
 
@@ -142,7 +139,7 @@ export const Loader: FC = () => {
     const navigate = useNavigate();
     useAppHeight();
 
-    const enable = useAmplitudeAnalytics('Desktop', account, activeWallet);
+    const { data: tracker } = useAnalytics(account, activeWallet);
 
     useEffect(() => {
         if (
@@ -175,7 +172,7 @@ export const Loader: FC = () => {
     };
 
     return (
-        <AmplitudeAnalyticsContext.Provider value={enable}>
+        <AmplitudeAnalyticsContext.Provider value={tracker}>
             <OnImportAction.Provider value={navigate}>
                 <AfterImportAction.Provider
                     value={() => navigate(AppRoute.home, { replace: true })}
@@ -198,6 +195,7 @@ export const Content: FC<{
     const location = useLocation();
     useWindowsScroll();
     useAppWidth();
+    useTrackLocation();
 
     if (lock) {
         return (

apps/desktop/src/backgroud.d.ts

@@ -1,4 +1,7 @@
 interface BackgroundApi {
+    platform: () => string;
+    arch: () => string;
+    version: () => string;
     node: () => string;
     chrome: () => string;
     electron: () => string;

apps/desktop/src/index.ts

@@ -1,5 +1,5 @@
 import { delay } from '@tonkeeper/core/dist/utils/common';
-import { BrowserWindow, app, ipcMain, shell } from 'electron';
+import { BrowserWindow, app, ipcMain } from 'electron';
 import isDev from 'electron-is-dev';
 import log from 'electron-log/main';
 import path from 'path';
@@ -80,7 +80,7 @@ const createWindow = (): void => {
         icon: path.join(process.cwd(), 'public', 'icon.icns'),
         width: isDev ? 1100 : 450,
         height: 700,
-        resizable: false,
+        resizable: isDev,
         webPreferences: {
             zoomFactor: 0.8,
             preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
@@ -138,10 +138,3 @@ app.on('activate', () => {
 // code. You can also put them in separate files and import them here.
 
 updateElectronApp({ logger: log });
-
-// Handle window controls via IPC
-ipcMain.on('shell:open', () => {
-    const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked');
-    const pagePath = path.join('file://', pageDirectory, 'index.html');
-    shell.openExternal(pagePath);
-});

apps/desktop/src/libs/hooks.ts

@@ -1,4 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { AccountState } from '@tonkeeper/core/dist/entries/account';
+import { WalletState } from '@tonkeeper/core/dist/entries/wallet';
 import { throttle } from '@tonkeeper/core/dist/utils/common';
+import { Analytics, toWalletType } from '@tonkeeper/uikit/dist/hooks/analytics';
+import { Gtag } from '@tonkeeper/uikit/dist/hooks/analytics/gtag';
+import { QueryKey } from '@tonkeeper/uikit/dist/libs/queryKey';
 import { useEffect } from 'react';
 
 export const useAppHeight = () => {
@@ -35,3 +41,25 @@ export const useAppWidth = () => {
         };
     }, []);
 };
+
+declare const REACT_APP_MEASUREMENT_ID: string;
+
+export const useAnalytics = (account?: AccountState, wallet?: WalletState | null) => {
+    return useQuery<Analytics>(
+        [QueryKey.analytics],
+        async () => {
+            const tracker = new Gtag(REACT_APP_MEASUREMENT_ID);
+            tracker.init(
+                'Desktop',
+                toWalletType(wallet),
+                account,
+                wallet,
+                window.backgroundApi.version(),
+                `${window.backgroundApi.platform()}-${window.backgroundApi.arch()}`
+            );
+
+            return tracker;
+        },
+        { enabled: account != null }
+    );
+};

apps/desktop/src/preload.ts

@@ -2,10 +2,13 @@
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 
 import { SendTransactionAppRequest } from '@tonkeeper/uikit/dist/components/connect/connectHook';
-import { contextBridge, ipcRenderer } from 'electron';
+import { app, contextBridge, ipcRenderer } from 'electron';
 import { Message } from './libs/message';
 
 contextBridge.exposeInMainWorld('backgroundApi', {
+    platform: () => process.platform,
+    arch: () => process.arch,
+    version: () => app.getVersion(),
     node: () => process.versions.node,
     chrome: () => process.versions.chrome,
     electron: () => process.versions.electron,

apps/desktop/webpack.plugins.ts

@@ -1,11 +1,17 @@
+import dotenv from 'dotenv';
 import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-const webpack = require('webpack');
+import webpack from 'webpack';
+
+const { parsed } = dotenv.config();
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 export const plugins = [
     new ForkTsCheckerWebpackPlugin({
         logger: 'webpack-infrastructure'
+    }),
+    new webpack.DefinePlugin({
+        REACT_APP_MEASUREMENT_ID: JSON.stringify(parsed!.REACT_APP_MEASUREMENT_ID)
     })
 ];

apps/extension/src/App.tsx

@@ -21,10 +21,7 @@ import {
     AddFavoriteNotification,
     EditFavoriteNotification
 } from '@tonkeeper/uikit/dist/components/transfer/FavoriteNotification';
-import {
-    AmplitudeAnalyticsContext,
-    useAmplitudeAnalytics
-} from '@tonkeeper/uikit/dist/hooks/amplitude';
+import { AmplitudeAnalyticsContext, useTrackLocation } from '@tonkeeper/uikit/dist/hooks/amplitude';
 import {
     AppContext,
     IAppContext,
@@ -54,8 +51,8 @@ import styled, { css } from 'styled-components';
 import browser from 'webextension-polyfill';
 import { Notifications } from './components/Notifications';
 import { connectToBackground } from './event';
-import { ExtensionAppSdk, extensionType } from './libs/appSdk';
-import { useAppWidth } from './libs/hoolks';
+import { ExtensionAppSdk } from './libs/appSdk';
+import { useAnalytics, useAppWidth } from './libs/hoolks';
 
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
@@ -174,7 +171,7 @@ export const Loader: FC = React.memo(() => {
     );
     const { data: config } = useTonenpointConfig(tonendpoint);
 
-    const enable = useAmplitudeAnalytics(extensionType, account, activeWallet);
+    const { data: tracker } = useAnalytics(sdk.storage, account, activeWallet);
 
     if (!account || !auth || !config || lock === undefined) {
         return (
@@ -201,7 +198,7 @@ export const Loader: FC = React.memo(() => {
     };
 
     return (
-        <AmplitudeAnalyticsContext.Provider value={enable}>
+        <AmplitudeAnalyticsContext.Provider value={tracker}>
             <OnImportAction.Provider value={sdk.openExtensionInBrowser}>
                 <AfterImportAction.Provider value={sdk.closeExtensionInBrowser}>
                     <AppContext.Provider value={context}>
@@ -236,6 +233,7 @@ export const Content: FC<{
 
     useWindowsScroll(!pageView);
     useAppWidth();
+    useTrackLocation();
 
     if (lock) {
         return (
@@ -254,7 +252,7 @@ export const Content: FC<{
                             path={any(AppRoute.import)}
                             element={
                                 <InitializeContainer fullHeight={false}>
-                                    <ImportRouter />
+                                    <ImportRouter listOfAuth={[]} />
                                 </InitializeContainer>
                             }
                         />

apps/extension/src/libs/hoolks.ts

@@ -1,22 +1,56 @@
+import { useQuery } from '@tanstack/react-query';
+import { IStorage } from '@tonkeeper/core/dist/Storage';
+import { AccountState } from '@tonkeeper/core/dist/entries/account';
+import { WalletState } from '@tonkeeper/core/dist/entries/wallet';
 import { throttle } from '@tonkeeper/core/dist/utils/common';
+import { Analytics, AnalyticsGroup, toWalletType } from '@tonkeeper/uikit/dist/hooks/analytics';
+import { Amplitude } from '@tonkeeper/uikit/dist/hooks/analytics/amplitude';
+import { GoogleAnalytics4 } from '@tonkeeper/uikit/dist/hooks/analytics/google';
+import { QueryKey } from '@tonkeeper/uikit/dist/libs/queryKey';
 import { useEffect } from 'react';
+import { extensionType } from './appSdk';
 
 export const useAppWidth = () => {
-  useEffect(() => {
-    const appWidth = throttle(() => {
-      const doc = document.documentElement;
-      const app = (
-        document.getElementById('root') as HTMLDivElement
-      ).childNodes.item(0) as HTMLDivElement;
+    useEffect(() => {
+        const appWidth = throttle(() => {
+            const doc = document.documentElement;
+            const app = (document.getElementById('root') as HTMLDivElement).childNodes.item(
+                0
+            ) as HTMLDivElement;
 
-      doc.style.setProperty('--app-width', `${app.clientWidth}px`);
-    }, 50);
-    window.addEventListener('resize', appWidth);
+            doc.style.setProperty('--app-width', `${app.clientWidth}px`);
+        }, 50);
+        window.addEventListener('resize', appWidth);
 
-    appWidth();
+        appWidth();
 
-    return () => {
-      window.removeEventListener('resize', appWidth);
-    };
-  }, []);
+        return () => {
+            window.removeEventListener('resize', appWidth);
+        };
+    }, []);
+};
+
+export const useAnalytics = (
+    storage: IStorage,
+    account?: AccountState,
+    wallet?: WalletState | null
+) => {
+    return useQuery<Analytics>(
+        [QueryKey.analytics],
+        async () => {
+            const tracker = new AnalyticsGroup(
+                new Amplitude(process.env.REACT_APP_AMPLITUDE!),
+                new GoogleAnalytics4(
+                    process.env.REACT_APP_MEASUREMENT_ID!,
+                    process.env.REACT_APP_GA_SECRET!,
+                    storage
+                )
+            );
+
+            tracker.init(extensionType ?? 'Extension', toWalletType(wallet), account, wallet);
+
+            return tracker;
+        },
+        { enabled: account != null }
+    );
 };

apps/twa/package.json

@@ -4,6 +4,7 @@
     "author": "Nikita Kuznetsov <[email protected]>",
     "description": "Your telegram mini app wallet on The Open Network",
     "dependencies": {
+        "@tanstack/react-query": "4.3.4",
         "@tonkeeper/core": "0.1.0",
         "@tonkeeper/locales": "0.1.0",
         "@tonkeeper/uikit": "0.1.0",

apps/twa/src/App.tsx

@@ -33,10 +33,7 @@ import { AppRoute, any } from '@tonkeeper/uikit/dist/libs/routes';
 import { Unlock } from '@tonkeeper/uikit/dist/pages/home/Unlock';
 
 import { IAppSdk } from '@tonkeeper/core/dist/AppSdk';
-import {
-    AmplitudeAnalyticsContext,
-    useAmplitudeAnalytics
-} from '@tonkeeper/uikit/dist/hooks/amplitude';
+import { AmplitudeAnalyticsContext, useTrackLocation } from '@tonkeeper/uikit/dist/hooks/amplitude';
 import { useLock } from '@tonkeeper/uikit/dist/hooks/lock';
 import { UnlockNotification } from '@tonkeeper/uikit/dist/pages/home/UnlockNotification';
 import { useAccountState } from '@tonkeeper/uikit/dist/state/account';
@@ -59,7 +56,7 @@ import { TwaQrScanner } from './components/TwaQrScanner';
 import { TwaNftNotification } from './components/nft/NftNotification';
 import { TwaSendNotification } from './components/transfer/SendNotifications';
 import { TwaAppSdk } from './libs/appSdk';
-import { useTwaAppViewport } from './libs/hooks';
+import { useAnalytics, useTwaAppViewport } from './libs/hooks';
 
 const Initialize = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import/Initialize'));
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
@@ -218,7 +215,7 @@ export const Loader: FC<{ sdk: IAppSdk }> = ({ sdk }) => {
     const { data: config } = useTonenpointConfig(tonendpoint);
 
     const navigate = useNavigate();
-    const enable = useAmplitudeAnalytics('Twa', account, activeWallet);
+    const { data: tracker } = useAnalytics(account, activeWallet);
 
     if (auth === undefined || account === undefined || config === undefined || lock === undefined) {
         return <Loading />;
@@ -242,7 +239,7 @@ export const Loader: FC<{ sdk: IAppSdk }> = ({ sdk }) => {
     };
 
     return (
-        <AmplitudeAnalyticsContext.Provider value={enable}>
+        <AmplitudeAnalyticsContext.Provider value={tracker}>
             <OnImportAction.Provider value={navigate}>
                 <AfterImportAction.Provider
                     value={() => navigate(AppRoute.home, { replace: true })}
@@ -293,7 +290,7 @@ const InitPages = () => {
         <InitWrapper>
             <Suspense fallback={<Loading />}>
                 <Routes>
-                    <Route path={any(AppRoute.import)} element={<ImportRouter />} />
+                    <Route path={any(AppRoute.import)} element={<ImportRouter listOfAuth={[]} />} />
                     <Route path="*" element={<Initialize />} />
                 </Routes>
             </Suspense>
@@ -308,6 +305,7 @@ const Content: FC<{
 }> = ({ activeWallet, lock, showQrScan }) => {
     const location = useLocation();
     useWindowsScroll();
+    useTrackLocation();
 
     if (lock) {
         return (

apps/twa/src/libs/hooks.ts

@@ -1,4 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { AccountState } from '@tonkeeper/core/dist/entries/account';
+import { WalletState } from '@tonkeeper/core/dist/entries/wallet';
+import { Analytics, toWalletType } from '@tonkeeper/uikit/dist/hooks/analytics';
+import { Gtag } from '@tonkeeper/uikit/dist/hooks/analytics/gtag';
 import { useAppSdk } from '@tonkeeper/uikit/dist/hooks/appSdk';
+import { QueryKey } from '@tonkeeper/uikit/dist/libs/queryKey';
 import { Viewport } from '@twa.js/sdk';
 import { useMainButton, useViewport } from '@twa.js/sdk-react';
 import React, { useEffect } from 'react';
@@ -64,3 +70,17 @@ export const useTwaAppViewport = (setAppHeight: boolean) => {
         };
     }, [sdk, viewport]);
 };
+
+export const useAnalytics = (account?: AccountState, wallet?: WalletState | null) => {
+    return useQuery<Analytics>(
+        [QueryKey.analytics],
+        async () => {
+            const tracker = new Gtag(process.env.REACT_APP_MEASUREMENT_ID!);
+
+            tracker.init('Twa', toWalletType(wallet), account, wallet);
+
+            return tracker;
+        },
+        { enabled: account != null }
+    );
+};

apps/web/package.json

@@ -4,6 +4,8 @@
     "author": "Nikita Kuznetsov <[email protected]>",
     "description": "Your web wallet on The Open Network",
     "dependencies": {
+        "@amplitude/analytics-browser": "^2.1.0",
+        "@tanstack/react-query": "4.3.4",
         "@tonkeeper/core": "0.1.0",
         "@tonkeeper/locales": "0.1.0",
         "@tonkeeper/uikit": "0.1.0",