@0xsequence/marketplace-sdk 0.0.1

package/dist/chunk-SM7V6ZWI.js

@@ -0,0 +1,2740 @@
+"use client"
+import {
+  CalendarIcon_default,
+  InfoIcon_default,
+  MinusIcon_default,
+  PlusIcon_default,
+  PositiveCircleIcon_default
+} from "./chunk-TZGLKJRF.js";
+import {
+  ActionModal
+} from "./chunk-4PFMUVE4.js";
+import {
+  alertMessageBox,
+  alertMessageBoxVariants,
+  closeButton,
+  closeButton2,
+  closeButton3,
+  collectiblesGrid,
+  collectiblesGridImage,
+  collectiblesGridImagePale,
+  collectiblesGridItem,
+  currencySelect,
+  dateSelectButton,
+  dateSelectPopoverContent,
+  dialogContent,
+  dialogOverlay,
+  dialogOverlay2,
+  dialogOverlay3,
+  priceInputWrapper,
+  quantityInputWrapper,
+  rangeSelect,
+  switchChainCta,
+  switchChainModalContent,
+  tokenPreview,
+  transferModalContent
+} from "./chunk-QOJXWHRZ.js";
+import {
+  useCollectible,
+  useCollection,
+  useConfig,
+  useCurrencies,
+  useGenerateListingTransaction,
+  useGenerateOfferTransaction,
+  useLowestListing,
+  useMarketplaceConfig,
+  useRoyaltyPercentage,
+  useTokenBalances,
+  useTransferTokens
+} from "./chunk-ZE2LNX65.js";
+import {
+  calculatePriceDifferencePercentage,
+  truncateMiddle
+} from "./chunk-6S4FYXP6.js";
+import {
+  getMarketplaceClient
+} from "./chunk-HGBEC3WX.js";
+
+// src/react/ui/modals/modal-provider.tsx
+import { observer as observer14 } from "@legendapp/state/react";
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
+
+// src/react/ui/modals/_internal/components/switchChainModal/store.ts
+import { observable } from "@legendapp/state";
+var initialState = {
+  isOpen: false,
+  open: ({ chainIdToSwitchTo, onSwitchChain, messages }) => {
+    switchChainModal$.state.set({
+      ...switchChainModal$.state.get(),
+      chainIdToSwitchTo,
+      onSwitchChain,
+      messages
+    });
+    switchChainModal$.isOpen.set(true);
+  },
+  close: () => {
+    switchChainModal$.isOpen.set(false);
+    switchChainModal$.state.set({
+      ...initialState.state
+    });
+  },
+  state: {
+    chainIdToSwitchTo: void 0,
+    onSwitchChain: () => {
+    },
+    isSwitching: false
+  }
+};
+var switchChainModal$ = observable(initialState);
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import {
+  Button,
+  CloseIcon,
+  IconButton,
+  Spinner,
+  Text as Text2
+} from "@0xsequence/design-system";
+
+// src/react/ui/modals/_internal/components/alertMessage/index.tsx
+import { Box, Text, WarningIcon } from "@0xsequence/design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AlertMessage({ message, type }) {
+  return /* @__PURE__ */ jsxs(Box, { className: `${alertMessageBox} ${alertMessageBoxVariants[type]}`, children: [
+    /* @__PURE__ */ jsx(Text, { color: "white", fontSize: "normal", fontWeight: "medium", children: message }),
+    type === "warning" && /* @__PURE__ */ jsx(WarningIcon, { size: "sm", color: "white" }),
+    type === "info" && /* @__PURE__ */ jsx(InfoIcon_default, { size: "sm", color: "white" })
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import { observer } 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 jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useSwitchChainModal = () => {
+  return {
+    show: (args) => switchChainModal$.open(args),
+    close: () => switchChainModal$.close(),
+    isSwitching$: switchChainModal$.state.isSwitching
+  };
+};
+var SwitchChainModal = observer(() => {
+  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.messages.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__ */ jsx2(Root, { open: switchChainModal$.isOpen.get(), children: /* @__PURE__ */ jsxs2(Portal, { children: [
+    /* @__PURE__ */ jsx2(Overlay, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs2(Content, { className: switchChainModalContent, children: [
+      /* @__PURE__ */ jsx2(Text2, { fontSize: "large", fontWeight: "bold", color: "text100", children: "Wrong network" }),
+      /* @__PURE__ */ jsx2(
+        AlertMessage,
+        {
+          type: "warning",
+          message: `You need to switch to ${chainName} network before completing the transaction`
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          name: "switch-chain",
+          size: "sm",
+          label: isSwitching$.get() ? /* @__PURE__ */ jsx2(Spinner, {}) : "Switch Network",
+          variant: "primary",
+          pending: isSwitching$.get(),
+          shape: "square",
+          className: isSwitching$.get() ? switchChainCta.pending : switchChainCta.default,
+          justifySelf: "flex-end",
+          onClick: handleSwitchChain
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Close,
+        {
+          onClick: () => {
+            switchChainModal$.delete();
+          },
+          className: closeButton,
+          asChild: true,
+          children: /* @__PURE__ */ jsx2(IconButton, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+        }
+      )
+    ] })
+  ] }) });
+});
+var switchChainModal_default = SwitchChainModal;
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { observer as observer3 } from "@legendapp/state/react";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
+import { observable as observable2 } from "@legendapp/state";
+var initialState2 = {
+  isOpen: false,
+  open: ({
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    type
+  }) => {
+    transactionStatusModal$.state.set({
+      ...transactionStatusModal$.state.get(),
+      hash,
+      price,
+      collectionAddress,
+      chainId,
+      tokenId,
+      getTitle,
+      getMessage: getMessage2,
+      type
+    });
+    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$ = observable2(initialState2);
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { Close as Close2, Content as Content2, Overlay as Overlay2, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
+
+// 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 {
+  CloseIcon as CloseIcon2,
+  IconButton as IconButton2,
+  Skeleton,
+  Text as Text6
+} from "@0xsequence/design-system";
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { Box as Box3, Image, NetworkImage, Text as Text4 } from "@0xsequence/design-system";
+
+// src/react/ui/modals/_internal/components/timeAgo/index.tsx
+import { Box as Box2, Text as Text3 } from "@0xsequence/design-system";
+import { formatDistanceToNow } from "date-fns";
+import { useState, useEffect } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TimeAgo({ date }) {
+  const [timeAgo, setTimeAgo] = useState("");
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(formatDistanceToNow(date));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [date]);
+  return /* @__PURE__ */ jsx3(
+    Box2,
+    {
+      flexGrow: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */ jsx3(Text3, { color: "text50", fontSize: "small", children: timeAgo })
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { observer as observer2 } from "@legendapp/state/react";
+
+// 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 { formatUnits } from "viem";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TransactionPreview = observer2(
+  ({
+    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 collectibleImage = collectible.image;
+    const collectibleName = collectible.name;
+    const collectionName = collection?.name;
+    const priceFormatted = price ? formatUnits(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    return /* @__PURE__ */ jsxs3(Box3, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx4(
+          Text4,
+          {
+            color: "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            marginRight: "1",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx4(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx4(TimeAgo, { date: /* @__PURE__ */ new Date() })
+      ] }),
+      /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx4(
+          Image,
+          {
+            src: collectibleImage,
+            alt: collectibleName,
+            width: "9",
+            height: "9",
+            borderRadius: "xs",
+            marginRight: "3"
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Box3,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "0.5",
+            children: [
+              /* @__PURE__ */ jsx4(Text4, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
+              /* @__PURE__ */ jsx4(Text4, { color: "text100", fontSize: "small", children: collectionName })
+            ]
+          }
+        ),
+        price && /* @__PURE__ */ jsxs3(
+          Box3,
+          {
+            flexGrow: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: "1",
+            children: [
+              /* @__PURE__ */ jsx4(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+              /* @__PURE__ */ jsxs3(Text4, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
+                priceFormatted,
+                " ",
+                price.currency.symbol
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var transactionPreview_default = TransactionPreview;
+
+// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
+import { Box as Box4, Spinner as Spinner2, Text as Text5 } from "@0xsequence/design-system";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TransactionFooter({
+  transactionHash,
+  isConfirming,
+  isConfirmed,
+  isFailed
+}) {
+  const icon = isConfirming && /* @__PURE__ */ jsx5(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx5(PositiveCircleIcon_default, { size: "md" });
+  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
+  return /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", children: [
+    icon,
+    /* @__PURE__ */ jsx5(Text5, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
+    /* @__PURE__ */ jsx5(
+      Text5,
+      {
+        color: "polygonLight",
+        flexGrow: "1",
+        textAlign: "right",
+        fontSize: "normal",
+        fontWeight: "medium",
+        marginLeft: "2",
+        children: truncateMiddle(transactionHash, 4, 4)
+      }
+    )
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { useTransactionReceipt } from "wagmi";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var useTransactionStatusModal = () => {
+  return {
+    show: (args) => transactionStatusModal$.open(args),
+    close: () => transactionStatusModal$.close()
+  };
+};
+var TransactionStatusModal = observer3(() => {
+  const {
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2
+  } = transactionStatusModal$.state.get();
+  const { data: collectible } = useCollectible({
+    collectionAddress,
+    chainId,
+    collectibleId: tokenId
+  });
+  const {
+    isLoading: isConfirming,
+    isSuccess: isConfirmed,
+    isError: isFailed
+  } = useTransactionReceipt({ hash });
+  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
+  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
+  return /* @__PURE__ */ jsx6(Root2, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs5(Portal2, { children: [
+    /* @__PURE__ */ jsx6(Overlay2, { className: dialogOverlay4 }),
+    /* @__PURE__ */ jsxs5(Content2, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx6(Text6, { fontSize: "large", fontWeight: "bold", color: "text100", children: title }) : /* @__PURE__ */ jsx6(Skeleton, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx6(Text6, { fontSize: "small", color: "text80", children: message }) : /* @__PURE__ */ jsx6(Skeleton, { width: "20", height: "4" }),
+      /* @__PURE__ */ jsx6(
+        transactionPreview_default,
+        {
+          price,
+          collectionAddress,
+          chainId,
+          collectible,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        TransactionFooter,
+        {
+          transactionHash: hash,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Close2,
+        {
+          onClick: () => {
+            transactionStatusModal$.close();
+          },
+          className: closeButton4,
+          asChild: true,
+          children: /* @__PURE__ */ jsx6(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+        }
+      )
+    ] })
+  ] }) });
+});
+var transactionStatusModal_default = TransactionStatusModal;
+
+// src/react/ui/modals/Account/index.tsx
+import { Box as Box5, Button as Button2, Modal, Text as Text7 } from "@0xsequence/design-system";
+import { observable as observable3 } from "@legendapp/state";
+import { observer as observer4 } from "@legendapp/state/react";
+import { useAccount } from "wagmi";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var accountModalOpen$ = observable3(false);
+var AccountModal = observer4(function AccountModal2() {
+  const { address } = useAccount();
+  return accountModalOpen$.get() && /* @__PURE__ */ jsxs6(Modal, { children: [
+    /* @__PURE__ */ jsxs6(Box5, { children: [
+      /* @__PURE__ */ jsx7(Text7, { children: "Wallet address" }),
+      /* @__PURE__ */ jsx7(Text7, { children: address })
+    ] }),
+    /* @__PURE__ */ jsx7(Button2, { 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";
+
+// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
+import { useState as useState2 } from "react";
+import { Box as Box6, Select, Text as Text8 } from "@0xsequence/design-system";
+import { observer as observer5 } from "@legendapp/state/react";
+import { addDays, isSameDay } from "date-fns";
+
+// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
+import { Button as Button3 } from "@0xsequence/design-system";
+import { Content as Content3, Portal as Portal3, Root as Root3, 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 jsx8 } from "react/jsx-runtime";
+function Calendar({ ...props }) {
+  const { selectedDate, setSelectedDate } = props;
+  return /* @__PURE__ */ jsx8(
+    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 jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function CalendarPopover({
+  selectedDate,
+  setSelectedDate
+}) {
+  return /* @__PURE__ */ jsxs7(Root3, { children: [
+    /* @__PURE__ */ jsx9(Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+      Button3,
+      {
+        leftIcon: CalendarIcon_default,
+        className: dateSelectButton,
+        variant: "ghost",
+        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
+        shape: "square"
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsx9(Content3, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx9(
+      calendar_default,
+      {
+        selectedDate,
+        setSelectedDate,
+        mode: "single"
+      }
+    ) }) })
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
+import { jsx as jsx10, jsxs as jsxs8 } 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 = observer5(function ExpirationDateSelect2({
+  className,
+  $date
+}) {
+  const [_, setRange] = useState2("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__ */ jsxs8(Box6, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx10(
+      Text8,
+      {
+        fontSize: "small",
+        fontWeight: "medium",
+        textAlign: "left",
+        width: "full",
+        color: "text100",
+        children: "Set expiry"
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Box6,
+      {
+        className,
+        width: "full",
+        display: "flex",
+        alignItems: "center",
+        gap: "2",
+        marginTop: "0.5",
+        children: [
+          /* @__PURE__ */ jsx10(Box6, { className: rangeSelect, position: "absolute", right: "2", children: /* @__PURE__ */ jsx10(
+            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__ */ jsx10(
+            CalendarPopover,
+            {
+              selectedDate: $date.get(),
+              setSelectedDate: (date) => handleDateValueChange(date)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var expirationDateSelect_default = ExpirationDateSelect;
+
+// src/react/ui/modals/_internal/components/floorPriceText/index.tsx
+import { Text as Text9 } from "@0xsequence/design-system";
+import { jsx as jsx11 } 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__ */ jsx11(
+    Text9,
+    {
+      fontSize: "small",
+      fontWeight: "medium",
+      textAlign: "left",
+      width: "full",
+      color: "text50",
+      children: floorPriceDifferenceText
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/priceInput/index.tsx
+import { Box as Box8, NumericInput, TokenImage } from "@0xsequence/design-system";
+import { observer as observer7 } from "@legendapp/state/react";
+import { useState as useState4 } from "react";
+
+// src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
+import { Box as Box7, Select as Select2, Skeleton as Skeleton2 } from "@0xsequence/design-system";
+import { observer as observer6 } from "@legendapp/state/react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer6(function CurrencyOptionsSelect2({
+  chainId,
+  collectionAddress,
+  $selectedCurrency
+}) {
+  const [value, setValue] = useState3(null);
+  const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+    collectionAddress,
+    chainId
+  });
+  useEffect2(() => {
+    if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
+      $selectedCurrency.set(currencies[0]);
+    }
+  }, [currencies]);
+  if (!currencies || currenciesLoading) {
+    return /* @__PURE__ */ jsx12(Skeleton2, { 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__ */ jsx12(Box7, { className: currencySelect, children: /* @__PURE__ */ jsx12(
+    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 { parseUnits } from "viem";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var PriceInput = observer7(function PriceInput2({
+  chainId,
+  collectionAddress,
+  $listingPrice,
+  error
+}) {
+  const [inputPrice, setInputPrice] = useState4("");
+  const changeListingPrice = (value) => {
+    setInputPrice(value);
+    const parsedAmount = parseUnits(
+      value,
+      Number($listingPrice.currency.decimals.get())
+    );
+    $listingPrice.amountRaw.set(parsedAmount.toString());
+  };
+  return /* @__PURE__ */ jsxs9(Box8, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx13(
+      Box8,
+      {
+        position: "absolute",
+        bottom: "3",
+        left: "2",
+        display: "flex",
+        alignItems: "center",
+        children: /* @__PURE__ */ jsx13(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      NumericInput,
+      {
+        name: "listingPrice",
+        decimals: $listingPrice?.currency.decimals.get(),
+        label: "Enter price",
+        labelLocation: "top",
+        placeholder: "0.00",
+        controls: /* @__PURE__ */ jsx13(
+          currencyOptionsSelect_default,
+          {
+            $selectedCurrency: $listingPrice?.currency,
+            collectionAddress,
+            chainId
+          }
+        ),
+        numeric: true,
+        value: inputPrice,
+        onChange: (event) => changeListingPrice(event.target.value),
+        width: "full"
+      }
+    ),
+    error && /* @__PURE__ */ jsx13(Box8, { color: "negative", fontSize: "small", children: error })
+  ] });
+});
+var priceInput_default = PriceInput;
+
+// src/react/ui/modals/_internal/components/quantityInput/index.tsx
+import { Box as Box9, IconButton as IconButton3, NumericInput as NumericInput2 } from "@0xsequence/design-system";
+import { jsx as jsx14, jsxs as jsxs10 } 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__ */ jsx14(Box9, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx14(
+    NumericInput2,
+    {
+      name: "quantity",
+      decimals: quantityDecimals || 0,
+      paddingLeft: "1",
+      label: "Enter quantity",
+      labelLocation: "top",
+      placeholder: getPlaceholder(quantityDecimals || 0),
+      controls: /* @__PURE__ */ jsxs10(
+        Box9,
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: "1",
+          marginRight: "2",
+          children: [
+            /* @__PURE__ */ jsx14(
+              IconButton3,
+              {
+                disabled: Number.parseFloat(quantity) === 0 || !quantity,
+                onClick: handleDecrement,
+                background: "buttonGlass",
+                size: "xs",
+                icon: MinusIcon_default
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              IconButton3,
+              {
+                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/tokenPreview/index.tsx
+import { Box as Box10, Image as Image2, Skeleton as Skeleton3, Text as Text10 } from "@0xsequence/design-system";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function TokenPreview({
+  collectionName,
+  collectionAddress,
+  collectibleId,
+  chainId
+}) {
+  const { data: collectable, isLoading: collectibleLoading } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  if (collectibleLoading) {
+    return /* @__PURE__ */ jsxs11(Box10, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx15(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs11(Box10, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx15(Skeleton3, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx15(Skeleton3, { width: "1/2", height: "3" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11(Box10, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx15(
+      Image2,
+      {
+        src: collectable?.image,
+        alt: collectable?.name,
+        width: "9",
+        height: "9",
+        borderRadius: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsxs11(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx15(Text10, { fontSize: "small", color: "text80", fontWeight: "medium", children: collectionName }),
+      /* @__PURE__ */ jsx15(Text10, { fontSize: "small", fontWeight: "bold", color: "text100", children: collectable?.name })
+    ] })
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionDetails/index.tsx
+import { Box as Box11, NetworkImage as NetworkImage2, Skeleton as Skeleton4, Text as Text11 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits2 } from "viem";
+import { jsx as jsx16, jsxs as jsxs12 } 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__ */ jsxs12(
+    Box11,
+    {
+      width: "full",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsx16(Text11, { fontSize: "small", color: "text50", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs12(Box11, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx16(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
+          priceLoading ? /* @__PURE__ */ jsx16(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs12(Text11, { 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 useAccount2, useSendTransaction } from "wagmi";
+
+// 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,
+    messages
+  }) => {
+    createListingModal$.state.set({
+      ...createListingModal$.state.get(),
+      collectionAddress,
+      chainId,
+      collectibleId,
+      messages
+    });
+    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 } = useAccount2();
+  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 {
+    onUnknownError,
+    onSuccess
+  } = createListingModal$.state.get().messages?.approveToken || {};
+  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: () => {
+      const step = createListingModal$.steps.tokenApproval.getStep();
+      if (!step) return;
+      createListingModal$.steps._currentStep.set("tokenApproval");
+      try {
+        sendTransactionAsync({
+          to: step.to,
+          chainId: Number(chainId),
+          data: step.data,
+          value: BigInt(step.value || "0")
+        });
+        onSuccess && onSuccess();
+      } catch (error) {
+        onUnknownError && onUnknownError(error);
+      }
+    }
+  });
+  if (isSuccess && createListingModal$.steps._currentStep.get() === "tokenApproval") {
+    createListingModal$.steps._currentStep.set(null);
+  }
+};
+var useCreateListingHandler = (chainId) => {
+  const { collectibleId, collectionAddress } = createListingModal$.state.get();
+  const { connector, address } = useAccount2();
+  const {
+    generateListingTransactionAsync,
+    isPending: generateListingTransactionPending,
+    error: generateListingTransactionError
+  } = useGenerateListingTransaction({ chainId });
+  const { data: collectible } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  const {
+    onUnknownError,
+    onSuccess
+  } = createListingModal$.state.get().messages?.sellCollectible || {};
+  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);
+        showTransactionStatusModal({
+          hash,
+          price: createListingModal$.state.listingPrice.get(),
+          collectionAddress,
+          chainId,
+          tokenId: collectibleId,
+          getTitle: getCreateListingTransactionTitle,
+          getMessage: (params) => getCreateListingTransactionMessage(
+            params,
+            collectible?.name || ""
+          ),
+          type: "transfer"
+        });
+        createListingModal$.close();
+        onSuccess && onSuccess();
+      }).catch((error) => {
+        onUnknownError && onUnknownError(error);
+      });
+    }
+  });
+  if (generateListingTransactionError) {
+    onUnknownError && onUnknownError(generateListingTransactionError);
+  }
+};
+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 { useAccount as useAccount3 } from "wagmi";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var useCreateListingModal = () => {
+  const { chainId: accountChainId } = useAccount3();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  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),
+        messages: args.messages?.switchChain
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => createListingModal$.close()
+  };
+};
+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 { erc20Abi, parseUnits as parseUnits3 } from "viem";
+import { useAccount as useAccount5, useReadContract } 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 { parseUnits as parseUnits2 } from "viem";
+import { useAccount as useAccount4, 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,
+    messages
+  }) => {
+    makeOfferModal$.state.set({
+      ...makeOfferModal$.state.get(),
+      collectionAddress,
+      chainId,
+      collectibleId,
+      messages
+    });
+    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 } = useAccount4();
+  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 {
+    onUnknownError,
+    onSuccess
+  } = makeOfferModal$.state.get().messages?.approveToken || {};
+  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) {
+        onUnknownError && onUnknownError(error);
+      }
+    }
+  });
+  if (isSuccess && makeOfferModal$.steps._currentStep.get() === "tokenApproval") {
+    makeOfferModal$.steps._currentStep.set(null);
+  }
+};
+var useCreateOfferHandler = (chainId) => {
+  const { collectibleId, collectionAddress } = makeOfferModal$.state.get();
+  const { connector, address } = useAccount4();
+  const {
+    generateOfferTransactionAsync,
+    isPending: generateOfferTransactionPending,
+    error: generateOfferTransactionError
+  } = useGenerateOfferTransaction({ chainId });
+  const { data: collectible } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  const {
+    onUnknownError,
+    onSuccess
+  } = makeOfferModal$.state.get().messages?.sellCollectible || {};
+  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: parseUnits2(
+            makeOfferModal$.state.offerPrice.amountRaw.get(),
+            makeOfferModal$.state.offerPrice.currency.decimals.get()
+          ).toString()
+        }
+      }).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);
+        showTransactionStatusModal({
+          hash,
+          price: makeOfferModal$.state.offerPrice.get(),
+          collectionAddress,
+          chainId,
+          tokenId: collectibleId,
+          getTitle: getMakeOfferTransactionTitle,
+          getMessage: (params) => getMakeOfferTransactionMessage(params, collectible?.name || ""),
+          type: "createOffer" /* createOffer */
+        });
+        makeOfferModal$.close();
+        onSuccess && onSuccess();
+      }).catch((error) => {
+        onUnknownError && onUnknownError(error);
+      });
+    }
+  });
+  if (generateOfferTransactionError) {
+    onUnknownError && onUnknownError(generateOfferTransactionError);
+  }
+};
+
+// src/react/ui/modals/MakeOfferModal/index.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var useMakeOfferModal = () => {
+  const { chainId: accountChainId } = useAccount5();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  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),
+        messages: args.messages?.switchChain
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => makeOfferModal$.close()
+  };
+};
+var MakeOfferModal = () => {
+  return /* @__PURE__ */ jsx18(Show2, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx18(Modal3, {}) });
+};
+var Modal3 = () => {
+  useHydrate2();
+  return /* @__PURE__ */ jsx18(ModalContent2, {});
+};
+var ModalContent2 = observer9(() => {
+  const {
+    chainId,
+    collectionAddress,
+    collectibleId,
+    collectionName,
+    collectionType,
+    offerPrice
+  } = makeOfferModal$.state.get();
+  const { steps } = makeOfferModal$.get();
+  const { address: accountAddress } = useAccount5();
+  const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
+    address: makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [accountAddress]
+  });
+  let balanceError = "";
+  if (isBalanceSuccess && parseUnits3(offerPrice.amountRaw, offerPrice.currency.decimals) > (balance || 0)) {
+    balanceError = "Insufficient balance";
+  }
+  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"
+    }
+  ];
+  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,
+            error: balanceError
+          }
+        ),
+        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/_store.ts
+import { observable as observable6, when as when3 } from "@legendapp/state";
+import { useMount as useMount3, useSelector as useSelector3 } from "@legendapp/state/react";
+
+// src/react/hooks/useGenerateSellTransaction.tsx
+import { useMutation } from "@tanstack/react-query";
+var generateSellTransaction = async (args, config, chainId) => {
+  console.log("generateSellTransaction");
+  console.log(args);
+  console.log(chainId);
+  const marketplaceClient = getMarketplaceClient(chainId, config);
+  return marketplaceClient.generateSellTransaction(args);
+};
+var useGenerateSellTransaction = (params) => {
+  const config = useConfig();
+  const { mutate, mutateAsync, ...result } = useMutation({
+    onSuccess: params.onSuccess,
+    mutationFn: (args) => generateSellTransaction(args, config, params.chainId)
+  });
+  return {
+    ...result,
+    generateSellTransaction: mutate,
+    generateSellTransactionAsync: mutateAsync
+  };
+};
+
+// src/react/ui/modals/SellModal/_store.ts
+import { useAccount as useAccount6, 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,
+    messages
+  }) => {
+    sellModal$.state.set({
+      ...sellModal$.state.get(),
+      collectionAddress,
+      chainId,
+      tokenId,
+      order,
+      messages
+    });
+    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 } = useAccount6();
+  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.steps);
+    };
+    when3(() => !!order && !!connector, setSteps);
+  });
+};
+var useTokenApprovalHandler3 = (chainId) => {
+  const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction3();
+  const {
+    onUnknownError,
+    onSuccess
+  } = sellModal$.state.get().messages?.approveToken || {};
+  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")
+        });
+        onSuccess && onSuccess();
+      } catch (error) {
+        onUnknownError && onUnknownError(error);
+      }
+    }
+  });
+  if (isSuccess && sellModal$.steps._currentStep.get() === "tokenApproval") {
+    sellModal$.steps._currentStep.set(null);
+  }
+};
+var useSellHandler = (chainId) => {
+  const { address } = useAccount6();
+  const { tokenId, collectionAddress } = sellModal$.state.get();
+  const {
+    generateSellTransactionAsync,
+    isPending: generateSellTransactionPending,
+    error: generateSellTransactionError
+  } = useGenerateSellTransaction({
+    chainId
+  });
+  const { data: collectible } = useCollectible({
+    chainId,
+    collectibleId: tokenId,
+    collectionAddress
+  });
+  const { data: currencies } = useCurrencies({ chainId });
+  const {
+    onUnknownError,
+    onSuccess
+  } = sellModal$.state.get().messages?.sellCollectible || {};
+  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: [
+            {
+              amount: String(order.feeBps),
+              receiver: order.feeBreakdown[0].recipientAddress
+            }
+          ]
+        }).then(async (response) => {
+          const step = response.steps.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);
+            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 */
+            });
+            sellModal$.close();
+            onSuccess && onSuccess();
+          } catch (error) {
+          }
+        }).catch((error) => {
+          onUnknownError && onUnknownError(error);
+        });
+      }
+    });
+  }
+  when3(currencies && collectible, setSellStep);
+  if (generateSellTransactionError) {
+    onUnknownError && onUnknownError(generateSellTransactionError);
+  }
+};
+
+// src/react/ui/modals/SellModal/index.tsx
+import { observer as observer10, Show as Show3 } from "@legendapp/state/react";
+
+// 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/index.tsx
+import { useAccount as useAccount7 } from "wagmi";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var useSellModal = () => {
+  const { chainId: accountChainId } = useAccount7();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  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),
+        messages: args.messages?.switchChain
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => sellModal$.close()
+  };
+};
+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/_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 {
+  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";
+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,
+    messages
+  }) => {
+    transferModal$.state.set({
+      ...transferModal$.state.get(),
+      chainId,
+      collectionAddress,
+      tokenId,
+      messages
+    });
+    transferModal$.isOpen.set(true);
+  },
+  close: () => {
+    transferModal$.isOpen.set(false);
+    transferModal$.state.set({
+      ...initialState7.state
+    });
+  },
+  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 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/_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 useAccount8 } from "wagmi";
+import { Fragment, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var EnterWalletAddressView = () => {
+  const { address } = useAccount8();
+  const { collectionAddress, chainId, tokenId, collectionType } = transferModal$.state.get();
+  const $quantity = transferModal$.state.quantity;
+  const isWalletAddressValid = isAddress(
+    transferModal$.state.receiverAddress.get()
+  );
+  const { data: tokenBalance } = useTokenBalances({
+    chainId,
+    contractAddress: collectionAddress,
+    tokenId,
+    accountAddress: address
+  });
+  const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+  const { data: collection } = useCollection({
+    collectionAddress,
+    chainId
+  });
+  transferModal$.state.collectionType.set(
+    collection?.type
+  );
+  const insufficientBalance = $quantity.get() > balanceAmount;
+  function handleChangeWalletAddress(event) {
+    transferModal$.state.receiverAddress.set(event.target.value);
+  }
+  function handleChangeView() {
+    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";
+
+// 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/followWalletInstructions/index.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer12(() => {
+  const {
+    receiverAddress,
+    collectionAddress,
+    tokenId,
+    quantity,
+    chainId,
+    messages
+  } = transferModal$.state.get();
+  const { transferTokensAsync, hash } = useTransferTokens();
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  const { data: collection, isSuccess: collectionSuccess } = useCollection({
+    collectionAddress,
+    chainId
+  });
+  const { data: collectible, isSuccess: collectibleSuccess } = useCollectible({
+    collectionAddress,
+    collectibleId: tokenId,
+    chainId
+  });
+  useEffect3(() => {
+    if (!hash && collectionSuccess) {
+      transfer();
+    }
+  }, [collectionSuccess, collectibleSuccess, hash]);
+  async function transfer() {
+    if (collection.type === "ERC721" /* ERC721 */) {
+      try {
+        const hash2 = await transferTokensAsync({
+          receiverAddress,
+          collectionAddress,
+          tokenId,
+          chainId,
+          contractType: "ERC721" /* ERC721 */
+        });
+        transferModal$.close();
+        showTransactionStatusModal({
+          hash: hash2,
+          collectionAddress,
+          chainId,
+          tokenId,
+          price: void 0,
+          getTitle: getTransferTransactionTitle,
+          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
+          type: "transfer"
+        });
+      } catch (error) {
+        messages?.transferCollectibles?.onUnknownError && messages.transferCollectibles.onUnknownError(error);
+      }
+    }
+    try {
+      const hash2 = await transferTokensAsync({
+        receiverAddress,
+        collectionAddress,
+        tokenId,
+        chainId,
+        contractType: "ERC1155" /* ERC1155 */,
+        quantity: String(quantity)
+      });
+      transferModal$.close();
+      showTransactionStatusModal({
+        hash: hash2,
+        collectionAddress,
+        chainId,
+        tokenId,
+        price: void 0,
+        getTitle: getTransferTransactionTitle,
+        getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
+        type: "transfer"
+      });
+    } catch (error) {
+      messages?.transferCollectibles?.onUnknownError && messages.transferCollectibles.onUnknownError(error);
+    }
+  }
+  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 } = useAccount9();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  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),
+        messages: args.messages?.switchChain
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => transferModal$.close()
+  };
+};
+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, {})
+  ] });
+});
+
+export {
+  useCreateListingModal,
+  useMakeOfferModal,
+  useSellModal,
+  useSuccessfulPurchaseModal,
+  useTransferModal,
+  ModalProvider
+};
+//# sourceMappingURL=chunk-SM7V6ZWI.js.map