feat: metrics wip

packages/web/src/app/hooks/metrics/index.ts

@@ -0,0 +1 @@
+export * from './useTrackEventOpen';

packages/web/src/app/hooks/metrics/useTrackEventOpen.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { trackEvent } from 'utils/analytics';
+import type { TrackEventType } from 'utils/analytics/types';
+
+// TODO: make somthing with types in TrackEventType
+export const useTrackEventOpen: TrackEventType = (event: string, _?: any) => {
+  const location = useLocation<{ fromPage?: string }>();
+
+  useEffect(() => {
+    trackEvent(event, { Last_Screen: location.state?.fromPage });
+  }, []);
+};

packages/web/src/components/common/AccountCreationFeeTooltip/AccountCreationFeeTooltip.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { styled } from '@linaria/react';
 import { theme } from '@p2p-wallet-web/ui';
 
+import { useTrackEventOpen } from 'app/hooks/metrics';
 import { Icon, Tooltip } from 'components/ui';
 
 const QustionIcon = styled(Icon)`
@@ -18,10 +19,14 @@ const TooltipContent = styled.div`
   max-width: 296px;
 `;
 
-export const AccountCreationFeeTooltip: FC = () => (
-  <Tooltip title={<QustionIcon name="question" />}>
-    <TooltipContent>
-      This value is calculated by subtracting the account creation fee from your balance
-    </TooltipContent>
-  </Tooltip>
-);
+export const AccountCreationFeeTooltip: FC = () => {
+  useTrackEventOpen('Send_Max_Info_Showed');
+
+  return (
+    <Tooltip title={<QustionIcon name="question" />}>
+      <TooltipContent>
+        This value is calculated by subtracting the account creation fee from your balance
+      </TooltipContent>
+    </Tooltip>
+  );
+};

packages/web/src/components/common/Layout/DesktopLayout/ColumnLeft/LeftNavMenu/LeftNavMenu.tsx

@@ -9,6 +9,7 @@ import { Feature } from 'flagged';
 import { Icon } from 'components/ui';
 import { appStorePath, playStorePath } from 'config/constants';
 import { FEATURE_NAV_MENU_BUY_BUTTON } from 'config/featureFlags';
+import { trackEvent } from 'utils/analytics';
 
 const Wrapper = styled.div`
   display: grid;
@@ -130,6 +131,14 @@ const Line = styled.hr`
 export const LeftNavMenu: FunctionComponent = () => {
   const location = useLocation();
 
+  const handleAppLinkClick = (store: 'app_store' | 'google_play') => () => {
+    if (store === 'app_store') {
+      trackEvent('App_Store_Pressed');
+    } else if (store === 'google_play') {
+      trackEvent('Google_Play_Pressed');
+    }
+  };
+
   return (
     <Wrapper>
       <NavLinkMenu
@@ -205,15 +214,27 @@ export const LeftNavMenu: FunctionComponent = () => {
       <Separator>
         <Line />
       </Separator>
-      <NavLinkMenu to={{ pathname: appStorePath }} as={Link} target="_blank" className="button">
+      <NavLinkMenu
+        to={{ pathname: appStorePath }}
+        as={Link}
+        target="_blank"
+        className="button"
+        onClick={handleAppLinkClick('app_store')}
+      >
         <NavButton>
           <IconBlock>
             <NavIcon name="app-store" />
           </IconBlock>
           <Name>App Store</Name>
         </NavButton>
       </NavLinkMenu>
-      <NavLinkMenu to={{ pathname: playStorePath }} as={Link} target="_blank" className="button">
+      <NavLinkMenu
+        to={{ pathname: playStorePath }}
+        as={Link}
+        target="_blank"
+        className="button"
+        onClick={handleAppLinkClick('google_play')}
+      >
         <NavButton>
           <IconBlock>
             <NavIcon name="google-play" />

packages/web/src/components/common/UsernameAddressWidget/UsernameAddressWidget.tsx

@@ -9,6 +9,7 @@ import Logo from 'assets/images/logo.png';
 import { AddressText } from 'components/common/AddressText';
 import { ToastManager } from 'components/common/ToastManager';
 import { Button } from 'components/ui';
+import { trackEvent } from 'utils/analytics';
 import { askClipboardWritePermission, setToClipboard } from 'utils/clipboard';
 
 const Wrapper = styled.div`
