From 517506d1fe79cf61441e4597f19d5f24a5618d7a Mon Sep 17 00:00:00 2001 From: sebipap Date: Wed, 22 Nov 2023 15:17:58 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20track=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddExaTokensButton/index.tsx | 5 ++ .../DashboardContent/DashboardTabs/index.tsx | 18 +++- .../SwitchCollateral/index.tsx | 10 ++- .../TableRowFloatingPool/index.tsx | 89 +++++++++++++++++-- .../DashboardHeader/UserRewards/index.tsx | 13 ++- .../DashboardSummary/DashboardTitle/index.tsx | 6 ++ utils/segment.ts | 2 +- 7 files changed, 131 insertions(+), 12 deletions(-) diff --git a/components/AddExaTokensButton/index.tsx b/components/AddExaTokensButton/index.tsx index 3030824a0..21f4097aa 100644 --- a/components/AddExaTokensButton/index.tsx +++ b/components/AddExaTokensButton/index.tsx @@ -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(); @@ -18,6 +19,10 @@ const AddExaTokensButton = () => { if (!accountData) return; const imagesBase64: Record = {}; + track('Button Clicked', { + name: 'add exa vouchers', + location: 'Dashboard', + }); await Promise.all( assets.map( diff --git a/components/dashboard/DashboardContent/DashboardTabs/index.tsx b/components/dashboard/DashboardContent/DashboardTabs/index.tsx index 67bacd1f7..811af7f41 100644 --- a/components/dashboard/DashboardContent/DashboardTabs/index.tsx +++ b/components/dashboard/DashboardContent/DashboardTabs/index.tsx @@ -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; @@ -20,11 +21,24 @@ type Props = { function DashboardTabs({ initialTab, allTabs }: Props) { const [currentTab, setCurrentTab] = useState(initialTab); + const handleChange = useCallback( + (_: React.SyntheticEvent, newTab: string) => { + setCurrentTab(newTab); + track('Option Selected', { + location: 'Dashboard', + name: 'operation', + value: newTab, + prevValue: currentTab, + }); + }, + [currentTab], + ); + return ( setCurrentTab(newTab)} + onChange={handleChange} TabIndicatorProps={{ sx: { height: 0 } }} textColor="inherit" sx={{ diff --git a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx index fcb1e8e76..4a9283a22 100644 --- a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx +++ b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/SwitchCollateral/index.tsx @@ -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; @@ -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 { @@ -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 ( diff --git a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx index 392fa4237..249ad1496 100644 --- a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx +++ b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { MouseEvent, useCallback } from 'react'; import Image from 'next/image'; import { formatUnits } from 'viem'; @@ -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; @@ -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): 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): 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): 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 ( - + diff --git a/components/newDashboard/DashboardSummary/DashboardTitle/index.tsx b/components/newDashboard/DashboardSummary/DashboardTitle/index.tsx index b00668ad9..fedf07d5e 100644 --- a/components/newDashboard/DashboardSummary/DashboardTitle/index.tsx +++ b/components/newDashboard/DashboardSummary/DashboardTitle/index.tsx @@ -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(); @@ -16,6 +17,11 @@ const DashboardTitle = () => { setLoading(true); await refreshAccountData(); setLoading(false); + track('Button Clicked', { + name: 'refresh', + location: 'Dashboard', + icon: 'Replay', + }); }; useEffect(() => { diff --git a/utils/segment.ts b/utils/segment.ts index febc0108b..8d3ef2189 100644 --- a/utils/segment.ts +++ b/utils/segment.ts @@ -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': {