Merge pull request #396 from reservoirprotocol/pedro/relay-5758-add-e…

…xplorer-params-on-trade-details-popup

Improve block explorer tx url generation

.changeset/loud-knives-guess.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Include additional parameters when generating tx urls

packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx

@@ -13,7 +13,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation'
 import ErrorWell from '../../ErrorWell.js'
 import { truncateAddress } from '../../../../utils/truncate.js'
-import getChainBlockExplorerUrl from '../../../../utils/getChainBlockExplorerUrl.js'
 import { type Address } from 'viem'
 import { type TxHashes } from '../TransactionModalRenderer.js'
 import { useRelayClient } from '../../../../hooks/index.js'
@@ -24,6 +23,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons/index.js'
 import type { useRequests } from '@reservoir0x/relay-kit-hooks'
 import type { RelayChain } from '@reservoir0x/relay-sdk'
+import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js'
 
 type ErrorStepProps = {
   error?: Error | null
@@ -53,9 +53,10 @@ export const ErrorStep: FC<ErrorStepProps> = ({
     ? 'https://testnets.relay.link'
     : 'https://relay.link'
   const depositTx = allTxHashes ? allTxHashes[0] : undefined
-  const depositExplorer = getChainBlockExplorerUrl(
+  const depositTxUrl = getTxBlockExplorerUrl(
     depositTx?.chainId,
-    relayClient?.chains
+    relayClient?.chains,
+    depositTx?.txHash
   )
   let fillTx =
     allTxHashes && allTxHashes.length > 1
@@ -71,10 +72,12 @@ export const ErrorStep: FC<ErrorStepProps> = ({
       chainId: transaction.data.outTxs[0].chainId as number
     }
   }
-  const fillExplorer = getChainBlockExplorerUrl(
+  const fillTxUrl = getTxBlockExplorerUrl(
     fillTx?.chainId,
-    relayClient?.chains
+    relayClient?.chains,
+    fillTx?.txHash
   )
+
   const mergedError = isRefund && errorMessage ? new Error(errorMessage) : error
   const refundDetails = transaction?.data?.refundCurrencyData
   const refundChain = transaction?.data?.refundCurrencyData?.currency?.chainId
@@ -155,7 +158,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
               <Text style="subtitle1">Deposit Tx</Text>
               {depositTx ? (
                 <Anchor
-                  href={`${depositExplorer}/tx/${depositTx.txHash}`}
+                  href={depositTxUrl}
                   target="_blank"
                   css={{ display: 'flex', alignItems: 'center', gap: '1' }}
                 >
@@ -196,7 +199,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
 
               {fillTx ? (
                 <Anchor
-                  href={`${fillExplorer}/tx/${fillTx.txHash}`}
+                  href={fillTxUrl}
                   target="_blank"
                   css={{ display: 'flex', alignItems: 'center', gap: '1' }}
                 >

packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx

@@ -15,7 +15,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBolt } from '@fortawesome/free-solid-svg-icons/faBolt'
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
 import { truncateAddress } from '../../../../utils/truncate.js'
-import getChainBlockExplorerUrl from '../../../../utils/getChainBlockExplorerUrl.js'
 import { type TxHashes } from '../TransactionModalRenderer.js'
 import { type Token } from '../../../../types/index.js'
 import type { useRequests } from '@reservoir0x/relay-kit-hooks'
@@ -24,6 +23,7 @@ import { faClockFour } from '@fortawesome/free-solid-svg-icons/faClockFour'
 import type { Execute } from '@reservoir0x/relay-sdk'
 import { bitcoin } from '../../../../utils/bitcoin.js'
 import { formatBN } from '../../../../utils/numbers.js'
+import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js'
 
 type SwapSuccessStepProps = {
   fromToken?: Token
@@ -200,16 +200,13 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
       {!delayedTxUrl ? (
         <Flex justify="center">
           {allTxHashes.map(({ txHash, chainId }) => {
-            const blockExplorerBaseUrl = getChainBlockExplorerUrl(
+            const txUrl = getTxBlockExplorerUrl(
               chainId,
-              relayClient?.chains
+              relayClient?.chains,
+              txHash
             )
             return (
-              <Anchor
-                key={txHash}
-                href={`${blockExplorerBaseUrl}/tx/${txHash}`}
-                target="_blank"
-              >
+              <Anchor key={txHash} href={txUrl} target="_blank">
                 View Tx: {truncateAddress(txHash)}
               </Anchor>
             )
@@ -361,16 +358,13 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           )}
         </Flex>
         {allTxHashes.map(({ txHash, chainId }) => {
-          const blockExplorerBaseUrl = getChainBlockExplorerUrl(
+          const txUrl = getTxBlockExplorerUrl(
             chainId,
-            relayClient?.chains
+            relayClient?.chains,
+            txHash
           )
           return (
-            <Anchor
-              key={txHash}
-              href={`${blockExplorerBaseUrl}/tx/${txHash}`}
-              target="_blank"
-            >
+            <Anchor key={txHash} href={txUrl} target="_blank">
               View Tx: {truncateAddress(txHash)}
             </Anchor>
           )

packages/ui/src/components/common/TransactionModal/steps/ValidatingStep.tsx

@@ -3,8 +3,8 @@ import { Anchor, Button, Flex, Text } from '../../../primitives/index.js'
 import { LoadingSpinner } from '../../LoadingSpinner.js'
 import type { ExecuteStep, ExecuteStepItem } from '@reservoir0x/relay-sdk'
 import { useRelayClient } from '../../../../hooks/index.js'
-import getChainBlockExplorerUrl from '../../../../utils/getChainBlockExplorerUrl.js'
 import { truncateAddress } from '../../../../utils/truncate.js'
+import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js'
 
 type ValidatingStepProps = {
   currentStep?: ExecuteStep | null
@@ -66,16 +66,13 @@ export const ValidatingStep: FC<ValidatingStepProps> = ({
           </Text>
         ) : (
           currentStepItem?.txHashes?.map(({ txHash, chainId }) => {
-            const blockExplorerBaseUrl = getChainBlockExplorerUrl(
+            const txUrl = getTxBlockExplorerUrl(
               chainId,
-              relayClient?.chains
+              relayClient?.chains,
+              txHash
             )
             return (
-              <Anchor
-                key={txHash}
-                href={`${blockExplorerBaseUrl}/tx/${txHash}`}
-                target="_blank"
-              >
+              <Anchor key={txHash} href={txUrl} target="_blank">
                 View Tx: {truncateAddress(txHash)}
               </Anchor>
             )

packages/ui/src/utils/getTxBlockExplorerUrl.ts

@@ -0,0 +1,31 @@
+import type { RelayChain } from '@reservoir0x/relay-sdk'
+import getChainBlockExplorerUrl from './getChainBlockExplorerUrl.js'
+
+const appendQueryParams = (url: string, params: Record<string, any>) => {
+  if (params) {
+    const queryParams = new URLSearchParams(params)
+    return `${url}?${queryParams.toString()}`
+  }
+  return url
+}
+
+export const getTxBlockExplorerUrl = (
+  chainId?: number,
+  chains?: RelayChain[],
+  txHash?: string
+) => {
+  const chain = chains?.find((chain) => chain.id === chainId)
+  let blockExplorerUrl = getChainBlockExplorerUrl(chainId, chains)
+
+  if (txHash) {
+    blockExplorerUrl = `${blockExplorerUrl}/tx/${txHash}`
+  }
+
+  blockExplorerUrl = appendQueryParams(
+    blockExplorerUrl,
+    //@ts-ignore: TODO until we update the sdk
+    chain?.explorerQueryParams
+  )
+
+  return blockExplorerUrl
+}