@loafmarkets/ui 0.1.39 → 0.1.41

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,6 +4850,7 @@ 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("div", { style: { display: "flex", alignItems: "center" }, children: [
@@ -5099,6 +5100,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,20 +5157,24 @@ 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;
   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 Logo = styled24.div`
@@ -7270,7 +7286,7 @@ function GalleryMapSection({
   const [carouselIndex, setCarouselIndex] = useState(0);
   const [showVideo, setShowVideo] = useState(false);
   const [autoPlaying, setAutoPlaying] = useState(autoPlay);
-  const resolvedMapUrl = mapUrl ?? (tokenName ? `https://demo.loafmarkets.com/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
+  const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
     const interval = setInterval(() => {
@@ -8945,6 +8961,16 @@ var IPOAssetSelector = styled24.div`
   z-index: 10;
   transition: all 0.3s ease;
   &:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.6rem 0.75rem;
+  }
 `;
 var AssetSelectorDropdown = styled24.div`
   display: flex;
@@ -8964,6 +8990,15 @@ var AssetName = styled24.div`
   letter-spacing: -0.02em;
   svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
   &:hover svg { opacity: 1; }
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.9rem;
+    svg { margin-left: 0.4rem; width: 16px; height: 16px; }
+  }
 `;
 var SelectorMetrics = styled24.div`
   display: flex;
@@ -8975,6 +9010,20 @@ var SelectorMetrics = styled24.div`
   background: rgba(255,255,255,0.03);
   border-radius: 8px;
   border: 1px solid rgba(255,255,255,0.05);
+
+  @media (max-width: 768px) {
+    gap: 0.6rem;
+    padding: 0.4rem 0.75rem;
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+    margin-left: 0;
+    padding: 0.35rem 0.5rem;
+    gap: 0.5rem;
+  }
 `;
 var MetricLabel2 = styled24.span`
   font-size: 0.75rem;
@@ -8983,11 +9032,24 @@ var MetricLabel2 = styled24.span`
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-right: 0.5rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.65rem;
+    margin-right: 0.35rem;
+  }
 `;
 var MetricValue = styled24.span`
   font-size: 1.25rem;
   font-weight: 700;
   color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+
+  @media (max-width: 768px) {
+    font-size: 1.05rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.95rem;
+  }
 `;
 var MetricChange = styled24.span`
   font-size: 0.85rem;
@@ -8996,6 +9058,10 @@ var MetricChange = styled24.span`
   display: flex;
   align-items: center;
   gap: 0.25rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.75rem;
+  }
 `;
 var Separator = styled24.span`
   font-size: 1rem;
@@ -9014,6 +9080,11 @@ var IPODropdown = styled24.div`
   max-height: 360px;
   overflow-y: auto;
   border: 1px solid rgba(255,255,255,0.08);
+
+  @media (max-width: 480px) {
+    max-height: 280px;
+    border-radius: 12px;
+  }
   animation: slideDown 0.3s cubic-bezier(0.4,0,0.2,1);
   @keyframes slideDown {
     from { opacity: 0; transform: translateY(-10px); }
@@ -9701,6 +9772,7 @@ function OrderPanel({
   displayedOwnedTokens,
   ownedTokensJustUpdated,
   lastOrderQuantity,
+  orderPendingAllocation,
   orderPlacedSuccess,
   lastOrderDetails,
   tokenQuantity,
@@ -9763,7 +9835,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: [
@@ -9942,7 +10047,7 @@ function OrderPanel({
         ] })
       ] })
     ] }),
