FET-1721: Implement posthog (hosted)

package.json

@@ -84,6 +84,7 @@
     "markdown-to-jsx": "^7.1.7",
     "next": "13.5.6",
     "node-fetch": "^3.3.2",
+    "posthog-js": "^1.199.0",
     "react": "*",
     "react-confetti": "^6.1.0",
     "react-dom": "*",

src/components/posthog/config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { PostHogConfig } from 'posthog-js'
+
+export const posthogConfig: {
+  apiKey: string
+  options: Partial<PostHogConfig>
+} = {
+  apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY!,
+  options: {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
+    autocapture: true,
+  },
+}

src/components/posthog/index.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { PostHogProvider } from 'posthog-js/react'
+
+import { posthogConfig } from './config'
+
+export function Posthog({ children }: React.PropsWithChildren) {
+  return (
+    <PostHogProvider apiKey={posthogConfig.apiKey} options={posthogConfig.options}>
+      {children}
+    </PostHogProvider>
+  )
+}

src/pages/_app.tsx

@@ -13,6 +13,7 @@ import { createGlobalStyle, keyframes, ThemeProvider } from 'styled-components'
 import { ThorinGlobalStyles, lightTheme as thorinLightTheme } from '@ensdomains/thorin'
 
 import { Notifications } from '@app/components/Notifications'
+import { Posthog } from '@app/components/posthog'
 import { TestnetWarning } from '@app/components/TestnetWarning'
 import { TransactionStoreProvider } from '@app/hooks/transactions/TransactionStoreContext'
 import { Basic } from '@app/layouts/Basic'
@@ -157,7 +158,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
                       <SyncDroppedTransaction>
                         <Notifications />
                         <TestnetWarning />
-                        <Basic>{getLayout(<Component {...pageProps} />)}</Basic>
+                        <Posthog>
+                          <Basic>{getLayout(<Component {...pageProps} />)}</Basic>
+                        </Posthog>
                       </SyncDroppedTransaction>
                     </TransactionFlowProvider>
                   </SyncProvider>