refactor: compute cache bust flags at transaction submission time

Move cache bust logic from TransactionNotifications callback to transaction
submission time when the full transaction data is available. This ensures
accurate detection of avatar/header changes for all transaction types.

- Add computeCacheBustFlags utility to centralize cache bust logic
- Store cacheBust flags in transaction store for use after confirmation
- Simplify TransactionNotifications to use pre-computed flags
- Add hasMediaRecordChange helpers for detecting record changes
- Fix migrateProfile/migrateProfileWithReset to return undefined (no bust needed)
- Fix resetProfileWithRecords to always bust cache (uses clearRecords: true)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: storywithoutend

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

@@ -38,6 +38,7 @@ import { sendEvent } from '@app/utils/analytics/events'
 import { getReadableError } from '@app/utils/errors'
 import { getIsCachedData } from '@app/utils/getIsCachedData'
 import { useQuery } from '@app/utils/query/useQuery'
+import { computeCacheBustFlags } from '@app/utils/transactionCacheBust'
 import { hasParaConnection, makeEtherscanLink } from '@app/utils/utils'
 
 import { DisplayItems } from '../DisplayItems'
@@ -456,6 +457,8 @@ export const TransactionStageModal = ({
         addRecentTransaction,
         dispatch,
         isSafeApp,
+        transactionFlowData: transaction.data,
+        computeCacheBustFn: computeCacheBustFlags,
       }),
     },
   })

src/components/@molecules/TransactionDialogManager/stage/query.ts

@@ -6,7 +6,7 @@ import { call, estimateGas, getTransaction, prepareTransactionRequest } from 'vi
 import { useConnections } from 'wagmi'
 
 import { SupportedChain } from '@app/constants/chains'
-import { TransactionStatus } from '@app/hooks/transactions/transactionStore'
+import { CacheBust, TransactionStatus } from '@app/hooks/transactions/transactionStore'
 import { useAddRecentTransaction } from '@app/hooks/transactions/useAddRecentTransaction'
 import { useIsSafeApp } from '@app/hooks/useIsSafeApp'
 import { createTransactionRequest, TransactionName } from '@app/transaction-flow/transaction'
@@ -50,6 +50,8 @@ export const transactionSuccessHandler =
     addRecentTransaction,
     dispatch,
     isSafeApp,
+    transactionFlowData,
+    computeCacheBustFn,
   }: {
     client: ClientWithEns
     connectorClient: ConnectorClientWithEns
@@ -59,6 +61,8 @@ export const transactionSuccessHandler =
     addRecentTransaction: ReturnType<typeof useAddRecentTransaction>
     dispatch: Dispatch<TransactionFlowAction>
     isSafeApp: ReturnType<typeof useIsSafeApp>['data']
+    transactionFlowData?: unknown
+    computeCacheBustFn?: (action: string, data: unknown) => CacheBust | undefined
   }) =>
   async (tx: SendTransactionReturnType) => {
     let transactionData: Transaction | null = null
@@ -84,6 +88,12 @@ export const transactionSuccessHandler =
       }
     }
 
+    // Compute cache bust flags from the original flow data
+    const cacheBust =
+      transactionFlowData && computeCacheBustFn
+        ? computeCacheBustFn(actionName, transactionFlowData)
+        : undefined
+
     addRecentTransaction({
       ...transactionData,
       hash: tx,
@@ -93,6 +103,7 @@ export const transactionSuccessHandler =
       timestamp: Math.floor(Date.now() / 1000),
       isSafeTx: !!isSafeApp,
       searchRetries: 0,
+      cacheBust,
     })
     dispatch({ name: 'setTransactionHash', payload: { hash: tx, key: txKey! } })
   }

