thirdweb 5.105.38 → 5.105.40-nightly-c331d189bbe6e1d3e0a9b9916d772686bb716ad3-20250830000346

package/src/bridge/Token.ts

@@ -2,7 +2,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { ApiError } from "./types/Errors.js";
-import type { Token } from "./types/Token.js";
+import type { Token, TokenWithPrices } from "./types/Token.js";
 
 /**
  * Retrieves supported Universal Bridge tokens based on the provided filters.
@@ -128,9 +128,20 @@ import type { Token } from "./types/Token.js";
  * @bridge
  * @beta
  */
-export async function tokens(options: tokens.Options): Promise<tokens.Result> {
-  const { client, chainId, tokenAddress, symbol, name, limit, offset } =
-    options;
+export async function tokens<
+  IncludePrices extends boolean = true,
+  R extends Token | TokenWithPrices = TokenWithPrices,
+>(options: tokens.Options<IncludePrices>): Promise<R[]> {
+  const {
+    client,
+    chainId,
+    tokenAddress,
+    symbol,
+    name,
+    limit,
+    offset,
+    includePrices,
+  } = options;
 
   const clientFetch = getClientFetch(client);
   const url = new URL(`${getThirdwebBaseUrl("bridge")}/v1/tokens`);
@@ -153,6 +164,9 @@ export async function tokens(options: tokens.Options): Promise<tokens.Result> {
   if (offset !== null && offset !== undefined) {
     url.searchParams.set("offset", offset.toString());
   }
+  if (includePrices !== undefined) {
+    url.searchParams.set("includePrices", includePrices.toString());
+  }
 
   const response = await clientFetch(url.toString());
   if (!response.ok) {
@@ -165,7 +179,7 @@ export async function tokens(options: tokens.Options): Promise<tokens.Result> {
     });
   }
 
-  const { data }: { data: Token[] } = await response.json();
+  const { data }: { data: R[] } = await response.json();
   return data;
 }
 
@@ -173,7 +187,7 @@ export declare namespace tokens {
   /**
    * Input parameters for {@link tokens}.
    */
-  type Options = {
+  type Options<IncludePrices extends boolean> = {
     /** Your {@link ThirdwebClient} instance. */
     client: ThirdwebClient;
     /** Filter by a specific chain ID. */
@@ -188,12 +202,14 @@ export declare namespace tokens {
     limit?: number;
     /** Number of tokens to skip (min: 0, default: 0). */
     offset?: number | null;
+    /** Whether or not to include prices for the tokens. Setting this to false will speed up the request. */
+    includePrices?: IncludePrices;
   };
 
   /**
    * The result returned from {@link Bridge.tokens}.
    */
-  type Result = Token[];
+  type Result<T extends Token | TokenWithPrices> = T[];
 }
 
 /**
@@ -254,7 +270,7 @@ export async function add(options: add.Options): Promise<add.Result> {
     });
   }
 
-  const { data }: { data: Token } = await response.json();
+  const { data }: { data: TokenWithPrices } = await response.json();
   return data;
 }
 
@@ -274,5 +290,5 @@ export declare namespace add {
   /**
    * The result returned from {@link Bridge.add}.
    */
-  type Result = Token;
+  type Result = TokenWithPrices;
 }

package/src/bridge/index.ts

@@ -17,7 +17,7 @@ export type {
   RouteTransaction,
 } from "./types/Route.js";
 export type { Status } from "./types/Status.js";
-export type { Token } from "./types/Token.js";
+export type { Token, TokenWithPrices } from "./types/Token.js";
 export type { WebhookPayload } from "./Webhook.js";
 export * as Webhook from "./Webhook.js";
 export { parse } from "./Webhook.js";

package/src/bridge/types/Route.ts

@@ -2,24 +2,24 @@ import type { Hex as ox__Hex } from "ox";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import type { Action } from "./BridgeAction.js";
-import type { Token } from "./Token.js";
+import type { TokenWithPrices } from "./Token.js";
 
 export type Route = {
-  originToken: Token;
-  destinationToken: Token;
+  originToken: TokenWithPrices;
+  destinationToken: TokenWithPrices;
 };
 
 export type RouteQuoteStep = {
-  originToken: Token;
-  destinationToken: Token;
+  originToken: TokenWithPrices;
+  destinationToken: TokenWithPrices;
   originAmount: bigint;
   destinationAmount: bigint;
   estimatedExecutionTimeMs: number;
 };
 
 export type RouteStep = {
-  originToken: Token;
-  destinationToken: Token;
+  originToken: TokenWithPrices;
+  destinationToken: TokenWithPrices;
   originAmount: bigint;
   destinationAmount: bigint;
   estimatedExecutionTimeMs: number;

package/src/bridge/types/Token.ts

@@ -7,5 +7,8 @@ export type Token = {
   symbol: string;
   name: string;
   iconUri?: string;
+};
+
+export type TokenWithPrices = Token & {
   prices: Record<string, number>;
 };

package/src/exports/react.native.ts

@@ -59,7 +59,7 @@ export {
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 export { useEstimateGas } from "../react/core/hooks/transaction/useEstimateGas.js";
 export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateGasCost.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
+export { useSendAndConfirmTransactionCore as useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendBatchTransaction } from "../react/core/hooks/transaction/useSendBatchTransaction.js";
 // transaction
 export type {

package/src/exports/react.ts

@@ -66,7 +66,6 @@ export {
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 export { useEstimateGas } from "../react/core/hooks/transaction/useEstimateGas.js";
 export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateGasCost.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendBatchTransaction } from "../react/core/hooks/transaction/useSendBatchTransaction.js";
 // transaction
 export type {
@@ -101,7 +100,6 @@ export { useConnectionManager } from "../react/core/providers/connection-manager
 // Social
 export { useSocialProfiles } from "../react/core/social/useSocialProfiles.js";
 export type { AccountBalanceInfo } from "../react/core/utils/account.js";
-
 // utils
 export { createContractQuery } from "../react/core/utils/createQuery.js";
 // tokens
@@ -126,6 +124,7 @@ export {
   WalletProvider,
   type WalletProviderProps,
 } from "../react/core/wallet/provider.js";
+export { useSendAndConfirmTransaction } from "../react/web/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendTransaction } from "../react/web/hooks/transaction/useSendTransaction.js";
 export { useAutoConnect } from "../react/web/hooks/wallets/useAutoConnect.js";
 export { useLinkProfile } from "../react/web/hooks/wallets/useLinkProfile.js";

package/src/exports/tokens.ts

@@ -6,7 +6,10 @@ export {
   DEFAULT_DEVELOPER_ADDRESS,
   DEFAULT_DEVELOPER_REWARD_BPS,
 } from "../tokens/constants.js";
-export { createToken, prepareCreateToken } from "../tokens/create-token.js";
+export {
+  getTokenAddressFromReceipt,
+  prepareCreateToken,
+} from "../tokens/create-token.js";
 export { distributeToken } from "../tokens/distribute-token.js";
 export {
   getDeployedContractFactory,

package/src/pay/convert/get-token.ts

@@ -1,5 +1,5 @@
 import { add, tokens } from "../../bridge/Token.js";
-import type { Token } from "../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { withCache } from "../../utils/promise/withCache.js";
 
@@ -7,7 +7,7 @@ export async function getToken(
   client: ThirdwebClient,
   tokenAddress: string,
   chainId: number,
-): Promise<Token> {
+): Promise<TokenWithPrices> {
   return withCache(
     async () => {
       const result = await tokens({

package/src/react/core/hooks/transaction/useSendAndConfirmTransaction.ts

@@ -54,7 +54,7 @@ type SendAndConfirmTransactionConfig = {
  * ```
  * @transaction
  */
-export function useSendAndConfirmTransaction(
+export function useSendAndConfirmTransactionCore(
   config: SendAndConfirmTransactionConfig = {},
 ): UseMutationResult<
   TransactionReceipt,

package/src/react/core/hooks/usePaymentMethods.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { Quote } from "../../../bridge/index.js";
 import { ApiError } from "../../../bridge/types/Errors.js";
-import type { Token } from "../../../bridge/types/Token.js";
+import type { Token, TokenWithPrices } from "../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../utils/domains.js";
 import { getClientFetch } from "../../../utils/fetch.js";
@@ -82,7 +82,7 @@ export function usePaymentMethods(options: {
 
       const {
         data: allValidOriginTokens,
-      }: { data: { quote: Quote; balance: string; token: Token }[] } =
+      }: { data: { quote: Quote; balance: string; token: TokenWithPrices }[] } =
         await response.json();
 
       // Sort by enough balance to pay THEN gross balance

package/src/react/core/hooks/useTransactionDetails.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AbiFunction } from "abitype";
 import { toFunctionSelector } from "viem";
-import type { Token } from "../../../bridge/index.js";
+import type { TokenWithPrices } from "../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
 import type { CompilerMetadata } from "../../../contract/actions/compiler-metadata.js";
@@ -34,7 +34,7 @@ interface TransactionDetails {
   usdValueDisplay: string | null;
   txCostDisplay: string;
   gasCostDisplay: string | null;
-  tokenInfo: Token | null;
+  tokenInfo: TokenWithPrices | null;
   costWei: bigint;
   gasCostWei: bigint | null;
   totalCost: string;

package/src/react/core/machines/paymentMachine.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import type { Quote } from "../../../bridge/index.js";
-import type { Token } from "../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../bridge/types/Token.js";
 import type { Address } from "../../../utils/address.js";
 import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
@@ -23,7 +23,7 @@ export type PaymentMethod =
   | {
       type: "wallet";
       payerWallet: Wallet;
-      originToken: Token;
+      originToken: TokenWithPrices;
       balance: bigint;
       quote: Quote;
     }
@@ -43,7 +43,7 @@ export interface PaymentMachineContext {
 
   // Target requirements (resolved in init state)
   destinationAmount?: string;
-  destinationToken?: Token;
+  destinationToken?: TokenWithPrices;
   receiverAddress?: Address;
 
   // User selections (set in methodSelection state)
@@ -73,7 +73,7 @@ export interface PaymentMachineContext {
 type PaymentMachineEvent =
   | {
       type: "DESTINATION_CONFIRMED";
-      destinationToken: Token;
+      destinationToken: TokenWithPrices;
       destinationAmount: string;
       receiverAddress: Address;
     }

package/src/react/web/hooks/transaction/useSendAndConfirmTransaction.tsx

@@ -0,0 +1,104 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
+import type { SendTransactionOptions } from "../../../../transaction/actions/send-transaction.js";
+import { waitForReceipt } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { TransactionReceipt } from "../../../../transaction/types.js";
+import type { SendTransactionPayModalConfig } from "../../../core/hooks/transaction/useSendTransaction.js";
+import { useSendTransaction } from "./useSendTransaction.js";
+
+/**
+ * Configuration for the `useSendAndConfirmTransaction` hook.
+ */
+type SendAndConfirmTransactionConfig = {
+  /**
+   * Refer to [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) for more details.
+   */
+  payModal?: SendTransactionPayModalConfig;
+
+  /**
+   * Configuration for gasless transactions.
+   * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details.
+   */
+  gasless?: GaslessOptions;
+};
+
+/**
+ * A hook to send a transaction and confirm the transaction with users's connected wallet
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const { mutate: sendAndConfirmTx, data: transactionReceipt } = useSendAndConfirmTransaction();
+ *
+ * // later
+ * sendAndConfirmTx(tx);
+ * ```
+ *
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
+ *
+ * ### Gasless usage with OpenZeppelin
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "openzeppelin",
+ *     relayerUrl: "https://...",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
+ *
+ * ### Configuring the Pay Modal
+ *
+ * When the wallet does not have enough funds to send the transaction, a modal is shown to the user to buy the required funds and then continue with the transaction.
+ *
+ * You can configure the pay modal by passing a [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) object to the `payModal` config.
+ *
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ *
+ * const sendAndConfirmTx = useSendAndConfirmTransaction({
+ *   payModal: {
+ *     theme: "light",
+ *   },
+ * });
+ * ```
+ *
+ * By default, the pay modal is enabled. You can disable it by passing `payModal: false` to the config.
+ *
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ *
+ * const sendAndConfirmTx = useSendAndConfirmTransaction({
+ *   payModal: false,
+ * });
+ * ```
+ * @transaction
+ */
+export function useSendAndConfirmTransaction(
+  config: SendAndConfirmTransactionConfig = {},
+): UseMutationResult<
+  TransactionReceipt,
+  Error,
+  SendTransactionOptions["transaction"]
+> {
+  const sendTx = useSendTransaction(config);
+  return useMutation({
+    mutationFn: async (transaction) => {
+      const receipt = await sendTx.mutateAsync(transaction);
+      const confirmedReceipt = await waitForReceipt(receipt);
+      return confirmedReceipt;
+    },
+  });
+}

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -93,6 +93,32 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  * };
  * ```
  *
+ * ### Configuring the Pay Modal
+ *
+ * When the wallet does not have enough funds to send the transaction, a modal is shown to the user to buy the required funds and then continue with the transaction.
+ *
+ * You can configure the pay modal by passing a [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) object to the `payModal` config.
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ *
+ * const sendTx = useSendTransaction({
+ *   payModal: {
+ *     theme: "light",
+ *   },
+ * });
+ * ```
+ *
+ * By default, the pay modal is enabled. You can disable it by passing `payModal: false` to the config.
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ *
+ * const sendTx = useSendTransaction({
+ *   payModal: false,
+ * });
+ * ```
+ *
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {

package/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useMemo } from "react";
-import type { Token } from "../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { PurchaseData } from "../../../../pay/types.js";
@@ -46,7 +46,7 @@ export type UIOptions = Prettify<
   } & (
     | {
         mode: "fund_wallet";
-        destinationToken: Token;
+        destinationToken: TokenWithPrices;
         initialAmount?: string;
         presetOptions?: [number, number, number];
       }
@@ -54,7 +54,7 @@ export type UIOptions = Prettify<
         mode: "direct_payment";
         paymentInfo: {
           sellerAddress: Address;
-          token: Token;
+          token: TokenWithPrices;
           amount: string;
           feePayer?: "sender" | "receiver";
         };
@@ -235,7 +235,7 @@ export function BridgeOrchestrator({
 
   // Handle requirements resolved from FundWallet and DirectPayment
   const handleRequirementsResolved = useCallback(
-    (amount: string, token: Token, receiverAddress: Address) => {
+    (amount: string, token: TokenWithPrices, receiverAddress: Address) => {
       send({
         destinationAmount: amount,
         destinationToken: token,

package/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { Token } from "../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Address } from "../../../../utils/address.js";
@@ -28,7 +28,11 @@ export interface DirectPaymentProps {
   /**
    * Called when user continues with the payment
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Whether to show thirdweb branding in the widget.

package/src/react/web/ui/Bridge/FundWallet.tsx

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
 import { useRef, useState } from "react";
-import type { Token } from "../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { type Address, getAddress } from "../../../../utils/address.js";
 import { numberToPlainString } from "../../../../utils/formatNumber.js";
@@ -46,7 +46,11 @@ export interface FundWalletProps {
   /**
    * Called when continue is clicked with the resolved requirements
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Quick buy amounts

package/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
-import type { Token } from "../../../../bridge/index.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import {
@@ -46,7 +46,11 @@ export interface TransactionPaymentProps {
   /**
    * Called when user confirms transaction execution
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Request to execute the transaction immediately (skips funding flow)

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx

@@ -8,8 +8,8 @@ import { getListing } from "../../../../../../extensions/marketplace/direct-list
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
 import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 
 export type BuyDirectListingButtonProps = Omit<
@@ -104,7 +104,15 @@ export function BuyDirectListingButton(props: BuyDirectListingButtonProps) {
     },
   });
 
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
 
   const prepareBuyTransaction = useCallback(async () => {
     if (!account) {

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -10,8 +10,8 @@ import type { PreparedTransaction } from "../../../../../../transaction/prepare-
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 import type {
   ClaimButtonProps,
@@ -126,7 +126,15 @@ export function ClaimButton(props: ClaimButtonProps) {
     tokenId: claimParams.type === "ERC1155" ? claimParams.tokenId : undefined,
   });
   const account = useActiveAccount();
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
   return (
     <TransactionButton
       payModal={{

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx

@@ -13,8 +13,8 @@ import {
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
 import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 
 export type CreateDirectListingButtonProps = Omit<
@@ -88,7 +88,15 @@ export function CreateDirectListingButton(
     },
     tokenId,
   });
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
 
   const prepareTransaction = useCallback(async () => {
     if (!account) {

package/src/stories/Bridge/fixtures.ts

@@ -1,5 +1,5 @@
 import { stringify } from "viem";
-import type { Token } from "../../bridge/index.js";
+import type { TokenWithPrices } from "../../bridge/types/Token.js";
 import { base } from "../../chains/chain-definitions/base.js";
 import { baseSepolia } from "../../chains/chain-definitions/base-sepolia.js";
 import { polygon } from "../../chains/chain-definitions/polygon.js";
@@ -19,7 +19,7 @@ import { toWei } from "../../utils/units.js";
 import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
 import { storyClient } from "../utils.js";
 
-export const ETH: Token = {
+export const ETH: TokenWithPrices = {
   address: NATIVE_TOKEN_ADDRESS,
   chainId: 10,
   decimals: 18,
@@ -32,7 +32,7 @@ export const ETH: Token = {
   symbol: "ETH",
 };
 
-export const USDC: Token = {
+export const USDC: TokenWithPrices = {
   address: getDefaultToken(base, "USDC")?.address ?? "",
   chainId: base.id,
   decimals: 6,
@@ -45,7 +45,7 @@ export const USDC: Token = {
   symbol: "USDC",
 };
 
-export const UNI: Token = {
+export const UNI: TokenWithPrices = {
   address: "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984",
   chainId: 10,
   decimals: 18,