-    !orderPlacedSuccess && /* @__PURE__ */ jsx(
+    !orderPlacedSuccess && !orderPendingAllocation && /* @__PURE__ */ jsx(
       SubscribeButton,
       {
         type: "button",
@@ -10023,9 +10128,10 @@ var Panel2 = styled24.div`
   }
   @media (max-width: 768px) {
     padding: 1rem;
-    input[style*="font-size: 1.75rem"] {
-      font-size: 1.25rem !important;
-    }
+  }
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    border-radius: 6px;
   }
 `;
 var PanelHeader2 = styled24.div`
@@ -10059,6 +10165,11 @@ var Card2 = styled24.div`
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 12px;
   padding: 1rem 1.25rem;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem 1rem;
+    border-radius: 10px;
+  }
 `;
 var CardLabel = styled24.div`
   font-size: 0.75rem;
@@ -10077,6 +10188,10 @@ var CardInputRow = styled24.div`
     font-weight: 600;
     color: #fff;
     width: 100%;
+
+    @media (max-width: 480px) {
+      font-size: 1.35rem;
+    }
   }
   span {
     font-size: 1rem;
@@ -10090,8 +10205,10 @@ var QuickSelectRow = styled24.div`
   display: flex;
   gap: 0.5rem;
   margin-top: 0.75rem;
+  flex-wrap: wrap;
   button {
     flex: 1;
+    min-width: 50px;
     padding: 0.4rem 0;
     font-size: 0.75rem;
     font-weight: 500;
@@ -10107,6 +10224,11 @@ var QuickSelectRow = styled24.div`
     border-color: rgba(212,175,55,0.5);
     color: #D4AF37;
   }
+
+  @media (max-width: 480px) {
+    gap: 0.35rem;
+    button { font-size: 0.7rem; padding: 0.35rem 0; }
+  }
 `;
 var FundsRow = styled24.div`
   display: flex;
@@ -10230,6 +10352,10 @@ var BalanceValue = styled24.div`
     color: #0ecb81;
     font-weight: 600;
   }
+
+  @media (max-width: 480px) {
+    font-size: 1.2rem;
+  }
 `;
 var BalanceAction = styled24.div`
   font-size: 0.75rem;
@@ -10244,6 +10370,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%);
@@ -10688,6 +10918,10 @@ var TabContainer = styled24.div`
   gap: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
 `;
 var Tab = styled24.button`
   background: transparent;
@@ -10695,6 +10929,8 @@ var Tab = styled24.button`
   padding: 0.6rem 1rem;
   font-size: 0.75rem;
   font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
   color: ${({ $active }) => $active ? "#f0b90b" : "rgba(255, 255, 255, 0.4)"};
   cursor: pointer;
   transition: color 0.15s;
@@ -10965,8 +11201,14 @@ var Row2 = styled24.div`
   max-width: 1800px;
   margin-left: auto;
   margin-right: auto;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  & > * {
+    min-width: 0;
+    overflow: hidden;
   }
 `;
 var TradeNewsPanel = styled24.div`
@@ -10978,8 +11220,8 @@ var TradeNewsPanel = styled24.div`
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 1px solid var(--color-border);
   min-height: 280px;
-  overflow: visible !important;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     max-width: 100%;
     flex: 0 0 100%;
   }
@@ -11087,6 +11329,7 @@ function OrderConfirmationModal({
   tokenQuantity,
   tokenPrice,
   propertyName,
+  tokenSymbol,
   estExposure,
   orderTotal,
   availableBalance,
@@ -11101,7 +11344,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 })}`
@@ -11132,7 +11375,9 @@ function OrderConfirmationModal({
       "Your order for ",
       /* @__PURE__ */ jsxs("strong", { children: [
         tokenQuantity.toLocaleString(),
-        " MUS units"
+        " ",
+        tokenSymbol,
+        " units"
       ] }),
       " in the",
       " ",
@@ -11361,6 +11606,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);
@@ -11408,12 +11654,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";
@@ -11456,7 +11713,7 @@ function PropertyBuy({
       total: orderTotal,
       price: tokenPrice
     });
-    setOrderPlacedSuccess(true);
+    setOrderPendingAllocation(true);
     setSliderValue(0);
     setManualOrderAmount(null);
   };
@@ -11542,6 +11799,7 @@ function PropertyBuy({
             displayedOwnedTokens,
             ownedTokensJustUpdated,
             lastOrderQuantity,
+            orderPendingAllocation,
             orderPlacedSuccess,
             lastOrderDetails,
             tokenQuantity,
@@ -11556,7 +11814,7 @@ function PropertyBuy({
             orderButtonText: getOrderButtonText(),
             isOrderButtonDisabled: isOrderButtonDisabled(),
             hasInsufficientFunds,
-            onPlaceAnotherOrder: () => setOrderPlacedSuccess(false),
+            onPlaceAnotherOrder: handlePlaceAnotherOrder,
             onDeposit
           }
         ),
@@ -11590,6 +11848,7 @@ function PropertyBuy({
         tokenQuantity,
         tokenPrice,
         propertyName,
+        tokenSymbol,
         estExposure,
         orderTotal,
         availableBalance,
@@ -11630,29 +11889,42 @@ var HeroGrid = styled24.div`
   }
 
   @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
+    overflow: hidden;
 
     & > div:nth-child(1) {
       display: none;
     }
 
     & > div:nth-child(2) {
-      grid-column: 1 / -1;
       order: 1;
+      min-width: 0;
+      width: 100%;
     }
 
     & > div:nth-child(4) {
-      grid-column: 1 / -1;
       order: 2;
+      min-width: 0;
+      width: 100%;
+      height: auto;
     }
 
     & > div:nth-child(3) {
-      grid-column: 1 / -1;
       order: 3;
+      min-width: 0;
+      width: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    gap: 0.5rem;
+  }
 `;
 var PaymentOption = styled24.div`
   display: flex;