@@ -60,22 +61,36 @@ const ButtonsWrapper = styled.div`
 const copy = (value: string, text: string) => {
   try {
     void navigator.clipboard.writeText(value);
-    ToastManager.info(`${text} Copied!`);
+    ToastManager.info(`${text} copied!`);
   } catch (error) {
     console.error(error);
   }
 };
 
-const handleCopyClick = (value: string, text: string) => () => {
+type Type = 'receive';
+type CopyType = 'Username' | 'Address';
+
+const handleCopyClick = (type: Type, value: string, text: CopyType) => () => {
+  if (type === 'receive') {
+    switch (text) {
+      case 'Username':
+        trackEvent('Receive_Username_Copied');
+        break;
+      case 'Address':
+        trackEvent('Receive_Address_Copied');
+    }
+  }
+
   return copy(value, text);
 };
 
 type Props = {
+  type: Type;
   address: string;
   username?: string;
 };
 
-export const UsernameAddressWidget: FC<Props> = ({ address, username }) => {
+export const UsernameAddressWidget: FC<Props> = ({ type, address, username }) => {
   const isMobile = useIsMobile();
 
   const [isImageCopyAvailable, setIsImageCopyAvailable] = useState(false);
@@ -95,6 +110,8 @@ export const UsernameAddressWidget: FC<Props> = ({ address, username }) => {
     try {
       qrElement.toBlob((blob: Blob | null) => setToClipboard(blob));
       ToastManager.info('QR code Copied!');
+
+      trackEvent('Receive_QR_Saved');
     } catch (error) {
       console.error(error);
     }
@@ -118,7 +135,7 @@ export const UsernameAddressWidget: FC<Props> = ({ address, username }) => {
             small={!isMobile}
             medium={isMobile}
             hollow
-            onClick={handleCopyClick(username, 'Username')}
+            onClick={handleCopyClick(type, username, 'Username')}
           >
             Copy username
           </Button>
@@ -127,7 +144,7 @@ export const UsernameAddressWidget: FC<Props> = ({ address, username }) => {
           small={!isMobile}
           medium={isMobile}
           hollow
-          onClick={handleCopyClick(address, 'Address')}
+          onClick={handleCopyClick(type, address, 'Address')}
         >
           Copy address
         </Button>

packages/web/src/components/modals/ReceiveBitcoinModal/TopUp/TopUp.tsx

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router';
 
 import type { ModalPropsType } from 'app/contexts';
 import { Button, ButtonCancel } from 'components/ui';
+import { trackEvent } from 'utils/analytics';
 
 import { List, Row, Section, WrapperModal } from '../common/styled';
 
@@ -12,6 +13,8 @@ export const TopUp: FC<Props> = ({ close }) => {
   const history = useHistory();
 
   const handleTopUpClick = () => {
+    trackEvent('Receive_Topping_Up');
+
     close(false);
     history.push('/buy');
   };

packages/web/src/components/modals/TransactionConfirmModal/TransactionConfirmModal.tsx

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { styled } from '@linaria/react';
 import {
@@ -15,6 +15,7 @@ import { ErrorHint } from 'components/common/ErrorHint';
 import { PasswordInput } from 'components/common/PasswordInput';
 import { Button, ButtonCancel, Icon } from 'components/ui';
 import { Modal } from 'components/ui/Modal';
+import { trackEvent } from 'utils/analytics';
 
 import { Section } from './common/styled';
 import type { TransferParams } from './Send';
@@ -71,6 +72,12 @@ export const TransactionConfirmModal: FunctionComponent<
   const [password, setPassword] = useState('');
   const [hasError, setHasError] = useState(false);
 
+  useEffect(() => {
+    if (type === 'send') {
+      trackEvent('Send_Reviewing');
+    }
+  }, []);
+
   const validatePassword = async (password: string) => {
     try {
       await tryUnlockSeedAndMnemonic(password);
@@ -89,6 +96,10 @@ export const TransactionConfirmModal: FunctionComponent<
   };
 
   const handleConfirmClick = () => {
+    if (type === 'send') {
+      trackEvent('Send_Verification_Invoked');
+    }
+
     close(true);
   };
 

packages/web/src/components/modals/TransactionInfoModals/TransactionDetailsModal/TransactionDetailsModal.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import { styled } from '@linaria/react';
@@ -19,6 +19,7 @@ import dayjs from 'dayjs';
 
 import { AmountUSD } from 'components/common/AmountUSD';
 import { TokenAvatar } from 'components/common/TokenAvatar';
+import { trackEvent } from 'utils/analytics';
 import { getExplorerUrl } from 'utils/connection';
 import { shortAddress } from 'utils/tokens';
 
@@ -133,6 +134,7 @@ const FieldTitleWrapper = styled.div`
 
 const PaidByBadge = styled.div`
   padding: 1px 8px;
+
   color: #5887ff;
   font-weight: 600;
   font-size: 12px;
@@ -160,6 +162,16 @@ export const TransactionDetailsModal: FC<Props> = ({ signature, source, close })
     transaction?.details.amount,
   );
 
+  useEffect(() => {
+    const type = transaction?.details.type;
+
+    if (type === 'send') {
+      trackEvent('Send_Process_Shown');
+    } else if (type === 'swap') {
+      trackEvent('Swap_Process_Shown');
+    }
+  }, [transaction?.details.type]);
+
   // useEffect(() => {
   //   const mount = async () => {
   //     const trx = unwrapResult(await dispatch(getTransaction(signature)));

packages/web/src/components/pages/buy/BuyWidget/MoonpayForm/PurchaseDetails/PurchaseDetails.tsx

@@ -60,12 +60,7 @@ export const PurchaseDetails: FC = () => {
     ];
 
     return lists;
-  }, [
-    buyQuote?.feeAmount,
-    buyQuote?.networkFeeAmount,
-    buyQuote?.quoteCurrencyPrice,
-    buyQuote?.totalAmount,
-  ]);
+  }, [buyQuote]);
 
   return (
     <AccordionDetails

packages/web/src/components/pages/buy/BuyWidget/MoonpayIframe/MoonpayIframe.tsx

@@ -6,6 +6,7 @@ import { useWallet } from '@p2p-wallet-web/core';
 
 import type { MoonpayIframeParams } from 'app/contexts';
 import { buildParams, MOONPAY_API_KEY, MOONPAY_SIGNER_URL, useBuyState } from 'app/contexts';
+import { useTrackEventOpen } from 'app/hooks/metrics';
 
 import { WidgetPageBuy } from '../WidgetPageBuy';
 
@@ -22,6 +23,8 @@ const baseParams: MoonpayIframeParams = {
 };
 
 export const MoonpayIframe: FC = () => {
+  useTrackEventOpen('Buy_Provider_Step_Viewed');
+
   const { publicKey } = useWallet();
   const { buyQuote } = useBuyState();
 

packages/web/src/components/pages/receive/ReceiveWidget/NetworkSelect/NetworkSelect.tsx

@@ -12,6 +12,7 @@ import type { ReceiveSourceNetworkType } from 'app/contexts';
 import { ModalType, RECEIVE_SOURCE_NETWORKS, useModals, useReceiveState } from 'app/contexts';
 import { TokenAvatar } from 'components/common/TokenAvatar';
 import { Select, SelectItem } from 'components/ui';
+import { trackEvent } from 'utils/analytics';
 import { useRenNetwork } from 'utils/hooks/renBridge/useNetwork';
 
 const InfoWrapper = styled.div`
