From 0bc7314b2699e1868c45977d57c4612dbc3e0819 Mon Sep 17 00:00:00 2001 From: pedromcunha Date: Wed, 11 Dec 2024 16:59:18 -0500 Subject: [PATCH 1/2] Improve block explorer tx url generation --- .../TransactionModal/steps/ErrorStep.tsx | 17 +++++----- .../steps/SwapSuccessStep.tsx | 24 ++++++-------- .../TransactionModal/steps/ValidatingStep.tsx | 13 +++----- .../ui/src/utils/getTxBlockExplorerUrl.ts | 31 +++++++++++++++++++ 4 files changed, 55 insertions(+), 30 deletions(-) create mode 100644 packages/ui/src/utils/getTxBlockExplorerUrl.ts diff --git a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx index 06f36c27..157fa331 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx +++ b/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 = ({ ? '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 = ({ 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 = ({ Deposit Tx {depositTx ? ( @@ -196,7 +199,7 @@ export const ErrorStep: FC = ({ {fillTx ? ( diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx index bf4c31b9..a0fb5f82 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx +++ b/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 = ({ {!delayedTxUrl ? ( {allTxHashes.map(({ txHash, chainId }) => { - const blockExplorerBaseUrl = getChainBlockExplorerUrl( + const txUrl = getTxBlockExplorerUrl( chainId, - relayClient?.chains + relayClient?.chains, + txHash ) return ( - + View Tx: {truncateAddress(txHash)} ) @@ -361,16 +358,13 @@ export const SwapSuccessStep: FC = ({ )} {allTxHashes.map(({ txHash, chainId }) => { - const blockExplorerBaseUrl = getChainBlockExplorerUrl( + const txUrl = getTxBlockExplorerUrl( chainId, - relayClient?.chains + relayClient?.chains, + txHash ) return ( - + View Tx: {truncateAddress(txHash)} ) diff --git a/packages/ui/src/components/common/TransactionModal/steps/ValidatingStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ValidatingStep.tsx index 032af0f1..a9e6f56a 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/ValidatingStep.tsx +++ b/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 = ({ ) : ( currentStepItem?.txHashes?.map(({ txHash, chainId }) => { - const blockExplorerBaseUrl = getChainBlockExplorerUrl( + const txUrl = getTxBlockExplorerUrl( chainId, - relayClient?.chains + relayClient?.chains, + txHash ) return ( - + View Tx: {truncateAddress(txHash)} ) diff --git a/packages/ui/src/utils/getTxBlockExplorerUrl.ts b/packages/ui/src/utils/getTxBlockExplorerUrl.ts new file mode 100644 index 00000000..6711bf94 --- /dev/null +++ b/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) => { + 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 +} From dc6b34cc88f671d046cf4556bcef895403fdef39 Mon Sep 17 00:00:00 2001 From: pedromcunha Date: Wed, 11 Dec 2024 17:01:00 -0500 Subject: [PATCH 2/2] feat: changeset --- .changeset/loud-knives-guess.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/loud-knives-guess.md diff --git a/.changeset/loud-knives-guess.md b/.changeset/loud-knives-guess.md new file mode 100644 index 00000000..792c2fda --- /dev/null +++ b/.changeset/loud-knives-guess.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Include additional parameters when generating tx urls