posthog migration: part 5

Author: jnsdls

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

@@ -39,6 +39,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 +167,130 @@ 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
+// ----------------------------
+
+/**
+ * ### 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: "DropERC20" | "DropERC1155" | "DropERC721";
+  } & (
+    | {
+        status: "successful" | "attempted";
+      }
+    | {
+        status: "failed";
+        error: string;
+      }
+  ),
+) {
+  posthog.capture(`asset buy ${properties.status}`, {
+    chainId: properties.chainId,
+    assetType: properties.assetType,
+    contractType: properties.contractType,
+    status: properties.status,
+    ...(properties.status === "failed" && {
+      error: properties.error,
+    }),
+  });
+}
+
+/**
+ * ### 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 reportAssetsPageCardClick(properties: {
+  label: "create-nft-collection" | "import-asset" | "create-coin";
+}) {
+  posthog.capture("assets page card clicked", {
+    label: properties.label,
+  });
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the steps that users are going through when creating an asset
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportCreateAssetNextStepClicked(
+  properties:
+    | {
+        assetType: "NFT";
+        page: "collection-info" | "upload-assets" | "sales-settings";
+      }
+    | {
+        assetType: "Coin";
+        page: "coin-info" | "token-distribution" | "launch-coin";
+      },
+) {
+  posthog.capture("create asset next clicked", {
+    page: properties.page,
+    assetType: properties.assetType,
+  });
+}

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