fix: sanitize block explorer URLs

.changeset/angry-mayflies-push.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Sanitize block explorer URLs

packages/thirdweb/src/react/web/ui/ConnectWallet/TransactionsScreen.tsx

@@ -3,6 +3,7 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { formatExplorerAddressUrl } from "../../../../utils/url.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
@@ -125,7 +126,10 @@
         <ButtonLink
           fullWidth
           variant="outline"
-          href={`${chainExplorers.explorers[0]?.url}/address/${activeAccount?.address}`}
+          href={formatExplorerAddressUrl(
+            chainExplorers.explorers[0]?.url ?? "",
+            activeAccount?.address ?? "",
+          )}
           target="_blank"
           as="a"
           gap="xs"

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx

@@ -10,6 +10,7 @@
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
 import {
   type Theme,
   fontSize,
@@ -345,7 +346,10 @@
           onRampExplorers.explorers[0]?.url && onRampTxHash
             ? {
                 label: "View on Explorer",
-                url: `${onRampExplorers.explorers[0]?.url}/tx/${onRampTxHash}`,
+                url: formatExplorerTxUrl(
+                  onRampExplorers.explorers[0]?.url,
+                  onRampTxHash,
+                ),
               }
             : undefined
         }
@@ -382,7 +386,10 @@
           toChainExplorers.explorers[0]?.url && toTokenTxHash
             ? {
                 label: "View on Explorer",
-                url: `${toChainExplorers.explorers[0].url}/tx/${toTokenTxHash}`,
+                url: formatExplorerTxUrl(
+                  toChainExplorers.explorers[0]?.url,
+                  toTokenTxHash,
+                ),
               }
             : undefined
         }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx

@@ -2,6 +2,7 @@
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
 import {
   fontSize,
   iconSize,
@@ -121,9 +122,10 @@
           <ButtonLink
             fullWidth
             variant="outline"
-            href={`${
-              onRampExplorers.explorers[0].url || ""
-            }/tx/${onrampTxHash}`}
+            href={formatExplorerTxUrl(
+              onRampExplorers.explorers[0]?.url,
+              onrampTxHash,
+            )}
             target="_blank"
             gap="xs"
             style={{

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx

@@ -4,6 +4,7 @@
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
 import { shortenAddress } from "../../../../../../../utils/address.js";
+import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
 import {
   fontSize,
   iconSize,
@@ -199,7 +200,10 @@
           <ButtonLink
             fullWidth
             variant="outline"
-            href={`${fromChainExplorers.explorers[0].url}/tx/${sourceTxHash}`}
+            href={formatExplorerTxUrl(
+              fromChainExplorers.explorers[0]?.url,
+              sourceTxHash,
+            )}
             target="_blank"
             gap="xs"
             style={{
@@ -330,7 +334,10 @@
         <ButtonLink
           fullWidth
           variant="outline"
-          href={`${fromChainExplorers.explorers[0].url}/tx/${sourceTxHash}`}
+          href={formatExplorerTxUrl(
+            fromChainExplorers.explorers[0]?.url,
+            sourceTxHash,
+          )}
           target="_blank"
           gap="xs"
           style={{
@@ -352,7 +359,10 @@
             <ButtonLink
               fullWidth
               variant="outline"
-              href={`${toChainExplorers.explorers[0].url}/tx/${destinationTxHash}`}
+              href={formatExplorerTxUrl(
+                toChainExplorers.explorers[0]?.url,
+                destinationTxHash,
+              )}
               target="_blank"
               gap="xs"
               style={{

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx

@@ -7,6 +7,7 @@
 import { getTransactionStore } from "../../../../../transaction/transaction-store.js";
 import { shortenHex } from "../../../../../utils/address.js";
 import type { Hex } from "../../../../../utils/encoding/hex.js";
+import { formatExplorerTxUrl } from "../../../../../utils/url.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../core/design-system/index.js";
 import { useWaitForReceipt } from "../../../../core/hooks/contract/useWaitForReceipt.js";
@@ -192,7 +193,7 @@
   if (props.explorerUrl) {
     return (
       <a
-        href={`${props.explorerUrl}/tx/${props.hash}`}
+        href={formatExplorerTxUrl(props.explorerUrl, props.hash)}
         target="_blank"
         rel="noreferrer"
       >

packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx

@@ -3,6 +3,7 @@
 import type { Hex } from "viem";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { formatExplorerTxUrl } from "../../../../utils/url.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
 import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
@@ -106,7 +107,10 @@
               <ButtonLink
                 fullWidth
                 variant="outline"
-                href={`${chainExplorers.explorers[0]?.url}/tx/${txHash}`}
+                href={formatExplorerTxUrl(
+                  chainExplorers.explorers[0]?.url ?? "",
+                  txHash,
+                )}
                 target="_blank"
                 as="a"
                 gap="xs"

packages/thirdweb/src/utils/url.ts

@@ -63,3 +63,11 @@ export function formatWalletConnectUrl(
     ? formatUniversalUrl(appUrl, wcUri)
     : formatNativeUrl(appUrl, wcUri);
 }
+
+export function formatExplorerTxUrl(explorerUrl: string, txHash: string) {
+  return `${explorerUrl.endsWith("/") ? explorerUrl : `${explorerUrl}/`}tx/${txHash}`;
+}
+
+export function formatExplorerAddressUrl(explorerUrl: string, address: string) {
+  return `${explorerUrl.endsWith("/") ? explorerUrl : `${explorerUrl}/`}address/${address}`;
+}