diff --git a/src/components/cards/ChartCard/ChartCard.tsx b/src/components/cards/ChartCard/ChartCard.tsx index e1024e36..0610f36b 100644 --- a/src/components/cards/ChartCard/ChartCard.tsx +++ b/src/components/cards/ChartCard/ChartCard.tsx @@ -18,7 +18,6 @@ import { DataContext } from '../../../hooks/DataContext/DataContext' import { ListModal } from '../../modals/ListModal/ListModal' import { ListEntityButton } from '../../buttons/ListEntityButton/ListEntityButton' import { useTranslation } from 'react-i18next' -import { useTracking } from '../../../hooks/useTracking' export interface ChartCardProps {} @@ -29,7 +28,6 @@ export const ChartCard: FC = () => { const { selection } = useContext(SelectionContext) const { getTokens } = useContext(DataContext) const { theme } = useContext(ThemeContext) - const { trackEvent } = useTracking() const [{ chartType, token, interval, chartData }, dispatch] = useChartReducer(selection.swapCard) const { addNotification } = useContext(NotificationsContext) const isMobile = useMediaQuery('mobile') diff --git a/src/components/cards/NewsCard/NewsCard.tsx b/src/components/cards/NewsCard/NewsCard.tsx index 7a43d189..d514ddab 100644 --- a/src/components/cards/NewsCard/NewsCard.tsx +++ b/src/components/cards/NewsCard/NewsCard.tsx @@ -15,7 +15,7 @@ import { CardHeader } from '../CardHeader/CardHeader' import { CryptoSymbol } from '../../tags/CryptoSymbol/CryptoSymbol' import { useTranslation } from 'react-i18next' import { action, category } from '../../../constants/tracking' -import { useTracking } from '../../../hooks/useTracking' +import { trackEvent } from '../../../hooks/useTracking' interface NewsCardProps {} @@ -26,7 +26,6 @@ export const NewsCard: FC = () => { const [{ data, isLoading, timestamp, isModalVisible, selectedToken }, dispatch] = useNewsReducer(selection) const { t } = useTranslation() - const { trackEvent } = useTracking() useEffect(() => { if (!selectedToken) return getNews(data, dispatch, selectedToken, timestamp, addNotification) diff --git a/src/components/cards/NewsCard/columns.tsx b/src/components/cards/NewsCard/columns.tsx index 4924b90f..778da93c 100644 --- a/src/components/cards/NewsCard/columns.tsx +++ b/src/components/cards/NewsCard/columns.tsx @@ -2,11 +2,10 @@ import { IconClock } from '@tabler/icons-react' import { truncate, unixtimeFromNow } from '../../../utils/formatting' import classNames from './NewsCard.module.pcss' import { CryptoSymbol } from '../../tags/CryptoSymbol/CryptoSymbol' -import { useTracking } from '../../../hooks/useTracking' import { action, category } from '../../../constants/tracking' +import { trackEvent } from '../../../hooks/useTracking' export const columns = () => { - const { trackEvent } = useTracking() return [ { columnTitle: 'Title', diff --git a/src/components/cards/RouteCard/RouteCard.tsx b/src/components/cards/RouteCard/RouteCard.tsx index bbb14a6d..f47bc766 100644 --- a/src/components/cards/RouteCard/RouteCard.tsx +++ b/src/components/cards/RouteCard/RouteCard.tsx @@ -9,15 +9,15 @@ import { renderSteps } from './renderSteps' import { RouteCardProps } from './types' import { numberToFormatString, roundNumberByDecimals } from '../../../utils/formatting' import { useMediaQuery } from '../../../hooks/useMediaQuery' -import { useTracking } from '../../../hooks/useTracking' import { action, category } from '../../../constants/tracking' +import { trackEvent } from '../../../hooks/useTracking' export const RouteCard: FC = ({ route, isSelected, onClick }) => { const stepsContainerRef = useRef(null) const isMobile = useMediaQuery('mobile') const [isRoutesCollapsed, setIsRoutesCollapsed] = useState(true) const [springProps, setSpringProps] = useSpring(() => ({ height: 'auto' })) - const { trackEvent } = useTracking() + const getTextColor = () => (isSelected ? classNames.bestText : '') const getIconColor = () => (isSelected ? 'var(--color-primary-400)' : 'var(--color-text-secondary)') diff --git a/src/components/cards/SwapCard/SwapDetails/SwapDetails.tsx b/src/components/cards/SwapCard/SwapDetails/SwapDetails.tsx index 4ca4c673..4fa465ae 100644 --- a/src/components/cards/SwapCard/SwapDetails/SwapDetails.tsx +++ b/src/components/cards/SwapCard/SwapDetails/SwapDetails.tsx @@ -6,12 +6,11 @@ import { RateTag } from './RateTag' import { RouteCard } from '../../RouteCard/RouteCard' import { SwapDetailsProps } from '../types' import { numberToFormatString } from '../../../../utils/formatting' -import { useTracking } from '../../../../hooks/useTracking' import { action, category } from '../../../../constants/tracking' +import { trackEvent } from '../../../../hooks/useTracking' export const SwapDetails: FC = ({ swapState, setSelectedRoute }) => { const { from, to, routes, isLoading, selectedRoute } = swapState - const { trackEvent } = useTracking() const [isSelectRouteModalVisible, setIsSelectRouteModalVisible] = useState(false) const rate = { diff --git a/src/components/layout/Header/WalletButton/WalletButton.tsx b/src/components/layout/Header/WalletButton/WalletButton.tsx index a4fb4933..3342cdeb 100644 --- a/src/components/layout/Header/WalletButton/WalletButton.tsx +++ b/src/components/layout/Header/WalletButton/WalletButton.tsx @@ -1,6 +1,5 @@ import { useWeb3Modal } from '@web3modal/react' import { FC } from 'react' -import { useTracking } from '../../../../hooks/useTracking' import { action, category } from '../../../../constants/tracking' import { useAccount } from 'wagmi' import { IconWallet } from '@tabler/icons-react' @@ -8,13 +7,13 @@ import { Button } from '../../../buttons/Button/Button' import { truncateWallet } from '../../../../utils/formatting' import { useTranslation } from 'react-i18next' import classNames from './WalletButton.module.pcss' +import { trackEvent } from '../../../../hooks/useTracking' interface WalletButtonProps {} export const WalletButton: FC = () => { const { address, isConnected, isDisconnected, isConnecting } = useAccount() const { open } = useWeb3Modal() - const { trackEvent } = useTracking() const { t } = useTranslation() function handleClick() { diff --git a/src/hooks/useTracking.tsx b/src/hooks/useTracking.tsx index 781a4885..19f5cad2 100644 --- a/src/hooks/useTracking.tsx +++ b/src/hooks/useTracking.tsx @@ -1,8 +1,5 @@ -import { useCallback, useEffect } from 'react' import posthog from 'posthog-js' -import { useAccount } from 'wagmi' import { TrackEventProps } from '../types/TrackEventProps' -import { action, category } from '../constants/tracking' // Standalone function for trackTransaction export const trackTransaction = () => { @@ -22,28 +19,3 @@ export const trackEvent = async ({ category, action, label, data }: TrackEventPr console.error('trackEvent error', error) } } - -// Hook that utilizes the standalone functions -export const useTracking = () => { - const { address, isConnected } = useAccount() - - useEffect(() => { - if (isConnected) { - posthog.identify(address) - trackEvent({ - category: category.Wallet, - action: action.ConnectWalletSuccess, - label: 'Wallet Connected', - }) - } - }, [isConnected]) - - // Use callbacks to reference the standalone functions - const memoizedTrackTransaction = useCallback(trackTransaction, []) - const memoizedTrackEvent = useCallback(trackEvent, []) - - return { - trackTransaction: memoizedTrackTransaction, - trackEvent: memoizedTrackEvent, - } -}