GeneralMagicio · HrithikSampson · Nov 20, 2024 · Nov 14, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/app/allocation/[category]/attestation/AttestationSuccessModal.tsx b/app/allocation/[category]/attestation/AttestationSuccessModal.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { usePostHog } from 'posthog-js/react';
 import { UpdateBallotButton } from '../components/UpdateBallotButton';
 interface Props {
   link: string
@@ -8,6 +9,12 @@ interface Props {
 
 const AttestationSuccessModal: React.FC<Props> = ({ link, onClose }) => {
   const [hideAttestation, setHideAttestation] = useState(false);
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    posthog.capture('View transaction after vote');
+  }, []);
+
   return (
     <div className={`${hideAttestation ? 'hidden' : 'mx-auto flex max-w-md flex-col items-center gap-6 overflow-hidden rounded-lg bg-white bg-ballot bg-no-repeat p-6 py-10 text-center shadow-lg'}`}>
       <Image

diff --git a/app/allocation/[category]/page.tsx b/app/allocation/[category]/page.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import debounce from 'lodash.debounce';
 import { useActiveWallet } from 'thirdweb/react';
+import { usePostHog } from 'posthog-js/react';
 import RankingRow from './components/RankingRow';
 import HeaderRF6 from '../../comparison/card/Header-RF6';
 import Spinner from '@/app/components/Spinner';
@@ -61,6 +62,7 @@ const votingStatusMap = {
 const RankingPage = () => {
   const params = useParams();
   const router = useRouter();
+  const posthog = usePostHog();
 
   const wallet = useActiveWallet();
   const signer = useSigner();
@@ -264,6 +266,7 @@ const RankingPage = () => {
     const lockedProjects = checkedItems.filter(
       checkedId => !lockedItems.includes(checkedId)
     );
+    posthog.capture('Lock selection');
 
     setLockedItems([...lockedItems, ...lockedProjects]);
     setCheckedItems([]);
@@ -436,6 +439,7 @@ const RankingPage = () => {
               }
               else {
                 handleAttestationModalClose();
+                setAttestationState(AttestationState.Initial);
               }
             }}
             isBadgeHolder={isBadgeholder}
@@ -642,7 +646,10 @@ const RankingPage = () => {
           <div className="flex justify-between">
             <button
               className="flex items-center justify-center gap-3 rounded-lg border bg-gray-50 px-4 py-2 font-semibold text-gray-700"
-              onClick={() => router.push('/allocation')}
+              onClick={() => {
+                posthog.capture('Back to categories');
+                router.push('/allocation');
+              }}
             >
               <ArrowLeft2Icon />
               Back to Categories

diff --git a/app/allocation/components/BudgetAllocation.tsx b/app/allocation/components/BudgetAllocation.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import Image from 'next/image';
+import { usePostHog } from 'posthog-js/react';
 import { useAuth } from '@/app/utils/wallet/AuthProvider';
 import { ArrowRightIcon } from '@/public/assets/icon-components/ArrowRightIcon';
 import { CollectionProgressStatusEnum } from '@/app/comparison/utils/types';
@@ -49,6 +50,7 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
   onDelegate,
 }) => {
   const { isAutoConnecting } = useAuth();
+  const posthog = usePostHog();
 
   const renderProgressState = useMemo(() => {
     switch (progress) {
@@ -75,8 +77,18 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
       default:
         return (
           <PendingCategory
-            onScore={onScore}
-            onDelegate={onDelegate}
+            onScore={() => {
+              posthog.capture('Start Voting', {
+                category: name,
+              });
+              onScore();
+            }}
+            onDelegate={() => {
+              posthog.capture('Start Voting', {
+                category: name,
+              });
+              onDelegate();
+            }}
             progress={progress}
             delegations={delegations}
             isAutoConnecting={isAutoConnecting}
@@ -123,20 +135,28 @@ const ProjectInfo: React.FC<{
   description: string
   isDelegated?: boolean
   onScore?: () => void
-}> = ({ name, description, isDelegated, onScore }) => (
-  <div
-    className={`flex max-w-[70%] flex-col gap-2 ${isDelegated && 'opacity-40'}`}
-  >
-    <button
-      className="flex items-center gap-2 font-medium"
-      onClick={onScore}
-      disabled={isDelegated}
+}> = ({ name, description, isDelegated, onScore }) => {
+  const posthog = usePostHog();
+  return (
+
+    <div
+      className={`flex max-w-[70%] flex-col gap-2 ${isDelegated && 'opacity-40'}`}
     >
-      {name}
-      <ArrowRightIcon color="#05060B" size={24} />
-    </button>
-    <p className="text-sm text-gray-400">{description}</p>
-  </div>
-);
+      <button
+        className="flex items-center gap-2 font-medium"
+        onClick={() => {
+          posthog.capture('Explore project', { category: name });
+          if (onScore)
+            onScore();
+        }}
+        disabled={isDelegated}
+      >
+        {name}
+        <ArrowRightIcon color="#05060B" size={24} />
+      </button>
+      <p className="text-sm text-gray-400">{description}</p>
+    </div>
+  );
+};
 
 export default BudgetAllocation;
diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx
@@ -3,6 +3,7 @@ import debounce from 'lodash.debounce';
 import Link from 'next/link';
 import Image from 'next/image';
 import { NumericFormat } from 'react-number-format';
+import { usePostHog } from 'posthog-js/react';
 import { roundFractions } from '../utils';
 import { useAuth } from '@/app/utils/wallet/AuthProvider';
 import { CollectionProgressStatusEnum } from '@/app/comparison/utils/types';
@@ -222,30 +223,44 @@ const ProjectInfo: FC<{
   projectCount?: number
   hrefLink: string
   isDelegated?: boolean
-}> = ({ name, description, projectCount, hrefLink, isDelegated }) => (
-  <div
-    className={`flex max-w-[70%] flex-col gap-2 ${isDelegated && 'opacity-40'}`}
-  >
-    {isDelegated
-      ? (
-          <p className="flex items-center gap-2 font-medium">
-            {name}
-            <ArrowRightIcon color="#05060B" size={24} />
-          </p>
-        )
-      : (
-          <Link className="flex items-center gap-2 font-medium" href={hrefLink}>
-            {name}
-            <ArrowRightIcon color="#05060B" size={24} />
-          </Link>
-        )}
-    <p className="text-sm text-gray-400">{description}</p>
-    {projectCount && (
-      <p className="mt-2 w-fit rounded-full bg-gray-200 px-2 py-1 text-xs font-medium text-gray-700">
-        {`${projectCount} project${projectCount > 1 ? 's' : ''}`}
-      </p>
-    )}
-  </div>
-);
+}> = ({ name, description, projectCount, hrefLink, isDelegated }) => {
+  const posthog = usePostHog();
+  return (
+    <div
+      className={`flex max-w-[70%] flex-col gap-2 ${isDelegated && 'opacity-40'}`}
+    >
+      {isDelegated
+        ? (
+            <p
+              className="flex items-center gap-2 font-medium"
+              onClick={() => {
+                posthog.capture('Explore project', { category: name });
+              }}
+            >
+              {name}
+              <ArrowRightIcon color="#05060B" size={24} />
+            </p>
+          )
+        : (
+            <Link
+              className="flex items-center gap-2 font-medium"
+              href={hrefLink}
+              onClick={() => {
+                posthog.capture('Explore project', { category: name });
+              }}
+            >
+              {name}
+              <ArrowRightIcon color="#05060B" size={24} />
+            </Link>
+          )}
+      <p className="text-sm text-gray-400">{description}</p>
+      {projectCount && (
+        <p className="mt-2 w-fit rounded-full bg-gray-200 px-2 py-1 text-xs font-medium text-gray-700">
+          {`${projectCount} project${projectCount > 1 ? 's' : ''}`}
+        </p>
+      )}
+    </div>
+  );
+};
 
 export default CategoryAllocation;
diff --git a/app/allocation/components/EOA/EmailLoginModal.tsx b/app/allocation/components/EOA/EmailLoginModal.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { preAuthenticate } from 'thirdweb/wallets/in-app';
+import { usePostHog } from 'posthog-js/react';
 import { ExternalLinkIcon } from '@/public/assets/icon-components/ExternalLink';
 import { brandColor } from '@/app/lib/constants';
 import { Strategy } from '@/app/lib/third-web/methods';
@@ -60,6 +61,7 @@ const EmailLoginModal = ({
     otpStatus: OtpStatus.SENT,
     sentAt: 0,
   });
+  const posthog = usePostHog();
   const [oAuthData, setOAuthData] = useState<TOAuthData>({
     email: '',
     loading: false,
@@ -180,7 +182,10 @@ const EmailLoginModal = ({
                     setOtpData={setOtpData}
                     setPickedMethod={setPickedMethod}
                     setOAuthData={setOAuthData}
-                    sendOTP={sendOTP}
+                    sendOTP={() => {
+                      posthog.capture('Continue with e-mail');
+                      sendOTP();
+                    }}
                     setStep={setStep}
                     closeModal={closeModal}
                   />

diff --git a/app/allocation/components/EOA/MethodSelection.tsx b/app/allocation/components/EOA/MethodSelection.tsx
@@ -1,6 +1,7 @@
 import React, { FC, FormEvent } from 'react';
 import Image from 'next/image';
 import { useConnect } from 'thirdweb/react';
+import { usePostHog } from 'posthog-js/react';
 import {
   createSmartWalletFromEOA,
   createSocialEoa,
@@ -34,6 +35,7 @@ export const MethodSelection: FC<IMethodSelectionProps> = ({
   closeModal,
 }) => {
   const { connect } = useConnect();
+  const posthog = usePostHog();
 
   const getUserSmartWallet = async () => {
     const userSmartWallet = await axiosInstance.get('auth/thirdweb/sa-address');
@@ -42,6 +44,7 @@ export const MethodSelection: FC<IMethodSelectionProps> = ({
 
   const handleOAuthConnect = (strategy: Strategy) => async () => {
     try {
+      posthog.capture('Continue with Gmail');
       setPickedMethod(strategy);
       setOAuthData({ ...oAuthData, loading: true });
       const socialEoa = await createSocialEoa(strategy);

diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { useActiveWallet } from 'thirdweb/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
+import { usePostHog } from 'posthog-js/react';
 import HeaderRF6 from '../comparison/card/Header-RF6';
 import Modal from '../utils/Modal';
 import EmailLoginModal from './components/EOA/EmailLoginModal';
@@ -74,6 +75,7 @@ const AllocationPage = () => {
   const signer = useSigner();
   const { chainId, address } = useAccount();
   const { isBadgeholder, category } = getJWTData();
+  const posthog = usePostHog();
 
   const { data: categories, isLoading: categoriesLoading } = useCategories();
   const { data: delegations, isLoading: delegationsLoading }
@@ -149,6 +151,7 @@ const AllocationPage = () => {
   const handleDelegate = async (username: string, target: TargetDelegate) => {
     if (!categoryToDelegate) return;
 
+    posthog.capture('Delegating vote power');
     await axiosInstance.post('flow/delegate/farcaster', {
       collectionId: categoryToDelegate.id,
       targetUsername: username,
@@ -240,6 +243,9 @@ const AllocationPage = () => {
   };
 
   const handleScoreProjects = (id: RankItem['id']) => () => {
+    posthog.capture('Start voting', {
+      category: categoryIdSlugMap.get(id),
+    });
     if (!wallet) {
       setShowLoginModal(true);
       return;
@@ -397,6 +403,9 @@ const AllocationPage = () => {
           <DelegateModal
             categoryName={categoryToDelegate!.name}
             onFindDelegatesFarcaster={() => {
+              posthog.capture('Find delegate on Farcaster', {
+                category: categoryToDelegate!.name,
+              });
               setDelegationState(DelegationState.Lookup);
             }}
             onFindDelegatesTwitter={() => {}}
@@ -581,6 +590,9 @@ const AllocationPage = () => {
                             isBHCategoryAtessted={isBHCategoryAtessted()}
                             categorySlug={categoryIdSlugMap.get(cat.id)!}
                             onDelegate={() => {
+                              posthog.capture('Start delegating', {
+                                category: cat.name,
+                              });
                               setCategoryToDelegate(cat);
                               setDelegationState(DelegationState.DelegationMethod);
                             }}
@@ -609,14 +621,20 @@ const AllocationPage = () => {
                   <div className="flex justify-between">
                     <button
                       className="flex items-center justify-center gap-3 rounded-lg border bg-gray-50 px-4 py-2 font-semibold text-gray-700"
-                      onClick={() => setAllocatingBudget(false)}
+                      onClick={() => {
+                        posthog.capture('Back to categories');
+                        setAllocatingBudget(false);
+                      }}
                     >
                       <ArrowLeft2Icon />
                       Back to Categories
                     </button>
                     <button
                       className="flex items-center justify-center gap-3 rounded-lg bg-primary px-10 py-2 font-semibold text-white"
-                      onClick={handleSubmitVote}
+                      onClick={() => {
+                        posthog.capture('Submit votes');
+                        handleSubmitVote();
+                      }}
                     >
                       Submit Vote
                       <ArrowRightIcon size={20} />

diff --git a/app/comparison/[category]/IntroView.tsx b/app/comparison/[category]/IntroView.tsx
@@ -1,10 +1,12 @@
 import { Dispatch, FC } from 'react';
 import Image from 'next/image';
+import { usePostHog } from 'posthog-js/react';
 import TextBlock from '../../components/TextBlock';
 
 const IntroView: FC<{ setUserAsVisited: Dispatch<void> }> = ({
   setUserAsVisited,
 }) => {
+  const posthog = usePostHog();
   return (
     <div className="relative flex h-[86vh] w-full flex-col-reverse items-center
     justify-end gap-8 px-8 py-2 lg:flex-row lg:gap-0 lg:p-0"
@@ -38,7 +40,13 @@ const IntroView: FC<{ setUserAsVisited: Dispatch<void> }> = ({
               scale: 2.4,
             }}
           />
-          <ActionButton onClick={() => setUserAsVisited()} text="Let's do it!" />
+          <ActionButton
+            onClick={() => {
+              posthog.capture('Let\'s do it');
+              setUserAsVisited();
+            }}
+            text="Let's do it!"
+          />
         </div>
       </div>