Separate posthog provider component

packages/keychain/src/components/ErrorBoundary.tsx

@@ -4,7 +4,7 @@ import { AlertIcon, ExternalIcon, Button } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 import { useEffect } from "react";
 
 export class ErrorBoundary extends React.Component<

packages/keychain/src/components/connect/create/CreateController.tsx

@@ -10,7 +10,7 @@ import { useCreateController } from "./useCreateController";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 
 interface CreateControllerViewProps {
   theme: VerifiableControllerTheme;

packages/keychain/src/components/home.tsx

@@ -13,7 +13,7 @@ import { Settings } from "./settings";
 import { SignMessage } from "./SignMessage";
 import { PageLoading } from "./Loading";
 import { execute } from "@/utils/connection/execute";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 
 export function Home() {
   const { context, setContext, controller, error, policies, upgrade } =

packages/keychain/src/components/provider/index.tsx

@@ -4,12 +4,12 @@ import { useConnectionValue } from "@/hooks/connection";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { ENDPOINT } from "@/utils/graphql";
 import { ConnectionContext } from "./connection";
+import { PostHogProvider } from "./posthog";
 import { ControllerThemeProvider } from "./theme";
 import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core";
 import { sepolia, mainnet } from "@starknet-react/chains";
 import { constants, num } from "starknet";
 import { BrowserRouter } from "react-router-dom";
-import { PostHogProvider } from "@/context/posthog";
 
 export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();

packages/keychain/src/components/provider/posthog.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { PostHogContext, PostHogWrapper } from "@/context/posthog";
+
+export function PostHogProvider({ children }: PropsWithChildren) {
+  const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, {
+    host: import.meta.env.VITE_POSTHOG_HOST,
+    persistence: "memory",
+    autocapture: false,
+  });
+
+  return (
+    <PostHogContext.Provider value={{ posthog }}>
+      {children}
+    </PostHogContext.Provider>
+  );
+}

packages/keychain/src/context/posthog.tsx

@@ -1,10 +1,10 @@
-import { createContext, useContext, PropsWithChildren } from "react";
+import { createContext } from "react";
 import PostHog from "posthog-js-lite";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Properties = Record<string, any>;
 
-class PostHogWrapper extends PostHog {
+export class PostHogWrapper extends PostHog {
   isLocal =
     typeof window !== "undefined" &&
     window.location.hostname.includes("localhost");
@@ -87,26 +87,6 @@ interface PostHogContextType {
   posthog: PostHogWrapper;
 }
 
-const PostHogContext = createContext<PostHogContextType | undefined>(undefined);
-
-export function PostHogProvider({ children }: PropsWithChildren) {
-  const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, {
-    host: import.meta.env.VITE_POSTHOG_HOST,
-    persistence: "memory",
-    autocapture: false,
-  });
-
-  return (
-    <PostHogContext.Provider value={{ posthog }}>
-      {children}
-    </PostHogContext.Provider>
-  );
-}
-
-export function usePostHog() {
-  const context = useContext(PostHogContext);
-  if (!context) {
-    return undefined;
-  }
-  return context.posthog;
-}
+export const PostHogContext = createContext<PostHogContextType | undefined>(
+  undefined,
+);

packages/keychain/src/hooks/connection.ts

@@ -18,7 +18,7 @@ import {
   ConnectionContextValue,
 } from "@/components/provider/connection";
 import { UpgradeInterface, useUpgrade } from "./upgrade";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 import { Policies } from "@cartridge/presets";
 import {
   defaultTheme,

packages/keychain/src/hooks/posthog.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { PostHogContext } from "@/context/posthog";
+
+export function usePostHog() {
+  const context = useContext(PostHogContext);
+  if (!context) {
+    return undefined;
+  }
+  return context.posthog;
+}