@loafmarkets/ui 0.1.56 → 0.1.58

package/dist/index.js

@@ -9416,191 +9416,6 @@ var SignInButton = styled25__default.default.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
-var slideIn = styled25.keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut = styled25.keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = styled25.keyframes`
-  from { width: 100%; }
-  to   { width: 0%; }
-`;
-var VARIANT_COLORS = {
-  success: { accent: "#0ecb81", icon: "\u2713" },
-  error: { accent: "#f6465d", icon: "\u2715" },
-  info: { accent: "#E6C656", icon: "\u2139" },
-  pending: { accent: "#7EB3E6", icon: "\u25CC" }
-};
-var Wrapper = styled25__default.default.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 340px;
-  background: #0d0f1a;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
-  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled25__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled25__default.default.div`
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: ${({ $color }) => $color}1a;
-  border: 1px solid ${({ $color }) => $color}55;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: ${({ $color }) => $color};
-  margin-top: 1px;
-`;
-var Content = styled25__default.default.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title2 = styled25__default.default.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled25__default.default.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled25__default.default.a`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
-  font-size: 0.68rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.15s;
-  &:hover {
-    color: #7EB3E6;
-  }
-`;
-var TxArrow = styled25__default.default.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled25__default.default.button`
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  padding: 2px 4px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 0.9rem;
-  line-height: 1;
-  transition: color 0.15s;
-  &:hover { color: rgba(255, 255, 255, 0.7); }
-`;
-var ProgressBar = styled25__default.default.div`
-  height: 2px;
-  background: rgba(255, 255, 255, 0.06);
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: ${({ $color }) => $color};
-    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container = styled25__default.default.div`
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 10px;
-  pointer-events: none;
-`;
-var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
-function truncateHash(hash) {
-  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
-}
-function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = React5.useState(false);
-  const timerRef = React5.useRef(null);
-  const dismiss = React5.useCallback(() => {
-    setExiting(true);
-    setTimeout(() => onDismiss(toast.id), 280);
-  }, [onDismiss, toast.id]);
-  React5.useEffect(() => {
-    const duration2 = toast.duration ?? 6e3;
-    if (duration2 > 0) {
-      timerRef.current = setTimeout(dismiss, duration2);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [dismiss, toast.duration]);
-  const { accent, icon } = VARIANT_COLORS[toast.variant];
-  const duration = toast.duration ?? 6e3;
-  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
-  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
-        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
-        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
-          truncateHash(toast.txHash),
-          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
-    ] }),
-    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
-  ] });
-}
-var ToastContext = React5.createContext(null);
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = React5.useState([]);
-  const addToast = React5.useCallback((data) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-    setToasts((prev) => [...prev, { ...data, id }]);
-    return id;
-  }, []);
-  const dismiss = React5.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
-  ] });
-}
-function useToast() {
-  const ctx = React5.useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
-  return ctx;
-}
 function AssetSelectorBar({
   propertyName,
   tokenPrice,
@@ -9907,7 +9722,7 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
@@ -10008,7 +9823,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container2 = styled25__default.default.div`
+var Container = styled25__default.default.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -10544,6 +10359,191 @@ var LiveIndicatorDot = styled25__default.default.span`
     100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
   }
 `;
+var slideIn = styled25.keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = styled25.keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = styled25.keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled25__default.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled25__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled25__default.default.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled25__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title2 = styled25__default.default.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled25__default.default.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled25__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
+`;
+var TxArrow = styled25__default.default.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled25__default.default.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar = styled25__default.default.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: ${({ $color }) => $color};
+    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container2 = styled25__default.default.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = React5.useState(false);
+  const timerRef = React5.useRef(null);
+  const dismiss = React5.useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  React5.useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = React5.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React5.useState([]);
+  const addToast = React5.useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = React5.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = React5.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 function OrderPanel({
   statusLabel,
   statusColor,
@@ -10576,6 +10576,7 @@ function OrderPanel({
   tokenDisplayName,
   tokenSymbol
 }) {
+  const { toast } = useToast();
   const [payInputValue, setPayInputValue] = React5.useState("");
   const [receiveInputValue, setReceiveInputValue] = React5.useState("");
   const [isPayInputFocused, setIsPayInputFocused] = React5.useState(false);
@@ -10586,6 +10587,14 @@ function OrderPanel({
     if (parsed <= 0) {
       setManualOrderAmount(null);
       setSliderValue(0);
+    } else if (parsed < tokenPrice) {
+      toast({
+        variant: "error",
+        title: "Amount too low",
+        amount: `Minimum purchase is 1 token ($${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})`
+      });
+      setManualOrderAmount(null);
+      setSliderValue(0);
     } else if (parsed >= availableBalance) {
       setManualOrderAmount(null);
       setSliderValue(100);
@@ -10709,6 +10718,17 @@ function OrderPanel({
                 const v = e.target.value;
                 if (v === "" || /^\d*\.?\d{0,2}$/.test(v)) {
                   setPayInputValue(v);
+                  const parsed = parseInt(v.replace(/[^0-9]/g, ""), 10) || 0;
+                  if (parsed <= 0) {
+                    setManualOrderAmount(null);
+                    setSliderValue(0);
+                  } else if (parsed >= availableBalance) {
+                    setManualOrderAmount(null);
+                    setSliderValue(100);
+                  } else {
+                    setManualOrderAmount(parsed);
+                    setSliderValue(availableBalance === 0 ? 0 : Math.round(Math.max(0, parsed / availableBalance * 100)));
+                  }
                 }
               },
               onKeyDown: (e) => {
@@ -10780,6 +10800,18 @@ function OrderPanel({
                 const v = e.target.value;
                 if (v === "" || /^\d+$/.test(v)) {
                   setReceiveInputValue(v);
+                  const units = Math.floor(parseInt(v.replace(/[^0-9]/g, ""), 10) || 0);
+                  const spend = units * tokenPrice;
+                  if (units <= 0) {
+                    setManualOrderAmount(null);
+                    setSliderValue(0);
+                  } else if (spend >= availableBalance) {
+                    setManualOrderAmount(null);
+                    setSliderValue(100);
+                  } else {
+                    setManualOrderAmount(spend);
+                    setSliderValue(availableBalance === 0 ? 0 : Math.round(Math.max(0, spend / availableBalance * 100)));
+                  }
                 }
               },
               onKeyDown: (e) => {
@@ -12582,7 +12614,6 @@ function PropertyBuy({
   onSelectorSelect,
   portfolioActivity
 }) {
-  const { toast } = useToast();
   const [sliderValue, setSliderValue] = React5.useState(0);
   const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
   const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
@@ -12635,13 +12666,6 @@ function PropertyBuy({
   }, [walletPropertyTokenBalance]);
   const handleOrderButtonClick = () => {
     if (!ipoStarted || tokenQuantity === 0) {
-      if (rawSpend > 0 && tokenQuantity === 0) {
-        toast({
-          variant: "error",
-          title: "Amount too low",
-          amount: `Minimum purchase is 1 token ($${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })})`
-        });
-      }
       return;
     }
     setShowOrderConfirmModal(true);