Add google analytics and add cookie banner

components/AccountBody.tsx

@@ -38,6 +38,7 @@ import { CopyAlert } from './CopyAlert'
 import { ExpandBakerInfoTable } from './ExpandBakerInfoTable'
 import _ from 'lodash'
 import { DisabledStakeAlert } from '@/components/DisabledStakeAlert'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 const getNumOfUnstake = (
   unstOps?: UnstakedOperation[],
@@ -75,7 +76,8 @@ export const AccountBody = ({
     title,
     message,
     opHash,
-    resetOperation
+    resetOperation,
+    opType
   } = useOperationResponse()
 
   const {
@@ -160,6 +162,7 @@ export const AccountBody = ({
           desc={message}
           tzktLink={`${process.env.NEXT_PUBLIC_TZKT_UI_URL}/${opHash}`}
           resetOperation={resetOperation}
+          opType={opType}
         />
       )}
       <Flex
@@ -226,6 +229,10 @@ export const AccountBody = ({
               {accountInfo?.type === 'user' && stakingOpsStatus.Delegated && (
                 <End
                   onClick={() => {
+                    trackGAEvent(
+                      GAAction.BUTTON_CLICK,
+                      GACategory.END_DELEGATE_BEGIN
+                    )
                     endDelegateModal.onOpen()
                   }}
                 />
@@ -249,7 +256,15 @@ export const AccountBody = ({
               </Text>
               {accountInfo?.type === 'user' &&
                 (stakingOpsStatus.Delegated ? (
-                  <Change onClick={() => changeBakerModal.onOpen()} />
+                  <Change
+                    onClick={() => {
+                      trackGAEvent(
+                        GAAction.BUTTON_CLICK,
+                        GACategory.CHOOSE_CHANGE_BAKER
+                      )
+                      changeBakerModal.onOpen()
+                    }}
+                  />
                 ) : (
                   <ViewBakers />
                 ))}
@@ -263,9 +278,9 @@ export const AccountBody = ({
                   fontWeight={600}
                   lineHeight='18px'
                 >
-                  {accountInfo?.evaluatedDelegate.alias ??
+                  {accountInfo?.evaluatedDelegate?.alias ??
                     simplifyAddress(
-                      accountInfo?.evaluatedDelegate.address ?? ''
+                      accountInfo?.evaluatedDelegate?.address ?? ''
                     )}
                 </Text>
                 <Image
@@ -311,7 +326,13 @@ export const AccountBody = ({
               <PrimaryButton
                 maxW={''}
                 disabled={isFirstTime}
-                onClick={() => delegateModal.onOpen()}
+                onClick={() => {
+                  trackGAEvent(
+                    GAAction.BUTTON_CLICK,
+                    GACategory.CHOOSE_BAKER_START
+                  )
+                  delegateModal.onOpen()
+                }}
                 w='100%'
               >
                 Select Baker
@@ -322,7 +343,10 @@ export const AccountBody = ({
                 disabled={
                   stakingOpsStatus.Delegated && !stakingOpsStatus.CanUnstake
                 }
-                onClick={() => unstakeModal.onOpen()}
+                onClick={() => {
+                  trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CHOOSE_UNSTAKE)
+                  unstakeModal.onOpen()
+                }}
                 w='100%'
               >
                 Unstake
@@ -332,7 +356,10 @@ export const AccountBody = ({
             {stakingOpsStatus.Delegated && (
               <PrimaryButton
                 disabled={!stakingOpsStatus.CanStake}
-                onClick={() => stakeModal.onOpen()}
+                onClick={() => {
+                  trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CHOOSE_STAKE)
+                  stakeModal.onOpen()
+                }}
                 w='100%'
               >
                 Stake

components/CookieBanner.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Flex,
+  Text,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  Box,
+  Link as ChakraLink
+} from '@chakra-ui/react'
+import Link from 'next/link'
+import { PrimaryButton } from './buttons/PrimaryButton'
+import { SecondaryButton } from './buttons/SecondaryButton'
+import Cookies from 'js-cookie'
+
+function injectGoogleAnalyticsScripts() {
+  const scriptTag1 = document.createElement('script')
+  scriptTag1.setAttribute('strategy', 'afterInteractive')
+  scriptTag1.setAttribute(
+    'src',
+    'https://www.googletagmanager.com/gtag/js?id=G-39LG2721KV'
+  )
+
+  const scriptTag2 = document.createElement('script')
+  scriptTag2.setAttribute('id', 'google-analytics')
+  scriptTag2.setAttribute('strategy', 'afterInteractive')
+  scriptTag2.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-39LG2721KV');
+    `
+
+  document.head.appendChild(scriptTag1)
+  document.head.appendChild(scriptTag2)
+}
+
+export const CookieBanner = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    const consent = Cookies.get('cookie-consent')
+    if (!consent) {
+      setIsOpen(true)
+    } else if (consent === 'accepted') {
+      injectGoogleAnalyticsScripts()
+    }
+  }, [])
+
+  const handleAccept = () => {
+    Cookies.set('cookie-consent', 'accepted', { expires: 365 })
+    injectGoogleAnalyticsScripts()
+    setIsOpen(false)
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        console.log('click')
+      }}
+    >
+      <ModalOverlay />
+      <ModalContent
+        pos='absolute'
+        bottom={[0, null, 10]}
+        borderRadius={4}
+        px={[10, 12]}
+        py={[10, 6]}
+        m={0}
+        maxW='1232px'
+        w={['100%', null, '90%']}
+      >
+        <ModalBody
+          display='flex'
+          flexDir={['column', null, 'row']}
+          justifyContent='space-between'
+          alignItems='center'
+          gap={10}
+        >
+          <Box textAlign={['center', null, 'start']}>
+            <Text
+              fontSize='20px'
+              lineHeight='26px'
+              color='#10121B'
+              mb={[3, null, 0]}
+            >
+              We use cookies to make your experience better.
+            </Text>
+            <ChakraLink as={Link} href='/cookie_policy/' target='_blank'>
+              <Text
+                fontSize='18px'
+                fontWeight={600}
+                lineHeight='24px'
+                textDecor='underline'
+                color='#10121B'
+              >
+                Cookie Policy
+              </Text>
+            </ChakraLink>
+          </Box>
+          <Flex flexDir={['column', null, 'row']} gap='18px'>
+            <PrimaryButton onClick={() => handleAccept()}>
+              <Text>Accept Cookies</Text>
+            </PrimaryButton>
+            <SecondaryButton onClick={() => handleAccept()}>
+              <Text>Necessary Only</Text>
+            </SecondaryButton>
+          </Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

components/LoginModal.tsx

@@ -3,6 +3,7 @@ import { Box, Flex, Image, Text, FlexProps } from '@chakra-ui/react'
 import Link from 'next/link'
 import { PrimaryButton } from './buttons/PrimaryButton'
 import { useConnection } from '@/providers/ConnectionProvider'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 const STEPS = ['DELEGATE', 'STAKE TEZ', 'EARN TEZ']
 
@@ -46,7 +47,14 @@ export const LoginModal = () => {
         ))}
       </Flex>
       <MobileSteps display={['flex', null, 'none']} mb='40px' />
-      <PrimaryButton w={['100%', '170px']} mb='24px' onClick={connect}>
+      <PrimaryButton
+        w={['100%', '170px']}
+        mb='24px'
+        onClick={() => {
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.WALLET_BEGIN)
+          connect()
+        }}
+      >
         Connect Wallet
       </PrimaryButton>
       <Link href='https://spotlight.tezos.com/how-to-stake/' target='_blank'>

components/SuccessModal.tsx

@@ -14,19 +14,36 @@ import {
 import { PrimaryButton } from './buttons/PrimaryButton'
 import Link from 'next/link'
 import { ExternalLinkIcon } from '@chakra-ui/icons'
+import { OpType } from '@/providers/OperationResponseProvider'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
+
+const setGAEvent = (opType?: OpType) => {
+  switch (opType) {
+    case 'delegate':
+      trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CONTINUE_AFTER_DELEGATION)
+      return
+    case 'stake':
+      trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CONTINUE_AFTER_STAKE)
+      return
+    default:
+      return
+  }
+}
 
 export const SuccessModal = ({
   title,
   desc,
   tzktLink,
   resetOperation,
-  open
+  open,
+  opType
 }: {
   title?: string
   desc: string
   tzktLink: string
   resetOperation: () => void
   open: boolean
+  opType?: OpType
 }) => {
   const { onClose } = useDisclosure()
 
@@ -69,6 +86,7 @@ export const SuccessModal = ({
             </Text>
             <PrimaryButton
               onClick={() => {
+                setGAEvent(opType)
                 resetOperation()
                 onClose()
               }}

components/operationModals/ChangeBaker/index.tsx

@@ -68,6 +68,7 @@ export const ChangeBakerModal = ({
               handleOneStepBack={handleOneStepBack}
               selectedBaker={selectedBaker as BakerInfo}
               setSelectedBaker={setSelectedBaker}
+              isChangeBaker={true}
             />
           )
         default:
@@ -92,6 +93,7 @@ export const ChangeBakerModal = ({
             handleOneStepBack={handleOneStepBack}
             selectedBaker={selectedBaker as BakerInfo}
             setSelectedBaker={setSelectedBaker}
+            isChangeBaker={true}
           />
         )
       default:

components/operationModals/Delegate/BakerBox.tsx

@@ -6,6 +6,7 @@ import useClipboard from '@/utils/useClipboard'
 import { CopyAlert } from '@/components/CopyAlert'
 import { BakerInfo } from '@/components/Operations/tezInterfaces'
 import { mutezToTez } from '@/utils/mutezToTez'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 interface BakerBoxProps {
   baker: BakerInfo
@@ -57,6 +58,10 @@ export const BakerBox = ({
         <Box>
           <SecondaryButton
             onClick={() => {
+              trackGAEvent(
+                GAAction.BUTTON_CLICK,
+                GACategory.CHOOSE_BAKER_SUCCESS
+              )
               setSelectedBaker(baker)
               handleOneStepForward()
             }}

components/operationModals/Delegate/ConfirmBaker.tsx

@@ -19,22 +19,26 @@ import { useConnection } from '@/providers/ConnectionProvider'
 import { setDelegate } from '@/components/Operations/operations'
 import { PrimaryButton } from '@/components/buttons/PrimaryButton'
 import { ErrorBlock } from '@/components/ErrorBlock'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 interface ChooseBakerProps {
   handleOneStepForward: () => void
   handleOneStepBack: () => void
   selectedBaker: BakerInfo
   setSelectedBaker: (b: null) => void
+  isChangeBaker?: boolean
 }
 
 export const ConfirmBaker = ({
   handleOneStepForward,
   handleOneStepBack,
   selectedBaker,
-  setSelectedBaker
+  setSelectedBaker,
+  isChangeBaker
 }: ChooseBakerProps) => {
   const { Tezos, beaconWallet } = useConnection()
-  const { setMessage, setSuccess, setOpHash } = useOperationResponse()
+  const { setMessage, setSuccess, setOpHash, setOpType } =
+    useOperationResponse()
   const [errorMessage, setErrorMessage] = useState('')
   const [waitingOperation, setWaitingOperation] = useState(false)
 
@@ -99,6 +103,7 @@ export const ConfirmBaker = ({
       <PrimaryButton
         disabled={!selectedBaker}
         onClick={async () => {
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.START_DELEGATE_BEGIN)
           if (!Tezos || !beaconWallet) {
             setErrorMessage('Wallet is not initialized, log out to try again.')
             return
@@ -116,7 +121,16 @@ export const ConfirmBaker = ({
           )
           setWaitingOperation(false)
           if (response.success) {
+            if (isChangeBaker)
+              trackGAEvent(
+                GAAction.BUTTON_CLICK,
+                GACategory.CHANGE_BAKER_SUCCESS
+              )
+            else
+              trackGAEvent(GAAction.BUTTON_CLICK, GACategory.START_DELEGATE_END)
+
             setOpHash(response.opHash)
+            setOpType('delegate')
             setMessage(
               'You have successfully delegated your balance to the baker. You can now (optionally) stake funds with the baker, and potentially earn higher rewards.'
             )