Skip to content

Commit

Permalink
📈 track dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebipap
sebipap committed Nov 22, 2023
1 parent 0ebfba1 commit 517506d
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 12 deletions.
5 changes: 5 additions & 0 deletions components/AddExaTokensButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import useAssets from 'hooks/useAssets';
import imageToBase64 from 'utils/imageToBase64';
import useAccountData from 'hooks/useAccountData';
import { useTranslation } from 'react-i18next';
import { track } from 'utils/segment';

const AddExaTokensButton = () => {
const { t } = useTranslation();
Expand All @@ -18,6 +19,10 @@ const AddExaTokensButton = () => {
if (!accountData) return;

const imagesBase64: Record<string, string> = {};
track('Button Clicked', {
name: 'add exa vouchers',
location: 'Dashboard',
});

await Promise.all(
assets.map(
Expand Down
18 changes: 16 additions & 2 deletions components/dashboard/DashboardContent/DashboardTabs/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { ReactNode, useState } from 'react';
import React, { ReactNode, useCallback, useState } from 'react';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import { Typography } from '@mui/material';
import { track } from 'utils/segment';

type Tab = {
label: string;
Expand All @@ -20,11 +21,24 @@ type Props = {
function DashboardTabs({ initialTab, allTabs }: Props) {
const [currentTab, setCurrentTab] = useState<Tab['value']>(initialTab);

const handleChange = useCallback(
(_: React.SyntheticEvent, newTab: string) => {
setCurrentTab(newTab);
track('Option Selected', {
location: 'Dashboard',
name: 'operation',
value: newTab,
prevValue: currentTab,
});
},
[currentTab],
);

return (
<TabContext value={currentTab}>
<Box>
<TabList
onChange={(_: React.SyntheticEvent, newTab: string) => setCurrentTab(newTab)}
onChange={handleChange}
TabIndicatorProps={{ sx: { height: 0 } }}
textColor="inherit"
sx={{
Expand Down
10 changes: 9 additions & 1 deletion ...hboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import useAccountData from 'hooks/useAccountData';
import { useWeb3 } from 'hooks/useWeb3';
import { useTranslation } from 'react-i18next';
import { WEI_PER_ETHER } from 'utils/const';
import { track } from 'utils/segment';

type Props = {
symbol: string;
Expand Down Expand Up @@ -68,6 +69,13 @@ function SwitchCollateral({ symbol }: Props) {
if (!marketAccount || !auditor || !opts) return;
const { market } = marketAccount;
let target = !checked;
track('Option Selected', {
name: 'switch collateral',
location: 'Dashboard',
value: target,
prevValue: checked,
symbol,
});

setLoading(true);
try {
Expand All @@ -84,7 +92,7 @@ function SwitchCollateral({ symbol }: Props) {
setOptimistic(target);
setLoading(false);
}
}, [marketAccount, auditor, opts, checked, refreshAccountData]);
}, [marketAccount, auditor, opts, checked, symbol, refreshAccountData]);

if (loading) {
return (
Expand Down
89 changes: 83 additions & 6 deletions ...rdContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { MouseEvent, useCallback } from 'react';
import Image from 'next/image';
import { formatUnits } from 'viem';

Expand All @@ -15,6 +15,7 @@ import useActionButton, { useStartDebtManagerButton } from 'hooks/useActionButto
import useRouter from 'hooks/useRouter';
import { useTranslation } from 'react-i18next';
import Rates from 'components/Rates';
import { track } from 'utils/segment';

type Props = {
symbol: string;
Expand All @@ -34,13 +35,89 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun
const { handleActionClick } = useActionButton();
const { startDebtManager, isRolloverDisabled } = useStartDebtManagerButton();

const handleClick = useCallback(() => {
track('Button Clicked', {
name: 'Table Row Floating Pool',
location: 'Dashboard',
symbol,
href: `/${symbol}`,
amount: formatUnits(
type === 'deposit' ? depositedAmount || 0n : borrowedAmount || 0n,
marketAccount?.decimals ?? 18,
),
usdAmount: String(valueUSD),
});
}, [borrowedAmount, depositedAmount, marketAccount?.decimals, symbol, type, valueUSD]);

const handleOperationClick = useCallback(
(e: MouseEvent<HTMLButtonElement>): void => {
handleActionClick(e, type, symbol);
track('Button Clicked', {
name: type,
location: 'Dashboard',
symbol,
amount: formatUnits(
type === 'deposit' ? depositedAmount || 0n : borrowedAmount || 0n,
marketAccount?.decimals ?? 18,
),
usdAmount: String(valueUSD),
});
},
[borrowedAmount, depositedAmount, handleActionClick, marketAccount?.decimals, symbol, type, valueUSD],
);
const handleWithdrawClick = useCallback(
(e: MouseEvent<HTMLButtonElement>): void => {
handleActionClick(e, 'withdraw', symbol);
track('Button Clicked', {
name: 'withdraw',
location: 'Dashboard',
symbol,
amount: formatUnits(
type === 'deposit' ? depositedAmount || 0n : borrowedAmount || 0n,
marketAccount?.decimals ?? 18,
),
usdAmount: String(valueUSD),
});
},
[borrowedAmount, depositedAmount, handleActionClick, marketAccount?.decimals, symbol, type, valueUSD],
);
const handleRepayClick = useCallback(
(e: MouseEvent<HTMLButtonElement>): void => {
handleActionClick(e, 'repay', symbol);
track('Button Clicked', {
name: 'repay',
location: 'Dashboard',
symbol,
amount: formatUnits(
type === 'deposit' ? depositedAmount || 0n : borrowedAmount || 0n,
marketAccount?.decimals ?? 18,
),
usdAmount: String(valueUSD),
});
},
[borrowedAmount, depositedAmount, handleActionClick, marketAccount?.decimals, symbol, type, valueUSD],
);
const handleRolloverClick = useCallback(() => {
startDebtManager({ from: { symbol } });
track('Button Clicked', {
name: 'rollover',
location: 'Dashboard',
symbol,
amount: formatUnits(
type === 'deposit' ? depositedAmount || 0n : borrowedAmount || 0n,
marketAccount?.decimals ?? 18,
),
usdAmount: String(valueUSD),
});
}, [borrowedAmount, depositedAmount, marketAccount?.decimals, startDebtManager, symbol, type, valueUSD]);

return (
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
hover
data-testid={`dashboard-floating-${type}-row-${symbol}`}
>
<Link href={{ pathname: `/${symbol}`, query }} legacyBehavior>
<Link href={{ pathname: `/${symbol}`, query }} onClick={handleClick} legacyBehavior>
<TableCell component="th" align="left" sx={{ cursor: 'pointer', pl: 1.5 }} width={240}>
<Stack direction="row" spacing={1}>
<Image
Expand Down Expand Up @@ -96,7 +173,7 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun
<TableCell align="left" width={50} size="small" sx={{ px: 0.5 }}>
<Button
variant="contained"
onClick={(e) => handleActionClick(e, type, symbol)}
onClick={handleOperationClick}
sx={{ whiteSpace: 'nowrap' }}
data-testid={`floating-${type}-${symbol}`}
>
Expand All @@ -108,7 +185,7 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun
<Button
variant="outlined"
sx={{ backgroundColor: 'components.bg', whiteSpace: 'nowrap' }}
onClick={(e) => handleActionClick(e, 'withdraw', symbol)}
onClick={handleWithdrawClick}
data-testid={`floating-withdraw-${symbol}`}
>
{t('Withdraw')}
Expand All @@ -118,7 +195,7 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun
<Button
variant="outlined"
sx={{ backgroundColor: 'components.bg', whiteSpace: 'nowrap', '&:hover': { zIndex: 1 } }}
onClick={(e) => handleActionClick(e, 'repay', symbol)}
onClick={handleRepayClick}
data-testid={`floating-repay-${symbol}`}
>
{t('Repay')}
Expand All @@ -132,7 +209,7 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun
borderLeftColor: ({ palette }) => palette.grey[palette.mode === 'light' ? 500 : 300],
},
}}
onClick={() => startDebtManager({ from: { symbol } })}
onClick={handleRolloverClick}
disabled={isRolloverDisabled(borrowedAmount)}
data-testid={`floating-rollover-${symbol}`}
>
Expand Down
13 changes: 11 additions & 2 deletions components/newDashboard/DashboardSummary/DashboardHeader/UserRewards/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC, useMemo } from 'react';
import React, { FC, useCallback, useMemo } from 'react';
import { formatUnits } from 'viem';
import { Box, Button, Skeleton, Typography, useMediaQuery, useTheme } from '@mui/material';
import StarsIcon from '@mui/icons-material/Stars';
Expand All @@ -10,6 +10,7 @@ import useRewards from 'hooks/useRewards';
import { WEI_PER_ETHER } from 'utils/const';
import useAccountData from 'hooks/useAccountData';
import useRouter from 'hooks/useRouter';
import { track } from 'utils/segment';

type RewardProps = {
assetSymbol: string;
Expand Down Expand Up @@ -76,6 +77,14 @@ const UserRewards = () => {
});
}, [rates, rs]);

const trackClick = useCallback(() => {
track('Button Clicked', {
name: 'vest',
location: 'Dashboard',
href: '/vesting',
});
}, []);

return (
<Box
display="flex"
Expand Down Expand Up @@ -121,7 +130,7 @@ const UserRewards = () => {
</Box>

<Link href={{ pathname: '/vesting', query }} style={{ width: '100%' }}>
<Button fullWidth variant="contained">
<Button fullWidth variant="contained" onClick={trackClick}>
{t('Vest esEXA')}
</Button>
</Link>
Expand Down
6 changes: 6 additions & 0 deletions components/newDashboard/DashboardSummary/DashboardTitle/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ReplayIcon from '@mui/icons-material/Replay';
import { useTranslation } from 'react-i18next';
import useAccountData from 'hooks/useAccountData';
import dayjs from 'dayjs';
import { track } from 'utils/segment';

const DashboardTitle = () => {
const { t } = useTranslation();
Expand All @@ -16,6 +17,11 @@ const DashboardTitle = () => {
setLoading(true);
await refreshAccountData();
setLoading(false);
track('Button Clicked', {
name: 'refresh',
location: 'Dashboard',
icon: 'Replay',
});
};

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion utils/segment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type TrackEvent = {
'Button Clicked': {
name: string;
location: string;
icon?: 'Close' | 'Edit' | 'Settings' | 'Copy' | 'Menu';
icon?: 'Close' | 'Edit' | 'Settings' | 'Copy' | 'Menu' | 'Replay';
href?: string;
};
'Option Selected': {
Expand Down

1 comment on commit 517506d

@vercel
Copy link

@vercel vercel bot commented on 517506d Nov 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app – ./

app.exact.ly
exactly-development.vercel.app
app-git-main.exactly.app
app.exactly.app

Please sign in to comment.