feat(platform): Platform Telemetry

.github/workflows/main-address.yaml

@@ -60,6 +60,7 @@ jobs:
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
             SECRET_ZERODEV_PROJECTID
+            POSTHOG_API_KEY
         env:
           NODE_ENV: 'development'
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_DEV }}
@@ -75,3 +76,4 @@ jobs:
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_DEV }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_DEV }}
           SECRET_ZERODEV_PROJECTID: ${{secrets.SECRET_ZERODEV_PROJECTID_DEV }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_DEV }}

.github/workflows/main-console.yaml

@@ -55,6 +55,7 @@ jobs:
             STRIPE_API_SECRET
             STRIPE_WEBHOOK_SECRET
             STRIPE_PRO_PLAN_ID
+            POSTHOG_API_KEY
         env:
           NODE_ENV: 'development'
           # A secret used for session encryption.
@@ -64,6 +65,7 @@ jobs:
           STRIPE_API_SECRET: ${{ secrets.STRIPE_API_SECRET_DEV }}
           STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET_DEV }}
           STRIPE_PRO_PLAN_ID: ${{ secrets.STRIPE_PRO_PLAN_ID_DEV }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_DEV }}
 
       - name: Setup Playwright
         working-directory: 'apps/console'

.github/workflows/main-passport.yaml

@@ -64,6 +64,7 @@ jobs:
             SECRET_APPLE_OAUTH_CLIENT_SECRET
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
+            POSTHOG_API_KEY
         env:
           NODE_ENV: 'development'
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_DEV }}
@@ -81,6 +82,7 @@ jobs:
           SECRET_APPLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_APPLE_OAUTH_CLIENT_SECRET_DEV }}
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_DEV }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_DEV }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_DEV }}
 
       - name: Setup Playwright
         run: yarn playwright install --with-deps

.github/workflows/next-address.yaml

@@ -60,6 +60,7 @@ jobs:
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
             SECRET_ZERODEV_PROJECTID
+            POSTHOG_API_KEY
         env:
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_TEST }}
           SECRET_GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_GOOGLE_OAUTH_CLIENT_SECRET_TEST }}
@@ -74,3 +75,4 @@ jobs:
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_TEST }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_TEST }}
           SECRET_ZERODEV_PROJECTID: ${{secrets.SECRET_ZERODEV_PROJECTID_TEST }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_TEST }}

.github/workflows/next-console.yaml

@@ -55,10 +55,12 @@ jobs:
             STRIPE_API_SECRET
             STRIPE_WEBHOOK_SECRET
             STRIPE_PRO_PLAN_ID
+            POSTHOG_API_KEY
         env:
           # A secret used for session encryption.
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_TEST }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_TEST }}
           STRIPE_API_SECRET: ${{ secrets.STRIPE_API_SECRET_TEST }}
           STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET_TEST }}
           STRIPE_PRO_PLAN_ID: ${{ secrets.STRIPE_PRO_PLAN_ID_TEST }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_TEST }}

.github/workflows/next-passport.yaml

@@ -62,6 +62,7 @@ jobs:
             SECRET_APPLE_OAUTH_CLIENT_SECRET
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
+            POSTHOG_API_KEY
         env:
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_TEST }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_TEST }}
@@ -78,3 +79,4 @@ jobs:
           SECRET_APPLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_APPLE_OAUTH_CLIENT_SECRET_TEST }}
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_TEST }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_TEST }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_TEST }}

.github/workflows/release-address.yaml

@@ -59,6 +59,7 @@ jobs:
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
             SECRET_ZERODEV_PROJECTID
+            POSTHOG_API_KEY
         env:
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_PROD }}
           SECRET_GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_GOOGLE_OAUTH_CLIENT_SECRET_PROD }}
@@ -73,3 +74,4 @@ jobs:
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_PROD }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_PROD }}
           SECRET_ZERODEV_PROJECTID: ${{secrets.SECRET_ZERODEV_PROJECTID_PROD }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_PROD }}

.github/workflows/release-console.yaml

@@ -50,10 +50,12 @@ jobs:
             STRIPE_API_SECRET
             STRIPE_WEBHOOK_SECRET
             STRIPE_PRO_PLAN_ID
+            POSTHOG_API_KEY
         env:
           # A secret used for session encryption.
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_PROD }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_PROD }}
           STRIPE_API_SECRET: ${{ secrets.STRIPE_API_SECRET_PROD }}
           STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET_PROD }}
           STRIPE_PRO_PLAN_ID: ${{ secrets.STRIPE_PRO_PLAN_ID_PROD }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_PROD }}

.github/workflows/release-passport.yaml

@@ -58,6 +58,7 @@ jobs:
             SECRET_APPLE_OAUTH_CLIENT_SECRET
             INTERNAL_DISCORD_OAUTH_CLIENT_ID
             SECRET_DISCORD_OAUTH_CLIENT_SECRET
