@loafmarkets/ui 0.1.40 → 0.1.42

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React5 from 'react';
-import React5__default, { createContext, useState, useEffect, useMemo, useRef, useCallback, useContext } from 'react';
+import React5__default, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -1984,7 +1984,7 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "divide-y divide-white/5 overflow-y-auto",
+            className: "flex flex-col justify-end divide-y divide-white/5 overflow-y-auto",
             style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
             children: asks.map((l, idx) => /* @__PURE__ */ jsx(
               DepthRow,
@@ -4850,8 +4850,9 @@ var Header = ({
   const portfolioActive = resolvedActiveTab === "portfolio";
   const learnActive = resolvedActiveTab === "learn";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+    /* @__PURE__ */ jsxs(HeaderContainer, { id: "loaf-header", children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs(Logo, { children: [
           /* @__PURE__ */ jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5089,6 +5090,7 @@ var Header = ({
         )
       ] })
     ] }),
+    /* @__PURE__ */ jsx(HeaderSpacer, {}),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(
       LoginPopupComponent,
       {
@@ -5099,6 +5101,17 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
+var SafeAreaCover = styled24.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: env(safe-area-inset-top, 0px);
+  min-height: env(safe-area-inset-top, 0px);
+  background-color: #0d1117;
+  z-index: 1001;
+  pointer-events: none;
+`;
 var Overlay = styled24.div`
   display: ${(props) => props.$isOpen ? "block" : "none"};
   position: fixed;
@@ -5145,22 +5158,34 @@ var HeaderContainer = styled24.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  /* Split padding so browsers that don't support env() inside shorthand
+     still get the horizontal padding — only the top falls back to 0 */
   padding: 0 2rem;
+  padding-top: env(safe-area-inset-top, 0px);
   background-color: #0d1117;
   border-bottom: 1px solid #232a32;
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   width: 100%;
-  height: 56px;
+  /* Fallback min-height for browsers that can't evaluate calc+env */
+  min-height: 56px;
+  min-height: calc(56px + env(safe-area-inset-top, 0px));
   box-sizing: border-box;
 
   @media (max-width: 768px) {
     padding: 0 1rem;
+    padding-top: env(safe-area-inset-top, 0px);
   }
 `;
+var HeaderSpacer = styled24.div`
+  width: 100%;
+  min-height: 56px;
+  min-height: calc(56px + env(safe-area-inset-top, 0px));
+  flex-shrink: 0;
+`;
 var Logo = styled24.div`
   display: flex;
   align-items: center;
@@ -5213,10 +5238,12 @@ var Nav = styled24.nav`
   @media (max-width: 1300px) {
     position: fixed;
     top: 56px;
+    top: calc(56px + env(safe-area-inset-top, 0px));
     right: ${(props) => props.$isOpen ? "0" : "-100%"} ;
     width: 280px;
     max-width: 280px;
     height: calc(100vh - 56px);
+    height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
     background: linear-gradient(180deg, #0f1419 0%, #0a0e13 100%);
     z-index: 1000;
     transition: right 0.3s ease;
@@ -9756,6 +9783,7 @@ function OrderPanel({
   displayedOwnedTokens,
   ownedTokensJustUpdated,
   lastOrderQuantity,
+  orderPendingAllocation,
   orderPlacedSuccess,
   lastOrderDetails,
   tokenQuantity,
@@ -9818,7 +9846,40 @@ function OrderPanel({
         statusLabel
       ] })
     ] }),
-    orderPlacedSuccess ? /* @__PURE__ */ jsxs(OrderSuccessCard, { children: [
+    orderPendingAllocation ? /* @__PURE__ */ jsxs(OrderPendingCard, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "pending-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "spinner" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { children: "Processing Order" }),
+          /* @__PURE__ */ jsx("small", { children: "Awaiting allocation..." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pending-body", children: [
+        [
+          { label: "Units Requested", value: /* @__PURE__ */ jsxs(Fragment, { children: [
+            lastOrderDetails?.tokens?.toFixed(2) || "0.00",
+            " ",
+            /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400 }, children: tokenSymbol })
+          ] }) },
+          { label: "Price Per Unit", value: `$${tokenPrice.toFixed(2)}` },
+          {
+            label: `${tokenDisplayName} Exposure`,
+            value: `${((lastOrderDetails?.tokens ?? 0) / supplyToSell * 100).toFixed(3)}%`
+          }
+        ].map((row) => /* @__PURE__ */ jsxs("div", { className: "pending-row", children: [
+          /* @__PURE__ */ jsx("span", { children: row.label }),
+          /* @__PURE__ */ jsx("strong", { children: row.value })
+        ] }, row.label)),
+        /* @__PURE__ */ jsxs("div", { className: "pending-total", children: [
+          /* @__PURE__ */ jsx("span", { children: "Total Investment" }),
+          /* @__PURE__ */ jsxs("strong", { children: [
+            "$",
+            lastOrderDetails?.total?.toLocaleString() || "0"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "pending-footnote", children: "Your order has been submitted and is being processed. This usually takes a few seconds." })
+    ] }) : orderPlacedSuccess ? /* @__PURE__ */ jsxs(OrderSuccessCard, { children: [
       /* @__PURE__ */ jsxs("div", { className: "success-header", children: [
         /* @__PURE__ */ jsx("div", { className: "icon", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
         /* @__PURE__ */ jsxs("div", { children: [
@@ -9997,7 +10058,7 @@ function OrderPanel({
         ] })
       ] })
     ] }),
-    !orderPlacedSuccess && /* @__PURE__ */ jsx(
+    !orderPlacedSuccess && !orderPendingAllocation && /* @__PURE__ */ jsx(
       SubscribeButton,
       {
         type: "button",
@@ -10320,6 +10381,110 @@ var BalanceSub = styled24.div`
   color: var(--color-text-secondary);
   margin-top: 0.25rem;
 `;
+var OrderPendingCard = styled24.div`
+  margin-bottom: 1.5rem;
+  background: linear-gradient(180deg, rgba(25,27,31,0.95) 0%, rgba(18,20,24,0.98) 100%);
+  border: 1px solid rgba(212,175,55,0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+
+  .pending-header {
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    background: linear-gradient(135deg, rgba(212,175,55,0.04) 0%, transparent 100%);
+
+    .spinner {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: 2.5px solid rgba(212,175,55,0.15);
+      border-top-color: #D4AF37;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+
+    p {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: #fff;
+      margin: 0;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    small {
+      font-size: 0.7rem;
+      color: rgba(255,255,255,0.4);
+    }
+  }
+
+  .pending-body {
+    padding: 1.25rem 1.5rem;
+  }
+  .pending-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0.875rem;
+    margin-bottom: 0.875rem;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    span {
+      font-size: 0.75rem;
+      color: rgba(255,255,255,0.4);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 500;
+    }
+    strong {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: rgba(255,255,255,0.5);
+      font-family: monospace;
+    }
+  }
+  .pending-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.875rem;
+    background: rgba(212,175,55,0.03);
+    border-radius: 8px;
+    border: 1px solid rgba(212,175,55,0.06);
+    span {
+      font-size: 0.75rem;
+      color: rgba(255,255,255,0.5);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 500;
+    }
+    strong {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: rgba(212,175,55,0.7);
+      font-family: monospace;
+    }
+  }
+  .pending-footnote {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid rgba(255,255,255,0.06);
+    background: rgba(0,0,0,0.2);
+    font-size: 0.75rem;
+    color: rgba(255,255,255,0.4);
+    line-height: 1.6;
+    animation: pulse 2s ease-in-out infinite;
+  }
+`;
 var OrderSuccessCard = styled24.div`
   margin-bottom: 1.5rem;
   background: linear-gradient(180deg, rgba(25,27,31,0.95) 0%, rgba(18,20,24,0.98) 100%);
@@ -11175,6 +11340,7 @@ function OrderConfirmationModal({
   tokenQuantity,
   tokenPrice,
   propertyName,
+  tokenSymbol,
   estExposure,
   orderTotal,
   availableBalance,
@@ -11189,7 +11355,7 @@ function OrderConfirmationModal({
     /* @__PURE__ */ jsx(ModalBody, { children: [
       { label: "Order Type", value: "Primary Offering" },
       { label: "Property", value: propertyName },
-      { label: "Units", value: `${tokenQuantity.toLocaleString()} MUS`, highlight: true },
+      { label: "Units", value: `${tokenQuantity.toLocaleString()} ${tokenSymbol}`, highlight: true },
       {
         label: "Unit Price",
         value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
@@ -11220,7 +11386,9 @@ function OrderConfirmationModal({
       "Your order for ",
       /* @__PURE__ */ jsxs("strong", { children: [
         tokenQuantity.toLocaleString(),
-        " MUS units"
+        " ",
+        tokenSymbol,
+        " units"
       ] }),
       " in the",
       " ",
@@ -11449,6 +11617,7 @@ function PropertyBuy({
   const [displayedOwnedTokens, setDisplayedOwnedTokens] = useState(0);
   const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = useState(false);
   const [lastOrderQuantity, setLastOrderQuantity] = useState(0);
+  const [orderPendingAllocation, setOrderPendingAllocation] = useState(false);
   const [orderPlacedSuccess, setOrderPlacedSuccess] = useState(false);
   const [lastOrderDetails, setLastOrderDetails] = useState(null);
   const [showOrderConfirmModal, setShowOrderConfirmModal] = useState(false);
@@ -11496,12 +11665,23 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
-  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing";
+  useEffect(() => {
+    if (purchaseStatus === "success" && orderPendingAllocation) {
+      setOrderPendingAllocation(false);
+      setOrderPlacedSuccess(true);
+    }
+  }, [purchaseStatus, orderPendingAllocation]);
+  const handlePlaceAnotherOrder = useCallback(() => {
+    setOrderPlacedSuccess(false);
+    setOrderPendingAllocation(false);
+  }, []);
+  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing" || purchaseStatus === "pending-allocation";
   const getOrderButtonText = () => {
     if (!isAuthenticated) return "Sign In to Invest";
     if (purchaseStatus === "checking-allowance") return "Checking allowance\u2026";
     if (purchaseStatus === "approving") return "Approving USDC\u2026";
     if (purchaseStatus === "purchasing") return "Confirming purchase\u2026";
+    if (purchaseStatus === "pending-allocation") return "Awaiting allocation\u2026";
     if (ipoStatus === "PENDING" && !isPrivateClient) return "Sale Not Open Yet";
     if (ipoStatus === "CLOSED") return "Sale Completed";
     if (ipoStatus === "CANCELLED") return "Sale Cancelled";
@@ -11544,7 +11724,7 @@ function PropertyBuy({
       total: orderTotal,
       price: tokenPrice
     });
-    setOrderPlacedSuccess(true);
+    setOrderPendingAllocation(true);
     setSliderValue(0);
     setManualOrderAmount(null);
   };
@@ -11630,6 +11810,7 @@ function PropertyBuy({
             displayedOwnedTokens,
             ownedTokensJustUpdated,
             lastOrderQuantity,
+            orderPendingAllocation,
             orderPlacedSuccess,
             lastOrderDetails,
             tokenQuantity,
@@ -11644,7 +11825,7 @@ function PropertyBuy({
             orderButtonText: getOrderButtonText(),
             isOrderButtonDisabled: isOrderButtonDisabled(),
             hasInsufficientFunds,
-            onPlaceAnotherOrder: () => setOrderPlacedSuccess(false),
+            onPlaceAnotherOrder: handlePlaceAnotherOrder,
             onDeposit
           }
         ),
@@ -11678,6 +11859,7 @@ function PropertyBuy({
         tokenQuantity,
         tokenPrice,
         propertyName,
+        tokenSymbol,
         estExposure,
         orderTotal,
         availableBalance,