Add registration tracking events for .eth and TLD (.box) funnel

next.config.mjs

@@ -23,7 +23,7 @@ const babelIncludeRegexes = [
  * @type {import('next').NextConfig}
  * */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: process.env.NODE_ENV !== 'development',
   compiler: {
     styledComponents: true,
   },

src/components/@molecules/SearchInput/SearchInput.tsx

@@ -38,10 +38,11 @@ import { UsePriceQueryKey } from '@app/hooks/ensjs/public/usePrice'
 import { UseWrapperDataQueryKey } from '@app/hooks/ensjs/public/useWrapperData'
 import { useLocalStorage } from '@app/hooks/useLocalStorage'
 import { createQueryKey } from '@app/hooks/useQueryOptions'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { useValidate, validate } from '@app/hooks/useValidate'
 import { useElementSize } from '@app/hooks/useWindowSize'
-import { CreateQueryKey, GenericQueryKey } from '@app/types'
+import { CreateQueryKey, GenericQueryKey, PlausibleProps, PlausibleType } from '@app/types'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { getRegistrationStatus } from '@app/utils/registrationStatus'
 import { thread, yearsToSeconds } from '@app/utils/utils'
@@ -311,6 +312,7 @@ type CreateSearchHandlerProps = {
   setHistory: Dispatch<SetStateAction<HistoryItem[]>>
   setInputVal: Dispatch<SetStateAction<string>>
   queryClient: QueryClient
+  trackRegistrationEvent: (type: PlausibleType, customProps?: PlausibleProps | undefined) => void
 }
 
 const createSearchHandler =
@@ -323,6 +325,7 @@ const createSearchHandler =
     setHistory,
     setInputVal,
     queryClient,
+    trackRegistrationEvent,
   }: CreateSearchHandlerProps): SearchHandler =>
   (index: number) => {
     if (index === -1) return
@@ -338,6 +341,8 @@ const createSearchHandler =
       { lastAccessed: Date.now(), nameType, text, isValid: selectedItem.isValid },
     ])
 
+    trackRegistrationEvent('Search selected', { keyword: text })
+
     const path = getRouteForSearchItem({ address, chainId, queryClient, selectedItem })
     setInputVal('')
     searchInputRef.current?.blur()
@@ -654,6 +659,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
   const handleFocusOut = useCallback(() => toggle(false), [toggle])
 
   const dropdownItems = useBuildDropdownItems(inputVal, history)
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleSearch = useCallback(
@@ -666,6 +672,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
       searchInputRef,
       setHistory,
       setInputVal,
+      trackRegistrationEvent,
     }),
     [address, chainId, dropdownItems, queryClient, router, searchInputRef, setHistory, setInputVal],
   )
@@ -689,6 +696,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
     setInputVal(val)
     setUsingPlaceholder(true)
     debouncer(() => setUsingPlaceholder(false))
