posthog migration: part 3 (#7365)

# Remove Analytics Tracking Components

This PR removes analytics tracking components and properties from the dashboard app. Key changes include:

- Removed `TrackedLinkTW` and `TrackedUnderlineLink` components, replacing them with standard `Link` and `UnderlineLink` components
- Removed tracking properties from sidebar links and navigation components
- Eliminated tracking metadata from contract cards, NFT cards, and marketplace components
- Removed tracking-related props from various UI components
- Simplified component interfaces by removing tracking-specific parameters
- Replaced legacy tracked button components with standard button components

These changes simplify the codebase by removing the analytics tracking layer while maintaining all core functionality.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing security by adding `rel="noopener noreferrer"` to various `Link` components throughout the codebase to prevent potential security vulnerabilities associated with opening links in new tabs.

### Detailed summary
- Added `rel="noopener noreferrer"` to multiple `Link` components for security.
- Removed `tracking` properties from several components.
- Replaced `TrackedLinkTW` with `Link` or `UnderlineLink` in various files.
- Updated imports to use `Link` from `next/link` instead of custom tracking links.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx`, `apps/dashboard/src/tw-components/link.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/import/EngineImportPage.tsx`, `apps/dashboard/src/components/explore/upsells/deploy-your-own.tsx`, `apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/_components/version.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx`, `apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx`, `apps/dashboard/src/components/explore/contract-card/index.tsx`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx`, `apps/dashboard/src/components/embedded-wallets/Configure/index.tsx`, `apps/dashboard/src/@/components/blocks/app-footer.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/footer/FooterLinksSection.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/AccountAbstractionPage.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx`, `apps/dashboard/src/components/buttons/MismatchButton.tsx`, `apps/dashboard/src/tw-components/button.tsx`, `apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx`, `apps/dashboard/src/components/cmd-k-search/index.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Refactor**
  - Removed all analytics tracking from links and buttons across the dashboard.
  - Replaced custom tracking link and button components with standard or simplified alternatives.
  - Updated component props and interfaces to eliminate tracking-related fields.
  - Streamlined UI components by removing tracking props and logic, resulting in cleaner navigation and interactions.

- **Style**
  - Added `rel="noopener noreferrer"` attribute to all external links opening in new tabs for improved security and privacy.
  - Minor adjustments to link styling in some components to accommodate new link components.

No changes to core functionality or user workflows; navigation and UI remain consistent.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jnsdls

apps/dashboard/src/@/components/billing.tsx

@@ -39,6 +39,7 @@ export function CheckoutButton(props: {
       >
         <Link
           target="_blank"
+          rel="noopener noreferrer"
           href={buildCheckoutUrl({
             teamSlug: props.teamSlug,
             sku: props.sku,
@@ -87,7 +88,7 @@ export function BillingPortalButton(props: {
       <a
         href={buildBillingPortalUrl({ teamSlug: props.teamSlug })}
         target="_blank"
-        rel="noreferrer"
+        rel="noopener noreferrer"
       >
         {props.children}
       </a>

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,16 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             color.btn,
           )}
         >
-          <TrackedLinkTW
+          <Link
             href={props.cta.link}
-            category={props.trackingCategory}
-            label={props.trackingLabel}
             target={props.cta.target}
+            rel={
+              props.cta.target === "_blank" ? "noopener noreferrer" : undefined
+            }
           >
             {props.cta.text}
             {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
-          </TrackedLinkTW>
+          </Link>
         </Button>
       </div>
     </div>

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -70,17 +70,29 @@ export function AppFooter(props: AppFooterProps) {
           </div>
           <div className="flex flex-row gap-3">
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://github.com/thirdweb-dev" target="_blank">
+              <Link
+                href="https://github.com/thirdweb-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <GithubIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
+              <Link
+                href="https://www.tiktok.com/@thirdweb"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <TiktokIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://www.instagram.com/thirdweb/" target="_blank">
+              <Link
+                href="https://www.instagram.com/thirdweb/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <InstagramIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
@@ -93,17 +105,29 @@ export function AppFooter(props: AppFooterProps) {
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
+              <Link
+                href="https://www.youtube.com/@thirdweb_"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <YoutubeIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
+              <Link
+                href="https://www.reddit.com/r/thirdweb/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <RedditIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://x.com/thirdweb" target="_blank">
+              <Link
+                href="https://x.com/thirdweb"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <XIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>

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

@@ -178,7 +178,12 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               className={highlighted ? undefined : "bg-background"}
               asChild
             >
-              <Link href={cta.href} target="_blank" onClick={handleCTAClick}>
+              <Link
+                href={cta.href}
+                target="_blank"
+                onClick={handleCTAClick}
+                rel="noopener noreferrer"
+              >
                 {has7DayTrial ? "Start 7 Day Free Trial" : cta.label}
               </Link>
             </Button>

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

@@ -7,7 +7,6 @@ import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
 import { LazyConfigureNetworkModal } from "components/configure-networks/LazyConfigureNetworkModal";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
-import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
 import Image from "next/image";
@@ -261,18 +260,17 @@ function ConnectWalletWelcomeScreen(props: {
         </div>
       </div>
 
-      <TrackedAnchorLink
+      <Link
         className="text-center font-semibold opacity-70 hover:no-underline hover:opacity-100"
         target="_blank"
-        category="custom-connect-wallet"
-        label="new-to-wallets"
+        rel="noopener noreferrer"
         href="https://blog.thirdweb.com/web3-wallet/"
         style={{
           color: fontColor,
         }}
       >
         New to Wallets?
-      </TrackedAnchorLink>
+      </Link>
     </div>
   );
 }
@@ -305,36 +303,3 @@ export function useCustomConnectModal() {
     [connect, theme],
   );
 }
-
-/**
- * A link component extends the `Link` component and adds tracking.
- */
-function TrackedAnchorLink(props: {
-  category: string;
-  label?: string;
-  trackingProps?: Record<string, string>;
-  href: string;
-  target?: string;
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}) {
-  const trackEvent = useTrack();
-  const { category, label, trackingProps } = props;
-
-  const onClick = useCallback(() => {
-    trackEvent({ category, action: "click", label, ...trackingProps });
-  }, [trackEvent, category, label, trackingProps]);
-
-  return (
-    <Link
-      onClick={onClick}
-      target={props.target}
-      href={props.href}
-      className={props.className}
-      style={props.style}
-    >
-      {props.children}
-    </Link>
-  );
-}

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,13 +1,11 @@
 "use client";
-import { useTrack } from "hooks/analytics/useTrack";
 import { FileTextIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
 import { SectionTitle } from "../server/SectionTitle";
 
 export default function NextSteps(props: { chain: ChainMetadata }) {
   const { chain } = props;
-  const trackEvent = useTrack();
 
   return (
     <section>
@@ -23,14 +21,7 @@ export default function NextSteps(props: { chain: ChainMetadata }) {
                 }
                 className="before:absolute before:inset-0"
                 target="_blank"
-                onClick={() =>
-                  trackEvent({
-                    category: "nextSteps",
-                    action: "click-inapp",
-                    label: "success",
-                    chain_id: chain.chainId,
-                  })
-                }
+                rel="noopener noreferrer"
               >
                 Create a login for {chain.name}
               </Link>