@0xsequence/marketplace-sdk 0.3.6 → 0.3.7

package/dist/{chunk-F42XMKDS.js → chunk-3LGNSRBR.js}

@@ -31,7 +31,7 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-RZSZNVEH.js";
+} from "./chunk-L6GSYPCR.js";
 import {
   AlertMessage,
   switchChainModal_default,
@@ -48,7 +48,7 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-Z3VR2KMP.js";
+} from "./chunk-QGELCUYG.js";
 import {
   iconVariants
 } from "./chunk-SBVLWSRZ.js";
@@ -362,11 +362,11 @@ var ERC1155QuantityModal = observer2(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs3(Box3, { display: "flex", flexDirection: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxs3(Box3, { display: "flex", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx3(Text2, { color: "text50", fontSize: "small", children: "Total Price" }),
             /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", gap: "2", children: [
               /* @__PURE__ */ jsx3(TokenImage, { src: currency?.imageUrl, size: "xs" }),
-              /* @__PURE__ */ jsx3(Text2, { color: "text", fontSize: "large", fontWeight: "bold", children: formatUnits(BigInt(totalPrice), currency?.decimals || 0) })
+              /* @__PURE__ */ jsx3(Text2, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits(BigInt(totalPrice), currency?.decimals || 0) })
             ] })
           ] })
         ] })
