fix: Track accordion open instead of tx details fetch, rename event

safe-global · Oct 9, 2023 · 8f61a7e · 8f61a7e
1 parent dc30308
commit 8f61a7e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
@@ -29,7 +29,6 @@ import { DelegateCallWarning, UnsignedWarning } from '@/components/transactions/
 import Multisend from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import useIsPending from '@/hooks/useIsPending'
-import { trackEvent, TX_LIST_EVENTS } from '@/services/analytics'
 
 export const NOT_AVAILABLE = 'n/a'
 
@@ -126,10 +125,6 @@ const TxDetails = ({
 
   const [txDetailsData, error, loading] = useAsync<TransactionDetails>(
     async () => {
-      if (!txDetails) {
-        trackEvent(TX_LIST_EVENTS.FETCH_DETAILS)
-      }
-
       return txDetails || getTransactionDetails(chainId, txSummary.id)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
@@ -5,10 +5,11 @@ import TxSummary from '@/components/transactions/TxSummary'
 import TxDetails from '@/components/transactions/TxDetails'
 import CreateTxInfo from '@/components/transactions/SafeCreationTx'
 import { isCreationTxInfo } from '@/utils/transaction-guards'
-import { useContext } from 'react'
+import { useContext, useRef } from 'react'
 import { BatchExecuteHoverContext } from '@/components/transactions/BatchExecuteButton/BatchExecuteHoverProvider'
 import css from './styles.module.css'
 import classNames from 'classnames'
+import { trackEvent, TX_LIST_EVENTS } from '@/services/analytics'
 
 type ExpandableTransactionItemProps = {
   isGrouped?: boolean
@@ -22,6 +23,7 @@ export const ExpandableTransactionItem = ({
   txDetails,
   testId,
 }: ExpandableTransactionItemProps & { testId?: string }) => {
+  const wasOpened = useRef<boolean>(false)
   const hoverContext = useContext(BatchExecuteHoverContext)
 
   const isBatched = hoverContext.activeHover.includes(item.transaction.id)
@@ -37,6 +39,12 @@ export const ExpandableTransactionItem = ({
       defaultExpanded={!!txDetails}
       className={classNames({ [css.batched]: isBatched })}
       data-testid={testId}
+      onChange={() => {
+        if (!wasOpened.current) {
+          trackEvent(TX_LIST_EVENTS.EXPAND_TRANSACTION)
+          wasOpened.current = true
+        }
+      }}
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ justifyContent: 'flex-start', overflowX: 'auto' }}>
         <TxSummary item={item} isGrouped={isGrouped} />

diff --git a/src/services/analytics/events/txList.ts b/src/services/analytics/events/txList.ts
@@ -40,8 +40,8 @@ export const TX_LIST_EVENTS = {
     action: 'Batch Execute',
     category: TX_LIST_CATEGORY,
   },
-  FETCH_DETAILS: {
-    action: 'Fetch transaction details',
+  EXPAND_TRANSACTION: {
+    action: 'Expand transaction item',
     category: TX_LIST_CATEGORY,
   },
 }