feat: AnalyticsContextController

app/src/context/analytics/AnalyticsContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+import { AnalyticsContextType } from "./AnalyticsContext.types";
+
+export const AnalyticsContext = createContext<AnalyticsContextType | undefined>(undefined);

app/src/context/analytics/AnalyticsContext.types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+export type AnalyticsContextControllerProps = {
+  children: ReactNode;
+};
+
+export type AnalyticsEvent = {
+  name: string;
+  meta?: Record<string, string | number | undefined>;
+};
+
+export type AnalyticsContextType = {
+  onClick: (event: AnalyticsEvent) => void;
+};

app/src/context/analytics/AnalyticsContextController.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+import { AnalyticsContext } from "./AnalyticsContext";
+import { AnalyticsContextControllerProps, AnalyticsContextType, AnalyticsEvent } from "./AnalyticsContext.types";
+
+const onClick = (event: AnalyticsEvent) => {
+  (window as any)
+    .pirsch(event.name, {
+      meta: event.meta,
+    })
+    .then(() => {
+      console.log(`AnalyticsContextController.onClick: ${event.name}, ${JSON.stringify(event.meta)}`);
+    })
+    .catch((error: Error) => {
+      console.error(error);
+    });
+};
+
+export const AnalyticsContextController = ({ children }: AnalyticsContextControllerProps) => {
+  const props: AnalyticsContextType = {
+    onClick,
+  };
+
+  return <AnalyticsContext.Provider value={props}>{children}</AnalyticsContext.Provider>;
+};

app/src/context/analytics/useAnalyticsContext.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { AnalyticsContext } from "./AnalyticsContext";
+
+export const useAnalyticsContext = () => {
+  const context = useContext(AnalyticsContext);
+
+  if (context === undefined) {
+    throw new Error("useAnalyticsContext must be used within a AnalyticsContext");
+  }
+
+  return context;
+};

app/src/layouts/home-layout/HomeLayout.tsx

@@ -11,6 +11,7 @@ import { EvmWalletSelectorContextController } from "context/evm/wallet-selector/
 import { Footer } from "ui/footer/Footer";
 import { AuthorizationContextController } from "context/authorization/AuthorizationContextController";
 import { DiscordContextController } from "context/discord/DiscordContextController";
+import { AnalyticsContextController } from "context/analytics/AnalyticsContextController";
 
 import { ChatLayoutProps } from "./HomeLayout.types";
 import styles from "./HomeLayout.module.scss";
@@ -44,15 +45,17 @@ export const HomeLayout: React.FC<ChatLayoutProps> = ({ children }) => {
           <ToastContextController>
             <AuthorizationContextController>
               <DiscordContextController>
-                <div id="modal-root" />
-                <div id="dropdown-portal" />
-                <div className={clsx(styles["home-layout"])}>
-                  <Navbar />
+                <AnalyticsContextController>
+                  <div id="modal-root" />
+                  <div id="dropdown-portal" />
+                  <div className={clsx(styles["home-layout"])}>
+                    <Navbar />
 
-                  <MainPanel>{children}</MainPanel>
+                    <MainPanel>{children}</MainPanel>
 
-                  <Footer />
-                </div>
+                    <Footer />
+                  </div>
+                </AnalyticsContextController>
               </DiscordContextController>
             </AuthorizationContextController>
           </ToastContextController>

app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.tsx

@@ -12,6 +12,8 @@ import { Card } from "ui/card/Card";
 import metadataBatch0_22 from "providers/svpervnder/hellheadz/metadata-batch-0-22.json";
 import { Icon } from "ui/icon/Icon";
 import { Accordion } from "ui/accordion/Accordion";
+import { useAnalyticsContext } from "context/analytics/useAnalyticsContext";
+import analytics from "providers/analytics";
 
 import styles from "./LarsKristoHellheads.module.scss";
 import { ItemMetadata, LatestCollectionProps } from "./LarsKristoHellheads.types";
@@ -24,10 +26,19 @@ export const LarsKristoHellheads: React.FC<LatestCollectionProps> = ({ className
   const [currentItem, setCurrentItem] = useState<ItemMetadata | undefined>();
 
   const routes = useRoutes();
+  const AnalyticsContext = useAnalyticsContext();
 
   const handleExpand = (item: ItemMetadata) => {
     setCurrentItem(item);
     displayDetailsModals(true);
+
+    AnalyticsContext.onClick({
+      name: analytics.EventTracking.click.homepage.collection_item,
+      meta: {
+        name: item.name,
+        tokenId: item.id,
+      },
+    });
   };
 
   const handleClose = () => {

app/src/ui/svpervnder/collections/larskristo_hellheads/grid-item/GridItem.tsx

@@ -5,21 +5,13 @@ import { Grid } from "ui/grid/Grid";
 import { Card } from "ui/card/Card";
 import { Typography } from "ui/typography/Typography";
 import { Icon } from "ui/icon/Icon";
-import analytics from "providers/analytics";
 
 import styles from "./GridItem.module.scss";
 import { GridItemProps } from "./GridItem.types";
 
 export const GridItem: React.FC<GridItemProps> = ({ item, handleExpand, className }) => (
   <Grid.Col lg={2} xs={6} key={item.thumbnail} className={clsx(styles["grid-item"], className)}>
-    <Card
-      className={styles["grid-item"]}
-      withSpotlightEffect
-      onClick={() => handleExpand(item)}
-      data-pirsch-event={analytics.EventTracking.click.homepage.collection_item}
-      data-pirsch-meta-name={item.name}
-      data-pirsch-meta-tokenId={item.id}
-    >
+    <Card className={styles["grid-item"]} withSpotlightEffect onClick={() => handleExpand(item)}>
       <div className={styles["grid-item__img"]}>
         <img src={item.thumbnail} alt={item.name} />
       </div>