Analytics: reject tx events

src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx

@@ -24,6 +24,9 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import ExternalLink from '@/components/common/ExternalLink'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import { txDispatch, TxEvent } from '@/services/tx/txEvents'
+import { REJECT_TX_EVENTS } from '@/services/analytics/events/reject-tx'
+import { trackEvent } from '@/services/analytics'
+import { isWalletRejection } from '@/utils/wallets'
 
 type DeleteTxModalProps = {
   safeTxHash: string
@@ -41,10 +44,12 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress,
   const onConfirm = async () => {
     setError(undefined)
     setIsLoading(true)
+    trackEvent(REJECT_TX_EVENTS.DELETE_CONFIRM)
 
     if (!onboard || !safeAddress || !chainId || !safeTxHash) {
       setIsLoading(false)
       setError(new Error('Please connect your wallet first'))
+      trackEvent(REJECT_TX_EVENTS.DELETE_FAIL)
       return
     }
 
@@ -60,12 +65,19 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress,
     } catch (error) {
       setIsLoading(false)
       setError(error as Error)
+      trackEvent(isWalletRejection(error as Error) ? REJECT_TX_EVENTS.DELETE_CANCEL : REJECT_TX_EVENTS.DELETE_FAIL)
       return
     }
 
     setIsLoading(false)
     txDispatch(TxEvent.DELETED, { safeTxHash })
     onSuccess()
+    trackEvent(REJECT_TX_EVENTS.DELETE_SUCCESS)
+  }
+
+  const onCancel = () => {
+    trackEvent(REJECT_TX_EVENTS.DELETE_CANCEL)
+    onClose()
   }
 
   return (
@@ -113,7 +125,7 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, onboard, safeAddress,
       <Divider />
 
       <DialogActions sx={{ padding: 3, justifyContent: 'space-between' }}>
-        <Button size="small" variant="text" onClick={onClose}>
+        <Button size="small" variant="text" onClick={onCancel}>
           Keep it
         </Button>
 

src/components/tx-flow/flows/ReplaceTx/index.tsx

@@ -22,6 +22,8 @@ import { sameAddress } from '@/utils/addresses'
 import { AppRoutes } from '@/config/routes'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import Track from '@/components/common/Track'
+import { REJECT_TX_EVENTS } from '@/services/analytics/events/reject-tx'
 
 const goToQueue = (router: NextRouter) => {
   if (router.pathname === AppRoutes.transactions.tx) {
@@ -68,35 +70,41 @@ const ReplaceTxMenu = ({
 
         <Typography variant="body2" mt={-1} mb={1}>
           You can replace or reject this transaction on-chain. It requires gas fees and your signature.{' '}
-          <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
-            Read more
-          </ExternalLink>{' '}
+          <Track {...REJECT_TX_EVENTS.READ_MORE}>
+            <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
+              Read more
+            </ExternalLink>
+          </Track>
         </Typography>
 
         <Box display="flex" flexDirection="column" gap={2}>
-          <ChoiceButton
-            icon={CachedIcon}
-            onClick={() => setTxFlow(<TokenTransferFlow txNonce={txNonce} />)}
-            title="Replace with another transaction"
-            description="Overwrite by a new transaction with the same nonce"
-            chip="Recommended"
-          />
+          <Track {...REJECT_TX_EVENTS.REPLACE_TX_BUTTON} as="div">
+            <ChoiceButton
+              icon={CachedIcon}
+              onClick={() => setTxFlow(<TokenTransferFlow txNonce={txNonce} />)}
+              title="Replace with another transaction"
+              description="Propose a new transaction with the same nonce to overwrite this one"
+              chip="Recommended"
+            />
+          </Track>
 
           <Tooltip
             arrow
             placement="top"
             title={canCancel ? '' : `Transaction with nonce ${txNonce} already has a reject transaction`}
           >
             <span style={{ width: '100%' }}>
-              <ChoiceButton
-                icon={CancelIcon}
-                iconColor="warning"
-                onClick={() => setTxFlow(<RejectTx txNonce={txNonce} />)}
-                disabled={!canCancel}
-                title="Reject transaction"
-                description="Create a cancellation transaction with the same nonce to avoid security risks"
-                chip="Recommended"
-              />
+              <Track {...REJECT_TX_EVENTS.REJECT_ONCHAIN_BUTTON} as="div">
+                <ChoiceButton
+                  icon={CancelIcon}
+                  iconColor="warning"
+                  onClick={() => setTxFlow(<RejectTx txNonce={txNonce} />)}
+                  disabled={!canCancel}
+                  title="Reject transaction"
+                  description="Propose an on-chain cancellation transaction with the same nonce"
+                  chip={canDelete ? 'Recommended' : undefined}
+                />
+              </Track>
             </span>
           </Tooltip>
 
@@ -110,13 +118,15 @@ const ReplaceTxMenu = ({
                 Don’t want to have this transaction anymore? Remove it permanently from the queue.
               </Typography>
 
-              <ChoiceButton
-                icon={DeleteIcon}
-                iconColor="error"
-                onClick={() => setIsDeleting(true)}
-                title="Delete from the queue"
-                description="Remove this transaction from the queue permanently"
-              />
+              <Track {...REJECT_TX_EVENTS.DELETE_OFFCHAIN_BUTTON} as="div">
+                <ChoiceButton
+                  icon={DeleteIcon}
+                  iconColor="error"
+                  onClick={() => setIsDeleting(true)}
+                  title="Delete from the queue"
+                  description="Remove this transaction from the off-chain queue"
+                />
+              </Track>
 
               {safeTxHash && isDeleting && (
                 <DeleteTxModal onSuccess={onDeleteSuccess} onClose={onDeleteClose} safeTxHash={safeTxHash} />

src/services/analytics/events/reject-tx.ts

@@ -0,0 +1,37 @@
+const category = 'reject-tx'
+
+export const REJECT_TX_EVENTS = {
+  READ_MORE: {
+    action: 'Reject tx read more',
+    category,
+  },
+
+  REPLACE_TX_BUTTON: {
+    action: 'Replace tx button',
+    category,
+  },
+  REJECT_ONCHAIN_BUTTON: {
+    action: 'Reject onchain button',
+    category,
+  },
+  DELETE_OFFCHAIN_BUTTON: {
+    action: 'Delete offchain button',
+    category,
+  },
+  DELETE_CANCEL: {
+    action: 'Delete cancel',
+    category,
+  },
+  DELETE_CONFIRM: {
+    action: 'Delete confirm',
+    category,
+  },
+  DELETE_SUCCESS: {
+    action: 'Delete success',
+    category,
+  },
+  DELETE_FAIL: {
+    action: 'Delete fail',
+    category,
+  },
+}