thirdweb 5.64.4-nightly-043ee925981bdc39649d30ad65d2fce922515ab0-20241030000335 → 5.64.4

package/src/extensions/erc721/__generated__/IDropSinglePhase/write/claim.ts

@@ -0,0 +1,219 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { once } from "../../../../../utils/promise/once.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "claim" function.
+ */
+export type ClaimParams = WithOverrides<{
+  receiver: AbiParameterToPrimitiveType<{ type: "address"; name: "receiver" }>;
+  quantity: AbiParameterToPrimitiveType<{ type: "uint256"; name: "quantity" }>;
+  currency: AbiParameterToPrimitiveType<{ type: "address"; name: "currency" }>;
+  pricePerToken: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "pricePerToken";
+  }>;
+  allowlistProof: AbiParameterToPrimitiveType<{
+    type: "tuple";
+    name: "allowlistProof";
+    components: [
+      { type: "bytes32[]"; name: "proof" },
+      { type: "uint256"; name: "quantityLimitPerWallet" },
+      { type: "uint256"; name: "pricePerToken" },
+      { type: "address"; name: "currency" },
+    ];
+  }>;
+  data: AbiParameterToPrimitiveType<{ type: "bytes"; name: "data" }>;
+}>;
+
+export const FN_SELECTOR = "0x84bb1e42" as const;
+const FN_INPUTS = [
+  {
+    type: "address",
+    name: "receiver",
+  },
+  {
+    type: "uint256",
+    name: "quantity",
+  },
+  {
+    type: "address",
+    name: "currency",
+  },
+  {
+    type: "uint256",
+    name: "pricePerToken",
+  },
+  {
+    type: "tuple",
+    name: "allowlistProof",
+    components: [
+      {
+        type: "bytes32[]",
+        name: "proof",
+      },
+      {
+        type: "uint256",
+        name: "quantityLimitPerWallet",
+      },
+      {
+        type: "uint256",
+        name: "pricePerToken",
+      },
+      {
+        type: "address",
+        name: "currency",
+      },
+    ],
+  },
+  {
+    type: "bytes",
+    name: "data",
+  },
+] as const;
+const FN_OUTPUTS = [] as const;
+
+/**
+ * Checks if the `claim` method is supported by the given contract.
+ * @param availableSelectors An array of 4byte function selectors of the contract. You can get this in various ways, such as using "whatsabi" or if you have the ABI of the contract available you can use it to generate the selectors.
+ * @returns A boolean indicating if the `claim` method is supported.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { isClaimSupported } from "thirdweb/extensions/erc721";
+ *
+ * const supported = isClaimSupported(["0x..."]);
+ * ```
+ */
+export function isClaimSupported(availableSelectors: string[]) {
+  return detectMethod({
+    availableSelectors,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "claim" function.
+ * @param options - The options for the claim function.
+ * @returns The encoded ABI parameters.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeClaimParams } from "thirdweb/extensions/erc721";
+ * const result = encodeClaimParams({
+ *  receiver: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ *  data: ...,
+ * });
+ * ```
+ */
+export function encodeClaimParams(options: ClaimParams) {
+  return encodeAbiParameters(FN_INPUTS, [
+    options.receiver,
+    options.quantity,
+    options.currency,
+    options.pricePerToken,
+    options.allowlistProof,
+    options.data,
+  ]);
+}
+
+/**
+ * Encodes the "claim" function into a Hex string with its parameters.
+ * @param options - The options for the claim function.
+ * @returns The encoded hexadecimal string.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeClaim } from "thirdweb/extensions/erc721";
+ * const result = encodeClaim({
+ *  receiver: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ *  data: ...,
+ * });
+ * ```
+ */
+export function encodeClaim(options: ClaimParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeClaimParams(options).slice(2)) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "claim" function on the contract.
+ * @param options - The options for the "claim" function.
+ * @returns A prepared transaction object.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { sendTransaction } from "thirdweb";
+ * import { claim } from "thirdweb/extensions/erc721";
+ *
+ * const transaction = claim({
+ *  contract,
+ *  receiver: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ *  data: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function claim(
+  options: BaseTransactionOptions<
+    | ClaimParams
+    | {
+        asyncParams: () => Promise<ClaimParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [
+        resolvedOptions.receiver,
+        resolvedOptions.quantity,
+        resolvedOptions.currency,
+        resolvedOptions.pricePerToken,
+        resolvedOptions.allowlistProof,
+        resolvedOptions.data,
+      ] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+    erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+  });
+}

package/src/extensions/erc721/__generated__/IDropSinglePhase/write/setClaimConditions.ts

@@ -0,0 +1,203 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { once } from "../../../../../utils/promise/once.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "setClaimConditions" function.
+ */
+export type SetClaimConditionsParams = WithOverrides<{
+  phase: AbiParameterToPrimitiveType<{
+    type: "tuple";
+    name: "phase";
+    components: [
+      { type: "uint256"; name: "startTimestamp" },
+      { type: "uint256"; name: "maxClaimableSupply" },
+      { type: "uint256"; name: "supplyClaimed" },
+      { type: "uint256"; name: "quantityLimitPerWallet" },
+      { type: "bytes32"; name: "merkleRoot" },
+      { type: "uint256"; name: "pricePerToken" },
+      { type: "address"; name: "currency" },
+      { type: "string"; name: "metadata" },
+    ];
+  }>;
+  resetClaimEligibility: AbiParameterToPrimitiveType<{
+    type: "bool";
+    name: "resetClaimEligibility";
+  }>;
+}>;
+
+export const FN_SELECTOR = "0x426cfaf3" as const;
+const FN_INPUTS = [
+  {
+    type: "tuple",
+    name: "phase",
+    components: [
+      {
+        type: "uint256",
+        name: "startTimestamp",
+      },
+      {
+        type: "uint256",
+        name: "maxClaimableSupply",
+      },
+      {
+        type: "uint256",
+        name: "supplyClaimed",
+      },
+      {
+        type: "uint256",
+        name: "quantityLimitPerWallet",
+      },
+      {
+        type: "bytes32",
+        name: "merkleRoot",
+      },
+      {
+        type: "uint256",
+        name: "pricePerToken",
+      },
+      {
+        type: "address",
+        name: "currency",
+      },
+      {
+        type: "string",
+        name: "metadata",
+      },
+    ],
+  },
+  {
+    type: "bool",
+    name: "resetClaimEligibility",
+  },
+] as const;
+const FN_OUTPUTS = [] as const;
+
+/**
+ * Checks if the `setClaimConditions` method is supported by the given contract.
+ * @param availableSelectors An array of 4byte function selectors of the contract. You can get this in various ways, such as using "whatsabi" or if you have the ABI of the contract available you can use it to generate the selectors.
+ * @returns A boolean indicating if the `setClaimConditions` method is supported.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { isSetClaimConditionsSupported } from "thirdweb/extensions/erc721";
+ *
+ * const supported = isSetClaimConditionsSupported(["0x..."]);
+ * ```
+ */
+export function isSetClaimConditionsSupported(availableSelectors: string[]) {
+  return detectMethod({
+    availableSelectors,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "setClaimConditions" function.
+ * @param options - The options for the setClaimConditions function.
+ * @returns The encoded ABI parameters.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeSetClaimConditionsParams } from "thirdweb/extensions/erc721";
+ * const result = encodeSetClaimConditionsParams({
+ *  phase: ...,
+ *  resetClaimEligibility: ...,
+ * });
+ * ```
+ */
+export function encodeSetClaimConditionsParams(
+  options: SetClaimConditionsParams,
+) {
+  return encodeAbiParameters(FN_INPUTS, [
+    options.phase,
+    options.resetClaimEligibility,
+  ]);
+}
+
+/**
+ * Encodes the "setClaimConditions" function into a Hex string with its parameters.
+ * @param options - The options for the setClaimConditions function.
+ * @returns The encoded hexadecimal string.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeSetClaimConditions } from "thirdweb/extensions/erc721";
+ * const result = encodeSetClaimConditions({
+ *  phase: ...,
+ *  resetClaimEligibility: ...,
+ * });
+ * ```
+ */
+export function encodeSetClaimConditions(options: SetClaimConditionsParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeSetClaimConditionsParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "setClaimConditions" function on the contract.
+ * @param options - The options for the "setClaimConditions" function.
+ * @returns A prepared transaction object.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { sendTransaction } from "thirdweb";
+ * import { setClaimConditions } from "thirdweb/extensions/erc721";
+ *
+ * const transaction = setClaimConditions({
+ *  contract,
+ *  phase: ...,
+ *  resetClaimEligibility: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function setClaimConditions(
+  options: BaseTransactionOptions<
+    | SetClaimConditionsParams
+    | {
+        asyncParams: () => Promise<SetClaimConditionsParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [
+        resolvedOptions.phase,
+        resolvedOptions.resetClaimEligibility,
+      ] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+    erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+  });
+}

package/src/extensions/erc721/customDrop721.test.ts

@@ -0,0 +1,115 @@
+import { fetchDeployMetadata } from "../../utils/any-evm/deploy-metadata.js";
+
+import { beforeAll, describe, expect, it } from "vitest";
+import { ANVIL_CHAIN } from "../../../test/src/chains.js";
+import { TEST_CLIENT } from "../../../test/src/test-clients.js";
+import { TEST_ACCOUNT_C } from "../../../test/src/test-wallets.js";
+import { type ThirdwebContract, getContract } from "../../contract/contract.js";
+import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { deployContractfromDeployMetadata } from "../prebuilts/deploy-published.js";
+import { balanceOf } from "./__generated__/IERC721A/read/balanceOf.js";
+import { nextTokenIdToMint } from "./__generated__/IERC721Enumerable/read/nextTokenIdToMint.js";
+import { claimTo } from "./drops/write/claimTo.js";
+import { setClaimConditions } from "./drops/write/setClaimConditions.js";
+import { getNFT } from "./read/getNFT.js";
+import { lazyMint } from "./write/lazyMint.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)(
+  "CustomDropERC721",
+  {
+    retry: 0,
+  },
+  () => {
+    let contract: ThirdwebContract;
+
+    beforeAll(async () => {
+      const customDropDeployMetadata = await fetchDeployMetadata({
+        client: TEST_CLIENT,
+        uri: "ipfs://QmY6CHFuhDpQzuv3y3NyQBPdAa7cYjZGJgFeFcw9BfSMQx",
+      });
+      const contractAddress = await deployContractfromDeployMetadata({
+        chain: ANVIL_CHAIN,
+        client: TEST_CLIENT,
+        account: TEST_ACCOUNT_C,
+        deployMetadata: customDropDeployMetadata,
+        initializeParams: {
+          defaultAdmin: TEST_ACCOUNT_C.address,
+          name: "TestCustomDropERC721",
+          symbol: "TT",
+        },
+      });
+
+      contract = getContract({
+        address: contractAddress,
+        chain: ANVIL_CHAIN,
+        client: TEST_CLIENT,
+      });
+      // this deploys a contract, it may take some time
+    }, 60_000);
+
+    it("should allow for lazy minting tokens", async () => {
+      const mintTx = lazyMint({
+        contract,
+        nfts: [
+          { name: "Test NFT" },
+          { name: "Test NFT 2" },
+          { name: "Test NFT 3" },
+          { name: "Test NFT 4" },
+          { name: "Test NFT 5" },
+          { name: "Test NFT 6" },
+        ],
+      });
+      await sendAndConfirmTransaction({
+        transaction: mintTx,
+        account: TEST_ACCOUNT_C,
+      });
+
+      await expect(nextTokenIdToMint({ contract })).resolves.toBe(6n);
+      await expect(
+        getNFT({ contract, tokenId: 0n }),
+      ).resolves.toMatchInlineSnapshot(`
+          {
+            "id": 0n,
+            "metadata": {
+              "name": "Test NFT",
+            },
+            "owner": null,
+            "tokenURI": "ipfs://QmTo68Dm1ntSp2BHLmE9gesS6ELuXosRz5mAgFCK6tfsRk/0",
+            "type": "ERC721",
+          }
+        `);
+    });
+
+    it("should allow to claim tokens", async () => {
+      await expect(
+        balanceOf({ contract, owner: TEST_ACCOUNT_C.address }),
+      ).resolves.toBe(0n);
+      await sendAndConfirmTransaction({
+        transaction: setClaimConditions({
+          contract,
+          phases: [
+            {
+              startTime: new Date(0),
+              maxClaimableSupply: 10n,
+            },
+          ],
+          singlePhaseDrop: true,
+        }),
+        account: TEST_ACCOUNT_C,
+      });
+      const claimTx = claimTo({
+        contract,
+        to: TEST_ACCOUNT_C.address,
+        quantity: 1n,
+        singlePhaseDrop: true,
+      });
+      await sendAndConfirmTransaction({
+        transaction: claimTx,
+        account: TEST_ACCOUNT_C,
+      });
+      await expect(
+        balanceOf({ contract, owner: TEST_ACCOUNT_C.address }),
+      ).resolves.toBe(1n);
+    });
+  },
+);

package/src/extensions/erc721/drops/write/claimTo.ts

@@ -6,6 +6,7 @@ import {
   claim,
   isClaimSupported,
 } from "../../__generated__/IDrop/write/claim.js";
+import { isClaimConditionSupported } from "../../__generated__/IDropSinglePhase/read/claimCondition.js";
 import { isGetActiveClaimConditionSupported } from "../read/getActiveClaimCondition.js";
 
 /**
@@ -16,6 +17,7 @@ export type ClaimToParams = {
   to: Address;
   quantity: bigint;
   from?: Address;
+  singlePhaseDrop?: boolean;
 };
 
 /**
@@ -61,6 +63,7 @@ export function claimTo(options: BaseTransactionOptions<ClaimToParams>) {
         to: options.to,
         quantity: options.quantity,
         from: options.from,
+        singlePhaseDrop: options.singlePhaseDrop,
       }),
   });
 }
@@ -80,9 +83,10 @@ export function claimTo(options: BaseTransactionOptions<ClaimToParams>) {
 export function isClaimToSupported(availableSelectors: string[]) {
   return (
     isClaimSupported(availableSelectors) &&
-    // required to check if the contract supports the getActiveClaimCondition method
-    isGetActiveClaimConditionSupported(availableSelectors) &&
     // requires contractMetadata for claimer proofs
-    isGetContractMetadataSupported(availableSelectors)
+    isGetContractMetadataSupported(availableSelectors) &&
+    // required to check if the contract supports the getActiveClaimCondition method
+    (isGetActiveClaimConditionSupported(availableSelectors) ||
+      isClaimConditionSupported(availableSelectors))
   );
 }

package/src/extensions/erc721/drops/write/setClaimConditions.ts

@@ -8,6 +8,7 @@ import {
 } from "../../../common/__generated__/IMulticall/write/multicall.js";
 import { isGetContractMetadataSupported } from "../../../common/read/getContractMetadata.js";
 import { isSetClaimConditionsSupported as isSetClaimConditionsSupportedGenerated } from "../../__generated__/IDrop/write/setClaimConditions.js";
+import { isSetClaimConditionsSupported as isSetClaimConditionsSupportedGeneratedSinglePhase } from "../../__generated__/IDropSinglePhase/write/setClaimConditions.js";
 
 /**
  * @extension ERC721
@@ -15,6 +16,7 @@ import { isSetClaimConditionsSupported as isSetClaimConditionsSupportedGenerated
 export type SetClaimConditionsParams = {
   phases: ClaimConditionsInput[];
   resetClaimEligibility?: boolean;
+  singlePhaseDrop?: boolean;
 };
 
 /**
@@ -55,6 +57,7 @@ export function setClaimConditions(
           phases: options.phases,
           resetClaimEligibility: options.resetClaimEligibility,
           tokenDecimals: 0,
+          singlePhase: options.singlePhaseDrop,
         }),
       };
     },
@@ -80,6 +83,7 @@ export function isSetClaimConditionsSupported(availableSelectors: string[]) {
     isGetContractMetadataSupported(availableSelectors) &&
     isSetContractURISupported(availableSelectors) &&
     // needs to actually be able to set the claim Conditions
-    isSetClaimConditionsSupportedGenerated(availableSelectors)
+    (isSetClaimConditionsSupportedGenerated(availableSelectors) ||
+      isSetClaimConditionsSupportedGeneratedSinglePhase(availableSelectors))
   );
 }

package/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"

package/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
         }

package/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={{