refactor: useTracking

src/analytics/track-event.js

@@ -12,18 +12,24 @@ export const TrackEvent = {
   TRANSFER: {
     SWAP_NETWORK: 'TRANSFER_MENU/swap_network',
     MAX_CLICK: 'TRANSFER_MENU/max_click',
-    TRANSFER_TO_L2_INITIATED: 'TRANSFER_MENU/transfer_to_l2_initiated',
-    TRANSFER_TO_L2_SUCCESS: 'TRANSFER_MENU/transfer_to_l2_success',
-    TRANSFER_TO_L2_REJECT: 'TRANSFER_MENU/transfer_to_l2_reject',
-    TRANSFER_TO_L2_ERROR: 'TRANSFER_MENU/transfer_to_l2_error',
-    TRANSFER_TO_L1_INITIATED: 'TRANSFER_MENU/transfer_to_l1_initiated',
-    TRANSFER_TO_L1_SUCCESS: 'TRANSFER_MENU/transfer_to_l1_success',
-    TRANSFER_TO_L1_REJECT: 'TRANSFER_MENU/transfer_to_l1_reject',
-    TRANSFER_TO_L1_ERROR: 'TRANSFER_MENU/transfer_to_l1_error',
-    COMPLETE_TRANSFER_TO_L1_INITIATED: 'TRANSFER_MENU/complete_transfer_to_l1_initiated',
-    COMPLETE_TRANSFER_TO_L1_SUCCESS: 'TRANSFER_MENU/complete_transfer_to_l1_success',
-    COMPLETE_TRANSFER_TO_L1_REJECT: 'TRANSFER_MENU/complete_transfer_to_l1_reject',
-    COMPLETE_TRANSFER_TO_L1_ERROR: 'TRANSFER_MENU/complete_transfer_to_l1_error'
+    TRANSFER_TO_L2: {
+      INITIATED: 'TRANSFER_MENU/transfer_to_l2_initiated',
+      SUCCESS: 'TRANSFER_MENU/transfer_to_l2_success',
+      ERROR: 'TRANSFER_MENU/transfer_to_l2_error',
+      REJECT: 'TRANSFER_MENU/transfer_to_l2_reject'
+    },
+    TRANSFER_TO_L1: {
+      INITIATED: 'TRANSFER_MENU/transfer_to_l1_initiated',
+      SUCCESS: 'TRANSFER_MENU/transfer_to_l1_success',
+      ERROR: 'TRANSFER_MENU/transfer_to_l1_error',
+      REJECT: 'TRANSFER_MENU/transfer_to_l1_reject'
+    },
+    COMPLETE_TRANSFER_TO_L1: {
+      INITIATED: 'TRANSFER_MENU/complete_transfer_to_l1_initiated',
+      SUCCESS: 'TRANSFER_MENU/complete_transfer_to_l1_success',
+      ERROR: 'TRANSFER_MENU/complete_transfer_to_l1_error',
+      REJECT: 'TRANSFER_MENU/complete_transfer_to_l1_reject'
+    }
   },
 
   /**

src/components/Containers/Header/Header.js

@@ -2,10 +2,10 @@ import React from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
 import useBreakpoint from 'use-breakpoint';
 
-import {track} from '../../../analytics';
+import {TrackEvent} from '../../../analytics';
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
 import {Breakpoint} from '../../../enums';
-import {useColors, useConstants, useEnvs, useTranslation} from '../../../hooks';
+import {useColors, useConstants, useEnvs, useTracking, useTranslation} from '../../../hooks';
 import {useLogin} from '../../../providers/AppProvider';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
@@ -16,6 +16,7 @@ import styles from './Header.module.scss';
 
 export const Header = () => {
   const {DISCORD_LINK_URL} = useConstants();
+  const [trackDiscordClick] = useTracking(TrackEvent.DISCORD_TAB_CLICK);
   const {env} = useEnvs();
   const {tabDiscordTxt, tabFaqTxt, tabTermsTxt, chainTxt} = useTranslation('containers.header');
   const navigate = useNavigate();
@@ -59,7 +60,7 @@ export const Header = () => {
   };
 
   const onTabDiscordClick = () => {
-    track(TrackEvent.DISCORD_TAB_CLICK);
+    trackDiscordClick();
     utils.browser.openInNewTab(DISCORD_LINK_URL);
   };
 

src/components/Features/Account/Account.js

@@ -1,8 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {track, TrackEvent} from '../../../analytics';
-import {useCompleteTransferToL1, useConstants, useEnvs, useTranslation} from '../../../hooks';
+import {
+  useAccountTracking,
+  useCompleteTransferToL1,
+  useConstants,
+  useEnvs,
+  useTranslation
+} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useTransfer} from '../../../providers/TransferProvider';
 import {useAccountTransfersLog} from '../../../providers/TransfersLogProvider';
@@ -21,6 +26,13 @@ import {TransferLog} from '../TransferLog/TransferLog';
 
 export const Account = ({transferId}) => {
   const {titleTxt} = useTranslation('menus.account');
+  const [
+    trackTxLinkClick,
+    trackAccountLinkClick,
+    trackViewTransfersLog,
+    trackCompleteTransferClick,
+    trackAddressCopied
+  ] = useAccountTracking();
   const {etherscanAccountUrl, voyagerAccountUrl} = useEnvs();
   const {ETHERSCAN, VOYAGER} = useConstants();
   const {showTransferMenu} = useMenu();
@@ -36,56 +48,40 @@ export const Account = ({transferId}) => {
             key={index}
             transfer={transfer}
             onCompleteTransferClick={() => onCompleteTransferClick(transfer)}
-            onTxClick={onTxClick}
+            onTxClick={trackTxLinkClick}
           />
         ))
       : null;
   };
 
-  const onTxClick = () => {
-    track(TrackEvent.ACCOUNT.TX_LINK_CLICK);
-  };
-
   const onCompleteTransferClick = transfer => {
-    track(TrackEvent.ACCOUNT.COMPLETE_TRANSFER_CLICK);
+    trackCompleteTransferClick();
     completeTransferToL1(transfer);
   };
 
-  const onAccountLinkClick = () => {
-    track(TrackEvent.ACCOUNT.ACCOUNT_LINK_CLICK);
-  };
-
-  const onShowTransfers = () => {
-    track(TrackEvent.ACCOUNT.VIEW_TRANSFERS_LOG);
-  };
-
-  const onAccountAddressClick = () => {
-    track(TrackEvent.ACCOUNT.ADDRESS_COPIED);
-  };
-
   return (
     <Menu>
       <div>
         <BackButton onClick={() => showTransferMenu()} />
         <MenuTitle text={utils.object.evaluate(titleTxt, {network: fromNetwork.name})} />
-        <AccountAddress address={account} onClick={onAccountAddressClick} />
+        <AccountAddress address={account} onClick={trackAddressCopied} />
         {isL1 && (
           <LinkButton
             text={ETHERSCAN}
             url={etherscanAccountUrl(account)}
-            onClick={onAccountLinkClick}
+            onClick={trackAccountLinkClick}
           />
         )}
         {isL2 && (
           <LinkButton
             text={VOYAGER}
             url={voyagerAccountUrl(account)}
-            onClick={onAccountLinkClick}
+            onClick={trackAccountLinkClick}
           />
         )}
         <TransferLogContainer
           transferIndex={utils.object.findIndexById(transfers, transferId)}
-          onShowTransfers={onShowTransfers}
+          onShowTransfers={trackViewTransfersLog}
         >
           {renderTransfers()}
         </TransferLogContainer>

src/components/Features/SelectToken/SelectToken.js

@@ -1,16 +1,16 @@
 import React, {useEffect, useState} from 'react';
 
-import {track, TrackEvent} from '../../../analytics';
 import L1Logo from '../../../assets/svg/tokens/eth.svg';
 import L2Logo from '../../../assets/svg/tokens/starknet.svg';
-import {useColors, useTranslation} from '../../../hooks';
+import {useColors, useTranslation, useSelectTokenTracking} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useTokens} from '../../../providers/TokensProvider';
 import {useTransfer} from '../../../providers/TransferProvider';
 import {BackButton, Menu, MenuTitle, RefreshIcon, SearchToken, SelectTokenList} from '../../UI';
 import styles from './SelectToken.module.scss';
 
 export const SelectToken = () => {
+  const [trackSelectToken] = useSelectTokenTracking();
   const {titleTxt} = useTranslation('menus.selectToken');
   const {tokens, updateTokenBalance} = useTokens();
   const {colorBeta} = useColors();
@@ -25,7 +25,7 @@ export const SelectToken = () => {
 
   const onTokenSelect = tokenData => {
     const {symbol} = tokenData;
-    track(TrackEvent.SELECT_TOKEN.TOKEN_SELECTED, {symbol});
+    trackSelectToken(symbol);
     selectToken(symbol);
     showTransferMenu();
   };

src/components/Features/Transfer/Transfer.js

@@ -1,8 +1,13 @@
 import React, {useEffect, useState} from 'react';
 
-import {track, TrackEvent} from '../../../analytics';
 import {ActionType, NetworkType} from '../../../enums';
-import {useMaxDeposit, useTransferToL1, useTransferToL2, useTranslation} from '../../../hooks';
+import {
+  useMaxDeposit,
+  useTransferToL1,
+  useTransferToL2,
+  useTransferTracking,
+  useTranslation
+} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider';
 import {useAmount, useIsL1, useIsL2, useTransfer} from '../../../providers/TransferProvider';
@@ -26,6 +31,7 @@ export const Transfer = () => {
     tooManyDigitsErrorMsg,
     negativeValueErrorMsg
   } = useTranslation('menus.transfer');
+  const [trackMaxClick, trackSwapNetworks] = useTransferTracking();
   const [isL1, swapToL1] = useIsL1();
   const [isL2, swapToL2] = useIsL2();
   const [amount, setAmount] = useAmount();
@@ -82,7 +88,7 @@ export const Transfer = () => {
 
   const onMaxClick = () => {
     try {
-      track(TrackEvent.TRANSFER.MAX_CLICK);
+      trackMaxClick();
       setAmount(String(Math.min(selectedToken.balance, isL1 ? Number(maxDeposit) : Infinity)));
     } catch (ex) {
       setAmount(selectedToken.balance);
@@ -94,7 +100,7 @@ export const Transfer = () => {
   };
 
   const onSwapClick = () => {
-    track(TrackEvent.TRANSFER.SWAP_NETWORK);
+    trackSwapNetworks();
     isL2 ? swapToL1() : swapToL2();
   };
 

src/hooks/index.js

@@ -16,3 +16,4 @@ export * from './useTransferProgress';
 export * from './useTokenConstant';
 export * from './useConstants';
 export * from './useTranslation';
+export * from './useTracking';

src/hooks/useTracking.js

@@ -0,0 +1,69 @@
+import {useCallback} from 'react';
+
+import {track, TrackEvent} from '../analytics';
+import {MenuType} from '../enums';
+
+export const useTracking = events => {
+  if (typeof events === 'string') {
+    events = [events];
+  }
+
+  const trackEvent = useCallback(event => data => track(event, data), []);
+
+  return events.map(trackEvent, [events]);
+};
+
+export const useMenuTracking = () => {
+  const [trackAccountMenu, trackTransferMenu, trackSelectTokenMenu] = useTracking([
+    TrackEvent.ACCOUNT_MENU,
+    TrackEvent.TRANSFER_MENU,
+    TrackEvent.SELECT_TOKEN_MENU
+  ]);
+
+  return useCallback(menu => {
+    switch (menu) {
+      case MenuType.ACCOUNT:
+        trackAccountMenu();
+        break;
+      case MenuType.SELECT_TOKEN:
+        trackSelectTokenMenu();
+        break;
+      case MenuType.TRANSFER:
+      default:
+        trackTransferMenu();
+        break;
+    }
+  }, []);
+};
+
+export const useLoginTracking = () => {
+  return useTracking([TrackEvent.LOGIN_SCREEN, ...Object.values(TrackEvent.LOGIN)]);
+};
+
+export const useTermsTracking = () => {
+  return useTracking([TrackEvent.TERMS_SCREEN, ...Object.values(TrackEvent.TERMS)]);
+};
+
+export const useTransferTracking = () => {
+  return useTracking([TrackEvent.TRANSFER.MAX_CLICK, TrackEvent.TRANSFER.SWAP_NETWORK]);
+};
+
+export const useTransferToL1Tracking = () => {
+  return useTracking([...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L1)]);
+};
+
+export const useTransferToL2Tracking = () => {
+  return useTracking([...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L2)]);
+};
+
+export const useCompleteTransferToL1Tracking = () => {
+  return useTracking([...Object.values(TrackEvent.TRANSFER.COMPLETE_TRANSFER_TO_L1)]);
+};
+
+export const useAccountTracking = () => {
+  return useTracking([...Object.values(TrackEvent.ACCOUNT)]);
+};
+
+export const useSelectTokenTracking = () => {
+  return useTracking([...Object.values(TrackEvent.SELECT_TOKEN)]);
+};