done

trilitech · Aug 7, 2024 · 99ac02e · 99ac02e
1 parent 855048c
commit 99ac02e
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 8 deletions.
diff --git a/components/AccountBody.tsx b/components/AccountBody.tsx
@@ -343,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
@@ -353,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

diff --git a/components/SuccessModal.tsx b/components/SuccessModal.tsx
@@ -22,6 +22,9 @@ const setGAEvent = (opType?: 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
   }

diff --git a/components/operationModals/FinalizeUnstake/ConfirmFinalizeUnstake.tsx b/components/operationModals/FinalizeUnstake/ConfirmFinalizeUnstake.tsx
@@ -6,6 +6,7 @@ import { useConnection } from '@/providers/ConnectionProvider'
 import { Header, BalanceBox, ColumnHeader } from '@/components/modalBody'
 import { useOperationResponse } from '@/providers/OperationResponseProvider'
 import { ErrorBlock } from '@/components/ErrorBlock'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 interface ConfirmFinalizeUnstake {
   withdrawAmount: number
@@ -42,6 +43,7 @@ export const ConfirmFinalizeUnstake = ({
           setWaitingOperation(false)
 
           if (response.success) {
+            trackGAEvent(GAAction.BUTTON_CLICK, GACategory.FINALIZE_END)
             setOpHash(response.opHash)
             setMessage(
               `You have successfully finalized ${withdrawAmount} ꜩ. These funds are now part of your spendable balance.`

diff --git a/components/operationModals/FinalizeUnstake/UnstakeOperationBox.tsx b/components/operationModals/FinalizeUnstake/UnstakeOperationBox.tsx
@@ -5,6 +5,7 @@ import { mutezToTez } from '@/utils/mutezToTez'
 import { TertiaryButton } from '@/components/buttons/TertiaryButton'
 import { FinalizeUnstakeModal } from '.'
 import Link from 'next/link'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 export const UnstakeOperationBox = ({
   unstakeOp,
@@ -101,7 +102,12 @@ export const UnstakeOperationBox = ({
         )}
       </Box>
       {canFinalize && (
-        <TertiaryButton onClick={() => finalizeUnstakeModal.onOpen()}>
+        <TertiaryButton
+          onClick={() => {
+            trackGAEvent(GAAction.BUTTON_CLICK, GACategory.FINALIZE_BEGIN)
+            finalizeUnstakeModal.onOpen()
+          }}
+        >
           Finalize
         </TertiaryButton>
       )}

diff --git a/components/operationModals/Stake/SelectAmount.tsx b/components/operationModals/Stake/SelectAmount.tsx
@@ -6,6 +6,7 @@ import { stake } from '@/components/Operations/operations'
 import { useConnection } from '@/providers/ConnectionProvider'
 import { useOperationResponse } from '@/providers/OperationResponseProvider'
 import { ErrorBlock } from '@/components/ErrorBlock'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 export const SelectAmount = ({
   spendableBalance,
@@ -19,12 +20,14 @@ export const SelectAmount = ({
   stakedAmount: number
 }) => {
   const { Tezos, beaconWallet } = useConnection()
-  const { setMessage, setSuccess, setOpHash } = useOperationResponse()
+  const { setMessage, setSuccess, setOpHash, setOpType } =
+    useOperationResponse()
   const [errorMessage, setErrorMessage] = useState('')
   const [waitingOperation, setWaitingOperation] = useState(false)
 
   const handleChange = (event: any) => {
     const val = Number(event.target.value)
+    trackGAEvent(GAAction.BUTTON_CLICK, GACategory.INPUT_AMOUNT)
 
     if (val <= spendableBalance) setStakedAmount(val)
     else if (val === 0) setStakedAmount(0)
@@ -67,12 +70,16 @@ export const SelectAmount = ({
             return
           }
 
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.START_STAKE_BEGIN)
+
           setWaitingOperation(true)
           const response = await stake(Tezos, stakedAmount, beaconWallet)
           setWaitingOperation(false)
 
           if (response.success) {
+            trackGAEvent(GAAction.BUTTON_CLICK, GACategory.START_STAKE_END)
             setOpHash(response.opHash)
+            setOpType('stake')
             setMessage(`You have successfully staked ${stakedAmount} ꜩ`)
             setSuccess(true)
             setStakedAmount(0)

diff --git a/components/operationModals/Stake/StakeStart.tsx b/components/operationModals/Stake/StakeStart.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Flex, Text, Checkbox, Image } from '@chakra-ui/react'
 import { Header, Description } from '@/components/modalBody'
 import { PrimaryButton } from '@/components/buttons/PrimaryButton'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 export const StakeStart = ({
   handleOneStepForward
@@ -34,7 +35,10 @@ export const StakeStart = ({
       >
         <Checkbox
           isChecked={isChecked}
-          onChange={() => setIsChecked(!isChecked)}
+          onChange={() => {
+            trackGAEvent(GAAction.BUTTON_CLICK, GACategory.ACCEPT_DISCLAIMER)
+            setIsChecked(!isChecked)
+          }}
         />
         <Text
           color='#2D3748'
@@ -48,7 +52,13 @@ export const StakeStart = ({
           </Text>
         </Text>
       </Flex>
-      <PrimaryButton disabled={!isChecked} onClick={handleOneStepForward}>
+      <PrimaryButton
+        disabled={!isChecked}
+        onClick={() => {
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CONTINUE_STAKE)
+          handleOneStepForward()
+        }}
+      >
         Continue
       </PrimaryButton>
     </Flex>

diff --git a/components/operationModals/Unstake/SelectAmount.tsx b/components/operationModals/Unstake/SelectAmount.tsx
@@ -13,6 +13,7 @@ import { unstake } from '@/components/Operations/operations'
 import { useConnection } from '@/providers/ConnectionProvider'
 import { useOperationResponse } from '@/providers/OperationResponseProvider'
 import { ErrorBlock } from '@/components/ErrorBlock'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 export const SelectAmount = ({
   stakedAmount,
@@ -84,11 +85,14 @@ export const SelectAmount = ({
             return
           }
 
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.END_STAKE_BEGIN)
+
           setWaitingOperation(true)
           const response = await unstake(Tezos, unstakeAmount, beaconWallet)
           setWaitingOperation(false)
 
           if (response.success) {
+            trackGAEvent(GAAction.BUTTON_CLICK, GACategory.END_STAKE_END)
             setOpHash(response.opHash)
             setTitle('Unstake Requested')
             setMessage(

diff --git a/components/operationModals/Unstake/UnstakeStart.tsx b/components/operationModals/Unstake/UnstakeStart.tsx
@@ -3,6 +3,7 @@ import { Flex, Image } from '@chakra-ui/react'
 import { Header, Description } from '@/components/modalBody'
 import { PrimaryButton } from '@/components/buttons/PrimaryButton'
 import { RoundBorderText } from '../Delegate/DelegateStart'
+import { trackGAEvent, GAAction, GACategory } from '@/utils/trackGAEvent'
 
 export const UnstakeStart = ({
   handleOneStepForward
@@ -22,7 +23,14 @@ export const UnstakeStart = ({
         <RoundBorderText step={1} text='UNSTAKE' />
         <RoundBorderText step={2} text='FINALIZE' />
       </Flex>
-      <PrimaryButton onClick={handleOneStepForward}>I Understand</PrimaryButton>
+      <PrimaryButton
+        onClick={() => {
+          trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CHOOSE_I_UNDERSTAND)
+          handleOneStepForward()
+        }}
+      >
+        I Understand
+      </PrimaryButton>
     </Flex>
   )
 }
diff --git a/utils/trackGAEvent.ts b/utils/trackGAEvent.ts
@@ -21,7 +21,23 @@ export enum GACategory {
   CHANGE_BAKER_SUCCESS = 'change_baker_success',
 
   END_DELEGATE_BEGIN = 'end_delegate_begin',
-  END_DELEGATE_END = 'end_delegate_end'
+  END_DELEGATE_END = 'end_delegate_end',
+
+  CHOOSE_STAKE = 'choose_stake',
+  ACCEPT_DISCLAIMER = 'accept_disclaimer',
+  CONTINUE_STAKE = 'continue_stake',
+  INPUT_AMOUNT = 'input_amount',
+  START_STAKE_BEGIN = 'start_stake_begin',
+  START_STAKE_END = 'start_stake_end',
+  CONTINUE_AFTER_STAKE = 'continue_after_stake',
+
+  CHOOSE_UNSTAKE = 'choose_unstake',
+  CHOOSE_I_UNDERSTAND = 'choose_i_understand',
+  END_STAKE_BEGIN = 'end_stake_begin',
+  END_STAKE_END = 'end_stake_end',
+
+  FINALIZE_BEGIN = 'finalize_begin',
+  FINALIZE_END = 'finalize_end'
 }
 
 export const trackGAEvent = (action: GAAction, category: GACategory) => {