Merge pull request #13909 from ethereum/staging-homepage-events

Homepage: matomo events

Author: pettinarip

src/components/Buttons/SvgButtonLink.tsx

@@ -1,18 +1,9 @@
 import { cva, VariantProps } from "class-variance-authority"
-import type { FC, ReactNode, SVGProps } from "react"
+import type { FC, SVGProps } from "react"
 
 import { cn } from "@/lib/utils/cn"
 
-import { BaseLink } from "../ui/Link"
-
-type SvgButtonLinkProps = {
-  Svg: FC<SVGProps<SVGElement>>
-  label?: string
-  children: ReactNode
-  href: string
-  className?: string
-  size?: number
-}
+import { BaseLink, LinkProps } from "../ui/Link"
 
 const variants = cva("flex items-center gap-3.5", {
   variants: {
@@ -28,14 +19,20 @@ const variants = cva("flex items-center gap-3.5", {
 
 type Variants = VariantProps<typeof variants>
 
+export type SvgButtonLinkProps = LinkProps & {
+  Svg: FC<SVGProps<SVGElement>>
+  label?: string
+  size?: number
+} & Variants
+
 const SvgButtonLink = ({
   label,
   children,
   Svg,
   className,
   variant,
   ...props
-}: SvgButtonLinkProps & Variants) => (
+}: SvgButtonLinkProps) => (
   <BaseLink
     className={cn(
       "group rounded-2xl no-underline focus:outline focus:outline-4 focus:outline-offset-8",

src/components/Homepage/BentoCard.tsx

@@ -17,6 +17,7 @@ export type BentoCardProps = HTMLAttributes<HTMLDivElement> & {
   imgWidth?: number
   imgHeight?: number
   title: string
+  eventName: string
 }
 
 const BentoCard = ({
@@ -28,6 +29,7 @@ const BentoCard = ({
   imgWidth,
   imgHeight,
   title,
+  eventName,
 }: BentoCardProps) => (
   <Card
     className={cn(
@@ -43,7 +45,16 @@ const BentoCard = ({
         {title}
       </CardTitle>
       <p className="mb-8 text-md">{children}</p>
-      <ButtonLink href={href} variant="outline" isSecondary>
+      <ButtonLink
+        href={href}
+        variant="outline"
+        isSecondary
+        customEventOptions={{
+          eventCategory: "Homepage",
+          eventAction: "use cases",
+          eventName,
+        }}
+      >
         {action} <ChevronNext />
       </ButtonLink>
     </div>

src/components/Homepage/useBentoBox.ts

@@ -17,6 +17,7 @@ type CopyDetails = {
   children: string
   action: string
   href: string
+  eventName: Category
 }
 
 const gradientStops = "from-20% to-60%"
@@ -100,6 +101,7 @@ export const useBentoBox = () => {
     children: t(`page-index:page-index-bento-${category}-content`),
     action: t(`page-index:page-index-bento-${category}-action`),
     href,
+    eventName: category,
   })
 
   return [

src/components/Homepage/useHome.ts

@@ -53,6 +53,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleWalletContent,
+      eventName: "bank",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-1"),
@@ -61,6 +62,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleTokenContent,
+      eventName: "token",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-2"),
@@ -69,6 +71,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-javascript",
       code: CreateWalletContent,
+      eventName: "wallet",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-3"),
@@ -77,6 +80,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleDomainRegistryContent,
+      eventName: "dns",
     },
   ]
 
@@ -86,21 +90,24 @@ export const useHome = () => {
       description: t("page-index:page-index-cta-wallet-description"),
       href: "/wallets/find-wallet/",
       Svg: PickWalletIcon,
-      className: "text-primary hover:text-primary-hover", // TODO: Confirm hover style
+      className: "text-primary hover:text-primary-hover",
+      eventName: "find wallet",
     },
     {
       label: t("page-index:page-index-cta-get-eth-label"),
       description: t("page-index:page-index-cta-get-eth-description"),
       href: "/get-eth/",
       Svg: EthTokenIcon,
       className: "text-accent-a hover:text-accent-a-hover",
+      eventName: "get eth",
     },
     {
       label: t("page-index:page-index-cta-networks-label"),
       description: t("page-index:page-index-cta-networks-description"),
       href: "/layer-2/", // TODO: Update with new networks page when ready
       Svg: ChooseNetworkIcon,
       className: "text-accent-b hover:text-accent-b-hover",
+      eventName: "L2",
     },
     {
       label: t("page-index:page-index-cta-dapps-label"),
@@ -111,6 +118,7 @@ export const useHome = () => {
         "text-accent-c hover:text-accent-c-hover",
         isRtl && "[&_svg]:-scale-x-100"
       ),
+      eventName: "dapps",
     },
   ]
 
@@ -166,27 +174,31 @@ export const useHome = () => {
       description: t(
         "page-index:page-index-join-action-contribute-description"
       ),
+      eventName: "contribute",
     },
     {
       Svg: FaGithub,
       label: "GitHub",
       href: GITHUB_REPO_URL,
       className: "text-accent-a hover:text-accent-a-hover",
       description: t("page-index:page-index-join-action-github-description"),
+      eventName: "GitHub",
     },
     {
       Svg: FaDiscord,
       label: "Discord",
       href: "/discord/",
       className: "text-primary hover:text-primary-hover",
       description: t("page-index:page-index-join-action-discord-description"),
+      eventName: "Discord",
     },
     {
       Svg: FaXTwitter,
       label: "X",
       href: "https://x.com/EthDotOrg",
       className: "text-accent-b hover:text-accent-b-hover",
       description: t("page-index:page-index-join-action-twitter-description"),
+      eventName: "Twitter",
     },
   ]
 

src/components/ui/card.tsx

@@ -3,7 +3,7 @@ import { cva, VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils/cn"
 
-import { BaseLink } from "./Link"
+import { BaseLink, LinkProps } from "./Link"
 
 const titleVariants = cva(
   "group-hover/link:underline group-focus/link:underline",
@@ -20,11 +20,10 @@ const titleVariants = cva(
   }
 )
 
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
-  href?: string
-}
+type CardProps = React.HTMLAttributes<HTMLDivElement> &
+  Pick<LinkProps, "href" | "customEventOptions">
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, href, ...props }, ref) => {
+  ({ className, href, customEventOptions, ...props }, ref) => {
     if (href) {
       return (
         <BaseLink
@@ -33,6 +32,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
             "group/link rounded-2xl text-body no-underline hover:text-body",
             className
           )}
+          customEventOptions={customEventOptions}
           hideArrow
         >
           <div ref={ref} {...props} />

src/lib/interfaces.ts

@@ -181,4 +181,5 @@ export interface ITitleCardItem {
 export interface CodeExample extends ITitleCardItem {
   codeLanguage: string
   code: string
+  eventName: string
 }