+    debouncer(() => trackRegistrationEvent('Start searching', { keyword: val }))
   }
 
   const SearchInputElement = (

src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.tsx

@@ -25,6 +25,7 @@ import { useAddRecentTransaction } from '@app/hooks/transactions/useAddRecentTra
 import { useRecentTransactions } from '@app/hooks/transactions/useRecentTransactions'
 import { useIsSafeApp } from '@app/hooks/useIsSafeApp'
 import { useQueryOptions } from '@app/hooks/useQueryOptions'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import {
   ManagedDialogProps,
   TransactionFlowAction,
@@ -295,7 +296,7 @@ export const TransactionStageModal = ({
 }: ManagedDialogProps) => {
   const { t } = useTranslation()
   const chainName = useChainName()
-
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
   const { data: isSafeApp, isLoading: safeAppStatusLoading } = useIsSafeApp()
   const { data: connectorClient } = useConnectorClient<ConfigWithEns>()
   const client = useClient()
@@ -476,7 +477,12 @@ export const TransactionStageModal = ({
           !!requestError ||
           isTransactionRequestCachedData
         }
-        onClick={() => sendTransaction(request!)}
+        onClick={() => {
+          sendTransaction(request!)
+          trackRegistrationEvent(
+            actionName === 'commitName' ? 'Commit Wallet Opened' : 'Finish Wallet Opened',
+          )
+        }}
         data-testid="transaction-modal-confirm-button"
       >
         {t('transaction.dialog.confirm.openWallet')}
@@ -496,6 +502,8 @@ export const TransactionStageModal = ({
     transactionLoading,
     request,
     isTransactionRequestCachedData,
+    trackRegistrationEvent,
+    actionName,
   ])
 
   const stepStatus = useMemo(() => {

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -1,8 +1,10 @@
 import Head from 'next/head'
 import { useCallback, useEffect, useMemo } from 'react'
+import { flushSync } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { match, P } from 'ts-pattern'
+import { formatUnits } from 'viem'
 import { useAccount, useChainId } from 'wagmi'
 
 import { Dialog, Helper, mq, Typography } from '@ensdomains/thorin'
@@ -13,6 +15,10 @@ import { ProfileRecord } from '@app/constants/profileRecordOptions'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { useNameDetails } from '@app/hooks/useNameDetails'
+import {
+  usePaymentSelectedEventTracker,
+  useRegistrationEventTracker,
+} from '@app/hooks/useRegistrationEventTracker'
 import useRegistrationReducer from '@app/hooks/useRegistrationReducer'
 import { useResolverExists } from '@app/hooks/useResolverExists'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
@@ -122,6 +128,8 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
 
   const labelTooLong = isLabelTooLong(normalisedName)
   const { dispatch, item } = useRegistrationReducer(selected)
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
+  const { trackPaymentSelectedEvent } = usePaymentSelectedEventTracker(item)
   const step = item.queue[item.stepIndex]
 
   const keySuffix = `${nameDetails.normalisedName}-${address}`
@@ -142,7 +150,13 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     seconds,
     reverseRecord,
     paymentMethodChoice,
+    estimatedTotal,
+    ethPrice,
   }: RegistrationStepData['pricing']) => {
+    console.log('>>', seconds, reverseRecord, paymentMethodChoice, estimatedTotal, ethPrice)
+    console.log('paymentTotal', formatUnits((estimatedTotal * ethPrice) / BigInt(1e8), 18))
+    trackPaymentSelectedEvent(paymentMethodChoice)
+
     if (paymentMethodChoice === PaymentMethod.moonpay) {
       initiateMoonpayRegistrationMutation.mutate(secondsToYears(seconds))
       return
@@ -199,6 +213,11 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     dispatch({ name: back ? 'decreaseStep' : 'increaseStep', selected })
   }
 
+  const infoCallback = ({ back }: BackObj) => {
+    genericCallback({ back })
+    trackRegistrationEvent('Commit started')
+  }
+
   const transactionsCallback = useCallback(
     ({ back, resetSecret }: BackObj & { resetSecret?: boolean }) => {
       if (resetSecret) {
@@ -220,6 +239,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
 
   const onStart = () => {
     dispatch({ name: 'setStarted', selected })
+    trackRegistrationEvent('Timer started')
   }
 
   const onComplete = (toProfile: boolean) => {
@@ -301,7 +321,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
               <Info
                 name={normalisedName}
                 registrationData={item}
-                callback={genericCallback}
+                callback={infoCallback}
                 onProfileClick={infoProfileCallback}
               />
             ))

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx

@@ -30,6 +30,7 @@ import { ConnectButton } from '@app/components/ConnectButton'
 import { useAccountSafely } from '@app/hooks/account/useAccountSafely'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
 import { useEstimateFullRegistration } from '@app/hooks/gasEstimation/useEstimateRegistration'
+import { useEthPrice } from '@app/hooks/useEthPrice'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { ONE_DAY, ONE_YEAR } from '@app/utils/time'
 
@@ -380,6 +381,8 @@ export type ActionButtonProps = {
   seconds: number
   balance: GetBalanceData | undefined
   totalRequiredBalance?: bigint
+  estimatedTotal?: bigint
+  ethPrice?: bigint
 }
 
 export const ActionButton = (props: ActionButtonProps) => {
@@ -404,20 +407,35 @@ export const ActionButton = (props: ActionButtonProps) => {
         reverseRecord,
         seconds,
         paymentMethodChoice,
+        estimatedTotal,
+        ethPrice,
         callback,
       }) => (
         <Button
           loading={initiateMoonpayRegistrationMutation.isPending}
           data-testid="next-button"
-          onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
+          onClick={() =>
+            callback({
+              reverseRecord,
+              seconds,
+              paymentMethodChoice,
+              estimatedTotal,
+              ethPrice,
+            })
+          }
           disabled={!paymentMethodChoice || initiateMoonpayRegistrationMutation.isPending}
         >
           {t('action.next', { ns: 'common' })}
         </Button>
       ),
     )
     .with(
-      P.when((_props) => typeof _props.balance?.value !== 'bigint' || !_props.totalRequiredBalance),
+      P.when(
+        (_props) =>
+          typeof _props.balance?.value !== 'bigint' ||
+          !_props.totalRequiredBalance ||
+          !_props.ethPrice,
+      ),
       () => (
         <Button data-testid="next-button" disabled>
           {t('loading', { ns: 'common' })}
@@ -438,15 +456,25 @@ export const ActionButton = (props: ActionButtonProps) => {
         </Button>
       ),
     )
-    .otherwise(({ reverseRecord, seconds, paymentMethodChoice, callback }) => (
-      <Button
-        data-testid="next-button"
-        onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
-        disabled={!paymentMethodChoice}
-      >
-        {t('action.next', { ns: 'common' })}
-      </Button>
-    ))
+    .otherwise(
+      ({ reverseRecord, seconds, paymentMethodChoice, estimatedTotal, ethPrice, callback }) => (
+        <Button
+          data-testid="next-button"
+          onClick={() =>
+            callback({
+              reverseRecord,
+              seconds,
+              paymentMethodChoice,
+              estimatedTotal,
+              ethPrice,
+            })
+          }
+          disabled={!paymentMethodChoice}
+        >
+          {t('action.next', { ns: 'common' })}
+        </Button>
+      ),
+    )
 }
 
 export type PricingProps = {
@@ -484,6 +512,7 @@ const Pricing = ({
   const { address } = useAccountSafely()
   const { data: balance } = useBalance({ address })
   const resolverAddress = useContractAddress({ contract: 'ensPublicResolver' })
+  const { data: ethPrice } = useEthPrice()
 
   const [seconds, setSeconds] = useState(() => registrationData.seconds ?? ONE_YEAR)
 
@@ -535,6 +564,8 @@ const Pricing = ({
   const totalRequiredBalance = durationRequiredBalance
     ? durationRequiredBalance + (premiumFee || 0n) + (estimatedGasFee || 0n)
     : 0n
+  const estimatedTotal =
+    (totalDurationBasedFee || 0n) + (premiumFee || 0n) + (estimatedGasFee || 0n)
 
   const previousYearlyFee = usePreviousDistinct(yearlyFee) || 0n
 
@@ -594,6 +625,8 @@ const Pricing = ({
             seconds,
             balance,
             totalRequiredBalance,
+            estimatedTotal,
+            ethPrice,
           }}
         />
       </MobileFullWidth>

src/components/pages/profile/[name]/registration/steps/Transactions.tsx

@@ -10,6 +10,7 @@ import { Button, CountdownCircle, Dialog, Heading, mq, Spinner } from '@ensdomai
 import MobileFullWidth from '@app/components/@atoms/MobileFullWidth'
 import { Card } from '@app/components/Card'
 import { useExistingCommitment } from '@app/hooks/registration/useExistingCommitment'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import useRegistrationParams from '@app/hooks/useRegistrationParams'
 import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
 import { createTransactionItem } from '@app/transaction-flow/transaction'
@@ -93,6 +94,7 @@ type Props = {
 
 const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
   const { t } = useTranslation('register')
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
 
   const { address } = useAccount()
   const keySuffix = `${name}-${address}`
@@ -140,6 +142,8 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
       autoClose: true,
       resumeLink: `/register/${name}`,
     })
+
+    trackRegistrationEvent('Finish started')
   }
 
   const showCommitTransaction = () => {
@@ -148,6 +152,8 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
 
   const showRegisterTransaction = () => {
     resumeTransactionFlow(registerKey)
+
+    trackRegistrationEvent('Finish started')
   }
 
   const resetTransactions = () => {