posthog migration: part 3

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>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/NextSteps.tsx

@@ -56,6 +56,7 @@ export function BuyFundsSection(props: {
             href="https://portal.thirdweb.com/connect/pay/overview"
             className="inline-flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground"
             target="_blank"
+            rel="noopener noreferrer"
           >
             Learn more about Universal Bridge
             <ExternalLinkIcon className="size-3" />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -18,6 +18,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
             <Link
               href={chain.infoURL}
               target="_blank"
+              rel="noopener noreferrer"
               className="inline-flex items-center gap-1.5 hover:text-link-foreground"
             >
               {new URL(chain.infoURL).hostname}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx

@@ -19,6 +19,7 @@ export function ClaimChainSection() {
             className="gap-2"
             href="https://share.hsforms.com/1qAViW3U5SoKbabNhRZy4Kgea58c"
             target="_blank"
+            rel="noopener noreferrer"
           >
             <span>Claim Chain</span>
             <ExternalLinkIcon className="-mt-[3px] size-4" />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx

@@ -35,6 +35,7 @@ export function SupportedProductsSection(props: {
                     href={product.link}
                     className="before:absolute before:inset-0"
                     target="_blank"
+                    rel="noopener noreferrer"
                   >
                     {product.name}
                   </Link>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx

@@ -61,7 +61,7 @@ export function ChainHeader(props: ChainHeaderProps) {
               }
             />
             <Button variant="default" asChild>
-              <Link href="/team" target="_blank">
+              <Link href="/team" target="_blank" rel="noopener noreferrer">
                 Get started with thirdweb
               </Link>
             </Button>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx

@@ -23,6 +23,7 @@ export function ExplorersSection(props: {
               <Link
                 href={explorer.url}
                 target="_blank"
+                rel="noopener noreferrer"
                 className="flex items-center gap-1.5 text-muted-foreground text-sm before:absolute before:inset-0 before:z-0"
               >
                 {explorer.url.endsWith("/")

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx

@@ -176,8 +176,8 @@ export default async function ChainPageLayout(props: {
                     mapV4ChainToV5Chain(chain)
                   }
                 />
-                <Button variant="primary">
-                  <Link href="/team" target="_blank">
+                <Button variant="primary" asChild>
+                  <Link href="/team" target="_blank" rel="noopener noreferrer">
                     Get started
                   </Link>
                 </Button>