fix: sanitize block explorer URLs (#5237)

joaquim-verges · web-flow · commit 802d3bfd4bbf · 2024-10-31T12:36:59.000+13:00
diff --git a/.changeset/angry-mayflies-push.md b/.changeset/angry-mayflies-push.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Sanitize block explorer URLs
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/TransactionsScreen.tsx b/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 @@ export function TransactionsScreen(props: {
         <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"
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx
@@ -10,6 +10,7 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.j
 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 @@ export function FiatSteps(props: {
           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 @@ export function FiatSteps(props: {
           toChainExplorers.explorers[0]?.url && toTokenTxHash
             ? {
                 label: "View on Explorer",
-                url: `${toChainExplorers.explorers[0].url}/tx/${toTokenTxHash}`,
+                url: formatExplorerTxUrl(
+                  toChainExplorers.explorers[0]?.url,
+                  toTokenTxHash,
+                ),
               }
             : undefined
         }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx
@@ -2,6 +2,7 @@ import { ExternalLinkIcon } from "@radix-ui/react-icons";
 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 @@ export function OnRampTxDetailsTable(props: {
           <ButtonLink
             fullWidth
             variant="outline"
-            href={`${
-              onRampExplorers.explorers[0].url || ""
-            }/tx/${onrampTxHash}`}
+            href={formatExplorerTxUrl(
+              onRampExplorers.explorers[0]?.url,
+              onrampTxHash,
+            )}
             target="_blank"
             gap="xs"
             style={{
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx
@@ -4,6 +4,7 @@ import type { ThirdwebClient } from "../../../../../../../client/client.js";
 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 @@ export function SwapTxDetailsTable(
           <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 @@ export function SwapTxDetailsTable(
         <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 @@ export function SwapTxDetailsTable(
             <ButtonLink
               fullWidth
               variant="outline"
-              href={`${toChainExplorers.explorers[0].url}/tx/${destinationTxHash}`}
+              href={formatExplorerTxUrl(
+                toChainExplorers.explorers[0]?.url,
+                destinationTxHash,
+              )}
               target="_blank"
               gap="xs"
               style={{
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx
@@ -7,6 +7,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 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 @@ function TransactionButton(props: {
   if (props.explorerUrl) {
     return (
       <a
-        href={`${props.explorerUrl}/tx/${props.hash}`}
+        href={formatExplorerTxUrl(props.explorerUrl, props.hash)}
         target="_blank"
         rel="noreferrer"
       >
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 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 @@ export function ExecutingTxScreen(props: {
               <ButtonLink
                 fullWidth
                 variant="outline"
-                href={`${chainExplorers.explorers[0]?.url}/tx/${txHash}`}
+                href={formatExplorerTxUrl(
+                  chainExplorers.explorers[0]?.url ?? "",
+                  txHash,
+                )}
                 target="_blank"
                 as="a"
                 gap="xs"
diff --git a/packages/thirdweb/src/utils/url.ts b/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}`;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Sanitize block explorer URLs