Add Plausible analytics to dev tool

apps/xmtp.chat/package.json

@@ -29,6 +29,7 @@
     "@xmtp/content-type-reply": "^2.0.0",
     "@xmtp/content-type-text": "^2.0.0",
     "date-fns": "^4.1.0",
+    "plausible-tracker": "^0.3.9",
     "react": "^18.3.1",
     "react-18-blockies": "^1.0.6",
     "react-dom": "^18.3.1",

apps/xmtp.chat/src/components/App.tsx

@@ -8,6 +8,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import Plausible from "plausible-tracker";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { useClient } from "../hooks/useClient";
@@ -63,6 +64,18 @@ export const App: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const plausible = Plausible({
+      domain: "xmtp.chat",
+    });
+    const cleanupAutoPageviews = plausible.enableAutoPageviews();
+    const cleanupAutoOutboundTracking = plausible.enableAutoOutboundTracking();
+    return () => {
+      cleanupAutoPageviews();
+      cleanupAutoOutboundTracking();
+    };
+  }, []);
+
   return (
     <>
       {unhandledRejectionError && (

apps/xmtp.chat/src/components/DisableAnalytics.tsx

@@ -0,0 +1,43 @@
+import { Box, Flex, Switch, Text, Tooltip } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import React from "react";
+import { IconInfoCircle } from "../icons/IconInfoCircle";
+
+const DisableAnalyticsLabel = () => {
+  return (
+    <Flex gap="xs" justify="space-between" align="center">
+      <Text>Disable analytics</Text>
+      <Tooltip
+        multiline
+        w={260}
+        label="We use the privacy-friendly Plausible Analytics to track usage and improve the app"
+        withArrow
+        events={{ hover: true, focus: true, touch: true }}>
+        <Box tabIndex={0} w={20} h={20}>
+          <IconInfoCircle size={20} />
+        </Box>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export const DisableAnalytics: React.FC = () => {
+  const [checked, setChecked] = useLocalStorage({
+    key: "plausible_ignore",
+    defaultValue: false,
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.currentTarget.checked);
+  };
+
+  return (
+    <Switch
+      size="md"
+      checked={checked}
+      onChange={handleChange}
+      labelPosition="left"
+      label={<DisableAnalyticsLabel />}
+    />
+  );
+};

apps/xmtp.chat/src/components/Settings.tsx

@@ -1,6 +1,7 @@
 import { Button, FocusTrap, Popover, Stack, useMatches } from "@mantine/core";
 import React, { useEffect, useRef } from "react";
 import { IconSettings } from "../icons/IconSettings";
+import { DisableAnalytics } from "./DisableAnalytics";
 import { LoggingSelect } from "./LoggingSelect";
 import { NetworkSelect } from "./NetworkSelect";
 import { useRefManager } from "./RefManager";
@@ -36,6 +37,7 @@ export const Settings: React.FC = () => {
             <UseEphemeralAccountOption />
             <NetworkSelect />
             <LoggingSelect />
+            <DisableAnalytics />
           </Stack>
         </FocusTrap>
       </Popover.Dropdown>

yarn.lock

@@ -5222,6 +5222,7 @@ __metadata:
     "@xmtp/content-type-reply": "npm:^2.0.0"
     "@xmtp/content-type-text": "npm:^2.0.0"
     date-fns: "npm:^4.1.0"
+    plausible-tracker: "npm:^0.3.9"
     postcss: "npm:^8.5.1"
     postcss-preset-mantine: "npm:^1.17.0"
     postcss-simple-vars: "npm:^7.0.1"
@@ -10145,6 +10146,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"plausible-tracker@npm:^0.3.9":
+  version: 0.3.9
+  resolution: "plausible-tracker@npm:0.3.9"
+  checksum: 10/d93176d342382aad10c53e041ab402e476d42f8ad11e04f4d0e598bca477fbf20774579a3b75832c27a42470fecf194469fa810cb521d2a36dfb4695f34a0d5a
+  languageName: node
+  linkType: hard
+
 "playwright-core@npm:1.49.1":
   version: 1.49.1
   resolution: "playwright-core@npm:1.49.1"