feat: mixpanel experimentation (wip)

Author: jaybuidl

web/package.json

@@ -48,20 +48,23 @@
     "@parcel/watcher": "~2.2.0",
     "@types/amqplib": "^0.10.1",
     "@types/busboy": "^1.5.0",
+    "@types/mixpanel-browser": "^2.47.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@typescript-eslint/utils": "^5.58.0",
     "@wagmi/cli": "^1.3.0",
+    "crypto-browserify": "^3.12.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
     "parcel": "2.8.3",
+    "string_decoder": "^1.3.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
@@ -81,6 +84,7 @@
     "ethers": "^5.7.2",
     "graphql": "^16.7.1",
     "graphql-request": "~6.1.0",
+    "mixpanel-browser": "^2.47.0",
     "moment": "^2.29.4",
     "overlayscrollbars": "^2.3.0",
     "overlayscrollbars-react": "^0.5.2",

web/src/app.tsx

@@ -14,8 +14,10 @@ import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
+import mixpanel from "./utils/mixpanel";
 
 const App: React.FC = () => {
+  mixpanel.track("App");
   return (
     <StyledComponentsProvider>
       <QueryClientProvider>

web/src/components/CasesDisplay/index.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 import CasesGrid, { ICasesGrid } from "./CasesGrid";
+import useTracking from "../../hooks/useTracking";
 
 const StyledHR = styled.hr`
   margin-top: 24px;
@@ -22,26 +23,37 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   casesPerPage,
   title = "Cases",
   className,
-}) => (
-  <div {...{ className }}>
-    <h1>{title}</h1>
-    <Search />
-    <StatsAndFilters />
-    <StyledHR />
-    {disputes.length > 0 ? (
-      <CasesGrid
-        {...{
-          disputes,
-          currentPage,
-          setCurrentPage,
-          numberDisputes,
-          casesPerPage,
-        }}
-      />
-    ) : (
-      <h1>wow no cases</h1>
-    )}
-  </div>
-);
+}) => {
+  useTracking("CasesDisplay", {
+    disputes,
+    currentPage,
+    setCurrentPage,
+    numberDisputes,
+    casesPerPage,
+    title,
+    className,
+  });
+  return (
+    <div {...{ className }}>
+      <h1>{title}</h1>
+      <Search />
+      <StatsAndFilters />
+      <StyledHR />
+      {disputes.length > 0 ? (
+        <CasesGrid
+          {...{
+            disputes,
+            currentPage,
+            setCurrentPage,
+            numberDisputes,
+            casesPerPage,
+          }}
+        />
+      ) : (
+        <h1>wow no cases</h1>
+      )}
+    </div>
+  );
+};
 
 export default CasesDisplay;

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
 import Identicon from "react-identicons";
 import { shortenAddress } from "utils/shortenAddress";
+import { useIdentify } from "../../hooks/useTracking";
 
 const Container = styled.div`
   display: flex;
@@ -119,6 +120,7 @@ export const AddressOrName: React.FC = () => {
     address,
     chainId: 1,
   });
+  useIdentify(address);
   return <label>{data ?? (address && shortenAddress(address))}</label>;
 };
 

web/src/components/ConnectWallet/index.tsx

@@ -3,10 +3,12 @@ import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import { useWeb3Modal } from "@web3modal/react";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
+import useTracking from "../../hooks/useTracking";
 import AccountDisplay from "./AccountDisplay";
 
 export const SwitchChainButton: React.FC = () => {
   const { switchNetwork, isLoading } = useSwitchNetwork();
+  useTracking("Switch Network");
   const handleSwitch = () => {
     if (!switchNetwork) {
       console.error("Cannot switch network. Please do it manually.");
@@ -36,6 +38,7 @@ const ConnectButton: React.FC = () => {
 const ConnectWallet: React.FC = () => {
   const { chain } = useNetwork();
   const { isConnected } = useAccount();
+  useTracking("Connect Wallet", { chain });
   if (isConnected) {
     if (chain && chain.id !== DEFAULT_CHAIN) {
       return <SwitchChainButton />;

web/src/hooks/useTracking.ts

@@ -0,0 +1,23 @@
+// useTracking.ts
+import { useEffect } from "react";
+import mixpanel from "../utils/mixpanel";
+import crypto from "crypto";
+
+const useTracking = (eventName: string, props?: object) => {
+  useEffect(() => {
+    mixpanel.track(eventName, {
+      pathname: window.location.pathname,
+      ...(props ?? {}),
+    });
+  }, [eventName, props]);
+};
+
+export const useIdentify = (userId: string | undefined, props?: object) => {
+  useEffect(() => {
+    if (userId) {
+      mixpanel.identify(crypto.createHash("sha256").update(userId).digest("hex"));
+    }
+  }, [userId, props]);
+};
+
+export default useTracking;

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -8,6 +8,7 @@ import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
 import { useWalletClient, usePublicClient } from "wagmi";
 import { EnsureChain } from "components/EnsureChain";
 import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
+import mixpanel from "../../../../utils/mixpanel";
 
 const StyledModal = styled(Modal)`
   position: absolute;
@@ -82,6 +83,11 @@ const SubmitEvidenceModal: React.FC<{
                     });
                     await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(
                       () => {
+                        mixpanel.track("submitEvidence", {
+                          pathname: window.location.pathname,
+                          cid,
+                          evidenceGroup,
+                        });
                         setMessage("");
                         close();
                       }

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -16,6 +16,7 @@ import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
 import { EnsureChain } from "components/EnsureChain";
+import mixpanel from "../../../../utils/mixpanel";
 
 export enum ActionType {
   allowance = "allowance",
@@ -87,6 +88,10 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
       wrapWithToast(async () => await increaseAllowance().then((response) => response.hash), publicClient).finally(
         () => {
           setIsSending(false);
+          mixpanel.track("increaseAllowance", {
+            pathname: window.location.pathname,
+            amount: increaseAllowanceConfig.request.args[1].toString(),
+          });
         }
       );
     }
@@ -104,6 +109,12 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
         .then(() => setIsPopupOpen(true))
         .finally(() => {
           setIsSending(false);
+          mixpanel.track("setStake", {
+            pathname: window.location.pathname,
+            action: isStaking ? "stake" : "withdraw",
+            courtId: id,
+            stakeChange: (isStaking ? "" : "-") + parsedAmount.toString(),
+          });
         });
     }
   };

web/src/utils/mixpanel.ts

@@ -0,0 +1,9 @@
+import mixpanel from "mixpanel-browser";
+
+mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN!, {
+  debug: true,
+  track_pageview: true,
+  persistence: "localStorage",
+});
+
+export default mixpanel;