From 10a02aa349500f04de5ebc149c0f2bcba01df133 Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:26:12 +0100 Subject: [PATCH 1/9] adds posthog --- next.config.js | 14 +++++++ package.json | 1 + src/components/client/AppProviders.tsx | 16 +++++--- src/components/client/BridgePage.tsx | 20 +++++++--- src/components/client/CgPostHogProvider.tsx | 42 +++++++++++++++++++++ src/components/dashboard/Exchanges.tsx | 11 +++++- src/components/lock/StakeIQ.tsx | 27 ++++++++++++- src/components/wallet/WalletConnect.tsx | 8 ++++ src/config/index.ts | 1 + yarn.lock | 18 +++++++++ 10 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 src/components/client/CgPostHogProvider.tsx diff --git a/next.config.js b/next.config.js index 3f33a93d..57a14287 100755 --- a/next.config.js +++ b/next.config.js @@ -41,6 +41,20 @@ const nextConfig = { 'gateway.pinata.cloud', ], }, + async rewrites() { + return [ + { + source: '/ingest/static/:path*', + destination: 'https://us-assets.i.posthog.com/static/:path*', + }, + { + source: '/ingest/:path*', + destination: 'https://us.i.posthog.com/:path*', + }, + ] + }, + // This is required to support PostHog trailing slash API requests + skipTrailingSlashRedirect: true, } module.exports = nextConfig diff --git a/package.json b/package.json index c4f6c348..7d1ef340 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "next-redux-wrapper": "^7.0.5", "next-seo": "^5.5.0", "nextjs-progressbar": "^0.0.14", + "posthog-js": "^1.139.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^11.17.4", diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index 7fdcadc4..a00f2395 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -12,6 +12,7 @@ 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 './CgPosthogProvider' const { ToastContainer } = createStandaloneToast() const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element @@ -30,15 +31,18 @@ const AppProviders = ({ children }: { children: React.ReactNode }) => { - - - - {children} - - + + + + + {children} + + + + ) diff --git a/src/components/client/BridgePage.tsx b/src/components/client/BridgePage.tsx index a6fd7108..fe16dd10 100644 --- a/src/components/client/BridgePage.tsx +++ b/src/components/client/BridgePage.tsx @@ -35,6 +35,7 @@ import PageHeader from '../dashboard/PageHeader' import * as Humanize from 'humanize-plus' import { PTOKEN_COMMISSION, TRANSFER_LOWER_LIMIT } from '@/data/BridgeConstant' import Disclaimer from '../bridge/Disclaimer' +import { usePostHog } from 'posthog-js/react' const BridgePage = () => { const authContext = useContext(UALContext) @@ -65,6 +66,7 @@ const BridgePage = () => { bridgeFromPTokenToEth, pIQTokenBalance, } = useBridge() + const posthog = usePostHog() const handleError = (errorMsg: string) => { showToast(errorMsg, 'error') @@ -136,12 +138,18 @@ const BridgePage = () => { category: isError ? 'token_bridge_error' : 'token_bridge_success', }) + posthog.capture('bridge_transaction', { + action: isError ? 'TOKEN_BRIDGE_ERROR' : 'TOKEN_BRIDGE_SUCCESS', + label: JSON.stringify(inputAddress), + category: isError ? 'token_bridge_error' : 'token_bridge_success', + }) + setIsTransferring(false) setTokenInputAmount('0') } 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 } @@ -260,8 +268,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 @@ -271,8 +279,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 @@ -285,7 +293,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/CgPostHogProvider.tsx b/src/components/client/CgPostHogProvider.tsx new file mode 100644 index 00000000..5d6e2bf0 --- /dev/null +++ b/src/components/client/CgPostHogProvider.tsx @@ -0,0 +1,42 @@ +import config from '@/config' +import posthog from 'posthog-js' +import { PostHogProvider } from 'posthog-js/react' +import { useEffect } from 'react' +import { useAccount } from 'wagmi' + +if (typeof window !== 'undefined') { + posthog.init(config.posthugApikey, { + api_host: '/ingest', + ui_host: 'https://us.posthog.com', + person_profiles: 'identified_only', + }) +} + +export const CSPostHogProvider = ({ + children, +}: React.PropsWithChildren<{}>) => { + return ( + + {children} + + ) +} + +function PosthogAuthWrapper({ children }: React.PropsWithChildren<{}>) { + const { address, connector } = useAccount() + + useEffect(() => { + const identifyUser = async () => { + const chainId = await connector?.getChainId() + if (address) { + posthog.identify(address, { + chainId, + connector: connector?.name, + }) + } + } + identifyUser() + }, [address]) + + return <>{children} +} diff --git a/src/components/dashboard/Exchanges.tsx b/src/components/dashboard/Exchanges.tsx index 16cc1e0d..ad2ad800 100644 --- a/src/components/dashboard/Exchanges.tsx +++ b/src/components/dashboard/Exchanges.tsx @@ -8,6 +8,7 @@ import { OneInch } from '../icons/1inch' import { Upbit } from '../icons/Upbit' import ArrowIcon from '../icons/arrow' import { Fraxswap } from '../icons/fraxswap' +import { usePostHog } from 'posthog-js/react' interface IconButtonProps { href: string @@ -22,18 +23,24 @@ const ExchangeLink: React.FC = ({ icon, ariaLabel, }) => { + const posthog = usePostHog() + return ( + onClick={() => { logEvent({ category: 'Dashboard', action: 'Click', label: `${logEventLabel}`, value: 1, }) - } + posthog.capture('exchange_link_click', { + category: 'Dashboard', + target: logEventLabel, + }) + }} > { const [iqToBeLocked, setIqToBeLocked] = useState() @@ -37,6 +38,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { const [lockend, setLockend] = useState() const [lockValue, setLockValue] = useState(0) const [receivedAmount, setReceivedAmount] = useState(0) + const posthog = usePostHog() useEffect(() => { const amountToBeRecieved = calculateReturn( @@ -142,6 +144,11 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { value: 0, category: 'increase_stake_failure', }) + posthog.capture('INCREASE_STAKE_FAILURE', { + action: 'INCREASE_STAKE_FAILURE', + userId: address, + category: 'increase_stake_failure', + }) setLoading(false) return } @@ -159,6 +166,11 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { value: 1, category: 'increase_stake_success', }) + posthog.capture('INCREASE_STAKE_SUCCESS', { + action: 'INCREASE_STAKE_SUCCESS', + userId: address, + category: 'increase_stake_success', + }) setTrxHash(result.hash) } catch (err) { const errorObject = err as Dict @@ -180,6 +192,11 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { value: 0, category: 'stake_failure', }) + posthog.capture('STAKE_FAILURE', { + action: 'STAKE_FAILURE', + userId: address, + category: 'stake_failure', + }) setLoading(false) return } @@ -197,6 +214,12 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { value: 1, category: 'stake_success', }) + posthog.capture('STAKE_SUCCESS', { + action: 'STAKE_SUCCESS', + userId: address, + category: 'stake_success', + }) + setTrxHash(result.hash) } catch (err) { const errorObject = err as Dict @@ -257,7 +280,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { updateIqToBeLocked(e.target.value)} + onChange={e => updateIqToBeLocked(e.target.value)} placeholder="23.00" value={userInput} color="fadedText4" @@ -283,7 +306,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 4f375f8a..aab31252 100644 --- a/src/components/wallet/WalletConnect.tsx +++ b/src/components/wallet/WalletConnect.tsx @@ -14,6 +14,7 @@ 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 = ({ onClose, @@ -22,6 +23,7 @@ const WalletConnect = ({ isOpen: boolean onClose: () => void }) => { + const posthog = usePostHog() const { connectors, connect } = useConnect({ onError(error) { logEvent({ @@ -53,6 +55,12 @@ const WalletConnect = ({ value: 1, category: 'connectors', }) + posthog.capture('LOGIN_ATTEMPT', { + action: 'LOGIN_ATTEMPT', + label: selectedConnector.name, + category: 'connectors', + }) + connect({ connector: selectedConnector }) onClose() } diff --git a/src/config/index.ts b/src/config/index.ts index fbdf5c53..8f462231 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -64,6 +64,7 @@ const config = { : (process.env.NEXT_PUBLIC_WIQ_ADDRESS as `0x${string}`), abi: erc20Abi, }, + posthugApikey: process.env.NEXT_PUBLIC_POSTHOG_KEY || '', } export default config diff --git a/yarn.lock b/yarn.lock index e187c5b0..f1b3485f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5047,6 +5047,11 @@ fetch-ponyfill@^7.1.0: dependencies: node-fetch "~2.6.1" +fflate@^0.4.8: + version "0.4.8" + resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae" + integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA== + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -6738,11 +6743,24 @@ postcss@8.4.14: picocolors "^1.0.0" source-map-js "^1.0.2" +posthog-js@^1.139.3: + version "1.139.5" + resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.139.5.tgz#f6f854374b3bae0d917889081e283aa5b91b3db2" + integrity sha512-awnIAefNa+x5GA481B8j8J6S2xLcvHQ7i5Osyzq1UK6QGtmAaM0ttGFU+oPjpKxo4yXeuF5R1aUo9YE67s4+vA== + dependencies: + fflate "^0.4.8" + preact "^10.19.3" + preact@^10.12.0, preact@^10.5.9: version "10.15.1" resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede" integrity sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g== +preact@^10.19.3: + version "10.22.0" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.22.0.tgz#a50f38006ae438d255e2631cbdaf7488e6dd4e16" + integrity sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw== + preferred-pm@^3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6" From fb102bb00f4f8e0f5c322190e43956a60ecc61f7 Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:26:28 +0100 Subject: [PATCH 2/9] fixes formatting --- src/components/client/BridgePage.tsx | 12 ++++++------ src/components/lock/StakeIQ.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/client/BridgePage.tsx b/src/components/client/BridgePage.tsx index fe16dd10..5a553a4c 100644 --- a/src/components/client/BridgePage.tsx +++ b/src/components/client/BridgePage.tsx @@ -149,7 +149,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 +268,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 +279,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 +293,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/lock/StakeIQ.tsx b/src/components/lock/StakeIQ.tsx index 4eb0bfc4..fdd66cec 100644 --- a/src/components/lock/StakeIQ.tsx +++ b/src/components/lock/StakeIQ.tsx @@ -280,7 +280,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 +306,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => { {userTotalIQLocked < 1 && ( - updateLockend(newDate)} /> + updateLockend(newDate)} /> )} } From f496bc30b5ff2ebd5073f0d0f25e7497031679b6 Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:29:53 +0100 Subject: [PATCH 3/9] fixes formatting --- src/components/client/AppProviders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index a00f2395..986514af 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -12,7 +12,7 @@ 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 './CgPosthogProvider' +import { CSPostHogProvider } from '@/components/client/CgPosthogProvider' const { ToastContainer } = createStandaloneToast() const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element From 7999121ed26622ffc2c08d4dd42279aeb2715c5b Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:41:24 +0100 Subject: [PATCH 4/9] fixes file path --- src/components/client/AppProviders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index 986514af..a00f2395 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -12,7 +12,7 @@ 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 '@/components/client/CgPosthogProvider' +import { CSPostHogProvider } from './CgPosthogProvider' const { ToastContainer } = createStandaloneToast() const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element From 47f610acebbfc81a6eb758f1fafbd1c4cb10a9de Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:44:55 +0100 Subject: [PATCH 5/9] fixes file path --- src/components/client/AppProviders.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index a00f2395..986514af 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -12,7 +12,7 @@ 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 './CgPosthogProvider' +import { CSPostHogProvider } from '@/components/client/CgPosthogProvider' const { ToastContainer } = createStandaloneToast() const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element From 391a7fde69286e75a88c7d48806a449d5d7413a6 Mon Sep 17 00:00:00 2001 From: Adebesin Cell Date: Thu, 20 Jun 2024 20:51:25 +0100 Subject: [PATCH 6/9] rename file --- src/components/client/AppProviders.tsx | 2 +- .../client/{CgPostHogProvider.tsx => PosthogProvider.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/client/{CgPostHogProvider.tsx => PosthogProvider.tsx} (100%) diff --git a/src/components/client/AppProviders.tsx b/src/components/client/AppProviders.tsx index 986514af..3cf419ab 100644 --- a/src/components/client/AppProviders.tsx +++ b/src/components/client/AppProviders.tsx @@ -12,7 +12,7 @@ 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 '@/components/client/CgPosthogProvider' +import { CSPostHogProvider } from './PosthogProvider' const { ToastContainer } = createStandaloneToast() const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element diff --git a/src/components/client/CgPostHogProvider.tsx b/src/components/client/PosthogProvider.tsx similarity index 100% rename from src/components/client/CgPostHogProvider.tsx rename to src/components/client/PosthogProvider.tsx From 34a0f59a019cfb4301ebc7b56fdc9b6c038316b4 Mon Sep 17 00:00:00 2001 From: Srujan Gurram <52039218+Royal-lobster@users.noreply.github.com> Date: Fri, 21 Jun 2024 14:39:45 +0530 Subject: [PATCH 7/9] Update src/config/index.ts --- src/config/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/index.ts b/src/config/index.ts index 8f462231..55beb250 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -64,7 +64,7 @@ const config = { : (process.env.NEXT_PUBLIC_WIQ_ADDRESS as `0x${string}`), abi: erc20Abi, }, - posthugApikey: process.env.NEXT_PUBLIC_POSTHOG_KEY || '', + posthogApikey: process.env.NEXT_PUBLIC_POSTHOG_KEY || '', } export default config From b6b8951d3e077ff3f4f2ada6e20c264ab18b2cc4 Mon Sep 17 00:00:00 2001 From: Srujan Gurram <52039218+Royal-lobster@users.noreply.github.com> Date: Fri, 21 Jun 2024 14:39:51 +0530 Subject: [PATCH 8/9] Update src/components/client/PosthogProvider.tsx --- src/components/client/PosthogProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/client/PosthogProvider.tsx b/src/components/client/PosthogProvider.tsx index 5d6e2bf0..9da12bdc 100644 --- a/src/components/client/PosthogProvider.tsx +++ b/src/components/client/PosthogProvider.tsx @@ -5,7 +5,7 @@ import { useEffect } from 'react' import { useAccount } from 'wagmi' if (typeof window !== 'undefined') { - posthog.init(config.posthugApikey, { + posthog.init(config.posthogApikey, { api_host: '/ingest', ui_host: 'https://us.posthog.com', person_profiles: 'identified_only', From 39f3abe3fe92440d23126367d725c56bf507fa3a Mon Sep 17 00:00:00 2001 From: Srujan Gurram <52039218+Royal-lobster@users.noreply.github.com> Date: Fri, 21 Jun 2024 15:51:16 +0530 Subject: [PATCH 9/9] Update src/components/client/PosthogProvider.tsx --- src/components/client/PosthogProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/client/PosthogProvider.tsx b/src/components/client/PosthogProvider.tsx index 9da12bdc..339d9b8e 100644 --- a/src/components/client/PosthogProvider.tsx +++ b/src/components/client/PosthogProvider.tsx @@ -8,7 +8,6 @@ if (typeof window !== 'undefined') { posthog.init(config.posthogApikey, { api_host: '/ingest', ui_host: 'https://us.posthog.com', - person_profiles: 'identified_only', }) }