@@ -93,13 +94,21 @@ export const NetworkSelect: FC<Props> = () => {
       }
 
       setSourceNetwork(source);
+      trackEvent('Receive_Network_Changed', { Receive_Network: source });
     },
     [hasBTCTokenAccount, openModal, setSourceNetwork],
   );
 
+  const handleToggleClick = (isOpen: boolean) => {
+    if (isOpen) {
+      trackEvent('Receive_Changing_Network');
+    }
+  };
+
   return (
     <Select
       isLoading={isBTCTokenLoading}
+      onToggle={handleToggleClick}
       value={
         <>
           <TokenAvatar symbol={SYMBOLS[sourceNetwork]} size={44} />

packages/web/src/components/pages/receive/ReceiveWidget/ReceiveBitcoin/LockAndMintBtc/LockAndMintBtc.tsx

@@ -6,6 +6,7 @@ import { getRenNetworkDetails } from '@renproject/interfaces';
 import { LoaderBlock } from 'components/common/LoaderBlock';
 import { UsernameAddressWidget } from 'components/common/UsernameAddressWidget';
 import { Hint } from 'components/pages/receive/ReceiveWidget/ReceiveBitcoin/LockAndMintBtc/Hint';
+import { trackEvent } from 'utils/analytics';
 import { useRenNetwork } from 'utils/hooks/renBridge/useNetwork';
 import { useLockAndMintProvider } from 'utils/providers/LockAndMintProvider';
 
@@ -19,6 +20,10 @@ export const LockAndMintBtc: FC = () => {
     [network],
   );
 
+  const handleExplorerClick = () => {
+    trackEvent('Receive_Viewing_Explorer', { Receive_Network: 'bitcoin' });
+  };
+
   const lockAndMintProvider = useLockAndMintProvider();
 
   if (!lockAndMintProvider.isConfigInitialized) {
@@ -49,6 +54,7 @@ export const LockAndMintBtc: FC = () => {
           href={`https://btc.com/btc/address/${lockAndMintProvider.gatewayAddress}`}
           target="_blank"
           rel="noopener noreferrer noindex"
+          onClick={handleExplorerClick}
           className="button"
         >
           View in Bitcoin explorer

packages/web/src/components/pages/receive/ReceiveWidget/ReceiveSolana/ReceiveSolana.tsx

@@ -4,6 +4,7 @@ import { useWallet } from '@p2p-wallet-web/core';
 
 import { useUsername } from 'app/contexts';
 import { UsernameAddressWidget } from 'components/common/UsernameAddressWidget';
+import { trackEvent } from 'utils/analytics';
 import { getExplorerUrl } from 'utils/connection';
 
 import { BottomWrapper, Content, ExplorerA, ShareIcon } from '../common/styled';
@@ -16,10 +17,15 @@ export const ReceiveSolana: FC = () => {
     return null;
   }
 
+  const handleExplorerClick = () => {
+    trackEvent('Receive_Viewing_Explorer', { Receive_Network: 'solana' });
+  };
+
   return (
     <>
       <Content className="noTopPadding">
         <UsernameAddressWidget
+          type="receive"
           address={publicKey?.toBase58() || ''}
           username={username ? `${username}${domain}` : ''}
         />
@@ -29,6 +35,7 @@ export const ReceiveSolana: FC = () => {
           href={getExplorerUrl('address', publicKey.toBase58(), network)}
           target="_blank"
           rel="noopener noreferrer noindex"
+          onClick={handleExplorerClick}
           className="button"
         >
           <ShareIcon name="external" />