@0xsequence/marketplace-sdk 0.2.0 → 0.3.0

package/dist/{chunk-MD4JHPMH.js → chunk-QXLZPSSR.js}

@@ -1,14 +1,14 @@
 "use client"
+import {
+  ActionModal
+} from "./chunk-CSN7YD5Q.js";
 import {
   CalendarIcon_default,
   InfoIcon_default,
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
-} from "./chunk-4E34HVSA.js";
-import {
-  ActionModal
-} from "./chunk-CSN7YD5Q.js";
+} from "./chunk-MQR6SHXZ.js";
 import {
   alertMessageBox,
   alertMessageBoxVariants,
@@ -34,20 +34,25 @@ import {
   switchChainModalContent,
   tokenPreview,
   transferModalContent
-} from "./chunk-LFQB477Y.js";
+} from "./chunk-OUWB3FHZ.js";
 import {
+  iconVariants
+} from "./chunk-VEX7FDL6.js";
+import {
+  useBalanceOfCollectible,
   useCollectible,
   useCollection,
   useCurrencies,
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
   useGenerateSellTransaction,
+  useHighestOffer,
   useListBalances,
   useLowestListing,
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "./chunk-5EOVZAKT.js";
+} from "./chunk-BJE7AG6V.js";
 import {
   calculatePriceDifferencePercentage,
   truncateMiddle
@@ -56,635 +61,128 @@ import {
   balanceQueries,
   collectableKeys,
   getQueryClient
-} from "./chunk-GZIA25G4.js";
+} 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/switchChainModal/index.tsx
-import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
-
-// src/react/ui/modals/_internal/components/switchChainModal/store.ts
+// src/react/ui/modals/Account/index.tsx
+import { Box, Button, Modal, Text } from "@0xsequence/design-system";
 import { observable } from "@legendapp/state";
-var initialState = {
-  isOpen: false,
-  open: ({ chainIdToSwitchTo, onSwitchChain, callbacks }) => {
-    switchChainModal$.state.set({
-      ...switchChainModal$.state.get(),
-      chainIdToSwitchTo,
-      onSwitchChain,
-      callbacks
-    });
-    switchChainModal$.isOpen.set(true);
-  },
-  close: () => {
-    switchChainModal$.isOpen.set(false);
-    switchChainModal$.state.set({
-      ...initialState.state
-    });
-  },
-  state: {
-    chainIdToSwitchTo: void 0,
-    onSwitchChain: () => {
-    },
-    isSwitching: false
-  }
-};
-var switchChainModal$ = observable(initialState);
-
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import {
-  Button,
-  CloseIcon,
-  IconButton,
-  Spinner,
-  Text as Text2
-} from "@0xsequence/design-system";
-
-// src/react/ui/modals/_internal/components/alertMessage/index.tsx
-import { Box, Text, WarningIcon } from "@0xsequence/design-system";
+import { observer } from "@legendapp/state/react";
+import { useAccount } from "wagmi";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AlertMessage({ message, type }) {
-  return /* @__PURE__ */ jsxs(Box, { className: `${alertMessageBox} ${alertMessageBoxVariants[type]}`, children: [
-    /* @__PURE__ */ jsx(Text, { color: "white", fontSize: "normal", fontWeight: "medium", children: message }),
-    type === "warning" && /* @__PURE__ */ jsx(WarningIcon, { size: "sm", color: "white" }),
-    type === "info" && /* @__PURE__ */ jsx(InfoIcon_default, { size: "sm", color: "white" })
+var accountModalOpen$ = observable(false);
+var AccountModal = observer(function AccountModal2() {
+  const { address } = useAccount();
+  return accountModalOpen$.get() && /* @__PURE__ */ jsxs(Modal, { children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { children: "Wallet address" }),
+      /* @__PURE__ */ jsx(Text, { children: address })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { label: "Sign out" })
   ] });
-}
+});
 
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import { observer } from "@legendapp/state/react";
-import { useSwitchChain } from "wagmi";
-import { BaseError } from "viem";
+// src/react/ui/modals/CreateListingModal/index.tsx
+import { Box as Box12 } from "@0xsequence/design-system";
+import { Show, observer as observer8 } from "@legendapp/state/react";
+import { useAccount as useAccount4 } from "wagmi";
 
-// src/utils/network.ts
-import { networks } from "@0xsequence/network";
-var getPresentableChainName = (chainId) => {
-  return networks[chainId]?.name;
-};
+// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
+import { useState } from "react";
+import { Box as Box2, Select, Text as Text2 } from "@0xsequence/design-system";
+import { observer as observer2 } from "@legendapp/state/react";
+import { addDays, isSameDay } from "date-fns";
 
-// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
-import { UserRejectedRequestError } from "viem";
-import { SwitchChainNotSupportedError } from "wagmi";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var useSwitchChainModal = () => {
-  return {
-    show: (args) => switchChainModal$.open(args),
-    close: () => switchChainModal$.close(),
-    isSwitching$: switchChainModal$.state.isSwitching
-  };
-};
-var SwitchChainModal = observer(() => {
-  const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
-  const isSwitching$ = switchChainModal$.state.isSwitching;
-  const chainName = getPresentableChainName(chainIdToSwitchTo);
-  const { switchChainAsync } = useSwitchChain();
-  const {
-    onSwitchingNotSupported,
-    onUserRejectedRequest,
-    onUnknownError,
-    onSuccess
-  } = switchChainModal$.state.callbacks.get() || {};
-  async function handleSwitchChain() {
-    isSwitching$.set(true);
-    try {
-      await switchChainAsync({ chainId: chainIdToSwitchTo });
-      switchChainModal$.state.onSwitchChain();
-      onSuccess && onSuccess();
-      switchChainModal$.close();
-    } catch (error) {
-      if (error instanceof BaseError) {
-        const name = error.name;
-        switch (name) {
-          case SwitchChainNotSupportedError.name:
-            onSwitchingNotSupported && onSwitchingNotSupported();
-            break;
-          case UserRejectedRequestError.name:
-            onUserRejectedRequest && onUserRejectedRequest();
-            break;
-          default:
-            onUnknownError && onUnknownError(error);
-            break;
-        }
-      } else {
-        onUnknownError && onUnknownError(error);
-      }
-    } finally {
-      isSwitching$.set(false);
-    }
-  }
-  return /* @__PURE__ */ jsx2(Root, { open: switchChainModal$.isOpen.get(), children: /* @__PURE__ */ jsxs2(Portal, { children: [
-    /* @__PURE__ */ jsx2(Overlay, { className: dialogOverlay }),
-    /* @__PURE__ */ jsxs2(Content, { className: switchChainModalContent, children: [
-      /* @__PURE__ */ jsx2(Text2, { fontSize: "large", fontWeight: "bold", color: "text100", children: "Wrong network" }),
-      /* @__PURE__ */ jsx2(
-        AlertMessage,
-        {
-          type: "warning",
-          message: `You need to switch to ${chainName} network before completing the transaction`
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Button,
-        {
-          name: "switch-chain",
-          size: "sm",
-          label: isSwitching$.get() ? /* @__PURE__ */ jsx2(Spinner, {}) : "Switch Network",
-          variant: "primary",
-          pending: isSwitching$.get(),
-          shape: "square",
-          className: isSwitching$.get() ? switchChainCta.pending : switchChainCta.default,
-          justifySelf: "flex-end",
-          onClick: handleSwitchChain
+// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
+import { Button as Button2 } from "@0xsequence/design-system";
+import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
+import { format } from "date-fns";
+
+// src/react/ui/modals/_internal/components/calendar/index.tsx
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/style.css";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Calendar({ ...props }) {
+  const { selectedDate, setSelectedDate } = props;
+  return /* @__PURE__ */ jsx2(
+    DayPicker,
+    {
+      disabled: {
+        before: /* @__PURE__ */ new Date()
+      },
+      selected: selectedDate,
+      onDayClick: setSelectedDate,
+      defaultMonth: selectedDate,
+      modifiersStyles: {
+        selected: {
+          color: "hsl(var(--foreground))",
+          background: "hsl(var(--primary))",
+          border: "none"
         }
-      ),
-      /* @__PURE__ */ jsx2(
-        Close,
-        {
-          onClick: () => {
-            switchChainModal$.delete();
-          },
-          className: closeButton,
-          asChild: true,
-          children: /* @__PURE__ */ jsx2(IconButton, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+      },
+      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"
         }
-      )
-    ] })
-  ] }) });
-});
-var switchChainModal_default = SwitchChainModal;
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import {
-  CloseIcon as CloseIcon2,
-  IconButton as IconButton2,
-  Skeleton,
-  Text as Text6
-} from "@0xsequence/design-system";
-import { observer as observer3 } from "@legendapp/state/react";
-import { Close as Close2, Content as Content2, Overlay as Overlay2, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
-import { useEffect as useEffect2 } from "react";
-import { useTransactionReceipt } from "wagmi";
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+var calendar_default = Calendar;
 
-// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
-import { Box as Box2, Spinner as Spinner2, Text as Text3 } from "@0xsequence/design-system";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function TransactionFooter({
-  transactionHash,
-  isConfirming,
-  isConfirmed,
-  isFailed
+// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CalendarPopover({
+  selectedDate,
+  setSelectedDate
 }) {
-  const icon = isConfirming && /* @__PURE__ */ jsx3(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx3(PositiveCircleIcon_default, { size: "md" });
-  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
-  return /* @__PURE__ */ jsxs3(Box2, { display: "flex", alignItems: "center", children: [
-    icon,
-    /* @__PURE__ */ jsx3(Text3, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
-    /* @__PURE__ */ jsx3(
-      Text3,
+  return /* @__PURE__ */ jsxs2(Root, { children: [
+    /* @__PURE__ */ jsx3(Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+      Button2,
       {
-        color: "polygonLight",
-        flexGrow: "1",
-        textAlign: "right",
-        fontSize: "normal",
-        fontWeight: "medium",
-        marginLeft: "2",
-        children: truncateMiddle(transactionHash, 4, 4)
+        leftIcon: CalendarIcon_default,
+        className: dateSelectButton,
+        variant: "ghost",
+        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
+        shape: "square"
       }
-    )
-  ] });
-}
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { Box as Box4, Image, NetworkImage, Text as Text5 } from "@0xsequence/design-system";
-import { observer as observer2 } from "@legendapp/state/react";
-import { formatUnits } from "viem";
-
-// src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box3, Text as Text4 } from "@0xsequence/design-system";
-import { formatDistanceToNow } from "date-fns";
-import { useState, useEffect } from "react";
-import { jsx as jsx4 } 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__ */ jsx4(
-    Box3,
-    {
-      flexGrow: "1",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx4(Text4, { color: "text50", fontSize: "small", children: timeAgo })
-    }
-  );
-}
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
-import { observable as observable2 } from "@legendapp/state";
-var initialState2 = {
-  isOpen: false,
-  open: ({
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    type,
-    callbacks,
-    queriesToInvalidate
-  }) => {
-    transactionStatusModal$.state.set({
-      ...transactionStatusModal$.state.get(),
-      hash,
-      price,
-      collectionAddress,
-      chainId,
-      tokenId,
-      getTitle,
-      getMessage: getMessage2,
-      type,
-      callbacks,
-      queriesToInvalidate
-    });
-    transactionStatusModal$.isOpen.set(true);
-  },
-  close: () => {
-    transactionStatusModal$.isOpen.set(false);
-    transactionStatusModal$.state.set({
-      ...initialState2.state
-    });
-  },
-  state: {
-    hash: void 0,
-    status: "PENDING",
-    price: void 0,
-    collectionAddress: "",
-    chainId: "",
-    tokenId: "",
-    getTitle: void 0,
-    getMessage: void 0,
-    type: void 0
-  }
-};
-var transactionStatusModal$ = observable2(initialState2);
-
-// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-import { useMemo } from "react";
-
-// src/react/ui/modals/_internal/components/transactionPreview/consts.ts
-var TRANSACTION_TITLES = {
-  sell: {
-    confirming: "Selling",
-    confirmed: "Sold",
-    failed: "Sale failed"
-  },
-  createListing: {
-    confirming: "Creating listing",
-    confirmed: "Listed",
-    failed: "Listing failed"
-  },
-  createOffer: {
-    confirming: "Creating offer",
-    confirmed: "Offer created",
-    failed: "Offer failed"
-  },
-  buy: {
-    confirming: "Buying",
-    confirmed: "Bought",
-    failed: "Purchase failed"
-  },
-  transfer: {
-    confirming: "Transferring",
-    confirmed: "Transferred",
-    failed: "Transfer failed"
-  }
-};
-
-// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-function useTransactionPreviewTitle(status, type) {
-  return useMemo(() => {
-    if (!type) return "";
-    const { isConfirming, isConfirmed, isFailed } = status;
-    const titles = TRANSACTION_TITLES[type];
-    if (isConfirming) return titles.confirming;
-    if (isConfirmed) return titles.confirmed;
-    if (isFailed) return titles.failed;
-    return "";
-  }, [status, type]);
-}
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var TransactionPreview = observer2(
-  ({
-    price,
-    collectionAddress,
-    chainId,
-    collectible,
-    isConfirming,
-    isConfirmed,
-    isFailed
-  }) => {
-    const { type } = transactionStatusModal$.state.get();
-    const title = useTransactionPreviewTitle(
-      { isConfirmed, isConfirming, isFailed },
-      type
-    );
-    const { data: collection } = useCollection({
-      collectionAddress,
-      chainId
-    });
-    const collectibleImage = collectible.image;
-    const collectibleName = collectible.name;
-    const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits(BigInt(price.amountRaw), price.currency.decimals) : void 0;
-    return /* @__PURE__ */ jsxs4(Box4, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx5(
-          Text5,
-          {
-            color: "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            marginRight: "1",
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx5(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx5(TimeAgo, { date: /* @__PURE__ */ new Date() })
-      ] }),
-      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx5(
-          Image,
-          {
-            src: collectibleImage,
-            alt: collectibleName,
-            width: "9",
-            height: "9",
-            borderRadius: "xs",
-            marginRight: "3"
-          }
-        ),
-        /* @__PURE__ */ jsxs4(
-          Box4,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "0.5",
-            children: [
-              /* @__PURE__ */ jsx5(Text5, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
-              /* @__PURE__ */ jsx5(Text5, { color: "text100", fontSize: "small", children: collectionName })
-            ]
-          }
-        ),
-        price && /* @__PURE__ */ jsxs4(
-          Box4,
-          {
-            flexGrow: "1",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: "1",
-            children: [
-              /* @__PURE__ */ jsx5(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-              /* @__PURE__ */ jsxs4(Text5, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
-                priceFormatted,
-                " ",
-                price.currency.symbol
-              ] })
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
-var transactionPreview_default = TransactionPreview;
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
-var closeButton4 = "fyvr11lw fyvr1tc fyvr1mo";
-var dialogOverlay4 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
-var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var useTransactionStatusModal = () => {
-  return {
-    show: (args) => transactionStatusModal$.open(args),
-    close: () => transactionStatusModal$.close()
-  };
-};
-var TransactionStatusModal = observer3(() => {
-  const {
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    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__ */ jsx6(Root2, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs5(Portal2, { children: [
-    /* @__PURE__ */ jsx6(Overlay2, { className: dialogOverlay4 }),
-    /* @__PURE__ */ jsxs5(Content2, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx6(Text6, { fontSize: "large", fontWeight: "bold", color: "text100", children: title }) : /* @__PURE__ */ jsx6(Skeleton, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx6(Text6, { fontSize: "small", color: "text80", children: message }) : /* @__PURE__ */ jsx6(Skeleton, { width: "20", height: "4" }),
-      /* @__PURE__ */ jsx6(
-        transactionPreview_default,
-        {
-          price,
-          collectionAddress,
-          chainId,
-          collectible,
-          isConfirming,
-          isConfirmed,
-          isFailed
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        TransactionFooter,
-        {
-          transactionHash: hash,
-          isConfirming,
-          isConfirmed,
-          isFailed
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Close2,
-        {
-          onClick: () => {
-            transactionStatusModal$.close();
-          },
-          className: closeButton4,
-          asChild: true,
-          children: /* @__PURE__ */ jsx6(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
-        }
-      )
-    ] })
-  ] }) });
-});
-var transactionStatusModal_default = TransactionStatusModal;
-
-// src/react/ui/modals/Account/index.tsx
-import { Box as Box5, Button as Button2, Modal, Text as Text7 } from "@0xsequence/design-system";
-import { observable as observable3 } from "@legendapp/state";
-import { observer as observer4 } from "@legendapp/state/react";
-import { useAccount } from "wagmi";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var accountModalOpen$ = observable3(false);
-var AccountModal = observer4(function AccountModal2() {
-  const { address } = useAccount();
-  return accountModalOpen$.get() && /* @__PURE__ */ jsxs6(Modal, { children: [
-    /* @__PURE__ */ jsxs6(Box5, { children: [
-      /* @__PURE__ */ jsx7(Text7, { children: "Wallet address" }),
-      /* @__PURE__ */ jsx7(Text7, { children: address })
-    ] }),
-    /* @__PURE__ */ jsx7(Button2, { label: "Sign out" })
-  ] });
-});
-
-// src/react/ui/modals/CreateListingModal/index.tsx
-import { Box as Box12 } from "@0xsequence/design-system";
-import { Show, observer as observer8 } from "@legendapp/state/react";
-import { useAccount as useAccount4 } from "wagmi";
-
-// src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { useState as useState2 } from "react";
-import { Box as Box6, Select, Text as Text8 } from "@0xsequence/design-system";
-import { observer as observer5 } from "@legendapp/state/react";
-import { addDays, isSameDay } from "date-fns";
-
-// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { Button as Button3 } from "@0xsequence/design-system";
-import { Content as Content3, Portal as Portal3, Root as Root3, Trigger } from "@radix-ui/react-popover";
-import { format } from "date-fns";
-
-// src/react/ui/modals/_internal/components/calendar/index.tsx
-import { DayPicker } from "react-day-picker";
-import "react-day-picker/style.css";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Calendar({ ...props }) {
-  const { selectedDate, setSelectedDate } = props;
-  return /* @__PURE__ */ jsx8(
-    DayPicker,
-    {
-      disabled: {
-        before: /* @__PURE__ */ new Date()
-      },
-      selected: selectedDate,
-      onDayClick: setSelectedDate,
-      defaultMonth: selectedDate,
-      modifiersStyles: {
-        selected: {
-          color: "hsl(var(--foreground))",
-          background: "hsl(var(--primary))",
-          border: "none"
-        }
-      },
-      styles: {
-        root: {
-          width: "max-content",
-          margin: 0,
-          color: "hsl(var(--foreground))",
-          background: "hsl(var(--background))",
-          border: `1px solid hsl(var(--border))`,
-          borderRadius: "var(--radius)",
-          padding: "0.5rem",
-          position: "relative"
-        },
-        day: {
-          margin: 0,
-          width: "1rem",
-          height: "1rem"
-        },
-        day_button: {
-          margin: 0,
-          width: "1.8rem",
-          height: "1.5rem",
-          padding: 0,
-          border: "none"
-        }
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-var calendar_default = Calendar;
-
-// src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function CalendarPopover({
-  selectedDate,
-  setSelectedDate
-}) {
-  return /* @__PURE__ */ jsxs7(Root3, { children: [
-    /* @__PURE__ */ jsx9(Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
-      Button3,
-      {
-        leftIcon: CalendarIcon_default,
-        className: dateSelectButton,
-        variant: "ghost",
-        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
-        shape: "square"
-      }
-    ) }),
-    /* @__PURE__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsx9(Content3, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx9(
-      calendar_default,
-      {
-        selectedDate,
-        setSelectedDate,
-        mode: "single"
-      }
-    ) }) })
+    ) }),
+    /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Content, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx3(
+      calendar_default,
+      {
+        selectedDate,
+        setSelectedDate,
+        mode: "single"
+      }
+    ) }) })
   ] });
 }
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -712,11 +210,11 @@ var PRESET_RANGES = {
     offset: 30
   }
 };
-var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
+var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
   className,
   $date
 }) {
-  const [_, setRange] = useState2("1_week");
+  const [_, setRange] = useState("1_week");
   function handleSelectPresetRange(range) {
     setRange(range);
     const presetRange = Object.values(PRESET_RANGES).find(
@@ -737,9 +235,9 @@ var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
     }
     $date.set(date);
   }
-  return /* @__PURE__ */ jsxs8(Box6, { width: "full", position: "relative", children: [
-    /* @__PURE__ */ jsx10(
-      Text8,
+  return /* @__PURE__ */ jsxs3(Box2, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx4(
+      Text2,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -749,8 +247,8 @@ var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs8(
-      Box6,
+    /* @__PURE__ */ jsxs3(
+      Box2,
       {
         className,
         width: "full",
@@ -759,7 +257,7 @@ var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
         gap: "2",
         marginTop: "0.5",
         children: [
-          /* @__PURE__ */ jsx10(Box6, { className: rangeSelect, position: "absolute", right: "2", children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx4(Box2, { className: rangeSelect, position: "absolute", right: "2", children: /* @__PURE__ */ jsx4(
             Select,
             {
               name: "expirationDate",
@@ -774,7 +272,7 @@ var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
               onValueChange: (value) => handleSelectPresetRange(value)
             }
           ) }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx4(
             CalendarPopover,
             {
               selectedDate: $date.get(),
@@ -789,8 +287,8 @@ var ExpirationDateSelect = observer5(function ExpirationDateSelect2({
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text9 } from "@0xsequence/design-system";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Text as Text3 } from "@0xsequence/design-system";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
   collectionAddress,
@@ -815,8 +313,8 @@ function FloorPriceText({
     decimals: price.currency.decimals
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
-  return /* @__PURE__ */ jsx11(
-    Text9,
+  return /* @__PURE__ */ jsx5(
+    Text3,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -829,34 +327,34 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput, TokenImage } from "@0xsequence/design-system";
-import { observer as observer7 } from "@legendapp/state/react";
-import { useState as useState4 } from "react";
-import { erc20Abi, formatUnits as formatUnits2, parseUnits } from "viem";
+import { Box as Box4, NumericInput, TokenImage } from "@0xsequence/design-system";
+import { observer as observer4 } from "@legendapp/state/react";
+import { useState as useState3 } from "react";
+import { erc20Abi, formatUnits, parseUnits } from "viem";
 import { useAccount as useAccount2, useReadContract } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
-import { Box as Box7, Select as Select2, Skeleton as Skeleton2 } from "@0xsequence/design-system";
-import { observer as observer6 } from "@legendapp/state/react";
-import { useEffect as useEffect3, useState as useState3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer6(function CurrencyOptionsSelect2({
+import { Box as Box3, Select as Select2, Skeleton } from "@0xsequence/design-system";
+import { observer as observer3 } from "@legendapp/state/react";
+import { useEffect, useState as useState2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   $selectedCurrency
 }) {
-  const [value, setValue] = useState3(null);
+  const [value, setValue] = useState2(null);
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     collectionAddress,
     chainId
   });
-  useEffect3(() => {
+  useEffect(() => {
     if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
       $selectedCurrency.set(currencies[0]);
     }
   }, [currencies]);
   if (!currencies || currenciesLoading) {
-    return /* @__PURE__ */ jsx12(Skeleton2, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+    return /* @__PURE__ */ jsx6(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
   const options = currencies.map(
     (currency) => ({
@@ -871,7 +369,7 @@ var CurrencyOptionsSelect = observer6(function CurrencyOptionsSelect2({
     setValue(value2);
     $selectedCurrency.set(c);
   };
-  return /* @__PURE__ */ jsx12(Box7, { className: currencySelect, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx6(Box3, { className: currencySelect, children: /* @__PURE__ */ jsx6(
     Select2,
     {
       name: "currencies",
@@ -884,14 +382,14 @@ var CurrencyOptionsSelect = observer6(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var PriceInput = observer7(function PriceInput2({
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var PriceInput = observer4(function PriceInput2({
   chainId,
   collectionAddress,
   $listingPrice,
   checkBalance
 }) {
-  const [balanceError, setBalanceError] = useState4("");
+  const [balanceError, setBalanceError] = useState3("");
   const { address: accountAddress } = useAccount2();
   const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
     address: $listingPrice.currency.contractAddress.get(),
@@ -923,19 +421,19 @@ var PriceInput = observer7(function PriceInput2({
     $listingPrice.amountRaw.set(parsedAmount.toString());
     checkBalance && checkInsufficientBalance(parsedAmount.toString());
   };
-  return /* @__PURE__ */ jsxs9(Box8, { className: priceInputWrapper, position: "relative", children: [
-    /* @__PURE__ */ jsx13(
-      Box8,
+  return /* @__PURE__ */ jsxs4(Box4, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx7(
+      Box4,
       {
         className: priceInputCurrencyImage,
         position: "absolute",
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx13(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
+        children: /* @__PURE__ */ jsx7(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx7(
       NumericInput,
       {
         name: "listingPrice",
@@ -943,7 +441,7 @@ var PriceInput = observer7(function PriceInput2({
         label: "Enter price",
         labelLocation: "top",
         placeholder: "0.00",
-        controls: /* @__PURE__ */ jsx13(
+        controls: /* @__PURE__ */ jsx7(
           currencyOptionsSelect_default,
           {
             $selectedCurrency: $listingPrice?.currency,
@@ -952,7 +450,7 @@ var PriceInput = observer7(function PriceInput2({
           }
         ),
         numeric: true,
-        value: listingPriceAmountRaw ? formatUnits2(
+        value: listingPriceAmountRaw ? formatUnits(
           BigInt(listingPriceAmountRaw),
           Number(currencyDecimals)
         ) : "",
@@ -960,14 +458,14 @@ var PriceInput = observer7(function PriceInput2({
         width: "full"
       }
     ),
-    balanceError && /* @__PURE__ */ jsx13(Box8, { color: "negative", fontSize: "small", children: balanceError })
+    balanceError && /* @__PURE__ */ jsx7(Box4, { color: "negative", fontSize: "small", children: balanceError })
   ] });
 });
 var priceInput_default = PriceInput;
 
 // src/react/ui/modals/_internal/components/quantityInput/index.tsx
-import { Box as Box9, IconButton as IconButton3, NumericInput as NumericInput2 } from "@0xsequence/design-system";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box5, IconButton, NumericInput as NumericInput2 } from "@0xsequence/design-system";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function QuantityInput({
   $quantity,
   chainId,
@@ -1045,7 +543,7 @@ function QuantityInput({
   if (collectableLoading) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(Box9, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx8(Box5, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx8(
     NumericInput2,
     {
       name: "quantity",
@@ -1054,16 +552,16 @@ function QuantityInput({
       label: "Enter quantity",
       labelLocation: "top",
       placeholder: getPlaceholder(quantityDecimals || 0),
-      controls: /* @__PURE__ */ jsxs10(
-        Box9,
+      controls: /* @__PURE__ */ jsxs5(
+        Box5,
         {
           display: "flex",
           alignItems: "center",
           gap: "1",
           marginRight: "2",
           children: [
-            /* @__PURE__ */ jsx14(
-              IconButton3,
+            /* @__PURE__ */ jsx8(
+              IconButton,
               {
                 disabled: Number.parseFloat(quantity) === 0 || !quantity,
                 onClick: handleDecrement,
@@ -1072,8 +570,8 @@ function QuantityInput({
                 icon: MinusIcon_default
               }
             ),
-            /* @__PURE__ */ jsx14(
-              IconButton3,
+            /* @__PURE__ */ jsx8(
+              IconButton,
               {
                 onClick: handleIncrement,
                 background: "buttonGlass",
@@ -1092,9 +590,162 @@ function QuantityInput({
   ) });
 }
 
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import { Close, Content as Content2, Overlay, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
+
+// src/react/ui/modals/_internal/components/switchChainModal/store.ts
+import { observable as observable2 } from "@legendapp/state";
+var initialState = {
+  isOpen: false,
+  open: ({ chainIdToSwitchTo, onSwitchChain, callbacks }) => {
+    switchChainModal$.state.set({
+      ...switchChainModal$.state.get(),
+      chainIdToSwitchTo,
+      onSwitchChain,
+      callbacks
+    });
+    switchChainModal$.isOpen.set(true);
+  },
+  close: () => {
+    switchChainModal$.isOpen.set(false);
+    switchChainModal$.state.set({
+      ...initialState.state
+    });
+  },
+  state: {
+    chainIdToSwitchTo: void 0,
+    onSwitchChain: () => {
+    },
+    isSwitching: false
+  }
+};
+var switchChainModal$ = observable2(initialState);
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import {
+  Button as Button3,
+  CloseIcon,
+  IconButton as IconButton2,
+  Spinner,
+  Text as Text5
+} from "@0xsequence/design-system";
+
+// src/react/ui/modals/_internal/components/alertMessage/index.tsx
+import { Box as Box6, Text as Text4, WarningIcon } from "@0xsequence/design-system";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function AlertMessage({ message, type }) {
+  return /* @__PURE__ */ jsxs6(Box6, { className: `${alertMessageBox} ${alertMessageBoxVariants[type]}`, children: [
+    /* @__PURE__ */ jsx9(Text4, { color: "white", fontSize: "normal", fontWeight: "medium", children: message }),
+    type === "warning" && /* @__PURE__ */ jsx9(WarningIcon, { size: "sm", color: "white" }),
+    type === "info" && /* @__PURE__ */ jsx9(InfoIcon_default, { size: "sm", color: "white" })
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import { observer as observer5 } from "@legendapp/state/react";
+import { useSwitchChain } from "wagmi";
+import { BaseError } from "viem";
+
+// src/utils/network.ts
+import { networks } from "@0xsequence/network";
+var getPresentableChainName = (chainId) => {
+  return networks[chainId]?.name;
+};
+
+// src/react/ui/modals/_internal/components/switchChainModal/index.tsx
+import { UserRejectedRequestError } from "viem";
+import { SwitchChainNotSupportedError } from "wagmi";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var useSwitchChainModal = () => {
+  return {
+    show: (args) => switchChainModal$.open(args),
+    close: () => switchChainModal$.close(),
+    isSwitching$: switchChainModal$.state.isSwitching
+  };
+};
+var SwitchChainModal = observer5(() => {
+  const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
+  const isSwitching$ = switchChainModal$.state.isSwitching;
+  const chainName = getPresentableChainName(chainIdToSwitchTo);
+  const { switchChainAsync } = useSwitchChain();
+  const {
+    onSwitchingNotSupported,
+    onUserRejectedRequest,
+    onUnknownError,
+    onSuccess
+  } = switchChainModal$.state.callbacks.get() || {};
+  async function handleSwitchChain() {
+    isSwitching$.set(true);
+    try {
+      await switchChainAsync({ chainId: chainIdToSwitchTo });
+      switchChainModal$.state.onSwitchChain();
+      onSuccess && onSuccess();
+      switchChainModal$.close();
+    } catch (error) {
+      if (error instanceof BaseError) {
+        const name = error.name;
+        switch (name) {
+          case SwitchChainNotSupportedError.name:
+            onSwitchingNotSupported && onSwitchingNotSupported();
+            break;
+          case UserRejectedRequestError.name:
+            onUserRejectedRequest && onUserRejectedRequest();
+            break;
+          default:
+            onUnknownError && onUnknownError(error);
+            break;
+        }
+      } else {
+        onUnknownError && onUnknownError(error);
+      }
+    } finally {
+      isSwitching$.set(false);
+    }
+  }
+  return /* @__PURE__ */ jsx10(Root2, { open: switchChainModal$.isOpen.get(), children: /* @__PURE__ */ jsxs7(Portal2, { children: [
+    /* @__PURE__ */ jsx10(Overlay, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs7(Content2, { className: switchChainModalContent, children: [
+      /* @__PURE__ */ jsx10(Text5, { fontSize: "large", fontWeight: "bold", color: "text100", children: "Wrong network" }),
+      /* @__PURE__ */ jsx10(
+        AlertMessage,
+        {
+          type: "warning",
+          message: `You need to switch to ${chainName} network before completing the transaction`
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Button3,
+        {
+          name: "switch-chain",
+          size: "sm",
+          label: isSwitching$.get() ? /* @__PURE__ */ jsx10(Spinner, {}) : "Switch Network",
+          variant: "primary",
+          pending: isSwitching$.get(),
+          shape: "square",
+          className: isSwitching$.get() ? switchChainCta.pending : switchChainCta.default,
+          justifySelf: "flex-end",
+          onClick: handleSwitchChain
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Close,
+        {
+          onClick: () => {
+            switchChainModal$.delete();
+          },
+          className: closeButton,
+          asChild: true,
+          children: /* @__PURE__ */ jsx10(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+        }
+      )
+    ] })
+  ] }) });
+});
+var switchChainModal_default = SwitchChainModal;
+
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton3, Text as Text10 } from "@0xsequence/design-system";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Box as Box7, Image, Skeleton as Skeleton2, Text as Text6 } from "@0xsequence/design-system";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -1107,17 +758,17 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs11(Box10, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx15(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs11(Box10, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx15(Skeleton3, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx15(Skeleton3, { width: "1/2", height: "3" })
+    return /* @__PURE__ */ jsxs8(Box7, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx11(Skeleton2, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs8(Box7, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx11(Skeleton2, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx11(Skeleton2, { width: "1/2", height: "3" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs11(Box10, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx15(
-      Image2,
+  return /* @__PURE__ */ jsxs8(Box7, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx11(
+      Image,
       {
         src: collectable?.image,
         alt: collectable?.name,
@@ -1126,17 +777,17 @@ function TokenPreview({
         borderRadius: "xs"
       }
     ),
-    /* @__PURE__ */ jsxs11(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx15(Text10, { fontSize: "small", color: "text80", fontWeight: "medium", children: collectionName }),
-      /* @__PURE__ */ jsx15(Text10, { fontSize: "small", fontWeight: "bold", color: "text100", children: collectable?.name })
+    /* @__PURE__ */ jsxs8(Box7, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx11(Text6, { fontSize: "small", color: "text80", fontWeight: "medium", children: collectionName }),
+      /* @__PURE__ */ jsx11(Text6, { fontSize: "small", fontWeight: "bold", color: "text100", children: collectable?.name })
     ] })
   ] });
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box11, NetworkImage as NetworkImage2, Skeleton as Skeleton4, Text as Text11 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits3 } from "viem";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Box as Box8, NetworkImage, Skeleton as Skeleton3, Text as Text7 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits2 } from "viem";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
@@ -1154,25 +805,25 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
   if (royaltyPercentage !== void 0 && formattedAmount) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toString();
   }
   if (marketplaceFeePercentage !== void 0 && formattedAmount) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toString();
   }
-  return /* @__PURE__ */ jsxs12(
-    Box11,
+  return /* @__PURE__ */ jsxs9(
+    Box8,
     {
       width: "full",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx16(Text11, { fontSize: "small", color: "text50", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs12(Box11, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx16(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
-          priceLoading ? /* @__PURE__ */ jsx16(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs12(Text11, { fontSize: "small", color: "text100", children: [
+        /* @__PURE__ */ jsx12(Text7, { fontSize: "small", color: "text50", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx12(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+          priceLoading ? /* @__PURE__ */ jsx12(Skeleton3, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text7, { fontSize: "small", color: "text100", children: [
             formattedAmount,
             " ",
             price.currency.symbol
@@ -1180,14 +831,368 @@ function TransactionDetails({
         ] })
       ]
     }
-  );
-}
-
-// src/react/ui/modals/CreateListingModal/_store.ts
-import { observable as observable4, when } from "@legendapp/state";
-import { useMount, useSelector } from "@legendapp/state/react";
-import { addDays as addDays2 } from "date-fns/addDays";
-import { useAccount as useAccount3, useSendTransaction } from "wagmi";
+  );
+}
+
+// src/react/ui/modals/CreateListingModal/_store.ts
+import { observable as observable4, when } from "@legendapp/state";
+import { useMount, useSelector } from "@legendapp/state/react";
+import { addDays as addDays2 } from "date-fns/addDays";
+import { useAccount as useAccount3, useSendTransaction } from "wagmi";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import {
+  CloseIcon as CloseIcon2,
+  IconButton as IconButton3,
+  Skeleton as Skeleton4,
+  Text as Text11
+} from "@0xsequence/design-system";
+import { observer as observer7 } from "@legendapp/state/react";
+import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
+import { useEffect as useEffect3 } from "react";
+import { useTransactionReceipt } from "wagmi";
+
+// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
+import { Box as Box9, Spinner as Spinner2, Text as Text8 } from "@0xsequence/design-system";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function TransactionFooter({
+  transactionHash,
+  isConfirming,
+  isConfirmed,
+  isFailed
+}) {
+  const icon = isConfirming && /* @__PURE__ */ jsx13(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx13(PositiveCircleIcon_default, { size: "md" });
+  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
+  return /* @__PURE__ */ jsxs10(Box9, { display: "flex", alignItems: "center", children: [
+    icon,
+    /* @__PURE__ */ jsx13(Text8, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
+    /* @__PURE__ */ jsx13(
+      Text8,
+      {
+        color: "polygonLight",
+        flexGrow: "1",
+        textAlign: "right",
+        fontSize: "normal",
+        fontWeight: "medium",
+        marginLeft: "2",
+        children: truncateMiddle(transactionHash, 4, 4)
+      }
+    )
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { Box as Box11, Image as Image2, NetworkImage as NetworkImage2, Text as Text10 } from "@0xsequence/design-system";
+import { observer as observer6 } from "@legendapp/state/react";
+import { formatUnits as formatUnits3 } from "viem";
+
+// src/react/ui/modals/_internal/components/timeAgo/index.tsx
+import { Box as Box10, Text as Text9 } from "@0xsequence/design-system";
+import { formatDistanceToNow } from "date-fns";
+import { useState as useState4, useEffect as useEffect2 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function TimeAgo({ date }) {
+  const [timeAgo, setTimeAgo] = useState4("");
+  useEffect2(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(formatDistanceToNow(date));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [date]);
+  return /* @__PURE__ */ jsx14(
+    Box10,
+    {
+      flexGrow: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */ jsx14(Text9, { color: "text50", fontSize: "small", children: timeAgo })
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
+import { observable as observable3 } from "@legendapp/state";
+var initialState2 = {
+  isOpen: false,
+  open: ({
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    type,
+    callbacks,
+    queriesToInvalidate
+  }) => {
+    transactionStatusModal$.state.set({
+      ...transactionStatusModal$.state.get(),
+      hash,
+      price,
+      collectionAddress,
+      chainId,
+      tokenId,
+      getTitle,
+      getMessage: getMessage2,
+      type,
+      callbacks,
+      queriesToInvalidate
+    });
+    transactionStatusModal$.isOpen.set(true);
+  },
+  close: () => {
+    transactionStatusModal$.isOpen.set(false);
+    transactionStatusModal$.state.set({
+      ...initialState2.state
+    });
+  },
+  state: {
+    hash: void 0,
+    status: "PENDING",
+    price: void 0,
+    collectionAddress: "",
+    chainId: "",
+    tokenId: "",
+    getTitle: void 0,
+    getMessage: void 0,
+    type: void 0
+  }
+};
+var transactionStatusModal$ = observable3(initialState2);
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+import { useMemo } from "react";
+
+// src/react/ui/modals/_internal/components/transactionPreview/consts.ts
+var TRANSACTION_TITLES = {
+  sell: {
+    confirming: "Selling",
+    confirmed: "Sold",
+    failed: "Sale failed"
+  },
+  createListing: {
+    confirming: "Creating listing",
+    confirmed: "Listed",
+    failed: "Listing failed"
+  },
+  createOffer: {
+    confirming: "Creating offer",
+    confirmed: "Offer created",
+    failed: "Offer failed"
+  },
+  buy: {
+    confirming: "Buying",
+    confirmed: "Bought",
+    failed: "Purchase failed"
+  },
+  transfer: {
+    confirming: "Transferring",
+    confirmed: "Transferred",
+    failed: "Transfer failed"
+  }
+};
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+function useTransactionPreviewTitle(status, type) {
+  return useMemo(() => {
+    if (!type) return "";
+    const { isConfirming, isConfirmed, isFailed } = status;
+    const titles = TRANSACTION_TITLES[type];
+    if (isConfirming) return titles.confirming;
+    if (isConfirmed) return titles.confirmed;
+    if (isFailed) return titles.failed;
+    return "";
+  }, [status, type]);
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var TransactionPreview = observer6(
+  ({
+    price,
+    collectionAddress,
+    chainId,
+    collectible,
+    isConfirming,
+    isConfirmed,
+    isFailed
+  }) => {
+    const { type } = transactionStatusModal$.state.get();
+    const title = useTransactionPreviewTitle(
+      { isConfirmed, isConfirming, isFailed },
+      type
+    );
+    const { data: collection } = useCollection({
+      collectionAddress,
+      chainId
+    });
+    const collectibleImage2 = collectible.image;
+    const collectibleName = collectible.name;
+    const collectionName = collection?.name;
+    const priceFormatted = price ? formatUnits3(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    return /* @__PURE__ */ jsxs11(Box11, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs11(Box11, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx15(
+          Text10,
+          {
+            color: "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            marginRight: "1",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx15(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx15(TimeAgo, { date: /* @__PURE__ */ new Date() })
+      ] }),
+      /* @__PURE__ */ jsxs11(Box11, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx15(
+          Image2,
+          {
+            src: collectibleImage2,
+            alt: collectibleName,
+            width: "9",
+            height: "9",
+            borderRadius: "xs",
+            marginRight: "3"
+          }
+        ),
+        /* @__PURE__ */ jsxs11(
+          Box11,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "0.5",
+            children: [
+              /* @__PURE__ */ jsx15(Text10, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
+              /* @__PURE__ */ jsx15(Text10, { color: "text100", fontSize: "small", children: collectionName })
+            ]
+          }
+        ),
+        price && /* @__PURE__ */ jsxs11(
+          Box11,
+          {
+            flexGrow: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: "1",
+            children: [
+              /* @__PURE__ */ jsx15(NetworkImage2, { chainId: Number(chainId), size: "xs" }),
+              /* @__PURE__ */ jsxs11(Text10, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
+                priceFormatted,
+                " ",
+                price.currency.symbol
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var transactionPreview_default = TransactionPreview;
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
+var closeButton4 = "fyvr11lw fyvr1tc fyvr1mo";
+var dialogOverlay4 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
+var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var useTransactionStatusModal = () => {
+  return {
+    show: (args) => transactionStatusModal$.open(args),
+    close: () => transactionStatusModal$.close()
+  };
+};
+var TransactionStatusModal = observer7(() => {
+  const {
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    callbacks,
+    queriesToInvalidate
+  } = transactionStatusModal$.state.get();
+  const { data: collectible } = useCollectible({
+    collectionAddress,
+    chainId,
+    collectibleId: tokenId
+  });
+  const {
+    isLoading: isConfirming,
+    isSuccess: isConfirmed,
+    isError: isFailed,
+    error
+  } = useTransactionReceipt({ hash });
+  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
+  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
+  const { onUnknownError, onSuccess } = callbacks || {};
+  const queryClient = getQueryClient();
+  useEffect3(() => {
+    if (!transactionStatusModal$.isOpen.get()) return;
+    let isSubscribed = true;
+    if (isConfirmed && isSubscribed && onSuccess) {
+      onSuccess();
+    }
+    if (isFailed && isSubscribed && onUnknownError) {
+      onUnknownError(error);
+    }
+    if (isSubscribed && queriesToInvalidate) {
+      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
+  return /* @__PURE__ */ jsx16(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs12(Portal3, { children: [
+    /* @__PURE__ */ jsx16(Overlay2, { className: dialogOverlay4 }),
+    /* @__PURE__ */ jsxs12(Content3, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx16(Text11, { fontSize: "large", fontWeight: "bold", color: "text100", children: title }) : /* @__PURE__ */ jsx16(Skeleton4, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx16(Text11, { fontSize: "small", color: "text80", children: message }) : /* @__PURE__ */ jsx16(Skeleton4, { width: "20", height: "4" }),
+      /* @__PURE__ */ jsx16(
+        transactionPreview_default,
+        {
+          price,
+          collectionAddress,
+          chainId,
+          collectible,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        TransactionFooter,
+        {
+          transactionHash: hash,
+          isConfirming,
+          isConfirmed,
+          isFailed
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        Close2,
+        {
+          onClick: () => {
+            transactionStatusModal$.close();
+          },
+          className: closeButton4,
+          asChild: true,
+          children: /* @__PURE__ */ jsx16(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+        }
+      )
+    ] })
+  ] }) });
+});
+var transactionStatusModal_default = TransactionStatusModal;
 
 // src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts
 var getCreateListingTransactionTitle = (params) => {
@@ -2804,12 +2809,508 @@ var ModalProvider = observer14(() => {
   ] });
 });
 
+// src/react/ui/components/collectible-card/CollectibleCard.tsx
+import { useState as useState6 } from "react";
+import { Box as Box21, IconButton as IconButton7, Skeleton as Skeleton6 } from "@0xsequence/design-system";
+
+// src/react/ui/components/_internals/action-button/ActionButton.tsx
+import { Button as Button7 } from "@0xsequence/design-system";
+import { observer as observer15 } from "@legendapp/state/react";
+import { useAccount as useAccount11 } from "wagmi";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ActionButton = observer15(function AddToCartButton({
+  collectionAddress,
+  chainId,
+  tokenId,
+  isTransfer
+}) {
+  const { address: accountAddress } = useAccount11();
+  const { data: balance, isLoading: balanceLoading } = useBalanceOfCollectible({
+    chainId,
+    collectionAddress,
+    collectableId: tokenId,
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
+    userAddress: accountAddress
+  });
+  const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
+    collectionAddress,
+    chainId: String(chainId),
+    tokenId
+  });
+  const { data: lowestListing, isLoading: lowestListingLoading } = useLowestListing({
+    collectionAddress,
+    chainId: String(chainId),
+    tokenId
+  });
+  const collectibleOwned = balance?.balance ?? 0;
+  const { show: showCreateListingModal } = useCreateListingModal();
+  const { show: showMakeOfferModal } = useMakeOfferModal();
+  const { show: showSellModal } = useSellModal();
+  const { show: showTransferModal } = useTransferModal();
+  if (balanceLoading || highestOfferLoading || lowestListingLoading || !accountAddress) {
+    return null;
+  }
+  if (isTransfer && collectibleOwned) {
+    return /* @__PURE__ */ jsx26(
+      ActionButtonBody,
+      {
+        label: "Transfer",
+        onClick: () => showTransferModal({
+          collectionAddress,
+          chainId,
+          tokenId
+        })
+      }
+    );
+  }
+  if (!collectibleOwned) {
+    return /* @__PURE__ */ jsx26(
+      ActionButtonBody,
+      {
+        label: "Make an offer",
+        onClick: () => showMakeOfferModal({
+          collectionAddress,
+          chainId,
+          collectibleId: tokenId
+        })
+      }
+    );
+  }
+  if (!collectibleOwned && lowestListing?.order) {
+    return /* @__PURE__ */ jsx26(
+      ActionButtonBody,
+      {
+        label: "Add to cart",
+        onClick: () => {
+        }
+      }
+    );
+  }
+  if (collectibleOwned && !lowestListing?.order) {
+    return /* @__PURE__ */ jsx26(
+      ActionButtonBody,
+      {
+        label: "Create listing",
+        onClick: () => showCreateListingModal({
+          collectionAddress,
+          chainId,
+          collectibleId: tokenId
+        })
+      }
+    );
+  }
+  if (collectibleOwned && highestOffer?.order) {
+    return /* @__PURE__ */ jsx26(
+      ActionButtonBody,
+      {
+        label: "Sell",
+        onClick: () => showSellModal({
+          collectionAddress,
+          chainId,
+          tokenId,
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          order: highestOffer.order
+        })
+      }
+    );
+  }
+  return null;
+});
+function ActionButtonBody({ label, onClick }) {
+  return /* @__PURE__ */ jsx26(
+    Button7,
+    {
+      variant: "primary",
+      label,
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      },
+      size: "xs",
+      shape: "square",
+      width: "full"
+    }
+  );
+}
+
+// src/react/ui/icons/DiamondEye.tsx
+import { Box as Box17 } from "@0xsequence/design-system";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Svg = () => /* @__PURE__ */ jsx27(
+  "svg",
+  {
+    width: "16",
+    height: "12",
+    viewBox: "0 0 16 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx27(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z",
+        fill: "white"
+      }
+    )
+  }
+);
+var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx27(
+  Box17,
+  {
+    as: Svg,
+    className: iconVariants({
+      size
+    }),
+    ...props
+  }
+);
+var DiamondEye_default = SvgDiamondEyeIcon;
+
+// src/react/ui/components/collectible-card/Footer.tsx
+import { Box as Box20, IconButton as IconButton6, Image as Image4, Text as Text17 } from "@0xsequence/design-system";
+import { useAccount as useAccount12 } from "wagmi";
+import { formatUnits as formatUnits4 } from "viem";
+
+// src/react/ui/components/_internals/pill/Pill.tsx
+import { Box as Box18, Text as Text16 } from "@0xsequence/design-system";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Pill({ text }) {
+  return /* @__PURE__ */ jsx28(
+    Box18,
+    {
+      background: "backgroundRaised",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingY: "1",
+      paddingX: "2",
+      borderRadius: "sm",
+      width: "max",
+      children: /* @__PURE__ */ jsx28(Text16, { fontSize: "small", fontWeight: "medium", color: "text80", children: text })
+    }
+  );
+}
+
+// src/react/ui/icons/Bell.tsx
+import { Box as Box19 } from "@0xsequence/design-system";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Svg2 = () => /* @__PURE__ */ jsx29(
+  "svg",
+  {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx29(
+      "path",
+      {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z",
+        fill: "white"
+      }
+    )
+  }
+);
+var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
+  Box19,
+  {
+    as: Svg2,
+    className: iconVariants({
+      size
+    }),
+    ...props
+  }
+);
+var Bell_default = SvgBellIcon;
+
+// src/react/ui/components/collectible-card/styles.css.ts
+var actionWrapper = "styles_actionWrapper__biep7a7";
+var collectibleCard = "styles_collectibleCard__biep7a0";
+var collectibleImage = "styles_collectibleImage__biep7a1";
+var collectibleTileWrapper = "styles_collectibleTileWrapper__biep7a2";
+var footer = { animated: "styles_footer_animated__biep7a5 fyvr11wl", "static": "fyvr11wl" };
+var offerBellButton = "styles_offerBellButton__biep7a3";
+
+// src/react/ui/components/collectible-card/Footer.tsx
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+var Footer = ({
+  name,
+  type,
+  chainId,
+  tokenId,
+  collectionAddress,
+  onOfferClick
+}) => {
+  const { address: accountAddress } = useAccount12();
+  const { data: balance } = useBalanceOfCollectible({
+    chainId: String(chainId),
+    collectionAddress,
+    collectableId: tokenId,
+    userAddress: accountAddress
+  });
+  const { data: lowestListing } = useLowestListing({
+    chainId: String(chainId),
+    collectionAddress,
+    tokenId
+  });
+  const { data: highestOffer } = useHighestOffer({
+    chainId: String(chainId),
+    collectionAddress,
+    tokenId
+  });
+  const { data: currencies } = useCurrencies({
+    chainId: String(chainId),
+    collectionAddress,
+    query: {
+      enabled: !!lowestListing?.order
+    }
+  });
+  const currency = currencies?.find(
+    (currency2) => currency2.contractAddress === lowestListing?.order?.priceCurrencyAddress
+  );
+  if (name.length > 15 && highestOffer?.order) {
+    name = name.substring(0, 13) + "...";
+  }
+  if (name.length > 17 && !highestOffer?.order) {
+    name = name.substring(0, 17) + "...";
+  }
+  return /* @__PURE__ */ jsxs22(
+    Box20,
+    {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      padding: "4",
+      whiteSpace: "nowrap",
+      position: "relative",
+      className: accountAddress ? footer.animated : footer.static,
+      children: [
+        /* @__PURE__ */ jsxs22(
+          Box20,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsx30(Text17, { color: "text100", fontSize: "normal", fontWeight: "bold", textAlign: "left", children: name }),
+              highestOffer?.order && onOfferClick && /* @__PURE__ */ jsx30(
+                IconButton6,
+                {
+                  variant: "primary",
+                  className: offerBellButton,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOfferClick?.();
+                  },
+                  icon: Bell_default
+                }
+              )
+            ]
+          }
+        ),
+        lowestListing?.order && currency && /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx30(Image4, { src: currency?.imageUrl, width: "3", height: "3" }),
+          /* @__PURE__ */ jsxs22(Text17, { color: "text100", fontSize: "small", fontWeight: "bold", textAlign: "left", children: [
+            formatUnits4(
+              BigInt(lowestListing.order.priceAmount),
+              currency.decimals
+            ),
+            " "
+          ] })
+        ] }),
+        balance && type !== "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx30(Pill, { text: `Owned: ${balance}` }),
+        type === "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx30(Pill, { text: "ERC-721" })
+      ]
+    }
+  );
+};
+
+// src/react/ui/images/chess-tile.png
+var chess_tile_default = "./chess-tile-6BS5MQT5.png";
+
+// src/react/ui/components/collectible-card/CollectibleCard.tsx
+import { useAccount as useAccount13 } from "wagmi";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+function CollectibleSkeleton() {
+  return /* @__PURE__ */ jsxs23(
+    Box21,
+    {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      alignItems: "center",
+      overflow: "hidden",
+      children: [
+        /* @__PURE__ */ jsx31(
+          Skeleton6,
+          {
+            size: "lg",
+            style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
+          }
+        ),
+        /* @__PURE__ */ jsxs23(
+          Box21,
+          {
+            display: "flex",
+            flexDirection: "column",
+            gap: "2",
+            paddingX: "4",
+            paddingBottom: "4",
+            children: [
+              /* @__PURE__ */ jsx31(Skeleton6, { size: "lg" }),
+              /* @__PURE__ */ jsx31(Skeleton6, { size: "sm" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CollectibleCard({
+  tokenId,
+  chainId,
+  collectionAddress,
+  onCollectibleClick,
+  onOfferClick
+}) {
+  const { data: collectible, isLoading: collectibleLoading } = useCollectible({
+    chainId: String(chainId),
+    collectionAddress,
+    collectibleId: tokenId
+  });
+  const { data: collection } = useCollection({
+    chainId: String(chainId),
+    collectionAddress
+  });
+  if (collectibleLoading || !collectible || !collection) {
+    return /* @__PURE__ */ jsx31(CollectibleSkeleton, {});
+  }
+  return /* @__PURE__ */ jsx31(
+    Box21,
+    {
+      className: collectibleCard,
+      borderRadius: "md",
+      overflow: "hidden",
+      background: "backgroundPrimary",
+      children: /* @__PURE__ */ jsx31(
+        CardWrapper,
+        {
+          name: collectible.name,
+          type: collection.type,
+          imageSrc: collectible.image,
+          tokenId,
+          chainId: String(chainId),
+          collectionAddress,
+          marketplaceSource: collectible.external_url,
+          onCollectibleClick,
+          onOfferClick
+        }
+      )
+    }
+  );
+}
+var CardWrapper = ({
+  name,
+  type,
+  imageSrc,
+  tokenId,
+  chainId,
+  collectionAddress,
+  marketplaceSource,
+  onCollectibleClick,
+  onOfferClick
+}) => {
+  const { address: accountAddress } = useAccount13();
+  const [loadingError, setLoadingError] = useState6(false);
+  return /* @__PURE__ */ jsx31(
+    Box21,
+    {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      position: "relative",
+      width: "full",
+      height: "full",
+      zIndex: "10",
+      overflow: "hidden",
+      onClick: onCollectibleClick,
+      as: "button",
+      border: "none",
+      padding: "0",
+      className: collectibleTileWrapper,
+      children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
+        marketplaceSource && /* @__PURE__ */ jsx31(
+          IconButton7,
+          {
+            as: "a",
+            href: marketplaceSource,
+            size: "sm",
+            backdropFilter: "blur",
+            variant: "glass",
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            position: "absolute",
+            top: "2",
+            left: "2",
+            icon: DiamondEye_default
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          "img",
+          {
+            src: loadingError ? chess_tile_default : imageSrc || chess_tile_default,
+            alt: name,
+            className: collectibleImage,
+            onError: () => setLoadingError(true)
+          }
+        ),
+        /* @__PURE__ */ jsx31(
+          Footer,
+          {
+            name,
+            type,
+            tokenId,
+            chainId,
+            collectionAddress,
+            onOfferClick
+          }
+        ),
+        accountAddress && /* @__PURE__ */ jsx31(
+          Box21,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "2",
+            className: actionWrapper,
+            children: /* @__PURE__ */ jsx31(
+              ActionButton,
+              {
+                chainId: String(chainId),
+                collectionAddress,
+                tokenId
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+
 export {
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal,
-  ModalProvider
+  ModalProvider,
+  CollectibleCard
 };
-//# sourceMappingURL=chunk-MD4JHPMH.js.map
+//# sourceMappingURL=chunk-QXLZPSSR.js.map