@0xsequence/marketplace-sdk 0.3.0 → 0.3.2

package/dist/chunk-22NLQ3AS.js

@@ -0,0 +1,3078 @@
+"use client"
+import {
+  ActionModal
+} from "./chunk-Q57TEA3Z.js";
+import {
+  CalendarIcon_default,
+  MinusIcon_default,
+  PlusIcon_default,
+  PositiveCircleIcon_default
+} from "./chunk-4YU2UPYH.js";
+import {
+  closeButton,
+  closeButton2,
+  collectiblesGrid,
+  collectiblesGridImage,
+  collectiblesGridImagePale,
+  collectiblesGridItem,
+  dateSelectButton,
+  dateSelectPopoverContent,
+  dialogContent,
+  dialogOverlay,
+  dialogOverlay2,
+  priceInputCurrencyImage,
+  priceInputWrapper,
+  quantityInputWrapper,
+  tokenPreview,
+  transferModalContent
+} from "./chunk-WA433WAJ.js";
+import {
+  AlertMessage,
+  switchChainModal_default,
+  useBuyCollectable,
+  useCollectible,
+  useCollection,
+  useCurrencies,
+  useHighestOffer,
+  useListBalances,
+  useLowestListing,
+  useMarketplaceConfig,
+  useRoyaltyPercentage,
+  useSwitchChainModal,
+  useTransactionMachine,
+  useTransferTokens
+} from "./chunk-O7UQGT43.js";
+import {
+  iconVariants
+} from "./chunk-SBVLWSRZ.js";
+import {
+  calculatePriceDifferencePercentage,
+  truncateMiddle
+} from "./chunk-SPW24Y7I.js";
+import {
+  balanceQueries,
+  collectableKeys,
+  getQueryClient
+} from "./chunk-GZG2QO64.js";
+
+// src/react/ui/modals/modal-provider.tsx
+import { observer as observer14 } from "@legendapp/state/react";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import {
+  CloseIcon,
+  IconButton,
+  Skeleton,
+  Text as Text4
+} from "@0xsequence/design-system";
+import { observer as observer2 } from "@legendapp/state/react";
+import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
+import { useEffect as useEffect2 } from "react";
+import { useTransactionReceipt } from "wagmi";
+
+// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
+import { Box, Spinner, Text } from "@0xsequence/design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TransactionFooter({
+  transactionHash,
+  isConfirming,
+  isConfirmed,
+  isFailed
+}) {
+  const icon = isConfirming && /* @__PURE__ */ jsx(Spinner, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx(PositiveCircleIcon_default, { size: "md" });
+  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+    icon,
+    /* @__PURE__ */ jsx(Text, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        color: "polygonLight",
+        flexGrow: "1",
+        textAlign: "right",
+        fontSize: "normal",
+        fontWeight: "medium",
+        marginLeft: "2",
+        children: truncateMiddle(transactionHash, 4, 4)
+      }
+    )
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { Box as Box3, Image, NetworkImage, Text as Text3 } from "@0xsequence/design-system";
+import { observer } from "@legendapp/state/react";
+import { formatUnits } from "viem";
+
+// src/react/ui/modals/_internal/components/timeAgo/index.tsx
+import { Box as Box2, Text as Text2 } from "@0xsequence/design-system";
+import { formatDistanceToNow } from "date-fns";
+import { useState, useEffect } from "react";
+import { jsx as jsx2 } 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__ */ jsx2(
+    Box2,
+    {
+      flexGrow: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */ jsx2(Text2, { color: "text50", fontSize: "small", children: timeAgo })
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
+import { observable } from "@legendapp/state";
+var initialState = {
+  isOpen: false,
+  open: ({
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    type,
+    callbacks,
+    queriesToInvalidate
+  }) => {
+    transactionStatusModal$.state.set({
+      ...transactionStatusModal$.state.get(),
+      hash,
+      price,
+      collectionAddress,
+      chainId,
+      tokenId,
+      getTitle,
+      getMessage: getMessage2,
+      type,
+      callbacks,
+      queriesToInvalidate
+    });
+    transactionStatusModal$.isOpen.set(true);
+  },
+  close: () => {
+    transactionStatusModal$.isOpen.set(false);
+    transactionStatusModal$.state.set({
+      ...initialState.state
+    });
+  },
+  state: {
+    hash: void 0,
+    status: "PENDING",
+    price: void 0,
+    collectionAddress: "",
+    chainId: "",
+    tokenId: "",
+    getTitle: void 0,
+    getMessage: void 0,
+    type: void 0
+  }
+};
+var transactionStatusModal$ = observable(initialState);
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+import { useMemo } from "react";
+
+// src/react/ui/modals/_internal/components/transactionPreview/consts.ts
+var TRANSACTION_TITLES = {
+  sell: {
+    confirming: "Selling",
+    confirmed: "Sold",
+    failed: "Sale failed"
+  },
+  createListing: {
+    confirming: "Creating listing",
+    confirmed: "Listed",
+    failed: "Listing failed"
+  },
+  createOffer: {
+    confirming: "Creating offer",
+    confirmed: "Offer created",
+    failed: "Offer failed"
+  },
+  buy: {
+    confirming: "Buying",
+    confirmed: "Bought",
+    failed: "Purchase failed"
+  },
+  transfer: {
+    confirming: "Transferring",
+    confirmed: "Transferred",
+    failed: "Transfer failed"
+  }
+};
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+function useTransactionPreviewTitle(status, type) {
+  return useMemo(() => {
+    if (!type) return "";
+    const { isConfirming, isConfirmed, isFailed } = status;
+    const titles = TRANSACTION_TITLES[type];
+    if (isConfirming) return titles.confirming;
+    if (isConfirmed) return titles.confirmed;
+    if (isFailed) return titles.failed;
+    return "";
+  }, [status, type]);
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TransactionPreview = observer(
+  ({
+    price,
+    collectionAddress,
+    chainId,
+    collectible,
+    currencyImageUrl,
+    isConfirming,
+    isConfirmed,
+    isFailed
+  }) => {
+    const { type } = transactionStatusModal$.state.get();
+    const title = useTransactionPreviewTitle(
+      { isConfirmed, isConfirming, isFailed },
+      type
+    );
+    const { data: collection } = useCollection({
+      collectionAddress,
+      chainId
+    });
+    const collectibleImage2 = collectible.image;
+    const collectibleName = collectible.name;
+    const collectionName = collection?.name;
+    const priceFormatted = price ? formatUnits(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    return /* @__PURE__ */ jsxs2(Box3, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx3(
+          Text3,
+          {
+            color: "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            marginRight: "1",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx3(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx3(TimeAgo, { date: /* @__PURE__ */ new Date() })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx3(
+          Image,
+          {
+            src: collectibleImage2,
+            alt: collectibleName,
+            width: "9",
+            height: "9",
+            borderRadius: "xs",
+            marginRight: "3"
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Box3,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "0.5",
+            children: [
+              /* @__PURE__ */ jsx3(Text3, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
+              /* @__PURE__ */ jsx3(Text3, { color: "text100", fontSize: "small", children: collectionName })
+            ]
+          }
+        ),
+        price && /* @__PURE__ */ jsxs2(
+          Box3,
+          {
+            flexGrow: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: "1",
+            children: [
+              /* @__PURE__ */ jsx3(Image, { src: currencyImageUrl, width: "3", height: "3" }),
+              /* @__PURE__ */ jsxs2(Text3, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
+                priceFormatted,
+                " ",
+                price.currency.symbol
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var transactionPreview_default = TransactionPreview;
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
+var closeButton3 = "fyvr11lw fyvr1tc fyvr1mo";
+var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
+var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var useTransactionStatusModal = () => {
+  return {
+    show: (args) => transactionStatusModal$.open(args),
+    close: () => transactionStatusModal$.close()
+  };
+};
+var TransactionStatusModal = observer2(() => {
+  const {
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    callbacks,
+    queriesToInvalidate
+  } = transactionStatusModal$.state.get();
+  const { data: collectible } = useCollectible({
+    collectionAddress,
+    chainId,
+    collectibleId: tokenId
+  });
+  const {
+    isLoading: isConfirming,
+    isSuccess: isConfirmed,
+    isError: isFailed,
+    error
+  } = useTransactionReceipt({ hash });
+  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
+  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
+  const { onUnknownError, onSuccess } = callbacks || {};
+  const queryClient = getQueryClient();
+  useEffect2(() => {
+    if (!transactionStatusModal$.isOpen.get()) return;
+    let isSubscribed = true;
+    if (isConfirmed && isSubscribed && onSuccess) {
+      onSuccess();
+    }
+    if (isFailed && isSubscribed && onUnknownError) {
+      onUnknownError(error);
+    }
+    if (isSubscribed && queriesToInvalidate) {
+      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
+  return /* @__PURE__ */ jsx4(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs3(Portal, { children: [
+    /* @__PURE__ */ jsx4(Overlay, { className: dialogOverlay3 }),
+    /* @__PURE__ */ jsxs3(Content, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx4(Text4, { fontSize: "large", fontWeight: "bold", color: "text100", children: title }) : /* @__PURE__ */ jsx4(Skeleton, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx4(Text4, { fontSize: "small", color: "text80", children: message }) : /* @__PURE__ */ jsx4(Skeleton, { width: "20", height: "4" }),
+      collectible && /* @__PURE__ */ jsx4(
+        transactionPreview_default,
+        {
+          price,
+          collectionAddress,
+          chainId,
+          collectible,
+          currencyImageUrl: price?.currency.imageUrl,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        TransactionFooter,
+        {
+          transactionHash: hash,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        Close,
+        {
+          onClick: () => {
+            transactionStatusModal$.close();
+          },
+          className: closeButton3,
+          asChild: true,
+          children: /* @__PURE__ */ jsx4(IconButton, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+        }
+      )
+    ] })
+  ] }) });
+});
+var transactionStatusModal_default = TransactionStatusModal;
+
+// src/react/ui/modals/Account/index.tsx
+import { Box as Box4, Button, Modal, Text as Text5 } from "@0xsequence/design-system";
+import { observable as observable2 } from "@legendapp/state";
+import { observer as observer3 } from "@legendapp/state/react";
+import { useAccount } from "wagmi";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var accountModalOpen$ = observable2(false);
+var AccountModal = observer3(function AccountModal2() {
+  const { address } = useAccount();
+  return accountModalOpen$.get() && /* @__PURE__ */ jsxs4(Modal, { children: [
+    /* @__PURE__ */ jsxs4(Box4, { children: [
+      /* @__PURE__ */ jsx5(Text5, { children: "Wallet address" }),
+      /* @__PURE__ */ jsx5(Text5, { children: address })
+    ] }),
+    /* @__PURE__ */ jsx5(Button, { label: "Sign out" })
+  ] });
+});
+
+// src/react/ui/modals/CreateListingModal/index.tsx
+import { Box as Box12 } from "@0xsequence/design-system";
+import { Show, observer as observer7 } from "@legendapp/state/react";
+
+// src/react/hooks/useCreateListing.tsx
+import { useState as useState2, useCallback } from "react";
+var useCreateListing = ({
+  onSuccess,
+  onError,
+  onTransactionSent,
+  ...config
+}) => {
+  const [isLoading, setIsLoading] = useState2(false);
+  const [steps, setSteps] = useState2(null);
+  const machine = useTransactionMachine(
+    {
+      ...config,
+      type: "LISTING" /* LISTING */
+    },
+    onSuccess,
+    onError,
+    onTransactionSent
+  );
+  const loadSteps = useCallback(
+    async (props) => {
+      if (!machine) return;
+      setIsLoading(true);
+      try {
+        const generatedSteps = await machine.getTransactionSteps(props);
+        setSteps(generatedSteps);
+      } catch (error) {
+        onError?.(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [machine, onError]
+  );
+  return {
+    createListing: (props) => machine?.start({ props }),
+    getListingSteps: (props) => ({
+      isLoading,
+      steps,
+      refreshSteps: () => loadSteps(props)
+    }),
+    onError,
+    onSuccess
+  };
+};
+
+// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
+import { useState as useState3 } from "react";
+import { Box as Box5, Text as Text6 } from "@0xsequence/design-system";
+import { observer as observer4 } from "@legendapp/state/react";
+import { addDays, isSameDay } from "date-fns";
+
+// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
+import { Button as Button2 } from "@0xsequence/design-system";
+import { Content as Content2, Portal as Portal2, Root as Root2, 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 jsx6 } from "react/jsx-runtime";
+function Calendar({ ...props }) {
+  const { selectedDate, setSelectedDate } = props;
+  return /* @__PURE__ */ jsx6(
+    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 jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function CalendarPopover({
+  selectedDate,
+  setSelectedDate
+}) {
+  return /* @__PURE__ */ jsxs5(Root2, { children: [
+    /* @__PURE__ */ jsx7(Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(
+      Button2,
+      {
+        leftIcon: CalendarIcon_default,
+        className: dateSelectButton,
+        variant: "ghost",
+        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
+        shape: "square"
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(Portal2, { children: /* @__PURE__ */ jsx7(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx7(
+      calendar_default,
+      {
+        selectedDate,
+        setSelectedDate,
+        mode: "single"
+      }
+    ) }) })
+  ] });
+}
+
+// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
+import React from "react";
+import * as Select from "@radix-ui/react-select";
+import { CheckmarkIcon, ChevronDownIcon } from "@0xsequence/design-system";
+
+// src/react/ui/components/_internals/custom-select/styles.css.ts
+var content = "fyvr11eg fyvr11es fyvr11f4 fyvr11fg fyvr11hc fyvr11i0 fyvr11g0 fyvr11go fyvr11q0 fyvr11qg fyvr12q3 fyvr12ir fyvr1243 fyvr12bf fyvr12rr fyvr12kf fyvr125r fyvr12d3 fyvr11xx fyvr11r0 fyvr11rt";
+var item = "styles_item__1ddtujk2 fyvr11h0 fyvr11ho fyvr11fo fyvr11gc fyvr1v4 fyvr1x8 fyvr1zs fyvr111g fyvr11ik fyvr12w9 fyvr11l8 fyvr11ow fyvr14g fyvr11m4 fyvr11rc fyvr12zf";
+var itemIndicator = "fyvr11lw fyvr1qk fyvr11lk fyvr11ow fyvr11no";
+var trigger = "fyvr11hk fyvr11i8 fyvr11g8 fyvr11gw fyvr1zg fyvr111k fyvr11lk fyvr11ow fyvr11no fyvr11ik fyvr14g fyvr11cg fyvr11wr fyvr12w9 fyvr12zf fyvr12s9 fyvr11a4";
+
+// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxs6(Select.Item, { className: item, ...props, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx8(Select.ItemText, { children }),
+    /* @__PURE__ */ jsx8(Select.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx8(CheckmarkIcon, { size: "xs" }) })
+  ] });
+});
+var CustomSelect = ({
+  items,
+  placeholder = "Select an item...",
+  onValueChange,
+  defaultValue
+}) => {
+  return /* @__PURE__ */ jsxs6(Select.Root, { onValueChange, defaultValue, children: [
+    /* @__PURE__ */ jsxs6(Select.Trigger, { className: trigger, children: [
+      /* @__PURE__ */ jsx8(Select.Value, { placeholder }),
+      /* @__PURE__ */ jsx8(Select.Icon, { children: /* @__PURE__ */ jsx8(ChevronDownIcon, { size: "xs" }) })
+    ] }),
+    /* @__PURE__ */ jsx8(Select.Portal, { children: /* @__PURE__ */ jsx8(Select.Content, { className: content, children: /* @__PURE__ */ jsx8(Select.Viewport, { children: items.map((item2) => /* @__PURE__ */ jsx8(
+      CustomSelectItem,
+      {
+        value: item2.value,
+        disabled: item2.disabled,
+        children: item2.label
+      },
+      item2.value
+    )) }) }) })
+  ] });
+};
+
+// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
+import { jsx as jsx9, jsxs as jsxs7 } 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 = observer4(function ExpirationDateSelect2({
+  className,
+  $date
+}) {
+  const [_, setRange] = useState3("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__ */ jsxs7(Box5, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      Text6,
+      {
+        fontSize: "small",
+        fontWeight: "medium",
+        textAlign: "left",
+        width: "full",
+        color: "text100",
+        children: "Set expiry"
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      Box5,
+      {
+        className,
+        width: "full",
+        display: "flex",
+        alignItems: "center",
+        gap: "2",
+        marginTop: "0.5",
+        children: [
+          /* @__PURE__ */ jsx9(
+            Box5,
+            {
+              position: "absolute",
+              right: "0",
+              onClick: (e) => e.stopPropagation(),
+              zIndex: "10",
+              children: /* @__PURE__ */ jsx9(
+                CustomSelect,
+                {
+                  items: Object.values(PRESET_RANGES).map((preset) => ({
+                    label: preset.label,
+                    value: preset.value
+                  })),
+                  placeholder: Object.values(PRESET_RANGES).find(
+                    (preset) => isSameDay(
+                      new Date($date.get()),
+                      addDays(/* @__PURE__ */ new Date(), preset.offset)
+                    )
+                  )?.label,
+                  onValueChange: (value) => handleSelectPresetRange(value),
+                  defaultValue: Object.values(PRESET_RANGES).find(
+                    (preset) => isSameDay(
+                      new Date($date.get()),
+                      addDays(/* @__PURE__ */ new Date(), preset.offset)
+                    )
+                  )?.value
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            CalendarPopover,
+            {
+              selectedDate: $date.get(),
+              setSelectedDate: (date) => handleDateValueChange(date)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var expirationDateSelect_default = ExpirationDateSelect;
+
+// src/react/ui/modals/_internal/components/floorPriceText/index.tsx
+import { Text as Text7 } from "@0xsequence/design-system";
+import { jsx as jsx10 } 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__ */ jsx10(
+    Text7,
+    {
+      fontSize: "small",
+      fontWeight: "medium",
+      textAlign: "left",
+      width: "full",
+      color: "text50",
+      children: floorPriceDifferenceText
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/priceInput/index.tsx
+import { Box as Box6, NumericInput, TokenImage } from "@0xsequence/design-system";
+import { observer as observer6 } from "@legendapp/state/react";
+import { useState as useState4 } from "react";
+import { erc20Abi, parseUnits } from "viem";
+import { useAccount as useAccount2, useReadContract } from "wagmi";
+
+// src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
+import { Skeleton as Skeleton2 } from "@0xsequence/design-system";
+import { observer as observer5 } from "@legendapp/state/react";
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
+  chainId,
+  collectionAddress,
+  $selectedCurrency
+}) {
+  const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+    collectionAddress,
+    chainId
+  });
+  useEffect3(() => {
+    if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
+      $selectedCurrency.set(currencies[0]);
+    }
+  }, [currencies]);
+  if (!currencies || currenciesLoading) {
+    return /* @__PURE__ */ jsx11(Skeleton2, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+  }
+  const options = currencies.map(
+    (currency) => ({
+      label: currency.name,
+      value: currency.contractAddress
+    })
+  );
+  const onChange = (value) => {
+    const c = currencies.find(
+      (currency) => currency.contractAddress === value
+    );
+    $selectedCurrency.set(c);
+  };
+  return /* @__PURE__ */ jsx11(
+    CustomSelect,
+    {
+      items: options,
+      placeholder: options[0].label,
+      onValueChange: onChange,
+      defaultValue: options[0].value
+    }
+  );
+});
+var currencyOptionsSelect_default = CurrencyOptionsSelect;
+
+// src/react/ui/modals/_internal/components/priceInput/index.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var PriceInput = observer6(function PriceInput2({
+  chainId,
+  collectionAddress,
+  $listingPrice,
+  checkBalance
+}) {
+  const [balanceError, setBalanceError] = useState4("");
+  const { address: accountAddress } = useAccount2();
+  const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
+    address: $listingPrice.currency.contractAddress.get(),
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [accountAddress],
+    query: {
+      enabled: checkBalance?.enabled
+    }
+  });
+  const currencyDecimals = $listingPrice.currency.decimals.get();
+  const [value, setValue] = useState4("");
+  const checkInsufficientBalance = (priceAmountRaw) => {
+    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance || 0);
+    if (!checkBalance) return;
+    if (hasInsufficientBalance) {
+      setBalanceError("Insufficient balance");
+      checkBalance.callback(true);
+    } else {
+      setBalanceError("");
+      checkBalance.callback(false);
+    }
+  };
+  const changeListingPrice = (value2) => {
+    setValue(value2);
+    const parsedAmount = parseUnits(value2, Number(currencyDecimals));
+    $listingPrice.amountRaw.set(parsedAmount.toString());
+    checkBalance && checkInsufficientBalance(parsedAmount.toString());
+  };
+  return /* @__PURE__ */ jsxs8(Box6, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx12(
+      Box6,
+      {
+        className: priceInputCurrencyImage,
+        position: "absolute",
+        left: "2",
+        display: "flex",
+        alignItems: "center",
+        children: /* @__PURE__ */ jsx12(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      NumericInput,
+      {
+        name: "listingPrice",
+        decimals: currencyDecimals,
+        label: "Enter price",
+        labelLocation: "top",
+        controls: /* @__PURE__ */ jsx12(
+          currencyOptionsSelect_default,
+          {
+            $selectedCurrency: $listingPrice?.currency,
+            collectionAddress,
+            chainId
+          }
+        ),
+        value,
+        onChange: (event) => changeListingPrice(event.target.value),
+        width: "full"
+      }
+    ),
+    balanceError && /* @__PURE__ */ jsx12(Box6, { color: "negative", fontSize: "small", children: balanceError })
+  ] });
+});
+var priceInput_default = PriceInput;
+
+// src/react/ui/modals/_internal/components/quantityInput/index.tsx
+import { Box as Box7, IconButton as IconButton2, NumericInput as NumericInput2 } from "@0xsequence/design-system";
+import { jsx as jsx13, jsxs as jsxs9 } 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__ */ jsx13(Box7, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx13(
+    NumericInput2,
+    {
+      name: "quantity",
+      decimals: quantityDecimals || 0,
+      paddingLeft: "1",
+      label: "Enter quantity",
+      labelLocation: "top",
+      placeholder: getPlaceholder(quantityDecimals || 0),
+      controls: /* @__PURE__ */ jsxs9(
+        Box7,
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: "1",
+          marginRight: "2",
+          children: [
+            /* @__PURE__ */ jsx13(
+              IconButton2,
+              {
+                disabled: Number.parseFloat(quantity) === 0 || !quantity,
+                onClick: handleDecrement,
+                background: "buttonGlass",
+                size: "xs",
+                icon: MinusIcon_default
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              IconButton2,
+              {
+                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 Box8, Image as Image2, Skeleton as Skeleton3, Text as Text8 } from "@0xsequence/design-system";
+
+// src/react/ui/images/chess-tile.png
+var chess_tile_default = "./chess-tile-6BS5MQT5.png";
+
+// src/react/ui/modals/_internal/components/tokenPreview/index.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function TokenPreview({
+  collectionName,
+  collectionAddress,
+  collectibleId,
+  chainId
+}) {
+  const { data: collectable, isLoading: collectibleLoading } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  if (collectibleLoading) {
+    return /* @__PURE__ */ jsxs10(Box8, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx14(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs10(Box8, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/2", height: "3" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10(Box8, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx14(
+      Image2,
+      {
+        src: collectable?.image || chess_tile_default,
+        alt: collectable?.name,
+        width: "9",
+        height: "9",
+        borderRadius: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsxs10(Box8, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx14(
+        Text8,
+        {
+          fontSize: "small",
+          color: "text80",
+          fontWeight: "medium",
+          fontFamily: "body",
+          children: collectionName
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        Text8,
+        {
+          fontSize: "small",
+          fontWeight: "bold",
+          color: "text100",
+          fontFamily: "body",
+          children: collectable?.name
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionDetails/index.tsx
+import { Box as Box9, Image as Image3, Skeleton as Skeleton4, Text as Text9 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits2 } from "viem";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
+function TransactionDetails({
+  collectibleId,
+  collectionAddress,
+  chainId,
+  price,
+  currencyImageUrl
+}) {
+  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__ */ jsxs11(
+    Box9,
+    {
+      width: "full",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsx15(Text9, { fontSize: "small", color: "text50", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs11(Box9, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx15(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
+          priceLoading ? /* @__PURE__ */ jsx15(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs11(Text9, { fontSize: "small", color: "text100", children: [
+            formattedAmount,
+            " ",
+            price.currency.symbol
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/ui/modals/CreateListingModal/_store.ts
+import { observable as observable3 } from "@legendapp/state";
+import { addDays as addDays2 } from "date-fns/addDays";
+var initialState2 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  collectibleId: "",
+  collectionName: "",
+  collectionType: void 0,
+  listingPrice: {
+    amountRaw: "0",
+    currency: {}
+  },
+  quantity: "1",
+  expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
+  callbacks: void 0,
+  onError: void 0,
+  onSuccess: void 0,
+  open: (args) => {
+    createListingModal$.collectionAddress.set(args.collectionAddress);
+    createListingModal$.chainId.set(args.chainId);
+    createListingModal$.collectibleId.set(args.collectibleId);
+    createListingModal$.callbacks.set(args.callbacks || args.defaultCallbacks);
+    createListingModal$.onSuccess.set(args.onSuccess);
+    createListingModal$.onError.set(args.onError);
+    createListingModal$.isOpen.set(true);
+  },
+  close: () => {
+    createListingModal$.isOpen.set(false);
+    createListingModal$.callbacks.set(void 0);
+  }
+};
+var createListingModal$ = observable3(initialState2);
+
+// 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/_internal/components/actionModal/LoadingModal.tsx
+import { Box as Box10, Spinner as Spinner2 } from "@0xsequence/design-system";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx16(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx16(Box10, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx16(Spinner2, { size: "lg" }) }) });
+
+// src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
+import { Box as Box11 } from "@0xsequence/design-system";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx17(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx17(Box11, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" }) });
+
+// src/react/ui/modals/CreateListingModal/index.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var useCreateListingModal = (callbacks) => {
+  return {
+    show: (args) => createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
+    close: () => createListingModal$.close()
+  };
+};
+var CreateListingModal = () => {
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  return /* @__PURE__ */ jsx18(Show, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx18(Modal2, { showTransactionStatusModal }) });
+};
+var Modal2 = observer7(
+  ({
+    showTransactionStatusModal
+  }) => {
+    const state = createListingModal$.get();
+    const { collectionAddress, chainId, listingPrice, collectibleId } = state;
+    const {
+      data: collectible,
+      isLoading: collectableIsLoading,
+      isError: collectableIsError
+    } = useCollectible({
+      chainId,
+      collectionAddress,
+      collectibleId
+    });
+    const {
+      data: collection,
+      isLoading: collectionIsLoading,
+      isError: collectionIsError
+    } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const { getListingSteps } = useCreateListing({
+      chainId,
+      collectionAddress,
+      onTransactionSent: (hash) => {
+        if (!hash) return;
+        showTransactionStatusModal({
+          hash,
+          collectionAddress,
+          chainId,
+          price: createListingModal$.listingPrice.get(),
+          tokenId: collectibleId,
+          getTitle: getCreateListingTransactionTitle,
+          getMessage: (params) => getCreateListingTransactionMessage(params, collectible?.name || ""),
+          type: "createListing" /* createListing */,
+          queriesToInvalidate: collectableKeys.all
+        });
+        createListingModal$.close();
+      },
+      onError: (error) => {
+        createListingModal$.onError?.(error);
+      }
+    });
+    const handleStepExecution = async (execute) => {
+      if (!execute) return;
+      try {
+        await refreshSteps();
+        await execute();
+      } catch (error) {
+        createListingModal$.onError?.(error);
+      }
+    };
+    if (collectableIsLoading || collectionIsLoading) {
+      return /* @__PURE__ */ jsx18(
+        LoadingModal,
+        {
+          store: createListingModal$,
+          onClose: createListingModal$.close,
+          title: "List item for sale"
+        }
+      );
+    }
+    if (collectableIsError || collectionIsError) {
+      return /* @__PURE__ */ jsx18(
+        ErrorModal,
+        {
+          store: createListingModal$,
+          onClose: createListingModal$.close,
+          title: "List item for sale"
+        }
+      );
+    }
+    const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
+    const { isLoading, steps, refreshSteps } = getListingSteps({
+      // biome-ignore lint/style/noNonNullAssertion: <explanation>
+      contractType: collection.type,
+      listing: {
+        tokenId: collectibleId,
+        quantity: createListingModal$.quantity.get(),
+        expiry: dateToUnixTime(createListingModal$.expiry.get()),
+        currencyAddress: listingPrice.currency.contractAddress,
+        pricePerToken: listingPrice.amountRaw
+      }
+    });
+    const ctas = [
+      {
+        label: "Approve TOKEN",
+        onClick: () => handleStepExecution(() => steps?.approval.execute()),
+        hidden: !steps?.approval.isPending,
+        pending: steps?.approval.isExecuting,
+        variant: "glass"
+      },
+      {
+        label: "List item for sale",
+        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+        pending: steps?.transaction.isExecuting || isLoading,
+        disabled: steps?.approval.isPending || listingPrice.amountRaw === "0" || isLoading
+      }
+    ];
+    return /* @__PURE__ */ jsxs12(
+      ActionModal,
+      {
+        store: createListingModal$,
+        onClose: () => createListingModal$.close(),
+        title: "List item for sale",
+        ctas,
+        children: [
+          /* @__PURE__ */ jsx18(
+            TokenPreview,
+            {
+              collectionName: collection?.name,
+              collectionAddress,
+              collectibleId,
+              chainId
+            }
+          ),
+          /* @__PURE__ */ jsxs12(Box12, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+            /* @__PURE__ */ jsx18(
+              priceInput_default,
+              {
+                chainId,
+                collectionAddress,
+                $listingPrice: createListingModal$.listingPrice
+              }
+            ),
+            !!listingPrice && /* @__PURE__ */ jsx18(
+              FloorPriceText,
+              {
+                tokenId: collectibleId,
+                chainId,
+                collectionAddress,
+                price: listingPrice
+              }
+            )
+          ] }),
+          collection?.type === "ERC1155" && /* @__PURE__ */ jsx18(
+            QuantityInput,
+            {
+              chainId,
+              collectionAddress,
+              collectibleId,
+              $quantity: createListingModal$.quantity
+            }
+          ),
+          /* @__PURE__ */ jsx18(expirationDateSelect_default, { $date: createListingModal$.expiry }),
+          /* @__PURE__ */ jsx18(
+            TransactionDetails,
+            {
+              collectibleId,
+              collectionAddress,
+              chainId,
+              price: createListingModal$.listingPrice.get(),
+              currencyImageUrl: listingPrice.currency.imageUrl
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/react/ui/modals/MakeOfferModal/index.tsx
+import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+
+// src/react/hooks/useMakeOffer.tsx
+import { useState as useState5, useCallback as useCallback2 } from "react";
+var useMakeOffer = ({
+  onSuccess,
+  onError,
+  onTransactionSent,
+  ...config
+}) => {
+  const [isLoading, setIsLoading] = useState5(false);
+  const [steps, setSteps] = useState5(null);
+  const machine = useTransactionMachine(
+    {
+      ...config,
+      type: "OFFER" /* OFFER */
+    },
+    onSuccess,
+    onError,
+    onTransactionSent
+  );
+  const loadSteps = useCallback2(
+    async (props) => {
+      if (!machine) return;
+      setIsLoading(true);
+      try {
+        const generatedSteps = await machine.getTransactionSteps(props);
+        setSteps(generatedSteps);
+      } catch (error) {
+        onError?.(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [machine, onError]
+  );
+  return {
+    makeOffer: (props) => machine?.start({ props }),
+    getMakeOfferSteps: (props) => ({
+      isLoading,
+      steps,
+      refreshSteps: () => loadSteps(props)
+    })
+  };
+};
+
+// src/react/ui/modals/MakeOfferModal/_store.ts
+import { observable as observable4 } from "@legendapp/state";
+import { addDays as addDays3 } from "date-fns/addDays";
+var initialState3 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  collectibleId: "",
+  callbacks: void 0,
+  offerPrice: {
+    amountRaw: "0",
+    currency: {}
+  },
+  quantity: "1",
+  expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
+  open: (args) => {
+    makeOfferModal$.collectionAddress.set(args.collectionAddress);
+    makeOfferModal$.chainId.set(args.chainId);
+    makeOfferModal$.collectibleId.set(args.collectibleId);
+    makeOfferModal$.callbacks.set(args.callbacks);
+    makeOfferModal$.isOpen.set(true);
+  },
+  close: () => {
+    makeOfferModal$.isOpen.set(false);
+    makeOfferModal$.callbacks.set(void 0);
+  }
+};
+var makeOfferModal$ = observable4(initialState3);
+
+// 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/index.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var useMakeOfferModal = (defaultCallbacks) => ({
+  show: (args) => makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
+  close: makeOfferModal$.close
+});
+var MakeOfferModal = () => {
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  return /* @__PURE__ */ jsx19(Show2, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx19(ModalContent, { showTransactionStatusModal }) });
+};
+var ModalContent = observer8(
+  ({
+    showTransactionStatusModal
+  }) => {
+    const state = makeOfferModal$.get();
+    const { collectionAddress, chainId, offerPrice, collectibleId } = state;
+    const [insufficientBalance, setInsufficientBalance] = useState6(false);
+    const {
+      data: collectible,
+      isLoading: collectableIsLoading,
+      isError: collectableIsError
+    } = useCollectible({
+      chainId,
+      collectionAddress,
+      collectibleId
+    });
+    const {
+      data: collection,
+      isLoading: collectionIsLoading,
+      isError: collectionIsError
+    } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const { isLoading: currenciesIsLoading } = useCurrencies({
+      chainId,
+      collectionAddress
+    });
+    const { getMakeOfferSteps } = useMakeOffer({
+      chainId,
+      collectionAddress,
+      onTransactionSent: (hash) => {
+        if (!hash) return;
+        showTransactionStatusModal({
+          hash,
+          price: makeOfferModal$.offerPrice.get(),
+          collectionAddress,
+          chainId,
+          tokenId: collectibleId,
+          getTitle: getMakeOfferTransactionTitle,
+          getMessage: (params) => getMakeOfferTransactionMessage(params, collectible?.name || ""),
+          type: "createOffer" /* createOffer */,
+          queriesToInvalidate: collectableKeys.all
+        });
+        makeOfferModal$.close();
+      },
+      onSuccess: (hash) => {
+        makeOfferModal$.callbacks?.onSuccess?.(hash);
+      },
+      onError: (error) => {
+        makeOfferModal$.callbacks?.onError?.(error);
+      }
+    });
+    const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
+    const currencyAddress = offerPrice.currency.contractAddress;
+    const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
+      contractType: collection.type,
+      offer: {
+        tokenId: collectibleId,
+        quantity: makeOfferModal$.quantity.get(),
+        expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
+        currencyAddress,
+        pricePerToken: offerPrice.amountRaw
+      }
+    });
+    useEffect4(() => {
+      if (!currencyAddress) return;
+      refreshSteps();
+    }, [currencyAddress]);
+    if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
+      return /* @__PURE__ */ jsx19(
+        LoadingModal,
+        {
+          store: makeOfferModal$,
+          onClose: makeOfferModal$.close,
+          title: "Make an offer"
+        }
+      );
+    }
+    if (collectableIsError || collectionIsError) {
+      return /* @__PURE__ */ jsx19(
+        ErrorModal,
+        {
+          store: makeOfferModal$,
+          onClose: makeOfferModal$.close,
+          title: "Make an offer"
+        }
+      );
+    }
+    const handleStepExecution = async (execute) => {
+      if (!execute) return;
+      try {
+        await refreshSteps();
+        await execute();
+      } catch (error) {
+        makeOfferModal$.callbacks?.onError?.(error);
+      }
+    };
+    const ctas = [
+      {
+        label: "Approve TOKEN",
+        onClick: () => handleStepExecution(() => steps?.approval.execute()),
+        hidden: !steps?.approval.isPending,
+        pending: steps?.approval.isExecuting,
+        variant: "glass"
+      },
+      {
+        label: "Make offer",
+        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+        pending: steps?.transaction.isExecuting || isLoading,
+        disabled: steps?.approval.isPending || offerPrice.amountRaw === "0" || insufficientBalance || isLoading
+      }
+    ];
+    return /* @__PURE__ */ jsxs13(
+      ActionModal,
+      {
+        store: makeOfferModal$,
+        onClose: () => makeOfferModal$.close(),
+        title: "Make an offer",
+        ctas,
+        children: [
+          /* @__PURE__ */ jsx19(
+            TokenPreview,
+            {
+              collectionName: collection?.name,
+              collectionAddress,
+              collectibleId,
+              chainId
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            priceInput_default,
+            {
+              chainId,
+              collectionAddress,
+              $listingPrice: makeOfferModal$.offerPrice,
+              checkBalance: {
+                enabled: true,
+                callback: (state2) => setInsufficientBalance(state2)
+              }
+            }
+          ),
+          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx19(
+            QuantityInput,
+            {
+              chainId,
+              $quantity: makeOfferModal$.quantity,
+              collectionAddress,
+              collectibleId
+            }
+          ),
+          !!offerPrice && /* @__PURE__ */ jsx19(
+            FloorPriceText,
+            {
+              tokenId: collectibleId,
+              chainId,
+              collectionAddress,
+              price: offerPrice
+            }
+          ),
+          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+        ]
+      }
+    );
+  }
+);
+
+// src/react/ui/modals/SellModal/index.tsx
+import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
+
+// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
+import { Box as Box13, Image as Image4, Skeleton as Skeleton5, Text as Text10 } from "@0xsequence/design-system";
+import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function TransactionHeader({
+  title,
+  currencyImageUrl,
+  date
+}) {
+  return /* @__PURE__ */ jsxs14(Box13, { display: "flex", alignItems: "center", width: "full", children: [
+    /* @__PURE__ */ jsx20(Text10, { fontSize: "small", fontWeight: "medium", color: "text80", marginRight: "1", children: title }),
+    /* @__PURE__ */ jsx20(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    date && /* @__PURE__ */ jsxs14(Text10, { fontSize: "small", color: "text50", flexGrow: "1", textAlign: "right", children: [
+      formatDistanceToNow2(date),
+      " ago"
+    ] }) || /* @__PURE__ */ jsx20(Skeleton5, { width: "8", height: "4" })
+  ] });
+}
+
+// src/react/ui/modals/SellModal/_store.ts
+import { observable as observable5 } from "@legendapp/state";
+var initialState4 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  tokenId: "",
+  order: void 0,
+  callbacks: void 0,
+  open: (args) => {
+    sellModal$.collectionAddress.set(args.collectionAddress);
+    sellModal$.chainId.set(args.chainId);
+    sellModal$.tokenId.set(args.tokenId);
+    sellModal$.order.set(args.order);
+    sellModal$.callbacks.set(args.callbacks);
+    sellModal$.isOpen.set(true);
+  },
+  close: () => {
+    sellModal$.isOpen.set(false);
+    sellModal$.callbacks.set(void 0);
+  }
+};
+var sellModal$ = observable5(initialState4);
+
+// src/react/hooks/useSell.tsx
+import { useState as useState7, useCallback as useCallback3 } from "react";
+var useSell = ({
+  onSuccess,
+  onError,
+  onTransactionSent,
+  ...config
+}) => {
+  const [isLoading, setIsLoading] = useState7(false);
+  const [steps, setSteps] = useState7(null);
+  const machine = useTransactionMachine(
+    {
+      ...config,
+      type: "SELL" /* SELL */
+    },
+    onSuccess,
+    onError,
+    onTransactionSent
+  );
+  const loadSteps = useCallback3(
+    async (props) => {
+      if (!machine) return;
+      setIsLoading(true);
+      try {
+        const generatedSteps = await machine.getTransactionSteps(props);
+        setSteps(generatedSteps);
+      } catch (error) {
+        onError?.(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [machine, onError]
+  );
+  return {
+    sell: (props) => machine?.start({ props }),
+    getSellSteps: (props) => ({
+      isLoading,
+      steps,
+      refreshSteps: () => loadSteps(props)
+    })
+  };
+};
+
+// 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/index.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var useSellModal = (defaultCallbacks) => ({
+  show: (args) => sellModal$.open({ ...args, callbacks: defaultCallbacks }),
+  close: sellModal$.close
+});
+var SellModal = () => {
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  return /* @__PURE__ */ jsx21(Show3, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx21(ModalContent2, { showTransactionStatusModal }) });
+};
+var ModalContent2 = observer9(
+  ({
+    showTransactionStatusModal
+  }) => {
+    const { tokenId, collectionAddress, chainId, order } = sellModal$.get();
+    const { data: collectible } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const { sell } = useSell({
+      collectionAddress,
+      chainId,
+      onTransactionSent: (hash) => {
+        if (!hash) return;
+        showTransactionStatusModal({
+          hash,
+          price: {
+            amountRaw: order.priceAmount,
+            currency: currencies.find(
+              (currency2) => currency2.contractAddress === order.priceCurrencyAddress
+            )
+          },
+          collectionAddress,
+          chainId,
+          tokenId,
+          getTitle: getSellTransactionTitle,
+          getMessage: (params) => getSellTransactionMessage(params, collectible?.name || ""),
+          type: "sell" /* sell */,
+          queriesToInvalidate: [
+            ...collectableKeys.all,
+            balanceQueries.all
+          ]
+        });
+        sellModal$.close();
+      },
+      onSuccess: (hash) => {
+        sellModal$.callbacks?.onSuccess?.(hash);
+      },
+      onError: (error) => {
+        sellModal$.callbacks?.onError?.(error);
+      }
+    });
+    const {
+      data: collection,
+      isLoading: collectionLoading,
+      isError: collectionError
+    } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+      chainId,
+      collectionAddress
+    });
+    if (collectionLoading || currenciesLoading) {
+      return /* @__PURE__ */ jsx21(
+        LoadingModal,
+        {
+          store: sellModal$,
+          onClose: sellModal$.close,
+          title: "You have an offer"
+        }
+      );
+    }
+    if (collectionError || order === void 0) {
+      return /* @__PURE__ */ jsx21(
+        ErrorModal,
+        {
+          store: sellModal$,
+          onClose: sellModal$.close,
+          title: "You have an offer"
+        }
+      );
+    }
+    const currency = currencies?.find(
+      (c) => c.contractAddress === order?.priceCurrencyAddress
+    );
+    return /* @__PURE__ */ jsxs15(
+      ActionModal,
+      {
+        store: sellModal$,
+        onClose: sellModal$.close,
+        title: "You have an offer",
+        ctas: [
+          {
+            label: "Accept",
+            onClick: () => sell({
+              orderId: order?.orderId,
+              marketplace: order?.marketplace
+            })
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx21(
+            TransactionHeader,
+            {
+              title: "Offer received",
+              currencyImageUrl: currency?.imageUrl,
+              date: order && new Date(order.createdAt)
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            TokenPreview,
+            {
+              collectionName: collection?.name,
+              collectionAddress,
+              collectibleId: tokenId,
+              chainId
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            TransactionDetails,
+            {
+              collectibleId: tokenId,
+              collectionAddress,
+              chainId,
+              price: currency ? {
+                amountRaw: order?.priceAmount,
+                currency
+              } : void 0,
+              currencyImageUrl: currency?.imageUrl
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
+import {
+  Box as Box14,
+  Button as Button3,
+  CloseIcon as CloseIcon2,
+  ExternalLinkIcon,
+  IconButton as IconButton3,
+  Image as Image5,
+  Text as Text11
+} from "@0xsequence/design-system";
+import { observer as observer10 } from "@legendapp/state/react";
+import { Close as Close2, Content as Content4, Overlay as Overlay2, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
+
+// src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
+import { observable as observable6 } from "@legendapp/state";
+var initialState5 = {
+  isOpen: false,
+  open: ({
+    collectibles,
+    totalPrice,
+    explorerName,
+    explorerUrl,
+    ctaOptions,
+    callbacks,
+    defaultCallbacks
+  }) => {
+    successfulPurchaseModal$.state.set({
+      ...successfulPurchaseModal$.state.get(),
+      collectibles,
+      totalPrice,
+      explorerName,
+      explorerUrl,
+      ctaOptions
+    });
+    successfulPurchaseModal$.callbacks.set(callbacks || defaultCallbacks);
+    successfulPurchaseModal$.isOpen.set(true);
+  },
+  close: () => {
+    successfulPurchaseModal$.isOpen.set(false);
+    successfulPurchaseModal$.callbacks.set(void 0);
+    successfulPurchaseModal$.state.set({
+      ...initialState5.state
+    });
+  },
+  state: {
+    collectibles: [],
+    totalPrice: "0",
+    explorerName: "",
+    explorerUrl: "",
+    ctaOptions: void 0
+  },
+  callbacks: void 0
+};
+var successfulPurchaseModal$ = observable6(initialState5);
+
+// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var useSuccessfulPurchaseModal = (callbacks) => {
+  return {
+    show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
+    close: () => successfulPurchaseModal$.close()
+  };
+};
+var SuccessfulPurchaseModal = observer10(() => {
+  return /* @__PURE__ */ jsx22(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal4, { children: [
+    /* @__PURE__ */ jsx22(Overlay2, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs16(Content4, { className: dialogContent.narrow, children: [
+      /* @__PURE__ */ jsxs16(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+        /* @__PURE__ */ jsx22(
+          Text11,
+          {
+            textAlign: "center",
+            fontSize: "medium",
+            fontWeight: "bold",
+            color: "text100",
+            children: "Successful purchase!"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          CollectiblesGrid,
+          {
+            collectibles: successfulPurchaseModal$.state.get().collectibles
+          }
+        ),
+        /* @__PURE__ */ jsxs16(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+        ] }),
+        /* @__PURE__ */ jsx22(SuccessfulPurchaseActions, {})
+      ] }),
+      /* @__PURE__ */ jsx22(
+        Close2,
+        {
+          onClick: () => {
+            successfulPurchaseModal$.close();
+          },
+          className: closeButton,
+          asChild: true,
+          children: /* @__PURE__ */ jsx22(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+        }
+      )
+    ] })
+  ] }) });
+});
+function SuccessfulPurchaseActions() {
+  return /* @__PURE__ */ jsxs16(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx22(
+      Button3,
+      {
+        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__ */ jsx22(
+      Button3,
+      {
+        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__ */ jsx22(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+    const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
+    return /* @__PURE__ */ jsxs16(
+      Box14,
+      {
+        className: collectiblesGridItem,
+        position: "relative",
+        children: [
+          /* @__PURE__ */ jsx22(
+            Image5,
+            {
+              src: collectible.image,
+              alt: collectible.name,
+              className: showPlus ? collectiblesGridImagePale : collectiblesGridImage,
+              aspectRatio: "1/1",
+              background: "backgroundSecondary",
+              borderRadius: "sm"
+            }
+          ),
+          showPlus && /* @__PURE__ */ jsx22(
+            Box14,
+            {
+              position: "absolute",
+              top: "0",
+              left: "0",
+              right: "0",
+              bottom: "0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "backgroundOverlay",
+              backdropFilter: "blur",
+              children: /* @__PURE__ */ jsxs16(
+                Text11,
+                {
+                  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/index.tsx
+import { CloseIcon as CloseIcon3, IconButton as IconButton4 } from "@0xsequence/design-system";
+import { Show as Show4, observer as observer12 } from "@legendapp/state/react";
+import { Close as Close3, Content as Content5, Overlay as Overlay3, Portal as Portal5, Root as Root5 } from "@radix-ui/react-dialog";
+import { useAccount as useAccount4 } from "wagmi";
+
+// src/react/ui/modals/TransferModal/_store.ts
+import { observable as observable7 } from "@legendapp/state";
+var initialState6 = {
+  isOpen: false,
+  open: ({ chainId, collectionAddress, tokenId }) => {
+    transferModal$.state.set({
+      ...transferModal$.state.get(),
+      chainId,
+      collectionAddress,
+      tokenId
+    });
+    transferModal$.isOpen.set(true);
+  },
+  close: () => {
+    transferModal$.isOpen.set(false);
+    transferModal$.state.set({
+      ...initialState6.state
+    });
+    transferModal$.view.set("enterReceiverAddress");
+    transferModal$.hash.set(void 0);
+  },
+  state: {
+    receiverAddress: "",
+    collectionAddress: "0x",
+    chainId: "",
+    tokenId: "",
+    quantity: "1"
+  },
+  view: "enterReceiverAddress",
+  hash: void 0
+};
+var transferModal$ = observable7(initialState6);
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
+import { Box as Box15, Button as Button4, Text as Text12, TextInput } from "@0xsequence/design-system";
+import { isAddress } from "viem";
+import { useAccount as useAccount3 } from "wagmi";
+
+// src/react/ui/modals/TransferModal/messages.ts
+var baseMessages = {
+  enterReceiverAddress: "Items sent to the wrong wallet address can't be recovered!",
+  followWalletInstructions: "Follow your wallet's instructions to submit a transaction to transfer your assets."
+};
+function getMessage(key) {
+  return baseMessages[key];
+}
+
+// src/react/ui/modals/TransferModal/_utils/getTransferTransactionTitleMessage.ts
+var getTransferTransactionTitle = (params) => {
+  if (params.isConfirmed) {
+    return "Transfer has processed";
+  }
+  if (params.isFailed) {
+    return "Transfer has failed";
+  }
+  return "Transfer is processing";
+};
+var getTransferTransactionMessage = (params, collectibleName) => {
+  if (params.isConfirmed) {
+    return `You just tranferred ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
+  }
+  if (params.isFailed) {
+    return `Transferring ${collectibleName} has failed. Please try again.`;
+  }
+  return `You just transferred ${collectibleName}. It should be confirmed on the blockchain shortly.`;
+};
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx
+var useHandleTransfer = () => {
+  const {
+    receiverAddress,
+    collectionAddress,
+    tokenId,
+    quantity,
+    chainId,
+    collectionType,
+    successCallbacks,
+    errorCallbacks
+  } = transferModal$.state.get();
+  const { transferTokensAsync } = useTransferTokens();
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  const { data: collectible } = useCollectible({
+    collectionAddress,
+    collectibleId: tokenId,
+    chainId
+  });
+  async function transfer() {
+    if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
+      throw new Error("Invalid contract type");
+    }
+    if (collectionType === "ERC721" /* ERC721 */) {
+      try {
+        const hash = await transferTokensAsync({
+          receiverAddress,
+          collectionAddress,
+          tokenId,
+          chainId,
+          contractType: "ERC721" /* ERC721 */
+        });
+        transferModal$.close();
+        showTransactionStatusModal({
+          hash,
+          collectionAddress,
+          chainId,
+          tokenId,
+          price: void 0,
+          getTitle: getTransferTransactionTitle,
+          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
+          type: "transfer",
+          callbacks: {
+            onSuccess: successCallbacks?.onTransferSuccess,
+            onUnknownError: errorCallbacks?.onTransferError
+          },
+          queriesToInvalidate: balanceQueries.all
+        });
+      } catch (error) {
+        transferModal$.view.set("enterReceiverAddress");
+        errorCallbacks?.onTransferError?.(error);
+      }
+    }
+    if (collectionType === "ERC1155" /* ERC1155 */) {
+      try {
+        const hash = await transferTokensAsync({
+          receiverAddress,
+          collectionAddress,
+          tokenId,
+          chainId,
+          contractType: "ERC1155" /* ERC1155 */,
+          quantity: String(quantity)
+        });
+        transferModal$.close();
+        showTransactionStatusModal({
+          hash,
+          collectionAddress,
+          chainId,
+          tokenId,
+          price: void 0,
+          getTitle: getTransferTransactionTitle,
+          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
+          type: "transfer",
+          callbacks: {
+            onSuccess: successCallbacks?.onTransferSuccess,
+            onUnknownError: errorCallbacks?.onTransferError
+          }
+        });
+      } catch (error) {
+        transferModal$.view.set("enterReceiverAddress");
+        errorCallbacks?.onTransferError?.(error);
+      }
+    }
+  }
+  return { transfer };
+};
+var useHandleTransfer_default = useHandleTransfer;
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
+import { Fragment, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var EnterWalletAddressView = () => {
+  const { address } = useAccount3();
+  const { collectionAddress, tokenId, chainId, collectionType } = transferModal$.state.get();
+  const $quantity = transferModal$.state.quantity;
+  const isWalletAddressValid = isAddress(
+    transferModal$.state.receiverAddress.get()
+  );
+  const { data: tokenBalance } = useListBalances({
+    chainId,
+    contractAddress: collectionAddress,
+    tokenId,
+    accountAddress: address,
+    query: { enabled: !!address }
+  });
+  const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+  const insufficientBalance = $quantity.get() > balanceAmount;
+  const { data: collection } = useCollection({
+    collectionAddress,
+    chainId
+  });
+  transferModal$.state.collectionType.set(
+    collection?.type
+  );
+  const { transfer } = useHandleTransfer_default();
+  function handleChangeWalletAddress(event) {
+    transferModal$.state.receiverAddress.set(event.target.value);
+  }
+  function handleChangeView() {
+    transfer();
+    transferModal$.view.set("followWalletInstructions");
+  }
+  return /* @__PURE__ */ jsxs17(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx23(Text12, { color: "white", fontSize: "large", fontWeight: "bold", children: "Transfer your item" }),
+    /* @__PURE__ */ jsxs17(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
+      /* @__PURE__ */ jsx23(
+        AlertMessage,
+        {
+          message: getMessage("enterReceiverAddress"),
+          type: "warning"
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        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__ */ jsxs17(Fragment, { children: [
+        /* @__PURE__ */ jsx23(
+          QuantityInput,
+          {
+            $quantity,
+            chainId,
+            collectionAddress,
+            collectibleId: tokenId
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          Text12,
+          {
+            color: insufficientBalance ? "negative" : "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            children: `You have ${balanceAmount} of this item`
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      Button4,
+      {
+        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 observer11 } from "@legendapp/state/react";
+import { Box as Box16, Button as Button5, Text as Text13 } from "@0xsequence/design-system";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer11(() => {
+  return /* @__PURE__ */ jsxs18(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx24(Text13, { color: "white", fontSize: "large", fontWeight: "bold", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx24(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx24(
+      AlertMessage,
+      {
+        message: getMessage("followWalletInstructions"),
+        type: "info"
+      }
+    ) }),
+    /* @__PURE__ */ jsx24(
+      Button5,
+      {
+        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 jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var useTransferModal = () => {
+  const { chainId: accountChainId } = useAccount4();
+  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),
+        onSuccess: () => openModal(args)
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => transferModal$.close(),
+    onError: (callbacks) => {
+      transferModal$.state.set({
+        ...transferModal$.state.get(),
+        errorCallbacks: callbacks
+      });
+    },
+    onSuccess: (callbacks) => {
+      transferModal$.state.set({
+        ...transferModal$.state.get(),
+        successCallbacks: callbacks
+      });
+    }
+  };
+};
+var TransferModal = () => {
+  return /* @__PURE__ */ jsx25(Show4, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx25(Modal3, {}) });
+};
+var Modal3 = () => {
+  return /* @__PURE__ */ jsx25(ModalContent3, {});
+};
+var ModalContent3 = observer12(() => {
+  return /* @__PURE__ */ jsx25(Root5, { open: true, children: /* @__PURE__ */ jsxs19(Portal5, { children: [
+    /* @__PURE__ */ jsx25(Overlay3, { className: dialogOverlay2 }),
+    /* @__PURE__ */ jsxs19(Content5, { className: transferModalContent, children: [
+      /* @__PURE__ */ jsx25(TransactionModalView, {}),
+      /* @__PURE__ */ jsx25(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx25(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
+    ] })
+  ] }) });
+});
+var TransactionModalView = observer12(() => {
+  const { view } = transferModal$.get();
+  switch (view) {
+    case "enterReceiverAddress":
+      return /* @__PURE__ */ jsx25(enterWalletAddress_default, {});
+    case "followWalletInstructions":
+      return /* @__PURE__ */ jsx25(followWalletInstructions_default, {});
+    default:
+      return null;
+  }
+});
+
+// src/react/ui/modals/BuyModal/_store.ts
+import { observable as observable8 } from "@legendapp/state";
+var initialState7 = {
+  isOpen: false,
+  open: ({
+    callbacks,
+    defaultCallbacks,
+    ...args
+  }) => {
+    buyModal$.state.set({
+      ...buyModal$.state.get(),
+      order: args.order
+    });
+    buyModal$.callbacks.set(callbacks || defaultCallbacks);
+    buyModal$.isOpen.set(true);
+  },
+  close: () => {
+    buyModal$.isOpen.set(false);
+    buyModal$.callbacks.set(void 0);
+    buyModal$.state.set({
+      ...initialState7.state
+    });
+  },
+  state: {
+    order: void 0,
+    quantity: "1"
+  },
+  callbacks: void 0
+};
+var buyModal$ = observable8(initialState7);
+
+// src/react/ui/modals/BuyModal/index.tsx
+import { observer as observer13, useSelector } from "@legendapp/state/react";
+import { useEffect as useEffect5 } from "react";
+import { Fragment as Fragment2, jsx as jsx26 } from "react/jsx-runtime";
+var useBuyModal = (callbacks) => {
+  return {
+    show: (args) => buyModal$.open({ ...args, defaultCallbacks: callbacks }),
+    close: () => buyModal$.close()
+  };
+};
+var BuyModal = () => {
+  const isOpen = useSelector(buyModal$.isOpen);
+  const { data: collection } = useCollection({
+    chainId: buyModal$.state.order.chainId.get(),
+    collectionAddress: buyModal$.state.order.collectionContractAddress.get()
+  });
+  if (!isOpen || !collection) return null;
+  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(CheckoutModal, {}) : /* @__PURE__ */ jsx26(ERC1155QuantityModal, {});
+};
+var CheckoutModal = observer13(() => {
+  const order = buyModal$.state.order.get();
+  const chainId = String(order.chainId);
+  const collectionAddress = order.collectionContractAddress;
+  const collectibleId = order.tokenId;
+  const { buy } = useBuyCollectable({
+    chainId,
+    collectionAddress
+  });
+  const { data: collectable } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  useEffect5(() => {
+    if (!collectable) return;
+    buy({
+      orderId: order.orderId,
+      collectableDecimals: collectable.decimals || 0,
+      quantity: "1",
+      marketplace: order.marketplace
+    });
+  }, [order, collectable]);
+  return /* @__PURE__ */ jsx26(Fragment2, {});
+});
+var ERC1155QuantityModal = observer13(() => {
+  const order = buyModal$.state.order.get();
+  const chainId = String(order.chainId);
+  const collectionAddress = order.collectionContractAddress;
+  const collectibleId = order.tokenId;
+  const { buy } = useBuyCollectable({
+    chainId,
+    collectionAddress
+  });
+  const { data: collectable } = useCollectible({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  if (!order || !collectable) return null;
+  return /* @__PURE__ */ jsx26(
+    ActionModal,
+    {
+      store: buyModal$,
+      onClose: () => buyModal$.close(),
+      title: "Select Quantity",
+      ctas: [
+        {
+          label: "Select Quantity",
+          onClick: () => buy({
+            quantity: buyModal$.state.quantity.get(),
+            orderId: order.orderId,
+            collectableDecimals: collectable.decimals || 0,
+            marketplace: order.marketplace
+          })
+        }
+      ],
+      children: /* @__PURE__ */ jsx26(
+        QuantityInput,
+        {
+          chainId,
+          collectionAddress,
+          collectibleId,
+          $quantity: buyModal$.state.quantity
+        }
+      )
+    }
+  );
+});
+
+// src/react/ui/modals/modal-provider.tsx
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var ModalProvider = observer14(() => {
+  return /* @__PURE__ */ jsxs20(Fragment3, { children: [
+    /* @__PURE__ */ jsx27(AccountModal, {}),
+    /* @__PURE__ */ jsx27(CreateListingModal, {}),
+    /* @__PURE__ */ jsx27(MakeOfferModal, {}),
+    /* @__PURE__ */ jsx27(TransferModal, {}),
+    /* @__PURE__ */ jsx27(SellModal, {}),
+    /* @__PURE__ */ jsx27(BuyModal, {}),
+    /* @__PURE__ */ jsx27(SuccessfulPurchaseModal_default, {}),
+    /* @__PURE__ */ jsx27(switchChainModal_default, {}),
+    /* @__PURE__ */ jsx27(transactionStatusModal_default, {})
+  ] });
+});
+
+// src/react/ui/components/collectible-card/CollectibleCard.tsx
+import { useState as useState8 } from "react";
+import { Box as Box20, IconButton as IconButton6, Skeleton as Skeleton6 } from "@0xsequence/design-system";
+import { useAccount as useAccount6 } from "wagmi";
+
+// src/react/ui/icons/DiamondEye.tsx
+import { Box as Box17 } from "@0xsequence/design-system";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Svg = () => /* @__PURE__ */ jsx28(
+  "svg",
+  {
+    width: "16",
+    height: "12",
+    viewBox: "0 0 16 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx28(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z",
+        fill: "white"
+      }
+    )
+  }
+);
+var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx28(
+  Box17,
+  {
+    as: Svg,
+    className: iconVariants({
+      size
+    }),
+    ...props
+  }
+);
+var DiamondEye_default = SvgDiamondEyeIcon;
+
+// src/react/ui/components/_internals/action-button/ActionButton.tsx
+import { Button as Button6 } from "@0xsequence/design-system";
+import { observer as observer15 } from "@legendapp/state/react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var ActionButton = observer15(
+  ({
+    collectionAddress,
+    chainId,
+    tokenId,
+    action,
+    highestOffer,
+    lowestListing
+  }) => {
+    const { show: showCreateListingModal } = useCreateListingModal();
+    const { show: showMakeOfferModal } = useMakeOfferModal();
+    const { show: showSellModal } = useSellModal();
+    const { show: showTransferModal } = useTransferModal();
+    const { show: showBuyModal } = useBuyModal();
+    if (action === "Buy" /* BUY */) {
+      if (!lowestListing)
+        throw new Error("lowestListing is required for BUY action");
+      return /* @__PURE__ */ jsx29(
+        ActionButtonBody,
+        {
+          label: "Buy",
+          onClick: () => showBuyModal({
+            collectionAddress,
+            chainId,
+            tokenId,
+            order: lowestListing
+          })
+        }
+      );
+    }
+    if (action === "Sell" /* SELL */) {
+      if (!highestOffer)
+        throw new Error("highestOffer is required for SELL action");
+      return /* @__PURE__ */ jsx29(
+        ActionButtonBody,
+        {
+          label: "Sell",
+          onClick: () => showSellModal({
+            collectionAddress,
+            chainId,
+            tokenId,
+            order: highestOffer
+          })
+        }
+      );
+    }
+    if (action === "Create listing" /* LIST */) {
+      return /* @__PURE__ */ jsx29(
+        ActionButtonBody,
+        {
+          label: "Create listing",
+          onClick: () => showCreateListingModal({
+            collectionAddress,
+            chainId,
+            collectibleId: tokenId
+          })
+        }
+      );
+    }
+    if (action === "Make an offer" /* OFFER */) {
+      return /* @__PURE__ */ jsx29(
+        ActionButtonBody,
+        {
+          label: "Make an offer",
+          onClick: () => showMakeOfferModal({
+            collectionAddress,
+            chainId,
+            collectibleId: tokenId
+          })
+        }
+      );
+    }
+    if (action === "Transfer" /* TRANSFER */) {
+      return /* @__PURE__ */ jsx29(
+        ActionButtonBody,
+        {
+          label: "Transfer",
+          onClick: () => showTransferModal({
+            collectionAddress,
+            chainId,
+            tokenId
+          })
+        }
+      );
+    }
+    return null;
+  }
+);
+function ActionButtonBody({ label, onClick }) {
+  return /* @__PURE__ */ jsx29(
+    Button6,
+    {
+      variant: "primary",
+      label,
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      },
+      size: "xs",
+      shape: "square",
+      width: "full"
+    }
+  );
+}
+
+// src/react/ui/components/collectible-card/Footer.tsx
+import { Box as Box19, IconButton as IconButton5, Image as Image6, Text as Text14 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits3 } from "viem";
+import { useAccount as useAccount5 } from "wagmi";
+
+// src/react/ui/icons/Bell.tsx
+import { Box as Box18 } from "@0xsequence/design-system";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Svg2 = () => /* @__PURE__ */ jsx30(
+  "svg",
+  {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx30(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z",
+        fill: "white"
+      }
+    )
+  }
+);
+var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
+  Box18,
+  {
+    as: Svg2,
+    className: iconVariants({
+      size
+    }),
+    ...props
+  }
+);
+var Bell_default = SvgBellIcon;
+
+// src/react/ui/components/collectible-card/styles.css.ts
+var actionWrapper = "styles_actionWrapper__biep7a7";
+var collectibleCard = "styles_collectibleCard__biep7a0";
+var collectibleImage = "styles_collectibleImage__biep7a1";
+var collectibleTileWrapper = "styles_collectibleTileWrapper__biep7a2";
+var footer = { animated: "styles_footer_animated__biep7a5 fyvr11wl", "static": "fyvr11wl" };
+var offerBellButton = "styles_offerBellButton__biep7a3";
+
+// src/react/ui/components/collectible-card/Footer.tsx
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+var Footer = ({
+  name,
+  type,
+  onOfferClick,
+  highestOffer,
+  lowestListingPriceAmount,
+  lowestListingCurrency,
+  balance,
+  isAnimated
+}) => {
+  const { address } = useAccount5();
+  if (name.length > 15 && highestOffer) {
+    name = name.substring(0, 13) + "...";
+  }
+  if (name.length > 17 && !highestOffer) {
+    name = name.substring(0, 17) + "...";
+  }
+  return /* @__PURE__ */ jsxs21(
+    Box19,
+    {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "2",
+      padding: "4",
+      whiteSpace: "nowrap",
+      position: "relative",
+      className: !!address && isAnimated ? footer.animated : footer.static,
+      children: [
+        /* @__PURE__ */ jsxs21(
+          Box19,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsx31(
+                Text14,
+                {
+                  color: "text100",
+                  fontSize: "normal",
+                  fontWeight: "bold",
+                  textAlign: "left",
+                  fontFamily: "body",
+                  children: name
+                }
+              ),
+              highestOffer && onOfferClick && /* @__PURE__ */ jsx31(
+                IconButton5,
+                {
+                  variant: "primary",
+                  className: offerBellButton,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOfferClick?.();
+                  },
+                  icon: (props) => /* @__PURE__ */ jsx31(Bell_default, { ...props, size: "xs" })
+                }
+              )
+            ]
+          }
+        ),
+        lowestListingPriceAmount && lowestListingCurrency && /* @__PURE__ */ jsxs21(Box19, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
+          /* @__PURE__ */ jsxs21(
+            Text14,
+            {
+              color: "text100",
+              fontSize: "small",
+              fontWeight: "bold",
+              textAlign: "left",
+              fontFamily: "body",
+              children: [
+                formatUnits3(
+                  BigInt(lowestListingPriceAmount),
+                  lowestListingCurrency.decimals
+                ),
+                " "
+              ]
+            }
+          )
+        ] }),
+        !!balance && type !== "ERC721" /* ERC721 */ && /* @__PURE__ */ jsxs21(
+          Text14,
+          {
+            background: "backgroundSecondary",
+            color: "text80",
+            fontSize: "small",
+            textAlign: "left",
+            fontFamily: "body",
+            paddingX: "2",
+            paddingY: "1",
+            borderRadius: "sm",
+            children: [
+              "Owned: ",
+              balance
+            ]
+          }
+        ),
+        type === "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx31(
+          Text14,
+          {
+            background: "backgroundSecondary",
+            color: "text80",
+            fontSize: "small",
+            textAlign: "left",
+            fontFamily: "body",
+            paddingX: "2",
+            paddingY: "1",
+            borderRadius: "sm",
+            children: "ERC-721"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/ui/components/collectible-card/CollectibleCard.tsx
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+function CollectibleSkeleton() {
+  return /* @__PURE__ */ jsxs22(
+    Box20,
+    {
+      className: collectibleCard,
+      borderRadius: "md",
+      overflow: "hidden",
+      background: "backgroundPrimary",
+      children: [
+        /* @__PURE__ */ jsx32(
+          Skeleton6,
+          {
+            size: "lg",
+            style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
+          }
+        ),
+        /* @__PURE__ */ jsxs22(
+          Box20,
+          {
+            display: "flex",
+            flexDirection: "column",
+            gap: "2",
+            paddingX: "4",
+            paddingBottom: "4",
+            marginTop: "2",
+            children: [
+              /* @__PURE__ */ jsx32(Skeleton6, { size: "lg" }),
+              /* @__PURE__ */ jsx32(Skeleton6, { size: "sm" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CollectibleCard({
+  collectibleId,
+  chainId,
+  collectionAddress,
+  collectionType,
+  lowestListing,
+  onCollectibleClick,
+  onOfferClick,
+  balance,
+  cardLoading
+}) {
+  const { address: accountAddress } = useAccount6();
+  const collectibleMetadata = lowestListing?.metadata;
+  const [imageLoadingError, setImageLoadingError] = useState8(false);
+  const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
+    chainId: String(chainId),
+    collectionAddress,
+    tokenId: collectibleId
+  });
+  const { data: currencies } = useCurrencies({ chainId });
+  const lowestListingCurrency = currencies?.find(
+    (currency) => currency.contractAddress === lowestListing?.order?.priceCurrencyAddress
+  );
+  if (highestOfferLoading || cardLoading) {
+    return /* @__PURE__ */ jsx32(CollectibleSkeleton, {});
+  }
+  const action = !!balance ? highestOffer?.order && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
+  const name = collectibleMetadata?.name;
+  const image = collectibleMetadata?.image;
+  const externalUrl = collectibleMetadata?.external_url;
+  return /* @__PURE__ */ jsx32(
+    Box20,
+    {
+      className: collectibleCard,
+      borderRadius: "md",
+      overflow: "hidden",
+      background: "backgroundPrimary",
+      children: /* @__PURE__ */ jsx32(
+        Box20,
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          position: "relative",
+          width: "full",
+          height: "full",
+          zIndex: "10",
+          overflow: "hidden",
+          onClick: onCollectibleClick,
+          border: "none",
+          cursor: "pointer",
+          padding: "0",
+          className: collectibleTileWrapper,
+          children: /* @__PURE__ */ jsxs22("article", { style: { width: "100%" }, children: [
+            externalUrl && /* @__PURE__ */ jsx32(
+              IconButton6,
+              {
+                as: "a",
+                href: externalUrl,
+                size: "sm",
+                backdropFilter: "blur",
+                variant: "glass",
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                position: "absolute",
+                top: "2",
+                left: "2",
+                icon: DiamondEye_default
+              }
+            ),
+            /* @__PURE__ */ jsx32(
+              "img",
+              {
+                src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
+                alt: name,
+                className: collectibleImage,
+                onError: () => setImageLoadingError(true)
+              }
+            ),
+            /* @__PURE__ */ jsx32(
+              Footer,
+              {
+                name,
+                type: collectionType,
+                onOfferClick: () => onOfferClick?.({ order: highestOffer?.order }),
+                highestOffer: highestOffer?.order,
+                lowestListingPriceAmount: lowestListing?.order?.priceAmount,
+                lowestListingCurrency,
+                balance,
+                isAnimated: !!action
+              }
+            ),
+            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx32(
+              Box20,
+              {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "2",
+                className: actionWrapper,
+                children: /* @__PURE__ */ jsx32(
+                  ActionButton,
+                  {
+                    chainId: String(chainId),
+                    collectionAddress,
+                    tokenId: collectibleId,
+                    action,
+                    highestOffer: highestOffer?.order,
+                    lowestListing: lowestListing?.order,
+                    isOwned: !!balance
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+
+export {
+  useCreateListingModal,
+  useMakeOfferModal,
+  useSellModal,
+  useSuccessfulPurchaseModal,
+  useTransferModal,
+  useBuyModal,
+  ModalProvider,
+  CollectibleCard
+};
+//# sourceMappingURL=chunk-22NLQ3AS.js.map