src/components/TransactionNotifications.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { useClient } from 'wagmi'
@@ -43,120 +43,53 @@ export const TransactionNotifications = () => {
 
   const [open, setOpen] = useState(false)
 
-  const { resumeTransactionFlow, getResumable, getLatestTransaction } = useTransactionFlow()
+  const { resumeTransactionFlow, getResumable } = useTransactionFlow()
 
   const [notificationQueue, setNotificationQueue] = useState<Notification[]>([])
   const currentNotification = notificationQueue[0]
 
-  // Use ref to avoid recreating callback when state.items changes
-  // This prevents cascading re-renders that can restart gas estimation
-  const getLatestTransactionRef = useRef(getLatestTransaction)
-  useEffect(() => {
-    getLatestTransactionRef.current = getLatestTransaction
-  }, [getLatestTransaction])
-
   const updateCallback = useCallback<UpdateCallback>(
-    ({ action, key, status, hash }) => {
+    ({ action, key, status, hash, cacheBust }) => {
       if (status === 'pending' || status === 'repriced') return
       if (status === 'confirmed') {
-        // Get transaction data for cache busting (use ref to avoid dependency)
-        const latestTx = key ? getLatestTransactionRef.current(key) : undefined
-        const txData = latestTx?.data as { name?: string; records?: unknown } | undefined
-        const ensName = txData?.name
-
+        // Handle analytics events
         switch (action) {
-          case 'registerName': {
+          case 'registerName':
             trackEvent('register', chainName)
-            // Bust cache for avatar/header if being set during registration
-            if (ensName && client) {
-              const registrationData = txData as {
-                name: string
-                records?: { texts?: Array<{ key: string }> }
-              }
-              const hasAvatarChange = registrationData.records?.texts?.some(
-                (text) => text.key === 'avatar',
-              )
-              const hasHeaderChange = registrationData.records?.texts?.some(
-                (text) => text.key === 'header',
-              )
-              if (hasAvatarChange) bustMediaCache(ensName, client as ClientWithEns, 'avatar')
-              if (hasHeaderChange) bustMediaCache(ensName, client as ClientWithEns, 'header')
-            }
-            queryClient.invalidateQueries({ queryKey: [META_DATA_QUERY_KEY] })
             break
-          }
           case 'commitName':
             trackEvent('commit', chainName)
             break
           case 'extendNames':
             trackEvent('renew', chainName)
             break
-          case 'updateResolver':
-          case 'resetProfile': {
-            // These actions always bust both avatar and header
-            if (ensName && client) {
-              bustMediaCache(ensName, client as ClientWithEns)
-            }
-            queryClient.invalidateQueries({ queryKey: [META_DATA_QUERY_KEY] })
-            break
-          }
-          case 'updateProfile':
-          case 'updateProfileRecords': {
-            // Check if avatar or header are being modified in records
-            if (ensName && client) {
-              const profileData = txData as {
-                name: string
-                records?:
-                  | { texts?: Array<{ key: string }> }
-                  | Array<{ key: string; group?: string }>
-              }
-              // Handle both RecordOptions format and ProfileRecord[] format
-              const { records } = profileData
-              let hasAvatarChange = false
-              let hasHeaderChange = false
-              if (Array.isArray(records)) {
-                // ProfileRecord[] format (updateProfileRecords)
-                hasAvatarChange = records.some(
-                  (r) => r.key === 'avatar' && (r as { group?: string }).group === 'media',
-                )
-                hasHeaderChange = records.some(
-                  (r) => r.key === 'header' && (r as { group?: string }).group === 'media',
-                )
-              } else if (records?.texts) {
-                // RecordOptions format (updateProfile)
-                hasAvatarChange = records.texts.some((text) => text.key === 'avatar')
-                hasHeaderChange = records.texts.some((text) => text.key === 'header')
-              }
-              if (hasAvatarChange) bustMediaCache(ensName, client as ClientWithEns, 'avatar')
-              if (hasHeaderChange) bustMediaCache(ensName, client as ClientWithEns, 'header')
-            }
-            queryClient.invalidateQueries({ queryKey: [META_DATA_QUERY_KEY] })
-            break
-          }
-          case 'resetProfileWithRecords':
-          case 'migrateProfile':
-          case 'migrateProfileWithReset': {
-            // Check if avatar or header are in the records being set
-            if (ensName && client) {
-              const recordsData = txData as {
-                name: string
-                records?: { texts?: Array<{ key: string }> }
-              }
-              const hasAvatarChange = recordsData.records?.texts?.some(
-                (text) => text.key === 'avatar',
-              )
-              const hasHeaderChange = recordsData.records?.texts?.some(
-                (text) => text.key === 'header',
-              )
-              if (hasAvatarChange) bustMediaCache(ensName, client as ClientWithEns, 'avatar')
-              if (hasHeaderChange) bustMediaCache(ensName, client as ClientWithEns, 'header')
-            }
-            queryClient.invalidateQueries({ queryKey: [META_DATA_QUERY_KEY] })
-            break
-          }
           default:
             break
         }
+
+        // Use pre-computed cache bust flags from transaction store
+        if (cacheBust && client) {
+          const { avatar, header, name } = cacheBust
+          if (name) {
+            if (avatar) bustMediaCache(name, client as ClientWithEns, 'avatar')
+            if (header) bustMediaCache(name, client as ClientWithEns, 'header')
+          }
+        }
+
+        // Invalidate metadata queries for actions that modify profile data
+        const profileActions = [
+          'registerName',
+          'updateResolver',
+          'resetProfile',
+          'updateProfile',
+          'updateProfileRecords',
+          'resetProfileWithRecords',
+          'migrateProfile',
+          'migrateProfileWithReset',
+        ]
+        if (profileActions.includes(action)) {
+          queryClient.invalidateQueries({ queryKey: [META_DATA_QUERY_KEY] })
+        }
       }
       const resumable = key && getResumable(key)
       const item = {

src/hooks/transactions/transactionStore.ts

@@ -21,6 +21,12 @@ export type TransactionStatus =
   | 'unknown'
   | 'searching'
 
+export type CacheBust = {
+  avatar?: boolean
+  header?: boolean
+  name?: string
+}
+
 interface BaseTransaction {
   hash: Hash
   action: string
@@ -35,6 +41,7 @@ interface BaseTransaction {
   searchStatus?: 'searching' | 'found'
   input?: Hex
   timestamp?: number
+  cacheBust?: CacheBust
 }
 
 interface SearchingTransaction extends BaseTransaction {
@@ -91,6 +98,7 @@ export type Transaction =
 export type NewTransaction = Omit<Transaction, 'status' | 'minedData'> & {
   input?: Hex
   timestamp?: number
+  cacheBust?: CacheBust
 }
 
 type Data = Record<string, Record<number, Transaction[] | undefined>>