diff --git a/components/AccountBody.tsx b/components/AccountBody.tsx index aac2ede..ff506d2 100644 --- 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 && ( 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 index 47bed38..2ebfc24 100644 --- 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 index 3f09326..652b1b9 100644 --- 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 index 4b447e7..4773188 100644 --- 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 = ({ )} {canFinalize && ( - finalizeUnstakeModal.onOpen()}> + { + trackGAEvent(GAAction.BUTTON_CLICK, GACategory.FINALIZE_BEGIN) + finalizeUnstakeModal.onOpen() + }} + > Finalize )} diff --git a/components/operationModals/Stake/SelectAmount.tsx b/components/operationModals/Stake/SelectAmount.tsx index d78ac84..116a74d 100644 --- 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 index 542bb04..5fa630e 100644 --- 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 = ({ > setIsChecked(!isChecked)} + onChange={() => { + trackGAEvent(GAAction.BUTTON_CLICK, GACategory.ACCEPT_DISCLAIMER) + setIsChecked(!isChecked) + }} /> - + { + trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CONTINUE_STAKE) + handleOneStepForward() + }} + > Continue diff --git a/components/operationModals/Unstake/SelectAmount.tsx b/components/operationModals/Unstake/SelectAmount.tsx index 4c16fea..234d928 100644 --- 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 index 260a71a..99b1c17 100644 --- 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 = ({ - I Understand + { + trackGAEvent(GAAction.BUTTON_CLICK, GACategory.CHOOSE_I_UNDERSTAND) + handleOneStepForward() + }} + > + I Understand + ) } diff --git a/utils/trackGAEvent.ts b/utils/trackGAEvent.ts index c4ce329..1d98d08 100644 --- 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) => {