@loafmarkets/ui 0.1.48 → 0.1.49

package/dist/index.mjs

@@ -5690,7 +5690,9 @@ var UserButton = styled24.button.attrs({ type: "button" })`
 var DropdownMenu = styled24.div`
   position: absolute;
   top: 100%;
-  left: 0;
+  /* Anchor to the button's right edge so a short label (narrow button) near
+     the viewport's right edge doesn't push the 180px-wide panel off-screen. */
+  right: 0;
   margin-top: 0.25rem;
   background-color: #0d1117;
   border-radius: 8px;
@@ -11744,10 +11746,16 @@ function OrderConfirmationModal({
   estExposure,
   orderTotal,
   availableBalance,
-  onConfirm
+  onConfirm,
+  isPlacing = false,
+  placingLabel = "Placing order\u2026"
 }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsx(Overlay3, { onClick: onClose, children: /* @__PURE__ */ jsxs(Modal, { onClick: (e) => e.stopPropagation(), children: [
+  const handleOverlayClose = () => {
+    if (isPlacing) return;
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(Overlay3, { onClick: handleOverlayClose, children: /* @__PURE__ */ jsxs(Modal, { onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs("h3", { children: [
       "Confirm Order",
       /* @__PURE__ */ jsx(Badge2, { children: "Subscribe" })
@@ -11802,8 +11810,29 @@ function OrderConfirmationModal({
       "."
     ] }),
     /* @__PURE__ */ jsxs(ButtonRow2, { children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "secondary", children: "Cancel" }),
-      !hasInsufficientFunds && /* @__PURE__ */ jsx("button", { type: "button", onClick: onConfirm, className: "primary", children: "Place Order" })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "secondary",
+          disabled: isPlacing,
+          children: "Cancel"
+        }
+      ),
+      !hasInsufficientFunds && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          className: "primary",
+          disabled: isPlacing,
+          children: isPlacing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { children: placingLabel })
+          ] }) : "Place Order"
+        }
+      )
     ] })
   ] }) });
 }
@@ -11914,6 +11943,20 @@ var Summary = styled24.div`
   font-size: 0.9rem;
   line-height: 1.5;
 `;
+var spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+var Spinner = styled24.span`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  animation: ${spin} 0.7s linear infinite;
+  margin-right: 0.5rem;
+  vertical-align: -2px;
+`;
 var ButtonRow2 = styled24.div`
   display: flex;
   gap: 1rem;
@@ -11924,6 +11967,13 @@ var ButtonRow2 = styled24.div`
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  button:disabled {
+    cursor: not-allowed;
+    opacity: 0.75;
   }
   .secondary {
     background: rgba(255,255,255,0.1);
@@ -12267,7 +12317,9 @@ function PropertyBuy({
         estExposure,
         orderTotal,
         availableBalance,
-        onConfirm: confirmOrder
+        onConfirm: confirmOrder,
+        isPlacing: isPurchaseInFlight,
+        placingLabel: purchaseStatus === "checking-allowance" ? "Checking allowance\u2026" : purchaseStatus === "approving" ? "Approving USDL\u2026" : purchaseStatus === "purchasing" ? "Confirming purchase\u2026" : purchaseStatus === "pending-allocation" ? "Awaiting allocation\u2026" : "Placing order\u2026"
       }
     )
   ] });