exactly · sebipap · Nov 28, 2023 · Nov 27, 2023
diff --git a/components/GetEXA/ChainSelector.tsx b/components/GetEXA/ChainSelector.tsx
@@ -6,6 +6,7 @@ import DropdownMenu from 'components/DropdownMenu';
 import { useGetEXA } from 'contexts/GetEXAContext';
 import Image from 'next/image';
 import { Chain } from 'types/Bridge';
+import { track } from 'utils/segment';
 type AssetOptionProps = {
   chain?: Chain;
   option?: boolean;
@@ -57,8 +58,14 @@ const ChainSelector = ({ disabled }: { disabled?: boolean }) => {
     (value: string) => {
       const c = chains?.find(({ name }) => value === name);
       if (c) onChainChange(c);
+      track('Option Selected', {
+        location: 'Get EXA',
+        name: 'chain',
+        value,
+        prevValue: chain?.name,
+      });
     },
-    [chains, onChainChange],
+    [chain, chains, onChainChange],
   );
 
   if (!chains) return <Skeleton width={100} />;

diff --git a/components/GetEXA/ModalWrapper.tsx b/components/GetEXA/ModalWrapper.tsx
@@ -8,6 +8,7 @@ import { Box, Drawer, IconButton, Typography } from '@mui/material';
 import GetEXA from '.';
 import { useModal } from '../../contexts/ModalContext';
 import { GetEXAProvider } from 'contexts/GetEXAContext';
+import { track } from 'utils/segment';
 
 export default function ModalWrapper() {
   const { isOpen, close } = useModal('get-exa');
@@ -46,6 +47,13 @@ export default function ModalWrapper() {
                   style={{
                     textDecoration: 'underline',
                   }}
+                  onClick={() =>
+                    track('Button Clicked', {
+                      location: 'Get EXA ',
+                      name: 'governance',
+                      href: '/governance',
+                    })
+                  }
                 >
                   {t('Governance')}
                 </Link>

diff --git a/components/GetEXA/ReviewRoute.tsx b/components/GetEXA/ReviewRoute.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 
 import { Box, Typography, Table, TableBody, TableRow, TableCell, Avatar, useTheme, Skeleton } from '@mui/material';
 import { optimism } from 'wagmi/chains';
@@ -12,6 +12,7 @@ import { formatEther } from 'viem';
 import ModalAlert from 'components/common/modal/ModalAlert';
 import { ArrowForward } from '@mui/icons-material';
 import { Protocol, Route } from '../../types/Bridge';
+import { track } from 'utils/segment';
 
 export const RouteTable = ({
   route,
@@ -124,6 +125,21 @@ const ReviewRoute = () => {
   const { t } = useTranslation();
   const { chain, asset, route, qtyOut, qtyOutUSD, qtyIn, txStep, protocol, txError, approve, socketSubmit } =
     useGetEXA();
+  const handleConfirmClick = useCallback(() => {
+    socketSubmit();
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'confirm',
+    });
+  }, [socketSubmit]);
+
+  const handleApproveClick = useCallback(() => {
+    approve();
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'approve',
+    });
+  }, [approve]);
 
   if (!asset?.logoURI || !chain || !qtyOut || !protocol) {
     return;
@@ -200,7 +216,7 @@ const ReviewRoute = () => {
       {txStep === TXStep.CONFIRM || txStep === TXStep.CONFIRM_PENDING ? (
         <LoadingButton
           variant="contained"
-          onClick={socketSubmit}
+          onClick={handleConfirmClick}
           loading={txStep === TXStep.CONFIRM_PENDING}
           data-testid="get-exa-submit"
         >
@@ -209,7 +225,7 @@ const ReviewRoute = () => {
       ) : (
         <LoadingButton
           fullWidth
-          onClick={approve}
+          onClick={handleApproveClick}
           variant="contained"
           loading={txStep === TXStep.APPROVE_PENDING}
           data-testid="get-exa-approve"

diff --git a/components/GetEXA/Route.tsx b/components/GetEXA/Route.tsx
@@ -1,13 +1,14 @@
 import { Box, Typography } from '@mui/material';
 import { useGetEXA } from 'contexts/GetEXAContext';
 import Image from 'next/image';
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Route } from 'types/Bridge';
+import { type Route as RouteType } from 'types/Bridge';
 import formatNumber from 'utils/formatNumber';
+import { track } from 'utils/segment';
 
 type Props = {
-  route: Route;
+  route: RouteType;
   tags: ('fastest' | 'best return')[];
 };
 
@@ -24,6 +25,20 @@ const Route = ({ route, tags }: Props) => {
 
   const isSelected = selectedRoute?.routeId === routeId;
 
+  const handleRouteClick = useCallback(() => {
+    setRoute(route);
+    track('Option Selected', {
+      location: 'Get EXA',
+      name: 'route',
+      value: protocol?.displayName || 'no option',
+      prevValue:
+        (
+          selectedRoute?.userTxs?.[selectedRoute?.userTxs.length - 1] ||
+          selectedRoute?.userTxs?.[0].steps?.[(selectedRoute?.userTxs[0]?.stepCount || 0) - 1]
+        )?.protocol?.displayName || 'no option',
+    });
+  }, [protocol?.displayName, route, selectedRoute, setRoute]);
+
   return (
     <Box
       display="flex"
@@ -33,7 +48,7 @@ const Route = ({ route, tags }: Props) => {
       borderColor={isSelected ? 'ActiveBorder' : 'grey.200'}
       padding={2}
       borderRadius={1}
-      onClick={() => setRoute(route)}
+      onClick={handleRouteClick}
       sx={{ cursor: 'pointer' }}
     >
       <Image

diff --git a/components/GetEXA/SelectRoute.tsx b/components/GetEXA/SelectRoute.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import React, { MouseEvent, memo, useCallback } from 'react';
 
 import { ArrowBack, ChevronRight, Edit } from '@mui/icons-material';
 import { Box, Typography, Input, Skeleton, Button, Alert } from '@mui/material';
@@ -16,6 +16,8 @@ import { useEXABalance, useEXAPrice } from 'hooks/useEXA';
 import { formatEther, formatUnits } from 'viem';
 import formatNumber from 'utils/formatNumber';
 import { LoadingButton } from '@mui/lab';
+import { track } from 'utils/segment';
+import { AssetBalance } from 'types/Bridge';
 
 const SelectRoute = () => {
   const {
@@ -46,11 +48,74 @@ const SelectRoute = () => {
   const insufficientBalance = Boolean(asset && qtyIn && Number(qtyIn) > asset.amount);
   const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork();
 
-  const handleSubmit = useCallback(() => {
-    if (nativeSwap) return submit();
-    setScreen(Screen.REVIEW_ROUTE);
-  }, [nativeSwap, setScreen, submit]);
+  const handleSubmit = useCallback(
+    ({ currentTarget }: MouseEvent<HTMLButtonElement>) => {
+      track('Button Clicked', {
+        location: 'Get EXA',
+        name: 'submit',
+        text: currentTarget.innerText,
+        symbol: asset?.symbol,
+      });
 
+      if (nativeSwap) return submit();
+      setScreen(Screen.REVIEW_ROUTE);
+    },
+    [asset, nativeSwap, setScreen, submit],
+  );
+
+  const handleAssetChange = useCallback(
+    (a: AssetBalance) => {
+      setAsset(a);
+      track('Option Selected', {
+        location: 'Get EXA',
+        name: 'asset',
+        value: a.symbol,
+        prevValue: asset?.symbol,
+      });
+    },
+    [asset, setAsset],
+  );
+
+  const handleBalanceClick = useCallback(() => {
+    setQtyIn(String(asset?.amount));
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'from balance',
+      value: asset && formatNumber(asset.amount, asset.symbol),
+    });
+  }, [asset, setQtyIn]);
+
+  const handleAmountBlur = useCallback(
+    () => track('Input Unfocused', { location: 'Get EXA', name: 'amount in', value: qtyIn }),
+    [qtyIn],
+  );
+  const handleSwitchNetworkClick = useCallback(() => {
+    switchNetwork?.(chain?.chainId);
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'switch network',
+      value: chain?.name,
+    });
+  }, [chain?.chainId, chain?.name, switchNetwork]);
+  const handleConnectWallet = useCallback(() => {
+    connect();
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'connect wallet',
+    });
+  }, [connect]);
+
+  const handleEditClick = useCallback(() => {
+    track('Option Selected', {
+      name: 'edit route',
+      value: !route,
+      prevValue: !!route,
+      location: 'Get EXA',
+    });
+
+    if (route) setRoute(null);
+    if (routes) setRoute(routes[0]);
+  }, [route, routes, setRoute]);
   return (
     <>
       <Box display={'flex'} gap={2} flexDirection="column" data-testid="get-exa-view-route">
@@ -73,7 +138,7 @@ const SelectRoute = () => {
                 {assets && asset ? (
                   <SocketAssetSelector
                     asset={asset}
-                    onChange={setAsset}
+                    onChange={handleAssetChange}
                     options={assets}
                     onClick={walletAddress ? undefined : connect}
                   />
@@ -94,14 +159,15 @@ const SelectRoute = () => {
               inputProps={{
                 'data-testid': 'get-exa-input',
               }}
+              onBlur={handleAmountBlur}
             />
             {asset ? (
               <Typography
                 ml="auto"
                 color="grey.400"
                 fontWeight={400}
                 whiteSpace="nowrap"
-                onClick={() => setQtyIn(String(asset?.amount))}
+                onClick={handleBalanceClick}
                 sx={{
                   '&:hover': {
                     textDecoration: 'underline',
@@ -180,7 +246,7 @@ const SelectRoute = () => {
               {t('Route')}
             </Typography>
             {routes && routes.length > 1 && (
-              <Button variant="text" onClick={() => (route ? setRoute(null) : setRoute(routes[0]))}>
+              <Button variant="text" onClick={handleEditClick}>
                 {route ? <Edit fontSize={'small'} /> : <ArrowBack fontSize={'small'} />}
               </Button>
             )}
@@ -202,12 +268,7 @@ const SelectRoute = () => {
 
       {isConnected ? (
         walletChain?.id !== chain?.chainId ? (
-          <LoadingButton
-            fullWidth
-            onClick={() => switchNetwork?.(chain?.chainId)}
-            variant="contained"
-            loading={switchIsLoading}
-          >
+          <LoadingButton fullWidth onClick={handleSwitchNetworkClick} variant="contained" loading={switchIsLoading}>
             {t('Please switch to {{network}} network', { network: chain?.name })}
           </LoadingButton>
         ) : (
@@ -224,7 +285,7 @@ const SelectRoute = () => {
           </LoadingButton>
         )
       ) : (
-        <Button fullWidth onClick={connect} variant="contained">
+        <Button fullWidth onClick={handleConnectWallet} variant="contained">
           {t('Connect wallet')}
         </Button>
       )}

diff --git a/components/GetEXA/TXStatus.tsx b/components/GetEXA/TXStatus.tsx
@@ -8,6 +8,7 @@ import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { CircularProgressWithIcon } from 'components/OperationsModal/ModalGif';
 import { useGetEXA } from 'contexts/GetEXAContext';
 import { Hash } from 'viem';
+import { track } from 'utils/segment';
 
 const SpinnerThing = ({
   status,
@@ -80,6 +81,13 @@ const SpinnerThing = ({
             }}
             target="_blank"
             href={url}
+            onClick={() =>
+              track('Button Clicked', {
+                href: url,
+                location: 'Get EXA',
+                name: 'view tx',
+              })
+            }
             disabled={!hash}
           >
             {t('View TX')}

diff --git a/components/GetEXA/index.tsx b/components/GetEXA/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 
 import { Box, IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -7,9 +7,22 @@ import ReviewRoute from './ReviewRoute';
 import SelectRoute from './SelectRoute';
 import { useGetEXA, Screen } from 'contexts/GetEXAContext';
 import TXStatus from './TXStatus';
+import { track } from 'utils/segment';
 
 const GetEXA = () => {
   const { screen, setScreen } = useGetEXA();
+  const handleClose = useCallback(() => {
+    setScreen(Screen.SELECT_ROUTE);
+    track('Button Clicked', {
+      location: 'Get EXA',
+      name: 'close',
+      icon: 'Close',
+    });
+    track('Modal Closed', {
+      name: 'Get EXA',
+    });
+  }, [setScreen]);
+
   return (
     <Box
       position="relative"
@@ -25,7 +38,7 @@ const GetEXA = () => {
       {screen !== Screen.SELECT_ROUTE && (
         <IconButton
           aria-label="close"
-          onClick={() => setScreen(Screen.SELECT_ROUTE)}
+          onClick={handleClose}
           sx={{
             padding: 0,
             ml: 'auto',