@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

package/dist/{chunk-HTFORA4Q.js → chunk-BN36GABQ.js}

@@ -1,18 +1,16 @@
 'use client';
 
 import {
-  ActionModal,
-  CustomSelect,
-  useCurrencyBalance
-} from "./chunk-OFY7OFTL.js";
+  ActionModal
+} from "./chunk-ABSYNRT5.js";
 import {
   useAnalytics
-} from "./chunk-XTGMMNV5.js";
+} from "./chunk-A5ACY5YV.js";
 import {
   BellIcon_default,
   CalendarIcon_default,
   CartIcon_default
-} from "./chunk-MPBN3E54.js";
+} from "./chunk-2VHHJNXY.js";
 import {
   AlertMessage,
   MODAL_OVERLAY_PROPS,
@@ -35,7 +33,7 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-RBEPPVLT.js";
+} from "./chunk-X3QNSQER.js";
 import {
   DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 } from "./chunk-Y63BOO6M.js";
@@ -43,7 +41,7 @@ import {
   cn,
   compareAddress,
   truncateMiddle
-} from "./chunk-EAJ5K7QV.js";
+} from "./chunk-Q5RKAMYF.js";
 import {
   InvalidContractTypeError,
   InvalidStepError,
@@ -51,13 +49,14 @@ import {
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-4XK7XNJ7.js";
+} from "./chunk-BNAUZXPV.js";
 
 // src/react/ui/modals/modal-provider.tsx
-import { observer as observer12 } from "@legendapp/state/react";
+import { observer as observer17 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { use$ } from "@legendapp/state/react";
+import { useSelectPaymentModal } from "@0xsequence/checkout";
+import { useEffect } from "react";
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
 import { Text } from "@0xsequence/design-system";
@@ -115,310 +114,8 @@ var LoadingModal = ({
   }
 );
 
-// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
-import { useSelectPaymentModal } from "@0xsequence/checkout";
-
-// src/utils/decode/erc20.ts
-import { decodeFunctionData, erc20Abi } from "viem";
-function decodeERC20Approval(calldata) {
-  const decoded = decodeFunctionData({
-    abi: erc20Abi,
-    data: calldata
-  });
-  if (decoded.functionName !== "approve") {
-    throw new Error("Not an ERC20 approval transaction");
-  }
-  const [spender, value] = decoded.args;
-  return {
-    spender,
-    value
-  };
-}
-
-// src/react/ui/modals/BuyModal/store.ts
-import { observable } from "@legendapp/state";
-var buyState = {
-  order: void 0,
-  quantity: "1",
-  invalidQuantity: false,
-  checkoutModalIsLoading: false,
-  checkoutModalLoaded: false,
-  purchaseProcessing: false,
-  customProviderCallback: null
-};
-var initialState = {
-  isOpen: false,
-  open: ({
-    callbacks,
-    defaultCallbacks,
-    ...args
-  }) => {
-    buyModal$.state.set({
-      quantity: args.order.quantityAvailableFormatted,
-      order: args.order,
-      invalidQuantity: false,
-      checkoutModalIsLoading: false,
-      checkoutModalLoaded: false,
-      purchaseProcessing: false,
-      customProviderCallback: args.customProviderCallback
-    });
-    buyModal$.callbacks.set(callbacks || defaultCallbacks);
-    buyModal$.isOpen.set(true);
-  },
-  close: () => {
-    buyModal$.isOpen.set(false);
-    buyModal$.callbacks.set(void 0);
-    buyModal$.state.set(buyState);
-  },
-  state: buyState,
-  setCheckoutModalIsLoading: (isLoading) => {
-    buyModal$.state.checkoutModalIsLoading.set(isLoading);
-  },
-  setCheckoutModalLoaded: (isLoaded) => {
-    buyModal$.state.checkoutModalLoaded.set(isLoaded);
-  },
-  setPurchaseProcessing: (isProcessing) => {
-    buyModal$.state.purchaseProcessing.set(isProcessing);
-  },
-  callbacks: void 0
-};
-var buyModal$ = observable(initialState);
-
-// src/react/ui/modals/BuyModal/hooks/useFees.ts
-import { avalanche, optimism } from "viem/chains";
-var useFees = ({
-  chainId,
-  collectionAddress
-}) => {
-  const defaultFee = 2.5;
-  const defaultPlatformFeeRecipient = "0x858dB1cbF6D09D447C96A11603189b49B2D1C219";
-  const avalancheAndOptimismPlatformFeeRecipient = "0x400cdab4676c17aec07e8ec748a5fc3b674bca41";
-  const { data: marketplaceConfig } = useMarketplaceConfig();
-  const collection = marketplaceConfig?.collections.find(
-    (collection2) => collection2.address.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
-  );
-  const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
-  const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
-  const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
-  return {
-    amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
-    receiver
-  };
-};
-
-// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
-var useBuyCollectable = ({
-  chainId,
-  collectionAddress,
-  tokenId,
-  callbacks,
-  priceCurrencyAddress,
-  setCheckoutModalIsLoading,
-  setCheckoutModalLoaded,
-  customProviderCallback
-}) => {
-  const { openSelectPaymentModal } = useSelectPaymentModal();
-  const config = useConfig();
-  const marketplaceClient = getMarketplaceClient(Number(chainId), config);
-  const fees = useFees({ chainId: Number(chainId), collectionAddress });
-  const { wallet, isLoading, isError } = useWallet();
-  if (isLoading) {
-    return { status: "loading", buy: null, isLoading, isError: false };
-  }
-  if (isError || !wallet || !tokenId) {
-    return { status: "error", buy: null, isLoading, isError: true };
-  }
-  const invalidateQueries2 = async (queriesToInvalidate) => {
-    const queryClient = getQueryClient();
-    for (const queryKey of queriesToInvalidate) {
-      await queryClient.invalidateQueries({ queryKey });
-    }
-  };
-  return {
-    status: "ready",
-    isLoading,
-    isError,
-    buy: async (input) => {
-      setCheckoutModalIsLoading(true);
-      const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
-        collectionAddress,
-        buyer: await wallet.address(),
-        marketplace: input.marketplace,
-        ordersData: [
-          {
-            orderId: input.orderId,
-            quantity: input.quantity,
-            tokenId
-          }
-        ],
-        additionalFees: [fees],
-        walletType: "unknown" /* unknown */
-      });
-      setCheckoutModalLoaded(true);
-      setCheckoutModalIsLoading(false);
-      const buyStep = steps3.find((step) => step.id === "buy" /* buy */);
-      const approveStep = steps3.find(
-        (step) => step.id === "tokenApproval" /* tokenApproval */
-      );
-      const approvedSpenderAddress = approveStep ? decodeERC20Approval(approveStep.data).spender : void 0;
-      if (!buyStep) {
-        throw new Error("Buy step not found");
-      }
-      const openSelectPaymentModalConfig = {
-        chain: chainId,
-        collectibles: [
-          {
-            tokenId,
-            quantity: input.quantity,
-            decimals: input.collectableDecimals
-          }
-        ],
-        currencyAddress: priceCurrencyAddress,
-        price: buyStep.price,
-        targetContractAddress: buyStep.to,
-        approvedSpenderAddress,
-        txData: buyStep.data,
-        collectionAddress,
-        recipientAddress: await wallet.address(),
-        enableMainCurrencyPayment: true,
-        enableSwapPayments: !!input.checkoutOptions.swap,
-        creditCardProviders: customProviderCallback ? ["custom"] : input.checkoutOptions.nftCheckout || [],
-        onSuccess: (hash) => {
-          callbacks?.onSuccess?.({ hash });
-        },
-        supplementaryAnalyticsInfo: {
-          orderId: input.orderId,
-          marketplaceKind: input.marketplace
-        },
-        onError: callbacks?.onError,
-        onClose: () => {
-          invalidateQueries2([
-            collectableKeys.listings,
-            collectableKeys.lowestListings,
-            collectableKeys.listingsCount,
-            collectableKeys.lists,
-            collectableKeys.userBalances,
-            balanceQueries.all,
-            balanceQueries.collectionBalanceDetails
-          ]);
-          buyModal$.close();
-        },
-        ...customProviderCallback && {
-          customProviderCallback: () => {
-            customProviderCallback(buyStep);
-            buyModal$.close();
-          }
-        }
-      };
-      openSelectPaymentModal(openSelectPaymentModalConfig);
-    }
-  };
-};
-
-// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
-import { skipToken, useQuery } from "@tanstack/react-query";
-var useCheckoutOptions = (input) => {
-  const config = useConfig();
-  const { wallet } = useWallet();
-  const fees = useFees({
-    chainId: input.chainId,
-    collectionAddress: input.collectionAddress
-  });
-  return useQuery({
-    queryKey: [
-      "checkoutOptions",
-      input.chainId,
-      input.collectionAddress,
-      input.orderId,
-      input.marketplace
-    ],
-    queryFn: wallet ? async () => {
-      const marketplaceClient = getMarketplaceClient(input.chainId, config);
-      return marketplaceClient.checkoutOptionsMarketplace({
-        wallet: await wallet.address(),
-        orders: [
-          {
-            contractAddress: input.collectionAddress,
-            orderId: input.orderId,
-            marketplace: input.marketplace
-          }
-        ],
-        additionalFee: Number(fees.amount)
-      }).then((res) => res.options);
-    } : skipToken,
-    enabled: !!wallet
-  });
-};
-
-// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
-var useLoadData = ({
-  chainId,
-  collectionAddress,
-  collectibleId,
-  orderId,
-  marketplace
-}) => {
-  const {
-    data: collection,
-    isLoading: collectionLoading,
-    isError: collectionError
-  } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  const {
-    data: collectable,
-    isLoading: collectableLoading,
-    isError: collectableError
-  } = useCollectible({
-    chainId: String(chainId),
-    collectionAddress,
-    collectibleId,
-    query: {
-      enabled: !!collectibleId
-    }
-  });
-  const {
-    data: checkoutOptions,
-    isLoading: checkoutOptionsLoading,
-    isError: checkoutOptionsError
-  } = useCheckoutOptions({
-    chainId,
-    collectionAddress,
-    orderId,
-    marketplace
-  });
-  return {
-    collection,
-    collectable,
-    checkoutOptions,
-    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading,
-    isError: collectionError || collectableError || checkoutOptionsError
-  };
-};
-
-// src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
-import { useEffect } from "react";
-import { parseUnits } from "viem";
-function CheckoutModal({ buy, collectable, order }) {
-  useEffect(() => {
-    if (buyModal$.state.checkoutModalIsLoading.get() || buyModal$.state.checkoutModalLoaded.get())
-      return;
-    const executeBuy = () => {
-      buy({
-        orderId: order.orderId,
-        collectableDecimals: collectable.decimals || 0,
-        quantity: parseUnits("1", collectable.decimals || 0).toString(),
-        marketplace: order.marketplace
-      });
-    };
-    executeBuy();
-  }, []);
-  return null;
-}
-
-// src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { observer as observer2 } from "@legendapp/state/react";
+// src/react/ui/modals/BuyModal/ERC1155QuantityModal.tsx
+import { use$, useObservable } from "@legendapp/state/react";
 import * as dn2 from "dnum";
 import { Text as Text2, TokenImage } from "@0xsequence/design-system";
 
@@ -438,7 +135,8 @@ var quantityInput_default = observer(function QuantityInput({
   $invalidQuantity,
   decimals,
   maxQuantity,
-  className
+  className,
+  disabled
 }) {
   const dnMaxQuantity = dn.from(maxQuantity, decimals);
   const dnOne = dn.from("1", decimals);
@@ -526,7 +224,8 @@ var quantityInput_default = observer(function QuantityInput({
     {
       className: cn(
         "flex w-full flex-col [&>label>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div:has(:disabled)]:opacity-100 [&>label>div>div>input]:text-xs [&>label>div>div]:h-9 [&>label>div>div]:rounded [&>label>div>div]:pr-0 [&>label>div>div]:pl-3 [&>label>div>div]:text-xs [&>label]:gap-[2px]",
-        className
+        className,
+        disabled && "pointer-events-none opacity-50"
       ),
       children: [
         /* @__PURE__ */ jsx3(
@@ -569,85 +268,119 @@ var quantityInput_default = observer(function QuantityInput({
   );
 });
 
-// src/react/ui/modals/BuyModal/modals/Modal1155.tsx
+// src/react/ui/modals/BuyModal/store.ts
+import { createStore } from "@xstate/store";
+import { useSelector } from "@xstate/store/react";
+var initialContext = {
+  isOpen: false,
+  props: null,
+  onError: () => {
+  },
+  onSuccess: () => {
+  },
+  quantity: void 0
+};
+var buyModalStore = createStore({
+  context: { ...initialContext },
+  on: {
+    open: (context, event) => ({
+      ...context,
+      props: event.props,
+      onError: event.onError ?? context.onError,
+      onSuccess: event.onSuccess ?? context.onSuccess,
+      isOpen: true
+    }),
+    close: (context) => ({
+      ...context,
+      isOpen: false,
+      quantity: void 0
+    }),
+    setQuantity: (context, event) => ({
+      ...context,
+      quantity: event.quantity
+    })
+  }
+});
+var useIsOpen = () => useSelector(buyModalStore, (state) => state.context.isOpen);
+var useBuyModalProps = () => useSelector(buyModalStore, (state) => state.context.props);
+var useOnError = () => useSelector(buyModalStore, (state) => state.context.onError);
+var useOnSuccess = () => useSelector(buyModalStore, (state) => state.context.onSuccess);
+var useQuantity = () => useSelector(buyModalStore, (state) => state.context.quantity);
+
+// src/react/ui/modals/BuyModal/ERC1155QuantityModal.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var ERC1155QuantityModal = observer2(
-  ({ buy, collectable, order }) => {
-    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get() && buyModal$.state.purchaseProcessing.get()) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx4(
-      ActionModal,
-      {
-        isOpen: buyModal$.isOpen.get(),
-        chainId: order.chainId,
-        onClose: () => buyModal$.close(),
-        title: "Select Quantity",
-        disableAnimation: true,
-        ctas: [
+var ERC1155QuantityModal = ({ order }) => {
+  const { chainId } = useBuyModalProps();
+  const isOpen = useIsOpen();
+  const localQuantity$ = useObservable("1");
+  const localQuantity = use$(localQuantity$);
+  const invalidQuantity$ = useObservable(false);
+  const invalidQuantity = use$(invalidQuantity$);
+  return /* @__PURE__ */ jsx4(
+    ActionModal,
+    {
+      isOpen,
+      chainId,
+      onClose: () => buyModalStore.send({ type: "close" }),
+      title: "Select Quantity",
+      disableAnimation: true,
+      ctas: [
+        {
+          label: "Buy now",
+          onClick: () => {
+            buyModalStore.send({
+              type: "setQuantity",
+              quantity: Number(localQuantity)
+            });
+          },
+          disabled: invalidQuantity
+        }
+      ],
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-4", children: [
+        /* @__PURE__ */ jsx4(
+          quantityInput_default,
           {
-            label: "Buy now",
-            onClick: () => {
-              buyModal$.state.checkoutModalIsLoading.set(true);
-              buyModal$.state.purchaseProcessing.set(true);
-              buy({
-                quantity: buyModal$.state.quantity.get(),
-                orderId: order.orderId,
-                collectableDecimals: collectable.decimals || 0,
-                marketplace: order.marketplace
-              });
-            },
-            disabled: buyModal$.state.checkoutModalIsLoading.get(),
-            pending: buyModal$.state.checkoutModalIsLoading.get()
+            $quantity: localQuantity$,
+            $invalidQuantity: invalidQuantity$,
+            decimals: order.quantityDecimals,
+            maxQuantity: order.quantityRemaining
           }
-        ],
-        children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-4", children: [
-          /* @__PURE__ */ jsx4(
-            quantityInput_default,
-            {
-              $quantity: buyModal$.state.quantity,
-              $invalidQuantity: buyModal$.state.invalidQuantity,
-              decimals: order.quantityDecimals,
-              maxQuantity: order.quantityRemaining
-            }
-          ),
-          /* @__PURE__ */ jsx4(TotalPrice, { order })
-        ] })
-      }
-    );
-  }
-);
-var TotalPrice = observer2(({ order }) => {
+        ),
+        /* @__PURE__ */ jsx4(TotalPrice, { order, quantityStr: localQuantity })
+      ] })
+    }
+  );
+};
+var TotalPrice = ({
+  order,
+  quantityStr
+}) => {
   const { data: marketplaceConfig } = useMarketplaceConfig();
   const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
     chainId: order.chainId,
     currencyAddress: order.priceCurrencyAddress
   });
-  const quantityStr = buyModal$.state.quantity.get();
+  let error = null;
   let formattedPrice = "0";
   if (currency) {
-    const quantity = BigInt(quantityStr);
-    const totalPriceWithoutFees = dn2.format(
-      dn2.multiply(quantity, order.priceAmountFormatted),
-      {
-        digits: currency.decimals,
-        trailingZeros: false
-      }
-    );
-    const marketplaceFeePercentage = marketplaceConfig?.collections.find(
-      (collection) => compareAddress(collection.address, order.collectionContractAddress)
-    )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-    const feeMultiplier = dn2.from(1 + marketplaceFeePercentage / 100);
-    const totalPrice = dn2.format(
-      dn2.multiply(totalPriceWithoutFees, feeMultiplier),
-      {
-        digits: currency.decimals,
-        trailingZeros: false
-      }
-    );
-    formattedPrice = totalPrice;
+    try {
+      const price = dn2.from(order.priceAmount, currency.decimals);
+      const totalPriceWithoutFees = dn2.multiply(quantityStr, price);
+      const marketplaceFeePercentage = marketplaceConfig?.collections.find(
+        (collection) => compareAddress(collection.address, order.collectionContractAddress)
+      )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+      const feeMultiplier = dn2.from(
+        1 + marketplaceFeePercentage / 100,
+        currency.decimals
+      );
+      const totalPrice = dn2.multiply(totalPriceWithoutFees, feeMultiplier);
+      formattedPrice = dn2.format(totalPrice, { trailingZeros: false });
+    } catch (e) {
+      console.error("Error formatting price", e);
+      error = "Unable to calculate total price";
+    }
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex justify-between", children: [
+  return error ? /* @__PURE__ */ jsx4(Text2, { className: "font-body font-medium text-xs", color: "text50", children: error }) : /* @__PURE__ */ jsxs2("div", { className: "flex justify-between", children: [
     /* @__PURE__ */ jsx4(Text2, { className: "font-body font-medium text-xs", color: "text50", children: "Total Price" }),
     /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-0.5", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(Text2, { className: "font-body text-text-50 text-xs", children: "Loading..." }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
       currency.imageUrl && /* @__PURE__ */ jsx4(TokenImage, { src: currency.imageUrl, size: "xs" }),
@@ -655,112 +388,362 @@ var TotalPrice = observer2(({ order }) => {
       /* @__PURE__ */ jsx4(Text2, { className: "font-body font-bold text-text-80 text-xs", children: currency?.symbol })
     ] }) })
   ] });
