refactor: centralize media cache busting in TransactionNotifications

storywithoutend · claude · storywithoutend · commit ece07a72e198 · 2026-01-21T11:28:24.000+08:00
Move bustMediaCache calls from individual transaction files to
TransactionNotifications callback. This centralizes cache invalidation
logic and runs it after transaction confirmation rather than during
transaction preparation.

Use ref pattern for getLatestTransaction to prevent callback recreation
when state.items changes, avoiding cascading re-renders that could
restart gas estimation in TransactionStageModal.

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/src/components/TransactionNotifications.tsx b/src/components/TransactionNotifications.tsx
@@ -1,14 +1,17 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
+import { useClient } from 'wagmi'
 
 import { Button, Toast } from '@ensdomains/thorin'
 
 import { useChainName } from '@app/hooks/chain/useChainName'
 import { META_DATA_QUERY_KEY } from '@app/hooks/useEnsAvatar'
 import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { ClientWithEns } from '@app/types'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
+import { bustMediaCache } from '@app/utils/metadataCache'
 import { UpdateCallback, useCallbackOnTransaction } from '@app/utils/SyncProvider/SyncProvider'
 import { makeEtherscanLink } from '@app/utils/utils'
 
@@ -36,40 +39,127 @@ export const TransactionNotifications = () => {
 
   const chainName = useChainName()
   const queryClient = useQueryClient()
+  const client = useClient()
 
   const [open, setOpen] = useState(false)
 
-  const { resumeTransactionFlow, getResumable } = useTransactionFlow()
+  const { resumeTransactionFlow, getResumable, getLatestTransaction } = 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 }) => {
       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
+
         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(
+                (t) => t.key === 'avatar',
+              )
+              const hasHeaderChange = registrationData.records?.texts?.some(
+                (t) => t.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 'updateProfileRecords':
+          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 'resetProfile':
+          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.records
+              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((t) => t.key === 'avatar')
+                hasHeaderChange = records.texts.some((t) => t.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':
-          case 'updateResolver':
-            // Cache busting now handled in transaction files
-            // Still need to invalidate queries to trigger refetch
+          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(
+                (t) => t.key === 'avatar',
+              )
+              const hasHeaderChange = recordsData.records?.texts?.some(
+                (t) => t.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
         }
@@ -106,7 +196,7 @@ export const TransactionNotifications = () => {
 
       setNotificationQueue((queue) => [...queue, item])
     },
-    [chainName, getResumable, resumeTransactionFlow, t, queryClient],
+    [chainName, client, getResumable, resumeTransactionFlow, t, queryClient],
   )
 
   useCallbackOnTransaction(updateCallback)
diff --git a/src/transaction-flow/transaction/migrateProfile.ts b/src/transaction-flow/transaction/migrateProfile.ts
@@ -7,7 +7,6 @@ import { getSubgraphRecords } from '@ensdomains/ensjs/subgraph'
 import { setRecords } from '@ensdomains/ensjs/wallet'
 
 import type { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 import { profileRecordsToKeyValue, recordsWithCointypeCoins } from '@app/utils/records'
 
 type Data = {
@@ -61,14 +60,6 @@ const transaction = async ({
   if (!profile) throw new Error('No profile found')
   const records = await profileRecordsToKeyValue(profile)
 
-  // Check if avatar or header are being migrated
-  const hasAvatarChange = profile.texts?.some((t) => t.key === 'avatar')
-  const hasHeaderChange = profile.texts?.some((t) => t.key === 'header')
-
-  // Bust cache for migrated media records
-  if (hasAvatarChange) bustMediaCache(data.name, client, 'avatar')
-  if (hasHeaderChange) bustMediaCache(data.name, client, 'header')
-
   return setRecords.makeFunctionData(connectorClient, {
     name: data.name,
     resolverAddress,
diff --git a/src/transaction-flow/transaction/migrateProfileWithReset.ts b/src/transaction-flow/transaction/migrateProfileWithReset.ts
@@ -7,7 +7,6 @@ import { getSubgraphRecords } from '@ensdomains/ensjs/subgraph'
 import { setRecords } from '@ensdomains/ensjs/wallet'
 
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 import { profileRecordsToKeyValue, recordsWithCointypeCoins } from '@app/utils/records'
 
 type Data = {
@@ -63,14 +62,6 @@ const transaction = async ({
     contract: 'ensPublicResolver',
   })
 
-  // Check if avatar or header are being migrated
-  const hasAvatarChange = profile?.texts?.some((t) => t.key === 'avatar')
-  const hasHeaderChange = profile?.texts?.some((t) => t.key === 'header')
-
-  // Bust cache for migrated media records
-  if (hasAvatarChange) bustMediaCache(name, client, 'avatar')
-  if (hasHeaderChange) bustMediaCache(name, client, 'header')
-
   return setRecords.makeFunctionData(connectorClient, {
     name: data.name,
     ...recordsWithCointypeCoins(profileRecords),
diff --git a/src/transaction-flow/transaction/resetProfile.ts b/src/transaction-flow/transaction/resetProfile.ts
@@ -4,7 +4,6 @@ import type { Address } from 'viem'
 import { clearRecords } from '@ensdomains/ensjs/wallet'
 
 import type { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 
 type Data = {
   name: string
@@ -30,12 +29,7 @@ const displayItems = ({ name, resolverAddress }: Data, t: TFunction): Transactio
   ]
 }
 
-const transaction = ({ client, connectorClient, data }: TransactionFunctionParameters<Data>) => {
-  const { name } = data
-
-  // Bust cache for both avatar and header (resetting clears all records)
-  bustMediaCache(name, client)
-
+const transaction = ({ connectorClient, data }: TransactionFunctionParameters<Data>) => {
   return clearRecords.makeFunctionData(connectorClient, data)
 }
 
diff --git a/src/transaction-flow/transaction/resetProfileWithRecords.ts b/src/transaction-flow/transaction/resetProfileWithRecords.ts
@@ -6,7 +6,6 @@ import { RecordOptions } from '@ensdomains/ensjs/utils'
 import { setRecords } from '@ensdomains/ensjs/wallet'
 
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 import { recordOptionsToToupleList, recordsWithCointypeCoins } from '@app/utils/records'
 
 type Data = {
@@ -52,17 +51,7 @@ const displayItems = ({ name, records }: Data, t: TFunction): TransactionDisplay
   ]
 }
 
-const transaction = ({ client, connectorClient, data }: TransactionFunctionParameters<Data>) => {
-  const { name, records } = data
-
-  // Check if avatar or header are being set in the new records
-  const hasAvatarChange = records.texts?.some((t) => t.key === 'avatar')
-  const hasHeaderChange = records.texts?.some((t) => t.key === 'header')
-
-  // Bust cache for modified media records
-  if (hasAvatarChange) bustMediaCache(name, client, 'avatar')
-  if (hasHeaderChange) bustMediaCache(name, client, 'header')
-
+const transaction = ({ connectorClient, data }: TransactionFunctionParameters<Data>) => {
   return setRecords.makeFunctionData(connectorClient, {
     name: data.name,
     ...recordsWithCointypeCoins(data.records),
diff --git a/src/transaction-flow/transaction/updateProfile.ts b/src/transaction-flow/transaction/updateProfile.ts
@@ -5,7 +5,6 @@ import type { RecordOptions } from '@ensdomains/ensjs/utils'
 import { setRecords } from '@ensdomains/ensjs/wallet'
 
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 
 import { recordOptionsToToupleList, recordsWithCointypeCoins } from '../../utils/records'
 
@@ -59,17 +58,7 @@ const displayItems = ({ name, records }: Data, t: TFunction): TransactionDisplay
   ]
 }
 
-const transaction = ({ client, connectorClient, data }: TransactionFunctionParameters<Data>) => {
-  const { name, records } = data
-
-  // Check if avatar or header are being modified in texts array
-  const hasAvatarChange = records.texts?.some((t) => t.key === 'avatar')
-  const hasHeaderChange = records.texts?.some((t) => t.key === 'header')
-
-  // Bust cache for modified media records
-  if (hasAvatarChange) bustMediaCache(name, client, 'avatar')
-  if (hasHeaderChange) bustMediaCache(name, client, 'header')
-
+const transaction = ({ connectorClient, data }: TransactionFunctionParameters<Data>) => {
   return setRecords.makeFunctionData(connectorClient, {
     name: data.name,
     resolverAddress: data.resolverAddress,
diff --git a/src/transaction-flow/transaction/updateProfileRecords.ts b/src/transaction-flow/transaction/updateProfileRecords.ts
@@ -10,7 +10,6 @@ import {
 } from '@app/components/pages/profile/[name]/registration/steps/Profile/profileRecordUtils'
 import { ProfileRecord } from '@app/constants/profileRecordOptions'
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 import { recordOptionsToToupleList, recordsWithCointypeCoins } from '@app/utils/records'
 
 type Data = {
@@ -82,14 +81,6 @@ const transaction = async ({
   const { name, resolverAddress, records, previousRecords = [], clearRecords } = data
   const submitRecords = getProfileRecordsDiff(records, previousRecords)
 
-  // Check if avatar or header are being modified
-  const hasAvatarChange = submitRecords.some((r) => r.key === 'avatar' && r.group === 'media')
-  const hasHeaderChange = submitRecords.some((r) => r.key === 'header' && r.group === 'media')
-
-  // Bust cache for modified media records
-  if (hasAvatarChange) bustMediaCache(name, client, 'avatar')
-  if (hasHeaderChange) bustMediaCache(name, client, 'header')
-
   const recordOptions = await profileRecordsToRecordOptionsWithDeleteAbiArray(client, {
     name,
     profileRecords: submitRecords,
diff --git a/src/transaction-flow/transaction/updateResolver.ts b/src/transaction-flow/transaction/updateResolver.ts
@@ -4,7 +4,6 @@ import { Address } from 'viem'
 import { setResolver } from '@ensdomains/ensjs/wallet'
 
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
-import { bustMediaCache } from '@app/utils/metadataCache'
 
 import { shortenAddress } from '../../utils/utils'
 
@@ -35,11 +34,7 @@ const displayItems = (
   },
 ]
 
-const transaction = ({ client, connectorClient, data }: TransactionFunctionParameters<Data>) => {
-  // Bust cache for both avatar and header when changing resolver
-  // The new resolver may have different records
-  bustMediaCache(data.name, client)
-
+const transaction = ({ connectorClient, data }: TransactionFunctionParameters<Data>) => {
   return setResolver.makeFunctionData(connectorClient, {
     name: data.name,
     contract: data.contract,

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@ import type { Address } from 'viem'`
`4`	`4`	`import { clearRecords } from '@ensdomains/ensjs/wallet'`
`5`	`5`
`6`	`6`	`import type { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'`
`7`		`-import { bustMediaCache } from '@app/utils/metadataCache'`
`8`	`7`
`9`	`8`	`type Data = {`
`10`	`9`	`name: string`
`@@ -30,12 +29,7 @@ const displayItems = ({ name, resolverAddress }: Data, t: TFunction): Transactio`
`30`	`29`	`]`
`31`	`30`	`}`
`32`	`31`
`33`		`-const transaction = ({ client, connectorClient, data }: TransactionFunctionParameters<Data>) => {`
`34`		`- const { name } = data`
`35`		`-`
`36`		`- // Bust cache for both avatar and header (resetting clears all records)`
`37`		`- bustMediaCache(name, client)`
`38`		`-`
	`32`	`+const transaction = ({ connectorClient, data }: TransactionFunctionParameters<Data>) => {`
`39`	`33`	`return clearRecords.makeFunctionData(connectorClient, data)`
`40`	`34`	`}`
`41`	`35`