[TOOL-3954] Dashboard: Add tracking in contracts page (#6651)

Author: MananTank

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ImportModal } from "components/contract-components/import-contract/modal";
 import { DownloadIcon, PlusIcon } from "lucide-react";
-import Link from "next/link";
 import { useState } from "react";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 
 export function DeployedContractsPageHeader(props: {
   teamId: string;
   projectId: string;
 }) {
   const [importModalOpen, setImportModalOpen] = useState(false);
+  const trackEvent = useTrack();
 
   return (
     <div className="border-b">
@@ -33,16 +35,28 @@ export function DeployedContractsPageHeader(props: {
           <Button
             className="gap-2 bg-card"
             variant="outline"
-            onClick={() => setImportModalOpen(true)}
+            onClick={() => {
+              trackEvent({
+                action: "click",
+                category: "contracts",
+                label: "import-contract",
+              });
+              setImportModalOpen(true);
+            }}
           >
             <DownloadIcon className="size-4" />
             Import contract
           </Button>
           <Button asChild className="gap-2">
-            <Link href="/explore">
+            <TrackedLinkTW
+              href="/explore"
+              category="contracts"
+              label="deploy-contract"
+              target="_blank"
+            >
               <PlusIcon className="size-4" />
               Deploy contract
-            </Link>
+            </TrackedLinkTW>
           </Button>
         </div>
       </div>

apps/dashboard/src/app/account/contracts/_components/DeployViaCLIOrImportCard.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ArrowUpRightIcon, DownloadIcon } from "lucide-react";
-import Link from "next/link";
 import { useState } from "react";
 import { ImportModal } from "../../../../components/contract-components/import-contract/modal";
+import { useTrack } from "../../../../hooks/analytics/useTrack";
 
 export function DeployViaCLIOrImportCard(props: {
   teamId: string;
   projectId: string;
 }) {
+  const trackEvent = useTrack();
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
@@ -38,18 +40,27 @@ export function DeployViaCLIOrImportCard(props: {
           className="gap-2 bg-background lg:px-10"
           asChild
         >
-          <Link
+          <TrackedLinkTW
             href="https://portal.thirdweb.com/contracts/deploy/overview"
             target="_blank"
+            category="contracts-banner"
+            label="deploy-via-cli"
           >
             Deploy via CLI
             <ArrowUpRightIcon className="size-4" />
-          </Link>
+          </TrackedLinkTW>
         </Button>
         <Button
           variant="outline"
           className="gap-2 bg-background"
-          onClick={() => setImportModalOpen(true)}
+          onClick={() => {
+            setImportModalOpen(true);
+            trackEvent({
+              category: "contracts-banner",
+              action: "click",
+              label: "import-contract",
+            });
+          }}
         >
           <DownloadIcon className="size-4" />
           Import Contract