@@ -437,7 +437,7 @@ var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx5(ActionMod
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { useState as useState2 } from "react";
-import { Box as Box6, Text as Text3 } from "@0xsequence/design-system";
+import { Box as Box6, Skeleton, Text as Text3 } from "@0xsequence/design-system";
 import { observer as observer3 } from "@legendapp/state/react";
 import { addDays, isSameDay } from "date-fns";
 
@@ -462,13 +462,13 @@ var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) =
 });
 var CustomSelect = ({
   items,
-  placeholder = "Select an item...",
+  value,
   onValueChange,
   defaultValue
 }) => {
   return /* @__PURE__ */ jsxs4(Select.Root, { onValueChange, defaultValue, children: [
-    /* @__PURE__ */ jsxs4(Select.Trigger, { className: trigger, children: [
-      /* @__PURE__ */ jsx6(Select.Value, { placeholder }),
+    /* @__PURE__ */ jsxs4(Select.Trigger, { className: trigger, value, children: [
+      /* @__PURE__ */ jsx6(Select.Value, {}),
       /* @__PURE__ */ jsx6(Select.Icon, { children: /* @__PURE__ */ jsx6(ChevronDownIcon, { size: "xs" }) })
     ] }),
     /* @__PURE__ */ jsx6(Select.Portal, { children: /* @__PURE__ */ jsx6(Select.Content, { className: content, children: /* @__PURE__ */ jsx6(Select.Viewport, { children: items.map((item2, index) => /* @__PURE__ */ jsx6(
@@ -602,11 +602,12 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   className,
   $date
 }) {
-  const [_, setRange] = useState2("1_week");
-  function handleSelectPresetRange(range) {
-    setRange(range);
+  const defaultRange = "1_week";
+  const [range, setRange] = useState2(defaultRange);
+  function handleSelectPresetRange(range2) {
+    setRange(range2);
     const presetRange = Object.values(PRESET_RANGES).find(
-      (preset) => preset.value === range
+      (preset) => preset.value === range2
     );
     if (!presetRange) {
       return;
@@ -623,6 +624,9 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
     }
     $date.set(date);
   }
+  if (!$date.get()) {
+    return /* @__PURE__ */ jsx9(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+  }
   return /* @__PURE__ */ jsxs6(Box6, { width: "full", position: "relative", children: [
     /* @__PURE__ */ jsx9(
       Text3,
@@ -660,19 +664,9 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
                     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
+                  value: range,
+                  defaultValue: defaultRange,
+                  onValueChange: (value) => handleSelectPresetRange(value)
                 }
               )
             }
@@ -740,40 +734,49 @@ import { erc20Abi, parseUnits as parseUnits2 } from "viem";
 import { useAccount as useAccount2, useReadContract } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
-import { Skeleton } from "@0xsequence/design-system";
+import { Skeleton as Skeleton2 } from "@0xsequence/design-system";
 import { observer as observer4 } from "@legendapp/state/react";
 import { useEffect as useEffect2 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
-  $selectedCurrency
+  selectedCurrency$
 }) {
+  const currency = selectedCurrency$.get();
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     collectionAddress,
     chainId
   });
   useEffect2(() => {
-    if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
-      $selectedCurrency.set(currencies[0]);
+    if (currencies && currencies.length > 0 && !selectedCurrency$.contractAddress.get()) {
+      selectedCurrency$.set(currencies[0]);
     }
   }, [currencies]);
-  if (!currencies || currenciesLoading) {
-    return /* @__PURE__ */ jsx11(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+  if (!currencies || currenciesLoading || !currency.symbol) {
+    return /* @__PURE__ */ jsx11(Skeleton2, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
   const options = currencies.map(
-    (currency) => ({
-      label: currency.symbol,
-      value: currency.contractAddress
+    (currency2) => ({
+      label: currency2.symbol,
+      value: currency2.contractAddress
     })
   );
   const onChange = (value) => {
     const c = currencies.find(
-      (currency) => currency.contractAddress === value
+      (currency2) => currency2.contractAddress === value
     );
-    $selectedCurrency.set(c);
+    selectedCurrency$.set(c);
   };
-  return /* @__PURE__ */ jsx11(CustomSelect, { items: options, onValueChange: onChange, placeholder: "" });
+  console.log("currency", currency);
+  return /* @__PURE__ */ jsx11(
+    CustomSelect,
+    {
+      items: options,
+      value: currency.symbol,
+      onValueChange: onChange
+    }
+  );
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
@@ -837,7 +840,7 @@ var PriceInput = observer5(function PriceInput2({
         controls: /* @__PURE__ */ jsx12(
           currencyOptionsSelect_default,
           {
-            $selectedCurrency: $listingPrice?.currency,
+            selectedCurrency$: $listingPrice?.currency,
             collectionAddress,
             chainId
           }
@@ -853,7 +856,7 @@ var PriceInput = observer5(function PriceInput2({
 var priceInput_default = PriceInput;
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box8, Image, Skeleton as Skeleton2, Text as Text5 } from "@0xsequence/design-system";
+import { Box as Box8, Image, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
 
 // src/react/ui/images/chess-tile.png
 var chess_tile_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACuCAYAAABAzl3QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgB7dyxbUMxEAXBs6FEjagv91/AD+keeNFCMw1csmBEvJ/P53Nm4Xme2Xi/37Ph/nfeP+f8/Q5EiZcs8ZIlXrLES5Z4yRIvWeIlS7xkiZcs8ZIlXrLES5Z4yRIvWS//Ud2v3vfykiVessRLlnjJEi9Z4iVLvGSJlyzxkiVessRLlnjJEi9Z4iVLvGS9/Ed1v3j/nOPlpUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMmyz+v+bNjnhQviJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWfV73Z8M+L1wQL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y7PO6Pxv2eeGCeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSZZ/X/dmwzwsXxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPu87s+GfV64IF6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZNnndX827PPCBfGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJcs+r/uzYZ8XLoiXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1n2ed2fDfu8cEG8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y/gF97MkwfJRH7QAAAABJRU5ErkJggg==";
@@ -873,10 +876,10 @@ function TokenPreview({
   });
   if (collectibleLoading) {
     return /* @__PURE__ */ jsxs8(Box8, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx13(Skeleton2, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsx13(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
       /* @__PURE__ */ jsxs8(Box8, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx13(Skeleton2, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx13(Skeleton2, { width: "1/2", height: "3" })
+        /* @__PURE__ */ jsx13(Skeleton3, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx13(Skeleton3, { width: "1/2", height: "3" })
       ] })
     ] });
   }
@@ -917,7 +920,7 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box9, Image as Image2, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
+import { Box as Box9, Image as Image2, Skeleton as Skeleton4, Text as Text6 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits2 } from "viem";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
@@ -956,7 +959,7 @@ function TransactionDetails({
         /* @__PURE__ */ jsx14(Text6, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
         /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", gap: "2", children: [
           /* @__PURE__ */ jsx14(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx14(Skeleton3, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text6, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+          priceLoading ? /* @__PURE__ */ jsx14(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text6, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             formattedAmount,
             " ",
             price.currency.symbol
@@ -971,7 +974,7 @@ function TransactionDetails({
 import {
   CloseIcon,
   IconButton as IconButton2,
-  Skeleton as Skeleton5,
+  Skeleton as Skeleton6,
   Text as Text10
 } from "@0xsequence/design-system";
 import { observer as observer7 } from "@legendapp/state/react";
@@ -1039,7 +1042,7 @@ import {
   Box as Box12,
   Image as Image3,
   NetworkImage,
-  Skeleton as Skeleton4,
+  Skeleton as Skeleton5,
   Text as Text9
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
@@ -1202,7 +1205,7 @@ var TransactionPreview = observer6(
     const collectionName = collection?.name;
     const priceFormatted = price ? formatUnits3(BigInt(price.amountRaw), price.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
-      return /* @__PURE__ */ jsx17(Box12, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton4, { style: { width: "100%", height: "100%" } }) });
+      return /* @__PURE__ */ jsx17(Box12, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton5, { style: { width: "100%", height: "100%" } }) });
     }
     return /* @__PURE__ */ jsxs11(Box12, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
       /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", children: [
@@ -1435,8 +1438,8 @@ var TransactionStatusModal = observer7(() => {
           fontFamily: "body",
           children: title
         }
-      ) : /* @__PURE__ */ jsx18(Skeleton5, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton5, { width: "20", height: "4" }),
+      ) : /* @__PURE__ */ jsx18(Skeleton6, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton6, { width: "20", height: "4" }),
       /* @__PURE__ */ jsx18(
         transactionPreview_default,
         {
@@ -2017,7 +2020,7 @@ var useSell = ({
 };
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box14, Image as Image4, Skeleton as Skeleton6, Text as Text11 } from "@0xsequence/design-system";
+import { Box as Box14, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function TransactionHeader({
@@ -2051,7 +2054,7 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx21(Skeleton6, { width: "8", height: "4" })
+    ) || /* @__PURE__ */ jsx21(Skeleton7, { width: "8", height: "4" })
   ] });
 }
 
@@ -2761,7 +2764,7 @@ var ModalProvider = observer14(() => {
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { useState as useState9 } from "react";
-import { Box as Box21, IconButton as IconButton6, Skeleton as Skeleton7 } from "@0xsequence/design-system";
+import { Box as Box21, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
@@ -3075,7 +3078,7 @@ function CollectibleSkeleton() {
       background: "backgroundPrimary",
       children: [
         /* @__PURE__ */ jsx32(
-          Skeleton7,
+          Skeleton8,
           {
             size: "lg",
             style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
@@ -3091,8 +3094,8 @@ function CollectibleSkeleton() {
             paddingBottom: "4",
             marginTop: "2",
             children: [
-              /* @__PURE__ */ jsx32(Skeleton7, { size: "lg" }),
-              /* @__PURE__ */ jsx32(Skeleton7, { size: "sm" })
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "lg" }),
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "sm" })
             ]
           }
         )
@@ -3232,4 +3235,4 @@ export {
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-F42XMKDS.js.map
+//# sourceMappingURL=chunk-3LGNSRBR.js.map