@0xsequence/marketplace-sdk 0.3.0 → 0.3.1

package/dist/chunk-QXLZPSSR.js

@@ -1,3316 +0,0 @@
-"use client"
-import {
-  ActionModal
-} from "./chunk-CSN7YD5Q.js";
-import {
-  CalendarIcon_default,
-  InfoIcon_default,
-  MinusIcon_default,
-  PlusIcon_default,
-  PositiveCircleIcon_default
-} from "./chunk-MQR6SHXZ.js";
-import {
-  alertMessageBox,
-  alertMessageBoxVariants,
-  closeButton,
-  closeButton2,
-  closeButton3,
-  collectiblesGrid,
-  collectiblesGridImage,
-  collectiblesGridImagePale,
-  collectiblesGridItem,
-  currencySelect,
-  dateSelectButton,
-  dateSelectPopoverContent,
-  dialogContent,
-  dialogOverlay,
-  dialogOverlay2,
-  dialogOverlay3,
-  priceInputCurrencyImage,
-  priceInputWrapper,
-  quantityInputWrapper,
-  rangeSelect,
-  switchChainCta,
-  switchChainModalContent,
-  tokenPreview,
-  transferModalContent
-} from "./chunk-OUWB3FHZ.js";
-import {
-  iconVariants
-} from "./chunk-VEX7FDL6.js";
-import {
-  useBalanceOfCollectible,
-  useCollectible,
-  useCollection,
-  useCurrencies,
-  useGenerateListingTransaction,
-  useGenerateOfferTransaction,
-  useGenerateSellTransaction,
-  useHighestOffer,
-  useListBalances,
-  useLowestListing,
-  useMarketplaceConfig,
-  useRoyaltyPercentage,
-  useTransferTokens
-} from "./chunk-BJE7AG6V.js";
-import {
-  calculatePriceDifferencePercentage,
-  truncateMiddle
-} from "./chunk-6S4FYXP6.js";
-import {
-  balanceQueries,
-  collectableKeys,
-  getQueryClient
-} from "./chunk-GZG2QO64.js";
-
-// src/react/ui/modals/modal-provider.tsx
-import { observer as observer14 } from "@legendapp/state/react";
-
-// src/react/ui/modals/Account/index.tsx
-import { Box, Button, Modal, Text } from "@0xsequence/design-system";
-import { observable } from "@legendapp/state";
-import { observer } from "@legendapp/state/react";
-import { useAccount } from "wagmi";
-import { jsx, jsxs } from "react/jsx-runtime";
-var accountModalOpen$ = observable(false);
-var AccountModal = observer(function AccountModal2() {
-  const { address } = useAccount();
-  return accountModalOpen$.get() && /* @__PURE__ */ jsxs(Modal, { children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { children: "Wallet address" }),
-      /* @__PURE__ */ jsx(Text, { children: address })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { label: "Sign out" })
-  ] });
-});
-
-// src/react/ui/modals/CreateListingModal/index.tsx
-import { Box as Box12 } from "@0xsequence/design-system";
-import { Show, observer as observer8 } from "@legendapp/state/react";
-import { useAccount as useAccount4 } from "wagmi";
-
-// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { useState } from "react";
-import { Box as Box2, Select, Text as Text2 } from "@0xsequence/design-system";
-import { observer as observer2 } from "@legendapp/state/react";
-import { addDays, isSameDay } from "date-fns";
-
-// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { Button as Button2 } from "@0xsequence/design-system";
-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 jsx2 } from "react/jsx-runtime";
-function Calendar({ ...props }) {
-  const { selectedDate, setSelectedDate } = props;
-  return /* @__PURE__ */ jsx2(
-    DayPicker,
-    {
-      disabled: {
-        before: /* @__PURE__ */ new Date()
-      },
-      selected: selectedDate,
-      onDayClick: setSelectedDate,
-      defaultMonth: selectedDate,
-      modifiersStyles: {
-        selected: {
-          color: "hsl(var(--foreground))",
-          background: "hsl(var(--primary))",
-          border: "none"
-        }
-      },
-      styles: {
-        root: {
-          width: "max-content",
-          margin: 0,
-          color: "hsl(var(--foreground))",
-          background: "hsl(var(--background))",
-          border: `1px solid hsl(var(--border))`,
-          borderRadius: "var(--radius)",
-          padding: "0.5rem",
-          position: "relative"
-        },
-        day: {
-          margin: 0,
-          width: "1rem",
-          height: "1rem"
-        },
-        day_button: {
-          margin: 0,
-          width: "1.8rem",
-          height: "1.5rem",
-          padding: 0,
-          border: "none"
-        }
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-var calendar_default = Calendar;
-
-// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function CalendarPopover({
-  selectedDate,
-  setSelectedDate
-}) {
-  return /* @__PURE__ */ jsxs2(Root, { children: [
-    /* @__PURE__ */ jsx3(Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
-      Button2,
-      {
-        leftIcon: CalendarIcon_default,
-        className: dateSelectButton,
-        variant: "ghost",
-        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
-        shape: "square"
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Content, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx3(
-      calendar_default,
-      {
-        selectedDate,
-        setSelectedDate,
-        mode: "single"
-      }
-    ) }) })
-  ] });
-}
-
-// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var PRESET_RANGES = {
-  TODAY: {
-    label: "Today",
-    value: "today",
-    offset: 0
-  },
-  TOMORROW: {
-    label: "Tomorrow",
-    value: "tomorrow",
-    offset: 1
-  },
-  IN_3_DAYS: {
-    label: "In 3 days",
-    value: "3_days",
-    offset: 3
-  },
-  ONE_WEEK: {
-    label: "1 week",
-    value: "1_week",
-    offset: 7
-  },
-  ONE_MONTH: {
-    label: "1 month",
-    value: "1_month",
-    offset: 30
-  }
-};
-var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
-  className,
-  $date
-}) {
-  const [_, setRange] = useState("1_week");
-  function handleSelectPresetRange(range) {
-    setRange(range);
-    const presetRange = Object.values(PRESET_RANGES).find(
-      (preset) => preset.value === range
-    );
-    if (!presetRange) {
-      return;
-    }
-    const newDate = addDays(/* @__PURE__ */ new Date(), presetRange.offset);
-    $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);
-  }
-  return /* @__PURE__ */ jsxs3(Box2, { width: "full", position: "relative", children: [
-    /* @__PURE__ */ jsx4(
-      Text2,
-      {
-        fontSize: "small",
-        fontWeight: "medium",
-        textAlign: "left",
-        width: "full",
-        color: "text100",
-        children: "Set expiry"
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      Box2,
-      {
-        className,
-        width: "full",
-        display: "flex",
-        alignItems: "center",
-        gap: "2",
-        marginTop: "0.5",
-        children: [
-          /* @__PURE__ */ jsx4(Box2, { className: rangeSelect, position: "absolute", right: "2", children: /* @__PURE__ */ jsx4(
-            Select,
-            {
-              name: "expirationDate",
-              options: Object.values(PRESET_RANGES),
-              defaultValue: void 0,
-              value: Object.values(PRESET_RANGES).find(
-                (preset) => isSameDay(
-                  new Date($date.get()),
-                  addDays(/* @__PURE__ */ new Date(), preset.offset)
-                )
-              )?.value,
-              onValueChange: (value) => handleSelectPresetRange(value)
-            }
-          ) }),
-          /* @__PURE__ */ jsx4(
-            CalendarPopover,
-            {
-              selectedDate: $date.get(),
-              setSelectedDate: (date) => handleDateValueChange(date)
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-var expirationDateSelect_default = ExpirationDateSelect;
-
-// src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text3 } from "@0xsequence/design-system";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function FloorPriceText({
-  chainId,
-  collectionAddress,
-  tokenId,
-  price
-}) {
-  const { data: listing, isLoading: listingLoading } = useLowestListing({
-    tokenId,
-    chainId,
-    collectionAddress,
-    filters: {
-      currencies: [price.currency.contractAddress]
-    }
-  });
-  const floorPriceRaw = listing?.order?.priceAmount;
-  if (!floorPriceRaw || listingLoading || price.amountRaw === "0") {
-    return null;
-  }
-  const floorPriceDifference = calculatePriceDifferencePercentage({
-    inputPriceRaw: BigInt(price.amountRaw),
-    basePriceRaw: BigInt(floorPriceRaw),
-    decimals: price.currency.decimals
-  });
-  const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
-  return /* @__PURE__ */ jsx5(
-    Text3,
-    {
-      fontSize: "small",
-      fontWeight: "medium",
-      textAlign: "left",
-      width: "full",
-      color: "text50",
-      children: floorPriceDifferenceText
-    }
-  );
-}
-
-// src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box4, NumericInput, TokenImage } from "@0xsequence/design-system";
-import { observer as observer4 } from "@legendapp/state/react";
-import { useState as useState3 } from "react";
-import { erc20Abi, formatUnits, parseUnits } from "viem";
-import { useAccount as useAccount2, useReadContract } from "wagmi";
-
-// src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
-import { Box as Box3, Select as Select2, Skeleton } from "@0xsequence/design-system";
-import { observer as observer3 } from "@legendapp/state/react";
-import { useEffect, useState as useState2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
-  chainId,
-  collectionAddress,
-  $selectedCurrency
-}) {
-  const [value, setValue] = useState2(null);
-  const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
-    collectionAddress,
-    chainId
-  });
-  useEffect(() => {
-    if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
-      $selectedCurrency.set(currencies[0]);
-    }
-  }, [currencies]);
-  if (!currencies || currenciesLoading) {
-    return /* @__PURE__ */ jsx6(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
-  }
-  const options = currencies.map(
-    (currency) => ({
-      label: currency.name,
-      value: currency.contractAddress
-    })
-  );
-  const onChange = (value2) => {
-    const c = currencies.find(
-      (currency) => currency.contractAddress === value2
-    );
-    setValue(value2);
-    $selectedCurrency.set(c);
-  };
-  return /* @__PURE__ */ jsx6(Box3, { className: currencySelect, children: /* @__PURE__ */ jsx6(
-    Select2,
-    {
-      name: "currencies",
-      value: value || options?.[0]?.value,
-      onValueChange: (value2) => onChange(value2),
-      options
-    }
-  ) });
-});
-var currencyOptionsSelect_default = CurrencyOptionsSelect;
-
-// src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var PriceInput = observer4(function PriceInput2({
-  chainId,
-  collectionAddress,
-  $listingPrice,
-  checkBalance
-}) {
-  const [balanceError, setBalanceError] = useState3("");
-  const { address: accountAddress } = useAccount2();
-  const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
-    address: $listingPrice.currency.contractAddress.get(),
-    abi: erc20Abi,
-    functionName: "balanceOf",
-    args: [accountAddress],
-    query: {
-      enabled: checkBalance?.enabled
-    }
-  });
-  const listingPriceAmountRaw = $listingPrice.amountRaw.get();
-  const currencyDecimals = $listingPrice.currency.decimals.get();
-  const checkInsufficientBalance = (priceAmountRaw) => {
-    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance || 0);
-    if (!checkBalance) return;
-    if (hasInsufficientBalance) {
-      setBalanceError("Insufficient balance");
-      checkBalance.callback(true);
-    } else {
-      setBalanceError("");
-      checkBalance.callback(false);
-    }
-  };
-  const changeListingPrice = (value) => {
-    const parsedAmount = parseUnits(
-      value,
-      Number($listingPrice.currency.decimals.get())
-    );
-    $listingPrice.amountRaw.set(parsedAmount.toString());
-    checkBalance && checkInsufficientBalance(parsedAmount.toString());
-  };
-  return /* @__PURE__ */ jsxs4(Box4, { className: priceInputWrapper, position: "relative", children: [
-    /* @__PURE__ */ jsx7(
-      Box4,
-      {
-        className: priceInputCurrencyImage,
-        position: "absolute",
-        left: "2",
-        display: "flex",
-        alignItems: "center",
-        children: /* @__PURE__ */ jsx7(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      NumericInput,
-      {
-        name: "listingPrice",
-        decimals: $listingPrice?.currency.decimals.get(),
-        label: "Enter price",
-        labelLocation: "top",
-        placeholder: "0.00",
-        controls: /* @__PURE__ */ jsx7(
-          currencyOptionsSelect_default,
-          {
-            $selectedCurrency: $listingPrice?.currency,
-            collectionAddress,
-            chainId
-          }
-        ),
-        numeric: true,
-        value: listingPriceAmountRaw ? formatUnits(
-          BigInt(listingPriceAmountRaw),
-          Number(currencyDecimals)
-        ) : "",
-        onChange: (event) => changeListingPrice(event.target.value),
-        width: "full"
-      }
-    ),
-    balanceError && /* @__PURE__ */ jsx7(Box4, { color: "negative", fontSize: "small", children: balanceError })
-  ] });
-});
-var priceInput_default = PriceInput;
-
-// src/react/ui/modals/_internal/components/quantityInput/index.tsx
-import { Box as Box5, IconButton, NumericInput as NumericInput2 } from "@0xsequence/design-system";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function QuantityInput({
-  $quantity,
-  chainId,
-  collectionAddress,
-  collectibleId
-}) {
-  const { data: collectable, isLoading: collectableLoading } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const quantityDecimals = collectable && (collectable.decimals || 0);
-  function handleChangeQuantity(value) {
-    if (!isValidInput(value)) return;
-    const formattedValue = formatQuantity(value);
-    if (formattedValue !== null) {
-      $quantity.set(formattedValue);
-    }
-  }
-  function handleIncrement() {
-    if (!isValidInput()) return;
-    const newQuantity = incrementQuantity();
-    if (newQuantity !== null) {
-      $quantity.set(newQuantity);
-    }
-  }
-  function handleDecrement() {
-    if (!isValidInput()) return;
-    const newQuantity = decrementQuantity();
-    if (newQuantity !== null) {
-      $quantity.set(newQuantity);
-    }
-  }
-  function isValidInput(value) {
-    return collectable !== void 0 && quantityDecimals !== void 0 && (value === void 0 || value !== "");
-  }
-  function formatQuantity(value) {
-    if (quantityDecimals === 0 && value.includes(".")) {
-      return null;
-    }
-    if (quantityDecimals && quantityDecimals > 0) {
-      const decimalIndex = value.indexOf(".");
-      if (decimalIndex !== -1 && value.length - decimalIndex > quantityDecimals + 1) {
-        return null;
-      }
-    }
-    return value;
-  }
-  const quantity = $quantity.get();
-  function incrementQuantity() {
-    if (!isValidInput()) return null;
-    if (!quantity) {
-      return quantityDecimals === 0 ? "1" : `1.${"0".repeat(quantityDecimals)}`;
-    }
-    const newValue = quantityDecimals === 0 ? (Number.parseInt(quantity) + 1).toString() : (Number.parseFloat(quantity) + 1).toFixed(quantityDecimals);
-    return newValue;
-  }
-  function decrementQuantity() {
-    if (!quantity) {
-      return "1";
-    }
-    const newValue = Number.parseFloat(quantity) - 1;
-    if (newValue < 0) {
-      return null;
-    }
-    return quantityDecimals === 0 ? newValue.toString() : newValue.toFixed(quantityDecimals);
-  }
-  function getPlaceholder(decimals) {
-    if (decimals === 0) {
-      return "0";
-    } else {
-      return "0." + "0".repeat(decimals);
-    }
-  }
-  if (collectableLoading) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx8(Box5, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx8(
-    NumericInput2,
-    {
-      name: "quantity",
-      decimals: quantityDecimals || 0,
-      paddingLeft: "1",
-      label: "Enter quantity",
-      labelLocation: "top",
-      placeholder: getPlaceholder(quantityDecimals || 0),
-      controls: /* @__PURE__ */ jsxs5(
-        Box5,
-        {
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          marginRight: "2",
-          children: [
-            /* @__PURE__ */ jsx8(
-              IconButton,
-              {
-                disabled: Number.parseFloat(quantity) === 0 || !quantity,
-                onClick: handleDecrement,
-                background: "buttonGlass",
-                size: "xs",
-                icon: MinusIcon_default
-              }
-            ),
-            /* @__PURE__ */ jsx8(
-              IconButton,
-              {
-                onClick: handleIncrement,
-                background: "buttonGlass",
-                size: "xs",
-                icon: PlusIcon_default
-              }
-            )
-          ]
-        }
-      ),
-      numeric: true,
-      value: $quantity.get(),
-      onChange: (e) => handleChangeQuantity(e.target.value),
-      width: "full"
-    }
-  ) });
-}
-
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import { Close, Content as Content2, Overlay, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
-
-// src/react/ui/modals/_internal/components/switchChainModal/store.ts
-import { observable as observable2 } from "@legendapp/state";
-var initialState = {
-  isOpen: false,
-  open: ({ chainIdToSwitchTo, onSwitchChain, callbacks }) => {
-    switchChainModal$.state.set({
-      ...switchChainModal$.state.get(),
-      chainIdToSwitchTo,
-      onSwitchChain,
-      callbacks
-    });
-    switchChainModal$.isOpen.set(true);
-  },
-  close: () => {
-    switchChainModal$.isOpen.set(false);
-    switchChainModal$.state.set({
-      ...initialState.state
-    });
-  },
-  state: {
-    chainIdToSwitchTo: void 0,
-    onSwitchChain: () => {
-    },
-    isSwitching: false
-  }
-};
-var switchChainModal$ = observable2(initialState);
-
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import {
-  Button as Button3,
-  CloseIcon,
-  IconButton as IconButton2,
-  Spinner,
-  Text as Text5
-} from "@0xsequence/design-system";
-
-// src/react/ui/modals/_internal/components/alertMessage/index.tsx
-import { Box as Box6, Text as Text4, WarningIcon } from "@0xsequence/design-system";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function AlertMessage({ message, type }) {
-  return /* @__PURE__ */ jsxs6(Box6, { className: `${alertMessageBox} ${alertMessageBoxVariants[type]}`, children: [
-    /* @__PURE__ */ jsx9(Text4, { color: "white", fontSize: "normal", fontWeight: "medium", children: message }),
-    type === "warning" && /* @__PURE__ */ jsx9(WarningIcon, { size: "sm", color: "white" }),
-    type === "info" && /* @__PURE__ */ jsx9(InfoIcon_default, { size: "sm", color: "white" })
-  ] });
-}
-
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import { observer as observer5 } from "@legendapp/state/react";
-import { useSwitchChain } from "wagmi";
-import { BaseError } from "viem";
-
-// src/utils/network.ts
-import { networks } from "@0xsequence/network";
-var getPresentableChainName = (chainId) => {
-  return networks[chainId]?.name;
-};
-
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import { UserRejectedRequestError } from "viem";
-import { SwitchChainNotSupportedError } from "wagmi";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var useSwitchChainModal = () => {
-  return {
-    show: (args) => switchChainModal$.open(args),
-    close: () => switchChainModal$.close(),
-    isSwitching$: switchChainModal$.state.isSwitching
-  };
-};
-var SwitchChainModal = observer5(() => {
-  const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
-  const isSwitching$ = switchChainModal$.state.isSwitching;
-  const chainName = getPresentableChainName(chainIdToSwitchTo);
-  const { switchChainAsync } = useSwitchChain();
-  const {
-    onSwitchingNotSupported,
-    onUserRejectedRequest,
-    onUnknownError,
-    onSuccess
-  } = switchChainModal$.state.callbacks.get() || {};
-  async function handleSwitchChain() {
-    isSwitching$.set(true);
-    try {
-      await switchChainAsync({ chainId: chainIdToSwitchTo });
-      switchChainModal$.state.onSwitchChain();
-      onSuccess && onSuccess();
-      switchChainModal$.close();
-    } catch (error) {
-      if (error instanceof BaseError) {
-        const name = error.name;
-        switch (name) {
-          case SwitchChainNotSupportedError.name:
-            onSwitchingNotSupported && onSwitchingNotSupported();
-            break;
-          case UserRejectedRequestError.name:
-            onUserRejectedRequest && onUserRejectedRequest();
-            break;
-          default:
-            onUnknownError && onUnknownError(error);
-            break;
-        }
-      } else {
-        onUnknownError && onUnknownError(error);
-      }
-    } finally {
-      isSwitching$.set(false);
-    }
-  }
-  return /* @__PURE__ */ jsx10(Root2, { open: switchChainModal$.isOpen.get(), children: /* @__PURE__ */ jsxs7(Portal2, { children: [
-    /* @__PURE__ */ jsx10(Overlay, { className: dialogOverlay }),
-    /* @__PURE__ */ jsxs7(Content2, { className: switchChainModalContent, children: [
-      /* @__PURE__ */ jsx10(Text5, { fontSize: "large", fontWeight: "bold", color: "text100", children: "Wrong network" }),
-      /* @__PURE__ */ jsx10(
-        AlertMessage,
-        {
-          type: "warning",
-          message: `You need to switch to ${chainName} network before completing the transaction`
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        Button3,
-        {
-          name: "switch-chain",
-          size: "sm",
-          label: isSwitching$.get() ? /* @__PURE__ */ jsx10(Spinner, {}) : "Switch Network",
-          variant: "primary",
-          pending: isSwitching$.get(),
-          shape: "square",
-          className: isSwitching$.get() ? switchChainCta.pending : switchChainCta.default,
-          justifySelf: "flex-end",
-          onClick: handleSwitchChain
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        Close,
-        {
-          onClick: () => {
-            switchChainModal$.delete();
-          },
-          className: closeButton,
-          asChild: true,
-          children: /* @__PURE__ */ jsx10(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
-        }
-      )
-    ] })
-  ] }) });
-});
-var switchChainModal_default = SwitchChainModal;
-
-// src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box7, Image, Skeleton as Skeleton2, Text as Text6 } from "@0xsequence/design-system";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function TokenPreview({
-  collectionName,
-  collectionAddress,
-  collectibleId,
-  chainId
-}) {
-  const { data: collectable, isLoading: collectibleLoading } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs8(Box7, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx11(Skeleton2, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs8(Box7, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx11(Skeleton2, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx11(Skeleton2, { width: "1/2", height: "3" })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs8(Box7, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx11(
-      Image,
-      {
-        src: collectable?.image,
-        alt: collectable?.name,
-        width: "9",
-        height: "9",
-        borderRadius: "xs"
-      }
-    ),
-    /* @__PURE__ */ jsxs8(Box7, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx11(Text6, { fontSize: "small", color: "text80", fontWeight: "medium", children: collectionName }),
-      /* @__PURE__ */ jsx11(Text6, { fontSize: "small", fontWeight: "bold", color: "text100", children: collectable?.name })
-    ] })
-  ] });
-}
-
-// src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box8, NetworkImage, Skeleton as Skeleton3, Text as Text7 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
-function TransactionDetails({
-  collectibleId,
-  collectionAddress,
-  chainId,
-  price
-}) {
-  const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
-  const marketplaceFeePercentage = data?.collections.find(
-    (collection) => collection.collectionAddress === collectionAddress
-  )?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-  const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
-  if (royaltyPercentage !== void 0 && formattedAmount) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toString();
-  }
-  if (marketplaceFeePercentage !== void 0 && formattedAmount) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toString();
-  }
-  return /* @__PURE__ */ jsxs9(
-    Box8,
-    {
-      width: "full",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ jsx12(Text7, { fontSize: "small", color: "text50", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx12(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-          priceLoading ? /* @__PURE__ */ jsx12(Skeleton3, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text7, { fontSize: "small", color: "text100", children: [
-            formattedAmount,
-            " ",
-            price.currency.symbol
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/react/ui/modals/CreateListingModal/_store.ts
-import { observable as observable4, when } from "@legendapp/state";
-import { useMount, useSelector } from "@legendapp/state/react";
-import { addDays as addDays2 } from "date-fns/addDays";
-import { useAccount as useAccount3, useSendTransaction } from "wagmi";
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import {
-  CloseIcon as CloseIcon2,
-  IconButton as IconButton3,
-  Skeleton as Skeleton4,
-  Text as Text11
-} from "@0xsequence/design-system";
-import { observer as observer7 } from "@legendapp/state/react";
-import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
-import { useEffect as useEffect3 } from "react";
-import { useTransactionReceipt } from "wagmi";
-
-// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
-import { Box as Box9, Spinner as Spinner2, Text as Text8 } from "@0xsequence/design-system";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function TransactionFooter({
-  transactionHash,
-  isConfirming,
-  isConfirmed,
-  isFailed
-}) {
-  const icon = isConfirming && /* @__PURE__ */ jsx13(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx13(PositiveCircleIcon_default, { size: "md" });
-  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
-  return /* @__PURE__ */ jsxs10(Box9, { display: "flex", alignItems: "center", children: [
-    icon,
-    /* @__PURE__ */ jsx13(Text8, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
-    /* @__PURE__ */ jsx13(
-      Text8,
-      {
-        color: "polygonLight",
-        flexGrow: "1",
-        textAlign: "right",
-        fontSize: "normal",
-        fontWeight: "medium",
-        marginLeft: "2",
-        children: truncateMiddle(transactionHash, 4, 4)
-      }
-    )
-  ] });
-}
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { Box as Box11, Image as Image2, NetworkImage as NetworkImage2, Text as Text10 } from "@0xsequence/design-system";
-import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits3 } from "viem";
-
-// src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box10, Text as Text9 } from "@0xsequence/design-system";
-import { formatDistanceToNow } from "date-fns";
-import { useState as useState4, useEffect as useEffect2 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function TimeAgo({ date }) {
-  const [timeAgo, setTimeAgo] = useState4("");
-  useEffect2(() => {
-    const interval = setInterval(() => {
-      setTimeAgo(formatDistanceToNow(date));
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [date]);
-  return /* @__PURE__ */ jsx14(
-    Box10,
-    {
-      flexGrow: "1",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx14(Text9, { color: "text50", fontSize: "small", children: timeAgo })
-    }
-  );
-}
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
-import { observable as observable3 } from "@legendapp/state";
-var initialState2 = {
-  isOpen: false,
-  open: ({
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    type,
-    callbacks,
-    queriesToInvalidate
-  }) => {
-    transactionStatusModal$.state.set({
-      ...transactionStatusModal$.state.get(),
-      hash,
-      price,
-      collectionAddress,
-      chainId,
-      tokenId,
-      getTitle,
-      getMessage: getMessage2,
-      type,
-      callbacks,
-      queriesToInvalidate
-    });
-    transactionStatusModal$.isOpen.set(true);
-  },
-  close: () => {
-    transactionStatusModal$.isOpen.set(false);
-    transactionStatusModal$.state.set({
-      ...initialState2.state
-    });
-  },
-  state: {
-    hash: void 0,
-    status: "PENDING",
-    price: void 0,
-    collectionAddress: "",
-    chainId: "",
-    tokenId: "",
-    getTitle: void 0,
-    getMessage: void 0,
-    type: void 0
-  }
-};
-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: {
-    confirming: "Selling",
-    confirmed: "Sold",
-    failed: "Sale failed"
-  },
-  createListing: {
-    confirming: "Creating listing",
-    confirmed: "Listed",
-    failed: "Listing failed"
-  },
-  createOffer: {
-    confirming: "Creating offer",
-    confirmed: "Offer created",
-    failed: "Offer failed"
-  },
-  buy: {
-    confirming: "Buying",
-    confirmed: "Bought",
-    failed: "Purchase failed"
-  },
-  transfer: {
-    confirming: "Transferring",
-    confirmed: "Transferred",
-    failed: "Transfer failed"
-  }
-};
-
-// 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]);
-}
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var TransactionPreview = observer6(
-  ({
-    price,
-    collectionAddress,
-    chainId,
-    collectible,
-    isConfirming,
-    isConfirmed,
-    isFailed
-  }) => {
-    const { type } = transactionStatusModal$.state.get();
-    const title = useTransactionPreviewTitle(
-      { isConfirmed, isConfirming, isFailed },
-      type
-    );
-    const { data: collection } = useCollection({
-      collectionAddress,
-      chainId
-    });
-    const collectibleImage2 = collectible.image;
-    const collectibleName = collectible.name;
-    const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits3(BigInt(price.amountRaw), price.currency.decimals) : void 0;
-    return /* @__PURE__ */ jsxs11(Box11, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs11(Box11, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx15(
-          Text10,
-          {
-            color: "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            marginRight: "1",
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx15(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx15(TimeAgo, { date: /* @__PURE__ */ new Date() })
-      ] }),
-      /* @__PURE__ */ jsxs11(Box11, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx15(
-          Image2,
-          {
-            src: collectibleImage2,
-            alt: collectibleName,
-            width: "9",
-            height: "9",
-            borderRadius: "xs",
-            marginRight: "3"
-          }
-        ),
-        /* @__PURE__ */ jsxs11(
-          Box11,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "0.5",
-            children: [
-              /* @__PURE__ */ jsx15(Text10, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
-              /* @__PURE__ */ jsx15(Text10, { color: "text100", fontSize: "small", children: collectionName })
-            ]
-          }
-        ),
-        price && /* @__PURE__ */ jsxs11(
-          Box11,
-          {
-            flexGrow: "1",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: "1",
-            children: [
-              /* @__PURE__ */ jsx15(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
-              /* @__PURE__ */ jsxs11(Text10, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
-                priceFormatted,
-                " ",
-                price.currency.symbol
-              ] })
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
-var transactionPreview_default = TransactionPreview;
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
-var closeButton4 = "fyvr11lw fyvr1tc fyvr1mo";
-var dialogOverlay4 = "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 { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var useTransactionStatusModal = () => {
-  return {
-    show: (args) => transactionStatusModal$.open(args),
-    close: () => transactionStatusModal$.close()
-  };
-};
-var TransactionStatusModal = observer7(() => {
-  const {
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    callbacks,
-    queriesToInvalidate
-  } = transactionStatusModal$.state.get();
-  const { data: collectible } = useCollectible({
-    collectionAddress,
-    chainId,
-    collectibleId: tokenId
-  });
-  const {
-    isLoading: isConfirming,
-    isSuccess: isConfirmed,
-    isError: isFailed,
-    error
-  } = useTransactionReceipt({ hash });
-  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
-  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
-  const { onUnknownError, onSuccess } = callbacks || {};
-  const queryClient = getQueryClient();
-  useEffect3(() => {
-    if (!transactionStatusModal$.isOpen.get()) return;
-    let isSubscribed = true;
-    if (isConfirmed && isSubscribed && onSuccess) {
-      onSuccess();
-    }
-    if (isFailed && isSubscribed && onUnknownError) {
-      onUnknownError(error);
-    }
-    if (isSubscribed && queriesToInvalidate) {
-      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
-    }
-    return () => {
-      isSubscribed = false;
-    };
-  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
-  return /* @__PURE__ */ jsx16(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs12(Portal3, { children: [
-    /* @__PURE__ */ jsx16(Overlay2, { className: dialogOverlay4 }),
-    /* @__PURE__ */ jsxs12(Content3, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx16(Text11, { fontSize: "large", fontWeight: "bold", color: "text100", children: title }) : /* @__PURE__ */ jsx16(Skeleton4, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx16(Text11, { fontSize: "small", color: "text80", children: message }) : /* @__PURE__ */ jsx16(Skeleton4, { width: "20", height: "4" }),
-      /* @__PURE__ */ jsx16(
-        transactionPreview_default,
-        {
-          price,
-          collectionAddress,
-          chainId,
-          collectible,
-          isConfirming,
-          isConfirmed,
-          isFailed
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        TransactionFooter,
-        {
-          transactionHash: hash,
-          isConfirming,
-          isConfirmed,
-          isFailed
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        Close2,
-        {
-          onClick: () => {
-            transactionStatusModal$.close();
-          },
-          className: closeButton4,
-          asChild: true,
-          children: /* @__PURE__ */ jsx16(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
-        }
-      )
-    ] })
-  ] }) });
-});
-var transactionStatusModal_default = TransactionStatusModal;
-
-// src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts
-var getCreateListingTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Listing has processed";
-  }
-  if (params.isFailed) {
-    return "Listing has failed";
-  }
-  return "Listing is processing";
-};
-var getCreateListingTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just listed ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your listing of ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just listed ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
-// src/react/ui/modals/CreateListingModal/_store.ts
-var initialState3 = {
-  isOpen: false,
-  open: ({
-    collectionAddress,
-    chainId,
-    collectibleId
-  }) => {
-    createListingModal$.state.set({
-      ...createListingModal$.state.get(),
-      collectionAddress,
-      chainId,
-      collectibleId
-    });
-    createListingModal$.isOpen.set(true);
-  },
-  close: () => {
-    createListingModal$.isOpen.set(false);
-  },
-  state: {
-    collectionName: "",
-    listingPrice: {
-      amountRaw: "0",
-      currency: {}
-    },
-    quantity: "1",
-    expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
-    collectionType: void 0,
-    collectionAddress: "",
-    chainId: "",
-    collectibleId: ""
-  },
-  steps: {
-    isLoading: () => !!createListingModal$.steps.stepsData.get(),
-    stepsData: void 0,
-    _currentStep: null,
-    tokenApproval: {},
-    createListing: {}
-  },
-  hash: void 0
-};
-var createListingModal$ = observable4(initialState3);
-var exp = new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON());
-var useHydrate = () => {
-  const chainId = useSelector(createListingModal$.state.chainId);
-  const collectionAddress = useSelector(
-    createListingModal$.state.collectionAddress
-  );
-  const collectionType = useSelector(createListingModal$.state.collectionType);
-  const { data: collection, isSuccess: isSuccessCollection } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  when(isSuccessCollection, () => {
-    createListingModal$.state.collectionName.set(collection.name);
-    createListingModal$.state.collectionType.set(
-      collection.type
-    );
-  });
-  useTokenApprovalHandler(chainId);
-  useCreateListingHandler(chainId);
-  useShowTransactionStatusModal();
-  const onListingSuccess = (data) => {
-    createListingModal$.steps.stepsData.set(data);
-  };
-  const { generateListingTransactionAsync } = useGenerateListingTransaction({
-    chainId,
-    onSuccess: onListingSuccess
-  });
-  const { connector, address: userAddress } = useAccount3();
-  useMount(() => {
-    const setSteps = async () => {
-      const createListingTransactionSteps = await generateListingTransactionAsync({
-        collectionAddress,
-        orderbook: "sequence_marketplace_v1" /* sequence_marketplace_v1 */,
-        listing: {
-          tokenId: "1",
-          quantity: "1",
-          expiry: exp,
-          currencyAddress: createListingModal$.state.listingPrice.currency.contractAddress.get(),
-          pricePerToken: createListingModal$.state.listingPrice.amountRaw.get() || "1"
-        },
-        contractType: collectionType,
-        walletType: connector?.id,
-        owner: userAddress
-      });
-      createListingModal$.steps.stepsData.set(createListingTransactionSteps);
-    };
-    when(isSuccessCollection && collectionType, setSteps);
-  });
-};
-var useTokenApprovalHandler = (chainId) => {
-  const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
-  const onError = createListingModal$.state.get().errorCallbacks?.onApproveTokenError;
-  const onSuccess = createListingModal$.state.get().successCallbacks?.onApproveTokenSuccess;
-  createListingModal$.steps.tokenApproval.set({
-    isNeeded: () => !!createListingModal$.steps.tokenApproval.getStep(),
-    getStep: () => createListingModal$.steps.stepsData?.get()?.find((s) => s.id === "tokenApproval" /* tokenApproval */),
-    pending: createListingModal$.steps._currentStep.get() === "tokenApproval" && isPending,
-    execute: async () => {
-      const step = createListingModal$.steps.tokenApproval.getStep();
-      if (!step) return;
-      createListingModal$.steps._currentStep.set("tokenApproval");
-      try {
-        await sendTransactionAsync({
-          to: step.to,
-          chainId: Number(chainId),
-          data: step.data,
-          value: BigInt(step.value || "0")
-        });
-        onSuccess && onSuccess();
-      } catch (error) {
-        onError && onError(error);
-      }
-    }
-  });
-  if (isSuccess && createListingModal$.steps._currentStep.get() === "tokenApproval") {
-    createListingModal$.steps._currentStep.set(null);
-  }
-};
-var useCreateListingHandler = (chainId) => {
-  const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } = createListingModal$.state.get();
-  const { connector, address } = useAccount3();
-  const {
-    generateListingTransactionAsync,
-    isPending: generateListingTransactionPending
-  } = useGenerateListingTransaction({ chainId });
-  const { data: collectible } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const { sendTransactionAsync, isPending: sendTransactionPending } = useSendTransaction();
-  const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  createListingModal$.steps.createListing.set({
-    pending: createListingModal$.steps._currentStep.get() === "createListing" && (generateListingTransactionPending || sendTransactionPending),
-    execute: () => {
-      createListingModal$.steps._currentStep.set("createListing");
-      generateListingTransactionAsync({
-        collectionAddress: createListingModal$.state.collectionAddress.get(),
-        contractType: createListingModal$.state.collectionType.get(),
-        orderbook: "sequence_marketplace_v1" /* sequence_marketplace_v1 */,
-        walletType: connector?.id,
-        listing: {
-          tokenId: createListingModal$.state.collectibleId.get(),
-          quantity: createListingModal$.state.quantity.get(),
-          expiry: createListingModal$.state.expiry.get(),
-          currencyAddress: createListingModal$.state.listingPrice.currency.contractAddress.get(),
-          pricePerToken: createListingModal$.state.listingPrice.amountRaw.get() || "1"
-        },
-        owner: address
-      }).then(async (steps) => {
-        const step = steps.find((s) => s.id === "createListing" /* createListing */);
-        if (!step) throw new Error("No steps found");
-        const hash = await sendTransactionAsync({
-          to: step.to,
-          chainId: Number(chainId),
-          data: step.data,
-          value: BigInt(step.value || "0")
-        });
-        createListingModal$.hash.set(hash);
-        createListingModal$.steps._currentStep.set(null);
-        createListingModal$.close();
-        showTransactionStatusModal({
-          hash,
-          price: createListingModal$.state.listingPrice.get(),
-          collectionAddress,
-          chainId,
-          tokenId: collectibleId,
-          getTitle: getCreateListingTransactionTitle,
-          getMessage: (params) => getCreateListingTransactionMessage(
-            params,
-            collectible?.name || ""
-          ),
-          type: "transfer",
-          callbacks: {
-            onSuccess: successCallbacks?.onCreateListingSuccess,
-            onUnknownError: errorCallbacks?.onCreateListingError
-          },
-          queriesToInvalidate: collectableKeys.all
-        });
-      }).catch((error) => {
-        errorCallbacks?.onCreateListingError?.(error);
-      });
-    }
-  });
-};
-var useShowTransactionStatusModal = () => {
-  const { hash } = createListingModal$.get();
-  const { collectibleId, chainId, collectionAddress } = createListingModal$.state.get();
-  const { data: collectible } = useCollectible({
-    collectionAddress,
-    chainId,
-    collectibleId
-  });
-  const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  when(!!hash, () => {
-    showTransactionStatusModal({
-      hash,
-      collectionAddress,
-      chainId,
-      price: createListingModal$.state.listingPrice.get(),
-      tokenId: collectibleId,
-      getTitle: getCreateListingTransactionTitle,
-      getMessage: (params) => getCreateListingTransactionMessage(params, collectible?.name || ""),
-      type: "createListing" /* createListing */
-    });
-  });
-};
-
-// src/react/ui/modals/CreateListingModal/index.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var useCreateListingModal = () => {
-  const { chainId: accountChainId } = useAccount4();
-  const { show: showSwitchNetworkModal } = useSwitchChainModal();
-  const { errorCallbacks, successCallbacks } = createListingModal$.state.get();
-  const openModal = (args) => {
-    createListingModal$.open(args);
-  };
-  const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
-    if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSwitchChain: () => openModal(args),
-        callbacks: {
-          onSuccess: successCallbacks?.onSwitchChainSuccess,
-          onUnknownError: errorCallbacks?.onSwitchChainError,
-          onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
-          onUserRejectedRequest: errorCallbacks?.onUserRejectedSwitchingChainRequestError
-        }
-      });
-      return;
-    }
-    openModal(args);
-  };
-  return {
-    show: handleShowModal,
-    close: () => createListingModal$.close(),
-    onError: (callbacks) => {
-      createListingModal$.state.set({
-        ...createListingModal$.state.get(),
-        errorCallbacks: callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      createListingModal$.state.set({
-        ...createListingModal$.state.get(),
-        successCallbacks: callbacks
-      });
-    }
-  };
-};
-var CreateListingModal = () => {
-  return /* @__PURE__ */ jsx17(Show, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx17(Modal2, {}) });
-};
-var Modal2 = () => {
-  useHydrate();
-  return /* @__PURE__ */ jsx17(ModalContent, {});
-};
-var ModalContent = observer8(() => {
-  const {
-    chainId,
-    collectionAddress,
-    collectibleId,
-    collectionName,
-    collectionType,
-    listingPrice
-  } = createListingModal$.state.get();
-  const { steps } = createListingModal$.get();
-  const ctas = [
-    {
-      label: "Approve TOKEN",
-      onClick: steps.tokenApproval.execute,
-      hidden: !steps.tokenApproval.isNeeded(),
-      pending: steps.tokenApproval.pending,
-      variant: "glass"
-    },
-    {
-      label: "List item for sale",
-      onClick: steps.createListing.execute,
-      pending: steps.createListing.pending,
-      disabled: steps.tokenApproval.isNeeded() || listingPrice.amountRaw === "0"
-    }
-  ];
-  return /* @__PURE__ */ jsxs13(
-    ActionModal,
-    {
-      store: createListingModal$,
-      onClose: () => createListingModal$.close(),
-      title: "List item for sale",
-      ctas,
-      children: [
-        /* @__PURE__ */ jsx17(
-          TokenPreview,
-          {
-            collectionName,
-            collectionAddress,
-            collectibleId,
-            chainId
-          }
-        ),
-        /* @__PURE__ */ jsxs13(Box12, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
-          /* @__PURE__ */ jsx17(
-            priceInput_default,
-            {
-              chainId,
-              collectionAddress,
-              $listingPrice: createListingModal$.state.listingPrice
-            }
-          ),
-          !!listingPrice && /* @__PURE__ */ jsx17(
-            FloorPriceText,
-            {
-              tokenId: collectibleId,
-              chainId,
-              collectionAddress,
-              price: listingPrice
-            }
-          )
-        ] }),
-        collectionType === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx17(
-          QuantityInput,
-          {
-            chainId,
-            collectionAddress,
-            collectibleId,
-            $quantity: createListingModal$.state.quantity
-          }
-        ),
-        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: createListingModal$.state.expiry }),
-        /* @__PURE__ */ jsx17(
-          TransactionDetails,
-          {
-            collectibleId,
-            collectionAddress,
-            chainId,
-            price: createListingModal$.state.listingPrice.get()
-          }
-        )
-      ]
-    }
-  );
-});
-
-// src/react/ui/modals/MakeOfferModal/index.tsx
-import { Show as Show2, observer as observer9 } from "@legendapp/state/react";
-import { useState as useState5 } from "react";
-import { useAccount as useAccount6 } from "wagmi";
-
-// src/react/ui/modals/MakeOfferModal/_store.ts
-import { observable as observable5, when as when2 } from "@legendapp/state";
-import { useMount as useMount2, useSelector as useSelector2 } from "@legendapp/state/react";
-import { addDays as addDays3 } from "date-fns/addDays";
-import { useAccount as useAccount5, useSendTransaction as useSendTransaction2 } from "wagmi";
-
-// src/react/ui/modals/MakeOfferModal/_utils/getMakeOfferTransactionTitleMessage.ts
-var getMakeOfferTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Your offer has processed";
-  }
-  if (params.isFailed) {
-    return "Your offer has failed";
-  }
-  return "Your offer is processing";
-};
-var getMakeOfferTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just made offer for ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your offer for ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just made offer for ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
-// src/react/ui/modals/MakeOfferModal/_store.ts
-var initialState4 = {
-  isOpen: false,
-  open: ({
-    collectionAddress,
-    chainId,
-    collectibleId
-  }) => {
-    makeOfferModal$.state.set({
-      ...makeOfferModal$.state.get(),
-      collectionAddress,
-      chainId,
-      collectibleId
-    });
-    makeOfferModal$.isOpen.set(true);
-  },
-  close: () => {
-    makeOfferModal$.isOpen.set(false);
-  },
-  state: {
-    collectionName: "",
-    offerPrice: {
-      amountRaw: "0",
-      currency: {}
-    },
-    quantity: "1",
-    expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
-    collectionType: void 0,
-    collectionAddress: "",
-    chainId: "",
-    collectibleId: ""
-  },
-  steps: {
-    isLoading: () => !!makeOfferModal$.steps.stepsData.get(),
-    stepsData: void 0,
-    _currentStep: null,
-    tokenApproval: {},
-    createOffer: {}
-  },
-  hash: void 0
-};
-var makeOfferModal$ = observable5(initialState4);
-var exp2 = new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON());
-var useHydrate2 = () => {
-  const chainId = useSelector2(makeOfferModal$.state.chainId);
-  const collectionAddress = useSelector2(
-    makeOfferModal$.state.collectionAddress
-  );
-  const currencyAddress = useSelector2(
-    makeOfferModal$.state.offerPrice.currency.contractAddress
-  );
-  const collectionType = useSelector2(makeOfferModal$.state.collectionType);
-  const { data: collection, isSuccess: isSuccessCollection } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  when2(isSuccessCollection, () => {
-    makeOfferModal$.state.collectionName.set(collection.name);
-    makeOfferModal$.state.collectionType.set(
-      collection.type
-    );
-  });
-  useTokenApprovalHandler2(chainId);
-  useCreateOfferHandler(chainId);
-  const onOfferSuccess = (data) => {
-    makeOfferModal$.steps.stepsData.set(data);
-  };
-  const { generateOfferTransactionAsync } = useGenerateOfferTransaction({
-    chainId,
-    onSuccess: onOfferSuccess
-  });
-  const { connector, address: userAddress } = useAccount5();
-  useMount2(() => {
-    const setSteps = async () => {
-      const makeOfferTransactionData = await generateOfferTransactionAsync({
-        collectionAddress,
-        orderbook: "sequence_marketplace_v1" /* sequence_marketplace_v1 */,
-        offer: {
-          tokenId: "1",
-          quantity: "1",
-          expiry: exp2,
-          currencyAddress,
-          pricePerToken: makeOfferModal$.state.offerPrice.amountRaw.get() || "1"
-        },
-        maker: userAddress,
-        contractType: collectionType,
-        walletType: connector?.id
-      });
-      makeOfferModal$.steps.stepsData.set(makeOfferTransactionData);
-    };
-    when2(isSuccessCollection && collectionType && currencyAddress, setSteps);
-  });
-};
-var useTokenApprovalHandler2 = (chainId) => {
-  const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction2();
-  const onError = makeOfferModal$.state.get().errorCallbacks?.onApproveTokenError;
-  const onSuccess = makeOfferModal$.state.get().successCallbacks?.onApproveTokenSuccess;
-  makeOfferModal$.steps.tokenApproval.set({
-    isNeeded: () => !!makeOfferModal$.steps.tokenApproval.getStep(),
-    getStep: () => makeOfferModal$.steps.stepsData?.get()?.find((s) => s.id === "tokenApproval" /* tokenApproval */),
-    pending: makeOfferModal$.steps._currentStep.get() === "tokenApproval" && isPending,
-    execute: () => {
-      const step = makeOfferModal$.steps.tokenApproval.getStep();
-      if (!step) return;
-      makeOfferModal$.steps._currentStep.set("tokenApproval");
-      try {
-        sendTransactionAsync({
-          to: step.to,
-          chainId: Number(chainId),
-          data: step.data,
-          value: BigInt(step.value || "0")
-        });
-        onSuccess && onSuccess();
-      } catch (error) {
-        onError && onError(error);
-      }
-    }
-  });
-  if (isSuccess && makeOfferModal$.steps._currentStep.get() === "tokenApproval") {
-    makeOfferModal$.steps._currentStep.set(null);
-  }
-};
-var useCreateOfferHandler = (chainId) => {
-  const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } = makeOfferModal$.state.get();
-  const { connector, address } = useAccount5();
-  const {
-    generateOfferTransactionAsync,
-    isPending: generateOfferTransactionPending
-  } = useGenerateOfferTransaction({ chainId });
-  const { data: collectible } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const { sendTransactionAsync, isPending: sendTransactionPending } = useSendTransaction2();
-  const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  makeOfferModal$.steps.createOffer.set({
-    pending: makeOfferModal$.steps._currentStep.get() === "createOffer" && (generateOfferTransactionPending || sendTransactionPending),
-    execute: () => {
-      makeOfferModal$.steps._currentStep.set("createOffer");
-      generateOfferTransactionAsync({
-        collectionAddress: makeOfferModal$.state.collectionAddress.get(),
-        maker: address,
-        contractType: makeOfferModal$.state.collectionType.get(),
-        orderbook: "sequence_marketplace_v1" /* sequence_marketplace_v1 */,
-        walletType: connector?.id,
-        offer: {
-          tokenId: makeOfferModal$.state.collectibleId.get(),
-          quantity: makeOfferModal$.state.quantity.get(),
-          expiry: makeOfferModal$.state.expiry.get(),
-          currencyAddress: makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
-          pricePerToken: makeOfferModal$.state.offerPrice.amountRaw.get()
-        }
-      }).then(async (steps) => {
-        const step = steps.find((s) => s.id === "createOffer" /* createOffer */);
-        if (!step) throw new Error("No steps found");
-        const hash = await sendTransactionAsync({
-          to: step.to,
-          chainId: Number(chainId),
-          data: step.data,
-          value: BigInt(step.value || "0")
-        });
-        makeOfferModal$.hash.set(hash);
-        makeOfferModal$.steps._currentStep.set(null);
-        makeOfferModal$.close();
-        showTransactionStatusModal({
-          hash,
-          price: makeOfferModal$.state.offerPrice.get(),
-          collectionAddress,
-          chainId,
-          tokenId: collectibleId,
-          getTitle: getMakeOfferTransactionTitle,
-          getMessage: (params) => getMakeOfferTransactionMessage(params, collectible?.name || ""),
-          type: "createOffer" /* createOffer */,
-          callbacks: {
-            onSuccess: successCallbacks?.onMakeOfferSuccess,
-            onUnknownError: errorCallbacks?.onMakeOfferError
-          },
-          queriesToInvalidate: collectableKeys.all
-        });
-      }).catch((error) => {
-        errorCallbacks?.onMakeOfferError?.(error);
-      });
-    }
-  });
-};
-
-// src/react/ui/modals/MakeOfferModal/index.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-var useMakeOfferModal = () => {
-  const { chainId: accountChainId } = useAccount6();
-  const { show: showSwitchNetworkModal } = useSwitchChainModal();
-  const { errorCallbacks, successCallbacks } = makeOfferModal$.state.get();
-  const openModal = (args) => {
-    makeOfferModal$.open(args);
-  };
-  const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
-    if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSwitchChain: () => openModal(args),
-        callbacks: {
-          onSuccess: successCallbacks?.onSwitchChainSuccess,
-          onUnknownError: errorCallbacks?.onSwitchChainError,
-          onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
-          onUserRejectedRequest: errorCallbacks?.onUserRejectedSwitchingChainRequestError
-        }
-      });
-      return;
-    }
-    openModal(args);
-  };
-  return {
-    show: handleShowModal,
-    close: () => makeOfferModal$.close(),
-    onError: (callbacks) => {
-      makeOfferModal$.state.set({
-        ...makeOfferModal$.state.get(),
-        errorCallbacks: callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      makeOfferModal$.state.set({
-        ...makeOfferModal$.state.get(),
-        successCallbacks: callbacks
-      });
-    }
-  };
-};
-var MakeOfferModal = () => {
-  return /* @__PURE__ */ jsx18(Show2, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx18(Modal3, {}) });
-};
-var Modal3 = () => {
-  useHydrate2();
-  return /* @__PURE__ */ jsx18(ModalContent2, {});
-};
-var ModalContent2 = observer9(() => {
-  const [insufficientBalance, setInsufficientBalance] = useState5(false);
-  const {
-    chainId,
-    collectionAddress,
-    collectibleId,
-    collectionName,
-    collectionType,
-    offerPrice
-  } = makeOfferModal$.state.get();
-  const { steps } = makeOfferModal$.get();
-  const ctas = [
-    {
-      label: "Approve TOKEN",
-      onClick: steps.tokenApproval.execute,
-      hidden: !steps.tokenApproval.isNeeded(),
-      pending: steps.tokenApproval.pending,
-      variant: "glass"
-    },
-    {
-      label: "Make offer",
-      onClick: steps.createOffer.execute,
-      pending: steps.createOffer.pending,
-      disabled: steps.tokenApproval.isNeeded() || offerPrice.amountRaw === "0" || insufficientBalance
-    }
-  ];
-  return /* @__PURE__ */ jsxs14(
-    ActionModal,
-    {
-      store: makeOfferModal$,
-      onClose: () => {
-        makeOfferModal$.close();
-      },
-      title: "Make an offer",
-      ctas,
-      children: [
-        /* @__PURE__ */ jsx18(
-          TokenPreview,
-          {
-            collectionName,
-            collectionAddress,
-            collectibleId,
-            chainId
-          }
-        ),
-        /* @__PURE__ */ jsx18(
-          priceInput_default,
-          {
-            chainId,
-            collectionAddress,
-            $listingPrice: makeOfferModal$.state.offerPrice,
-            checkBalance: {
-              enabled: true,
-              callback: (state) => setInsufficientBalance(state)
-            }
-          }
-        ),
-        collectionType === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx18(
-          QuantityInput,
-          {
-            chainId,
-            $quantity: makeOfferModal$.state.quantity,
-            collectionAddress,
-            collectibleId
-          }
-        ),
-        !!offerPrice && /* @__PURE__ */ jsx18(
-          FloorPriceText,
-          {
-            tokenId: collectibleId,
-            chainId,
-            collectionAddress,
-            price: offerPrice
-          }
-        ),
-        /* @__PURE__ */ jsx18(expirationDateSelect_default, { $date: makeOfferModal$.state.expiry })
-      ]
-    }
-  );
-});
-
-// src/react/ui/modals/SellModal/index.tsx
-import { Show as Show3, observer as observer10 } from "@legendapp/state/react";
-import { useAccount as useAccount8 } from "wagmi";
-
-// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box13, NetworkImage as NetworkImage3, Skeleton as Skeleton5, Text as Text12 } from "@0xsequence/design-system";
-import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-function TransactionHeader({
-  title,
-  chainId,
-  date
-}) {
-  return /* @__PURE__ */ jsxs15(Box13, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx19(Text12, { fontSize: "small", fontWeight: "medium", color: "text80", marginRight: "1", children: title }),
-    /* @__PURE__ */ jsx19(NetworkImage3, { size: "xs", chainId }),
-    date && /* @__PURE__ */ jsxs15(Text12, { fontSize: "small", color: "text50", flexGrow: "1", textAlign: "right", children: [
-      formatDistanceToNow2(date),
-      " ago"
-    ] }) || /* @__PURE__ */ jsx19(Skeleton5, { width: "8", height: "4" })
-  ] });
-}
-
-// src/react/ui/modals/SellModal/_store.ts
-import { observable as observable6, when as when3 } from "@legendapp/state";
-import { useMount as useMount3, useSelector as useSelector3 } from "@legendapp/state/react";
-import { useAccount as useAccount7, useSendTransaction as useSendTransaction3 } from "wagmi";
-
-// src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts
-var getSellTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Your sale has processed";
-  }
-  if (params.isFailed) {
-    return "Your sale has failed";
-  }
-  return "Your sale is processing";
-};
-var getSellTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just sold ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your sale of ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just sold ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
-// src/react/ui/modals/SellModal/_store.ts
-var initialState5 = {
-  isOpen: false,
-  open: ({ collectionAddress, chainId, tokenId, order }) => {
-    sellModal$.state.set({
-      ...sellModal$.state.get(),
-      collectionAddress,
-      chainId,
-      tokenId,
-      order
-    });
-    sellModal$.isOpen.set(true);
-  },
-  close: () => {
-    sellModal$.isOpen.set(false);
-    sellModal$.state.set({
-      ...initialState5.state
-    });
-  },
-  state: {
-    collectionAddress: "",
-    chainId: "",
-    tokenId: "",
-    order: void 0
-  },
-  steps: {
-    isLoading: () => !!sellModal$.steps.stepsData.get(),
-    stepsData: void 0,
-    _currentStep: null,
-    tokenApproval: {},
-    sell: {}
-  },
-  hash: void 0
-};
-var sellModal$ = observable6(initialState5);
-var useHydrate3 = () => {
-  const chainId = useSelector3(sellModal$.state.chainId);
-  const collectionAddress = useSelector3(sellModal$.state.collectionAddress);
-  const order = useSelector3(sellModal$.state.order);
-  useTokenApprovalHandler3(chainId);
-  useSellHandler(chainId);
-  const { generateSellTransactionAsync } = useGenerateSellTransaction({
-    chainId
-  });
-  const { connector, address } = useAccount7();
-  useMount3(() => {
-    const setSteps = async () => {
-      const sellTransactionData = await generateSellTransactionAsync({
-        walletType: connector?.walletType,
-        collectionAddress,
-        seller: address,
-        marketplace: "sequence_marketplace_v1" /* sequence_marketplace_v1 */,
-        ordersData: [
-          {
-            ...order,
-            orderId: order.orderId,
-            quantity: "1"
-          }
-        ],
-        additionalFees: []
-      });
-      sellModal$.steps.stepsData.set(sellTransactionData);
-    };
-    when3(() => !!order && !!connector, setSteps);
-  });
-};
-var useTokenApprovalHandler3 = (chainId) => {
-  const { sendTransactionAsync, isPending } = useSendTransaction3();
-  const onError = sellModal$.state.get().errorCallbacks?.onApproveTokenError;
-  const onSuccess = sellModal$.state.get().successCallbacks?.onApproveTokenSuccess;
-  sellModal$.steps.tokenApproval.set({
-    isNeeded: () => !!sellModal$.steps.tokenApproval.getStep(),
-    getStep: () => sellModal$.steps.stepsData?.get()?.find((s) => s.id === "tokenApproval" /* tokenApproval */),
-    pending: sellModal$.steps._currentStep.get() === "tokenApproval" && isPending,
-    execute: async () => {
-      const step = sellModal$.steps.tokenApproval.getStep();
-      if (!step) return;
-      sellModal$.steps._currentStep.set("tokenApproval");
-      try {
-        await sendTransactionAsync({
-          to: step.to,
-          chainId: Number(chainId),
-          data: step.data,
-          value: BigInt(step.value || "0")
-        });
-        sellModal$.steps._currentStep.set(null);
-        onSuccess && onSuccess();
-      } catch (error) {
-        onError && onError(error);
-      }
-    }
-  });
-};
-var useSellHandler = (chainId) => {
-  const { tokenId, collectionAddress, errorCallbacks, successCallbacks } = sellModal$.state.get();
-  const { address } = useAccount7();
-  const {
-    generateSellTransactionAsync,
-    isPending: generateSellTransactionPending
-  } = useGenerateSellTransaction({
-    chainId
-  });
-  const { data: collectible } = useCollectible({
-    chainId,
-    collectibleId: tokenId,
-    collectionAddress
-  });
-  const { data: currencies } = useCurrencies({ chainId });
-  const { sendTransactionAsync, isPending: sendTransactionPending } = useSendTransaction3();
-  const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  function setSellStep() {
-    sellModal$.steps.sell.set({
-      pending: sellModal$.steps._currentStep.get() === "sell" && (generateSellTransactionPending || sendTransactionPending),
-      execute: () => {
-        sellModal$.steps._currentStep.set("sell");
-        const { collectionAddress: collectionAddress2, order } = sellModal$.state.get();
-        generateSellTransactionAsync({
-          collectionAddress: collectionAddress2,
-          seller: address,
-          marketplace: order.marketplace,
-          ordersData: [
-            {
-              ...order,
-              quantity: "1"
-            }
-          ],
-          additionalFees: order?.feeBreakdown ? [
-            {
-              amount: String(order.feeBps),
-              receiver: order.feeBreakdown?.[0]?.recipientAddress
-            }
-          ] : []
-        }).then(async (response) => {
-          const step = response.find((s) => s.id === "sell" /* sell */);
-          if (!step) throw new Error("No steps found");
-          try {
-            const hash = await sendTransactionAsync({
-              to: step.to,
-              chainId: Number(chainId),
-              data: step.data,
-              value: BigInt(step.value || "0")
-            });
-            sellModal$.hash.set(hash);
-            sellModal$.steps._currentStep.set(null);
-            sellModal$.close();
-            showTransactionStatusModal({
-              hash,
-              price: {
-                amountRaw: order.priceAmount,
-                currency: currencies.find(
-                  (currency) => currency.contractAddress === order.priceCurrencyAddress
-                )
-              },
-              collectionAddress: collectionAddress2,
-              chainId,
-              tokenId,
-              getTitle: getSellTransactionTitle,
-              getMessage: (params) => getSellTransactionMessage(params, collectible?.name || ""),
-              type: "sell" /* sell */,
-              callbacks: {
-                onSuccess: successCallbacks?.onSellSuccess,
-                onUnknownError: errorCallbacks?.onSellError
-              },
-              queriesToInvalidate: [
-                ...collectableKeys.all,
-                balanceQueries.all
-              ]
-            });
-          } catch (error) {
-            errorCallbacks?.onSellError?.(error);
-          }
-        }).catch((error) => {
-          errorCallbacks?.onSellError?.(error);
-        });
-      }
-    });
-  }
-  when3(currencies && collectible, setSellStep);
-};
-
-// src/react/ui/modals/SellModal/index.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var useSellModal = () => {
-  const { chainId: accountChainId } = useAccount8();
-  const { show: showSwitchNetworkModal } = useSwitchChainModal();
-  const { errorCallbacks, successCallbacks } = sellModal$.state.get();
-  const openModal = (args) => {
-    sellModal$.open(args);
-  };
-  const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
-    if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSwitchChain: () => openModal(args),
-        callbacks: {
-          onSuccess: successCallbacks?.onSwitchChainSuccess,
-          onUnknownError: errorCallbacks?.onSwitchChainError,
-          onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
-          onUserRejectedRequest: errorCallbacks?.onUserRejectedSwitchingChainRequestError
-        }
-      });
-      return;
-    }
-    openModal(args);
-  };
-  return {
-    show: handleShowModal,
-    close: () => sellModal$.close(),
-    onError: (callbacks) => {
-      sellModal$.state.set({
-        ...sellModal$.state.get(),
-        errorCallbacks: callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      sellModal$.state.set({
-        ...sellModal$.state.get(),
-        successCallbacks: callbacks
-      });
-    }
-  };
-};
-var SellModal = () => {
-  return /* @__PURE__ */ jsx20(Show3, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx20(Modal4, {}) });
-};
-var Modal4 = () => {
-  useHydrate3();
-  return /* @__PURE__ */ jsx20(ModalContent3, {});
-};
-var ModalContent3 = observer10(() => {
-  const modalState = sellModal$.state.get();
-  const { collectionAddress, chainId, tokenId, order } = modalState;
-  const { steps } = sellModal$.get();
-  const { data: collection } = useCollection({ chainId, collectionAddress });
-  const { data: currencies } = useCurrencies({ chainId, collectionAddress });
-  const currency = currencies?.find(
-    (currency2) => currency2.contractAddress === order?.priceCurrencyAddress
-  );
-  const ctas = [
-    {
-      label: "Approve TOKEN",
-      onClick: steps.tokenApproval.execute,
-      hidden: !steps.tokenApproval.isNeeded(),
-      pending: steps.tokenApproval.pending,
-      variant: "glass"
-    },
-    {
-      label: "Accept",
-      onClick: steps.sell.execute,
-      pending: steps.sell.pending,
-      disabled: steps.tokenApproval.isNeeded()
-    }
-  ];
-  return /* @__PURE__ */ jsxs16(
-    ActionModal,
-    {
-      store: sellModal$,
-      onClose: () => sellModal$.close(),
-      title: "You have an offer",
-      ctas,
-      children: [
-        /* @__PURE__ */ jsx20(
-          TransactionHeader,
-          {
-            title: "Offer received",
-            chainId: Number(chainId),
-            date: order && new Date(order.createdAt)
-          }
-        ),
-        /* @__PURE__ */ jsx20(
-          TokenPreview,
-          {
-            collectionName: collection?.name,
-            collectionAddress,
-            collectibleId: tokenId,
-            chainId
-          }
-        ),
-        /* @__PURE__ */ jsx20(
-          TransactionDetails,
-          {
-            collectibleId: tokenId,
-            collectionAddress,
-            chainId,
-            price: currency ? { amountRaw: order?.priceAmount, currency } : void 0
-          }
-        )
-      ]
-    }
-  );
-});
-
-// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import {
-  Box as Box14,
-  Button as Button4,
-  CloseIcon as CloseIcon3,
-  ExternalLinkIcon,
-  IconButton as IconButton4,
-  Image as Image3,
-  Text as Text13
-} from "@0xsequence/design-system";
-import { observer as observer11 } from "@legendapp/state/react";
-import { Close as Close3, Content as Content4, Overlay as Overlay3, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
-
-// src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
-import { observable as observable7 } from "@legendapp/state";
-var initialState6 = {
-  isOpen: false,
-  open: ({
-    collectibles,
-    totalPrice,
-    explorerName,
-    explorerUrl,
-    ctaOptions
-  }) => {
-    successfulPurchaseModal$.state.set({
-      ...successfulPurchaseModal$.state.get(),
-      collectibles,
-      totalPrice,
-      explorerName,
-      explorerUrl,
-      ctaOptions
-    });
-    successfulPurchaseModal$.isOpen.set(true);
-  },
-  close: () => {
-    successfulPurchaseModal$.isOpen.set(false);
-    successfulPurchaseModal$.state.set({
-      ...initialState6.state
-    });
-  },
-  state: {
-    collectibles: [],
-    totalPrice: "0",
-    explorerName: "",
-    explorerUrl: "",
-    ctaOptions: void 0
-  }
-};
-var successfulPurchaseModal$ = observable7(initialState6);
-
-// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
-var useSuccessfulPurchaseModal = () => {
-  return {
-    show: (args) => successfulPurchaseModal$.open(args),
-    close: () => successfulPurchaseModal$.close()
-  };
-};
-var SuccessfulPurchaseModal = observer11(() => {
-  return /* @__PURE__ */ jsx21(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs17(Portal4, { children: [
-    /* @__PURE__ */ jsx21(Overlay3, { className: dialogOverlay2 }),
-    /* @__PURE__ */ jsxs17(Content4, { className: dialogContent.narrow, children: [
-      /* @__PURE__ */ jsxs17(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
-        /* @__PURE__ */ jsx21(
-          Text13,
-          {
-            textAlign: "center",
-            fontSize: "medium",
-            fontWeight: "bold",
-            color: "text100",
-            children: "Successful purchase!"
-          }
-        ),
-        /* @__PURE__ */ jsx21(
-          CollectiblesGrid,
-          {
-            collectibles: successfulPurchaseModal$.state.get().collectibles
-          }
-        ),
-        /* @__PURE__ */ jsxs17(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx21(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx21(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx21(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx21(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
-        ] }),
-        /* @__PURE__ */ jsx21(SuccessfulPurchaseActions, {})
-      ] }),
-      /* @__PURE__ */ jsx21(
-        Close3,
-        {
-          onClick: () => {
-            successfulPurchaseModal$.close();
-          },
-          className: closeButton2,
-          asChild: true,
-          children: /* @__PURE__ */ jsx21(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 })
-        }
-      )
-    ] })
-  ] }) });
-});
-function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs17(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx21(
-      Button4,
-      {
-        shape: "square",
-        leftIcon: successfulPurchaseModal$.state.ctaOptions.ctaIcon.get() || void 0,
-        label: successfulPurchaseModal$.state.ctaOptions.ctaLabel.get(),
-        width: "full",
-        onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
-      }
-    ),
-    /* @__PURE__ */ jsx21(
-      Button4,
-      {
-        as: "a",
-        href: successfulPurchaseModal$.state.explorerUrl.get(),
-        target: "_blank",
-        rel: "noopener noreferrer",
-        shape: "square",
-        leftIcon: ExternalLinkIcon,
-        label: `View on ${successfulPurchaseModal$.state.explorerName.get()}`,
-        width: "full"
-      }
-    )
-  ] });
-}
-function CollectiblesGrid({ collectibles }) {
-  const total = collectibles.length;
-  const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx21(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
-    const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs17(
-      Box14,
-      {
-        className: collectiblesGridItem,
-        position: "relative",
-        children: [
-          /* @__PURE__ */ jsx21(
-            Image3,
-            {
-              src: collectible.image,
-              alt: collectible.name,
-              className: showPlus ? collectiblesGridImagePale : collectiblesGridImage,
-              aspectRatio: "1/1",
-              background: "backgroundSecondary",
-              borderRadius: "sm"
-            }
-          ),
-          showPlus && /* @__PURE__ */ jsx21(
-            Box14,
-            {
-              position: "absolute",
-              top: "0",
-              left: "0",
-              right: "0",
-              bottom: "0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "backgroundOverlay",
-              backdropFilter: "blur",
-              children: /* @__PURE__ */ jsxs17(
-                Text13,
-                {
-                  fontSize: "small",
-                  fontWeight: "medium",
-                  color: "text80",
-                  paddingX: "2",
-                  paddingY: "1.5",
-                  borderRadius: "sm",
-                  background: "backgroundSecondary",
-                  backdropFilter: "blur",
-                  children: [
-                    total,
-                    " TOTAL"
-                  ]
-                }
-              )
-            }
-          )
-        ]
-      },
-      collectible.tokenId
-    );
-  }) });
-}
-var SuccessfulPurchaseModal_default = SuccessfulPurchaseModal;
-
-// src/react/ui/modals/TransferModal/_store.ts
-import { observable as observable8 } from "@legendapp/state";
-var initialState7 = {
-  isOpen: false,
-  open: ({ chainId, collectionAddress, tokenId }) => {
-    transferModal$.state.set({
-      ...transferModal$.state.get(),
-      chainId,
-      collectionAddress,
-      tokenId
-    });
-    transferModal$.isOpen.set(true);
-  },
-  close: () => {
-    transferModal$.isOpen.set(false);
-    transferModal$.state.set({
-      ...initialState7.state
-    });
-    transferModal$.view.set("enterReceiverAddress");
-    transferModal$.hash.set(void 0);
-  },
-  state: {
-    receiverAddress: "",
-    collectionAddress: "0x",
-    chainId: "",
-    tokenId: "",
-    quantity: "1"
-  },
-  view: "enterReceiverAddress",
-  hash: void 0
-};
-var transferModal$ = observable8(initialState7);
-
-// src/react/ui/modals/TransferModal/index.tsx
-import { CloseIcon as CloseIcon4, IconButton as IconButton5 } from "@0xsequence/design-system";
-import { observer as observer13, Show as Show4 } from "@legendapp/state/react";
-import { Close as Close4, Content as Content5, Overlay as Overlay4, Portal as Portal5, Root as Root5 } from "@radix-ui/react-dialog";
-import { useAccount as useAccount10 } from "wagmi";
-
-// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box15, Button as Button5, Text as Text14, TextInput } from "@0xsequence/design-system";
-import { isAddress } from "viem";
-import { useAccount as useAccount9 } from "wagmi";
-
-// src/react/ui/modals/TransferModal/messages.ts
-var baseMessages = {
-  enterReceiverAddress: "Items sent to the wrong wallet address can't be recovered!",
-  followWalletInstructions: "Follow your wallet's instructions to submit a transaction to transfer your assets."
-};
-function getMessage(key) {
-  return baseMessages[key];
-}
-
-// src/react/ui/modals/TransferModal/_utils/getTransferTransactionTitleMessage.ts
-var getTransferTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Transfer has processed";
-  }
-  if (params.isFailed) {
-    return "Transfer has failed";
-  }
-  return "Transfer is processing";
-};
-var getTransferTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just tranferred ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Transferring ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just transferred ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
-// src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx
-var useHandleTransfer = () => {
-  const {
-    receiverAddress,
-    collectionAddress,
-    tokenId,
-    quantity,
-    chainId,
-    collectionType,
-    successCallbacks,
-    errorCallbacks
-  } = transferModal$.state.get();
-  const { transferTokensAsync } = useTransferTokens();
-  const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  const { data: collectible } = useCollectible({
-    collectionAddress,
-    collectibleId: tokenId,
-    chainId
-  });
-  async function transfer() {
-    if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
-      throw new Error("Invalid contract type");
-    }
-    if (collectionType === "ERC721" /* ERC721 */) {
-      try {
-        const hash = await transferTokensAsync({
-          receiverAddress,
-          collectionAddress,
-          tokenId,
-          chainId,
-          contractType: "ERC721" /* ERC721 */
-        });
-        transferModal$.close();
-        showTransactionStatusModal({
-          hash,
-          collectionAddress,
-          chainId,
-          tokenId,
-          price: void 0,
-          getTitle: getTransferTransactionTitle,
-          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
-          type: "transfer",
-          callbacks: {
-            onSuccess: successCallbacks?.onTransferSuccess,
-            onUnknownError: errorCallbacks?.onTransferError
-          },
-          queriesToInvalidate: balanceQueries.all
-        });
-      } catch (error) {
-        transferModal$.view.set("enterReceiverAddress");
-        errorCallbacks?.onTransferError?.(error);
-      }
-    }
-    if (collectionType === "ERC1155" /* ERC1155 */) {
-      try {
-        const hash = await transferTokensAsync({
-          receiverAddress,
-          collectionAddress,
-          tokenId,
-          chainId,
-          contractType: "ERC1155" /* ERC1155 */,
-          quantity: String(quantity)
-        });
-        transferModal$.close();
-        showTransactionStatusModal({
-          hash,
-          collectionAddress,
-          chainId,
-          tokenId,
-          price: void 0,
-          getTitle: getTransferTransactionTitle,
-          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
-          type: "transfer",
-          callbacks: {
-            onSuccess: successCallbacks?.onTransferSuccess,
-            onUnknownError: errorCallbacks?.onTransferError
-          }
-        });
-      } catch (error) {
-        transferModal$.view.set("enterReceiverAddress");
-        errorCallbacks?.onTransferError?.(error);
-      }
-    }
-  }
-  return { transfer };
-};
-var useHandleTransfer_default = useHandleTransfer;
-
-// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
-var EnterWalletAddressView = () => {
-  const { address } = useAccount9();
-  const { collectionAddress, tokenId, chainId, collectionType } = transferModal$.state.get();
-  const $quantity = transferModal$.state.quantity;
-  const isWalletAddressValid = isAddress(
-    transferModal$.state.receiverAddress.get()
-  );
-  const { data: tokenBalance } = useListBalances({
-    chainId,
-    contractAddress: collectionAddress,
-    tokenId,
-    accountAddress: address,
-    query: { enabled: !!address }
-  });
-  const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-  const insufficientBalance = $quantity.get() > balanceAmount;
-  const { data: collection } = useCollection({
-    collectionAddress,
-    chainId
-  });
-  transferModal$.state.collectionType.set(
-    collection?.type
-  );
-  const { transfer } = useHandleTransfer_default();
-  function handleChangeWalletAddress(event) {
-    transferModal$.state.receiverAddress.set(event.target.value);
-  }
-  function handleChangeView() {
-    transfer();
-    transferModal$.view.set("followWalletInstructions");
-  }
-  return /* @__PURE__ */ jsxs18(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx22(Text14, { color: "white", fontSize: "large", fontWeight: "bold", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs18(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
-      /* @__PURE__ */ jsx22(
-        AlertMessage,
-        {
-          message: getMessage("enterReceiverAddress"),
-          type: "warning"
-        }
-      ),
-      /* @__PURE__ */ jsx22(
-        TextInput,
-        {
-          label: "Wallet address",
-          labelLocation: "top",
-          value: transferModal$.state.receiverAddress.get(),
-          onChange: handleChangeWalletAddress,
-          name: "walletAddress",
-          placeholder: "Enter wallet address of recipient"
-        }
-      ),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs18(Fragment, { children: [
-        /* @__PURE__ */ jsx22(
-          QuantityInput,
-          {
-            $quantity,
-            chainId,
-            collectionAddress,
-            collectibleId: tokenId
-          }
-        ),
-        /* @__PURE__ */ jsx22(
-          Text14,
-          {
-            color: insufficientBalance ? "negative" : "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            children: `You have ${balanceAmount} of this item`
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx22(
-      Button5,
-      {
-        onClick: handleChangeView,
-        disabled: !isWalletAddressValid || insufficientBalance,
-        title: "Transfer",
-        label: "Transfer",
-        variant: "primary",
-        shape: "square",
-        size: "sm",
-        justifySelf: "flex-end",
-        paddingX: "10"
-      }
-    )
-  ] });
-};
-var enterWalletAddress_default = EnterWalletAddressView;
-
-// src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { observer as observer12 } from "@legendapp/state/react";
-import { Box as Box16, Button as Button6, Text as Text15 } from "@0xsequence/design-system";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-var FollowWalletInstructionsView = observer12(() => {
-  return /* @__PURE__ */ jsxs19(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx23(Text15, { color: "white", fontSize: "large", fontWeight: "bold", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx23(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
-      AlertMessage,
-      {
-        message: getMessage("followWalletInstructions"),
-        type: "info"
-      }
-    ) }),
-    /* @__PURE__ */ jsx23(
-      Button6,
-      {
-        disabled: true,
-        title: "Transfer",
-        label: "Transfer",
-        variant: "primary",
-        shape: "square",
-        size: "sm",
-        justifySelf: "flex-end",
-        paddingX: "10"
-      }
-    )
-  ] });
-});
-var followWalletInstructions_default = FollowWalletInstructionsView;
-
-// src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
-var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount10();
-  const { show: showSwitchNetworkModal } = useSwitchChainModal();
-  const { errorCallbacks, successCallbacks } = transferModal$.state.get();
-  const openModal = (args) => {
-    transferModal$.open(args);
-  };
-  const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
-    if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSwitchChain: () => openModal(args),
-        callbacks: {
-          onSuccess: successCallbacks?.onSwitchChainSuccess,
-          onUnknownError: errorCallbacks?.onSwitchChainError,
-          onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
-          onUserRejectedRequest: errorCallbacks?.onUserRejectedSwitchingChainRequestError
-        }
-      });
-      return;
-    }
-    openModal(args);
-  };
-  return {
-    show: handleShowModal,
-    close: () => transferModal$.close(),
-    onError: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        errorCallbacks: callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        successCallbacks: callbacks
-      });
-    }
-  };
-};
-var TransferModal = () => {
-  return /* @__PURE__ */ jsx24(Show4, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx24(Modal5, {}) });
-};
-var Modal5 = () => {
-  return /* @__PURE__ */ jsx24(ModalContent4, {});
-};
-var ModalContent4 = observer13(() => {
-  return /* @__PURE__ */ jsx24(Root5, { open: true, children: /* @__PURE__ */ jsxs20(Portal5, { children: [
-    /* @__PURE__ */ jsx24(Overlay4, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs20(Content5, { className: transferModalContent, children: [
-      /* @__PURE__ */ jsx24(TransactionModalView, {}),
-      /* @__PURE__ */ jsx24(Close4, { onClick: transferModal$.close, className: closeButton3, asChild: true, children: /* @__PURE__ */ jsx24(IconButton5, { size: "xs", "aria-label": "Close modal", icon: CloseIcon4 }) })
-    ] })
-  ] }) });
-});
-var TransactionModalView = observer13(() => {
-  const { view } = transferModal$.get();
-  switch (view) {
-    case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx24(enterWalletAddress_default, {});
-    case "followWalletInstructions":
-      return /* @__PURE__ */ jsx24(followWalletInstructions_default, {});
-    default:
-      return null;
-  }
-});
-
-// src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
-var ModalProvider = observer14(() => {
-  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx25(AccountModal, {}),
-    /* @__PURE__ */ jsx25(CreateListingModal, {}),
-    /* @__PURE__ */ jsx25(MakeOfferModal, {}),
-    /* @__PURE__ */ jsx25(TransferModal, {}),
-    /* @__PURE__ */ jsx25(SellModal, {}),
-    /* @__PURE__ */ jsx25(SuccessfulPurchaseModal_default, {}),
-    /* @__PURE__ */ jsx25(switchChainModal_default, {}),
-    /* @__PURE__ */ jsx25(transactionStatusModal_default, {})
-  ] });
-});
-
-// src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { useState as useState6 } from "react";
-import { Box as Box21, IconButton as IconButton7, Skeleton as Skeleton6 } from "@0xsequence/design-system";
-
-// src/react/ui/components/_internals/action-button/ActionButton.tsx
-import { Button as Button7 } from "@0xsequence/design-system";
-import { observer as observer15 } from "@legendapp/state/react";
-import { useAccount as useAccount11 } from "wagmi";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ActionButton = observer15(function AddToCartButton({
-  collectionAddress,
-  chainId,
-  tokenId,
-  isTransfer
-}) {
-  const { address: accountAddress } = useAccount11();
-  const { data: balance, isLoading: balanceLoading } = useBalanceOfCollectible({
-    chainId,
-    collectionAddress,
-    collectableId: tokenId,
-    // biome-ignore lint/style/noNonNullAssertion: <explanation>
-    userAddress: accountAddress
-  });
-  const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
-    collectionAddress,
-    chainId: String(chainId),
-    tokenId
-  });
-  const { data: lowestListing, isLoading: lowestListingLoading } = useLowestListing({
-    collectionAddress,
-    chainId: String(chainId),
-    tokenId
-  });
-  const collectibleOwned = balance?.balance ?? 0;
-  const { show: showCreateListingModal } = useCreateListingModal();
-  const { show: showMakeOfferModal } = useMakeOfferModal();
-  const { show: showSellModal } = useSellModal();
-  const { show: showTransferModal } = useTransferModal();
-  if (balanceLoading || highestOfferLoading || lowestListingLoading || !accountAddress) {
-    return null;
-  }
-  if (isTransfer && collectibleOwned) {
-    return /* @__PURE__ */ jsx26(
-      ActionButtonBody,
-      {
-        label: "Transfer",
-        onClick: () => showTransferModal({
-          collectionAddress,
-          chainId,
-          tokenId
-        })
-      }
-    );
-  }
-  if (!collectibleOwned) {
-    return /* @__PURE__ */ jsx26(
-      ActionButtonBody,
-      {
-        label: "Make an offer",
-        onClick: () => showMakeOfferModal({
-          collectionAddress,
-          chainId,
-          collectibleId: tokenId
-        })
-      }
-    );
-  }
-  if (!collectibleOwned && lowestListing?.order) {
-    return /* @__PURE__ */ jsx26(
-      ActionButtonBody,
-      {
-        label: "Add to cart",
-        onClick: () => {
-        }
-      }
-    );
-  }
-  if (collectibleOwned && !lowestListing?.order) {
-    return /* @__PURE__ */ jsx26(
-      ActionButtonBody,
-      {
-        label: "Create listing",
-        onClick: () => showCreateListingModal({
-          collectionAddress,
-          chainId,
-          collectibleId: tokenId
-        })
-      }
-    );
-  }
-  if (collectibleOwned && highestOffer?.order) {
-    return /* @__PURE__ */ jsx26(
-      ActionButtonBody,
-      {
-        label: "Sell",
-        onClick: () => showSellModal({
-          collectionAddress,
-          chainId,
-          tokenId,
-          // biome-ignore lint/style/noNonNullAssertion: <explanation>
-          order: highestOffer.order
-        })
-      }
-    );
-  }
-  return null;
-});
-function ActionButtonBody({ label, onClick }) {
-  return /* @__PURE__ */ jsx26(
-    Button7,
-    {
-      variant: "primary",
-      label,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick();
-      },
-      size: "xs",
-      shape: "square",
-      width: "full"
-    }
-  );
-}
-
-// src/react/ui/icons/DiamondEye.tsx
-import { Box as Box17 } from "@0xsequence/design-system";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var Svg = () => /* @__PURE__ */ jsx27(
-  "svg",
-  {
-    width: "16",
-    height: "12",
-    viewBox: "0 0 16 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx27(
-      "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__ */ jsx27(
-  Box17,
-  {
-    as: Svg,
-    className: iconVariants({
-      size
-    }),
-    ...props
-  }
-);
-var DiamondEye_default = SvgDiamondEyeIcon;
-
-// src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box20, IconButton as IconButton6, Image as Image4, Text as Text17 } from "@0xsequence/design-system";
-import { useAccount as useAccount12 } from "wagmi";
-import { formatUnits as formatUnits4 } from "viem";
-
-// src/react/ui/components/_internals/pill/Pill.tsx
-import { Box as Box18, Text as Text16 } from "@0xsequence/design-system";
-import { jsx as jsx28 } from "react/jsx-runtime";
-function Pill({ text }) {
-  return /* @__PURE__ */ jsx28(
-    Box18,
-    {
-      background: "backgroundRaised",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingY: "1",
-      paddingX: "2",
-      borderRadius: "sm",
-      width: "max",
-      children: /* @__PURE__ */ jsx28(Text16, { fontSize: "small", fontWeight: "medium", color: "text80", children: text })
-    }
-  );
-}
-
-// src/react/ui/icons/Bell.tsx
-import { Box as Box19 } from "@0xsequence/design-system";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Svg2 = () => /* @__PURE__ */ jsx29(
-  "svg",
-  {
-    width: "17",
-    height: "17",
-    viewBox: "0 0 17 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx29(
-      "path",
-      {
-        "fill-rule": "evenodd",
-        "clip-rule": "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__ */ jsx29(
-  Box19,
-  {
-    as: Svg2,
-    className: iconVariants({
-      size
-    }),
-    ...props
-  }
-);
-var Bell_default = SvgBellIcon;
-
-// src/react/ui/components/collectible-card/styles.css.ts
-var actionWrapper = "styles_actionWrapper__biep7a7";
-var collectibleCard = "styles_collectibleCard__biep7a0";
-var collectibleImage = "styles_collectibleImage__biep7a1";
-var collectibleTileWrapper = "styles_collectibleTileWrapper__biep7a2";
-var footer = { animated: "styles_footer_animated__biep7a5 fyvr11wl", "static": "fyvr11wl" };
-var offerBellButton = "styles_offerBellButton__biep7a3";
-
-// src/react/ui/components/collectible-card/Footer.tsx
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
-var Footer = ({
-  name,
-  type,
-  chainId,
-  tokenId,
-  collectionAddress,
-  onOfferClick
-}) => {
-  const { address: accountAddress } = useAccount12();
-  const { data: balance } = useBalanceOfCollectible({
-    chainId: String(chainId),
-    collectionAddress,
-    collectableId: tokenId,
-    userAddress: accountAddress
-  });
-  const { data: lowestListing } = useLowestListing({
-    chainId: String(chainId),
-    collectionAddress,
-    tokenId
-  });
-  const { data: highestOffer } = useHighestOffer({
-    chainId: String(chainId),
-    collectionAddress,
-    tokenId
-  });
-  const { data: currencies } = useCurrencies({
-    chainId: String(chainId),
-    collectionAddress,
-    query: {
-      enabled: !!lowestListing?.order
-    }
-  });
-  const currency = currencies?.find(
-    (currency2) => currency2.contractAddress === lowestListing?.order?.priceCurrencyAddress
-  );
-  if (name.length > 15 && highestOffer?.order) {
-    name = name.substring(0, 13) + "...";
-  }
-  if (name.length > 17 && !highestOffer?.order) {
-    name = name.substring(0, 17) + "...";
-  }
-  return /* @__PURE__ */ jsxs22(
-    Box20,
-    {
-      display: "flex",
-      flexDirection: "column",
-      gap: "2",
-      padding: "4",
-      whiteSpace: "nowrap",
-      position: "relative",
-      className: accountAddress ? footer.animated : footer.static,
-      children: [
-        /* @__PURE__ */ jsxs22(
-          Box20,
-          {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            position: "relative",
-            children: [
-              /* @__PURE__ */ jsx30(Text17, { color: "text100", fontSize: "normal", fontWeight: "bold", textAlign: "left", children: name }),
-              highestOffer?.order && onOfferClick && /* @__PURE__ */ jsx30(
-                IconButton6,
-                {
-                  variant: "primary",
-                  className: offerBellButton,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onOfferClick?.();
-                  },
-                  icon: Bell_default
-                }
-              )
-            ]
-          }
-        ),
-        lowestListing?.order && currency && /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx30(Image4, { src: currency?.imageUrl, width: "3", height: "3" }),
-          /* @__PURE__ */ jsxs22(Text17, { color: "text100", fontSize: "small", fontWeight: "bold", textAlign: "left", children: [
-            formatUnits4(
-              BigInt(lowestListing.order.priceAmount),
-              currency.decimals
-            ),
-            " "
-          ] })
-        ] }),
-        balance && type !== "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx30(Pill, { text: `Owned: ${balance}` }),
-        type === "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx30(Pill, { text: "ERC-721" })
-      ]
-    }
-  );
-};
-
-// src/react/ui/images/chess-tile.png
-var chess_tile_default = "./chess-tile-6BS5MQT5.png";
-
-// src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { useAccount as useAccount13 } from "wagmi";
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
-function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs23(
-    Box21,
-    {
-      display: "flex",
-      flexDirection: "column",
-      gap: "3",
-      alignItems: "center",
-      overflow: "hidden",
-      children: [
-        /* @__PURE__ */ jsx31(
-          Skeleton6,
-          {
-            size: "lg",
-            style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
-          }
-        ),
-        /* @__PURE__ */ jsxs23(
-          Box21,
-          {
-            display: "flex",
-            flexDirection: "column",
-            gap: "2",
-            paddingX: "4",
-            paddingBottom: "4",
-            children: [
-              /* @__PURE__ */ jsx31(Skeleton6, { size: "lg" }),
-              /* @__PURE__ */ jsx31(Skeleton6, { size: "sm" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function CollectibleCard({
-  tokenId,
-  chainId,
-  collectionAddress,
-  onCollectibleClick,
-  onOfferClick
-}) {
-  const { data: collectible, isLoading: collectibleLoading } = useCollectible({
-    chainId: String(chainId),
-    collectionAddress,
-    collectibleId: tokenId
-  });
-  const { data: collection } = useCollection({
-    chainId: String(chainId),
-    collectionAddress
-  });
-  if (collectibleLoading || !collectible || !collection) {
-    return /* @__PURE__ */ jsx31(CollectibleSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx31(
-    Box21,
-    {
-      className: collectibleCard,
-      borderRadius: "md",
-      overflow: "hidden",
-      background: "backgroundPrimary",
-      children: /* @__PURE__ */ jsx31(
-        CardWrapper,
-        {
-          name: collectible.name,
-          type: collection.type,
-          imageSrc: collectible.image,
-          tokenId,
-          chainId: String(chainId),
-          collectionAddress,
-          marketplaceSource: collectible.external_url,
-          onCollectibleClick,
-          onOfferClick
-        }
-      )
-    }
-  );
-}
-var CardWrapper = ({
-  name,
-  type,
-  imageSrc,
-  tokenId,
-  chainId,
-  collectionAddress,
-  marketplaceSource,
-  onCollectibleClick,
-  onOfferClick
-}) => {
-  const { address: accountAddress } = useAccount13();
-  const [loadingError, setLoadingError] = useState6(false);
-  return /* @__PURE__ */ jsx31(
-    Box21,
-    {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      position: "relative",
-      width: "full",
-      height: "full",
-      zIndex: "10",
-      overflow: "hidden",
-      onClick: onCollectibleClick,
-      as: "button",
-      border: "none",
-      padding: "0",
-      className: collectibleTileWrapper,
-      children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
-        marketplaceSource && /* @__PURE__ */ jsx31(
-          IconButton7,
-          {
-            as: "a",
-            href: marketplaceSource,
-            size: "sm",
-            backdropFilter: "blur",
-            variant: "glass",
-            onClick: (e) => {
-              e.stopPropagation();
-            },
-            position: "absolute",
-            top: "2",
-            left: "2",
-            icon: DiamondEye_default
-          }
-        ),
-        /* @__PURE__ */ jsx31(
-          "img",
-          {
-            src: loadingError ? chess_tile_default : imageSrc || chess_tile_default,
-            alt: name,
-            className: collectibleImage,
-            onError: () => setLoadingError(true)
-          }
-        ),
-        /* @__PURE__ */ jsx31(
-          Footer,
-          {
-            name,
-            type,
-            tokenId,
-            chainId,
-            collectionAddress,
-            onOfferClick
-          }
-        ),
-        accountAddress && /* @__PURE__ */ jsx31(
-          Box21,
-          {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "2",
-            className: actionWrapper,
-            children: /* @__PURE__ */ jsx31(
-              ActionButton,
-              {
-                chainId: String(chainId),
-                collectionAddress,
-                tokenId
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-};
-
-export {
-  useCreateListingModal,
-  useMakeOfferModal,
-  useSellModal,
-  useSuccessfulPurchaseModal,
-  useTransferModal,
-  ModalProvider,
-  CollectibleCard
-};
-//# sourceMappingURL=chunk-QXLZPSSR.js.map