From 0bd3eba4b5f4d13714fb2d926cc6565f2a2f34fe Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Mon, 24 Jun 2024 19:59:20 +0100 Subject: [PATCH] removes google analytics, adds posthog.capture --- src/components/SEO/GoogleAnalyticsScripts.tsx | 30 ------------------- src/components/client/AppProviders.tsx | 2 -- src/components/client/BridgePage.tsx | 24 +++++---------- src/components/client/PosthogProvider.tsx | 4 ++- src/components/dashboard/Exchanges.tsx | 7 ----- src/components/lock/IncreaseLockTime.tsx | 17 ++++------- src/components/lock/LockedDetails.tsx | 11 ++++--- src/components/lock/StakeIQ.tsx | 30 ++----------------- src/components/wallet/WalletConnect.tsx | 21 ++++--------- src/utils/googleAnalytics.ts | 28 ----------------- 10 files changed, 31 insertions(+), 143 deletions(-) delete mode 100644 src/components/SEO/GoogleAnalyticsScripts.tsx delete mode 100644 src/utils/googleAnalytics.ts diff --git a/src/components/SEO/GoogleAnalyticsScripts.tsx b/src/components/SEO/GoogleAnalyticsScripts.tsx deleted file mode 100644 index 8b79dd0f..00000000 --- a/src/components/SEO/GoogleAnalyticsScripts.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Script from 'next/script' -import React from 'react' -import { useAccount } from 'wagmi' - -const GoogleAnalyticsScripts = () => { - const { address } = useAccount() - return ( - <> - - - ) -} - -export default GoogleAnalyticsScripts diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index 3cf419ab..5ac22dad 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -10,7 +10,6 @@ import { connectors, publicClient, webSocketPublicClient } from '@/config/wagmi' import { store } from '@/store/store' import { UALProviderSwitch, WalletProvider } from '@/context/eosWalletContext' import { DashboardLayout } from '@/components/dashboard/layout' -import GoogleAnalyticsScripts from '@/components/SEO/GoogleAnalyticsScripts' import chakraTheme from '@/theme' import { CSPostHogProvider } from './PosthogProvider' @@ -32,7 +31,6 @@ const AppProviders = ({ children }: { children: React.ReactNode }) => { - {children} diff --git a/src/components/client/BridgePage.tsx b/src/components/client/BridgePage.tsx index 5a553a4c..99a8b261 100644 --- a/src/components/client/BridgePage.tsx +++ b/src/components/client/BridgePage.tsx @@ -21,7 +21,6 @@ import { import { IQEosLogo } from '@/components/iq-eos-logo' import { IQEthLogo } from '@/components/iq-eth-logo' import { Swap } from '@/components/icons/swap' -import { logEvent } from '@/utils/googleAnalytics' import { useGetIqPriceQuery } from '@/services/iqPrice' import { getError } from '@/utils/getError' import NetworkErrorNotification from '@/components/lock/NetworkErrorNotification' @@ -112,7 +111,7 @@ const BridgePage = () => { const { error } = await bridgeFromPTokenToEth(tokenInputAmount) if (error) isError = true showToast( - error || 'Ptokens bridged successfully', + error ?? 'Ptokens bridged successfully', error ? 'error' : 'success', ) } @@ -126,18 +125,11 @@ const BridgePage = () => { if (error) isError = true showToast( - error || 'IQ bridged successfully to EOS', + error ?? 'IQ bridged successfully to EOS', error ? 'error' : 'success', ) } - logEvent({ - action: isError ? 'TOKEN_BRIDGE_ERROR' : 'TOKEN_BRIDGE_SUCCESS', - label: JSON.stringify(inputAddress), - value: 1, - category: isError ? 'token_bridge_error' : 'token_bridge_success', - }) - posthog.capture('bridge_transaction', { action: isError ? 'TOKEN_BRIDGE_ERROR' : 'TOKEN_BRIDGE_SUCCESS', label: JSON.stringify(inputAddress), @@ -149,7 +141,7 @@ const BridgePage = () => { } const getSpecificBalance = (id: TokenId) => { - if (id) return parseInt(balances.find((b) => b.id === id)?.balance || '') + if (id) return parseInt(balances.find(b => b.id === id)?.balance || '') return 0 } @@ -268,8 +260,8 @@ const BridgePage = () => { useEffect(() => { if (pIQBalance) - setBalances((currentBalances) => - currentBalances.map((b) => { + setBalances(currentBalances => + currentBalances.map(b => { if (b.id === TokenId.PIQ) b.balance = pIQBalance return b @@ -279,8 +271,8 @@ const BridgePage = () => { useEffect(() => { if (iqBalanceOnEth) - setBalances((currentBalances) => - currentBalances.map((b) => { + setBalances(currentBalances => + currentBalances.map(b => { if (b.id === TokenId.IQ) b.balance = iqBalanceOnEth return b @@ -293,7 +285,7 @@ const BridgePage = () => { const balance = await getUserTokenBalance(authContext) if (balance) setBalances( - balances.map((b) => { + balances.map(b => { if (b.id === TokenId.EOS) b.balance = balance.toString().replace(' IQ', '') return b diff --git a/src/components/client/PosthogProvider.tsx b/src/components/client/PosthogProvider.tsx index 339d9b8e..1d8cf4b0 100644 --- a/src/components/client/PosthogProvider.tsx +++ b/src/components/client/PosthogProvider.tsx @@ -21,7 +21,9 @@ export const CSPostHogProvider = ({ ) } -function PosthogAuthWrapper({ children }: React.PropsWithChildren<{}>) { +function PosthogAuthWrapper({ + children, +}: Readonly>) { const { address, connector } = useAccount() useEffect(() => { diff --git a/src/components/dashboard/Exchanges.tsx b/src/components/dashboard/Exchanges.tsx index ad2ad800..2589ed58 100644 --- a/src/components/dashboard/Exchanges.tsx +++ b/src/components/dashboard/Exchanges.tsx @@ -1,4 +1,3 @@ -import { logEvent } from '@/utils/googleAnalytics' import { Divider, Flex, Link as ChakraLink, Text } from '@chakra-ui/layout' import { IconButton } from '@chakra-ui/react' import Link from 'next/link' @@ -30,12 +29,6 @@ const ExchangeLink: React.FC = ({ href={href} target="_blank" onClick={() => { - logEvent({ - category: 'Dashboard', - action: 'Click', - label: `${logEventLabel}`, - value: 1, - }) posthog.capture('exchange_link_click', { category: 'Dashboard', target: logEventLabel, diff --git a/src/components/lock/IncreaseLockTime.tsx b/src/components/lock/IncreaseLockTime.tsx index 55597282..bf67ca3d 100644 --- a/src/components/lock/IncreaseLockTime.tsx +++ b/src/components/lock/IncreaseLockTime.tsx @@ -7,11 +7,11 @@ import { useReward } from '@/hooks/useReward' import { useAccount, useWaitForTransaction } from 'wagmi' import { calculateReturn } from '@/utils/LockOverviewUtils' import { Dict } from '@chakra-ui/utils' -import { logEvent } from '@/utils/googleAnalytics' import { useReusableToast } from '@/hooks/useToast' import { useLockEnd } from '@/hooks/useLockEnd' import LockFormCommon from './LockFormCommon' import LockSlider from '../elements/Slider/LockSlider' +import { usePostHog } from 'posthog-js/react' const IncreaseLockTime = () => { const { increaseLockPeriod } = useLock() @@ -26,6 +26,7 @@ const IncreaseLockTime = () => { const { checkPoint } = useReward() const { data } = useWaitForTransaction({ hash: trxHash }) const { address } = useAccount() + const posthog = usePostHog() const resetValues = () => { setLoading(false) @@ -89,20 +90,14 @@ const IncreaseLockTime = () => { const result = await increaseLockPeriod(lockend.getTime()) if (!result) { showToast('Transaction failed', 'error') - logEvent({ - action: 'INCREASE_STAKE_PERIOD_FAILURE', - label: JSON.stringify(address), - value: 0, - category: 'increase_stake_period_failure', + posthog.capture('increase_stake_period_failure', { + userAddress: address, }) setLoading(false) return } - logEvent({ - action: 'INCREASE_STAKE_PERIOD_SUCCESS', - label: JSON.stringify(address), - value: 1, - category: 'increase_stake_period_success', + posthog.capture('increase_stake_period_success', { + userAddress: address, }) setTrxHash(result.hash) } catch (err) { diff --git a/src/components/lock/LockedDetails.tsx b/src/components/lock/LockedDetails.tsx index cded89e2..1c64a30a 100644 --- a/src/components/lock/LockedDetails.tsx +++ b/src/components/lock/LockedDetails.tsx @@ -14,7 +14,6 @@ import * as Humanize from 'humanize-plus' import { useReward } from '@/hooks/useReward' import { useAccount, useWaitForTransaction } from 'wagmi' import { Dict } from '@chakra-ui/utils' -import { logEvent } from '@/utils/googleAnalytics' import { useGetIqPriceQuery } from '@/services/iqPrice' import { useReusableToast } from '@/hooks/useToast' import { useLockEnd } from '@/hooks/useLockEnd' @@ -23,6 +22,7 @@ import StakeHeader from '../elements/stakeCommon/StakeHeader' import TooltipElement from '../elements/Tooltip/TooltipElement' import ClaimModal from './ClaimWarningModal' import { CLAIM_WARNING_THRESHOLD } from '@/data/LockConstants' +import { usePostHog } from 'posthog-js/react' const LockedDetails = ({ setOpenUnlockNotification, @@ -59,6 +59,7 @@ const LockedDetails = ({ const { showToast } = useReusableToast() const [isModalOpen, setIsModalOpen] = useState(false) const closeModal = () => setIsModalOpen(false) + const posthog = usePostHog() useEffect(() => { const resolveReward = async () => { @@ -116,11 +117,9 @@ const LockedDetails = ({ try { const result = await resultAction() setTrxHash(result.hash) - logEvent({ - action: logAction, - label: JSON.stringify(address), - value: 1, - category: logAction.toLocaleLowerCase(), + posthog.capture(logAction.toLocaleLowerCase(), { + category: 'lock', + userAddress: address, }) if (logAction === 'CLAIM_REWARD' && result) { setHasClaimed(true) diff --git a/src/components/lock/StakeIQ.tsx b/src/components/lock/StakeIQ.tsx index fdd66cec..e7450e8c 100644 --- a/src/components/lock/StakeIQ.tsx +++ b/src/components/lock/StakeIQ.tsx @@ -14,7 +14,6 @@ import { useAccount, useWaitForTransaction } from 'wagmi' import { useLockOverview } from '@/hooks/useLockOverview' import { useReward } from '@/hooks/useReward' import { Dict } from '@chakra-ui/utils' -import { logEvent } from '@/utils/googleAnalytics' import { useReusableToast } from '@/hooks/useToast' import { useLockEnd } from '@/hooks/useLockEnd' import LockFormCommon from './LockFormCommon' @@ -138,12 +137,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { const result = await increaseLockAmount(iqToBeLocked) if (!result) { showToast('Transaction failed', 'error') - logEvent({ - action: 'INCREASE_STAKE_FAILURE', - label: JSON.stringify(address), - value: 0, - category: 'increase_stake_failure', - }) + posthog.capture('INCREASE_STAKE_FAILURE', { action: 'INCREASE_STAKE_FAILURE', userId: address, @@ -160,12 +154,6 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { setLoading(false) return } - logEvent({ - action: 'INCREASE_STAKE_SUCCESS', - label: JSON.stringify(address), - value: 1, - category: 'increase_stake_success', - }) posthog.capture('INCREASE_STAKE_SUCCESS', { action: 'INCREASE_STAKE_SUCCESS', userId: address, @@ -186,12 +174,6 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { const result = await lockIQ(iqToBeLocked, lockValue) if (!result) { showToast('Transaction failed', 'error') - logEvent({ - action: 'STAKE_FAILURE', - label: JSON.stringify(address), - value: 0, - category: 'stake_failure', - }) posthog.capture('STAKE_FAILURE', { action: 'STAKE_FAILURE', userId: address, @@ -208,12 +190,6 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { setLoading(false) return } - logEvent({ - action: 'STAKE_SUCCESS', - label: JSON.stringify(address), - value: 1, - category: 'stake_success', - }) posthog.capture('STAKE_SUCCESS', { action: 'STAKE_SUCCESS', userId: address, @@ -280,7 +256,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { updateIqToBeLocked(e.target.value)} + onChange={e => updateIqToBeLocked(e.target.value)} placeholder="23.00" value={userInput} color="fadedText4" @@ -306,7 +282,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { {userTotalIQLocked < 1 && ( - updateLockend(newDate)} /> + updateLockend(newDate)} /> )} } diff --git a/src/components/wallet/WalletConnect.tsx b/src/components/wallet/WalletConnect.tsx index aab31252..022a98f2 100644 --- a/src/components/wallet/WalletConnect.tsx +++ b/src/components/wallet/WalletConnect.tsx @@ -13,7 +13,6 @@ import { FocusableElement } from '@chakra-ui/utils' import { RiCloseLine } from 'react-icons/ri' import { useConnect, Connector } from 'wagmi' import { WALLET_LOGOS } from '@/data/WalletData' -import { logEvent } from '@/utils/googleAnalytics' import { usePostHog } from 'posthog-js/react' const WalletConnect = ({ @@ -26,19 +25,17 @@ const WalletConnect = ({ const posthog = usePostHog() const { connectors, connect } = useConnect({ onError(error) { - logEvent({ + posthog.capture('LOGIN_ERROR', { action: 'LOGIN_ERROR', - label: error.message, - value: 0, - category: 'login_status', + errorReason: error.message, + category: 'connectors', }) }, onSuccess(data) { - logEvent({ + posthog.capture('LOGIN_SUCCESS', { action: 'LOGIN_SUCCESS', - label: JSON.stringify(data.account), - value: 1, - category: 'login_status', + userAddress: data.account, + category: 'connectors', }) const w = window as any w.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, { @@ -49,12 +46,6 @@ const WalletConnect = ({ }) const handleConnect = (selectedConnector: Connector) => { - logEvent({ - action: 'LOGIN_ATTEMPT', - label: selectedConnector.name, - value: 1, - category: 'connectors', - }) posthog.capture('LOGIN_ATTEMPT', { action: 'LOGIN_ATTEMPT', label: selectedConnector.name, diff --git a/src/utils/googleAnalytics.ts b/src/utils/googleAnalytics.ts deleted file mode 100644 index 9c635a98..00000000 --- a/src/utils/googleAnalytics.ts +++ /dev/null @@ -1,28 +0,0 @@ -export const pageView = (url: URL | string) => { - if (typeof window.gtag !== 'undefined') { - window.gtag('event', 'page_view', { - page_title: document.title, - page_path: url, - }) - } -} - -export const logEvent = ({ - action, - category, - label, - value, -}: { - action: string - category: string - label: string - value: number -}) => { - if (typeof window.gtag !== 'undefined') { - window.gtag('event', action, { - event_category: category, - event_label: label, - value, - }) - } -}