feat: tenderly url improvements

app/react-query.provider.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import { isDev } from '@/lib/config/app.config'
-import { captureError } from '@/lib/shared/utils/errors'
-import { SentryMetadata, captureSentryError, shouldIgnore } from '@/lib/shared/utils/query-errors'
+import { captureError, getTenderlyUrlFromErrorMessage } from '@/lib/shared/utils/errors'
+import {
+  SentryMetadata,
+  captureSentryError,
+  getTenderlyUrl,
+  shouldIgnore,
+} from '@/lib/shared/utils/query-errors'
+import { ScopeContext } from '@sentry/types'
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { ReactNode } from 'react'
@@ -11,14 +17,20 @@ export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     // Global handler for every react-query error
     onError: (error, query) => {
+      const queryMeta = query?.meta
       if (shouldIgnore(error.message, error.stack)) return
-      console.log('Sentry capturing query error: ', {
-        meta: query?.meta,
+      console.log('Sentry capturing query error', {
+        meta: queryMeta,
         error,
         queryKey: query.queryKey,
       })
 
-      if (query?.meta) return captureSentryError(error, query?.meta as SentryMetadata)
+      const sentryContext = query?.meta?.context as ScopeContext
+      if (sentryContext?.extra && !getTenderlyUrl(sentryContext.extra)) {
+        sentryContext.extra.tenderlyUrl = getTenderlyUrlFromErrorMessage(error, queryMeta)
+      }
+
+      if (queryMeta) return captureSentryError(error, queryMeta as SentryMetadata)
 
       // Unexpected error in query (as expected errors should have query.meta)
       captureError(error, { extra: { queryKey: query.queryKey } })

lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityBuildCallDataQuery.ts

@@ -11,6 +11,7 @@ import { AddLiquidityHandler } from '../handlers/AddLiquidity.handler'
 import { AddLiquiditySimulationQueryResult } from './useAddLiquiditySimulationQuery'
 import { useDebounce } from 'use-debounce'
 import { HumanTokenAmountWithAddress } from '@/lib/modules/tokens/token.types'
+import { useBlockNumber } from 'wagmi'
 
 export type AddLiquidityBuildQueryResponse = ReturnType<typeof useAddLiquidityBuildCallDataQuery>
 
@@ -31,7 +32,8 @@ export function useAddLiquidityBuildCallDataQuery({
 }) {
   const { userAddress, isConnected } = useUserAccount()
   const { slippage } = useUserSettings()
-  const { pool } = usePool()
+  const { pool, chainId } = usePool()
+  const { data: blockNumber } = useBlockNumber({ chainId })
   const { relayerApprovalSignature } = useRelayerSignature()
   const debouncedHumanAmountsIn = useDebounce(humanAmountsIn, defaultDebounceMs)[0]
 
@@ -64,7 +66,11 @@ export function useAddLiquidityBuildCallDataQuery({
     queryFn,
     enabled: enabled && isConnected && !!simulationQuery.data,
     gcTime: 0,
-    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity buildCallData query', params),
+    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity buildCallData query', {
+      ...params,
+      chainId,
+      blockNumber,
+    }),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityPriceImpactQuery.ts

@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query'
 import { usePool } from '../../../PoolProvider'
 import { sentryMetaForAddLiquidityHandler } from '@/lib/shared/utils/query-errors'
 import { HumanTokenAmountWithAddress } from '@/lib/modules/tokens/token.types'
+import { useBlockNumber } from 'wagmi'
 
 type Params = {
   handler: AddLiquidityHandler
@@ -19,10 +20,11 @@ type Params = {
 }
 
 export function useAddLiquidityPriceImpactQuery({ handler, humanAmountsIn, enabled }: Params) {
-  const { pool } = usePool()
+  const { pool, chainId } = usePool()
   const { userAddress, isConnected } = useUserAccount()
   const { slippage } = useUserSettings()
   const debouncedHumanAmountsIn = useDebounce(humanAmountsIn, defaultDebounceMs)[0]
+  const { data: blockNumber } = useBlockNumber({ chainId })
 
   const params: AddLiquidityParams = {
     handler,
@@ -42,7 +44,11 @@ export function useAddLiquidityPriceImpactQuery({ handler, humanAmountsIn, enabl
     queryFn,
     enabled: enabled && isConnected && !areEmptyAmounts(debouncedHumanAmountsIn),
     gcTime: 0,
-    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity priceImpact query', params),
+    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity priceImpact query', {
+      ...params,
+      chainId,
+      blockNumber,
+    }),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/pool/actions/add-liquidity/queries/useAddLiquiditySimulationQuery.ts

@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query'
 import { usePool } from '../../../PoolProvider'
 import { sentryMetaForAddLiquidityHandler } from '@/lib/shared/utils/query-errors'
 import { HumanTokenAmountWithAddress } from '@/lib/modules/tokens/token.types'
+import { useBlockNumber } from 'wagmi'
 
 export type AddLiquiditySimulationQueryResult = ReturnType<typeof useAddLiquiditySimulationQuery>
 
@@ -22,7 +23,8 @@ type Params = {
 
 export function useAddLiquiditySimulationQuery({ handler, humanAmountsIn, enabled }: Params) {
   const { userAddress } = useUserAccount()
-  const { pool } = usePool()
+  const { pool, chainId } = usePool()
+  const { data: blockNumber } = useBlockNumber({ chainId })
   const { slippage } = useUserSettings()
   const debouncedHumanAmountsIn = useDebounce(humanAmountsIn, defaultDebounceMs)[0]
 
@@ -44,7 +46,11 @@ export function useAddLiquiditySimulationQuery({ handler, humanAmountsIn, enable
     queryFn,
     enabled: enabled && !areEmptyAmounts(debouncedHumanAmountsIn),
     gcTime: 0,
-    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity simulation query', params),
+    meta: sentryMetaForAddLiquidityHandler('Error in add liquidity simulation query', {
+      ...params,
+      chainId,
+      blockNumber,
+    }),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx

@@ -43,7 +43,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
   const [quoteAmountsOut, setQuoteAmountsOut] = useState<TokenAmount[]>([])
   const [quotePriceImpact, setQuotePriceImpact] = useState<number>()
 
-  const { pool, bptPrice, isLoading } = usePool()
+  const { pool, chainId, bptPrice, isLoading } = usePool()
   const { getToken, usdValueForToken, getNativeAssetToken, getWrappedNativeAssetToken } =
     useTokens()
   const { isConnected } = useUserAccount()
@@ -118,6 +118,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
   const simulationQuery = useRemoveLiquiditySimulationQuery({
     handler,
     poolId: pool.id,
+    chainId,
     humanBptIn,
     tokenOut: wethIsEth && wNativeAsset ? (wNativeAsset.address as Address) : singleTokenOutAddress,
     enabled: !urlTxHash,
@@ -126,6 +127,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
   const priceImpactQuery = useRemoveLiquidityPriceImpactQuery({
     handler,
     poolId: pool.id,
+    chainId,
     humanBptIn,
     tokenOut: wethIsEth && wNativeAsset ? (wNativeAsset.address as Address) : singleTokenOutAddress,
     enabled: !urlTxHash,

lib/modules/pool/actions/remove-liquidity/queries/useRemoveLiquidityBuildCallDataQuery.ts

@@ -40,7 +40,7 @@ export function useRemoveLiquidityBuildCallDataQuery({
 }) {
   const { userAddress, isConnected } = useUserAccount()
   const { slippage } = useUserSettings()
-  const { pool } = usePool()
+  const { pool, chainId } = usePool()
   const { relayerApprovalSignature } = useRelayerSignature()
   const debouncedHumanBptIn = useDebounce(humanBptIn, defaultDebounceMs)[0]
 
@@ -75,10 +75,10 @@ export function useRemoveLiquidityBuildCallDataQuery({
     queryFn,
     enabled: enabled && isConnected && !!simulationQuery.data,
     gcTime: 0,
-    meta: sentryMetaForRemoveLiquidityHandler(
-      'Error in remove liquidity buildCallData query',
-      params
-    ),
+    meta: sentryMetaForRemoveLiquidityHandler('Error in remove liquidity buildCallData query', {
+      ...params,
+      chainId,
+    }),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/pool/actions/remove-liquidity/queries/useRemoveLiquidityPriceImpactQuery.integration.spec.tsx

@@ -19,6 +19,7 @@ async function testQuery(humanBptIn: HumanAmount) {
   )
   const { result } = testHook(() =>
     useRemoveLiquidityPriceImpactQuery({
+      chainId: 1,
       handler,
       poolId: poolMock.id,
       humanBptIn,

lib/modules/pool/actions/remove-liquidity/queries/useRemoveLiquidityPriceImpactQuery.ts

@@ -10,10 +10,12 @@ import { RemoveLiquidityParams, removeLiquidityKeys } from './remove-liquidity-k
 import { HumanAmount } from '@balancer/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { sentryMetaForRemoveLiquidityHandler } from '@/lib/shared/utils/query-errors'
+import { useBlockNumber } from 'wagmi'
 
 type Params = {
   handler: RemoveLiquidityHandler
   poolId: string
+  chainId: number
   humanBptIn: HumanAmount
   tokenOut: Address
   enabled?: boolean
@@ -22,12 +24,14 @@ type Params = {
 export function useRemoveLiquidityPriceImpactQuery({
   handler,
   poolId,
+  chainId,
   humanBptIn,
   tokenOut,
   enabled = true,
 }: Params) {
   const { userAddress, isConnected } = useUserAccount()
   const { slippage } = useUserSettings()
+  const { data: blockNumber } = useBlockNumber({ chainId })
   const debouncedBptIn = useDebounce(humanBptIn, defaultDebounceMs)[0]
 
   const params: RemoveLiquidityParams = {
@@ -52,10 +56,11 @@ export function useRemoveLiquidityPriceImpactQuery({
     queryFn,
     enabled: enabled && isConnected && Number(debouncedBptIn) > 0,
     gcTime: 0,
-    meta: sentryMetaForRemoveLiquidityHandler(
-      'Error in remove liquidity price impact query',
-      params
-    ),
+    meta: sentryMetaForRemoveLiquidityHandler('Error in remove liquidity price impact query', {
+      ...params,
+      chainId,
+      blockNumber,
+    }),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/pool/actions/remove-liquidity/queries/useRemoveLiquiditySimulationQuery.integration.spec.tsx

@@ -19,6 +19,7 @@ async function testQuery(humanBptIn: HumanAmount) {
   const emptyTokenOut = '' as Address // We don't use it but it is required to simplify TS checks
   const { result } = testHook(() =>
     useRemoveLiquiditySimulationQuery({
+      chainId: 1,
       handler,
       poolId,
       humanBptIn,

lib/modules/pool/actions/remove-liquidity/queries/useRemoveLiquiditySimulationQuery.ts

@@ -18,6 +18,7 @@ export type RemoveLiquiditySimulationQueryResult = ReturnType<
 type Params = {
   handler: RemoveLiquidityHandler
   poolId: string
+  chainId: number
   humanBptIn: HumanAmount
   tokenOut: Address
   enabled?: boolean
@@ -26,6 +27,7 @@ type Params = {
 export function useRemoveLiquiditySimulationQuery({
   handler,
   poolId,
+  chainId,
   humanBptIn,
   tokenOut,
   enabled = true,
@@ -55,7 +57,10 @@ export function useRemoveLiquiditySimulationQuery({
     queryFn,
     enabled: enabled && isConnected && Number(debouncedHumanBptIn) > 0,
     gcTime: 0,
-    meta: sentryMetaForRemoveLiquidityHandler('Error in remove liquidity simulation query', params),
+    meta: sentryMetaForRemoveLiquidityHandler('Error in remove liquidity simulation query', {
+      ...params,
+      chainId,
+    }),
     ...onlyExplicitRefetch,
   })
   return result

lib/modules/swap/queries/useBuildSwapQuery.ts

@@ -8,7 +8,9 @@ import { SimulateSwapResponse, SwapState } from '../swap.types'
 import { swapQueryKeys } from './swapQueryKeys'
 import { SwapSimulationQueryResult } from './useSimulateSwapQuery'
 import { useRelayerSignature } from '../../relayer/RelayerSignatureProvider'
-import { SwapBuildCallExtras, sentryMetaForSwapHandler } from '@/lib/shared/utils/query-errors'
+import { SwapMetaParams, sentryMetaForSwapHandler } from '@/lib/shared/utils/query-errors'
+import { getChainId } from '@/lib/config/app.config'
+import { useBlockNumber } from 'wagmi'
 
 export type BuildSwapQueryResponse = ReturnType<typeof useBuildSwapQuery>
 
@@ -34,6 +36,8 @@ export function useBuildSwapQuery({
   const { relayerApprovalSignature } = useRelayerSignature()
 
   const { selectedChain, tokenIn, tokenOut, swapType } = swapState
+  const chainId = getChainId(selectedChain)
+  const { data: blockNumber } = useBlockNumber({ chainId })
 
   const queryKey = swapQueryKeys.build({
     selectedChain,
@@ -67,11 +71,13 @@ export function useBuildSwapQuery({
     enabled: enabled && isConnected && !!simulationQuery.data,
     gcTime: 0,
     meta: sentryMetaForSwapHandler('Error in swap buildCallData query', {
+      chainId,
+      blockNumber,
       handler,
       swapState,
       slippage,
       wethIsEth,
-    } as SwapBuildCallExtras),
+    } as SwapMetaParams),
     ...onlyExplicitRefetch,
   })
 }

lib/modules/swap/queries/useSimulateSwapQuery.ts

@@ -8,6 +8,8 @@ import { swapQueryKeys } from './swapQueryKeys'
 import { SimulateSwapInputs, SimulateSwapResponse } from '../swap.types'
 import { sentryMetaForSwapHandler } from '@/lib/shared/utils/query-errors'
 import { isZero } from '@/lib/shared/utils/numbers'
+import { getChainId } from '@/lib/config/app.config'
+import { useBlockNumber } from 'wagmi'
 
 export type SwapSimulationQueryResult = ReturnType<typeof useSimulateSwapQuery>
 
@@ -32,6 +34,9 @@ export function useSimulateSwapQuery({
     chain,
   }
 
+  const chainId = getChainId(chain)
+  const { data: blockNumber } = useBlockNumber({ chainId })
+
   const queryKey = swapQueryKeys.simulation(inputs)
 
   const queryFn = async () => handler.simulate(inputs)
@@ -42,6 +47,8 @@ export function useSimulateSwapQuery({
     enabled: enabled && !isZero(debouncedSwapAmount),
     gcTime: 0,
     meta: sentryMetaForSwapHandler('Error in swap simulation query', {
+      chainId: getChainId(chain),
+      blockNumber,
       handler,
       swapInputs: inputs,
       enabled,

lib/modules/web3/useTenderly.ts

@@ -5,24 +5,30 @@ import { TransactionConfig } from './contracts/contract.types'
   Used in sentry metadata to be able to simulate tx from Sentry issues in Tenderly
 */
 export function useTenderly({ chainId }: { chainId: number }) {
-  const { data: _blockNumber } = useBlockNumber({ chainId })
-  const { data: _gasPrice } = useGasPrice({ chainId })
+  const { data: blockNumber } = useBlockNumber({ chainId })
+  const { data: gasPrice } = useGasPrice({ chainId })
 
-  function buildTenderlyUrl(txConfig?: TransactionConfig) {
-    if (!txConfig) return
-    const { chainId: buildCallChainId, account, to, data, value } = txConfig
-    if (chainId !== buildCallChainId) {
-      throw new Error(
-        `Chain Id mismatch (${buildCallChainId} VS ${chainId}) when building Tenderly simulation URL`
-      )
-    }
+  const _buildTenderlyUrl = (txConfig?: TransactionConfig) =>
+    buildTenderlyUrl({ txConfig, blockNumber, gasPrice })
 
-    const txValue = value ? value.toString() : '0'
-    const blockNumber = _blockNumber ? _blockNumber.toString() : '0'
-    const gasPrice = _gasPrice ? _gasPrice.toString() : '0'
+  return { blockNumber, gasPrice, buildTenderlyUrl: _buildTenderlyUrl }
+}
+
+export function buildTenderlyUrl({
+  txConfig,
+  blockNumber,
+  gasPrice,
+}: {
+  txConfig?: TransactionConfig
+  blockNumber?: bigint
+  gasPrice?: bigint
+}): string | undefined {
+  if (!txConfig) return
+  const { chainId, account, to, data, value } = txConfig
 
-    return `https://dashboard.tenderly.co/balancer/v2/simulator/new?rawFunctionInput=${data}&block=${blockNumber}&blockIndex=0&from=${account}&gas=8000000&gasPrice=${gasPrice}&value=${txValue}&contractAddress=${to}&network=${chainId}`
-  }
+  const txValue = value ? value.toString() : '0'
+  const blockNumberString = blockNumber ? blockNumber.toString() : '0'
+  const gasPriceString = gasPrice ? gasPrice.toString() : '0'
 
-  return { buildTenderlyUrl }
+  return `https://dashboard.tenderly.co/balancer/v2/simulator/new?rawFunctionInput=${data}&block=${blockNumberString}&blockIndex=0&from=${account}&gas=8000000&gasPrice=${gasPriceString}&value=${txValue}&contractAddress=${to}&network=${chainId}`
 }