feat: Trigger block data after trx to reflect changes immediately wit…

…hout waiting interval (#10308)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces improvements related to transaction handling and
block data fetching.

### Detailed summary
- Updated transaction handling logic in
`usePublicNodeWaitForTransaction`
- Refactored block data fetching with `useFetchBlockData`
- Updated dependencies and imports in various files

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/hooks/useCatchTxError.tsx

@@ -108,11 +108,6 @@ export default function useCatchTxError(params?: Params) {
       try {
         setTxResponseLoading(true)
 
-        /**
-         * https://github.com/vercel/swr/pull/1450
-         *
-         * wait for useSWRMutation finished, so we could apply SWR in case manually trigger tx call
-         */
         tx = await callTx()
 
         if (!tx) return null

apps/web/src/hooks/usePublicNodeWaitForTransaction.ts

@@ -17,6 +17,7 @@ import {
   http,
 } from 'viem'
 import { usePublicClient } from 'wagmi'
+import { useFetchBlockData } from '@pancakeswap/wagmi'
 import { useActiveChainId } from './useActiveChainId'
 
 export const viemClientsPublicNodes = CHAINS.reduce((prev, cur) => {
@@ -45,6 +46,7 @@ export type PublicNodeWaitForTransactionParams = GetTransactionReceiptParameters
 export function usePublicNodeWaitForTransaction() {
   const { chainId } = useActiveChainId()
   const provider = usePublicClient({ chainId })
+  const refetchBlockData = useFetchBlockData(chainId)
 
   const waitForTransaction_ = useCallback(
     async (opts: PublicNodeWaitForTransactionParams): Promise<TransactionReceipt> => {
@@ -53,12 +55,20 @@ export function usePublicNodeWaitForTransaction() {
           const selectedChain = opts?.chainId ?? chainId
           // our custom node might be late to sync up
           if (selectedChain && viemClientsPublicNodes[selectedChain]) {
-            return await viemClientsPublicNodes[selectedChain].getTransactionReceipt({ hash: opts.hash })
+            const receipt = await viemClientsPublicNodes[selectedChain].getTransactionReceipt({ hash: opts.hash })
+            if (receipt.status === 'success') {
+              refetchBlockData()
+            }
+            return receipt
           }
 
           if (!provider) return undefined
 
-          return await provider.getTransactionReceipt({ hash: opts.hash })
+          const receipt = await provider.getTransactionReceipt({ hash: opts.hash })
+          if (receipt.status === 'success') {
+            refetchBlockData()
+          }
+          return receipt
         } catch (error) {
           if (error instanceof TransactionNotFoundError) {
             throw new RetryableError(`Transaction not found: ${opts.hash}`)
@@ -79,7 +89,7 @@ export function usePublicNodeWaitForTransaction() {
         delay: (chainId ? AVERAGE_CHAIN_BLOCK_TIMES[chainId] : BSC_BLOCK_TIME) * 1000 + 1000,
       }).promise as Promise<TransactionReceipt>
     },
-    [chainId, provider],
+    [chainId, provider, refetchBlockData],
   )
 
   return {

apps/web/src/state/block/hooks.ts

@@ -60,14 +60,14 @@ export const useChainCurrentBlock = (chainId: number) => {
   const { chainId: activeChainId } = useActiveChainId()
   const activeChainBlockNumber = useCurrentBlock()
   const isTargetDifferent = Boolean(chainId && activeChainId !== chainId)
-  const { data: currentBlock } = useWagmiBlockNumber({
+  const { data: targetChainBlockNumber } = useWagmiBlockNumber({
     chainId,
     watch: true,
     query: {
-      enabled: Boolean(isTargetDifferent),
+      enabled: isTargetDifferent,
+      select: (data) => (data !== undefined ? Number(data) : undefined),
     },
   })
-  const targetChainBlockNumber = currentBlock !== undefined ? Number(currentBlock) : undefined
 
   return isTargetDifferent ? targetChainBlockNumber : activeChainBlockNumber
 }

apps/web/src/state/transactions/updater.tsx

@@ -18,6 +18,7 @@ import { retry, RetryableError } from 'state/multicall/retry'
 import { useQuery } from '@tanstack/react-query'
 import { AVERAGE_CHAIN_BLOCK_TIMES } from 'config/constants/averageChainBlockTimes'
 import { BSC_BLOCK_TIME } from 'config'
+import { useFetchBlockData } from '@pancakeswap/wagmi'
 import {
   FarmTransactionStatus,
   MsgStatus,
@@ -43,6 +44,7 @@ export const Updater: React.FC<{ chainId: number }> = ({ chainId }) => {
 
   const dispatch = useAppDispatch()
   const transactions = useAllChainTransactions(chainId)
+  const refetchBlockData = useFetchBlockData(chainId)
 
   const { toastError, toastSuccess } = useToast()
 
@@ -51,6 +53,8 @@ export const Updater: React.FC<{ chainId: number }> = ({ chainId }) => {
   useEffect(() => {
     if (!chainId || !provider) return
 
+    let toRefetchBlockData = false
+
     forEach(
       pickBy(transactions, (transaction) => shouldCheck(fetchedTransactions.current, transaction)),
       (transaction) => {
@@ -75,6 +79,9 @@ export const Updater: React.FC<{ chainId: number }> = ({ chainId }) => {
               }),
             )
             const toast = receipt.status === 'success' ? toastSuccess : toastError
+            if (!toRefetchBlockData && receipt.status === 'success') {
+              toRefetchBlockData = true
+            }
             toast(
               t('Transaction receipt'),
               <ToastDescriptionWithTx txHash={receipt.transactionHash} txChainId={chainId} />,
@@ -102,7 +109,10 @@ export const Updater: React.FC<{ chainId: number }> = ({ chainId }) => {
         })
       },
     )
-  }, [chainId, provider, transactions, dispatch, toastSuccess, toastError, t])
+    if (toRefetchBlockData) {
+      refetchBlockData()
+    }
+  }, [chainId, provider, transactions, dispatch, toastSuccess, toastError, t, refetchBlockData])
 
   const crossChainFarmPendingTxns = useMemo(
     () =>

packages/wagmi/src/hooks/useBlock.ts

@@ -1,6 +1,6 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useBlock, useWatchBlocks, useBlockNumber as useWagmiBlockNumber } from 'wagmi'
-import { useEffect } from 'react'
+import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useBlock, useWatchBlocks, useBlockNumber as useWagmiBlockNumber, usePublicClient } from 'wagmi'
+import { useCallback, useEffect } from 'react'
 
 type Params = {
   chainId?: number
@@ -13,6 +13,20 @@ function createKeyGetter(name: string) {
   }
 }
 
+const updateBlockQueryData = (
+  queryClient: QueryClient,
+  chainId: number | undefined,
+  block: { number: bigint; timestamp: bigint },
+) => {
+  if (chainId) {
+    const blockNumber = Number(block.number)
+    const timestamp = Number(block.timestamp)
+
+    queryClient.setQueryData(getBlockNumberQueryKey(chainId), blockNumber)
+    queryClient.setQueryData(getBlockTimestampQueryKey(chainId), timestamp)
+  }
+}
+
 export const getBlockNumberQueryKey = createKeyGetter('blockNumber')
 export const getBlockTimestampQueryKey = createKeyGetter('blockTimestamp')
 export const getInitialBlockNumberQueryKey = createKeyGetter('initialBlockNumber')
@@ -61,10 +75,7 @@ export function useWatchBlock({ chainId, enabled }: Params) {
     blockTag: 'latest',
     enabled: queryEnabled,
     onBlock: (data) => {
-      const blockNumber = Number(data.number)
-      const timestamp = Number(data.timestamp)
-      queryClient.setQueryData(getBlockNumberQueryKey(chainId), blockNumber)
-      queryClient.setQueryData(getBlockTimestampQueryKey(chainId), timestamp)
+      updateBlockQueryData(queryClient, chainId, data)
     },
   })
 }
@@ -119,3 +130,21 @@ export function useInitialBlockTimestamp({ chainId }: Omit<Params, 'enabled'>) {
     refetchOnMount: false,
   })
 }
+
+export const useFetchBlockData = (chainId: number) => {
+  const queryClient = useQueryClient()
+  const provider = usePublicClient({ chainId })
+
+  const refetchBlockData = useCallback(async () => {
+    try {
+      if (provider) {
+        const block = await provider.getBlock()
+        updateBlockQueryData(queryClient, chainId, block)
+      }
+    } catch (error) {
+      console.error('Error fetching block data:', error)
+    }
+  }, [provider, queryClient, chainId])
+
+  return refetchBlockData
+}