-});
-
-// src/react/ui/modals/BuyModal/Modal.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var BuyModal = () => {
-  const isOpen = use$(buyModal$.isOpen);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx5(BuyModalContent, {});
 };
-var BuyModalContent = () => {
-  const chainId = String(use$(buyModal$.state.order.chainId));
-  const collectionAddress = use$(
-    buyModal$.state.order.collectionContractAddress
+
+// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
+import { skipToken, useQuery } from "@tanstack/react-query";
+
+// src/react/ui/modals/BuyModal/hooks/useFees.ts
+import { avalanche, optimism } from "viem/chains";
+var useFees = ({
+  chainId,
+  collectionAddress
+}) => {
+  const defaultFee = 2.5;
+  const defaultPlatformFeeRecipient = "0x858dB1cbF6D09D447C96A11603189b49B2D1C219";
+  const avalancheAndOptimismPlatformFeeRecipient = "0x400cdab4676c17aec07e8ec748a5fc3b674bca41";
+  const { data: marketplaceConfig } = useMarketplaceConfig();
+  const collection = marketplaceConfig?.collections.find(
+    (collection2) => collection2.address.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
   );
-  const buyModalState = use$(buyModal$.state);
-  const collectibleId = use$(buyModal$.state.order.tokenId);
-  const callbacks = use$(buyModal$.callbacks);
-  const order = use$(buyModal$.state.order);
-  const isOpen = use$(buyModal$.isOpen);
-  const checkoutModalIsLoading = use$(buyModal$.state.checkoutModalIsLoading);
-  const setCheckoutModalIsLoading = use$(buyModal$.setCheckoutModalIsLoading);
-  const setCheckoutModalLoaded = use$(buyModal$.setCheckoutModalLoaded);
-  const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
-    chainId: Number(chainId),
+  const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
+  const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
+  const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
+  return {
+    amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
+    receiver
+  };
+};
+
+// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
+var useCheckoutOptions = (input) => {
+  const config = useConfig();
+  const { wallet } = useWallet();
+  const fees = useFees({
+    chainId: input.chainId,
+    collectionAddress: input.collectionAddress
+  });
+  return useQuery({
+    queryKey: [
+      "checkoutOptions",
+      input.chainId,
+      input.collectionAddress,
+      input.orderId,
+      input.marketplace
+    ],
+    queryFn: wallet ? async () => {
+      const marketplaceClient = getMarketplaceClient(input.chainId, config);
+      const response = await marketplaceClient.checkoutOptionsMarketplace({
+        wallet: await wallet.address(),
+        orders: [
+          {
+            contractAddress: input.collectionAddress,
+            orderId: input.orderId,
+            marketplace: input.marketplace
+          }
+        ],
+        additionalFee: Number(fees.amount)
+      });
+      const orderResponse = await marketplaceClient.getOrders({
+        input: [
+          {
+            contractAddress: input.collectionAddress,
+            orderId: input.orderId,
+            marketplace: input.marketplace
+          }
+        ]
+      });
+      const order = orderResponse.orders[0];
+      return {
+        ...response.options,
+        order
+      };
+    } : skipToken,
+    enabled: !!wallet
+  });
+};
+
+// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
+var useLoadData = () => {
+  const { chainId, collectionAddress, collectibleId, orderId, marketplace } = useBuyModalProps();
+  const {
+    wallet,
+    isLoading: walletLoading,
+    isError: walletError
+  } = useWallet();
+  const {
+    data: collection,
+    isLoading: collectionLoading,
+    isError: collectionError
+  } = useCollection({
+    chainId,
+    collectionAddress
+  });
+  const {
+    data: collectable,
+    isLoading: collectableLoading,
+    isError: collectableError
+  } = useCollectible({
+    chainId,
     collectionAddress,
     collectibleId,
-    orderId: order.orderId,
-    marketplace: order.marketplace
+    query: {
+      enabled: !!collectibleId
+    }
   });
   const {
-    buy,
-    isLoading: buyIsLoading,
-    isError: buyIsError
-  } = useBuyCollectable({
+    data: checkoutOptions,
+    isLoading: checkoutOptionsLoading,
+    isError: checkoutOptionsError
+    // TODO: rename this... its order and checkout options
+  } = useCheckoutOptions({
     chainId,
     collectionAddress,
-    callbacks,
-    tokenId: collectibleId,
-    priceCurrencyAddress: order.priceCurrencyAddress,
-    setCheckoutModalIsLoading,
-    setCheckoutModalLoaded,
-    ...buyModalState?.customProviderCallback && {
-      customProviderCallback: buyModalState.customProviderCallback
-    }
+    orderId,
+    marketplace
   });
-  const buyAction = (input) => {
-    if (buy && checkoutOptions) {
-      buy({ ...input, checkoutOptions });
-      buyModal$.state.purchaseProcessing.set(true);
-    } else {
-      console.error("buy is null or undefined");
+  return {
+    collection,
+    collectable,
+    order: checkoutOptions?.order,
+    checkoutOptions,
+    wallet,
+    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading || walletLoading,
+    // TODO: we should have a way to determine what is causing the error
+    isError: collectionError || collectableError || checkoutOptionsError || walletError
+  };
+};
+
+// src/react/ui/modals/BuyModal/hooks/usePaymentModalParams.ts
+import { skipToken as skipToken2, useQuery as useQuery2 } from "@tanstack/react-query";
+
+// src/utils/decode/erc20.ts
+import { decodeFunctionData, erc20Abi } from "viem";
+function decodeERC20Approval(calldata) {
+  const decoded = decodeFunctionData({
+    abi: erc20Abi,
+    data: calldata
+  });
+  if (decoded.functionName !== "approve") {
+    throw new Error("Not an ERC20 approval transaction");
+  }
+  const [spender, value] = decoded.args;
+  return {
+    spender,
+    value
+  };
+}
+
+// src/react/ui/modals/BuyModal/hooks/usePaymentModalParams.ts
+var getBuyCollectableParams = async ({
+  chainId,
+  collectionAddress,
+  collectibleId,
+  callbacks,
+  priceCurrencyAddress,
+  customCreditCardProviderCallback,
+  config,
+  wallet,
+  marketplace,
+  orderId,
+  quantity,
+  collectable,
+  checkoutOptions,
+  fee
+}) => {
+  const marketplaceClient = getMarketplaceClient(chainId, config);
+  const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
+    collectionAddress,
+    buyer: await wallet.address(),
+    marketplace,
+    ordersData: [
+      {
+        orderId,
+        quantity: quantity.toString(),
+        tokenId: collectibleId
+      }
+    ],
+    additionalFees: [fee],
+    walletType: "unknown" /* unknown */
+  });
+  const buyStep = steps3.find((step) => step.id === "buy" /* buy */);
+  const approveStep = steps3.find((step) => step.id === "tokenApproval" /* tokenApproval */);
+  const approvedSpenderAddress = approveStep ? decodeERC20Approval(approveStep.data).spender : void 0;
+  if (!buyStep) {
+    throw new Error("Buy step not found");
+  }
+  return {
+    chain: chainId,
+    collectibles: [
+      {
+        tokenId: collectibleId,
+        quantity: quantity.toString(),
+        decimals: collectable.decimals
+      }
+    ],
+    currencyAddress: priceCurrencyAddress,
+    price: buyStep.price,
+    targetContractAddress: buyStep.to,
+    approvedSpenderAddress,
+    txData: buyStep.data,
+    collectionAddress,
+    recipientAddress: await wallet.address(),
+    enableMainCurrencyPayment: true,
+    enableSwapPayments: !!checkoutOptions.swap,
+    creditCardProviders: customCreditCardProviderCallback ? ["custom"] : checkoutOptions.nftCheckout || [],
+    onSuccess: (hash) => {
+      callbacks?.onSuccess?.({ hash });
+    },
+    supplementaryAnalyticsInfo: {
+      orderId,
+      marketplaceKind: marketplace
+    },
+    onError: callbacks?.onError,
+    onClose: () => {
+      const queryClient = getQueryClient();
+      queryClient.invalidateQueries();
+      buyModalStore.send({ type: "close" });
+    },
+    ...customCreditCardProviderCallback && {
+      customProviderCallback: () => {
+        customCreditCardProviderCallback(buyStep);
+        buyModalStore.send({ type: "close" });
+      }
     }
   };
-  if (isLoading || checkoutModalIsLoading || !collection || !collectable || !checkoutOptions || buyIsLoading) {
+};
+var usePaymentModalParams = (args) => {
+  const {
+    wallet,
+    marketplace,
+    collectable,
+    checkoutOptions,
+    priceCurrencyAddress,
+    quantity
+  } = args;
+  const {
+    chainId,
+    collectionAddress,
+    collectibleId,
+    orderId,
+    customCreditCardProviderCallback,
+    skipNativeBalanceCheck
+  } = useBuyModalProps();
+  const config = useConfig();
+  const fee = useFees({
+    chainId,
+    collectionAddress
+  });
+  const onSuccess = useOnSuccess();
+  const onError = useOnError();
+  const enabled = !!wallet && !!marketplace && !!collectable && !!checkoutOptions && !!priceCurrencyAddress && !!quantity;
+  return useQuery2({
+    queryKey: ["buyCollectableParams", args, quantity, fee],
+    queryFn: enabled ? () => getBuyCollectableParams({
+      chainId,
+      config,
+      wallet,
+      collectionAddress,
+      collectibleId,
+      marketplace,
+      orderId,
+      quantity,
+      collectable,
+      checkoutOptions,
+      fee,
+      priceCurrencyAddress,
+      callbacks: {
+        onSuccess,
+        onError
+      },
+      customCreditCardProviderCallback,
+      skipNativeBalanceCheck
+    }) : skipToken2
+  });
+};
+
+// src/react/ui/modals/BuyModal/Modal.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BuyModal = () => {
+  const isOpen = useIsOpen();
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(BuyModalContent, {});
+};
+var BuyModalContent = () => {
+  const { chainId, skipNativeBalanceCheck } = useBuyModalProps();
+  const onError = useOnError();
+  const { openSelectPaymentModal } = useSelectPaymentModal();
+  const quantity = useQuantity();
+  const {
+    collection,
+    collectable,
+    wallet,
+    isLoading,
+    isError,
+    order,
+    checkoutOptions
+  } = useLoadData();
+  const {
+    data: paymentModalParams,
+    isLoading: isPaymentModalParamsLoading,
+    isError: isPaymentModalParamsError
+  } = usePaymentModalParams({
+    wallet,
+    quantity,
+    marketplace: order?.marketplace,
+    collectable,
+    checkoutOptions,
+    priceCurrencyAddress: order?.priceCurrencyAddress
+  });
+  useEffect(() => {
+    if (collection?.type === "ERC721" /* ERC721 */ && !quantity) {
+      buyModalStore.send({ type: "setQuantity", quantity: 1 });
+    }
+  }, [collection]);
+  if (isError || isPaymentModalParamsError) {
+    onError(new Error("Error loading data"));
     return /* @__PURE__ */ jsx5(
-      LoadingModal,
+      ErrorModal,
       {
-        isOpen,
-        chainId: Number(chainId),
-        onClose: buyModal$.close,
-        title: "Loading Sequence Pay"
+        isOpen: true,
+        chainId,
+        onClose: () => buyModalStore.send({ type: "close" }),
+        title: "Error"
       }
     );
   }
-  if (buyIsError || isError) {
+  if (isLoading || isPaymentModalParamsLoading || !collection || !collectable || !order) {
     return /* @__PURE__ */ jsx5(
-      ErrorModal,
+      LoadingModal,
       {
-        isOpen,
-        chainId: Number(chainId),
-        onClose: buyModal$.close,
-        title: "Error"
+        isOpen: true,
+        chainId,
+        onClose: () => buyModalStore.send({ type: "close" }),
+        title: "Loading Sequence Pay"
       }
     );
   }
-  if (buyModal$.state.purchaseProcessing.get()) {
-    return null;
+  if (collection.type === "ERC1155" /* ERC1155 */ && !quantity) {
+    return /* @__PURE__ */ jsx5(ERC1155QuantityModal, { order });
+  }
+  if (paymentModalParams) {
+    openSelectPaymentModal({
+      ...paymentModalParams,
+      skipNativeBalanceCheck
+    });
   }
-  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx5(
-    CheckoutModal,
-    {
-      buy: buyAction,
-      collectable,
-      order
-    }
-  ) : /* @__PURE__ */ jsx5(
-    ERC1155QuantityModal,
-    {
-      buy: buyAction,
-      collectable,
-      order,
-      chainId,
-      collectionAddress,
-      collectibleId
-    }
-  );
 };
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { Show, observer as observer6 } from "@legendapp/state/react";
-import { parseUnits as parseUnits3 } from "viem";
-import { useAccount as useAccount3 } from "wagmi";
+import { Show, observer as observer7 } from "@legendapp/state/react";
+import { parseUnits as parseUnits2 } from "viem";
+import { useAccount as useAccount4 } from "wagmi";
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { Skeleton, Text as Text3 } from "@0xsequence/design-system";
-import { observer as observer3 } from "@legendapp/state/react";
+import { observer as observer2 } from "@legendapp/state/react";
 import { addDays } from "date-fns";
 import { useState as useState2 } from "react";
 
@@ -943,9 +926,10 @@ var PRESET_RANGES = {
     offset: 30
   }
 };
-var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
+var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
   className,
-  $date
+  $date,
+  disabled
 }) {
   const [calendarDropdownOpen, setCalendarDropdownOpen] = useState2(false);
   function handleSelectPresetRange(range) {
@@ -965,44 +949,54 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   if (!$date.get()) {
     return /* @__PURE__ */ jsx8(Skeleton, { className: "mr-3 h-7 w-20 rounded-2xl" });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsx8(
-      Text3,
-      {
-        className: "w-full text-left font-body font-medium text-xs",
-        fontWeight: "medium",
-        color: "text100",
-        children: "Set expiry"
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      "div",
-      {
-        className: `${className} mt-0.5 flex w-full items-center gap-2 rounded-sm border border-border-base`,
-        children: /* @__PURE__ */ jsx8(
-          CalendarDropdown,
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "relative w-full",
+        disabled && "pointer-events-none opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(
+          Text3,
           {
-            selectedDate: $date.get(),
-            setSelectedDate: handleDateValueChange,
-            onSelectPreset: handleSelectPresetRange,
-            isOpen: calendarDropdownOpen,
-            setIsOpen: setCalendarDropdownOpen
+            className: "w-full text-left font-body font-medium text-xs",
+            fontWeight: "medium",
+            color: "text100",
+            children: "Set expiry"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: `${className} mt-0.5 flex w-full items-center gap-2 rounded-sm border border-border-base`,
+            children: /* @__PURE__ */ jsx8(
+              CalendarDropdown,
+              {
+                selectedDate: $date.get(),
+                setSelectedDate: handleDateValueChange,
+                onSelectPreset: handleSelectPresetRange,
+                isOpen: calendarDropdownOpen,
+                setIsOpen: setCalendarDropdownOpen
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 });
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text4 } from "@0xsequence/design-system";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Button as Button2, Text as Text4 } from "@0xsequence/design-system";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
   collectionAddress,
   tokenId,
-  price
+  price,
+  onBuyNow
 }) {
   const { data: listing, isLoading: listingLoading } = useLowestListing({
     tokenId,
@@ -1013,6 +1007,7 @@ function FloorPriceText({
     }
   });
   const floorPriceRaw = listing?.order?.priceAmount;
+  const floorPriceFormatted = listing?.order?.priceAmountFormatted;
   const { data: priceComparison, isLoading: comparisonLoading } = useComparePrices({
     chainId,
     priceAmountRaw: price.amountRaw || "0",
@@ -1027,31 +1022,88 @@ function FloorPriceText({
     return null;
   }
   let floorPriceDifferenceText = "Same as floor price";
+  let showBuyNowButton = false;
   if (priceComparison) {
     if (priceComparison.status === "same") {
       floorPriceDifferenceText = "Same as floor price";
+      showBuyNowButton = true;
+    } else if (priceComparison.status === "below") {
+      floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% below floor price`;
     } else {
-      floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% ${priceComparison.status === "below" ? "below" : "above"} floor price`;
+      floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% above floor price`;
+      showBuyNowButton = true;
     }
-  }
-  return /* @__PURE__ */ jsx9(
-    Text4,
-    {
-      className: "w-full text-left font-body text-sm",
-      fontWeight: "medium",
-      color: "text50",
-      children: floorPriceDifferenceText
-    }
-  );
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx9(Text4, { className: "text-left font-body font-medium text-muted text-xs", children: floorPriceDifferenceText }),
+    showBuyNowButton && onBuyNow && /* @__PURE__ */ jsxs5(
+      Button2,
+      {
+        size: "xs",
+        variant: "text",
+        className: "text-indigo-400 text-xs",
+        onClick: onBuyNow,
+        children: [
+          "Buy for ",
+          floorPriceFormatted,
+          " ",
+          price.currency.symbol
+        ]
+      }
+    )
+  ] });
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { NumericInput as NumericInput2, Text as Text5 } from "@0xsequence/design-system";
+import { NumericInput as NumericInput2, Text as Text6 } from "@0xsequence/design-system";
 import { use$ as use$2 } from "@legendapp/state/react";
-import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { parseUnits as parseUnits2 } from "viem";
+import { useEffect as useEffect3, useRef, useState as useState5 } from "react";
+import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
+// src/react/hooks/useCurrencyBalance.tsx
+import { skipToken as skipToken3, useQuery as useQuery3 } from "@tanstack/react-query";
+import { erc20Abi as erc20Abi2, formatUnits, zeroAddress } from "viem";
+import { usePublicClient } from "wagmi";
+function useCurrencyBalance({
+  currencyAddress,
+  chainId,
+  userAddress
+}) {
+  const publicClient = usePublicClient({ chainId });
+  return useQuery3({
+    queryKey: ["balance", currencyAddress, chainId, userAddress],
+    queryFn: !!userAddress && !!chainId && !!currencyAddress && !!publicClient ? async () => {
+      if (currencyAddress === zeroAddress) {
+        const balance2 = await publicClient.getBalance({
+          address: userAddress
+        });
+        return {
+          value: balance2,
+          formatted: formatUnits(balance2, 18)
+        };
+      }
+      const [balance, decimals] = await Promise.all([
+        publicClient.readContract({
+          address: currencyAddress,
+          abi: erc20Abi2,
+          functionName: "balanceOf",
+          args: [userAddress]
+        }),
+        publicClient.readContract({
+          address: currencyAddress,
+          abi: erc20Abi2,
+          functionName: "decimals"
+        })
+      ]);
+      return {
+        value: balance,
+        formatted: formatUnits(balance, decimals)
+      };
+    } : skipToken3
+  });
+}
+
 // src/react/ui/modals/_internal/components/currencyImage/index.tsx
 import { TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { useState as useState3 } from "react";
@@ -1091,10 +1143,97 @@ var currencyImage_default = CurrencyImage;
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
 import { Skeleton as Skeleton2 } from "@0xsequence/design-system";
-import { observer as observer4 } from "@legendapp/state/react";
+import { observer as observer3 } from "@legendapp/state/react";
 import { useEffect as useEffect2 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
+
+// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
+import {
+  Button as Button3,
+  ChevronDownIcon,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuPortal as DropdownMenuPortal2,
+  DropdownMenuRoot as DropdownMenuRoot2,
+  DropdownMenuTrigger as DropdownMenuTrigger2,
+  Text as Text5
+} from "@0xsequence/design-system";
+import { useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var CustomSelect = ({
+  items,
+  onValueChange,
+  defaultValue,
+  placeholder = "Select an option",
+  disabled = false,
+  className,
+  testId = "custom-select"
+}) => {
+  const [selectedItem, setSelectedItem] = useState4(
+    defaultValue
+  );
+  const handleValueChange = (item) => {
+    setSelectedItem(item);
+    onValueChange?.(item.value);
+  };
+  return /* @__PURE__ */ jsxs6(DropdownMenuRoot2, { children: [
+    /* @__PURE__ */ jsx11(DropdownMenuTrigger2, { asChild: true, disabled, children: /* @__PURE__ */ jsx11(
+      Button3,
+      {
+        size: "xs",
+        label: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-1 truncate pr-3", children: [
+          /* @__PURE__ */ jsx11(Text5, { variant: "xsmall", color: "text100", fontWeight: "bold", children: selectedItem ? selectedItem.content : placeholder }),
+          /* @__PURE__ */ jsx11(ChevronDownIcon, { size: "xs" })
+        ] }),
+        shape: "circle",
+        opacity: "100",
+        className: `bg-overlay-light py-1.5 pl-3 ${className || ""}`,
+        "data-testid": `${testId}-trigger`
+      }
+    ) }),
+    /* @__PURE__ */ jsx11(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx11(
+      DropdownMenuContent2,
+      {
+        align: "end",
+        side: "bottom",
+        sideOffset: 8,
+        className: "z-[1000] overflow-hidden rounded-xl border border-border-base bg-color-overlay-glass shadow-lg backdrop-blur-md",
+        "data-testid": `${testId}-content`,
+        children: /* @__PURE__ */ jsx11("div", { className: "max-h-[240px] overflow-auto", children: items.map((item) => /* @__PURE__ */ jsx11(
+          DropdownMenuCheckboxItem,
+          {
+            checked: selectedItem?.value === item.value,
+            onCheckedChange: () => handleValueChange(item),
+            disabled: item.disabled,
+            className: "group relative flex cursor-pointer select-none items-center rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-background-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span[data-state='checked']]:hidden",
+            "data-testid": `${testId}-option-${item.value}`,
+            children: /* @__PURE__ */ jsx11("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2 truncate", children: typeof item.content === "string" ? /* @__PURE__ */ jsx11(
+              Text5,
+              {
+                variant: "small",
+                color: selectedItem?.value === item.value ? "text100" : "text80",
+                className: `truncate ${selectedItem?.value === item.value ? "font-bold" : ""}`,
+                "data-testid": `${testId}-option-text-${item.value}`,
+                children: item.content
+              }
+            ) : /* @__PURE__ */ jsx11(
+              "div",
+              {
+                className: "truncate",
+                "data-testid": `${testId}-option-content-${item.value}`,
+                children: item.content
+              }
+            ) }) })
+          },
+          item.value
+        )) })
+      }
+    ) })
+  ] });
+};
+
+// src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   secondCurrencyAsDefault,
@@ -1117,7 +1256,7 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
     }
   }, [currencies]);
   if (!currencies || currenciesLoading || !currency?.symbol) {
-    return /* @__PURE__ */ jsx11(Skeleton2, { className: "mr-3 h-7 w-20 rounded-2xl" });
+    return /* @__PURE__ */ jsx12(Skeleton2, { className: "mr-3 h-7 w-20 rounded-2xl" });
   }
   const options = currencies.map(
     (currency2) => ({
@@ -1132,7 +1271,7 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
     );
     selectedCurrency$.set(selectedCurrency);
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     CustomSelect,
     {
       items: options,
@@ -1148,7 +1287,7 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function PriceInput({
   chainId,
   collectionAddress,
@@ -1156,27 +1295,34 @@ function PriceInput({
   onPriceChange,
   checkBalance,
   secondCurrencyAsDefault,
-  includeNativeCurrency
+  includeNativeCurrency,
+  disabled
 }) {
   const { address: accountAddress } = useAccount();
+  const inputRef = useRef(null);
   const currencyDecimals = use$2($price.currency.decimals);
   const currencyAddress = use$2($price.currency.contractAddress);
   const priceAmountRaw = use$2($price.amountRaw);
+  useEffect3(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
   const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
     currencyAddress,
-    chainId: Number(chainId),
+    chainId,
     userAddress: accountAddress
   });
   const balanceError = !!checkBalance?.enabled && !!isBalanceSuccess && !!priceAmountRaw && !!currencyDecimals && BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
   if (checkBalance?.enabled) {
     checkBalance.callback(balanceError);
   }
-  const [value, setValue] = useState4("0");
+  const [value, setValue] = useState5("0");
   const prevCurrencyDecimals = useRef(currencyDecimals);
   useEffect3(() => {
     if (prevCurrencyDecimals.current !== currencyDecimals && value !== "0") {
       try {
-        const parsedAmount = parseUnits2(value, Number(currencyDecimals));
+        const parsedAmount = parseUnits(value, Number(currencyDecimals));
         $price.amountRaw.set(parsedAmount.toString());
         if (onPriceChange && parsedAmount !== 0n) {
           onPriceChange();
@@ -1191,7 +1337,7 @@ function PriceInput({
     const newValue = event.target.value;
     setValue(newValue);
     try {
-      const parsedAmount = parseUnits2(newValue, Number(currencyDecimals));
+      const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
       $price.amountRaw.set(parsedAmount.toString());
       if (onPriceChange && parsedAmount !== 0n) {
         onPriceChange();
@@ -1200,49 +1346,378 @@ function PriceInput({
       $price.amountRaw.set("0");
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "relative flex w-full flex-col", children: [
-    /* @__PURE__ */ jsx12("div", { className: "absolute top-8 left-2 flex items-center", children: /* @__PURE__ */ jsx12(currencyImage_default, { price$: $price }) }),
-    /* @__PURE__ */ jsx12("div", { className: "[&>label>div>.rounded-xl]:h-9 [&>label>div>.rounded-xl]:rounded-sm [&>label>div>.rounded-xl]:px-2 [&>label]:gap-1", children: /* @__PURE__ */ jsx12(
-      NumericInput2,
-      {
-        className: "ml-5 w-full text-xs",
-        name: "price-input",
-        decimals: currencyDecimals,
-        label: "Enter price",
-        labelLocation: "top",
-        controls: /* @__PURE__ */ jsx12(
-          currencyOptionsSelect_default,
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "relative flex w-full flex-col",
+        disabled && "pointer-events-none opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "absolute top-8 left-2 flex items-center", children: /* @__PURE__ */ jsx13(currencyImage_default, { price$: $price }) }),
+        /* @__PURE__ */ jsx13("div", { className: "[&>label>div>.rounded-xl]:h-9 [&>label>div>.rounded-xl]:rounded-sm [&>label>div>.rounded-xl]:px-2 [&>label]:gap-1", children: /* @__PURE__ */ jsx13(
+          NumericInput2,
           {
-            selectedCurrency$: $price.currency,
-            collectionAddress,
-            chainId,
-            secondCurrencyAsDefault,
-            includeNativeCurrency
+            ref: inputRef,
+            className: "ml-5 w-full text-xs",
+            name: "price-input",
+            decimals: currencyDecimals,
+            label: "Enter price",
+            labelLocation: "top",
+            controls: /* @__PURE__ */ jsx13(
+              currencyOptionsSelect_default,
+              {
+                selectedCurrency$: $price.currency,
+                collectionAddress,
+                chainId,
+                secondCurrencyAsDefault,
+                includeNativeCurrency
+              }
+            ),
+            value,
+            onChange: handleChange
           }
-        ),
-        value,
-        onChange: handleChange
+        ) }),
+        balanceError && /* @__PURE__ */ jsx13(
+          Text6,
+          {
+            className: "-bottom-5 absolute font-body font-medium text-xs",
+            color: "negative",
+            children: "Insufficient balance"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/index.tsx
+import { getNetwork } from "@0xsequence/connect";
+import { Divider, Skeleton as Skeleton4, Text as Text9 } from "@0xsequence/design-system";
+import { NetworkType } from "@0xsequence/network";
+import { observer as observer5 } from "@legendapp/state/react";
+
+// src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx
+import { Image, Select, Text as Text7 } from "@0xsequence/design-system";
+import { observer as observer4 } from "@legendapp/state/react";
+import { useEffect as useEffect4 } from "react";
+import { formatUnits as formatUnits2, zeroAddress as zeroAddress2 } from "viem";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var WaasFeeOptionsSelect = observer4(
+  ({
+    options,
+    selectedFeeOption$
+  }) => {
+    options = options.map((option) => ({
+      ...option,
+      token: {
+        ...option.token,
+        contractAddress: option.token.contractAddress || zeroAddress2
       }
-    ) }),
-    balanceError && /* @__PURE__ */ jsx12(
-      Text5,
+    }));
+    const feeOptions = options.map((option) => {
+      const value = option.token.contractAddress ?? "";
+      return FeeOptionSelectItem({ value, option });
+    });
+    useEffect4(() => {
+      if (options.length > 0 && !selectedFeeOption$.get())
+        selectedFeeOption$.set(options[0]);
+    }, [options]);
+    if (options.length === 0 || !selectedFeeOption$.get()?.token) return null;
+    return /* @__PURE__ */ jsx14(
+      Select,
       {
-        className: "-bottom-5 absolute font-body font-medium text-xs",
-        color: "negative",
-        children: "Insufficient balance"
+        items: feeOptions,
+        name: "fee-option",
+        options: feeOptions.map((option) => ({
+          label: option.content,
+          value: option.value
+        })),
+        onValueChange: (value) => {
+          const selectedOption = options.find(
+            (option) => option.token.contractAddress === value
+          );
+          selectedFeeOption$.set(selectedOption);
+        },
+        defaultValue: options[0].token.contractAddress ?? void 0
       }
-    )
-  ] });
+    );
+  }
+);
+function FeeOptionSelectItem({
+  value,
+  option
+}) {
+  return {
+    value,
+    content: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx14(
+        Image,
+        {
+          className: "h-3 w-3",
+          src: option.token.logoURL,
+          alt: option.token.symbol
+        }
+      ),
+      /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx14(Text7, { className: "font-body text-sm", color: "text100", children: "Fee" }),
+        /* @__PURE__ */ jsxs8(
+          Text7,
+          {
+            className: "font-body text-sm",
+            color: "text50",
+            fontWeight: "semibold",
+            children: [
+              "(in ",
+              option.token.symbol,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx14(Text7, { className: "font-body text-sm", color: "text100", children: ":" })
+      ] }),
+      /* @__PURE__ */ jsx14(Text7, { className: "font-body text-sm", children: formatUnits2(BigInt(option.value), option.token.decimals || 0) })
+    ] })
+  };
 }
+var WaasFeeOptionsSelect_default = WaasFeeOptionsSelect;
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/ActionButtons.tsx
+import { Button as Button4, Skeleton as Skeleton3, Spinner as Spinner2 } from "@0xsequence/design-system";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var ActionButtons = ({
+  onCancel,
+  onConfirm,
+  disabled,
+  loading,
+  confirmed,
+  tokenSymbol
+}) => /* @__PURE__ */ jsxs9("div", { className: "mt-4 flex w-full items-center justify-end gap-2", children: [
+  /* @__PURE__ */ jsx15(
+    Button4,
+    {
+      pending: loading,
+      onClick: onCancel,
+      label: /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: "Cancel" }),
+      variant: "ghost",
+      shape: "square",
+      size: "md"
+    }
+  ),
+  /* @__PURE__ */ jsx15(
+    Button4,
+    {
+      disabled,
+      pending: loading || confirmed,
+      onClick: onConfirm,
+      label: /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: !confirmed ? tokenSymbol ? `Continue with ${tokenSymbol}` : /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        "Continue with",
+        /* @__PURE__ */ jsx15(Skeleton3, { className: "h-[20px] w-6 animate-shimmer" })
+      ] }) : /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx15(Spinner2, { size: "sm" }),
+        "Confirming"
+      ] }) }),
+      variant: "primary",
+      shape: "square",
+      size: "md"
+    }
+  )
+] });
+var ActionButtons_default = ActionButtons;
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/BalanceIndicator.tsx
+import { Text as Text8, WarningIcon } from "@0xsequence/design-system";
+import { CheckmarkIcon } from "@0xsequence/design-system";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var BalanceIndicator = ({
+  insufficientBalance,
+  currencyBalance,
+  selectedFeeOption
+}) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+  insufficientBalance ? /* @__PURE__ */ jsx16(WarningIcon, { className: "text-negative", size: "xs" }) : /* @__PURE__ */ jsx16(CheckmarkIcon, { className: "text-positive", size: "xs" }),
+  /* @__PURE__ */ jsxs10(
+    Text8,
+    {
+      className: "font-body font-medium text-xs",
+      color: insufficientBalance ? "negative" : "text100",
+      children: [
+        "You have ",
+        currencyBalance?.formatted || "0",
+        " ",
+        selectedFeeOption?.token.symbol
+      ]
+    }
+  )
+] });
+var BalanceIndicator_default = BalanceIndicator;
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/store.ts
+import { observable } from "@legendapp/state";
+var initialState = {
+  selectedFeeOption: void 0,
+  pendingFeeOptionConfirmation: void 0,
+  isVisible: false,
+  hide: () => {
+    selectWaasFeeOptions$.isVisible.set(false);
+    selectWaasFeeOptions$.selectedFeeOption.set(void 0);
+    selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(void 0);
+  }
+};
+var selectWaasFeeOptions$ = observable(initialState);
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx
+import { useWaasFeeOptions } from "@0xsequence/connect";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { zeroAddress as zeroAddress3 } from "viem";
+import { useAccount as useAccount2 } from "wagmi";
+var useWaasFeeOptionManager = (chainId) => {
+  const { address: userAddress } = useAccount2();
+  const selectedFeeOption$ = selectWaasFeeOptions$.selectedFeeOption;
+  const [pendingFeeOptionConfirmation, confirmPendingFeeOption] = useWaasFeeOptions();
+  const [feeOptionsConfirmed, setFeeOptionsConfirmed] = useState6(false);
+  const selectedFeeOption = selectedFeeOption$.get();
+  const { data: currencyBalance, isLoading: currencyBalanceLoading } = useCurrencyBalance({
+    chainId,
+    currencyAddress: selectedFeeOption?.token.contractAddress || zeroAddress3,
+    userAddress
+  });
+  useEffect5(() => {
+    if (!selectedFeeOption && pendingFeeOptionConfirmation) {
+      selectedFeeOption$.set(
+        pendingFeeOptionConfirmation.options[0]
+      );
+    }
+  }, [pendingFeeOptionConfirmation]);
+  const insufficientBalance = (() => {
+    if (!selectedFeeOption?.value || !selectedFeeOption.token.decimals) {
+      return false;
+    }
+    if (!currencyBalance?.value && currencyBalance?.value !== 0n) {
+      return true;
+    }
+    try {
+      const feeValue = BigInt(selectedFeeOption.value);
+      return currencyBalance.value === 0n || currencyBalance.value < feeValue;
+    } catch {
+      return true;
+    }
+  })();
+  const handleConfirmFeeOption = () => {
+    if (!selectedFeeOption?.token || !pendingFeeOptionConfirmation?.id) return;
+    confirmPendingFeeOption(
+      pendingFeeOptionConfirmation?.id,
+      selectedFeeOption.token.contractAddress || zeroAddress3
+    );
+    setFeeOptionsConfirmed(true);
+  };
+  return {
+    selectedFeeOption$,
+    selectedFeeOption,
+    pendingFeeOptionConfirmation,
+    currencyBalance,
+    currencyBalanceLoading,
+    insufficientBalance,
+    feeOptionsConfirmed,
+    handleConfirmFeeOption
+  };
+};
+var useWaasFeeOptionManager_default = useWaasFeeOptionManager;
+
+// src/react/ui/modals/_internal/components/selectWaasFeeOptions/index.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var SelectWaasFeeOptions = observer5(
+  ({
+    chainId,
+    onCancel,
+    titleOnConfirm,
+    className
+  }) => {
+    const network = getNetwork(chainId);
+    const isTestnet = network.type === NetworkType.TESTNET;
+    const {
+      selectedFeeOption$,
+      selectedFeeOption,
+      pendingFeeOptionConfirmation,
+      currencyBalance,
+      currencyBalanceLoading,
+      insufficientBalance,
+      feeOptionsConfirmed,
+      handleConfirmFeeOption
+    } = useWaasFeeOptionManager_default(chainId);
+    console.log("pendingFeeOptionConfirmation", pendingFeeOptionConfirmation);
+    const handleCancelFeeOption = () => {
+      selectWaasFeeOptions$.hide();
+      onCancel?.();
+    };
+    if (!selectWaasFeeOptions$.isVisible.get() || isTestnet || !selectedFeeOption) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-0 backdrop-blur-md",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx17(Divider, { className: "mt-0 mb-4" }),
+          /* @__PURE__ */ jsx17(Text9, { className: "mb-2 font-body text-large", fontWeight: "bold", children: feeOptionsConfirmed ? titleOnConfirm : "Select a fee option" }),
+          !feeOptionsConfirmed && !pendingFeeOptionConfirmation && /* @__PURE__ */ jsx17(Skeleton4, { className: "h-[52px] w-full animate-shimmer rounded-xl" }),
+          (feeOptionsConfirmed || pendingFeeOptionConfirmation) && /* @__PURE__ */ jsx17(
+            "div",
+            {
+              className: cn(
+                "[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full",
+                feeOptionsConfirmed && "pointer-events-none opacity-70"
+              ),
+              children: /* @__PURE__ */ jsx17(
+                WaasFeeOptionsSelect_default,
+                {
+                  options: pendingFeeOptionConfirmation?.options || [
+                    selectedFeeOption
+                  ],
+                  selectedFeeOption$
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-start justify-between", children: [
+            !feeOptionsConfirmed && (!pendingFeeOptionConfirmation || currencyBalanceLoading) && /* @__PURE__ */ jsx17(Skeleton4, { className: "h-[20px] w-2/3 animate-shimmer rounded-xl" }),
+            (feeOptionsConfirmed || pendingFeeOptionConfirmation && !currencyBalanceLoading) && /* @__PURE__ */ jsx17(
+              BalanceIndicator_default,
+              {
+                insufficientBalance,
+                currencyBalance,
+                selectedFeeOption
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx17(
+            ActionButtons_default,
+            {
+              onCancel: handleCancelFeeOption,
+              onConfirm: handleConfirmFeeOption,
+              disabled: !selectedFeeOption?.token || insufficientBalance || currencyBalanceLoading,
+              loading: currencyBalanceLoading,
+              confirmed: feeOptionsConfirmed,
+              tokenSymbol: selectedFeeOption?.token.symbol
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var selectWaasFeeOptions_default = SelectWaasFeeOptions;
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Image, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
+import { Image as Image2, Skeleton as Skeleton5, Text as Text10 } from "@0xsequence/design-system";
 
 // src/react/ui/images/chess-tile.png
 var chess_tile_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACuCAYAAABAzl3QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgB7dyxbUMxEAXBs6FEjagv91/AD+keeNFCMw1csmBEvJ/P53Nm4Xme2Xi/37Ph/nfeP+f8/Q5EiZcs8ZIlXrLES5Z4yRIvWeIlS7xkiZcs8ZIlXrLES5Z4yRIvWS//Ud2v3vfykiVessRLlnjJEi9Z4iVLvGSJlyzxkiVessRLlnjJEi9Z4iVLvGS9/Ed1v3j/nOPlpUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMmyz+v+bNjnhQviJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWfV73Z8M+L1wQL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y7PO6Pxv2eeGCeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSZZ/X/dmwzwsXxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPu87s+GfV64IF6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZNnndX827PPCBfGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJcs+r/uzYZ8XLoiXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1n2ed2fDfu8cEG8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y/gF97MkwfJRH7QAAAABJRU5ErkJggg==";
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -1255,17 +1730,17 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs6("div", { className: "flex w-full items-center gap-3", children: [
-      /* @__PURE__ */ jsx13(Skeleton3, { className: "h-9 w-9 rounded-sm" }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex grow flex-col gap-1", children: [
-        /* @__PURE__ */ jsx13(Skeleton3, { className: "h-3 w-1/3" }),
-        /* @__PURE__ */ jsx13(Skeleton3, { className: "h-3 w-1/2" })
+    return /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-3", children: [
+      /* @__PURE__ */ jsx18(Skeleton5, { className: "h-9 w-9 rounded-sm" }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex grow flex-col gap-1", children: [
+        /* @__PURE__ */ jsx18(Skeleton5, { className: "h-3 w-1/3" }),
+        /* @__PURE__ */ jsx18(Skeleton5, { className: "h-3 w-1/2" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "flex w-full items-center", children: [
-    /* @__PURE__ */ jsx13(
-      Image,
+  return /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center", children: [
+    /* @__PURE__ */ jsx18(
+      Image2,
       {
         className: "h-9 w-9 rounded-sm",
         src: collectable?.image || chess_tile_default,
@@ -1273,10 +1748,10 @@ function TokenPreview({
         style: { objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ jsxs6("div", { className: "ml-3 flex flex-col", children: [
-      /* @__PURE__ */ jsx13(Text6, { className: "font-body font-medium text-xs", color: "text80", children: collectionName }),
-      /* @__PURE__ */ jsx13(
-        Text6,
+    /* @__PURE__ */ jsxs12("div", { className: "ml-3 flex flex-col", children: [
+      /* @__PURE__ */ jsx18(Text10, { className: "font-body font-medium text-xs", color: "text80", children: collectionName }),
+      /* @__PURE__ */ jsx18(
+        Text10,
         {
           className: "font-body font-bold text-xs",
           fontWeight: "bold",
@@ -1289,9 +1764,9 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Image as Image2, Skeleton as Skeleton4, Text as Text7 } from "@0xsequence/design-system";
-import { formatUnits } from "viem";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Image as Image3, Skeleton as Skeleton6, Text as Text11 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits3 } from "viem";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function TransactionDetails({
   collectibleId,
   collectionAddress,
@@ -1311,18 +1786,18 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyLoading;
-  let formattedAmount = price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
   if (royalty !== null && formattedAmount && price) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royalty.percentage) / 100).toFixed(price.currency.decimals);
   }
   if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between", children: [
-    /* @__PURE__ */ jsx14(Text7, { className: "font-body font-medium text-xs", color: "text50", children: "Total earnings" }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx14(Image2, { className: "h-3 w-3", src: currencyImageUrl }),
-      priceLoading ? /* @__PURE__ */ jsx14(Skeleton4, { className: "h-4 w-24 animate-shimmer" }) : /* @__PURE__ */ jsxs7(Text7, { className: "font-body font-medium text-xs", color: "text100", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center justify-between", children: [
+    /* @__PURE__ */ jsx19(Text11, { className: "font-body font-medium text-xs", color: "text50", children: "Total earnings" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx19(Image3, { className: "h-3 w-3", src: currencyImageUrl }),
+      priceLoading ? /* @__PURE__ */ jsx19(Skeleton6, { className: "h-4 w-24 animate-shimmer" }) : /* @__PURE__ */ jsxs13(Text11, { className: "font-body font-medium text-xs", color: "text100", children: [
         showPlaceholderPrice ? "0" : formattedAmount,
         " ",
         price.currency.symbol
@@ -1331,17 +1806,50 @@ function TransactionDetails({
   ] });
 }
 
+// src/react/ui/modals/_internal/hooks/useSelectWaasFeeOptions.ts
+import { getNetwork as getNetwork2 } from "@0xsequence/connect";
+import { NetworkType as NetworkType2 } from "@0xsequence/network";
+var useSelectWaasFeeOptions = ({
+  chainId,
+  isProcessing,
+  feeOptionsVisible,
+  selectedFeeOption
+}) => {
+  const { wallet } = useWallet();
+  const network = chainId ? getNetwork2(Number(chainId)) : void 0;
+  const isTestnet = network?.type === NetworkType2.TESTNET;
+  const isWaaS = wallet?.isWaaS;
+  const isProcessingWithWaaS = isProcessing && isWaaS;
+  const shouldHideActionButton = !isTestnet && isProcessingWithWaaS && feeOptionsVisible === true && !!selectedFeeOption;
+  const waasFeeOptionsShown = wallet?.isWaaS && isProcessing && feeOptionsVisible;
+  const getActionLabel = (defaultLabel, loadingLabel = "Loading fee options") => {
+    if (isProcessing) {
+      return isWaaS && !isTestnet ? loadingLabel : defaultLabel;
+    }
+    return defaultLabel;
+  };
+  return {
+    isWaaS,
+    isTestnet,
+    feeOptionsVisible,
+    shouldHideActionButton,
+    waasFeeOptionsShown,
+    isProcessingWithWaaS,
+    getActionLabel
+  };
+};
+
 // src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
-import { skipToken as skipToken2, useQuery as useQuery2 } from "@tanstack/react-query";
-import { useAccount as useAccount2 } from "wagmi";
+import { skipToken as skipToken4, useQuery as useQuery4 } from "@tanstack/react-query";
+import { useAccount as useAccount3 } from "wagmi";
 var ONE_DAY_IN_SECONDS = 60 * 60 * 24;
 var useGetTokenApprovalData = (params) => {
   const config = useConfig();
   const { wallet } = useWallet();
-  const { address } = useAccount2();
+  const { address } = useAccount3();
   const marketplaceClient = getMarketplaceClient(params.chainId, config);
   const listing = {
     tokenId: params.tokenId,
@@ -1351,7 +1859,7 @@ var useGetTokenApprovalData = (params) => {
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS)
   };
   const isEnabled = wallet && address && (params.query?.enabled ?? true) && !!params.currencyAddress;
-  const { data, isLoading, isSuccess } = useQuery2({
+  const { data, isLoading, isSuccess } = useQuery4({
     queryKey: ["token-approval-data", params, address],
     queryFn: isEnabled ? async () => {
       const args = {
@@ -1374,7 +1882,7 @@ var useGetTokenApprovalData = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken2
+    } : skipToken4
   });
   return {
     data,
@@ -1384,16 +1892,16 @@ var useGetTokenApprovalData = (params) => {
 };
 
 // src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits4 } from "viem";
+import { formatUnits as formatUnits6 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { Modal, Skeleton as Skeleton6, Text as Text11 } from "@0xsequence/design-system";
+import { Modal, Skeleton as Skeleton8, Text as Text15 } from "@0xsequence/design-system";
 import { use$ as use$3 } from "@legendapp/state/react";
 
 // src/react/ui/modals/_internal/components/transaction-footer/index.tsx
-import { CheckmarkIcon, Spinner as Spinner2, Text as Text8 } from "@0xsequence/design-system";
+import { CheckmarkIcon as CheckmarkIcon2, Spinner as Spinner3, Text as Text12 } from "@0xsequence/design-system";
 import { networks } from "@0xsequence/network";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function TransactionFooter({
   transactionHash,
   orderId,
@@ -1403,35 +1911,32 @@ function TransactionFooter({
   isTimeout,
   chainId
 }) {
-  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx15(PositiveCircle, {}) || isConfirming && /* @__PURE__ */ jsx15(Spinner2, { size: "md" });
+  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx20(PositiveCircle, {}) || isConfirming && /* @__PURE__ */ jsx20(Spinner3, { size: "md" });
   const title = (isConfirmed || orderId) && "Transaction complete" || isConfirming && "Processing transaction" || isFailed && "Transaction failed" || isTimeout && "Transaction took longer than expected";
   const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
-  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
     icon,
-    /* @__PURE__ */ jsx15(
-      Text8,
+    /* @__PURE__ */ jsx20(
+      Text12,
       {
-        className: "ml-2 font-body text-base",
+        className: "ml-2 grow font-body text-sm",
         color: "text50",
         fontWeight: "medium",
         children: title
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx20(
       "a",
       {
-        className: "ml-2 grow text-right no-underline",
+        className: "ml-2 text-right no-underline",
         href: transactionUrl,
         target: "_blank",
         rel: "noopener noreferrer",
-        children: /* @__PURE__ */ jsx15(
-          Text8,
+        children: /* @__PURE__ */ jsx20(
+          Text12,
           {
-            className: "text-right font-body text-base",
+            className: "text-right font-body text-sm text-violet-400",
             fontWeight: "medium",
-            style: {
-              color: "hsla(247, 100%, 75%, 1)"
-            },
             children: transactionHash && truncateMiddle(transactionHash, 4, 4)
           }
         )
@@ -1439,27 +1944,27 @@ function TransactionFooter({
     )
   ] });
 }
-var PositiveCircle = () => /* @__PURE__ */ jsx15("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#35a554]", children: /* @__PURE__ */ jsx15(CheckmarkIcon, { size: "xs", color: "white" }) });
+var PositiveCircle = () => /* @__PURE__ */ jsx20("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#35a554]", children: /* @__PURE__ */ jsx20(CheckmarkIcon2, { size: "xs", color: "white" }) });
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { Image as Image3, NetworkImage, Skeleton as Skeleton5, Text as Text10 } from "@0xsequence/design-system";
-import { observer as observer5 } from "@legendapp/state/react";
-import { formatUnits as formatUnits2 } from "viem";
+import { Image as Image4, NetworkImage, Skeleton as Skeleton7, Text as Text14 } from "@0xsequence/design-system";
+import { observer as observer6 } from "@legendapp/state/react";
+import { formatUnits as formatUnits4 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Text as Text9 } from "@0xsequence/design-system";
+import { Text as Text13 } from "@0xsequence/design-system";
 import { formatDistanceToNow } from "date-fns";
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function TimeAgo({ date }) {
-  const [timeAgo, setTimeAgo] = useState5("");
-  useEffect4(() => {
+  const [timeAgo, setTimeAgo] = useState7("");
+  useEffect6(() => {
     const interval = setInterval(() => {
       setTimeAgo(formatDistanceToNow(date));
     }, 1e3);
     return () => clearInterval(interval);
   }, [date]);
-  return /* @__PURE__ */ jsx16("div", { className: "flex grow items-center justify-end", children: /* @__PURE__ */ jsx16(Text9, { className: "text-sm", color: "text50", children: timeAgo }) });
+  return /* @__PURE__ */ jsx21("div", { className: "flex grow items-center justify-end", children: /* @__PURE__ */ jsx21(Text13, { className: "text-sm", color: "text50", children: timeAgo }) });
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
@@ -1503,7 +2008,7 @@ var initialState2 = {
     status: "PENDING",
     price: void 0,
     collectionAddress: "",
-    chainId: "",
+    chainId: 0,
     collectibleId: "",
     type: void 0,
     callbacks: void 0,
@@ -1558,8 +2063,8 @@ function useTransactionPreviewTitle(orderId, status, type) {
 }
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var TransactionPreview = observer5(
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var TransactionPreview = observer6(
   ({
     orderId,
     price,
@@ -1586,19 +2091,19 @@ var TransactionPreview = observer5(
     const collectibleImage = collectible?.image;
     const collectibleName = collectible?.name;
     const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits2(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
+    const priceFormatted = price ? formatUnits4(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
-      return /* @__PURE__ */ jsx17("div", { className: "w-full rounded-xl", style: { height: 83 }, children: /* @__PURE__ */ jsx17(Skeleton5, { style: { width: "100%", height: "100%" } }) });
+      return /* @__PURE__ */ jsx22("div", { className: "w-full rounded-xl", style: { height: 83 }, children: /* @__PURE__ */ jsx22(Skeleton7, { style: { width: "100%", height: "100%" } }) });
     }
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "rounded-xl bg-background-secondary p-3",
         "data-testid": "transaction-preview",
         children: [
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx17(
-              Text10,
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx22(
+              Text14,
               {
                 className: "mr-1 font-body text-xs",
                 color: "text80",
@@ -1607,12 +2112,12 @@ var TransactionPreview = observer5(
                 children: title
               }
             ),
-            /* @__PURE__ */ jsx17(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-            isConfirming && /* @__PURE__ */ jsx17(TimeAgo, { date: /* @__PURE__ */ new Date() })
+            /* @__PURE__ */ jsx22(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+            isConfirming && /* @__PURE__ */ jsx22(TimeAgo, { date: /* @__PURE__ */ new Date() })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex items-center", children: [
-            /* @__PURE__ */ jsx17(
-              Image3,
+          /* @__PURE__ */ jsxs15("div", { className: "mt-2 flex items-center", children: [
+            /* @__PURE__ */ jsx22(
+              Image4,
               {
                 className: "mr-3 h-9 w-9 rounded-sm",
                 src: collectibleImage || chess_tile_default,
@@ -1621,9 +2126,9 @@ var TransactionPreview = observer5(
                 "data-testid": "transaction-preview-image"
               }
             ),
-            /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start gap-0.5", children: [
-              /* @__PURE__ */ jsx17(
-                Text10,
+            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-start gap-0.5", children: [
+              /* @__PURE__ */ jsx22(
+                Text14,
                 {
                   className: "font-body text-xs",
                   color: "text80",
@@ -1632,8 +2137,8 @@ var TransactionPreview = observer5(
                   children: collectionName
                 }
               ),
-              /* @__PURE__ */ jsx17(
-                Text10,
+              /* @__PURE__ */ jsx22(
+                Text14,
                 {
                   className: "font-body text-xs",
                   color: "text100",
@@ -1643,15 +2148,15 @@ var TransactionPreview = observer5(
                 }
               )
             ] }),
-            price && /* @__PURE__ */ jsxs9(
+            price && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: "flex grow items-center justify-end gap-1",
                 "data-testid": "transaction-preview-price",
                 children: [
-                  /* @__PURE__ */ jsx17(Image3, { className: "h-3 w-3", src: currencyImageUrl }),
-                  /* @__PURE__ */ jsxs9(
-                    Text10,
+                  /* @__PURE__ */ jsx22(Image4, { className: "h-3 w-3", src: currencyImageUrl }),
+                  /* @__PURE__ */ jsxs15(
+                    Text14,
                     {
                       className: "font-body text-xs",
                       color: "text100",
@@ -1676,19 +2181,19 @@ var transactionPreview_default = TransactionPreview;
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/hooks/useTransactionStatus.ts
 import { TransactionStatus as IndexerTransactionStatus } from "@0xsequence/indexer";
-import { skipToken as skipToken3, useQuery as useQuery3 } from "@tanstack/react-query";
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { skipToken as skipToken5, useQuery as useQuery5 } from "@tanstack/react-query";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 import { WaitForTransactionReceiptTimeoutError } from "viem";
 var useTransactionStatus = (hash, chainId, callbacks) => {
   const { wallet } = useWallet();
-  const [status, setStatus] = useState6(
+  const [status, setStatus] = useState8(
     hash ? "PENDING" : "SUCCESS"
   );
-  const { data: confirmationResult } = useQuery3({
+  const { data: confirmationResult } = useQuery5({
     queryKey: ["transaction-confirmation", hash, chainId, !!wallet],
-    queryFn: !!wallet && hash ? async () => await wallet.handleConfirmTransactionStep(hash, Number(chainId)) : skipToken3
+    queryFn: !!wallet && hash ? async () => await wallet.handleConfirmTransactionStep(hash, Number(chainId)) : skipToken5
   });
-  useEffect5(() => {
+  useEffect7(() => {
     if (!hash) {
       setStatus("SUCCESS");
       return;
@@ -1717,7 +2222,7 @@ var useTransactionStatus = (hash, chainId, callbacks) => {
 var useTransactionStatus_default = useTransactionStatus;
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
-import { formatUnits as formatUnits3 } from "viem";
+import { formatUnits as formatUnits5 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
 function getFormattedType(transactionType, verb = false) {
@@ -1748,7 +2253,7 @@ function getTransactionStatusModalMessage({
   price
 }) {
   const hideCollectibleName = transactionType === "CANCEL";
-  const formattedPrice = price ? formatUnits3(BigInt(price.amountRaw), price.currency.decimals) : "";
+  const formattedPrice = price ? formatUnits5(BigInt(price.amountRaw), price.currency.decimals) : "";
   if (orderId) {
     return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It's been confirmed on the blockchain!`;
   }
@@ -1796,7 +2301,7 @@ function getTransactionStatusModalTitle({
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var invalidateQueries = async (queriesToInvalidate) => {
   const queryClient = getQueryClient();
   if (!queriesToInvalidate) {
@@ -1817,7 +2322,7 @@ var useTransactionStatusModal = () => {
 };
 var TransactionStatusModal = () => {
   const isOpen = use$3(transactionStatusModal$.isOpen);
-  return isOpen ? /* @__PURE__ */ jsx18(TransactionStatusModalContent, {}) : null;
+  return isOpen ? /* @__PURE__ */ jsx23(TransactionStatusModalContent, {}) : null;
 };
 function TransactionStatusModalContent() {
   const {
@@ -1851,9 +2356,12 @@ function TransactionStatusModalContent() {
   });
   const handleClose = () => {
     invalidateQueries(queriesToInvalidate);
+    if (selectWaasFeeOptions$.isVisible.get()) {
+      selectWaasFeeOptions$.hide();
+    }
     transactionStatusModal$.close();
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx23(
     Modal,
     {
       isDismissible: true,
@@ -1861,9 +2369,9 @@ function TransactionStatusModalContent() {
       size: "sm",
       overlayProps: MODAL_OVERLAY_PROPS,
       "data-testid": "transaction-status-modal",
-      children: /* @__PURE__ */ jsxs10("div", { className: "grid flex-col gap-6 p-7", children: [
-        title ? /* @__PURE__ */ jsx18(
-          Text11,
+      children: /* @__PURE__ */ jsxs16("div", { className: "grid flex-col gap-6 p-7", children: [
+        title ? /* @__PURE__ */ jsx23(
+          Text15,
           {
             className: "font-body text-xl",
             fontWeight: "bold",
@@ -1871,29 +2379,29 @@ function TransactionStatusModalContent() {
             "data-testid": "transaction-status-title",
             children: title
           }
-        ) : /* @__PURE__ */ jsx18(
-          Skeleton6,
+        ) : /* @__PURE__ */ jsx23(
+          Skeleton8,
           {
             className: "h-6 w-16",
             "data-testid": "transaction-modal-title-skeleton"
           }
         ),
-        message ? /* @__PURE__ */ jsx18(
-          Text11,
+        message ? /* @__PURE__ */ jsx23(
+          Text15,
           {
             className: "font-body text-sm",
             color: "text80",
             "data-testid": "transaction-status-message",
             children: message
           }
-        ) : /* @__PURE__ */ jsx18(
-          Skeleton6,
+        ) : /* @__PURE__ */ jsx23(
+          Skeleton8,
           {
             className: "h-4 w-20",
             "data-testid": "transaction-modal-content-skeleton"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx23(
           transactionPreview_default,
           {
             orderId,
@@ -1909,7 +2417,7 @@ function TransactionStatusModalContent() {
             isTimeout: transactionStatus === "TIMEOUT"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx23(
           TransactionFooter,
           {
             transactionHash: hash,
@@ -1942,7 +2450,7 @@ var useTransactionSteps = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const { data: currencies } = useCurrencies({
-    chainId: Number(chainId)
+    chainId
   });
   const currency = currencies?.find(
     (currency2) => currency2.contractAddress === listingInput.listing.currencyAddress
@@ -1997,10 +2505,12 @@ var useTransactionSteps = ({
       steps$.approval.isExecuting.set(false);
     }
   };
-  const createListing = async () => {
+  const createListing = async ({
+    isTransactionExecuting
+  }) => {
     if (!wallet) return;
     try {
-      steps$.transaction.isExecuting.set(true);
+      steps$.transaction.isExecuting.set(isTransactionExecuting);
       const steps3 = await getListingSteps();
       const transactionStep = steps3?.find(
         (step) => step.id === "createListing" /* createListing */
@@ -2057,7 +2567,7 @@ var useTransactionSteps = ({
         )?.decimals || 0;
         const currencyValueRaw = Number(listingInput.listing.pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits4(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackCreateListing({
           props: {
@@ -2065,7 +2575,7 @@ var useTransactionSteps = ({
             collectionAddress,
             currencyAddress: listingInput.listing.currencyAddress,
             currencySymbol: "",
-            chainId,
+            chainId: chainId.toString(),
             txnHash: hash || ""
           },
           nums: {
@@ -2139,7 +2649,7 @@ var useCreateListing = ({
       enabled: !marketplaceIsLoading
     }
   });
-  useEffect6(() => {
+  useEffect8(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2186,7 +2696,7 @@ var steps = {
 var initialState3 = {
   isOpen: false,
   collectionAddress: "",
-  chainId: "",
+  chainId: 0,
   collectibleId: "",
   orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
   collectionName: "",
@@ -2196,7 +2706,8 @@ var initialState3 = {
   invalidQuantity: false,
   expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
   callbacks: void 0,
-  steps: { ...steps }
+  steps: { ...steps },
+  listingIsBeingProcessed: false
 };
 var actions = {
   open: (args) => {
@@ -2212,6 +2723,9 @@ var actions = {
     createListingModal$.set({ ...initialState3, ...actions });
     createListingModal$.listingPrice.set({ ...listingPrice });
     createListingModal$.steps.set({ ...steps });
+    createListingModal$.listingIsBeingProcessed.set(false);
+    createListingModal$.steps.approval.isExecuting.set(false);
+    createListingModal$.steps.transaction.isExecuting.set(false);
   }
 };
 var createListingModal$ = observable3({
@@ -2220,11 +2734,11 @@ var createListingModal$ = observable3({
 });
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var CreateListingModal = () => {
-  return /* @__PURE__ */ jsx19(Show, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx19(Modal2, {}) });
+  return /* @__PURE__ */ jsx24(Show, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx24(Modal2, {}) });
 };
-var Modal2 = observer6(() => {
+var Modal2 = observer7(() => {
   const state = createListingModal$.get();
   const {
     collectionAddress,
@@ -2232,9 +2746,22 @@ var Modal2 = observer6(() => {
     listingPrice: listingPrice2,
     collectibleId,
     orderbookKind,
-    callbacks
+    callbacks,
+    listingIsBeingProcessed
   } = state;
   const steps$ = createListingModal$.steps;
+  const { wallet } = useWallet();
+  const {
+    shouldHideActionButton: shouldHideListButton,
+    waasFeeOptionsShown,
+    getActionLabel,
+    isTestnet
+  } = useSelectWaasFeeOptions({
+    chainId,
+    isProcessing: listingIsBeingProcessed,
+    feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+    selectedFeeOption: selectWaasFeeOptions$.selectedFeeOption.get()
+  });
   const {
     data: collectible,
     isLoading: collectableIsLoading,
@@ -2262,9 +2789,9 @@ var Modal2 = observer6(() => {
     collectionAddress
   });
   const modalLoading = collectableIsLoading || collectionIsLoading || currenciesLoading;
-  const { address } = useAccount3();
+  const { address } = useAccount4();
   const { data: balance } = useBalanceOfCollectible({
-    chainId: Number(chainId),
+    chainId,
     collectionAddress,
     collectableId: collectibleId,
     userAddress: address ?? void 0
@@ -2274,7 +2801,7 @@ var Modal2 = observer6(() => {
       contractType: collection?.type,
       listing: {
         tokenId: collectibleId,
-        quantity: parseUnits3(
+        quantity: parseUnits2(
           createListingModal$.quantity.get(),
           collectible?.decimals || 0
         ).toString(),
@@ -2291,7 +2818,7 @@ var Modal2 = observer6(() => {
     steps$
   });
   if (collectableIsError || collectionIsError || currenciesIsError) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx24(
       ErrorModal,
       {
         isOpen: createListingModal$.isOpen.get(),
@@ -2302,7 +2829,7 @@ var Modal2 = observer6(() => {
     );
   }
   if (!modalLoading && (!currencies || currencies.length === 0)) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx24(
       ErrorModal,
       {
         isOpen: createListingModal$.isOpen.get(),
@@ -2313,6 +2840,23 @@ var Modal2 = observer6(() => {
       }
     );
   }
+  const handleCreateListing = async () => {
+    createListingModal$.listingIsBeingProcessed.set(true);
+    try {
+      if (wallet?.isWaaS) {
+        selectWaasFeeOptions$.isVisible.set(true);
+      }
+      await createListing({
+        isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false
+      });
+    } catch (error) {
+      console.error("Create listing failed:", error);
+    } finally {
+      createListingModal$.listingIsBeingProcessed.set(false);
+      steps$.transaction.isExecuting.set(false);
+    }
+  };
+  const listCtaLabel = getActionLabel("List item for sale");
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -2323,25 +2867,29 @@ var Modal2 = observer6(() => {
       disabled: createListingModal$.invalidQuantity.get() || listingPrice2.amountRaw === "0" || steps$?.approval.isExecuting.get() || tokenApprovalIsLoading || isLoading
     },
     {
-      label: "List item for sale",
-      onClick: () => createListing(),
-      pending: steps$?.transaction.isExecuting.get(),
+      label: listCtaLabel,
+      onClick: handleCreateListing,
+      pending: steps$?.transaction.isExecuting.get() || createListingModal$.listingIsBeingProcessed.get(),
       testid: "create-listing-submit-button",
-      disabled: steps$.approval.exist.get() || tokenApprovalIsLoading || listingPrice2.amountRaw === "0" || createListingModal$.invalidQuantity.get() || isLoading
+      disabled: steps$.approval.exist.get() || tokenApprovalIsLoading || listingPrice2.amountRaw === "0" || createListingModal$.invalidQuantity.get() || isLoading || listingIsBeingProcessed
     }
   ];
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs17(
     ActionModal,
     {
       isOpen: createListingModal$.isOpen.get(),
       chainId: Number(chainId),
-      onClose: () => createListingModal$.close(),
+      onClose: () => {
+        createListingModal$.close();
+        selectWaasFeeOptions$.hide();
+      },
       title: "List item for sale",
       ctas,
       modalLoading,
       spinnerContainerClassname: "h-[220px]",
+      hideCtas: shouldHideListButton,
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx24(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -2350,16 +2898,17 @@ var Modal2 = observer6(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-1", children: [
-          /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-1", children: [
+          /* @__PURE__ */ jsx24(
             PriceInput,
             {
               chainId,
               collectionAddress,
-              $price: createListingModal$.listingPrice
+              $price: createListingModal$.listingPrice,
+              disabled: shouldHideListButton
             }
           ),
-          listingPrice2.amountRaw !== "0" && /* @__PURE__ */ jsx19(
+          listingPrice2.amountRaw !== "0" && /* @__PURE__ */ jsx24(
             FloorPriceText,
             {
               tokenId: collectibleId,
@@ -2369,17 +2918,24 @@ var Modal2 = observer6(() => {
             }
           )
         ] }),
-        collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx19(
+        collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx24(
           quantityInput_default,
           {
             $quantity: createListingModal$.quantity,
             $invalidQuantity: createListingModal$.invalidQuantity,
             decimals: collectible?.decimals || 0,
-            maxQuantity: balance?.balance
+            maxQuantity: balance?.balance,
+            disabled: shouldHideListButton
           }
         ),
-        /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: createListingModal$.expiry }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx24(
+          expirationDateSelect_default,
+          {
+            $date: createListingModal$.expiry,
+            disabled: shouldHideListButton
+          }
+        ),
+        /* @__PURE__ */ jsx24(
           TransactionDetails,
           {
             collectibleId,
@@ -2389,6 +2945,17 @@ var Modal2 = observer6(() => {
             currencyImageUrl: listingPrice2.currency.imageUrl,
             includeMarketplaceFee: false
           }
+        ),
+        waasFeeOptionsShown && /* @__PURE__ */ jsx24(
+          selectWaasFeeOptions_default,
+          {
+            chainId: Number(chainId),
+            onCancel: () => {
+              createListingModal$.listingIsBeingProcessed.set(false);
+              steps$.transaction.isExecuting.set(false);
+            },
+            titleOnConfirm: "Processing listing..."
+          }
         )
       ]
     }
@@ -2396,15 +2963,25 @@ var Modal2 = observer6(() => {
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show as Show2, observer as observer7 } from "@legendapp/state/react";
-import { useState as useState7 } from "react";
-import { parseUnits as parseUnits4 } from "viem";
+import { getNetwork as getNetwork3 } from "@0xsequence/connect";
+import { NetworkType as NetworkType3 } from "@0xsequence/network";
+import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { useState as useState9 } from "react";
+import { parseUnits as parseUnits3 } from "viem";
+
+// src/react/ui/modals/BuyModal/index.tsx
+var useBuyModal = (callbacks) => {
+  return {
+    show: (args) => buyModalStore.send({ type: "open", props: args, ...callbacks }),
+    close: () => buyModalStore.send({ type: "close" })
+  };
+};
 
 // src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx
-import { skipToken as skipToken4, useQuery as useQuery4 } from "@tanstack/react-query";
+import { skipToken as skipToken6, useQuery as useQuery6 } from "@tanstack/react-query";
 var ONE_DAY_IN_SECONDS2 = 60 * 60 * 24;
 var useGetTokenApprovalData2 = (params) => {
   const config = useConfig();
@@ -2418,7 +2995,7 @@ var useGetTokenApprovalData2 = (params) => {
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS2)
   };
   const isEnabled = wallet && params.query?.enabled !== false;
-  const { data, isLoading, isSuccess } = useQuery4({
+  const { data, isLoading, isSuccess } = useQuery6({
     queryKey: ["token-approval-data", params.currencyAddress],
     queryFn: isEnabled ? async () => {
       const args = {
@@ -2441,7 +3018,7 @@ var useGetTokenApprovalData2 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken4,
+    } : skipToken6,
     enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress
   });
   return {
@@ -2452,7 +3029,7 @@ var useGetTokenApprovalData2 = (params) => {
 };
 
 // src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits5 } from "viem";
+import { formatUnits as formatUnits7 } from "viem";
 var useTransactionSteps2 = ({
   offerInput,
   chainId,
@@ -2520,10 +3097,12 @@ var useTransactionSteps2 = ({
       steps$.approval.isExecuting.set(false);
     }
   };
-  const makeOffer = async () => {
+  const makeOffer = async ({
+    isTransactionExecuting
+  }) => {
     if (!wallet) return;
     try {
-      steps$.transaction.isExecuting.set(true);
+      steps$.transaction.isExecuting.set(isTransactionExecuting);
       const steps3 = await getOfferSteps();
       const transactionStep = steps3?.find(
         (step) => step.id === "createOffer" /* createOffer */
@@ -2578,7 +3157,7 @@ var useTransactionSteps2 = ({
         const currencyDecimal = currency?.decimals || 0;
         const currencyValueRaw = Number(offerInput.offer.pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits5(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits7(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackCreateOffer({
           props: {
@@ -2586,7 +3165,7 @@ var useTransactionSteps2 = ({
             collectionAddress,
             currencyAddress: offerInput.offer.currencyAddress,
             currencySymbol: currency?.symbol || "",
-            chainId,
+            chainId: chainId.toString(),
             txnHash: hash || ""
           },
           nums: {
@@ -2660,7 +3239,7 @@ var useMakeOffer = ({
       enabled: !marketplaceIsLoading
     }
   });
-  useEffect7(() => {
+  useEffect9(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2707,7 +3286,7 @@ var steps2 = {
 var initialState4 = {
   isOpen: false,
   collectionAddress: "",
-  chainId: "",
+  chainId: 0,
   collectibleId: "",
   orderbookKind: void 0,
   callbacks: void 0,
@@ -2717,7 +3296,8 @@ var initialState4 = {
   invalidQuantity: false,
   expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
   collectionType: void 0,
-  steps: { ...steps2 }
+  steps: { ...steps2 },
+  offerIsBeingProcessed: false
 };
 var actions2 = {
   open: (args) => {
@@ -2733,7 +3313,7 @@ var actions2 = {
     makeOfferModal$.set({ ...initialState4, ...actions2 });
     makeOfferModal$.steps.set({ ...steps2 });
     makeOfferModal$.offerPrice.set({ ...offerPrice });
-    makeOfferModal$.steps.set({ ...steps2 });
+    makeOfferModal$.offerIsBeingProcessed.set(false);
   }
 };
 var makeOfferModal$ = observable4({
@@ -2742,11 +3322,11 @@ var makeOfferModal$ = observable4({
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var MakeOfferModal = () => {
-  return /* @__PURE__ */ jsx20(Show2, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx20(Modal3, {}) });
+  return /* @__PURE__ */ jsx25(Show2, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx25(Modal3, {}) });
 };
-var Modal3 = observer7(() => {
+var Modal3 = observer8(() => {
   const state = makeOfferModal$.get();
   const {
     collectionAddress,
@@ -2759,7 +3339,7 @@ var Modal3 = observer7(() => {
     callbacks
   } = state;
   const steps$ = makeOfferModal$.steps;
-  const [insufficientBalance, setInsufficientBalance] = useState7(false);
+  const [insufficientBalance, setInsufficientBalance] = useState9(false);
   const {
     data: collectible,
     isLoading: collectableIsLoading,
@@ -2769,6 +3349,18 @@ var Modal3 = observer7(() => {
     collectionAddress,
     collectibleId
   });
+  const { wallet } = useWallet();
+  const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+  const {
+    shouldHideActionButton: shouldHideOfferButton,
+    waasFeeOptionsShown,
+    getActionLabel
+  } = useSelectWaasFeeOptions({
+    chainId,
+    isProcessing,
+    feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+    selectedFeeOption: selectWaasFeeOptions$.selectedFeeOption.get()
+  });
   const {
     data: collection,
     isLoading: collectionIsLoading,
@@ -2791,7 +3383,7 @@ var Modal3 = observer7(() => {
       contractType: collection?.type,
       offer: {
         tokenId: collectibleId,
-        quantity: parseUnits4(
+        quantity: parseUnits3(
           makeOfferModal$.quantity.get(),
           collectible?.decimals || 0
         ).toString(),
@@ -2807,8 +3399,17 @@ var Modal3 = observer7(() => {
     closeMainModal: () => makeOfferModal$.close(),
     steps$
   });
+  const buyModal = useBuyModal(callbacks);
+  const { data: lowestListing } = useLowestListing({
+    tokenId: collectibleId,
+    chainId,
+    collectionAddress,
+    filters: {
+      currencies: [offerPrice2.currency.contractAddress]
+    }
+  });
   if (collectableIsError || collectionIsError || currenciesIsError) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx25(
       ErrorModal,
       {
         isOpen: makeOfferModal$.isOpen.get(),
@@ -2819,7 +3420,7 @@ var Modal3 = observer7(() => {
     );
   }
   if (!modalLoading && (!currencies || currencies.length === 0)) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx25(
       ErrorModal,
       {
         isOpen: makeOfferModal$.isOpen.get(),
@@ -2830,6 +3431,23 @@ var Modal3 = observer7(() => {
       }
     );
   }
+  const handleMakeOffer = async () => {
+    makeOfferModal$.offerIsBeingProcessed.set(true);
+    try {
+      if (wallet?.isWaaS) {
+        selectWaasFeeOptions$.isVisible.set(true);
+      }
+      await makeOffer({
+        isTransactionExecuting: wallet?.isWaaS ? getNetwork3(Number(chainId)).type !== NetworkType3.TESTNET : false
+      });
+    } catch (error) {
+      console.error("Make offer failed:", error);
+    } finally {
+      makeOfferModal$.offerIsBeingProcessed.set(false);
+      steps$.transaction.isExecuting.set(false);
+    }
+  };
+  const offerCtaLabel = getActionLabel("Make offer");
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -2840,24 +3458,29 @@ var Modal3 = observer7(() => {
       disabled: invalidQuantity || isLoading || insufficientBalance || offerPrice2.amountRaw === "0" || !offerPriceChanged
     },
     {
-      label: "Make offer",
-      onClick: () => makeOffer(),
-      pending: steps$.transaction.isExecuting.get(),
+      label: offerCtaLabel,
+      onClick: () => handleMakeOffer(),
+      pending: steps$?.transaction.isExecuting.get() || makeOfferModal$.offerIsBeingProcessed.get(),
       disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice2.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity
     }
   ];
-  return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx25(Fragment2, { children: /* @__PURE__ */ jsxs18(
     ActionModal,
     {
       isOpen: makeOfferModal$.isOpen.get(),
       chainId: Number(chainId),
-      onClose: () => makeOfferModal$.close(),
+      onClose: () => {
+        makeOfferModal$.close();
+        selectWaasFeeOptions$.hide();
+        steps$.transaction.isExecuting.set(false);
+      },
       title: "Make an offer",
       ctas,
       modalLoading,
       spinnerContainerClassname: "h-[188px]",
+      hideCtas: shouldHideOfferButton,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx25(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -2866,7 +3489,7 @@ var Modal3 = observer7(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx25(
           PriceInput,
           {
             chainId,
@@ -2877,49 +3500,82 @@ var Modal3 = observer7(() => {
             checkBalance: {
               enabled: true,
               callback: (state2) => setInsufficientBalance(state2)
-            }
+            },
+            disabled: shouldHideOfferButton
           }
         ),
-        collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx20(
+        collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx25(
           quantityInput_default,
           {
             $quantity: makeOfferModal$.quantity,
             $invalidQuantity: makeOfferModal$.invalidQuantity,
             decimals: collectible?.decimals || 0,
-            maxQuantity: String(Number.MAX_SAFE_INTEGER)
+            maxQuantity: String(Number.MAX_SAFE_INTEGER),
+            disabled: shouldHideOfferButton
           }
         ),
-        offerPrice2.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx20(
+        offerPrice2.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx25(
           FloorPriceText,
           {
             tokenId: collectibleId,
             chainId,
             collectionAddress,
-            price: offerPrice2
+            price: offerPrice2,
+            onBuyNow: () => {
+              makeOfferModal$.close();
+              if (lowestListing?.order) {
+                buyModal.show({
+                  chainId,
+                  collectionAddress,
+                  collectibleId,
+                  orderId: lowestListing.order.orderId,
+                  marketplace: lowestListing.order.marketplace
+                });
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          expirationDateSelect_default,
+          {
+            $date: makeOfferModal$.expiry,
+            disabled: shouldHideOfferButton
           }
         ),
-        /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+        waasFeeOptionsShown && /* @__PURE__ */ jsx25(
+          selectWaasFeeOptions_default,
+          {
+            chainId: Number(chainId),
+            onCancel: () => {
+              makeOfferModal$.offerIsBeingProcessed.set(false);
+              steps$.transaction.isExecuting.set(false);
+            },
+            titleOnConfirm: "Processing offer..."
+          }
+        )
       ]
     }
   ) });
 });
 
 // src/react/ui/modals/SellModal/Modal.tsx
-import { Show as Show3, observer as observer8 } from "@legendapp/state/react";
-import { parseUnits as parseUnits5 } from "viem";
+import { getNetwork as getNetwork4 } from "@0xsequence/connect";
+import { NetworkType as NetworkType4 } from "@0xsequence/network";
+import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
+import { parseUnits as parseUnits4 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Image as Image4, Skeleton as Skeleton7, Text as Text12 } from "@0xsequence/design-system";
+import { Image as Image5, Skeleton as Skeleton9, Text as Text16 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function TransactionHeader({
   title,
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center", children: [
-    /* @__PURE__ */ jsx21(
-      Text12,
+  return /* @__PURE__ */ jsxs19("div", { className: "flex w-full items-center", children: [
+    /* @__PURE__ */ jsx26(
+      Text16,
       {
         className: "mr-1 font-body text-sm",
         fontWeight: "medium",
@@ -2927,9 +3583,9 @@ function TransactionHeader({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx21(Image4, { className: "mr-1 h-3 w-3", src: currencyImageUrl }),
-    date && /* @__PURE__ */ jsxs13(
-      Text12,
+    /* @__PURE__ */ jsx26(Image5, { className: "mr-1 h-3 w-3", src: currencyImageUrl }),
+    date && /* @__PURE__ */ jsxs19(
+      Text16,
       {
         className: "grow text-right font-body text-xs",
         fontWeight: "medium",
@@ -2939,15 +3595,15 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx21(Skeleton7, { className: "h-4 w-8" })
+    ) || /* @__PURE__ */ jsx26(Skeleton9, { className: "h-4 w-8" })
   ] });
 }
 
 // src/react/ui/modals/SellModal/hooks/useSell.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect10 } from "react";
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
-import { skipToken as skipToken5, useQuery as useQuery5 } from "@tanstack/react-query";
+import { skipToken as skipToken7, useQuery as useQuery7 } from "@tanstack/react-query";
 var useGetTokenApprovalData3 = (params) => {
   const config = useConfig();
   const { wallet } = useWallet();
@@ -2956,7 +3612,7 @@ var useGetTokenApprovalData3 = (params) => {
     chainId: Number(params.chainId),
     collectionAddress: params.collectionAddress
   });
-  const { data, isLoading, isSuccess } = useQuery5({
+  const { data, isLoading, isSuccess } = useQuery7({
     queryKey: ["token-approval-data", params.ordersData],
     queryFn: wallet ? async () => {
       const address = await wallet.address();
@@ -2985,7 +3641,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken5,
+    } : skipToken7,
     enabled: !!wallet && !!params.collectionAddress
   });
   return {
@@ -2996,7 +3652,7 @@ var useGetTokenApprovalData3 = (params) => {
 };
 
 // src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits6 } from "viem";
+import { formatUnits as formatUnits8 } from "viem";
 var useTransactionSteps3 = ({
   collectibleId,
   chainId,
@@ -3013,11 +3669,11 @@ var useTransactionSteps3 = ({
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
   const analytics = useAnalytics();
   const { amount, receiver } = useFees({
-    chainId: Number(chainId),
+    chainId,
     collectionAddress
   });
   const { data: currencies } = useCurrencies({
-    chainId: Number(chainId)
+    chainId
   });
   const { generateSellTransactionAsync, isPending: generatingSteps } = useGenerateSellTransaction({
     chainId,
@@ -3069,10 +3725,12 @@ var useTransactionSteps3 = ({
       steps$.approval.isExecuting.set(false);
     }
   };
-  const sell = async () => {
+  const sell = async ({
+    isTransactionExecuting
+  }) => {
     if (!wallet) return;
     try {
-      steps$.transaction.isExecuting.set(true);
+      steps$.transaction.isExecuting.set(isTransactionExecuting);
       const steps3 = await getSellSteps();
       const transactionStep = steps3?.find((step) => step.id === "sell" /* sell */);
       const signatureStep = steps3?.find(
@@ -3119,7 +3777,7 @@ var useTransactionSteps3 = ({
         const currencySymbol = currency?.symbol || "";
         const currencyValueRaw = Number(ordersData[0].pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits8(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackSellItems({
           props: {
@@ -3127,7 +3785,7 @@ var useTransactionSteps3 = ({
             collectionAddress,
             currencyAddress: ordersData[0].currencyAddress,
             currencySymbol,
-            chainId,
+            chainId: chainId.toString(),
             txnHash: hash || ""
           },
           nums: {
@@ -3192,7 +3850,7 @@ var useSell = ({
     ordersData,
     marketplace
   });
-  useEffect8(() => {
+  useEffect10(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -3221,10 +3879,11 @@ import { observable as observable5 } from "@legendapp/state";
 var initialState5 = {
   isOpen: false,
   collectionAddress: "",
-  chainId: "",
+  chainId: 0,
   tokenId: "",
   order: void 0,
   callbacks: void 0,
+  sellIsBeingProcessed: false,
   open: (args) => {
     sellModal$.collectionAddress.set(args.collectionAddress);
     sellModal$.chainId.set(args.chainId);
@@ -3236,6 +3895,7 @@ var initialState5 = {
   close: () => {
     sellModal$.isOpen.set(false);
     sellModal$.callbacks.set(void 0);
+    sellModal$.sellIsBeingProcessed.set(false);
   },
   steps: {
     approval: {
@@ -3253,11 +3913,11 @@ var initialState5 = {
 var sellModal$ = observable5(initialState5);
 
 // src/react/ui/modals/SellModal/Modal.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var SellModal = () => {
-  return /* @__PURE__ */ jsx22(Show3, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx22(Modal4, {}) });
+  return /* @__PURE__ */ jsx27(Show3, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx27(Modal4, {}) });
 };
-var Modal4 = observer8(() => {
+var Modal4 = observer9(() => {
   const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
   const steps$ = sellModal$.steps;
   const { data: collectible } = useCollection({
@@ -3280,6 +3940,18 @@ var Modal4 = observer8(() => {
     chainId,
     currencyAddress: order?.priceCurrencyAddress ?? ""
   });
+  const { wallet } = useWallet();
+  const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+  const network = getNetwork4(Number(chainId));
+  const isTestnet = network.type === NetworkType4.TESTNET;
+  const isProcessing = sellModal$.sellIsBeingProcessed.get();
+  const isWaaS = wallet?.isWaaS;
+  const { shouldHideActionButton: shouldHideSellButton } = useSelectWaasFeeOptions({
+    chainId,
+    isProcessing,
+    feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+    selectedFeeOption: selectWaasFeeOptions$.selectedFeeOption.get()
+  });
   const { isLoading, executeApproval, sell } = useSell({
     collectionAddress,
     chainId,
@@ -3288,7 +3960,7 @@ var Modal4 = observer8(() => {
     ordersData: [
       {
         orderId: order?.orderId ?? "",
-        quantity: order?.quantityRemaining ? parseUnits5(
+        quantity: order?.quantityRemaining ? parseUnits4(
           order.quantityRemaining,
           collectible?.decimals || 0
         ).toString() : "1",
@@ -3302,7 +3974,7 @@ var Modal4 = observer8(() => {
   });
   const modalLoading = collectionLoading || currencyLoading;
   if ((collectionError || order === void 0 || currencyError) && !modalLoading) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx27(
       ErrorModal,
       {
         isOpen: sellModal$.isOpen.get(),
@@ -3312,6 +3984,23 @@ var Modal4 = observer8(() => {
       }
     );
   }
+  const handleSell = async () => {
+    sellModal$.sellIsBeingProcessed.set(true);
+    try {
+      if (wallet?.isWaaS) {
+        selectWaasFeeOptions$.isVisible.set(true);
+      }
+      await sell({
+        isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false
+      });
+    } catch (error) {
+      console.error("Sell failed:", error);
+    } finally {
+      sellModal$.sellIsBeingProcessed.set(false);
+      steps$.transaction.isExecuting.set(false);
+    }
+  };
+  const sellCtaLabel = isProcessing ? isWaaS && !isTestnet ? "Loading fee options" : "Accept" : "Accept";
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -3322,24 +4011,30 @@ var Modal4 = observer8(() => {
       disabled: isLoading || order?.quantityRemaining === "0"
     },
     {
-      label: "Accept",
-      onClick: () => sell(),
-      pending: steps$.transaction.isExecuting.get(),
+      label: sellCtaLabel,
+      onClick: () => handleSell(),
+      pending: steps$?.transaction.isExecuting.get() || sellModal$.sellIsBeingProcessed.get(),
       disabled: isLoading || steps$.approval.isExecuting.get() || steps$.approval.exist.get() || order?.quantityRemaining === "0"
     }
   ];
-  return /* @__PURE__ */ jsxs14(
+  const showWaasFeeOptions = wallet?.isWaaS && sellModal$.sellIsBeingProcessed.get() && feeOptionsVisible;
+  return /* @__PURE__ */ jsxs20(
     ActionModal,
     {
       isOpen: sellModal$.isOpen.get(),
       chainId: Number(chainId),
-      onClose: sellModal$.close,
+      onClose: () => {
+        sellModal$.close();
+        selectWaasFeeOptions$.hide();
+        steps$.transaction.isExecuting.set(false);
+      },
       title: "You have an offer",
       ctas,
       modalLoading,
       spinnerContainerClassname: "h-[104px]",
+      hideCtas: shouldHideSellButton,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx27(
           TransactionHeader,
           {
             title: "Offer received",
@@ -3347,7 +4042,7 @@ var Modal4 = observer8(() => {
             date: order && new Date(order.createdAt)
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx27(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -3356,7 +4051,7 @@ var Modal4 = observer8(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx27(
           TransactionDetails,
           {
             collectibleId: tokenId,
@@ -3369,6 +4064,17 @@ var Modal4 = observer8(() => {
             } : void 0,
             currencyImageUrl: currency?.imageUrl
           }
+        ),
+        showWaasFeeOptions && /* @__PURE__ */ jsx27(
+          selectWaasFeeOptions_default,
+          {
+            chainId: Number(chainId),
+            onCancel: () => {
+              sellModal$.sellIsBeingProcessed.set(false);
+              steps$.transaction.isExecuting.set(false);
+            },
+            titleOnConfirm: "Accepting offer..."
+          }
         )
       ]
     }
@@ -3377,13 +4083,13 @@ var Modal4 = observer8(() => {
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Button as Button2,
+  Button as Button5,
   ExternalLinkIcon,
-  Image as Image5,
+  Image as Image6,
   Modal as Modal5,
-  Text as Text13
+  Text as Text17
 } from "@0xsequence/design-system";
-import { observer as observer9, use$ as use$4 } from "@legendapp/state/react";
+import { observer as observer10, use$ as use$4 } from "@legendapp/state/react";
 
 // src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
 import { observable as observable6 } from "@legendapp/state";
@@ -3428,29 +4134,29 @@ var initialState6 = {
 var successfulPurchaseModal$ = observable6(initialState6);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
     close: () => successfulPurchaseModal$.close()
   };
 };
-var SuccessfulPurchaseModal = observer9(() => {
+var SuccessfulPurchaseModal = observer10(() => {
   const handleClose = () => {
     successfulPurchaseModal$.close();
   };
   const isOpen = use$4(successfulPurchaseModal$.isOpen);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx28(
     Modal5,
     {
       isDismissible: true,
       onClose: handleClose,
       size: "sm",
       backdropColor: "backgroundBackdrop",
-      children: /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-4 p-6", children: [
-        /* @__PURE__ */ jsx23(
-          Text13,
+      children: /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-col gap-4 p-6", children: [
+        /* @__PURE__ */ jsx28(
+          Text17,
           {
             className: "text-center text-large",
             fontWeight: "bold",
@@ -3458,27 +4164,27 @@ var SuccessfulPurchaseModal = observer9(() => {
             children: "Successful purchase!"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx28(
           CollectiblesGrid,
           {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx23(Text13, { className: "text-base", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx23(Text13, { className: "text-base", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx23(Text13, { className: "text-base", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx23(Text13, { className: "text-base", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx28(Text17, { className: "text-base", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx28(Text17, { className: "text-base", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx28(Text17, { className: "text-base", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx28(Text17, { className: "text-base", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
-        /* @__PURE__ */ jsx23(SuccessfulPurchaseActions, {})
+        /* @__PURE__ */ jsx28(SuccessfulPurchaseActions, {})
       ] })
     }
   );
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx23(
-      Button2,
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx28(
+      Button5,
       {
         className: "w-full",
         shape: "square",
@@ -3487,8 +4193,8 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx23(
-      Button2,
+    /* @__PURE__ */ jsx28(
+      Button5,
       {
         className: "w-full",
         as: "a",
@@ -3505,23 +4211,23 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2 [&:has(div:nth-child(4))>div]:col-[unset] [&>div:nth-child(1):only-child]:h-[312px] [&>div:nth-child(1):only-child]:w-[312px] [&>div:nth-child(3)]:col-[1/-1] [&>div:nth-child(3)]:justify-self-center", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2 [&:has(div:nth-child(4))>div]:col-[unset] [&>div:nth-child(1):only-child]:h-[312px] [&>div:nth-child(1):only-child]:w-[312px] [&>div:nth-child(3)]:col-[1/-1] [&>div:nth-child(3)]:justify-self-center", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         className: "relative h-[150px] w-[150px]",
         children: [
-          /* @__PURE__ */ jsx23(
-            Image5,
+          /* @__PURE__ */ jsx28(
+            Image6,
             {
               className: `aspect-square h-full w-full rounded-lg bg-background-secondary object-contain ${showPlus ? "opacity-[0.4_!important]" : ""}`,
               src: collectible.image,
               alt: collectible.name
             }
           ),
-          showPlus && /* @__PURE__ */ jsx23("div", { className: "absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-background-overlay backdrop-blur-md", children: /* @__PURE__ */ jsxs15(
-            Text13,
+          showPlus && /* @__PURE__ */ jsx28("div", { className: "absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-background-overlay backdrop-blur-md", children: /* @__PURE__ */ jsxs21(
+            Text17,
             {
               className: "rounded-lg bg-background-secondary px-2 py-1.5 text-sm backdrop-blur-md",
               fontWeight: "medium",
@@ -3542,8 +4248,8 @@ var SuccessfulPurchaseModal_default = SuccessfulPurchaseModal;
 
 // src/react/ui/modals/TransferModal/index.tsx
 import { Modal as Modal6 } from "@0xsequence/design-system";
-import { observer as observer11 } from "@legendapp/state/react";
-import { useAccount as useAccount5 } from "wagmi";
+import { observer as observer16 } from "@legendapp/state/react";
+import { useAccount as useAccount7, useSwitchChain } from "wagmi";
 
 // src/react/ui/modals/TransferModal/_store.ts
 import { observable as observable7 } from "@legendapp/state";
@@ -3569,15 +4275,18 @@ var initialState7 = {
     transferModal$.state.set({
       ...initialState7.state
     });
+    transferModal$.state.receiverAddress.set("");
+    transferModal$.state.transferIsBeingProcessed.set(false);
     transferModal$.view.set("enterReceiverAddress");
     transferModal$.hash.set(void 0);
   },
   state: {
     receiverAddress: "",
     collectionAddress: "0x",
-    chainId: "",
+    chainId: 0,
     collectibleId: "",
-    quantity: "1"
+    quantity: "1",
+    transferIsBeingProcessed: false
   },
   view: "enterReceiverAddress",
   hash: void 0
@@ -3585,10 +4294,10 @@ var initialState7 = {
 var transferModal$ = observable7(initialState7);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Button as Button3, Text as Text14, TextInput } from "@0xsequence/design-system";
-import { observable as observable8 } from "@legendapp/state";
-import { isAddress } from "viem";
-import { useAccount as useAccount4 } from "wagmi";
+import { Text as Text19 } from "@0xsequence/design-system";
+import { observer as observer14 } from "@legendapp/state/react";
+import { isAddress as isAddress2 } from "viem";
+import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/messages.ts
 var baseMessages = {
@@ -3599,7 +4308,142 @@ function getMessage(key) {
   return baseMessages[key];
 }
 
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TokenQuantityInput.tsx
+import { cn as cn2 } from "@0xsequence/design-system";
+import { Text as Text18 } from "@0xsequence/design-system";
+import { observable as observable8 } from "@legendapp/state";
+import { observer as observer11 } from "@legendapp/state/react";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var TokenQuantityInput = observer11(
+  ({
+    balanceAmount,
+    collection,
+    isProcessingWithWaaS
+  }) => {
+    const $quantity = transferModal$.state.quantity;
+    const $invalidQuantity = observable8(false);
+    let insufficientBalance = true;
+    if (balanceAmount !== void 0 && $quantity.get()) {
+      try {
+        const quantityBigInt = BigInt($quantity.get());
+        insufficientBalance = quantityBigInt > balanceAmount;
+      } catch (e) {
+        insufficientBalance = true;
+      }
+    }
+    return /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        className: cn2(
+          "flex flex-col gap-3",
+          isProcessingWithWaaS && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx29(
+            quantityInput_default,
+            {
+              $quantity,
+              $invalidQuantity,
+              decimals: collection?.decimals || 0,
+              maxQuantity: balanceAmount ? String(balanceAmount) : "0",
+              className: "[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
+            }
+          ),
+          /* @__PURE__ */ jsx29(
+            Text18,
+            {
+              className: "font-body text-xs",
+              color: insufficientBalance ? "negative" : "text50",
+              fontWeight: "medium",
+              children: `You have ${balanceAmount?.toString() || "0"} of this item`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var TokenQuantityInput_default = TokenQuantityInput;
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TransferButton.tsx
+import { getNetwork as getNetwork5 } from "@0xsequence/connect";
+import { Button as Button6, Spinner as Spinner4 } from "@0xsequence/design-system";
+import { NetworkType as NetworkType5 } from "@0xsequence/network";
+import { observer as observer12 } from "@legendapp/state/react";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var TransferButton = observer12(
+  ({
+    onClick,
+    isDisabled,
+    chainId
+  }) => {
+    const { wallet } = useWallet();
+    const network = getNetwork5(chainId);
+    const isWaaS = wallet?.isWaaS;
+    const isTestnet = network.type === NetworkType5.TESTNET;
+    const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
+    const label = isProcessing ? isWaaS && !isTestnet ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx30(Spinner4, { size: "sm", className: "text-white" }),
+      /* @__PURE__ */ jsx30("span", { children: "Loading fee options" })
+    ] }) : /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx30(Spinner4, { size: "sm", className: "text-white" }),
+      /* @__PURE__ */ jsx30("span", { children: "Transferring" })
+    ] }) : "Transfer";
+    return /* @__PURE__ */ jsx30(
+      Button6,
+      {
+        className: "flex justify-self-end px-10",
+        onClick,
+        disabled: !!isDisabled,
+        title: "Transfer",
+        label,
+        variant: "primary",
+        shape: "square",
+        size: "sm"
+      }
+    );
+  }
+);
+var TransferButton_default = TransferButton;
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/WalletAddressInput.tsx
+import { TextInput } from "@0xsequence/design-system";
+import { observer as observer13 } from "@legendapp/state/react";
+import { isAddress } from "viem";
+import { useAccount as useAccount5 } from "wagmi";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var MAX_WALLET_ADDRESS_LENGTH = 42;
+var WalletAddressInput = observer13(() => {
+  const { address: connectedAddress } = useAccount5();
+  const receiverAddress = transferModal$.state.receiverAddress.get();
+  const isWalletAddressValid = isAddress(receiverAddress);
+  const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
+  const isSelfTransfer = isWalletAddressValid && connectedAddress && receiverAddress.toLowerCase() === connectedAddress.toLowerCase();
+  const handleChangeWalletAddress = (event) => {
+    transferModal$.state.receiverAddress.set(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: "[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1", children: [
+    /* @__PURE__ */ jsx31(
+      TextInput,
+      {
+        label: "Wallet address",
+        labelLocation: "top",
+        autoFocus: true,
+        value: receiverAddress,
+        maxLength: MAX_WALLET_ADDRESS_LENGTH,
+        onChange: handleChangeWalletAddress,
+        name: "walletAddress",
+        placeholder: "Enter wallet address",
+        disabled: isProcessing
+      }
+    ),
+    isSelfTransfer && /* @__PURE__ */ jsx31("div", { className: "mt-1 text-negative text-sm", children: "You cannot transfer to your own address" })
+  ] });
+});
+var WalletAddressInput_default = WalletAddressInput;
+
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx
+import { useWaasFeeOptions as useWaasFeeOptions2 } from "@0xsequence/connect";
 var useHandleTransfer = () => {
   const {
     receiverAddress,
@@ -3612,29 +4456,34 @@ var useHandleTransfer = () => {
   } = transferModal$.state.get();
   const { transferTokensAsync } = useTransferTokens();
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  const { wallet } = useWallet();
+  const [pendingFeeOptionConfirmation] = useWaasFeeOptions2();
   const getHash = async () => {
+    const baseParams = {
+      receiverAddress,
+      collectionAddress,
+      tokenId: collectibleId,
+      chainId
+    };
     if (collectionType === "ERC721" /* ERC721 */) {
       return await transferTokensAsync({
-        receiverAddress,
-        collectionAddress,
-        tokenId: collectibleId,
-        chainId,
+        ...baseParams,
         contractType: "ERC721" /* ERC721 */
       });
     }
     return await transferTokensAsync({
-      receiverAddress,
-      collectionAddress,
-      tokenId: collectibleId,
-      chainId,
+      ...baseParams,
       contractType: "ERC1155" /* ERC1155 */,
       quantity: String(quantity)
     });
   };
-  async function transfer() {
+  const transfer = async () => {
     if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
       throw new InvalidContractTypeError(collectionType);
     }
+    if (wallet?.isWaaS && pendingFeeOptionConfirmation) {
+      return;
+    }
     try {
       const hash = await getHash();
       transferModal$.close();
@@ -3654,30 +4503,47 @@ var useHandleTransfer = () => {
       transferModal$.view.set("enterReceiverAddress");
       callbacks?.onError?.(error);
     }
-  }
+  };
   return { transfer };
 };
 var useHandleTransfer_default = useHandleTransfer;
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-var EnterWalletAddressView = () => {
-  const { address } = useAccount4();
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+var EnterWalletAddressView = observer14(() => {
+  const { address: connectedAddress } = useAccount6();
   const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
   const $quantity = transferModal$.state.quantity;
-  const $invalidQuantity = observable8(false);
-  const isWalletAddressValid = isAddress(
-    transferModal$.state.receiverAddress.get()
-  );
+  const receiverAddress = transferModal$.state.receiverAddress.get();
+  const isWalletAddressValid = isAddress2(receiverAddress);
+  const {
+    isWaaS,
+    isProcessingWithWaaS,
+    shouldHideActionButton: shouldHideTransferButton
+  } = useSelectWaasFeeOptions({
+    chainId,
+    isProcessing: transferModal$.state.transferIsBeingProcessed.get(),
+    feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+    selectedFeeOption: selectWaasFeeOptions$.selectedFeeOption.get()
+  });
+  const isSelfTransfer = isWalletAddressValid && connectedAddress && compareAddress(receiverAddress, connectedAddress);
   const { data: tokenBalance } = useListBalances({
-    chainId: Number(chainId),
+    chainId,
     contractAddress: collectionAddress,
     tokenId: collectibleId,
-    accountAddress: address,
-    query: { enabled: !!address }
+    accountAddress: connectedAddress,
+    query: { enabled: !!connectedAddress }
   });
   const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-  const insufficientBalance = balanceAmount ? $quantity.get() > balanceAmount : true;
+  let insufficientBalance = true;
+  if (balanceAmount !== void 0 && $quantity.get()) {
+    try {
+      const quantityBigInt = BigInt($quantity.get());
+      insufficientBalance = quantityBigInt > BigInt(balanceAmount);
+    } catch (e) {
+      insufficientBalance = true;
+    }
+  }
   const { data: collection } = useCollection({
     collectionAddress,
     chainId
@@ -3686,90 +4552,75 @@ var EnterWalletAddressView = () => {
     collection?.type
   );
   const { transfer } = useHandleTransfer_default();
-  function handleChangeWalletAddress(event) {
-    transferModal$.state.receiverAddress.set(event.target.value);
-  }
-  function handleChangeView() {
-    transfer();
-    transferModal$.view.set("followWalletInstructions");
-  }
-  return /* @__PURE__ */ jsxs16("div", { className: "grid grow gap-6", children: [
-    /* @__PURE__ */ jsx24(Text14, { className: "font-body text-xl", color: "white", fontWeight: "bold", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx24(
+  const onTransferClick = async () => {
+    transferModal$.state.transferIsBeingProcessed.set(true);
+    try {
+      if (!isWaaS) {
+        transferModal$.view.set("followWalletInstructions");
+      } else {
+        selectWaasFeeOptions$.isVisible.set(true);
+      }
+      await transfer();
+    } catch (error) {
+      console.error("Transfer failed:", error);
+    } finally {
+      if (transferModal$.view.get() === "enterReceiverAddress") {
+        transferModal$.state.transferIsBeingProcessed.set(false);
+      }
+    }
+  };
+  const isErc1155 = collectionType === "ERC1155" /* ERC1155 */;
+  const showQuantityInput = isErc1155 && !!balanceAmount;
+  const isProcessing = !!transferModal$.state.transferIsBeingProcessed.get();
+  const isTransferDisabled = isProcessing || !isWalletAddressValid || insufficientBalance || !$quantity.get() || Number($quantity.get()) === 0 || isSelfTransfer;
+  return /* @__PURE__ */ jsxs25("div", { className: "grid grow gap-6", children: [
+    /* @__PURE__ */ jsx32(Text19, { className: "font-body text-xl", color: "white", fontWeight: "bold", children: "Transfer your item" }),
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx32(
         AlertMessage,
         {
           message: getMessage("enterReceiverAddress"),
           type: "warning"
         }
       ),
-      /* @__PURE__ */ jsx24("div", { className: "[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1", children: /* @__PURE__ */ jsx24(
-        TextInput,
+      /* @__PURE__ */ jsx32(WalletAddressInput_default, {}),
+      showQuantityInput && /* @__PURE__ */ jsx32(
+        TokenQuantityInput_default,
         {
-          label: "Wallet address",
-          labelLocation: "top",
-          autoFocus: true,
-          value: transferModal$.state.receiverAddress.get(),
-          onChange: handleChangeWalletAddress,
-          name: "walletAddress",
-          placeholder: "Enter wallet address"
+          balanceAmount: balanceAmount ? BigInt(balanceAmount) : void 0,
+          collection,
+          isProcessingWithWaaS: isProcessingWithWaaS ?? false
         }
-      ) }),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs16(Fragment3, { children: [
-        /* @__PURE__ */ jsx24(
-          quantityInput_default,
-          {
-            $quantity,
-            $invalidQuantity,
-            decimals: collection?.decimals || 0,
-            maxQuantity: balanceAmount,
-            className: "[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
-          }
-        ),
-        /* @__PURE__ */ jsx24(
-          Text14,
-          {
-            className: "font-body text-xs",
-            color: insufficientBalance ? "negative" : "text50",
-            fontWeight: "medium",
-            children: `You have ${balanceAmount} of this item`
-          }
-        )
-      ] })
+      )
     ] }),
-    /* @__PURE__ */ jsx24(
-      Button3,
+    !shouldHideTransferButton && /* @__PURE__ */ jsx32(
+      TransferButton_default,
       {
-        className: "flex justify-self-end px-10",
-        onClick: handleChangeView,
-        disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
-        title: "Transfer",
-        label: "Transfer",
-        variant: "primary",
-        shape: "square",
-        size: "sm"
+        onClick: onTransferClick,
+        isDisabled: isTransferDisabled,
+        chainId
       }
     )
   ] });
-};
+});
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Button as Button4, Text as Text15 } from "@0xsequence/design-system";
-import { observer as observer10 } from "@legendapp/state/react";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
-var FollowWalletInstructionsView = observer10(() => {
-  return /* @__PURE__ */ jsxs17("div", { className: "grid grow gap-6", children: [
-    /* @__PURE__ */ jsx25(Text15, { className: "font-body text-xl", color: "white", fontWeight: "bold", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx25(
+import { Button as Button7, Text as Text20 } from "@0xsequence/design-system";
+import { observer as observer15 } from "@legendapp/state/react";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer15(() => {
+  return /* @__PURE__ */ jsxs26("div", { className: "grid grow gap-6", children: [
+    /* @__PURE__ */ jsx33(Text20, { className: "font-body text-xl", color: "white", fontWeight: "bold", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx33(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
         type: "info"
       }
     ) }),
-    /* @__PURE__ */ jsx25(
-      Button4,
+    /* @__PURE__ */ jsx33(
+      Button7,
       {
         className: "flex justify-self-end px-10",
         disabled: true,
@@ -3785,84 +4636,113 @@ var FollowWalletInstructionsView = observer10(() => {
 var followWalletInstructions_default = FollowWalletInstructionsView;
 
 // src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount5();
+  const { chainId: accountChainId } = useAccount7();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  const { wallet } = useWallet();
+  const { switchChain } = useSwitchChain();
   const openModal = (args) => {
     transferModal$.open(args);
   };
   const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
+    const targetChainId = Number(args.chainId);
+    const isSameChain = accountChainId === targetChainId;
     if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSuccess: () => openModal(args)
-      });
+      if (wallet?.isWaaS) {
+        switchChain({ chainId: targetChainId });
+        openModal(args);
+      } else {
+        showSwitchNetworkModal({
+          chainIdToSwitchTo: targetChainId,
+          onSuccess: () => openModal(args)
+        });
+      }
       return;
     }
     openModal(args);
   };
+  const updateCallbacks = (callbacks) => {
+    transferModal$.state.set({
+      ...transferModal$.state.get(),
+      callbacks
+    });
+  };
   return {
     show: handleShowModal,
-    close: () => transferModal$.close(),
-    onError: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        callbacks
-      });
-    }
+    close: transferModal$.close,
+    onError: updateCallbacks,
+    onSuccess: updateCallbacks
   };
 };
-var TransferModal = observer11(() => {
+var TransactionModalView = observer16(() => {
+  const { view } = transferModal$.get();
+  switch (view) {
+    case "enterReceiverAddress":
+      return /* @__PURE__ */ jsx34(enterWalletAddress_default, {});
+    case "followWalletInstructions":
+      return /* @__PURE__ */ jsx34(followWalletInstructions_default, {});
+    default:
+      return null;
+  }
+});
+var TransferModal = observer16(() => {
   const isOpen = transferModal$.isOpen.get();
+  const chainId = transferModal$.state.chainId.get();
+  const isTransferBeingProcessed = transferModal$.state.transferIsBeingProcessed.get();
+  const { waasFeeOptionsShown } = useSelectWaasFeeOptions({
+    chainId,
+    isProcessing: isTransferBeingProcessed,
+    feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+    selectedFeeOption: selectWaasFeeOptions$.selectedFeeOption.get()
+  });
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs27(
     Modal6,
     {
       isDismissible: true,
-      onClose: transferModal$.close,
+      onClose: () => {
+        transferModal$.close();
+        selectWaasFeeOptions$.hide();
+      },
       size: "sm",
       overlayProps: MODAL_OVERLAY_PROPS,
       contentProps: {
         style: {
-          height: "auto"
+          height: "auto",
+          overflow: "auto"
         }
       },
-      children: /* @__PURE__ */ jsx26("div", { className: "flex w-full flex-col p-7", children: /* @__PURE__ */ jsx26(TransactionModalView, {}) })
+      children: [
+        /* @__PURE__ */ jsx34("div", { className: "flex w-full flex-col p-7", children: /* @__PURE__ */ jsx34(TransactionModalView, {}) }),
+        waasFeeOptionsShown && /* @__PURE__ */ jsx34(
+          selectWaasFeeOptions_default,
+          {
+            chainId: Number(chainId),
+            onCancel: () => {
+              transferModal$.state.transferIsBeingProcessed.set(false);
+            },
+            titleOnConfirm: "Processing transfer...",
+            className: "p-7 pt-0"
+          }
+        )
+      ]
     }
   );
 });
-var TransactionModalView = observer11(() => {
-  const { view } = transferModal$.get();
-  switch (view) {
-    case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx26(enterWalletAddress_default, {});
-    case "followWalletInstructions":
-      return /* @__PURE__ */ jsx26(followWalletInstructions_default, {});
-    default:
-      return null;
-  }
-});
 
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
-var ModalProvider = observer12(() => {
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx27(CreateListingModal, {}),
-    /* @__PURE__ */ jsx27(MakeOfferModal, {}),
-    /* @__PURE__ */ jsx27(TransferModal, {}),
-    /* @__PURE__ */ jsx27(SellModal, {}),
-    /* @__PURE__ */ jsx27(BuyModal, {}),
-    /* @__PURE__ */ jsx27(SuccessfulPurchaseModal_default, {}),
-    /* @__PURE__ */ jsx27(switchChainModal_default, {}),
-    /* @__PURE__ */ jsx27(transactionStatusModal_default, {})
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+var ModalProvider = observer17(() => {
+  return /* @__PURE__ */ jsxs28(Fragment3, { children: [
+    /* @__PURE__ */ jsx35(CreateListingModal, {}),
+    /* @__PURE__ */ jsx35(MakeOfferModal, {}),
+    /* @__PURE__ */ jsx35(TransferModal, {}),
+    /* @__PURE__ */ jsx35(SellModal, {}),
+    /* @__PURE__ */ jsx35(BuyModal, {}),
+    /* @__PURE__ */ jsx35(SuccessfulPurchaseModal_default, {}),
+    /* @__PURE__ */ jsx35(switchChainModal_default, {}),
+    /* @__PURE__ */ jsx35(transactionStatusModal_default, {})
   ] });
 });
 
@@ -3888,24 +4768,16 @@ var useSellModal = (callbacks) => {
   };
 };
 
-// src/react/ui/modals/BuyModal/index.tsx
-var useBuyModal = (callbacks) => {
-  return {
-    show: (args) => buyModal$.open({ ...args, defaultCallbacks: callbacks }),
-    close: () => buyModal$.close()
-  };
-};
-
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { Skeleton as Skeleton9 } from "@0xsequence/design-system";
+import { Skeleton as Skeleton11 } from "@0xsequence/design-system";
 
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
-import { observer as observer13 } from "@legendapp/state/react";
+import { observer as observer18 } from "@legendapp/state/react";
 
 // src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx
 import { useOpenConnectModal } from "@0xsequence/connect";
-import { Button as Button5 } from "@0xsequence/design-system";
-import { useAccount as useAccount6 } from "wagmi";
+import { Button as Button8 } from "@0xsequence/design-system";
+import { useAccount as useAccount8 } from "wagmi";
 
 // src/react/ui/components/_internals/action-button/store.ts
 import { observable as observable9 } from "@legendapp/state";
@@ -3934,7 +4806,7 @@ var executePendingActionIfExists = () => {
 };
 
 // src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function ActionButtonBody({
   tokenId,
   label,
@@ -3942,7 +4814,7 @@ function ActionButtonBody({
   icon,
   action
 }) {
-  const { address } = useAccount6();
+  const { address } = useAccount8();
   const { setOpenConnectModal } = useOpenConnectModal();
   const handleClick = (e) => {
     e.preventDefault();
@@ -3954,8 +4826,8 @@ function ActionButtonBody({
       onClick();
     }
   };
-  return /* @__PURE__ */ jsx28(
-    Button5,
+  return /* @__PURE__ */ jsx36(
+    Button8,
     {
       className: "flex w-full items-center justify-center",
       variant: "primary",
@@ -3969,7 +4841,7 @@ function ActionButtonBody({
 }
 
 // src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function NonOwnerActions({
   action,
   tokenId,
@@ -3984,7 +4856,7 @@ function NonOwnerActions({
     if (!lowestListing) {
       throw new InvalidStepError("BUY", "lowestListing is required");
     }
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx37(
       ActionButtonBody,
       {
         action: "Buy" /* BUY */,
@@ -3993,15 +4865,16 @@ function NonOwnerActions({
         onClick: () => showBuyModal({
           collectionAddress,
           chainId,
-          tokenId,
-          order: lowestListing
+          collectibleId: tokenId,
+          orderId: lowestListing.orderId,
+          marketplace: lowestListing.marketplace
         }),
         icon: CartIcon_default
       }
     );
   }
   if (action === "Make an offer" /* OFFER */) {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx37(
       ActionButtonBody,
       {
         action: "Make an offer" /* OFFER */,
@@ -4020,7 +4893,7 @@ function NonOwnerActions({
 }
 
 // src/react/ui/components/_internals/action-button/components/OwnerActions.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function OwnerActions({
   action,
   tokenId,
@@ -4033,7 +4906,7 @@ function OwnerActions({
   const { show: showSellModal } = useSellModal();
   const { show: showTransferModal } = useTransferModal();
   if (action === "Create listing" /* LIST */) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx38(
       ActionButtonBody,
       {
         label: "Create listing",
@@ -4048,7 +4921,7 @@ function OwnerActions({
     );
   }
   if (action === "Sell" /* SELL */ && highestOffer) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx38(
       ActionButtonBody,
       {
         tokenId,
@@ -4063,7 +4936,7 @@ function OwnerActions({
     );
   }
   if (action === "Transfer" /* TRANSFER */) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx38(
       ActionButtonBody,
       {
         label: "Transfer",
@@ -4080,21 +4953,21 @@ function OwnerActions({
 }
 
 // src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts
-import { useEffect as useEffect9 } from "react";
-import { useAccount as useAccount7 } from "wagmi";
+import { useEffect as useEffect11 } from "react";
+import { useAccount as useAccount9 } from "wagmi";
 var useActionButtonLogic = ({
   tokenId,
   owned,
   action,
   onCannotPerformAction
 }) => {
-  const { address } = useAccount7();
+  const { address } = useAccount9();
   const actionsThatOwnersCannotPerform = [
     "Buy" /* BUY */,
     "Make an offer" /* OFFER */
   ];
   const pendingActionType = actionButtonStore.pendingAction.type.get();
-  useEffect9(() => {
+  useEffect11(() => {
     if (owned && actionButtonStore.pendingAction.get() && address && !actionsThatOwnersCannotPerform.includes(action) && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
       onCannotPerformAction?.(
         pendingActionType
@@ -4110,7 +4983,7 @@ var useActionButtonLogic = ({
     onCannotPerformAction,
     pendingActionType
   ]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (address && !owned && actionButtonStore.pendingAction.get() && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
       setTimeout(() => {
         executePendingActionIfExists();
@@ -4132,8 +5005,8 @@ var useActionButtonLogic = ({
 };
 
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var ActionButton = observer13(
+import { jsx as jsx39 } from "react/jsx-runtime";
+var ActionButton = observer18(
   ({
     collectionAddress,
     chainId,
@@ -4155,7 +5028,7 @@ var ActionButton = observer13(
       return null;
     }
     if (isOwnerAction) {
-      return /* @__PURE__ */ jsx31(
+      return /* @__PURE__ */ jsx39(
         OwnerActions,
         {
           action,
@@ -4167,7 +5040,7 @@ var ActionButton = observer13(
         }
       );
     }
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx39(
       NonOwnerActions,
       {
         action,
@@ -4182,12 +5055,12 @@ var ActionButton = observer13(
 );
 
 // src/react/ui/components/collectible-card/CollectibleAsset.tsx
-import { Skeleton as Skeleton8 } from "@0xsequence/design-system";
-import { useEffect as useEffect10, useRef as useRef2, useState as useState8 } from "react";
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
+import { useEffect as useEffect12, useRef as useRef2, useState as useState10 } from "react";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function CollectibleAssetSkeleton() {
-  return /* @__PURE__ */ jsx32(
-    Skeleton8,
+  return /* @__PURE__ */ jsx40(
+    Skeleton10,
     {
       size: "lg",
       className: "absolute inset-0 h-full w-full animate-shimmer",
@@ -4210,14 +5083,14 @@ function CollectibleAsset({
   collectibleMetadata,
   assetSrcPrefixUrl
 }) {
-  const [assetLoadFailed, setAssetLoadFailed] = useState8(false);
-  const [assetLoading, setAssetLoading] = useState8(true);
+  const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
+  const [assetLoading, setAssetLoading] = useState10(true);
   const videoRef = useRef2(null);
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   const placeholderImage = chess_tile_default;
   const assetUrl = collectibleMetadata?.image || collectibleMetadata?.video || collectibleMetadata?.animation_url || collectibleMetadata?.assets?.[0]?.url || placeholderImage;
   const proxiedAssetUrl = assetSrcPrefixUrl ? `${assetSrcPrefixUrl}${assetUrl}` : assetUrl;
-  useEffect10(() => {
+  useEffect12(() => {
     if (videoRef.current) {
       videoRef.current.addEventListener("loadedmetadata", () => {
         setAssetLoading(false);
@@ -4225,9 +5098,9 @@ function CollectibleAsset({
     }
   }, []);
   if (isHtml(assetUrl)) {
-    return /* @__PURE__ */ jsxs19("div", { className: "flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
-      assetLoading && /* @__PURE__ */ jsx32(CollectibleAssetSkeleton, {}),
-      /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs29("div", { className: "flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
+      assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
+      /* @__PURE__ */ jsx40(
         "iframe",
         {
           title: name || "Collectible",
@@ -4245,9 +5118,9 @@ function CollectibleAsset({
     ] });
   }
   if (isVideo(assetUrl)) {
-    return /* @__PURE__ */ jsxs19("div", { className: "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
-      assetLoading && /* @__PURE__ */ jsx32(CollectibleAssetSkeleton, {}),
-      /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs29("div", { className: "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary", children: [
+      assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
+      /* @__PURE__ */ jsx40(
         "video",
         {
           ref: videoRef,
@@ -4265,14 +5138,14 @@ function CollectibleAsset({
           onError: () => {
             setAssetLoadFailed(true);
           },
-          children: /* @__PURE__ */ jsx32("source", { src: proxiedAssetUrl })
+          children: /* @__PURE__ */ jsx40("source", { src: proxiedAssetUrl })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: [
-    assetLoading && /* @__PURE__ */ jsx32(CollectibleAssetSkeleton, {}),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs29("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: [
+    assetLoading && /* @__PURE__ */ jsx40(CollectibleAssetSkeleton, {}),
+    /* @__PURE__ */ jsx40(
       "img",
       {
         src: assetLoadFailed ? placeholderImage : proxiedAssetUrl,
@@ -4290,26 +5163,26 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   IconButton as IconButton2,
-  Image as Image6,
-  Text as Text16
+  Image as Image7,
+  Text as Text21
 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits7 } from "viem";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { formatUnits as formatUnits9 } from "viem";
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var OVERFLOW_PRICE = 1e8;
 var UNDERFLOW_PRICE = 1e-4;
 var formatPrice = (amount, currency) => {
-  const formattedPrice = formatUnits7(BigInt(amount), currency.decimals);
+  const formattedPrice = formatUnits9(BigInt(amount), currency.decimals);
   const numericPrice = Number.parseFloat(formattedPrice);
   if (numericPrice < UNDERFLOW_PRICE) {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx33(ChevronLeftIcon, { className: "h-3 w-3 text-text-100" }),
-      /* @__PURE__ */ jsx33(Text16, { children: `${UNDERFLOW_PRICE} ${currency.symbol}` })
+    return /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx41(ChevronLeftIcon, { className: "h-3 w-3 text-text-100" }),
+      /* @__PURE__ */ jsx41(Text21, { children: `${UNDERFLOW_PRICE} ${currency.symbol}` })
     ] });
   }
   if (numericPrice > OVERFLOW_PRICE) {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx33(ChevronRightIcon, { className: "h-3 w-3 text-text-100" }),
-      /* @__PURE__ */ jsx33(Text16, { children: `${OVERFLOW_PRICE.toLocaleString("en-US", {
+    return /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx41(ChevronRightIcon, { className: "h-3 w-3 text-text-100" }),
+      /* @__PURE__ */ jsx41(Text21, { children: `${OVERFLOW_PRICE.toLocaleString("en-US", {
         maximumFractionDigits: 2
       })} ${currency.symbol}` })
     ] });
@@ -4319,7 +5192,7 @@ var formatPrice = (amount, currency) => {
     minimumFractionDigits: 0,
     maximumFractionDigits: maxDecimals
   });
-  return /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxs20(Text16, { children: [
+  return /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxs30(Text21, { children: [
     formattedNumber,
     " ",
     currency.symbol
@@ -4342,10 +5215,10 @@ var Footer = ({
   if (name.length > 17 && !highestOffer) {
     name = `${name.substring(0, 17)}...`;
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "relative flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx33(Text16, { className: "text-left font-body font-bold text-sm text-text-100", children: name || "Untitled" }),
-      highestOffer && onOfferClick && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs30("div", { className: "relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "relative flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsx41(Text21, { className: "text-left font-body font-bold text-sm text-text-100", children: name || "Untitled" }),
+      highestOffer && onOfferClick && /* @__PURE__ */ jsx41(
         IconButton2,
         {
           className: "absolute top-0 right-0 h-[22px] w-[22px] hover:animate-bell-ring",
@@ -4354,13 +5227,13 @@ var Footer = ({
           onClick: (e) => {
             onOfferClick?.(e);
           },
-          icon: (props) => /* @__PURE__ */ jsx33(BellIcon_default, { ...props, size: "xs" })
+          icon: (props) => /* @__PURE__ */ jsx41(BellIcon_default, { ...props, size: "xs" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-      listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx33(
-        Image6,
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1", children: [
+      listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx41(
+        Image7,
         {
           className: "h-3 w-3",
           src: lowestListingCurrency.imageUrl,
@@ -4369,8 +5242,8 @@ var Footer = ({
           }
         }
       ),
-      /* @__PURE__ */ jsxs20(
-        Text16,
+      /* @__PURE__ */ jsxs30(
+        Text21,
         {
           className: `text-left font-body font-bold text-sm ${listed ? "text-text-100" : "text-text-50"}`,
           children: [
@@ -4380,7 +5253,7 @@ var Footer = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx41(
       TokenTypeBalancePill,
       {
         balance,
@@ -4395,16 +5268,16 @@ var TokenTypeBalancePill = ({
   type,
   decimals
 }) => {
-  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits7(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
-  return /* @__PURE__ */ jsx33(Text16, { className: "rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs", children: displayText });
+  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits9(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
+  return /* @__PURE__ */ jsx41(Text21, { className: "rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs", children: displayText });
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs21("div", { className: "w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none", children: [
-    /* @__PURE__ */ jsx34("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx34(
-      Skeleton9,
+  return /* @__PURE__ */ jsxs31("div", { className: "w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none", children: [
+    /* @__PURE__ */ jsx42("div", { className: "relative aspect-square overflow-hidden bg-background-secondary", children: /* @__PURE__ */ jsx42(
+      Skeleton11,
       {
         size: "lg",
         className: "absolute inset-0 h-full w-full animate-shimmer",
@@ -4413,9 +5286,9 @@ function CollectibleSkeleton() {
         }
       }
     ) }),
-    /* @__PURE__ */ jsxs21("div", { className: "mt-2 flex flex-col gap-2 px-4 pb-4", children: [
-      /* @__PURE__ */ jsx34(Skeleton9, { size: "lg", className: "animate-shimmer" }),
-      /* @__PURE__ */ jsx34(Skeleton9, { size: "sm", className: "animate-shimmer" })
+    /* @__PURE__ */ jsxs31("div", { className: "mt-2 flex flex-col gap-2 px-4 pb-4", children: [
+      /* @__PURE__ */ jsx42(Skeleton11, { size: "lg", className: "animate-shimmer" }),
+      /* @__PURE__ */ jsx42(Skeleton11, { size: "sm", className: "animate-shimmer" })
     ] })
   ] });
 }
@@ -4443,10 +5316,10 @@ function CollectibleCard({
     }
   });
   if (cardLoading) {
-    return /* @__PURE__ */ jsx34(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx42(CollectibleSkeleton, {});
   }
   const action = balance ? highestOffer && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: "w-card-width overflow-hidden rounded-xl border border-border-base bg-background-primary focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus active:border-border-focus active:shadow-active-ring",
@@ -4456,8 +5329,8 @@ function CollectibleCard({
           onCollectibleClick?.(collectibleId);
         }
       },
-      children: /* @__PURE__ */ jsx34("div", { className: "group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]", children: /* @__PURE__ */ jsxs21("article", { className: "w-full rounded-xl", children: [
-        /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx42("div", { className: "group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]", children: /* @__PURE__ */ jsxs31("article", { className: "w-full rounded-xl", children: [
+        /* @__PURE__ */ jsx42(
           CollectibleAsset,
           {
             name: collectibleMetadata?.name || "",
@@ -4465,7 +5338,7 @@ function CollectibleCard({
             assetSrcPrefixUrl
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx42(
           Footer,
           {
             name: collectibleMetadata?.name || "",
@@ -4478,10 +5351,10 @@ function CollectibleCard({
             decimals: collectibleMetadata?.decimals
           }
         ),
-        (highestOffer || lowestListing) && /* @__PURE__ */ jsx34("div", { className: "-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]", children: /* @__PURE__ */ jsx34(
+        (highestOffer || lowestListing) && /* @__PURE__ */ jsx42("div", { className: "-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]", children: /* @__PURE__ */ jsx42(
           ActionButton,
           {
-            chainId: String(chainId),
+            chainId,
             collectionAddress,
             tokenId: collectibleId,
             orderbookKind,
@@ -4498,13 +5371,13 @@ function CollectibleCard({
 }
 
 export {
+  useBuyModal,
   useSuccessfulPurchaseModal,
   useTransferModal,
   ModalProvider,
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
-  useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-HTFORA4Q.js.map
+//# sourceMappingURL=chunk-BN36GABQ.js.map