diff --git a/components/GetEXA/ChainSelector.tsx b/components/GetEXA/ChainSelector.tsx
index b7ce188fe..cbfd1fced 100644
--- 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 ;
diff --git a/components/GetEXA/ModalWrapper.tsx b/components/GetEXA/ModalWrapper.tsx
index c48c708e9..413d3894d 100644
--- 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')}
diff --git a/components/GetEXA/ReviewRoute.tsx b/components/GetEXA/ReviewRoute.tsx
index 0c0806150..37726a2da 100644
--- 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 ? (
@@ -209,7 +225,7 @@ const ReviewRoute = () => {
) : (
{
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 (
{
borderColor={isSelected ? 'ActiveBorder' : 'grey.200'}
padding={2}
borderRadius={1}
- onClick={() => setRoute(route)}
+ onClick={handleRouteClick}
sx={{ cursor: 'pointer' }}
>
{
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) => {
+ 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 (
<>
@@ -73,7 +138,7 @@ const SelectRoute = () => {
{assets && asset ? (
@@ -94,6 +159,7 @@ const SelectRoute = () => {
inputProps={{
'data-testid': 'get-exa-input',
}}
+ onBlur={handleAmountBlur}
/>
{asset ? (
{
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')}
{routes && routes.length > 1 && (
-