@loafmarkets/ui 0.1.326 → 0.1.328

package/dist/index.mjs

@@ -2920,7 +2920,7 @@ var PropertyNewsUpdates = React5.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("flex flex-1 flex-col overflow-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
+              className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
               style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
               children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
                 const maxAmount = 6e4;
@@ -11567,192 +11567,6 @@ var SignInButton = styled9.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
-var slideIn = keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut = keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = keyframes`
-  from { width: 100%; }
-  to   { width: 0%; }
-`;
-var VARIANT_COLORS = {
-  success: { accent: "#0ecb81", icon: "\u2713" },
-  error: { accent: "#f6465d", icon: "\u2715" },
-  sell: { accent: "#f6465d", icon: "\u2713" },
-  info: { accent: "#E6C656", icon: "\u2139" },
-  pending: { accent: "#7EB3E6", icon: "\u25CC" }
-};
-var Wrapper2 = styled9.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 ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled9.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled9.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 = styled9.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title2 = styled9.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled9.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled9.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 = styled9.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled9.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 = styled9.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: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container = styled9.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] = useState(false);
-  const timerRef = useRef(null);
-  const dismiss = useCallback(() => {
-    setExiting(true);
-    setTimeout(() => onDismiss(toast.id), 280);
-  }, [onDismiss, toast.id]);
-  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__ */ jsxs(Wrapper2, { $exiting: exiting, children: [
-    /* @__PURE__ */ jsxs(Body, { children: [
-      /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
-      /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(Title2, { children: toast.title }),
-        toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
-        toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
-          truncateHash(toast.txHash),
-          /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
-    ] }),
-    duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
-  ] });
-}
-var ToastContext = createContext(null);
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState([]);
-  const addToast = useCallback((data) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-    setToasts((prev) => [...prev, { ...data, id }]);
-    return id;
-  }, []);
-  const dismiss = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
-    children,
-    /* @__PURE__ */ jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
-  ] });
-}
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
-  return ctx;
-}
 function AssetSelectorBar({
   propertyName,
   tokenPrice,
@@ -12040,11 +11854,11 @@ var IPOOptionLocation = styled9.div`
     font-weight: 500;
   }
 `;
-var slideOut2 = keyframes`
+var slideOut = keyframes`
   0% { transform: translateY(0); opacity: 1; }
   100% { transform: translateY(100%); opacity: 0; }
 `;
-var slideIn2 = keyframes`
+var slideIn = keyframes`
   0% { transform: translateY(-100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
 `;
@@ -12057,13 +11871,13 @@ var SlideWrap = styled9.span`
 `;
 var SlideNew = styled9.span`
   display: inline-block;
-  animation: ${(props) => props.$animate ? slideIn2 : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${(props) => props.$animate ? slideIn : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 `;
 var SlideOld = styled9.span`
   position: absolute;
   top: 0;
   left: 0;
-  animation: ${slideOut2} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${slideOut} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 `;
 function SlideDigit({ value }) {
   const prevRef = useRef(value);
@@ -12155,7 +11969,7 @@ function OfferingProgressCard({
   }
   if (variant === "home") {
     const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
-    return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
+    return /* @__PURE__ */ jsxs(Container, { style, className, children: [
       /* @__PURE__ */ jsxs(Header2, { children: [
         /* @__PURE__ */ jsxs("h3", { children: [
           /* @__PURE__ */ jsx(FaChartLine, {}),
@@ -12237,7 +12051,7 @@ function OfferingProgressCard({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
+  return /* @__PURE__ */ jsxs(Container, { style, className, children: [
     /* @__PURE__ */ jsxs(Header2, { children: [
       /* @__PURE__ */ jsxs("h3", { children: [
         /* @__PURE__ */ jsx(FaChartLine, {}),
@@ -12338,7 +12152,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container2 = styled9.div`
+var Container = styled9.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -14140,7 +13954,7 @@ function PortfolioActivityPanel({
   const handleTabChange = (tab) => {
     setActiveTab(tab);
   };
-  return /* @__PURE__ */ jsxs(Container3, { className, style, children: [
+  return /* @__PURE__ */ jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxs(TabContainer, { children: [
       showPositionsTab && /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: [
@@ -14323,11 +14137,11 @@ function PortfolioActivityPanel({
                 ] })
               ] }),
               onClosePosition && /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsxs(CloseActions, { children: [
-                /* @__PURE__ */ jsx(CloseBtn2, { onClick: (e) => {
+                /* @__PURE__ */ jsx(CloseBtn, { onClick: (e) => {
                   e.stopPropagation();
                   onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice);
                 }, children: "Market Sell" }),
-                /* @__PURE__ */ jsx(CloseBtn2, { onClick: (e) => {
+                /* @__PURE__ */ jsx(CloseBtn, { onClick: (e) => {
                   e.stopPropagation();
                   onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice);
                 }, children: "Limit Sell" })
@@ -14564,7 +14378,7 @@ function PortfolioActivityPanel({
     ] }) })
   ] });
 }
-var Container3 = styled9.div`
+var Container2 = styled9.div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -14988,7 +14802,7 @@ var CloseActions = styled9.div`
   gap: 0.35rem;
   align-items: center;
 `;
-var CloseBtn2 = styled9.button`
+var CloseBtn = styled9.button`
   background: transparent;
   border: 1px solid rgba(230, 200, 126, 0.25);
   border-radius: 4px;
@@ -15342,9 +15156,9 @@ function PropertyBuy({
   onVerifyIdentity,
   portfolioActivity,
   newsItems = [],
-  newsConnectionStatus
+  newsConnectionStatus,
+  toast
 }) {
-  const { toast } = useToast();
   const [sliderValue, setSliderValue] = useState(0);
   const [availableBalance, setAvailableBalance] = useState(walletUsdcBalance ?? 0);
   const [manualOrderAmount, setManualOrderAmount] = useState(null);
@@ -18244,6 +18058,192 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
     }
   );
 }
+var slideIn2 = keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut2 = keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  sell: { accent: "#f6465d", icon: "\u2713" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper2 = styled9.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 ? css`${slideOut2} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn2} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled9.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled9.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 = styled9.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title2 = styled9.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled9.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled9.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 = styled9.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn2 = styled9.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 = styled9.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: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container3 = styled9.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] = useState(false);
+  const timerRef = useRef(null);
+  const dismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  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__ */ jsxs(Wrapper2, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxs(Body, { children: [
+      /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsx(Title2, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CloseBtn2, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const addToast = useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsx(Container3, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 var INTERVALS = [1e3, 2e3, 4e3, 5e3, 7e3, 1e4, 12e3];
 function useAdaptivePolling({ enabled, onPoll }) {
   const onPollRef = useRef(onPoll);