feat: Events page + analytics events

aufacicenta · Jun 14, 2024 · fd617aa · fd617aa
1 parent fd5e420
commit fd617aa
Show file tree

Hide file tree

Showing 17 changed files with 319 additions and 16 deletions.
diff --git a/app/src/hooks/useRoutes/useRoutes.tsx b/app/src/hooks/useRoutes/useRoutes.tsx
@@ -11,6 +11,9 @@ export const routes = {
     x2y2: () => `https://x2y2.io/collection/larskristo-hellheadz/items`,
     looksrare: () => `https://looksrare.org/collections/0x853bdaa30Cfd5A2Ec1E1d75935eBca7A0E52626D`,
   },
+  socials: {
+    discord: `https://discord.gg/y3GWNkRh`,
+  },
   oauth: {
     discord: {
       lkhh: () => `${origin}/oauth/discord/lkhh`,
@@ -20,6 +23,9 @@ export const routes = {
     index: () => `/artists`,
     larskristo: () => `/artists/larskristo`,
   },
+  events: {
+    index: () => `/events`,
+  },
   api: {
     discord: {
       verifyOwnership: () => `/api/discord/verify-ownership`,

diff --git a/app/src/pages/events/index.tsx b/app/src/pages/events/index.tsx
@@ -0,0 +1,36 @@
+import { GetServerSidePropsContext, NextPage } from "next";
+import { i18n, useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Head from "next/head";
+
+import { HomeLayout } from "layouts/home-layout/HomeLayout";
+import { Events } from "ui/svpervnder/events/Events";
+
+const Index: NextPage = () => {
+  const { t } = useTranslation("head");
+
+  return (
+    <HomeLayout>
+      <Head>
+        <title>{t("head.og.title")}</title>
+        <meta name="description" content={t("head.og.description")} />
+        <meta property="og:title" content={t("head.og.title")} />
+        <meta property="og:description" content={t("head.og.description")} />
+      </Head>
+
+      <Events />
+    </HomeLayout>
+  );
+};
+
+export const getServerSideProps = async ({ locale }: GetServerSidePropsContext) => {
+  await i18n?.reloadResources();
+
+  return {
+    props: {
+      ...(await serverSideTranslations(locale!, ["common", "head", "chat", "prompt-wars"])),
+    },
+  };
+};
+
+export default Index;
diff --git a/app/src/providers/analytics/events.ts b/app/src/providers/analytics/events.ts
@@ -1,7 +1,21 @@
 export const EventTracking = {
   click: {
+    events: {
+      discord_button: `click.events.discord_button`,
+    },
+    navbar: {
+      wallet_selector: `click.navbar.wallet_selector`,
+    },
+    footer: {
+      navigation: `click.footer.navigation`,
+      socials: `click.footer.socials`,
+    },
     homepage: {
       collection_item: `click.homepage.collection_item`,
+      collection_discord_card_button: `click.homepage.collection_discord_card_button`,
+      faqs_discord_button: `click.homepage.faqs_discord_button`,
+      faqs_accordion_trigger: `click.homepage.faqs_accordion_trigger`,
+      marketplaces_button: `click.homepage.marketplaces_button`,
     },
   },
 };
diff --git a/app/src/ui/accordion/Accordion.tsx b/app/src/ui/accordion/Accordion.tsx
@@ -2,22 +2,29 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 
 import { Icon } from "ui/icon/Icon";
+import { useAnalyticsContext } from "context/analytics/useAnalyticsContext";
 
 import { AccordionContentProps, AccordionHeaderProps, AccordionProps } from "./Accordion.types";
 import styles from "./Accordion.module.scss";
 
 export const Accordion: React.FC<AccordionProps> & {
   Header: React.FC<AccordionHeaderProps>;
   Content: React.FC<AccordionContentProps>;
-} = ({ className, accordionHeader, accordionContent, isDefaultExpanded }) => {
+} = ({ className, accordionHeader, accordionContent, isDefaultExpanded, analyticsEvent }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  const AnalyticsContext = useAnalyticsContext();
+
   useEffect(() => {
     setIsExpanded(!!isDefaultExpanded);
   }, [isDefaultExpanded]);
 
   const onClickHeaderTrigger = () => {
     setIsExpanded(!isExpanded);
+
+    if (analyticsEvent?.name) {
+      AnalyticsContext.onClick(analyticsEvent);
+    }
   };
 
   return (

diff --git a/app/src/ui/accordion/Accordion.types.ts b/app/src/ui/accordion/Accordion.types.ts
@@ -1,8 +1,11 @@
 import { HTMLAttributes, ReactNode } from "react";
 
+import { AnalyticsEvent } from "context/analytics/AnalyticsContext.types";
+
 export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
   accordionHeader: ReactNode;
   accordionContent: ReactNode;
+  analyticsEvent?: AnalyticsEvent;
   isDefaultExpanded?: boolean;
   className?: string;
 };

diff --git a/app/src/ui/button/Button.module.scss b/app/src/ui/button/Button.module.scss
@@ -18,6 +18,7 @@ $HALF_LOADER_SIZE: 15px;
 .button {
   @extend .button-primary;
   display: inline-block;
+  width: fit-content;
   min-width: auto;
   line-height: 0;
   white-space: nowrap;
@@ -159,7 +160,7 @@ $HALF_LOADER_SIZE: 15px;
     &:hover,
     &:active,
     &:focus {
-      background: rgba(var(--color-status-success), 0.9);
+      background: rgb(var(--color-status-success) 0.9);
     }
   }
 
@@ -174,7 +175,7 @@ $HALF_LOADER_SIZE: 15px;
     &:hover,
     &:active,
     &:focus {
-      background: rgba(var(--color-status-info), 0.9);
+      background: rgb(var(--color-status-info) 0.9);
     }
   }
 
@@ -185,7 +186,7 @@ $HALF_LOADER_SIZE: 15px;
     &:hover,
     &:active,
     &:focus {
-      background: rgba(var(--color-status-critical), 0.9);
+      background: rgb(var(--color-status-critical) 0.9);
     }
   }
 
@@ -208,7 +209,7 @@ $HALF_LOADER_SIZE: 15px;
     &:hover,
     &:active,
     &:focus {
-      background: rgba(var(--color-dark-5), 0.9);
+      background: rgb(var(--color-dark-5) 0.9);
     }
   }
 
@@ -493,12 +494,12 @@ $HALF_LOADER_SIZE: 15px;
   }
 
   &--glass {
-    border: 1px solid rgba(48, 66, 213, 0.3);
+    border: 1px solid rgb(48 66 213 / 30%);
     border-radius: 16px;
+
     /* From https://css.glass */
-    background: rgba(83, 86, 252, 0.2);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    -webkit-backdrop-filter: blur(5px);
+    background: rgb(83 86 252 / 20%);
+    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
     backdrop-filter: blur(5px);
   }
 

diff --git a/app/src/ui/footer/Footer.module.scss b/app/src/ui/footer/Footer.module.scss
@@ -11,6 +11,10 @@
   border-top: 1px solid var(--color-background-contrast);
   background-color: var(--color-background);
 
+  &__bottom {
+    margin-top: $space-default;
+  }
+
   &__socials {
     display: flex;
 
@@ -48,6 +52,7 @@
   &__right,
   &__center {
     display: flex;
+    flex-wrap: wrap;
 
     &--item {
       @include atLargeTablet {
@@ -57,7 +62,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      min-height: $footer-height-mobile;
+      min-height: auto;
       padding: $space-default 0;
 
       &-flat {

diff --git a/app/src/ui/footer/Footer.module.scss.d.ts b/app/src/ui/footer/Footer.module.scss.d.ts
@@ -1,5 +1,6 @@
 export type Styles = {
   footer: string;
+  footer__bottom: string;
   footer__center: string;
   "footer__center--item": string;
   "footer__center--item-flat": string;

diff --git a/app/src/ui/footer/Footer.tsx b/app/src/ui/footer/Footer.tsx
@@ -9,12 +9,20 @@ import { Icon } from "ui/icon/Icon";
 import { Button } from "ui/button/Button";
 import evm from "providers/evm";
 import { ERC721Instance } from "providers/evm/ERC721Instance";
+import { useAnalyticsContext } from "context/analytics/useAnalyticsContext";
+import analytics from "providers/analytics";
+import { AnalyticsEvent } from "context/analytics/AnalyticsContext.types";
 
 import { FooterProps } from "./Footer.types";
 import styles from "./Footer.module.scss";
 
 export const Footer: React.FC<FooterProps> = ({ className }) => {
   const routes = useRoutes();
+  const AnalyticsContext = useAnalyticsContext();
+
+  const onClick = (event: AnalyticsEvent) => {
+    AnalyticsContext.onClick(event);
+  };
 
   return (
     <footer className={clsx(styles.footer, className)}>
@@ -23,22 +31,66 @@ export const Footer: React.FC<FooterProps> = ({ className }) => {
           <Grid.Col lg={6} sm={6} xs={6}>
             <div className={styles.footer__left}>
               <div className={styles["footer__left--item"]}>
-                <Typography.Link flat href={`${routes.home()}#collection`}>
+                <Typography.Link
+                  flat
+                  href={`${routes.home()}#collection`}
+                  onClick={() =>
+                    onClick({
+                      name: analytics.EventTracking.click.footer.navigation,
+                      meta: {
+                        item: "collection",
+                      },
+                    })
+                  }
+                >
                   Collection
                 </Typography.Link>
               </div>
               <div className={styles["footer__left--item"]}>
-                <Typography.Link flat href={`${routes.home()}#faqs`}>
+                <Typography.Link
+                  flat
+                  href={`${routes.home()}#faqs`}
+                  onClick={() =>
+                    onClick({
+                      name: analytics.EventTracking.click.footer.navigation,
+                      meta: {
+                        item: "faqs",
+                      },
+                    })
+                  }
+                >
                   FAQs
                 </Typography.Link>
               </div>
               <div className={styles["footer__left--item"]}>
-                <Typography.Link flat href="#">
+                <Typography.Link
+                  flat
+                  href={routes.events.index()}
+                  onClick={() =>
+                    onClick({
+                      name: analytics.EventTracking.click.footer.navigation,
+                      meta: {
+                        item: "events",
+                      },
+                    })
+                  }
+                >
                   Events
                 </Typography.Link>
               </div>
               <div className={styles["footer__left--item"]}>
-                <Typography.Link flat href={routes.artists.larskristo()}>
+                <Typography.Link
+                  flat
+                  href={routes.artists.larskristo()}
+                  onClick={() =>
+                    onClick({
+                      name: analytics.EventTracking.click.footer.navigation,
+                      meta: {
+                        item: "about",
+                      },
+                    })
+                  }
+                >
                   About
                 </Typography.Link>
               </div>
@@ -55,15 +107,18 @@ export const Footer: React.FC<FooterProps> = ({ className }) => {
           </Grid.Col>
         </Grid.Row>
       </Grid.Container>
-      <Grid.Container>
+      <Grid.Container className={clsx(styles.footer__bottom)}>
         <Grid.Row>
           <Grid.Col lg={6} sm={6} xs={6}>
             <div className={clsx(styles.footer__left, styles.footer__socials)}>
               <div className={styles["footer__socials--links"]}>
                 <Typography.Link
                   className={clsx(styles["footer__socials--link"])}
-                  href="https://discord.gg/xZuhTDTef3"
+                  href={routes.socials.discord}
                   target="_blank"
+                  onClick={() =>
+                    onClick({ name: analytics.EventTracking.click.footer.socials, meta: { item: "discord" } })
+                  }
                 >
                   <Icon name="icon-discord" />
                 </Typography.Link>
@@ -75,6 +130,9 @@ export const Footer: React.FC<FooterProps> = ({ className }) => {
                   href={`${evm.getBlockExplorerUrl()}/token/${ERC721Instance.defaultContractAddress}`}
                   target="_blank"
                   leftIcon={<EtherscanIcon className={styles["footer__socials--etherscan-icon"]} />}
+                  onClick={() =>
+                    onClick({ name: analytics.EventTracking.click.footer.socials, meta: { item: "etherscan" } })
+                  }
                 >
                   LK💀💀
                 </Button>