Merge pull request #269 from EveripediaNetwork/adds-posthog

Adds posthog

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

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",

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 './PosthogProvider'
 
 const { ToastContainer } = createStandaloneToast()
 const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element
@@ -30,15 +31,18 @@ const AppProviders = ({ children }: { children: React.ReactNode }) => {
         <ChakraProvider resetCSS theme={chakraTheme}>
           <Fonts />
           <WagmiConfig config={client}>
-            <GoogleAnalyticsScripts />
-            <UALProviderSwitch>
-              <WalletProvider>
-                <DashboardLayout>{children}</DashboardLayout>
-              </WalletProvider>
-            </UALProviderSwitch>
+            <CSPostHogProvider>
+              <GoogleAnalyticsScripts />
+              <UALProviderSwitch>
+                <WalletProvider>
+                  <DashboardLayout>{children}</DashboardLayout>
+                </WalletProvider>
+              </UALProviderSwitch>
+            </CSPostHogProvider>
           </WagmiConfig>
         </ChakraProvider>
       </ReduxProvider>
+
       <ToastContainer />
     </>
   )

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<AuthContextType>(UALContext)
@@ -65,6 +66,7 @@ const BridgePage = () => {
     bridgeFromPTokenToEth,
     pIQTokenBalance,
   } = useBridge()
+  const posthog = usePostHog()
 
   const handleError = (errorMsg: string) => {
     showToast(errorMsg, 'error')
@@ -136,6 +138,12 @@ 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')
   }

src/components/client/PosthogProvider.tsx

@@ -0,0 +1,41 @@
+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.posthogApikey, {
+    api_host: '/ingest',
+    ui_host: 'https://us.posthog.com',
+  })
+}
+
+export const CSPostHogProvider = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  return (
+    <PostHogProvider client={posthog}>
+      <PosthogAuthWrapper>{children}</PosthogAuthWrapper>
+    </PostHogProvider>
+  )
+}
+
+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}</>
+}

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<IconButtonProps> = ({
   icon,
   ariaLabel,
 }) => {
+  const posthog = usePostHog()
+
   return (
     <Link
       href={href}
       target="_blank"
-      onClick={() =>
+      onClick={() => {
         logEvent({
           category: 'Dashboard',
           action: 'Click',
           label: `${logEventLabel}`,
           value: 1,
         })
-      }
+        posthog.capture('exchange_link_click', {
+          category: 'Dashboard',
+          target: logEventLabel,
+        })
+      }}
     >
       <IconButton
         variant="outline"

src/components/lock/StakeIQ.tsx

@@ -19,6 +19,7 @@ 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 StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => {
   const [iqToBeLocked, setIqToBeLocked] = useState<bigint>()
@@ -37,6 +38,7 @@ const StakeIQ = ({ exchangeRate }: { exchangeRate: number }) => {
   const [lockend, setLockend] = useState<Date>()
   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

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()
   }

src/config/index.ts

@@ -64,6 +64,7 @@ const config = {
         : (process.env.NEXT_PUBLIC_WIQ_ADDRESS as `0x${string}`),
     abi: erc20Abi,
   },
+  posthogApikey: process.env.NEXT_PUBLIC_POSTHOG_KEY || '',
 }
 
 export default config

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==
+
 [email protected]:
   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 @@ [email protected]:
     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"