@loafmarkets/ui 0.1.324 → 0.1.326

package/dist/index.js

@@ -6911,7 +6911,7 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 10H18a2 2 0 0 0 0 4h4" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Digital Asset Deposit" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening\u2026" : "Digital Asset Deposit" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit USDC from an exchange or wallet" })
                 ] })
               ] }),
@@ -11593,6 +11593,192 @@ var SignInButton = styled9__default.default.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
+var slideIn = styled9.keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = styled9.keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = styled9.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__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 ? styled9.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled9.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled9__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled9__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 = styled9__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title2 = styled9__default.default.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled9__default.default.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled9__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 = styled9__default.default.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled9__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 = styled9__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: ${styled9.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container = styled9__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(Wrapper2, { $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,
@@ -11880,11 +12066,11 @@ var IPOOptionLocation = styled9__default.default.div`
     font-weight: 500;
   }
 `;
-var slideOut = styled9.keyframes`
+var slideOut2 = styled9.keyframes`
   0% { transform: translateY(0); opacity: 1; }
   100% { transform: translateY(100%); opacity: 0; }
 `;
-var slideIn = styled9.keyframes`
+var slideIn2 = styled9.keyframes`
   0% { transform: translateY(-100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
 `;
@@ -11897,13 +12083,13 @@ var SlideWrap = styled9__default.default.span`
 `;
 var SlideNew = styled9__default.default.span`
   display: inline-block;
-  animation: ${(props) => props.$animate ? slideIn : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${(props) => props.$animate ? slideIn2 : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 `;
 var SlideOld = styled9__default.default.span`
   position: absolute;
   top: 0;
   left: 0;
-  animation: ${slideOut} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${slideOut2} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 `;
 function SlideDigit({ value }) {
   const prevRef = React5.useRef(value);
@@ -11995,7 +12181,7 @@ function OfferingProgressCard({
   }
   if (variant === "home") {
     const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { style, className, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
@@ -12077,7 +12263,7 @@ function OfferingProgressCard({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { style, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
@@ -12178,7 +12364,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container = styled9__default.default.div`
+var Container2 = styled9__default.default.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -12431,192 +12617,6 @@ var HomeSpinner = styled9__default.default.span`
     to { transform: rotate(360deg); }
   }
 `;
-var slideIn2 = styled9.keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut2 = styled9.keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = styled9.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__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 ? styled9.css`${slideOut2} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled9.css`${slideIn2} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled9__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled9__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 = styled9__default.default.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title2 = styled9__default.default.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled9__default.default.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled9__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 = styled9__default.default.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled9__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 = styled9__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: ${styled9.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container2 = styled9__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(Wrapper2, { $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 useCountdown(opensAt) {
   const [now, setNow] = React5.useState(() => Math.floor(Date.now() / 1e3));
   React5.useEffect(() => {
@@ -12665,9 +12665,9 @@ function OrderPanel({
   onDeposit,
   onVerifyIdentity,
   tokenDisplayName,
-  tokenSymbol
+  tokenSymbol,
+  toast
 }) {
-  const { toast } = useToast();
   const countdown = useCountdown(opensAt);
   const [payInputValue, setPayInputValue] = React5.useState("");
   const [receiveInputValue, setReceiveInputValue] = React5.useState("");
@@ -15370,6 +15370,7 @@ function PropertyBuy({
   newsItems = [],
   newsConnectionStatus
 }) {
+  const { toast } = useToast();
   const [sliderValue, setSliderValue] = React5.useState(0);
   const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
   const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
@@ -15603,7 +15604,8 @@ function PropertyBuy({
             hasInsufficientFunds,
             onPlaceAnotherOrder: handlePlaceAnotherOrder,
             onDeposit,
-            onVerifyIdentity
+            onVerifyIdentity,
+            toast
           }
         ),
         purchaseError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.75rem", padding: "0.75rem 1rem", borderRadius: "8px", background: "rgba(246,70,93,0.1)", border: "1px solid rgba(246,70,93,0.3)", color: "#f6465d", fontSize: "0.8rem", fontWeight: 500 }, children: purchaseError })