feat: :mute: complete removal of telemetry when allow_anonymous_telemetry false

2 files changed, 39 insertions, 13 deletions

diff --git a/extension/react-app/src/hooks/CustomPostHogProvider.tsx b/extension/react-app/src/hooks/CustomPostHogProvider.tsx
new file mode 100644
index 00000000..cc6de4a2
--- /dev/null
+++ b/extension/react-app/src/hooks/CustomPostHogProvider.tsx
@@ -0,0 +1,34 @@
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { PropsWithChildren, useEffect } from "react";
+import { RootStore } from "../redux/store";
+import { useSelector } from "react-redux";
+import React from "react";
+
+const CustomPostHogProvider = ({ children }: PropsWithChildren) => {
+  const allowAnonymousTelemetry = useSelector(
+    (store: RootStore) => store?.serverState?.config?.allow_anonymous_telemetry
+  );
+
+  const [client, setClient] = React.useState<any>(undefined);
+
+  useEffect(() => {
+    if (allowAnonymousTelemetry) {
+      posthog.init("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", {
+        api_host: "https://app.posthog.com",
+        disable_session_recording: true,
+      });
+      setClient(client);
+    } else {
+      setClient(undefined);
+    }
+  }, [allowAnonymousTelemetry]);
+
+  return allowAnonymousTelemetry ? (
+    <PostHogProvider client={client}>{children}</PostHogProvider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default CustomPostHogProvider;
diff --git a/extension/react-app/src/main.tsx b/extension/react-app/src/main.tsx
index 1776490c..79c8e70b 100644
--- a/extension/react-app/src/main.tsx
+++ b/extension/react-app/src/main.tsx
@@ -5,22 +5,14 @@ import { Provider } from "react-redux";
 import store from "./redux/store";
 import "./index.css";
 
-import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
-
-console.log("Starting React");
-
-posthog.init("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", {
-  api_host: "https://app.posthog.com",
-  disable_session_recording: true,
-});
+import CustomPostHogProvider from "./hooks/CustomPostHogProvider";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <PostHogProvider client={posthog}>
-      <Provider store={store}>
+    <Provider store={store}>
+      <CustomPostHogProvider>
         <App />
-      </Provider>
-    </PostHogProvider>
+      </CustomPostHogProvider>
+    </Provider>
   </React.StrictMode>
 );