posthog migration: part 5

Author: jnsdls

apps/dashboard/src/@/analytics/report.ts

@@ -19,10 +19,26 @@ export function reportContractDeployed(properties: {
   address: string;
   chainId: number;
 }) {
-  posthog.capture("contract deployed", {
-    address: properties.address,
-    chainId: properties.chainId,
-  });
+  posthog.capture("contract deployed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of contracts published
+ * - To understand the type of contracts published
+ * - To understand who publishes contracts
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportContractPublished(properties: {
+  publisher: string;
+  contractName: string;
+  version: string;
+  deployType: string | undefined;
+}) {
+  posthog.capture("contract published", properties);
 }
 
 // ----------------------------
@@ -138,3 +154,54 @@ export function reportOnboardingMembersUpsellPlanSelected(properties: {
 export function reportOnboardingCompleted() {
   posthog.capture("onboarding completed");
 }
+
+// ----------------------------
+// FAUCET
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track which chain the faucet was used on
+ * - To track how popular specific faucets are
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportFaucetUsed(properties: {
+  chainId: number;
+}) {
+  posthog.capture("faucet used", {
+    chainId: properties.chainId,
+  });
+}
+
+// ----------------------------
+// CHAIN CONFIGURATION
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track which custom chains customers are adding that we may want to add to the app
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportChainConfigurationAdded(properties: {
+  chainId: number;
+  chainName: string;
+  rpcURLs: readonly string[];
+  nativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
+}) {
+  posthog.capture("chain configuration added", {
+    chainId: properties.chainId,
+    chainName: properties.chainName,
+    rpcURLs: properties.rpcURLs,
+    nativeCurrency: properties.nativeCurrency,
+  });
+}

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { RenewSubscriptionButton } from "components/settings/Account/Billing/renew-subscription/renew-subscription-button";
-import { useTrack } from "hooks/analytics/useTrack";
 import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
@@ -58,7 +57,6 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 }) => {
   const plan = TEAM_PLANS[billingPlan];
 
-  const trackEvent = useTrack();
   const remainingTrialDays =
     (activeTrialEndsAt ? remainingDays(activeTrialEndsAt) : 0) || 0;
 
@@ -68,15 +66,6 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     billingStatus === "noPayment" &&
     billingPlan === "growth";
 
-  const handleCTAClick = () => {
-    cta?.onClick?.();
-    trackEvent({
-      category: "account",
-      label: `${billingPlan}Plan`,
-      action: "click",
-    });
-  };
-
   return (
     <div
       className={cn(
@@ -163,7 +152,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               buttonProps={{
                 variant: highlighted ? "default" : "outline",
                 className: highlighted ? undefined : "bg-background",
-                onClick: handleCTAClick,
+                onClick: cta.onClick,
               }}
               teamSlug={teamSlug}
               sku={billingPlanToSkuMap[billingPlan]}
@@ -181,7 +170,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               <Link
                 href={cta.href}
                 target="_blank"
-                onClick={handleCTAClick}
+                onClick={cta.onClick}
                 rel="noopener noreferrer"
               >
                 {has7DayTrial ? "Start 7 Day Free Trial" : cta.label}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { reportFaucetUsed } from "@/analytics/report";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
@@ -29,7 +30,6 @@ import { Turnstile } from "@marsidev/react-turnstile";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/(app)/api/testnet-faucet/can-claim/CanClaimResponseType";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
-import { useTrack } from "hooks/analytics/useTrack";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -95,17 +95,11 @@ export function FaucetButton({
     chain: definedChain,
     client,
   });
-  const trackEvent = useTrack();
+
   const queryClient = useQueryClient();
 
   const claimMutation = useMutation({
     mutationFn: async (turnstileToken: string) => {
-      trackEvent({
-        category: "faucet",
-        action: "claim",
-        label: "attempt",
-        chain_id: chainId,
-      });
       const response = await fetch("/api/testnet-faucet/claim", {
         method: "POST",
         headers: {
@@ -124,20 +118,8 @@ export function FaucetButton({
       }
     },
     onSuccess: () => {
-      trackEvent({
-        category: "faucet",
-        action: "claim",
-        label: "success",
-        chain_id: chainId,
-      });
-    },
-    onError: (error) => {
-      trackEvent({
-        category: "faucet",
-        action: "claim",
-        label: "error",
-        chain_id: chainId,
-        errorMsg: error instanceof Error ? error.message : "Unknown error",
+      reportFaucetUsed({
+        chainId,
       });
     },
     onSettled: () => {
@@ -223,8 +205,9 @@ export function FaucetButton({
         {canClaimFaucetQuery.data.type === "unsupported-chain" &&
           "Faucet is empty right now"}
 
+        {/* TODO: add an upsell path here to subscribe to one of these plans */}
         {canClaimFaucetQuery.data.type === "paid-plan-required" &&
-          "Faucet is only available on Starter, Growth and Pro plans."}
+          "Faucet is only available on Starter, Growth, Scale and Pro plans."}
       </Button>
     );
   }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { useTrack } from "hooks/analytics/useTrack";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useTheme } from "next-themes";
 import type { ThirdwebClient } from "thirdweb";
@@ -14,21 +13,11 @@ export function PayModalButton(props: {
   client: ThirdwebClient;
 }) {
   const { theme } = useTheme();
-  const trackEvent = useTrack();
+
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button
-          variant="primary"
-          className="w-full"
-          onClick={() => {
-            trackEvent({
-              category: "pay",
-              action: "buy",
-              label: "attempt",
-            });
-          }}
-        >
+        <Button variant="primary" className="w-full">
           {props.label}
         </Button>
       </DialogTrigger>
@@ -42,35 +31,6 @@ export function PayModalButton(props: {
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{
-            // biome-ignore lint/suspicious/noExplicitAny: false positive
-            onPurchaseSuccess(info: any) {
-              if (
-                info.type === "crypto" &&
-                info.status.status !== "NOT_FOUND"
-              ) {
-                trackEvent({
-                  category: "pay",
-                  action: "buy",
-                  label: "success",
-                  type: info.type,
-                  chainId: info.status.quote.toToken.chainId,
-                  tokenAddress: info.status.quote.toToken.tokenAddress,
-                  amount: info.status.quote.toAmount,
-                });
-              }
-
-              if (info.type === "fiat" && info.status.status !== "NOT_FOUND") {
-                trackEvent({
-                  category: "pay",
-                  action: "buy",
-                  label: "success",
-                  type: info.type,
-                  chainId: info.status.quote.toToken.chainId,
-                  tokenAddress: info.status.quote.toToken.tokenAddress,
-                  amount: info.status.quote.estimatedToTokenAmount,
-                });
-              }
-            },
             prefillBuy: {
               // Do not include local chain overrides for chain pages
               // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx

@@ -1,7 +1,5 @@
 "use client";
 import { TransactionButton } from "components/buttons/TransactionButton";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
@@ -20,9 +18,6 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   isAuction,
   isLoggedIn,
 }) => {
-  const trackEvent = useTrack();
-  const { idToChain } = useAllChainsData();
-  const network = idToChain.get(contract.chain.id);
   const transaction = isAuction
     ? cancelAuction({ contract, auctionId: BigInt(id) })
     : cancelListing({ contract, listingId: BigInt(id) });
@@ -36,28 +31,8 @@ export const CancelTab: React.FC<CancelTabProps> = ({
         transactionCount={1}
         isPending={cancelQuery.isPending}
         onClick={() => {
-          trackEvent({
-            category: "marketplace",
-            action: "cancel-listing",
-            label: "attempt",
-          });
           const promise = cancelQuery.mutateAsync(transaction, {
-            onSuccess: () => {
-              trackEvent({
-                category: "marketplace",
-                action: "cancel-listing",
-                label: "success",
-                network,
-              });
-            },
             onError: (error) => {
-              trackEvent({
-                category: "marketplace",
-                action: "cancel-listing",
-                label: "error",
-                network,
-                error,
-              });
               console.error(error);
             },
           });

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -15,8 +15,6 @@ import {
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { CurrencySelector } from "components/shared/CurrencySelector";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { isAlchemySupported } from "lib/wallet/nfts/isAlchemySupported";
 import { isMoralisSupported } from "lib/wallet/nfts/isMoralisSupported";
@@ -107,10 +105,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   mode,
   isInsightSupported,
 }) => {
-  const trackEvent = useTrack();
   const chainId = contract.chain.id;
-  const { idToChain } = useAllChainsData();
-  const network = idToChain.get(chainId);
+
   const [isFormLoading, setIsFormLoading] = useState(false);
 
   const isSupportedChain =
@@ -418,23 +414,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
 
             await sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
-                trackEvent({
-                  category: "marketplace",
-                  action: "add-listing",
-                  label: "success",
-                  network,
-                });
                 setOpen(false);
               },
-              onError: (error) => {
-                trackEvent({
-                  category: "marketplace",
-                  action: "add-listing",
-                  label: "error",
-                  network,
-                  error,
-                });
-              },
             });
             auctionNotifications.onSuccess();
           }