Merge pull request #1443 from scroll-tech/scr-event-tracking

ga: track scr related events

Author: Holybasil

src/app/SCR-sSCR/Header/GetSCRDialog.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { Fragment } from "react"
+
 import { Box, Dialog, DialogContent, DialogTitle, Divider, IconButton, SvgIcon, Typography, alpha } from "@mui/material"
 
 import CloseSvg from "@/assets/svgs/bridge/close.svg"
@@ -85,7 +87,7 @@ const GetSCRDialog = props => {
           circumstances will we be responsible for any losses you may incur.
         </Typography>
         {GER_SCR_DATA.map(({ title, data }, index) => (
-          <>
+          <Fragment key={title}>
             {!!index && <Divider sx={{ my: ["2.4rem", "3.2rem"], borderColor: "#E9E9E9" }}></Divider>}
             <Box key={title}>
               <Typography sx={{ fontSize: ["1.6rem", "1.8rem"], lineHeight: "2.4rem", fontWeight: 600 }}>{title}</Typography>
@@ -95,7 +97,7 @@ const GetSCRDialog = props => {
                 ))}
               </Box>
             </Box>
-          </>
+          </Fragment>
         ))}
       </DialogContent>
     </Dialog>

src/app/SCR-sSCR/Header/GetSCRItem.tsx

@@ -1,3 +1,4 @@
+import { sendGAEvent } from "@next/third-parties/google"
 import Image from "next/image"
 
 import { Button, Stack, Typography } from "@mui/material"
@@ -6,6 +7,13 @@ import ArrowSvg from "@/assets/svgs/ecosystem/arrow.svg"
 
 const GetSCRItem = props => {
   const { name, logoURL, href } = props
+
+  const handleEventTracking = () => {
+    sendGAEvent("event", "click_get_SCR_link", {
+      label: name,
+      link: href,
+    })
+  }
   return (
     <Stack sx={{ mt: ["2.4rem", "3.2rem"] }} direction="row" justifyContent="space-between" alignItems="center">
       <Stack direction="row" spacing="1.6rem" alignItems="center">
@@ -22,6 +30,7 @@ const GetSCRItem = props => {
           fontWeight: 600,
         }}
         target="_blank"
+        onClick={handleEventTracking}
       >
         Visit <ArrowSvg className="ml-[8px]"></ArrowSvg>
       </Button>

src/app/SCR-sSCR/Header/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { sendGAEvent } from "@next/third-parties/google"
 import Image from "next/image"
 import { useEffect, useState } from "react"
 
@@ -38,12 +39,18 @@ const Header = props => {
       values: [circulatingSupply, votableSupply],
       action: () => {
         setGetSCROpen(true)
+        sendGAEvent("event", "click_get_SCR", {
+          label: "Get SCR now",
+        })
       },
     },
     {
       id: "stake-scr",
       action: () => {
         // TODO: coming soon
+        // sendGAEvent("event", "click_stack_SCR", {
+        //   label: "Stack SCR now",
+        // })
       },
     },
   ]

src/app/scrETH/Header/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+// import { sendGAEvent } from "@next/third-parties/google"
 import Image from "next/image"
 import { useEffect, useState } from "react"
 
@@ -25,6 +26,13 @@ const Header = () => {
       window.removeEventListener("resize", handleResize)
     }
   }, [])
+
+  // TODO:coming soon
+  // const handleEventTracking = () => {
+  //   sendGAEvent("event", "click_get_ethSCR", {
+  //     label: "",
+  //   })
+  // }
   return (
     <Container
       sx={{

src/theme/light.tsx

@@ -138,6 +138,7 @@ const lightTheme = {
             "&:hover": {
               color: paletteOptions.primary.main,
               backgroundColor: paletteOptions.background.default,
+              borderColor: paletteOptions.primary.main,
             },
           },
         },