posthog migration: part 5

Author: jnsdls

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

@@ -10,6 +10,7 @@ import type { Team } from "../api/team";
  * ### Why do we need to report this event?
  * - To track the number of contracts deployed
  * - To track the number of contracts deployed on each chain
+ * - To track if the contract was deployed on the asset page vs on the deploy page
  *
  * ### Who is responsible for this event?
  * @jnsdls
@@ -20,6 +21,7 @@ export function reportContractDeployed(properties: {
   chainId: number;
   publisher: string | undefined;
   contractName: string | undefined;
+  deploymentType?: "asset";
 }) {
   posthog.capture("contract deployed", properties);
 }
@@ -39,6 +41,25 @@ export function reportContractDeployFailed(properties: {
   posthog.capture("contract deploy failed", 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);
+}
+
 // ----------------------------
 // ONBOARDING (TEAM)
 // ----------------------------
@@ -148,3 +169,193 @@ 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,
+  });
+}
+
+// ----------------------------
+// ASSETS
+// ----------------------------
+
+type StatusWithError =
+  | {
+      status: "successful" | "attempted";
+    }
+  | {
+      status: "failed";
+      error: string;
+    };
+
+type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
+
+/**
+ * ### Why do we need to report this event?
+ * - To track asset buy statuses (successful, failed, attempted) in the new asset pages
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportAssetBuy(
+  properties: {
+    chainId: number;
+    assetType: "NFT" | "Coin";
+    contractType: AssetContractType;
+  } & StatusWithError,
+) {
+  // Example: asset buy NFT successful
+  posthog.capture(`asset buy ${properties.assetType} ${properties.status}`, {
+    chainId: properties.chainId,
+    contractType: properties.contractType,
+    ...(properties.status === "failed" && {
+      error: properties.error,
+    }),
+  });
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the CTA card clicks on the assets page
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportAssetsPageCardClick(properties: {
+  label: "create-nft-collection" | "import-asset" | "create-coin";
+}) {
+  // Example: asset page card create-nft-collection clicked
+  posthog.capture(`assets page card ${properties.label} clicked`);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the steps that users are going through in asset creation flow
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportCreateAssetStepNextClicked(
+  properties:
+    | {
+        assetType: "NFT";
+        page: "collection-info" | "upload-assets" | "sales-settings";
+      }
+    | {
+        assetType: "Coin";
+        page: "coin-info" | "token-distribution" | "launch-coin";
+      },
+) {
+  // Example: create asset NFT collection-info next clicked
+  posthog.capture(
+    `create asset ${properties.assetType} ${properties.page} next clicked`,
+  );
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the status of each step of the create asset flow
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportCreateAssetStepStatus(
+  properties: (
+    | {
+        assetType: "NFT";
+        step: "deploy-contract" | "lazy-mint-nfts" | "set-claim-conditions";
+      }
+    | {
+        assetType: "Coin";
+        step:
+          | "deploy-contract"
+          | "set-claim-conditions"
+          | "mint-tokens"
+          | "airdrop-tokens";
+      }
+  ) &
+    StatusWithError & {
+      contractType: AssetContractType;
+    },
+) {
+  // Example: create asset NFT deploy-contract successful
+  posthog.capture(
+    `create asset ${properties.assetType} ${properties.step} ${properties.status}`,
+    {
+      ...(properties.status === "failed" && {
+        error: properties.error,
+      }),
+      contractType: properties.contractType,
+    },
+  );
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the status of create asset as a whole (successful, failed, attempted)
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportCreateAssetStatus(
+  properties: {
+    assetType: "NFT" | "Coin";
+    contractType: AssetContractType;
+  } & StatusWithError,
+) {
+  // Example: create asset NFT successful
+  posthog.capture(`create asset ${properties.assetType} ${properties.status}`, {
+    ...(properties.status === "failed" && {
+      error: properties.error,
+    }),
+    contractType: properties.contractType,
+  });
+}

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>
     );
   }