+            POSTHOG_API_KEY
         env:
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_PROD }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_PROD }}
@@ -74,3 +75,4 @@ jobs:
           SECRET_APPLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_APPLE_OAUTH_CLIENT_SECRET_PROD }}
           INTERNAL_DISCORD_OAUTH_CLIENT_ID: ${{ secrets.INTERNAL_DISCORD_OAUTH_CLIENT_ID_PROD }}
           SECRET_DISCORD_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_DISCORD_OAUTH_CLIENT_SECRET_PROD }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY_PROD }}

apps/console/.dev.vars.example

@@ -5,3 +5,5 @@ INTERNAL_GOOGLE_ANALYTICS_TAG = "G-NHNH4KRWC3"
 STRIPE_API_SECRET = ""
 STRIPE_WEBHOOK_SECRET = ""
 STRIPE_PRO_PLAN_ID = ""
+
+POSTHOG_API_KEY=""

apps/console/app/components/SiteHeader/sign-out-link.tsx

@@ -3,16 +3,24 @@ import { Text } from '@proofzero/design-system/src/atoms/text/Text'
 
 import { HiOutlineLogout } from 'react-icons/hi'
 
+import { usePostHog } from 'posthog-js/react'
+
 export default function SignOut({ className }: { className: string }) {
   let submit = useSubmit()
 
+  const posthog = usePostHog()
+
   return (
     <button
       className={`${className} w-full text-left block px-4 py-2
       text-sm  hover:bg-gray-100' w-full text-left
       flex flex-row items-center text-red-500`}
       style={{ cursor: 'pointer' }}
-      onClick={() => submit(null, { method: 'post', action: `/signout/` })}
+      onClick={() => {
+        // https://posthog.com/docs/data/identify
+        posthog?.reset()
+        submit(null, { method: 'post', action: `/signout/` })
+      }}
     >
       <HiOutlineLogout size={22} className="mr-2" />
       <Text className="truncate" size="sm" weight="medium">

apps/console/app/components/SiteMenu/index.tsx

@@ -36,6 +36,8 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import type { IconType } from 'react-icons'
 import { Avatar } from '@proofzero/design-system'
 
+import { usePostHog } from 'posthog-js/react'
+
 // RollupLogo
 // -----------------------------------------------------------------------------
 export const ConsoleLogo = () => {
@@ -77,6 +79,7 @@ export default function SiteMenu(props: RollupMenuProps) {
   let [referenceElement, setReferenceElement] = useState()
   let [popperElement, setPopperElement] = useState()
   let { attributes } = usePopper(referenceElement, popperElement)
+  const posthog = usePostHog()
 
   const submit = useSubmit()
 
@@ -152,6 +155,7 @@ export default function SiteMenu(props: RollupMenuProps) {
                   <button
                     onClick={() => {
                       close()
+                      posthog?.reset()
                       submit(null, { method: 'post', action: 'signout' })
                     }}
                     className={`w-full flex self-center justify-between w-full

apps/console/app/entry.server.tsx

@@ -38,16 +38,14 @@ export default function handleRequest(
     (nonce, dev) =>
       getCSP({
         directives: {
-          'default-src': [
-            SELF,
-            'https://verify.walletconnect.com'
-          ],
+          'default-src': [SELF, 'https://verify.walletconnect.com'],
           'connect-src': [
             SELF,
             '*.google-analytics.com',
             'wss://relay.walletconnect.com',
             'https://*.g.alchemy.com',
             'https://upload.imagedelivery.net',
+            'https://posthog.rollup.id',
             // Used for Remix WebSocket Live Reaload
             ...(dev ? ['ws://localhost:*/socket'] : []),
           ],

apps/console/app/root.tsx

@@ -13,6 +13,7 @@ import { Loader } from '@proofzero/design-system/src/molecules/loader/Loader'
 import { json } from '@remix-run/cloudflare'
 
 import { ErrorPage } from '@proofzero/design-system/src/pages/error/ErrorPage'
+import { POSTHOG_PROXY_HOST } from '@proofzero/utils/posthog'
 
 import {
   Links,
@@ -49,8 +50,10 @@ import { NonceContext } from '@proofzero/design-system/src/atoms/contexts/nonce-
 
 import useTreeshakeHack from '@proofzero/design-system/src/hooks/useTreeshakeHack'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
-import { ServicePlanType } from '@proofzero/types/account'
+import { type ServicePlanType } from '@proofzero/types/account'
 import { BadRequestError } from '@proofzero/errors'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 
 export const links: LinksFunction = () => {
   return [
@@ -84,10 +87,12 @@ export type LoaderData = {
   PASSPORT_URL: string
   displayName: string
   ENV: {
+    POSTHOG_API_KEY: string
     INTERNAL_GOOGLE_ANALYTICS_TAG: string
     REMIX_DEV_SERVER_WS_PORT?: number
     WALLET_CONNECT_PROJECT_ID: string
   }
+  accountURN: AccountURN
 }
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
@@ -149,6 +154,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         avatarUrl,
         PASSPORT_URL,
         ENV: {
+          POSTHOG_API_KEY,
           INTERNAL_GOOGLE_ANALYTICS_TAG,
           REMIX_DEV_SERVER_WS_PORT:
             process.env.NODE_ENV === 'development'
@@ -157,6 +163,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
           WALLET_CONNECT_PROJECT_ID,
         },
         displayName,
+        accountURN,
       })
     } catch (error) {
       console.error({ error })
@@ -177,14 +184,23 @@ export default function App() {
   const remixDevPort = loaderData.ENV.REMIX_DEV_SERVER_WS_PORT
   useTreeshakeHack(remixDevPort)
 
-  const { apps, avatarUrl, PASSPORT_URL, displayName } = loaderData
+  const { apps, avatarUrl, PASSPORT_URL, displayName, accountURN } = loaderData
 
   useEffect(() => {
     if (GATag) {
       gtag.pageview(location.pathname, GATag)
     }
   }, [location, GATag])
 
+  // https://posthog.com/docs/libraries/react#posthog-provider
+  if (typeof window !== 'undefined') {
+    posthog.init(loaderData.ENV.POSTHOG_API_KEY, {
+      api_host: POSTHOG_PROXY_HOST,
+    })
+
+    posthog?.identify(accountURN)
+  }
+
   return (
     <html lang="en" className="h-full">
       <head>
@@ -217,7 +233,29 @@ export default function App() {
           </>
         )}
         {transition.state !== 'idle' ? <Loader /> : null}
-        <Outlet context={{ apps, avatarUrl, PASSPORT_URL, displayName }} />
+        {typeof window !== 'undefined' ? (
+          <PostHogProvider client={posthog}>
+            <Outlet
+              context={{
+                apps,
+                avatarUrl,
+                PASSPORT_URL,
+                displayName,
+                accountURN,
+              }}
+            />
+          </PostHogProvider>
+        ) : (
+          <Outlet
+            context={{
+              apps,
+              avatarUrl,
+              PASSPORT_URL,
+              displayName,
+              accountURN,
+            }}
+          />
+        )}
         <ScrollRestoration nonce={nonce} />
         <script
           nonce={nonce}

apps/console/app/routes/apps/$clientId.tsx

@@ -126,7 +126,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
 export default function AppDetailIndexPage() {
   const loaderData = useLoaderData<LoaderData>()
 
-  const { apps, avatarUrl, PASSPORT_URL, displayName } =
+  const { apps, avatarUrl, PASSPORT_URL, displayName, accountURN } =
     useOutletContext<OutletContextData>()
   const {
     appDetails,
@@ -188,6 +188,7 @@ export default function AppDetailIndexPage() {
                   appContactAddress,
                   appContactEmail,
                   paymaster,
+                  accountURN,
                 }}
               />
             </section>

apps/console/app/routes/apps/$clientId/auth.tsx

@@ -42,6 +42,8 @@ import type { notificationHandlerType } from '~/types'
 import { SCOPE_SMART_CONTRACT_WALLETS } from '@proofzero/security/scopes'
 import { BadRequestError } from '@proofzero/errors'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
+import { usePostHog } from 'posthog-js/react'
+import { type AccountURN } from '@proofzero/urns/account'
 
 /**
  * @file app/routes/dashboard/index.tsx
@@ -222,6 +224,7 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
       rotatedSecret,
       updatedApp: { published, app: { ...updates } },
       errors,
+      published,
     })
   }
 )
@@ -233,14 +236,17 @@ export default function AppDetailIndexPage() {
   const submit = useSubmit()
   const actionData = useActionData()
   const outletContextData = useOutletContext<{
+    accountURN: AccountURN
     notificationHandler: notificationHandlerType
     appDetails: appDetailsProps
     rotationResult: any
     paymaster: PaymasterType
     appContactAddress?: AddressURN
   }>()
-  const { appContactAddress, paymaster } = outletContextData
+  const { appContactAddress, paymaster, notificationHandler, appDetails } =
+    outletContextData
   const { scopeMeta }: { scopeMeta: ScopeMeta } = useLoaderData()
+  const posthog = usePostHog()
 
   const ref = useRef(null)
   const [multiselectComponentWidth, setMultiselectComponentWidth] = useState(0)
@@ -273,12 +279,18 @@ export default function AppDetailIndexPage() {
   const [isImgUploading, setIsImgUploading] = useState(false)
   const [rollKeyModalOpen, setRollKeyModalOpen] = useState(false)
 
-  const { notificationHandler, appDetails } = outletContextData
   const rotatedSecret =
     outletContextData?.rotationResult?.rotatedClientSecret ||
     actionData?.rotatedSecret
 
-  if (actionData?.updatedApp) Object.assign(appDetails, actionData.updatedapp)
+  useEffect(() => {
+    if (actionData?.updatedApp) Object.assign(appDetails, actionData.updatedapp)
+    if (actionData?.published) {
+      posthog?.capture('app_published', {
+        client_id: appDetails.clientId,
+      })
+    }
+  }, [actionData])
 
   const errors = actionData?.errors