@0xsequence/marketplace-sdk 0.3.11 → 0.4.1

package/dist/{chunk-IRN77TJW.js → chunk-IOTKCWOB.js}

@@ -1,13 +1,15 @@
 "use client"
 import {
-  ActionModal
-} from "./chunk-NMCGA2TB.js";
+  ActionModal,
+  CustomSelect,
+  useCurrencyBalance
+} from "./chunk-UPLTM63S.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
-} from "./chunk-FFCNYF3S.js";
+} from "./chunk-T5T6JNB2.js";
 import {
   actionWrapper,
   closeButton,
@@ -31,7 +33,7 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-L6GSYPCR.js";
+} from "./chunk-RZSZNVEH.js";
 import {
   AlertMessage,
   switchChainModal_default,
@@ -49,24 +51,24 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-B3LFJJVS.js";
+} from "./chunk-MIYMMP2K.js";
 import {
   iconVariants
-} from "./chunk-SBVLWSRZ.js";
+} from "./chunk-LF44FCG5.js";
 import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-KRMV6FJE.js";
+} from "./chunk-KNX2LER4.js";
 import {
   balanceQueries,
   collectableKeys,
   getQueryClient
-} from "./chunk-3LOJQCTV.js";
+} from "./chunk-5GDO4ZBC.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
-} from "./chunk-E3ZFT6WR.js";
+} from "./chunk-EVRILXOH.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
@@ -93,6 +95,7 @@ var AccountModal = observer(function AccountModal2() {
 import { Box as Box3, Text as Text2, TokenImage } from "@0xsequence/design-system";
 import { Show, observer as observer2, useSelector } from "@legendapp/state/react";
 import { useEffect } from "react";
+import { formatUnits, parseUnits } from "viem";
 
 // src/react/ui/modals/_internal/components/quantityInput/index.tsx
 import { Box as Box2, IconButton, NumericInput } from "@0xsequence/design-system";
@@ -108,14 +111,14 @@ function QuantityInput({
     const decimalParts = sanitizedValue.split(".");
     let formattedValue = sanitizedValue;
     if (decimalParts.length > 2) {
-      formattedValue = decimalParts[0] + "." + decimalParts[1];
+      formattedValue = `${decimalParts[0]}.${decimalParts[1]}`;
     }
     const finalValue = formatQuantity(formattedValue);
     $quantity.set(finalValue);
     validateQuantity(finalValue);
   }
   function validateQuantity(value) {
-    if (!value || value.trim() === "" || isNaN(Number(value))) {
+    if (!value || value.trim() === "" || Number.isNaN(Number(value))) {
       $invalidQuantity.set(true);
       return;
     }
@@ -128,7 +131,7 @@ function QuantityInput({
     $invalidQuantity.set(numValue <= 0 || numValue > Number(maxQuantity));
   }
   function formatQuantity(value) {
-    if (!value || isNaN(Number(value))) {
+    if (!value || Number.isNaN(Number(value))) {
       return "0";
     }
     const decimalParts = value.split(".");
@@ -238,7 +241,6 @@ var initialState = {
 var buyModal$ = observable2(initialState);
 
 // src/react/ui/modals/BuyModal/index.tsx
-import { formatUnits, parseUnits } from "viem";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var useBuyModal = (callbacks) => {
   return {
@@ -254,6 +256,7 @@ var BuyModalContent = () => {
   );
   const collectibleId = useSelector(buyModal$.state.order.tokenId);
   const modalId = useSelector(buyModal$.state.modalId);
+  const callbacks = useSelector(buyModal$.callbacks);
   const { data: collection } = useCollection({
     chainId,
     collectionAddress
@@ -261,9 +264,23 @@ var BuyModalContent = () => {
   const { buy, isLoading } = useBuyCollectable({
     chainId,
     collectionAddress,
-    onError: buyModal$.callbacks.get()?.onError,
+    enabled: buyModal$.isOpen.get(),
+    onSwitchChainRefused: () => {
+      buyModal$.close();
+    },
+    onError: (error) => {
+      if (callbacks?.onError) {
+        callbacks.onError(error);
+      } else {
+        console.debug("onError callback not provided", error);
+      }
+    },
     onSuccess: (hash) => {
-      buyModal$.callbacks.get()?.onSuccess?.(hash);
+      if (callbacks?.onSuccess) {
+        callbacks.onSuccess(hash);
+      } else {
+        console.debug("onSuccess callback not provided", hash);
+      }
       buyModal$.close();
     }
   });
@@ -272,7 +289,7 @@ var BuyModalContent = () => {
     collectionAddress,
     collectibleId
   });
-  if (modalId == 0 || !collection || !collectable || !buy) return null;
+  if (modalId === 0 || !collection || !collectable || !buy) return null;
   return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx3(
     CheckoutModal,
     {
@@ -336,7 +353,8 @@ var ERC1155QuantityModal = observer2(
     return /* @__PURE__ */ jsx3(
       ActionModal,
       {
-        store: buyModal$,
+        isOpen: buyModal$.isOpen.get(),
+        chainId: order.chainId,
         onClose: () => buyModal$.close(),
         title: "Select Quantity",
         ctas: [
@@ -382,6 +400,7 @@ var ERC1155QuantityModal = observer2(
 // src/react/ui/modals/CreateListingModal/index.tsx
 import { Box as Box14 } from "@0xsequence/design-system";
 import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { parseUnits as parseUnits3 } from "viem";
 import { useAccount as useAccount3 } from "wagmi";
 
@@ -391,19 +410,36 @@ var useCreateListing = ({
   onSuccess,
   onError,
   onTransactionSent,
+  onApprovalSuccess,
+  onSwitchChainRefused,
+  enabled,
   ...config
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [steps, setSteps] = useState(null);
-  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-    {
-      ...config,
-      type: "LISTING" /* LISTING */
+  const [executionState, setExecutionState] = useState(null);
+  const machineConfig = {
+    ...config,
+    type: "LISTING" /* LISTING */
+  };
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+    config: machineConfig,
+    enabled,
+    onSuccess: (hash) => {
+      setExecutionState(null);
+      onSuccess?.(hash);
     },
-    onSuccess,
-    onError,
-    onTransactionSent
-  );
+    onError: (error) => {
+      setExecutionState(null);
+      onError?.(error);
+    },
+    onTransactionSent,
+    onApprovalSuccess: (hash) => {
+      setExecutionState(null);
+      onApprovalSuccess?.(hash);
+    },
+    onSwitchChainRefused
+  });
   const loadSteps = useCallback(
     async (props) => {
       if (!machine) return;
@@ -413,16 +449,54 @@ var useCreateListing = ({
         setIsLoading(false);
         return;
       }
-      setSteps(generatedSteps);
+      setSteps({
+        ...generatedSteps,
+        approval: {
+          ...generatedSteps.approval,
+          isExecuting: executionState === "approval"
+        },
+        transaction: {
+          ...generatedSteps.transaction,
+          isExecuting: executionState === "listing"
+        }
+      });
       setIsLoading(false);
     },
-    [machine, onError]
+    [machine, executionState]
+  );
+  const handleStepExecution = useCallback(
+    async (type, execute) => {
+      if (!type) return;
+      setExecutionState(type);
+      try {
+        await execute();
+      } catch (error) {
+        setExecutionState(null);
+        throw error;
+      }
+    },
+    []
   );
   return {
     createListing: (props) => machine?.start(props),
     getListingSteps: (props) => ({
       isLoading,
-      steps,
+      steps: steps ? {
+        ...steps,
+        approval: {
+          ...steps.approval,
+          isExecuting: executionState === "approval",
+          execute: () => handleStepExecution("approval", () => steps.approval.execute())
+        },
+        transaction: {
+          ...steps.transaction,
+          isExecuting: executionState === "listing",
+          execute: () => handleStepExecution(
+            "listing",
+            () => steps.transaction.execute()
+          )
+        }
+      } : null,
       refreshSteps: () => loadSteps(props)
     }),
     isLoading: isMachineLoading
@@ -432,73 +506,60 @@ var useCreateListing = ({
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
 import { Box as Box4 } from "@0xsequence/design-system";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx4(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx4(Box4, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" }) });
+var ErrorModal = ({
+  isOpen,
+  chainId,
+  onClose,
+  title
+}) => /* @__PURE__ */ jsx4(
+  ActionModal,
+  {
+    isOpen,
+    chainId,
+    onClose,
+    title,
+    ctas: [],
+    children: /* @__PURE__ */ jsx4(Box4, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" })
+  }
+);
 
 // src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx
 import { Box as Box5, Spinner } from "@0xsequence/design-system";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx5(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx5(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx5(Spinner, { size: "lg" }) }) });
+var LoadingModal = ({
+  isOpen,
+  chainId,
+  onClose,
+  title
+}) => /* @__PURE__ */ jsx5(
+  ActionModal,
+  {
+    isOpen,
+    chainId,
+    onClose,
+    title,
+    ctas: [],
+    children: /* @__PURE__ */ jsx5(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx5(Spinner, { size: "lg" }) })
+  }
+);
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { useState as useState2 } from "react";
 import { Box as Box6, Skeleton, Text as Text3 } from "@0xsequence/design-system";
 import { observer as observer3 } from "@legendapp/state/react";
-import { addDays, isSameDay } from "date-fns";
-
-// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
-import { CheckmarkIcon, ChevronDownIcon } from "@0xsequence/design-system";
-import * as Select from "@radix-ui/react-select";
-import React from "react";
-
-// src/react/ui/components/_internals/custom-select/styles.css.ts
-var content = "fyvr11eg fyvr11es fyvr11f4 fyvr11fg fyvr11hc fyvr11i0 fyvr11g0 fyvr11go fyvr11q0 fyvr11qg fyvr12q3 fyvr12ir fyvr1243 fyvr12bf fyvr12rr fyvr12kf fyvr125r fyvr12d3 fyvr11xx fyvr11r0 fyvr11rt";
-var item = "styles_item__1ddtujk2 fyvr11h0 fyvr11ho fyvr11fo fyvr11gc fyvr1v4 fyvr1x8 fyvr1zs fyvr111g fyvr11ik fyvr12w9 fyvr11l8 fyvr11ow fyvr14g fyvr11m4 fyvr11rc fyvr12zf";
-var itemIndicator = "fyvr11lw fyvr1qk fyvr11lk fyvr11ow fyvr11no";
-var trigger = "fyvr11hk fyvr11i8 fyvr11g8 fyvr11gw fyvr1zg fyvr111k fyvr11lk fyvr11ow fyvr11no fyvr11ik fyvr14g fyvr11cg fyvr11wr fyvr12w9 fyvr12zf fyvr12s9 fyvr11a4";
-
-// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxs4(Select.Item, { className: item, ...props, ref: forwardedRef, children: [
-    /* @__PURE__ */ jsx6(Select.ItemText, { children }),
-    /* @__PURE__ */ jsx6(Select.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx6(CheckmarkIcon, { size: "xs" }) })
-  ] });
-});
-var CustomSelect = ({
-  items,
-  value,
-  onValueChange,
-  defaultValue
-}) => {
-  return /* @__PURE__ */ jsxs4(Select.Root, { onValueChange, defaultValue, children: [
-    /* @__PURE__ */ jsxs4(Select.Trigger, { className: trigger, value, children: [
-      /* @__PURE__ */ jsx6(Select.Value, {}),
-      /* @__PURE__ */ jsx6(Select.Icon, { children: /* @__PURE__ */ jsx6(ChevronDownIcon, { size: "xs" }) })
-    ] }),
-    /* @__PURE__ */ jsx6(Select.Portal, { children: /* @__PURE__ */ jsx6(Select.Content, { className: content, children: /* @__PURE__ */ jsx6(Select.Viewport, { children: items.map((item2, index) => /* @__PURE__ */ jsx6(
-      CustomSelectItem,
-      {
-        value: item2.value,
-        disabled: item2.disabled,
-        children: item2.label
-      },
-      index
-    )) }) }) })
-  ] });
-};
+import { addDays } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
 import { Button as Button2 } from "@0xsequence/design-system";
-import { Content as Content2, Portal as Portal2, Root as Root2, Trigger as Trigger2 } from "@radix-ui/react-popover";
+import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
 import { format } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendar/index.tsx
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Calendar({ ...props }) {
   const { selectedDate, setSelectedDate } = props;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     DayPicker,
     {
       disabled: {
@@ -520,7 +581,7 @@ function Calendar({ ...props }) {
           margin: 0,
           color: "hsl(var(--foreground))",
           background: "hsl(var(--background))",
-          border: `1px solid hsl(var(--border))`,
+          border: "1px solid hsl(var(--border))",
           borderRadius: "var(--radius)",
           padding: "0.5rem",
           position: "relative"
@@ -546,13 +607,13 @@ Calendar.displayName = "Calendar";
 var calendar_default = Calendar;
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function CalendarPopover({
   selectedDate,
   setSelectedDate
 }) {
-  return /* @__PURE__ */ jsxs5(Root2, { children: [
-    /* @__PURE__ */ jsx8(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs4(Root, { children: [
+    /* @__PURE__ */ jsx7(Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(
       Button2,
       {
         leftIcon: CalendarIcon_default,
@@ -562,7 +623,7 @@ function CalendarPopover({
         shape: "square"
       }
     ) }),
-    /* @__PURE__ */ jsx8(Portal2, { children: /* @__PURE__ */ jsx8(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(Content, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx7(
       calendar_default,
       {
         selectedDate,
@@ -574,7 +635,8 @@ function CalendarPopover({
 }
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState2 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -607,12 +669,12 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   $date
 }) {
   const defaultRange = "1_week";
-  const [range, setRange] = useState2(defaultRange);
-  function handleSelectPresetRange(range2) {
-    setRange(range2);
+  const [selectedRange, setSelectedRange] = useState2(defaultRange);
+  function handleSelectPresetRange(range) {
     const presetRange = Object.values(PRESET_RANGES).find(
-      (preset) => preset.value === range2
+      (preset) => preset.value === range
     );
+    setSelectedRange(range);
     if (!presetRange) {
       return;
     }
@@ -620,19 +682,13 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
     $date.set(newDate);
   }
   function handleDateValueChange(date) {
-    const presetRange = Object.values(PRESET_RANGES).find(
-      (preset) => isSameDay(new Date(date), addDays(/* @__PURE__ */ new Date(), preset.offset))
-    );
-    if (presetRange) {
-      setRange(presetRange.value);
-    }
     $date.set(date);
   }
   if (!$date.get()) {
-    return /* @__PURE__ */ jsx9(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+    return /* @__PURE__ */ jsx8(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
-  return /* @__PURE__ */ jsxs6(Box6, { width: "full", position: "relative", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs5(Box6, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx8(
       Text3,
       {
         fontSize: "small",
@@ -644,7 +700,7 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs5(
       Box6,
       {
         className,
@@ -654,28 +710,31 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
         gap: "2",
         marginTop: "0.5",
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx8(
             Box6,
             {
               position: "absolute",
               right: "0",
               onClick: (e) => e.stopPropagation(),
               zIndex: "10",
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx8(
                 CustomSelect,
                 {
                   items: Object.values(PRESET_RANGES).map((preset) => ({
                     label: preset.label,
-                    value: preset.value
+                    value: preset.value,
+                    content: preset.label
                   })),
-                  value: range,
                   onValueChange: (value) => handleSelectPresetRange(value),
-                  defaultValue: defaultRange
+                  defaultValue: {
+                    value: selectedRange,
+                    content: selectedRange
+                  }
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx8(
             CalendarPopover,
             {
               selectedDate: $date.get(),
@@ -691,7 +750,7 @@ var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
 import { Text as Text4 } from "@0xsequence/design-system";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
   collectionAddress,
@@ -716,7 +775,7 @@ function FloorPriceText({
     decimals: price.currency.decimals
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Text4,
     {
       fontSize: "small",
@@ -731,12 +790,59 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput as NumericInput2 } from "@0xsequence/design-system";
+import { Box as Box8, NumericInput as NumericInput2, Text as Text5 } from "@0xsequence/design-system";
 import { observer as observer5 } from "@legendapp/state/react";
-import { useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { parseUnits as parseUnits2 } from "viem";
 import { useAccount as useAccount2 } from "wagmi";
 
+// src/react/ui/modals/_internal/components/currencyImage/index.tsx
+import { Box as Box7, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { useState as useState3 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function CurrencyImage({
+  $listingPrice
+}) {
+  const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState3(null);
+  if (imageLoadErrorCurrencyAddresses?.includes(
+    $listingPrice.currency.contractAddress.get()
+  )) {
+    return /* @__PURE__ */ jsx10(
+      Box7,
+      {
+        width: "3",
+        height: "3",
+        borderRadius: "circle",
+        background: "backgroundSecondary"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10(
+    TokenImage2,
+    {
+      src: $listingPrice.currency.imageUrl.get(),
+      onError: () => {
+        const listingPrice = $listingPrice?.get();
+        if (listingPrice) {
+          setImageLoadErrorCurrencyAddresses((prev) => {
+            if (!prev)
+              return [listingPrice.currency.contractAddress];
+            if (!prev.includes(listingPrice.currency.contractAddress)) {
+              return [
+                ...prev,
+                listingPrice.currency.contractAddress
+              ];
+            }
+            return prev;
+          });
+        }
+      },
+      size: "xs"
+    }
+  );
+}
+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";
@@ -755,22 +861,17 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
   });
   useEffect2(() => {
     if (currencies && currencies.length > 0 && !selectedCurrency$.get()?.contractAddress) {
-      console.debug("Setting default currency", currencies[0]);
       selectedCurrency$.set(currencies[0]);
     }
   }, [currencies]);
-  console.debug("CurrencyOptionsSelect", {
-    currencies,
-    currenciesLoading,
-    currency
-  });
   if (!currencies || currenciesLoading || !currency.symbol) {
     return /* @__PURE__ */ jsx11(Skeleton2, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
   const options = currencies.map(
     (currency2) => ({
       label: currency2.symbol,
-      value: currency2.contractAddress
+      value: currency2.contractAddress,
+      content: currency2.symbol
     })
   );
   const onChange = (value) => {
@@ -783,111 +884,23 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
     CustomSelect,
     {
       items: options,
-      value: currency.symbol,
       onValueChange: onChange,
-      defaultValue: currency.contractAddress
+      defaultValue: {
+        value: currency.contractAddress,
+        content: currency.symbol
+      }
     }
   );
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
-// src/react/hooks/useCurrencyBalance.tsx
-import { useQuery } from "@tanstack/react-query";
-import { erc20Abi, formatUnits as formatUnits2, zeroAddress } from "viem";
-function useCurrencyBalance({
-  currencyAddress,
-  chainId,
-  userAddress
-}) {
-  const publicClient = getPublicRpcClient(chainId);
-  return useQuery({
-    queryKey: ["balance", currencyAddress, chainId, userAddress],
-    queryFn: async () => {
-      if (!userAddress) return null;
-      if (currencyAddress === zeroAddress) {
-        const balance2 = await publicClient.getBalance({
-          address: userAddress
-        });
-        return {
-          value: balance2,
-          formatted: formatUnits2(balance2, 18)
-        };
-      }
-      const [balance, decimals] = await Promise.all([
-        publicClient.readContract({
-          address: currencyAddress,
-          abi: erc20Abi,
-          functionName: "balanceOf",
-          args: [userAddress]
-        }),
-        publicClient.readContract({
-          address: currencyAddress,
-          abi: erc20Abi,
-          functionName: "decimals"
-        })
-      ]);
-      return {
-        value: balance,
-        formatted: formatUnits2(balance, decimals)
-      };
-    },
-    enabled: !!userAddress && !!chainId && !!currencyAddress
-  });
-}
-
-// src/react/ui/modals/_internal/components/currencyImage/index.tsx
-import { Box as Box7, TokenImage as TokenImage2 } from "@0xsequence/design-system";
-import { useState as useState3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function CurrencyImage({
-  $listingPrice
-}) {
-  const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState3(null);
-  if (imageLoadErrorCurrencyAddresses?.includes(
-    $listingPrice.currency.contractAddress.get()
-  )) {
-    return /* @__PURE__ */ jsx12(
-      Box7,
-      {
-        width: "3",
-        height: "3",
-        borderRadius: "circle",
-        background: "backgroundSecondary"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx12(
-    TokenImage2,
-    {
-      src: $listingPrice.currency.imageUrl.get(),
-      onError: () => {
-        const listingPrice = $listingPrice?.get();
-        if (listingPrice) {
-          setImageLoadErrorCurrencyAddresses((prev) => {
-            if (!prev)
-              return [listingPrice.currency.contractAddress];
-            if (!prev.includes(listingPrice.currency.contractAddress)) {
-              return [
-                ...prev,
-                listingPrice.currency.contractAddress
-              ];
-            }
-            return prev;
-          });
-        }
-      },
-      size: "xs"
-    }
-  );
-}
-var currencyImage_default = CurrencyImage;
-
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var PriceInput = observer5(function PriceInput2({
   chainId,
   collectionAddress,
   $listingPrice,
+  onPriceChange,
   checkBalance
 }) {
   const [balanceError, setBalanceError] = useState4("");
@@ -899,6 +912,16 @@ var PriceInput = observer5(function PriceInput2({
   });
   const currencyDecimals = $listingPrice.currency.decimals.get();
   const [value, setValue] = useState4("");
+  const changeListingPrice = (value2) => {
+    setValue(value2);
+    try {
+      const parsedAmount = parseUnits2(value2, Number(currencyDecimals));
+      $listingPrice.amountRaw.set(parsedAmount.toString());
+      onPriceChange?.();
+    } catch {
+      $listingPrice.amountRaw.set("0");
+    }
+  };
   const checkInsufficientBalance = (priceAmountRaw) => {
     const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance?.value || 0);
     if (!checkBalance) return;
@@ -910,14 +933,14 @@ var PriceInput = observer5(function PriceInput2({
       checkBalance.callback(false);
     }
   };
-  const changeListingPrice = (value2) => {
-    setValue(value2);
-    const parsedAmount = parseUnits2(value2, Number(currencyDecimals));
-    $listingPrice.amountRaw.set(parsedAmount.toString());
-    checkBalance && checkInsufficientBalance(parsedAmount.toString());
-  };
-  return /* @__PURE__ */ jsxs7(Box8, { className: priceInputWrapper, position: "relative", children: [
-    /* @__PURE__ */ jsx13(
+  useEffect3(() => {
+    const priceAmountRaw = $listingPrice.amountRaw.get();
+    if (priceAmountRaw && priceAmountRaw !== "0") {
+      checkInsufficientBalance(priceAmountRaw);
+    }
+  }, [$listingPrice.currency.get()]);
+  return /* @__PURE__ */ jsxs6(Box8, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx12(
       Box8,
       {
         className: priceInputCurrencyImage,
@@ -925,17 +948,17 @@ var PriceInput = observer5(function PriceInput2({
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx13(currencyImage_default, { $listingPrice })
+        children: /* @__PURE__ */ jsx12(currencyImage_default, { $listingPrice })
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx12(
       NumericInput2,
       {
         name: "listingPrice",
         decimals: currencyDecimals,
         label: "Enter price",
         labelLocation: "top",
-        controls: /* @__PURE__ */ jsx13(
+        controls: /* @__PURE__ */ jsx12(
           currencyOptionsSelect_default,
           {
             selectedCurrency$: $listingPrice?.currency,
@@ -948,19 +971,30 @@ var PriceInput = observer5(function PriceInput2({
         width: "full"
       }
     ),
-    balanceError && /* @__PURE__ */ jsx13(Box8, { color: "negative", fontSize: "small", children: balanceError })
+    balanceError && /* @__PURE__ */ jsx12(
+      Text5,
+      {
+        color: "negative",
+        fontSize: "xsmall",
+        fontFamily: "body",
+        fontWeight: "semibold",
+        position: "absolute",
+        style: { bottom: "-13px" },
+        children: balanceError
+      }
+    )
   ] });
 });
 var priceInput_default = PriceInput;
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box9, Image, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
+import { Box as Box9, Image, Skeleton as Skeleton3, Text as Text6 } 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 jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -973,28 +1007,29 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs8(Box9, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx14(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs8(Box9, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/2", height: "3" })
+    return /* @__PURE__ */ jsxs7(Box9, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx13(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs7(Box9, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx13(Skeleton3, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx13(Skeleton3, { width: "1/2", height: "3" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs8(Box9, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs7(Box9, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx13(
       Image,
       {
         src: collectable?.image || chess_tile_default,
         alt: collectable?.name,
         width: "9",
         height: "9",
-        borderRadius: "xs"
+        borderRadius: "xs",
+        style: { objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ jsxs8(Box9, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx14(
-        Text5,
+    /* @__PURE__ */ jsxs7(Box9, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx13(
+        Text6,
         {
           fontSize: "small",
           color: "text80",
@@ -1003,8 +1038,8 @@ function TokenPreview({
           children: collectionName
         }
       ),
-      /* @__PURE__ */ jsx14(
-        Text5,
+      /* @__PURE__ */ jsx13(
+        Text6,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1018,15 +1053,16 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton4, Text as Text6 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits3 } from "viem";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box10, Image as Image2, Skeleton as Skeleton4, Text as Text7 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits2 } from "viem";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
   collectionAddress,
   chainId,
   price,
+  showPlaceholderPrice,
   currencyImageUrl
 }) {
   const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
@@ -1039,14 +1075,14 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
-  if (royaltyPercentage !== void 0 && formattedAmount) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toString();
+  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
+  if (royaltyPercentage !== void 0 && formattedAmount && price) {
+    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toFixed(price.currency.decimals);
   }
-  if (marketplaceFeePercentage !== void 0 && formattedAmount) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toString();
+  if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
+    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     Box10,
     {
       width: "full",
@@ -1054,11 +1090,11 @@ function TransactionDetails({
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx15(Text6, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs9(Box10, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx15(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx15(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text6, { fontSize: "small", color: "text100", fontFamily: "body", children: [
-            formattedAmount,
+        /* @__PURE__ */ jsx14(Text7, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs8(Box10, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx14(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
+          priceLoading ? /* @__PURE__ */ jsx14(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs8(Text7, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+            showPlaceholderPrice ? "0" : formattedAmount,
             " ",
             price.currency.symbol
           ] })
@@ -1073,32 +1109,34 @@ import {
   CloseIcon,
   IconButton as IconButton2,
   Skeleton as Skeleton6,
-  Text as Text10
+  Text as Text11
 } from "@0xsequence/design-system";
+import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
 import { observer as observer7 } from "@legendapp/state/react";
-import { Close, Content as Content3, Overlay, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { Close, Content as Content2, Overlay, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 import { WaitForTransactionReceiptTimeoutError } from "viem";
 
 // src/react/ui/modals/_internal/components/transaction-footer/index.tsx
 import { networks } from "@0xsequence/network";
-import { Box as Box11, Spinner as Spinner2, Text as Text7 } from "@0xsequence/design-system";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box11, Text as Text8, Spinner as Spinner2 } from "@0xsequence/design-system";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function TransactionFooter({
   transactionHash,
+  orderId,
   isConfirming,
   isConfirmed,
   isFailed,
   isTimeout,
   chainId
 }) {
-  const icon = isConfirming && /* @__PURE__ */ jsx16(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx16(PositiveCircleIcon_default, { size: "md" });
-  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed" || isTimeout && "Transaction took longer than expected";
+  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx15(PositiveCircleIcon_default, { size: "md" }) || isConfirming && /* @__PURE__ */ jsx15(Spinner2, { 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__ */ jsxs10(Box11, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs9(Box11, { display: "flex", alignItems: "center", children: [
     icon,
-    /* @__PURE__ */ jsx16(
-      Text7,
+    /* @__PURE__ */ jsx15(
+      Text8,
       {
         color: "text50",
         fontSize: "normal",
@@ -1108,7 +1146,7 @@ function TransactionFooter({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       Box11,
       {
         as: "a",
@@ -1119,15 +1157,15 @@ function TransactionFooter({
         rel: "noopener noreferrer",
         textAlign: "right",
         textDecoration: "none",
-        children: /* @__PURE__ */ jsx16(
-          Text7,
+        children: /* @__PURE__ */ jsx15(
+          Text8,
           {
             color: "polygonLight",
             textAlign: "right",
             fontSize: "normal",
             fontWeight: "medium",
             fontFamily: "body",
-            children: truncateMiddle(transactionHash, 4, 4)
+            children: transactionHash && truncateMiddle(transactionHash, 4, 4)
           }
         )
       }
@@ -1141,32 +1179,32 @@ import {
   Image as Image3,
   NetworkImage,
   Skeleton as Skeleton5,
-  Text as Text9
+  Text as Text10
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits4 } from "viem";
+import { formatUnits as formatUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box12, Text as Text8 } from "@0xsequence/design-system";
+import { Box as Box12, Text as Text9 } from "@0xsequence/design-system";
 import { formatDistanceToNow } from "date-fns";
-import { useEffect as useEffect3, useState as useState5 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function TimeAgo({ date }) {
   const [timeAgo, setTimeAgo] = useState5("");
-  useEffect3(() => {
+  useEffect4(() => {
     const interval = setInterval(() => {
       setTimeAgo(formatDistanceToNow(date));
     }, 1e3);
     return () => clearInterval(interval);
   }, [date]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     Box12,
     {
       flexGrow: "1",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx17(Text8, { color: "text50", fontSize: "small", children: timeAgo })
+      children: /* @__PURE__ */ jsx16(Text9, { color: "text50", fontSize: "small", children: timeAgo })
     }
   );
 }
@@ -1177,6 +1215,7 @@ var initialState2 = {
   isOpen: false,
   open: ({
     hash,
+    orderId,
     price,
     collectionAddress,
     chainId,
@@ -1190,6 +1229,7 @@ var initialState2 = {
     transactionStatusModal$.state.set({
       ...transactionStatusModal$.state.get(),
       hash,
+      orderId,
       price,
       collectionAddress,
       chainId,
@@ -1210,6 +1250,7 @@ var initialState2 = {
   },
   state: {
     hash: void 0,
+    orderId: void 0,
     status: "PENDING",
     price: void 0,
     collectionAddress: "",
@@ -1224,9 +1265,6 @@ var initialState2 = {
 };
 var transactionStatusModal$ = observable3(initialState2);
 
-// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-import { useMemo } from "react";
-
 // src/react/ui/modals/_internal/components/transactionPreview/consts.ts
 var TRANSACTION_TITLES = {
   SELL: {
@@ -1262,22 +1300,21 @@ var TRANSACTION_TITLES = {
 };
 
 // src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-function useTransactionPreviewTitle(status, type) {
-  return useMemo(() => {
-    if (!type) return "";
-    const { isConfirming, isConfirmed, isFailed } = status;
-    const titles = TRANSACTION_TITLES[type];
-    if (isConfirming) return titles.confirming;
-    if (isConfirmed) return titles.confirmed;
-    if (isFailed) return titles.failed;
-    return "";
-  }, [status, type]);
+function useTransactionPreviewTitle(orderId, status, type) {
+  if (!type) return "";
+  const { isConfirming, isConfirmed, isFailed } = status;
+  const titles = TRANSACTION_TITLES[type];
+  if (isConfirmed || orderId) return titles.confirmed;
+  if (isConfirming) return titles.confirming;
+  if (isFailed) return titles.failed;
+  return "";
 }
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var TransactionPreview = observer6(
   ({
+    orderId,
     price,
     collectionAddress,
     chainId,
@@ -1291,6 +1328,7 @@ var TransactionPreview = observer6(
   }) => {
     const { type } = transactionStatusModal$.state.get();
     const title = useTransactionPreviewTitle(
+      orderId,
       { isConfirmed, isConfirming, isFailed, isTimeout },
       type
     );
@@ -1301,14 +1339,14 @@ var TransactionPreview = observer6(
     const collectibleImage2 = collectible?.image;
     const collectibleName = collectible?.name;
     const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits4(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    const priceFormatted = price ? formatUnits3(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
-      return /* @__PURE__ */ jsx18(Box13, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx18(Skeleton5, { style: { width: "100%", height: "100%" } }) });
+      return /* @__PURE__ */ jsx17(Box13, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton5, { style: { width: "100%", height: "100%" } }) });
     }
-    return /* @__PURE__ */ jsxs11(Box13, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs11(Box13, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx18(
-          Text9,
+    return /* @__PURE__ */ jsxs10(Box13, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs10(Box13, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx17(
+          Text10,
           {
             color: "text50",
             fontSize: "small",
@@ -1318,11 +1356,11 @@ var TransactionPreview = observer6(
             children: title
           }
         ),
-        /* @__PURE__ */ jsx18(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx18(TimeAgo, { date: /* @__PURE__ */ new Date() })
+        /* @__PURE__ */ jsx17(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx17(TimeAgo, { date: /* @__PURE__ */ new Date() })
       ] }),
-      /* @__PURE__ */ jsxs11(Box13, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsxs10(Box13, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx17(
           Image3,
           {
             src: collectibleImage2 || chess_tile_default,
@@ -1334,7 +1372,7 @@ var TransactionPreview = observer6(
             style: { objectFit: "cover" }
           }
         ),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs10(
           Box13,
           {
             display: "flex",
@@ -1342,8 +1380,8 @@ var TransactionPreview = observer6(
             alignItems: "flex-start",
             gap: "0.5",
             children: [
-              /* @__PURE__ */ jsx18(
-                Text9,
+              /* @__PURE__ */ jsx17(
+                Text10,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1352,11 +1390,11 @@ var TransactionPreview = observer6(
                   children: collectibleName
                 }
               ),
-              /* @__PURE__ */ jsx18(Text9, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
+              /* @__PURE__ */ jsx17(Text10, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
             ]
           }
         ),
-        price && /* @__PURE__ */ jsxs11(
+        price && /* @__PURE__ */ jsxs10(
           Box13,
           {
             flexGrow: "1",
@@ -1365,9 +1403,9 @@ var TransactionPreview = observer6(
             justifyContent: "flex-end",
             gap: "1",
             children: [
-              /* @__PURE__ */ jsx18(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-              /* @__PURE__ */ jsxs11(
-                Text9,
+              /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
+              /* @__PURE__ */ jsxs10(
+                Text10,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1376,7 +1414,7 @@ var TransactionPreview = observer6(
                   children: [
                     priceFormatted,
                     " ",
-                    price.currency.symbol
+                    price?.currency.symbol
                   ]
                 }
               )
@@ -1394,9 +1432,6 @@ var closeButton3 = "fyvr11lw fyvr1tc fyvr1mo";
 var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
 var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
 
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
-
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
 function getFormattedType(transactionType, verb = false) {
   switch (transactionType) {
@@ -1417,48 +1452,59 @@ function getFormattedType(transactionType, verb = false) {
   }
 }
 
-// src/react/ui/modals/_internal/components/transactionStatusModal/util/getTitle.ts
-function getTransactionStatusModalTitle({
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
+function getTransactionStatusModalMessage({
   transactionStatus,
-  transactionType
+  transactionType,
+  collectibleName,
+  orderId
 }) {
+  const hideCollectibleName = transactionType === "CANCEL";
+  if (orderId) {
+    return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It's been confirmed on the blockchain!`;
+  }
   switch (transactionStatus) {
     case "PENDING":
-      return `Your ${getFormattedType(transactionType)} is processing`;
+      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It should be confirmed on the blockchain shortly.`;
     case "SUCCESS":
-      return `Your ${getFormattedType(transactionType)} has processed`;
+      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It\u2019s been confirmed on the blockchain!`;
     case "FAILED":
-      return `Your ${getFormattedType(transactionType)} has failed`;
+      return `Your ${getFormattedType(transactionType)} has failed.`;
     case "TIMEOUT":
-      return `Your ${getFormattedType(transactionType)} takes too long`;
+      return `Your ${getFormattedType(transactionType)} takes too long. Click the link below to track it on the explorer.`;
     default:
       return "Your transaction is processing";
   }
 }
 
-// src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
-function getTransactionStatusModalMessage({
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getTitle.ts
+function getTransactionStatusModalTitle({
   transactionStatus,
   transactionType,
-  collectibleName
+  orderId
 }) {
-  const hideCollectibleName = transactionType === "CANCEL";
+  if (transactionType === void 0) {
+    return "";
+  }
+  if (orderId) {
+    return `Your ${getFormattedType(transactionType)} has processed`;
+  }
   switch (transactionStatus) {
     case "PENDING":
-      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It should be confirmed on the blockchain shortly.`;
+      return `Your ${getFormattedType(transactionType)} is processing`;
     case "SUCCESS":
-      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It\u2019s been confirmed on the blockchain!`;
+      return `Your ${getFormattedType(transactionType)} has processed`;
     case "FAILED":
-      return `Your ${getFormattedType(transactionType)} has failed.`;
+      return `Your ${getFormattedType(transactionType)} has failed`;
     case "TIMEOUT":
-      return `Your ${getFormattedType(transactionType)} takes too long. Click the link below to track it on the explorer.`;
+      return `Your ${getFormattedType(transactionType)} takes too long`;
     default:
       return "Your transaction is processing";
   }
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var useTransactionStatusModal = () => {
   return {
     show: (args) => {
@@ -1472,6 +1518,7 @@ var TransactionStatusModal = observer7(() => {
   const {
     type,
     hash,
+    orderId,
     price,
     collectionAddress,
     chainId,
@@ -1485,32 +1532,28 @@ var TransactionStatusModal = observer7(() => {
     chainId,
     collectibleId
   });
-  const [transactionStatus, setTransactionStatus] = useState6("PENDING");
-  const title = getTransactionStatusModalTitle({
-    transactionStatus,
-    transactionType: type
-  });
-  const message = getTransactionStatusModalMessage({
-    transactionStatus,
-    transactionType: type,
-    collectibleName: collectible?.name || ""
-  });
-  const { onError, onSuccess } = callbacks || {};
-  const queryClient = getQueryClient();
-  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
-    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-    hash
-  });
-  useEffect4(() => {
+  const [transactionStatus, setTransactionStatus] = useState6(
+    orderId ? "SUCCESS" : "PENDING"
+  );
+  useEffect5(() => {
     if (!transactionStatusModal$.isOpen.get()) return;
     console.log("Waiting for transaction receipt ...");
     waitForTransactionReceiptPromise?.then((receipt) => {
       if (receipt.status === "success") {
         console.log("receipt", receipt);
         setTransactionStatus("SUCCESS");
+        if (callbacks?.onSuccess) {
+          callbacks.onSuccess(hash || "0x");
+        } else {
+          console.debug("onSuccess callback not provided:", hash);
+        }
       }
     }).catch((error) => {
+      if (callbacks?.onError) {
+        callbacks.onError(error);
+      } else {
+        console.debug("onError callback not provided:", error);
+      }
       if (error instanceof WaitForTransactionReceiptTimeoutError) {
         setTransactionStatus("TIMEOUT");
         return;
@@ -1523,12 +1566,36 @@ var TransactionStatusModal = observer7(() => {
     return () => {
       setTransactionStatus("PENDING");
     };
-  }, [onSuccess, onError, transactionStatusModal$.isOpen.get()]);
-  return /* @__PURE__ */ jsx19(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs12(Portal3, { children: [
-    /* @__PURE__ */ jsx19(Overlay, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs12(Content3, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx19(
-        Text10,
+  }, [
+    callbacks?.onSuccess,
+    callbacks?.onError,
+    transactionStatusModal$.isOpen.get()
+  ]);
+  if (!type) {
+    return null;
+  }
+  const title = getTransactionStatusModalTitle({
+    transactionStatus,
+    transactionType: type,
+    orderId
+  });
+  const message = getTransactionStatusModalMessage({
+    transactionStatus,
+    transactionType: type,
+    collectibleName: collectible?.name || "",
+    orderId
+  });
+  const queryClient = getQueryClient();
+  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
+    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+    hash: hash || "0x"
+  });
+  return /* @__PURE__ */ jsx18(Root2, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs11(Portal2, { children: [
+    /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlay3 }),
+    /* @__PURE__ */ jsxs11(Content2, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx18(
+        Text11,
         {
           fontSize: "large",
           fontWeight: "bold",
@@ -1536,11 +1603,12 @@ var TransactionStatusModal = observer7(() => {
           fontFamily: "body",
           children: title
         }
-      ) : /* @__PURE__ */ jsx19(Skeleton6, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx19(Text10, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx19(Skeleton6, { width: "20", height: "4" }),
-      /* @__PURE__ */ jsx19(
+      ) : /* @__PURE__ */ jsx18(Skeleton6, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx18(Text11, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton6, { width: "20", height: "4" }),
+      /* @__PURE__ */ jsx18(
         transactionPreview_default,
         {
+          orderId,
           price,
           collectionAddress,
           chainId,
@@ -1553,10 +1621,11 @@ var TransactionStatusModal = observer7(() => {
           isTimeout: transactionStatus === "TIMEOUT"
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18(
         TransactionFooter,
         {
           transactionHash: hash,
+          orderId,
           isConfirming: transactionStatus === "PENDING",
           isConfirmed: transactionStatus === "SUCCESS",
           isFailed: transactionStatus === "FAILED",
@@ -1564,7 +1633,7 @@ var TransactionStatusModal = observer7(() => {
           chainId
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18(
         Close,
         {
           onClick: () => {
@@ -1572,7 +1641,7 @@ var TransactionStatusModal = observer7(() => {
           },
           className: closeButton3,
           asChild: true,
-          children: /* @__PURE__ */ jsx19(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+          children: /* @__PURE__ */ jsx18(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
         }
       )
     ] })
@@ -1592,9 +1661,12 @@ var initialState3 = {
   collectionName: "",
   collectionType: void 0,
   listingPrice: {
-    amountRaw: "0",
+    // to see if approval is needed when modal opens
+    amountRaw: "1",
     currency: {}
   },
+  // to track if the user has changed the price, so we know if it's 1 default or user input
+  listingPriceChanged: false,
   quantity: "1",
   invalidQuantity: false,
   expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
@@ -1619,7 +1691,7 @@ var initialState3 = {
 var createListingModal$ = observable4(initialState3);
 
 // src/react/ui/modals/CreateListingModal/index.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var useCreateListingModal = (callbacks) => {
   return {
     show: (args) => createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -1628,7 +1700,7 @@ var useCreateListingModal = (callbacks) => {
 };
 var CreateListingModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx20(Show2, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx20(Modal2, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx19(Show2, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx19(Modal2, { showTransactionStatusModal }) });
 };
 var Modal2 = observer8(
   ({
@@ -1639,9 +1711,12 @@ var Modal2 = observer8(
       collectionAddress,
       chainId,
       listingPrice,
+      listingPriceChanged,
       collectibleId,
-      orderbookKind
+      orderbookKind,
+      callbacks
     } = state;
+    const currencyAddress = listingPrice.currency.contractAddress;
     const {
       data: collectible,
       isLoading: collectableIsLoading,
@@ -1659,62 +1734,71 @@ var Modal2 = observer8(
       chainId,
       collectionAddress
     });
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState7(false);
     const { address } = useAccount3();
     const { data: balance } = useBalanceOfCollectible({
       chainId,
       collectionAddress,
       collectableId: collectibleId,
-      userAddress: address
+      userAddress: address ?? void 0
     });
-    const { getListingSteps, isLoading: machineLoading } = useCreateListing({
+    const { getListingSteps, isLoading: machineLoading, createListing } = useCreateListing({
       orderbookKind,
       chainId,
       collectionAddress,
-      onTransactionSent: (hash) => {
-        if (!hash) return;
+      enabled: createListingModal$.isOpen.get(),
+      onSwitchChainRefused: () => createListingModal$.close(),
+      onApprovalSuccess: () => setApprovalExecutedSuccess(true),
+      onTransactionSent: (hash, orderId) => {
+        if (!hash && !orderId) return;
         showTransactionStatusModal({
           hash,
+          orderId,
           collectionAddress,
           chainId,
           price: createListingModal$.listingPrice.get(),
           collectibleId,
           type: "LISTING" /* LISTING */,
-          queriesToInvalidate: collectableKeys.all
+          queriesToInvalidate: collectableKeys.all,
+          callbacks
         });
         createListingModal$.close();
-      },
-      onError: (error) => {
-        if (typeof createListingModal$.callbacks?.onError === "function") {
-          createListingModal$.onError(error);
-        } else {
-          console.debug("onError callback not provided:", error);
-        }
       }
     });
+    useEffect6(() => {
+      if (!currencyAddress) return;
+      refreshSteps();
+    }, [currencyAddress]);
     const handleStepExecution = async (execute) => {
       if (!execute) return;
       try {
         await refreshSteps();
         await execute();
       } catch (error) {
-        createListingModal$.onError?.(error);
+        if (callbacks?.onError) {
+          callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
     };
     if (collectableIsLoading || collectionIsLoading || machineLoading) {
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx19(
         LoadingModal,
         {
-          store: createListingModal$,
+          isOpen: createListingModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: createListingModal$.close,
           title: "List item for sale"
         }
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx19(
         ErrorModal,
         {
-          store: createListingModal$,
+          isOpen: createListingModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: createListingModal$.close,
           title: "List item for sale"
         }
@@ -1722,7 +1806,7 @@ var Modal2 = observer8(
     }
     const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
     const { isLoading, steps, refreshSteps } = getListingSteps({
-      contractType: collection.type,
+      contractType: collection?.type,
       listing: {
         tokenId: collectibleId,
         quantity: parseUnits3(
@@ -1734,31 +1818,45 @@ var Modal2 = observer8(
         pricePerToken: listingPrice.amountRaw
       }
     });
+    const approvalNeeded = steps?.approval.isPending;
     const ctas = [
       {
         label: "Approve TOKEN",
         onClick: () => handleStepExecution(() => steps?.approval.execute()),
-        hidden: !steps?.approval.isPending,
-        pending: steps?.approval.isExecuting,
+        hidden: !approvalNeeded || approvalExecutedSuccess,
+        pending: steps?.approval.isExecuting || isLoading,
         variant: "glass",
-        disabled: createListingModal$.invalidQuantity.get()
+        disabled: createListingModal$.invalidQuantity.get() || isLoading || !listingPriceChanged || listingPrice.amountRaw === "0" || steps?.transaction.isExecuting
       },
       {
         label: "List item for sale",
-        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+        onClick: () => createListing({
+          contractType: collection?.type,
+          listing: {
+            tokenId: collectibleId,
+            quantity: parseUnits3(
+              createListingModal$.quantity.get(),
+              collectible?.decimals || 0
+            ).toString(),
+            expiry: dateToUnixTime(createListingModal$.expiry.get()),
+            currencyAddress: listingPrice.currency.contractAddress,
+            pricePerToken: listingPrice.amountRaw
+          }
+        }),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: steps?.approval.isPending || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get()
+        disabled: !approvalExecutedSuccess && approvalNeeded || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get() || !listingPriceChanged
       }
     ];
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       ActionModal,
       {
-        store: createListingModal$,
+        isOpen: createListingModal$.isOpen.get(),
+        chainId: Number(chainId),
         onClose: () => createListingModal$.close(),
         title: "List item for sale",
         ctas,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx19(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1767,16 +1865,17 @@ var Modal2 = observer8(
               chainId
             }
           ),
-          /* @__PURE__ */ jsxs13(Box14, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs12(Box14, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+            /* @__PURE__ */ jsx19(
               priceInput_default,
               {
                 chainId,
                 collectionAddress,
-                $listingPrice: createListingModal$.listingPrice
+                $listingPrice: createListingModal$.listingPrice,
+                onPriceChange: () => createListingModal$.listingPriceChanged.set(true)
               }
             ),
-            !!listingPrice && /* @__PURE__ */ jsx20(
+            listingPrice.amountRaw !== "0" && listingPriceChanged && /* @__PURE__ */ jsx19(
               FloorPriceText,
               {
                 tokenId: collectibleId,
@@ -1786,7 +1885,7 @@ var Modal2 = observer8(
               }
             )
           ] }),
-          collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx20(
+          collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx19(
             QuantityInput,
             {
               $quantity: createListingModal$.quantity,
@@ -1795,14 +1894,15 @@ var Modal2 = observer8(
               maxQuantity: balance?.balance
             }
           ),
-          /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: createListingModal$.expiry }),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: createListingModal$.expiry }),
+          /* @__PURE__ */ jsx19(
             TransactionDetails,
             {
               collectibleId,
               collectionAddress,
               chainId,
               price: createListingModal$.listingPrice.get(),
+              showPlaceholderPrice: !listingPriceChanged,
               currencyImageUrl: listingPrice.currency.imageUrl
             }
           )
@@ -1814,28 +1914,45 @@ var Modal2 = observer8(
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
 import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 import { parseUnits as parseUnits4 } from "viem";
 
 // src/react/hooks/useMakeOffer.tsx
-import { useCallback as useCallback2, useState as useState7 } from "react";
+import { useCallback as useCallback2, useState as useState8 } from "react";
 var useMakeOffer = ({
   onSuccess,
   onError,
   onTransactionSent,
+  onApprovalSuccess,
+  onSwitchChainRefused,
+  enabled,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState7(false);
-  const [steps, setSteps] = useState7(null);
-  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-    {
-      ...config,
-      type: "OFFER" /* OFFER */
+  const [isLoading, setIsLoading] = useState8(false);
+  const [steps, setSteps] = useState8(null);
+  const [executionState, setExecutionState] = useState8(null);
+  const machineConfig = {
+    ...config,
+    type: "OFFER" /* OFFER */
+  };
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+    config: machineConfig,
+    enabled,
+    onSuccess: (hash) => {
+      setExecutionState(null);
+      onSuccess?.(hash);
     },
-    onSuccess,
-    onError,
-    onTransactionSent
-  );
+    onError: (error) => {
+      setExecutionState(null);
+      onError?.(error);
+    },
+    onTransactionSent,
+    onApprovalSuccess: (hash) => {
+      setExecutionState(null);
+      onApprovalSuccess?.(hash);
+    },
+    onSwitchChainRefused
+  });
   const loadSteps = useCallback2(
     async (props) => {
       if (!machine) return;
@@ -1845,16 +1962,51 @@ var useMakeOffer = ({
         setIsLoading(false);
         return;
       }
-      setSteps(generatedSteps);
+      setSteps({
+        ...generatedSteps,
+        approval: {
+          ...generatedSteps.approval,
+          isExecuting: executionState === "approval"
+        },
+        transaction: {
+          ...generatedSteps.transaction,
+          isExecuting: executionState === "offer"
+        }
+      });
       setIsLoading(false);
     },
-    [machine, onError]
+    [machine, executionState]
+  );
+  const handleStepExecution = useCallback2(
+    async (type, execute) => {
+      if (!type) return;
+      setExecutionState(type);
+      try {
+        await execute();
+      } catch (error) {
+        setExecutionState(null);
+        throw error;
+      }
+    },
+    []
   );
   return {
     makeOffer: (props) => machine?.start(props),
     getMakeOfferSteps: (props) => ({
       isLoading,
-      steps,
+      steps: steps ? {
+        ...steps,
+        approval: {
+          ...steps.approval,
+          isExecuting: executionState === "approval",
+          execute: () => handleStepExecution("approval", () => steps.approval.execute())
+        },
+        transaction: {
+          ...steps.transaction,
+          isExecuting: executionState === "offer",
+          execute: () => handleStepExecution("offer", () => steps.transaction.execute())
+        }
+      } : null,
       refreshSteps: () => loadSteps(props)
     }),
     isLoading: isMachineLoading
@@ -1869,12 +2021,14 @@ var initialState4 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
-  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  orderbookKind: "reservoir" /* reservoir */,
   callbacks: void 0,
   offerPrice: {
     amountRaw: "1",
     currency: {}
   },
+  // to track if the user has changed the price, so we know if it's 1 default or user input
+  offerPriceChanged: false,
   quantity: "1",
   invalidQuantity: false,
   expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
@@ -1894,14 +2048,14 @@ var initialState4 = {
 var makeOfferModal$ = observable5(initialState4);
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var useMakeOfferModal = (defaultCallbacks) => ({
   show: (args) => makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: makeOfferModal$.close
 });
 var MakeOfferModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx21(Show3, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx21(ModalContent, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx20(Show3, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx20(ModalContent, { showTransactionStatusModal }) });
 };
 var ModalContent = observer9(
   ({
@@ -1912,10 +2066,14 @@ var ModalContent = observer9(
       collectionAddress,
       chainId,
       offerPrice,
+      offerPriceChanged,
+      invalidQuantity,
       collectibleId,
-      orderbookKind
+      orderbookKind,
+      callbacks
     } = state;
-    const [insufficientBalance, setInsufficientBalance] = useState8(false);
+    const [insufficientBalance, setInsufficientBalance] = useState9(false);
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState9(false);
     const {
       data: collectible,
       isLoading: collectableIsLoading,
@@ -1942,38 +2100,29 @@ var ModalContent = observer9(
       chainId,
       collectionAddress,
       orderbookKind,
-      onTransactionSent: (hash) => {
-        if (!hash) return;
+      enabled: makeOfferModal$.isOpen.get(),
+      onSwitchChainRefused: () => makeOfferModal$.close(),
+      onApprovalSuccess: () => setApprovalExecutedSuccess(true),
+      onTransactionSent: (hash, orderId) => {
+        if (!hash && !orderId) return;
         showTransactionStatusModal({
           hash,
+          orderId,
           price: makeOfferModal$.offerPrice.get(),
           collectionAddress,
           chainId,
           collectibleId,
           type: "OFFER" /* OFFER */,
-          queriesToInvalidate: collectableKeys.all
+          queriesToInvalidate: collectableKeys.all,
+          callbacks
         });
         makeOfferModal$.close();
-      },
-      onSuccess: (hash) => {
-        if (typeof makeOfferModal$.callbacks?.onSuccess === "function") {
-          makeOfferModal$.callbacks.onSuccess(hash);
-        } else {
-          console.debug("onSuccess callback not provided:", hash);
-        }
-      },
-      onError: (error) => {
-        if (typeof makeOfferModal$.callbacks?.onError === "function") {
-          makeOfferModal$.callbacks.onError(error);
-        } else {
-          console.debug("onError callback not provided:", error);
-        }
       }
     });
     const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
     const currencyAddress = offerPrice.currency.contractAddress;
     const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
-      contractType: collection.type,
+      contractType: collection?.type,
       offer: {
         tokenId: collectibleId,
         quantity: parseUnits4(
@@ -1985,25 +2134,28 @@ var ModalContent = observer9(
         pricePerToken: offerPrice.amountRaw
       }
     });
-    useEffect5(() => {
+    const approvalNeeded = steps?.approval.isPending;
+    useEffect7(() => {
       if (!currencyAddress) return;
       refreshSteps();
     }, [currencyAddress]);
     if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx20(
         LoadingModal,
         {
-          store: makeOfferModal$,
+          isOpen: makeOfferModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: makeOfferModal$.close,
           title: "Make an offer"
         }
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx20(
         ErrorModal,
         {
-          store: makeOfferModal$,
+          isOpen: makeOfferModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: makeOfferModal$.close,
           title: "Make an offer"
         }
@@ -2015,34 +2167,39 @@ var ModalContent = observer9(
         await refreshSteps();
         await execute();
       } catch (error) {
-        makeOfferModal$.callbacks?.onError?.(error);
+        if (callbacks?.onError) {
+          callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
     };
     const ctas = [
       {
         label: "Approve TOKEN",
         onClick: () => handleStepExecution(() => steps?.approval.execute()),
-        hidden: !steps?.approval.isPending,
-        pending: steps?.approval.isExecuting,
+        hidden: !approvalNeeded || approvalExecutedSuccess,
+        pending: steps?.approval.isExecuting || isLoading,
         variant: "glass",
-        disabled: makeOfferModal$.invalidQuantity.get()
+        disabled: invalidQuantity || isLoading || steps?.transaction.isExecuting || insufficientBalance || offerPrice.amountRaw === "0" || !offerPriceChanged
       },
       {
         label: "Make offer",
         onClick: () => handleStepExecution(() => steps?.transaction.execute()),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: steps?.approval.isPending || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || makeOfferModal$.invalidQuantity.get()
+        disabled: !approvalExecutedSuccess && approvalNeeded || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || offerPrice.amountRaw === "0"
       }
     ];
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsx20(Fragment, { children: /* @__PURE__ */ jsxs13(
       ActionModal,
       {
-        store: makeOfferModal$,
+        isOpen: makeOfferModal$.isOpen.get(),
+        chainId: Number(chainId),
         onClose: () => makeOfferModal$.close(),
         title: "Make an offer",
         ctas,
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx20(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -2051,19 +2208,20 @@ var ModalContent = observer9(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx20(
             priceInput_default,
             {
               chainId,
               collectionAddress,
               $listingPrice: makeOfferModal$.offerPrice,
+              onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
               checkBalance: {
                 enabled: true,
                 callback: (state2) => setInsufficientBalance(state2)
               }
             }
           ),
-          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx21(
+          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx20(
             QuantityInput,
             {
               $quantity: makeOfferModal$.quantity,
@@ -2072,7 +2230,7 @@ var ModalContent = observer9(
               maxQuantity: String(Number.MAX_SAFE_INTEGER)
             }
           ),
-          !!offerPrice && /* @__PURE__ */ jsx21(
+          offerPrice.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx20(
             FloorPriceText,
             {
               tokenId: collectibleId,
@@ -2081,10 +2239,10 @@ var ModalContent = observer9(
               price: offerPrice
             }
           ),
-          /* @__PURE__ */ jsx21(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+          /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
         ]
       }
-    );
+    ) });
   }
 );
 
@@ -2093,24 +2251,41 @@ import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
 import { parseUnits as parseUnits5 } from "viem";
 
 // src/react/hooks/useSell.tsx
-import { useCallback as useCallback3, useState as useState9 } from "react";
+import { useCallback as useCallback3, useState as useState10 } from "react";
 var useSell = ({
   onSuccess,
   onError,
   onTransactionSent,
+  onApprovalSuccess,
+  onSwitchChainRefused,
+  enabled,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState9(false);
-  const [steps, setSteps] = useState9(null);
-  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-    {
-      ...config,
-      type: "SELL" /* SELL */
+  const [isLoading, setIsLoading] = useState10(false);
+  const [steps, setSteps] = useState10(null);
+  const [executionState, setExecutionState] = useState10(null);
+  const machineConfig = {
+    ...config,
+    type: "SELL" /* SELL */
+  };
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+    config: machineConfig,
+    enabled,
+    onSwitchChainRefused,
+    onSuccess: (hash) => {
+      setExecutionState(null);
+      onSuccess?.(hash);
     },
-    onSuccess,
-    onError,
-    onTransactionSent
-  );
+    onError: (error) => {
+      setExecutionState(null);
+      onError?.(error);
+    },
+    onTransactionSent,
+    onApprovalSuccess: (hash) => {
+      setExecutionState(null);
+      onApprovalSuccess?.(hash);
+    }
+  });
   const loadSteps = useCallback3(
     async (props) => {
       if (!machine) return;
@@ -2120,16 +2295,51 @@ var useSell = ({
         setIsLoading(false);
         return;
       }
-      setSteps(generatedSteps);
+      setSteps({
+        ...generatedSteps,
+        approval: {
+          ...generatedSteps.approval,
+          isExecuting: executionState === "approval"
+        },
+        transaction: {
+          ...generatedSteps.transaction,
+          isExecuting: executionState === "sell"
+        }
+      });
       setIsLoading(false);
     },
-    [machine, onError]
+    [machine, executionState]
+  );
+  const handleStepExecution = useCallback3(
+    async (type, execute) => {
+      if (!type) return;
+      setExecutionState(type);
+      try {
+        await execute();
+      } catch (error) {
+        setExecutionState(null);
+        throw error;
+      }
+    },
+    []
   );
   return {
     sell: (props) => machine?.start(props),
     getSellSteps: (props) => ({
       isLoading,
-      steps,
+      steps: steps ? {
+        ...steps,
+        approval: {
+          ...steps.approval,
+          isExecuting: executionState === "approval",
+          execute: () => handleStepExecution("approval", () => steps.approval.execute())
+        },
+        transaction: {
+          ...steps.transaction,
+          isExecuting: executionState === "sell",
+          execute: () => handleStepExecution("sell", () => steps.transaction.execute())
+        }
+      } : null,
       refreshSteps: () => loadSteps(props)
     }),
     isLoading: isMachineLoading
@@ -2137,17 +2347,17 @@ var useSell = ({
 };
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box15, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
+import { Box as Box15, Image as Image4, Skeleton as Skeleton7, Text as Text12 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function TransactionHeader({
   title,
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs15(Box15, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx22(
-      Text11,
+  return /* @__PURE__ */ jsxs14(Box15, { display: "flex", alignItems: "center", width: "full", children: [
+    /* @__PURE__ */ jsx21(
+      Text12,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -2157,9 +2367,9 @@ function TransactionHeader({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx22(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
-    date && /* @__PURE__ */ jsxs15(
-      Text11,
+    /* @__PURE__ */ jsx21(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    date && /* @__PURE__ */ jsxs14(
+      Text12,
       {
         fontSize: "small",
         color: "text50",
@@ -2171,7 +2381,7 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx22(Skeleton7, { width: "8", height: "4" })
+    ) || /* @__PURE__ */ jsx21(Skeleton7, { width: "8", height: "4" })
   ] });
 }
 
@@ -2200,37 +2410,69 @@ var initialState5 = {
 var sellModal$ = observable6(initialState5);
 
 // src/react/ui/modals/SellModal/index.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState11 } from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var useSellModal = (defaultCallbacks) => ({
   show: (args) => sellModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: sellModal$.close
 });
 var SellModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx23(Show4, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx23(ModalContent2, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx22(Show4, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx22(ModalContent2, { showTransactionStatusModal }) });
 };
 var ModalContent2 = observer10(
   ({
     showTransactionStatusModal
   }) => {
-    const { tokenId, collectionAddress, chainId, order } = sellModal$.get();
+    const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
     const { data: collectible } = useCollection({
       chainId,
       collectionAddress
     });
-    const { sell } = useSell({
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState11(false);
+    const {
+      data: collection,
+      isLoading: collectionLoading,
+      isError: collectionError
+    } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const currencyOptions = useCurrencyOptions({ collectionAddress });
+    const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+      chainId,
+      currencyOptions
+    });
+    const { getSellSteps, isLoading: machineLoading } = useSell({
       collectionAddress,
       chainId,
+      enabled: sellModal$.isOpen.get(),
+      onSwitchChainRefused: () => {
+        sellModal$.close();
+      },
+      onApprovalSuccess: () => setApprovalExecutedSuccess(true),
       onTransactionSent: (hash) => {
         if (!hash) return;
         showTransactionStatusModal({
           hash,
-          price: {
+          price: order ? {
             amountRaw: order.priceAmount,
-            currency: currencies.find(
+            currency: currencies?.find(
               (currency2) => currency2.contractAddress === order.priceCurrencyAddress
-            )
-          },
+            ) ?? {
+              chainId: Number(chainId),
+              contractAddress: order.priceCurrencyAddress,
+              name: "Unknown",
+              symbol: "UNK",
+              decimals: 18,
+              imageUrl: "",
+              exchangeRate: 0,
+              defaultChainCurrency: false,
+              nativeCurrency: false,
+              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+              updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+            }
+          } : void 0,
           collectionAddress,
           chainId,
           collectibleId: tokenId,
@@ -2238,82 +2480,88 @@ var ModalContent2 = observer10(
           queriesToInvalidate: [
             ...collectableKeys.all,
             balanceQueries.all
-          ]
+          ],
+          callbacks
         });
         sellModal$.close();
-      },
-      onSuccess: (hash) => {
-        if (typeof sellModal$.callbacks?.onSuccess === "function") {
-          sellModal$.callbacks.onSuccess(hash);
-        } else {
-          console.debug("onSuccess callback not provided:", hash);
-        }
-      },
-      onError: (error) => {
-        if (typeof sellModal$.callbacks?.onError === "function") {
-          sellModal$.callbacks.onError(error);
+      }
+    });
+    const { isLoading, steps, refreshSteps } = getSellSteps({
+      orderId: order?.orderId ?? "",
+      marketplace: order?.marketplace,
+      quantity: order?.quantityRemaining ? parseUnits5(
+        order.quantityRemaining,
+        collectible?.decimals || 0
+      ).toString() : "1"
+    });
+    useEffect8(() => {
+      refreshSteps();
+    }, [order, machineLoading]);
+    const handleStepExecution = async (execute) => {
+      if (!execute) return;
+      try {
+        await refreshSteps();
+        await execute();
+      } catch (error) {
+        if (callbacks?.onError) {
+          callbacks.onError(error);
         } else {
           console.debug("onError callback not provided:", error);
         }
       }
-    });
-    const {
-      data: collection,
-      isLoading: collectionLoading,
-      isError: collectionError
-    } = useCollection({
-      chainId,
-      collectionAddress
-    });
-    const currencyOptions = useCurrencyOptions({ collectionAddress });
-    const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
-      chainId,
-      currencyOptions
-    });
-    if (collectionLoading || currenciesLoading) {
-      return /* @__PURE__ */ jsx23(
+    };
+    if (collectionLoading || currenciesLoading || machineLoading) {
+      return /* @__PURE__ */ jsx22(
         LoadingModal,
         {
-          store: sellModal$,
+          isOpen: sellModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: sellModal$.close,
           title: "You have an offer"
         }
       );
     }
     if (collectionError || order === void 0) {
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         ErrorModal,
         {
-          store: sellModal$,
+          isOpen: sellModal$.isOpen.get(),
+          chainId: Number(chainId),
           onClose: sellModal$.close,
           title: "You have an offer"
         }
       );
     }
+    const approvalNeeded = steps?.approval.isPending;
     const currency = currencies?.find(
       (c) => c.contractAddress === order?.priceCurrencyAddress
     );
-    return /* @__PURE__ */ jsxs16(
+    const ctas = [
+      {
+        label: "Approve TOKEN",
+        onClick: () => handleStepExecution(() => steps?.approval.execute()),
+        hidden: !approvalNeeded || approvalExecutedSuccess,
+        pending: steps?.approval.isExecuting || isLoading,
+        variant: "glass",
+        disabled: isLoading || steps?.transaction.isExecuting
+      },
+      {
+        label: "Accept",
+        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+        pending: steps?.transaction.isExecuting || isLoading,
+        disabled: !approvalExecutedSuccess && approvalNeeded || isLoading
+      }
+    ];
+    return /* @__PURE__ */ jsxs15(
       ActionModal,
       {
-        store: sellModal$,
+        isOpen: sellModal$.isOpen.get(),
+        chainId: Number(chainId),
         onClose: sellModal$.close,
         title: "You have an offer",
-        ctas: [
-          {
-            label: "Accept",
-            onClick: () => sell({
-              orderId: order?.orderId,
-              marketplace: order?.marketplace,
-              quantity: order?.quantityRemaining ? parseUnits5(
-                order.quantityRemaining,
-                collectible?.decimals || 0
-              ).toString() : "1"
-            })
-          }
-        ],
+        ctas,
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx22(
             TransactionHeader,
             {
               title: "Offer received",
@@ -2321,7 +2569,7 @@ var ModalContent2 = observer10(
               date: order && new Date(order.createdAt)
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx22(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -2330,7 +2578,7 @@ var ModalContent2 = observer10(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx22(
             TransactionDetails,
             {
               collectibleId: tokenId,
@@ -2357,10 +2605,10 @@ import {
   ExternalLinkIcon,
   IconButton as IconButton3,
   Image as Image5,
-  Text as Text12
+  Text as Text13
 } from "@0xsequence/design-system";
 import { observer as observer11 } from "@legendapp/state/react";
-import { Close as Close2, Content as Content4, Overlay as Overlay2, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
+import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
 
 // src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
 import { observable as observable7 } from "@legendapp/state";
@@ -2405,7 +2653,7 @@ var initialState6 = {
 var successfulPurchaseModal$ = observable7(initialState6);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -2413,12 +2661,12 @@ var useSuccessfulPurchaseModal = (callbacks) => {
   };
 };
 var SuccessfulPurchaseModal = observer11(() => {
-  return /* @__PURE__ */ jsx24(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs17(Portal4, { children: [
-    /* @__PURE__ */ jsx24(Overlay2, { className: dialogOverlay }),
-    /* @__PURE__ */ jsxs17(Content4, { className: dialogContent.narrow, children: [
-      /* @__PURE__ */ jsxs17(Box16, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
-        /* @__PURE__ */ jsx24(
-          Text12,
+  return /* @__PURE__ */ jsx23(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal3, { children: [
+    /* @__PURE__ */ jsx23(Overlay2, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs16(Content3, { className: dialogContent.narrow, children: [
+      /* @__PURE__ */ jsxs16(Box16, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+        /* @__PURE__ */ jsx23(
+          Text13,
           {
             textAlign: "center",
             fontSize: "medium",
@@ -2427,21 +2675,21 @@ var SuccessfulPurchaseModal = observer11(() => {
             children: "Successful purchase!"
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx23(
           CollectiblesGrid,
           {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs17(Box16, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx24(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx24(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx24(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx24(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+        /* @__PURE__ */ jsxs16(Box16, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
-        /* @__PURE__ */ jsx24(SuccessfulPurchaseActions, {})
+        /* @__PURE__ */ jsx23(SuccessfulPurchaseActions, {})
       ] }),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx23(
         Close2,
         {
           onClick: () => {
@@ -2449,15 +2697,15 @@ var SuccessfulPurchaseModal = observer11(() => {
           },
           className: closeButton,
           asChild: true,
-          children: /* @__PURE__ */ jsx24(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+          children: /* @__PURE__ */ jsx23(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
         }
       )
     ] })
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs17(Box16, { display: "flex", flexDirection: "column", gap: "2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs16(Box16, { display: "flex", flexDirection: "column", gap: "2", children: [
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx23(
       Button3,
       {
         shape: "square",
@@ -2467,7 +2715,7 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx23(
       Button3,
       {
         as: "a",
@@ -2485,15 +2733,15 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx24(Box16, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx23(Box16, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs16(
       Box16,
       {
         className: collectiblesGridItem,
         position: "relative",
         children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             Image5,
             {
               src: collectible.image,
@@ -2504,7 +2752,7 @@ function CollectiblesGrid({ collectibles }) {
               borderRadius: "sm"
             }
           ),
-          showPlus && /* @__PURE__ */ jsx24(
+          showPlus && /* @__PURE__ */ jsx23(
             Box16,
             {
               position: "absolute",
@@ -2517,8 +2765,8 @@ function CollectiblesGrid({ collectibles }) {
               justifyContent: "center",
               background: "backgroundOverlay",
               backdropFilter: "blur",
-              children: /* @__PURE__ */ jsxs17(
-                Text12,
+              children: /* @__PURE__ */ jsxs16(
+                Text13,
                 {
                   fontSize: "small",
                   fontWeight: "medium",
@@ -2547,7 +2795,7 @@ var SuccessfulPurchaseModal_default = SuccessfulPurchaseModal;
 // src/react/ui/modals/TransferModal/index.tsx
 import { CloseIcon as CloseIcon3, IconButton as IconButton4 } from "@0xsequence/design-system";
 import { Show as Show5, observer as observer13 } from "@legendapp/state/react";
-import { Close as Close3, Content as Content5, Overlay as Overlay3, Portal as Portal5, Root as Root5 } from "@radix-ui/react-dialog";
+import { Close as Close3, Content as Content4, Overlay as Overlay3, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
 import { useAccount as useAccount5 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/_store.ts
@@ -2590,7 +2838,7 @@ var initialState7 = {
 var transferModal$ = observable8(initialState7);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box17, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
+import { Box as Box17, Button as Button4, Text as Text14, TextInput } from "@0xsequence/design-system";
 import { observable as observable9 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount4 } from "wagmi";
@@ -2676,7 +2924,7 @@ var useHandleTransfer = () => {
 var useHandleTransfer_default = useHandleTransfer;
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var EnterWalletAddressView = () => {
   const { address } = useAccount4();
   const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
@@ -2689,11 +2937,11 @@ var EnterWalletAddressView = () => {
     chainId,
     contractAddress: collectionAddress,
     tokenId: collectibleId,
-    accountAddress: address,
+    accountAddress: address ?? "",
     query: { enabled: !!address }
   });
   const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-  const insufficientBalance = $quantity.get() > balanceAmount;
+  const insufficientBalance = balanceAmount ? $quantity.get() > balanceAmount : true;
   const { data: collection } = useCollection({
     collectionAddress,
     chainId
@@ -2709,17 +2957,17 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  return /* @__PURE__ */ jsxs18(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx25(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", gap: "3", children: [
-      /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs17(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx24(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsxs17(Box17, { display: "flex", flexDirection: "column", gap: "3", children: [
+      /* @__PURE__ */ jsx24(
         AlertMessage,
         {
           message: getMessage("enterReceiverAddress"),
           type: "warning"
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         TextInput,
         {
           label: "Wallet address",
@@ -2730,8 +2978,8 @@ var EnterWalletAddressView = () => {
           placeholder: "Enter wallet address of recipient"
         }
       ),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs18(Fragment, { children: [
-        /* @__PURE__ */ jsx25(
+      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs17(Fragment2, { children: [
+        /* @__PURE__ */ jsx24(
           QuantityInput,
           {
             $quantity,
@@ -2740,8 +2988,8 @@ var EnterWalletAddressView = () => {
             maxQuantity: balanceAmount
           }
         ),
-        /* @__PURE__ */ jsx25(
-          Text13,
+        /* @__PURE__ */ jsx24(
+          Text14,
           {
             color: insufficientBalance ? "negative" : "text50",
             fontSize: "small",
@@ -2752,7 +3000,7 @@ var EnterWalletAddressView = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Button4,
       {
         onClick: handleChangeView,
@@ -2771,20 +3019,20 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box18, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
+import { Box as Box18, Button as Button5, Text as Text15 } from "@0xsequence/design-system";
 import { observer as observer12 } from "@legendapp/state/react";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer12(() => {
-  return /* @__PURE__ */ jsxs19(Box18, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx26(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx26(Box18, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs18(Box18, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx25(Text15, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx25(Box18, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx25(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
         type: "info"
       }
     ) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx25(
       Button5,
       {
         disabled: true,
@@ -2802,7 +3050,7 @@ var FollowWalletInstructionsView = observer12(() => {
 var followWalletInstructions_default = FollowWalletInstructionsView;
 
 // src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var useTransferModal = () => {
   const { chainId: accountChainId } = useAccount5();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
@@ -2838,17 +3086,17 @@ var useTransferModal = () => {
   };
 };
 var TransferModal = () => {
-  return /* @__PURE__ */ jsx27(Show5, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx27(Modal3, {}) });
+  return /* @__PURE__ */ jsx26(Show5, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx26(Modal3, {}) });
 };
 var Modal3 = () => {
-  return /* @__PURE__ */ jsx27(ModalContent3, {});
+  return /* @__PURE__ */ jsx26(ModalContent3, {});
 };
 var ModalContent3 = observer13(() => {
-  return /* @__PURE__ */ jsx27(Root5, { open: true, children: /* @__PURE__ */ jsxs20(Portal5, { children: [
-    /* @__PURE__ */ jsx27(Overlay3, { className: dialogOverlay2 }),
-    /* @__PURE__ */ jsxs20(Content5, { className: transferModalContent, children: [
-      /* @__PURE__ */ jsx27(TransactionModalView, {}),
-      /* @__PURE__ */ jsx27(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx27(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
+  return /* @__PURE__ */ jsx26(Root4, { open: true, children: /* @__PURE__ */ jsxs19(Portal4, { children: [
+    /* @__PURE__ */ jsx26(Overlay3, { className: dialogOverlay2 }),
+    /* @__PURE__ */ jsxs19(Content4, { className: transferModalContent, children: [
+      /* @__PURE__ */ jsx26(TransactionModalView, {}),
+      /* @__PURE__ */ jsx26(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx26(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
     ] })
   ] }) });
 });
@@ -2856,39 +3104,39 @@ var TransactionModalView = observer13(() => {
   const { view } = transferModal$.get();
   switch (view) {
     case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx27(enterWalletAddress_default, {});
+      return /* @__PURE__ */ jsx26(enterWalletAddress_default, {});
     case "followWalletInstructions":
-      return /* @__PURE__ */ jsx27(followWalletInstructions_default, {});
+      return /* @__PURE__ */ jsx26(followWalletInstructions_default, {});
     default:
       return null;
   }
 });
 
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var ModalProvider = observer14(() => {
-  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx28(AccountModal, {}),
-    /* @__PURE__ */ jsx28(CreateListingModal, {}),
-    /* @__PURE__ */ jsx28(MakeOfferModal, {}),
-    /* @__PURE__ */ jsx28(TransferModal, {}),
-    /* @__PURE__ */ jsx28(SellModal, {}),
-    /* @__PURE__ */ jsx28(BuyModal, {}),
-    /* @__PURE__ */ jsx28(SuccessfulPurchaseModal_default, {}),
-    /* @__PURE__ */ jsx28(switchChainModal_default, {}),
-    /* @__PURE__ */ jsx28(transactionStatusModal_default, {})
+  return /* @__PURE__ */ jsxs20(Fragment3, { children: [
+    /* @__PURE__ */ jsx27(AccountModal, {}),
+    /* @__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, {})
   ] });
 });
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { useState as useState10 } from "react";
+import { useState as useState12 } from "react";
 import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
 import { Box as Box19 } from "@0xsequence/design-system";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Svg = () => /* @__PURE__ */ jsx29(
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var Svg = () => /* @__PURE__ */ jsxs21(
   "svg",
   {
     width: "16",
@@ -2896,18 +3144,23 @@ var Svg = () => /* @__PURE__ */ jsx29(
     viewBox: "0 0 16 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx29(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z",
-        fill: "white"
-      }
-    )
+    role: "img",
+    "aria-labelledby": "diamond-eye-title",
+    children: [
+      /* @__PURE__ */ jsx28("title", { id: "diamond-eye-title", children: "Diamond Eye Icon" }),
+      /* @__PURE__ */ jsx28(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z",
+          fill: "white"
+        }
+      )
+    ]
   }
 );
-var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
+var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx28(
   Box19,
   {
     as: Svg,
@@ -2922,7 +3175,7 @@ var DiamondEye_default = SvgDiamondEyeIcon;
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
 import { Button as Button6 } from "@0xsequence/design-system";
 import { observer as observer15 } from "@legendapp/state/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ActionButton = observer15(
   ({
     collectionAddress,
@@ -2941,7 +3194,7 @@ var ActionButton = observer15(
     if (action === "Buy" /* BUY */) {
       if (!lowestListing)
         throw new InvalidStepError("BUY", "lowestListing is required");
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Buy",
@@ -2957,7 +3210,7 @@ var ActionButton = observer15(
     if (action === "Sell" /* SELL */) {
       if (!highestOffer)
         throw new InvalidStepError("SELL", "highestOffer is required");
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Sell",
@@ -2971,7 +3224,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Create listing" /* LIST */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Create listing",
@@ -2985,7 +3238,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Make an offer" /* OFFER */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Make an offer",
@@ -2999,7 +3252,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Transfer" /* TRANSFER */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Transfer",
@@ -3015,7 +3268,7 @@ var ActionButton = observer15(
   }
 );
 function ActionButtonBody({ label, onClick }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx29(
     Button6,
     {
       variant: "primary",
@@ -3033,14 +3286,14 @@ function ActionButtonBody({ label, onClick }) {
 }
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits5 } from "viem";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits4 } from "viem";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
 import { Box as Box20 } from "@0xsequence/design-system";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Svg2 = () => /* @__PURE__ */ jsx31(
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+var Svg2 = () => /* @__PURE__ */ jsxs22(
   "svg",
   {
     width: "17",
@@ -3048,18 +3301,23 @@ var Svg2 = () => /* @__PURE__ */ jsx31(
     viewBox: "0 0 17 17",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx31(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z",
-        fill: "white"
-      }
-    )
+    role: "img",
+    "aria-labelledby": "bell-title",
+    children: [
+      /* @__PURE__ */ jsx30("title", { id: "bell-title", children: "Notification Bell" }),
+      /* @__PURE__ */ jsx30(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z",
+          fill: "white"
+        }
+      )
+    ]
   }
 );
-var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
+var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
   Box20,
   {
     as: Svg2,
@@ -3072,7 +3330,7 @@ var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
 var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var Footer = ({
   name,
   type,
@@ -3086,12 +3344,12 @@ var Footer = ({
   const { address } = useAccount6();
   const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
   if (name.length > 15 && highestOffer) {
-    name = name.substring(0, 13) + "...";
+    name = `${name.substring(0, 13)}...`;
   }
   if (name.length > 17 && !highestOffer) {
-    name = name.substring(0, 17) + "...";
+    name = `${name.substring(0, 17)}...`;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Box21,
     {
       display: "flex",
@@ -3103,7 +3361,7 @@ var Footer = ({
       position: "relative",
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           Box21,
           {
             display: "flex",
@@ -3112,8 +3370,8 @@ var Footer = ({
             position: "relative",
             width: "full",
             children: [
-              /* @__PURE__ */ jsx32(
-                Text15,
+              /* @__PURE__ */ jsx31(
+                Text16,
                 {
                   color: "text100",
                   fontSize: "normal",
@@ -3123,7 +3381,7 @@ var Footer = ({
                   children: name
                 }
               ),
-              highestOffer && onOfferClick && /* @__PURE__ */ jsx32(
+              highestOffer && onOfferClick && /* @__PURE__ */ jsx31(
                 IconButton5,
                 {
                   size: "xs",
@@ -3136,16 +3394,16 @@ var Footer = ({
                     e.stopPropagation();
                     onOfferClick?.();
                   },
-                  icon: (props) => /* @__PURE__ */ jsx32(Bell_default, { ...props, size: "xs" })
+                  icon: (props) => /* @__PURE__ */ jsx31(Bell_default, { ...props, size: "xs" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs22(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
-          listed && /* @__PURE__ */ jsx32(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
-          /* @__PURE__ */ jsxs22(
-            Text15,
+        /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
+          listed && /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
+          /* @__PURE__ */ jsxs23(
+            Text16,
             {
               color: listed ? "text100" : "text50",
               fontSize: "small",
@@ -3153,16 +3411,16 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && formatUnits5(
+                listed && `${formatUnits4(
                   BigInt(lowestListingPriceAmount),
                   lowestListingCurrency.decimals
-                ) + " " + lowestListingCurrency.symbol,
+                )} ${lowestListingCurrency.symbol}`,
                 !listed && "Not listed yet"
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32(TokenTypeBalancePill, { balance, type })
+        /* @__PURE__ */ jsx31(TokenTypeBalancePill, { balance, type })
       ]
     }
   );
@@ -3171,9 +3429,9 @@ var TokenTypeBalancePill = ({
   balance,
   type
 }) => {
-  const displayText = type === "ERC1155" /* ERC1155 */ ? !!balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
-  return /* @__PURE__ */ jsx32(
-    Text15,
+  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
+  return /* @__PURE__ */ jsx31(
+    Text16,
     {
       background: "backgroundSecondary",
       color: "text80",
@@ -3189,9 +3447,9 @@ var TokenTypeBalancePill = ({
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Box22,
     {
       className: collectibleCard,
@@ -3199,14 +3457,14 @@ function CollectibleSkeleton() {
       overflow: "hidden",
       background: "backgroundPrimary",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx32(
           Skeleton8,
           {
             size: "lg",
             style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
           }
         ),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           Box22,
           {
             display: "flex",
@@ -3216,8 +3474,8 @@ function CollectibleSkeleton() {
             paddingBottom: "4",
             marginTop: "2",
             children: [
-              /* @__PURE__ */ jsx33(Skeleton8, { size: "lg" }),
-              /* @__PURE__ */ jsx33(Skeleton8, { size: "sm" })
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "lg" }),
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "sm" })
             ]
           }
         )
@@ -3239,7 +3497,7 @@ function CollectibleCard({
 }) {
   const { address: accountAddress } = useAccount7();
   const collectibleMetadata = lowestListing?.metadata;
-  const [imageLoadingError, setImageLoadingError] = useState10(false);
+  const [imageLoadingError, setImageLoadingError] = useState12(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
     chainId: String(chainId),
     collectionAddress,
@@ -3251,20 +3509,20 @@ function CollectibleCard({
     (currency) => currency.contractAddress === lowestListing?.order?.priceCurrencyAddress
   );
   if (highestOfferLoading || cardLoading) {
-    return /* @__PURE__ */ jsx33(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx32(CollectibleSkeleton, {});
   }
-  const action = !!balance ? highestOffer?.order && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
+  const action = balance ? highestOffer?.order && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
   const name = collectibleMetadata?.name;
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx32(
         Box22,
         {
           display: "flex",
@@ -3280,8 +3538,8 @@ function CollectibleCard({
           cursor: "pointer",
           padding: "0",
           className: collectibleTileWrapper,
-          children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
-            externalUrl && /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsxs24("article", { style: { width: "100%" }, children: [
+            externalUrl && /* @__PURE__ */ jsx32(
               IconButton6,
               {
                 as: "a",
@@ -3298,7 +3556,7 @@ function CollectibleCard({
                 icon: DiamondEye_default
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               "img",
               {
                 src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
@@ -3307,10 +3565,10 @@ function CollectibleCard({
                 onError: () => setImageLoadingError(true)
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               Footer,
               {
-                name,
+                name: name || "",
                 type: collectionType,
                 onOfferClick: () => onOfferClick?.({ order: highestOffer?.order }),
                 highestOffer: highestOffer?.order,
@@ -3320,7 +3578,7 @@ function CollectibleCard({
                 isAnimated: !!action
               }
             ),
-            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
+            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx32(
               Box22,
               {
                 display: "flex",
@@ -3328,7 +3586,7 @@ function CollectibleCard({
                 justifyContent: "center",
                 padding: "2",
                 className: actionWrapper,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx32(
                   ActionButton,
                   {
                     chainId: String(chainId),
@@ -3360,4 +3618,4 @@ export {
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-IRN77TJW.js.map
+//# sourceMappingURL=chunk-IOTKCWOB.js.map