posthog migration: part 3

Author: jnsdls

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -9,11 +9,6 @@ export type SidebarBaseLink = {
   label: React.ReactNode;
   exactMatch?: boolean;
   icon?: React.FC<{ className?: string }>;
-  tracking?: {
-    category: string;
-    action: string;
-    label: string;
-  };
 };
 
 export type SidebarLink =

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -123,7 +123,6 @@ function RenderSidebarGroup(props: {
                   className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
                   activeClassName="text-foreground bg-accent"
                   exactMatch={link.exactMatch}
-                  tracking={link.tracking}
                   onClick={() => {
                     sidebar.setOpenMobile(false);
                   }}

apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 import type React from "react";
 
 const ACCENT = {
@@ -103,15 +103,10 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             color.btn,
           )}
         >
-          <TrackedLinkTW
-            href={props.cta.link}
-            category={props.trackingCategory}
-            label={props.trackingLabel}
-            target={props.cta.target}
-          >
+          <Link href={props.cta.link} target={props.cta.target}>
             {props.cta.text}
             {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
-          </TrackedLinkTW>
+          </Link>
         </Button>
       </div>
     </div>

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { useTrack } from "hooks/analytics/useTrack";
+
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -10,16 +10,10 @@ export type NavButtonProps = {
   activeClassName?: string;
   href: string;
   exactMatch?: boolean;
-  tracking?: {
-    category: string;
-    action: string;
-    label: string;
-  };
   onClick?: () => void;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
-  const track = useTrack();
   const pathname = usePathname();
   const isActive = pathname
     ? props.exactMatch
@@ -32,17 +26,7 @@ export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
       className={cn(props.className, isActive && props.activeClassName)}
       target={props.href.startsWith("http") ? "_blank" : undefined}
       prefetch={false}
-      onClick={() => {
-        props.onClick?.();
-        if (props.tracking) {
-          track({
-            category: props.tracking.category,
-            action: props.tracking.action,
-            label: props.tracking.label,
-            url: props.href,
-          });
-        }
-      }}
+      onClick={props.onClick}
     >
       {props.children}
     </Link>

apps/dashboard/src/@/components/ui/tracked-link.tsx

@@ -1,5 +1,5 @@
 import { SkeletonContainer } from "@/components/ui/skeleton";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import Link from "next/link";
 import { useMemo } from "react";
 import { type NFT, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
@@ -28,7 +28,6 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
 
 interface NFTCardsProps {
   nfts: Array<NFTWithContract>;
-  trackingCategory: string;
   isPending: boolean;
   allNfts?: boolean;
   projectMeta: ProjectMeta | undefined;
@@ -37,7 +36,6 @@ interface NFTCardsProps {
 
 export const NFTCards: React.FC<NFTCardsProps> = ({
   nfts,
-  trackingCategory,
   isPending,
   allNfts,
   projectMeta,
@@ -91,9 +89,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
                 render={(v) => {
                   return (
                     <h2 className="font-semibold tracking-tight">
-                      <TrackedLinkTW
-                        category={trackingCategory}
-                        label="view_nft"
+                      <Link
                         href={buildContractPagePath({
                           projectMeta,
                           chainIdOrSlug: token.chainId.toString(),
@@ -103,7 +99,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
                         className="before:absolute before:inset-0"
                       >
                         {v.name}
-                      </TrackedLinkTW>
+                      </Link>
                     </h2>
                   );
                 }}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx

@@ -42,7 +42,6 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({
       }))}
       allNfts
       isPending={isWalletNFTsLoading}
-      trackingCategory="account_nfts_owned"
     />
   ) : isWalletNFTsLoading ? null : error ? (
     <p>Failed to fetch NFTs for this account: {error}</p>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx

@@ -2,7 +2,7 @@
 
 import { ButtonGroup, Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
-import { Heading, TrackedLinkButton } from "tw-components";
+import { Heading, LinkButton } from "tw-components";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { AccountsCount } from "./components/accounts-count";
 import { AccountsTable } from "./components/accounts-table";
@@ -33,15 +33,13 @@ export const AccountsPage: React.FC<AccountsPageProps> = ({
           gap={2}
           w="inherit"
         >
-          <TrackedLinkButton
-            category="smart-wallet"
+          <LinkButton
             variant="solid"
-            label="docs-factory-page"
             href="https://portal.thirdweb.com/wallets/smart-wallet/get-started#3-connect-smart-wallets-in-your-application"
             isExternal
           >
             View Documentation
-          </TrackedLinkButton>
+          </LinkButton>
           <CreateAccountButton contract={contract} isLoggedIn={isLoggedIn} />
         </ButtonGroup>
       </Flex>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/AccountsPage.tsx

@@ -15,7 +15,7 @@ import { useMemo, useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { getAccounts, totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
-import { Text, TrackedCopyButton } from "tw-components";
+import { Legacy_CopyButton, Text } from "tw-components";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 
@@ -27,9 +27,8 @@ const columns = [
     cell: (info) => (
       <Flex gap={2} align="center">
         <Text fontFamily="mono">{info.getValue()}</Text>
-        <TrackedCopyButton
+        <Legacy_CopyButton
           value={info.getValue()}
-          category="accounts"
           aria-label="Copy account address"
           colorScheme="primary"
         />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx

@@ -26,8 +26,6 @@ interface ContractOverviewPageProps {
   projectMeta: ProjectMeta | undefined;
 }
 
-const TRACKING_CATEGORY = "contract_overview";
-
 export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   contract,
   isErc1155,
@@ -75,7 +73,6 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
           <ContractAnalyticsOverviewCard
             contractAddress={contract.address}
             chainId={contract.chain.id}
-            trackingCategory={TRACKING_CATEGORY}
             chainSlug={chainSlug}
             projectMeta={projectMeta}
           />
@@ -85,7 +82,6 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
           <MarketplaceDetails
             contract={contract}
             projectMeta={projectMeta}
-            trackingCategory={TRACKING_CATEGORY}
             hasEnglishAuctions={hasEnglishAuctions}
             hasDirectListings={hasDirectListings}
             chainSlug={chainSlug}
@@ -95,7 +91,6 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
         {(isErc1155 || isErc721) && (
           <NFTDetails
             contract={contract}
-            trackingCategory={TRACKING_CATEGORY}
             isErc721={isErc721}
             chainSlug={chainSlug}
             projectMeta={projectMeta}
@@ -106,22 +101,19 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
 
         <LatestEvents
           contract={contract}
-          trackingCategory={TRACKING_CATEGORY}
           chainSlug={chainSlug}
           projectMeta={projectMeta}
         />
 
         {isPermissionsEnumerable && (
           <PermissionsTable
             contract={contract}
-            trackingCategory={TRACKING_CATEGORY}
             chainSlug={chainSlug}
             projectMeta={projectMeta}
           />
         )}
 
         <BuildYourApp
-          trackingCategory={TRACKING_CATEGORY}
           chainSlug={chainSlug}
           contractAddress={contract.address}
           projectMeta={projectMeta}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -28,7 +28,6 @@ function getDateKey(date: Date, precision: "day" | "hour") {
 export function ContractAnalyticsOverviewCard(props: {
   contractAddress: string;
   chainId: number;
-  trackingCategory: string;
   chainSlug: string;
   projectMeta: ProjectMeta | undefined;
 }) {
@@ -86,7 +85,7 @@ export function ContractAnalyticsOverviewCard(props: {
             variant="outline"
             onClick={() => {
               trackEvent({
-                category: props.trackingCategory,
+                category: "contract_overview",
                 action: "click",
                 label: "view_all_analytics",
               });

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx

@@ -1,11 +1,10 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import Link from "next/link";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 
 export function BuildYourApp(props: {
-  trackingCategory: string;
   contractAddress: string;
   chainSlug: string;
   projectMeta: ProjectMeta | undefined;
@@ -24,15 +23,13 @@ export function BuildYourApp(props: {
         <h2 className="mb-2 font-semibold text-xl leading-none tracking-tight">
           Build your app
         </h2>
-        <TrackedLinkTW
-          category={props.trackingCategory}
-          label="build_your_app"
+        <Link
           href={codePath}
           className="block text-balance text-muted-foreground text-sm before:absolute before:inset-0"
         >
           Learn more about how you can use thirdweb tools to build apps on top
           of this contract
-        </TrackedLinkTW>{" "}
+        </Link>{" "}
       </div>
 
       {/* right */}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof LatestEventsUI> = {
     allEvents: [],
     autoUpdate: false,
     eventsHref: "/ethereum/0x123456789/events",
-    trackingCategory: "test-category",
   },
 };
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx

@@ -13,7 +13,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import {
   type InternalTransaction,
   useActivity,
@@ -26,7 +25,6 @@ import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_sl
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 
 export function LatestEvents(props: {
-  trackingCategory: string;
   contract: ThirdwebContract;
   chainSlug: string;
   projectMeta: ProjectMeta | undefined;
@@ -46,7 +44,6 @@ export function LatestEvents(props: {
       allEvents={allEvents}
       autoUpdate={autoUpdate}
       eventsHref={eventsHref}
-      trackingCategory={props.trackingCategory}
     />
   );
 }
@@ -55,7 +52,6 @@ export function LatestEventsUI(props: {
   allEvents: Pick<InternalTransaction, "transactionHash" | "events">[];
   autoUpdate: boolean;
   eventsHref: string;
-  trackingCategory: string;
 }) {
   const { allEvents, autoUpdate, eventsHref } = props;
   return (
@@ -80,14 +76,12 @@ export function LatestEventsUI(props: {
           )}
         </div>
         <Button asChild variant="outline" size="sm" className="bg-background">
-          <TrackedLinkTW
-            category={props.trackingCategory}
-            label="view_all_events"
+          <Link
             href={eventsHref}
             className="flex items-center gap-2 text-muted-foreground text-sm"
           >
             View all <ArrowRightIcon className="size-4" />
-          </TrackedLinkTW>
+          </Link>
         </Button>
       </div>