diff --git a/src/components/Modal/Receive/index.tsx b/src/components/Modal/Receive/index.tsx index fdd2e21..fc33884 100644 --- a/src/components/Modal/Receive/index.tsx +++ b/src/components/Modal/Receive/index.tsx @@ -1,5 +1,6 @@ import { Flex, Box, ModalContent, ModalHeader, ModalBody, ModalCloseButton, useToast } from '@chakra-ui/react'; import QRCode from 'react-qr-code'; +import { hotjar } from 'react-hotjar'; import { useAccount } from '../../../context/Account'; import useTruncatedAddress from '../../../hooks/useTruncatedAddress'; @@ -20,6 +21,8 @@ const Receive = () => { const handleCopyAddress = async () => { try { await navigator.clipboard.writeText(wallet?.address); + // Event for Hotjar + hotjar.event('copy-address-button'); toast({ description: 'Address copiada', status: 'success' }); } catch (err) { console.error('Failed to copy: ', err); diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index 55b2591..a9cd1bc 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -20,6 +20,7 @@ import { } from '@chakra-ui/react'; import { BigNumber, ethers, FixedNumber } from 'ethers'; import { ArrowRight } from 'react-feather'; +import { hotjar } from 'react-hotjar'; import { useBlockchain } from '../../../context/Blockchain'; import { useToken } from '../../../context/Token'; @@ -100,6 +101,9 @@ const Send = ({ onClose }) => { if (toAddress && mount) { const res = await sendTransaction(toAddress, mountToToken, tokenSelected); if (res?.success) { + // Event for Hotjar + hotjar.event(`send-${tokenSelected}`); + hotjar.event(`${tokenSelected}-${Number(mount) * price.dai.usd}`); toast({ description: 'Transacción enviada', status: 'success' }); setLoading(false); handleCloseModal(); diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 8b04b5f..142313f 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,4 +1,5 @@ import { Modal as ModalBox, ModalOverlay } from '@chakra-ui/react'; +import { hotjar } from 'react-hotjar'; import Receive from './Receive'; import Send from './Send'; @@ -15,6 +16,11 @@ const Modal = (props: Modal) => { if (!type) return; + // Event for Hotjar + if (isOpen) { + hotjar.event(`open-${type}-modal`); + } + return ( diff --git a/src/pages/create.tsx b/src/pages/create.tsx index b34a1f6..df4b12c 100644 --- a/src/pages/create.tsx +++ b/src/pages/create.tsx @@ -3,6 +3,7 @@ import Head from 'next/head'; // import Image from 'next/image'; import { useRouter } from 'next/router'; import { Flex, useToast, VStack, Spinner } from '@chakra-ui/react'; +import { hotjar } from 'react-hotjar'; import { useAccount } from '../context/Account'; @@ -58,6 +59,8 @@ const Create = () => { setLoading(true); if (password === validatePassword) { const { success } = await createWallet(); + // Event for Hotjar + hotjar.event('create-wallet'); if (success) { router.push('/dashboard'); setLoading(false); diff --git a/src/pages/settings/backup.tsx b/src/pages/settings/backup.tsx index b22f009..a01fe08 100644 --- a/src/pages/settings/backup.tsx +++ b/src/pages/settings/backup.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import { ethers } from 'ethers'; import Head from 'next/head'; import { Flex, Box, useDisclosure, VStack, HStack, useToast, Checkbox } from '@chakra-ui/react'; +import { hotjar } from 'react-hotjar'; import { useAccount } from '../../context/Account'; import { db } from '../../utils/db'; @@ -106,6 +107,8 @@ const Backup = () => { const handleSubmit = async (localMnemonic) => { const isValid = ethers.utils.isValidMnemonic(localMnemonic.join(' ')); if (isValid) { + // Event for Hotjar + hotjar.event('backup-seed-phrase'); onOpen(); await db.wallets.update(1, { saveMn: true }); } else { diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx index f08bae6..e1b8370 100644 --- a/src/pages/signup.tsx +++ b/src/pages/signup.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import Head from 'next/head'; import { Flex, useToast, VStack, Box, Link as LinkBox, Spinner } from '@chakra-ui/react'; +import { hotjar } from 'react-hotjar'; import { useAccount } from '../context/Account'; @@ -77,6 +78,8 @@ const Signup = () => { setLoading(true); const arrayToString = temporalMnemonic.join(' '); const { success } = await signupWallet(arrayToString); + // Event for Hotjar + hotjar.event('login-wallet'); if (success) { setLoading(true); } else {