@loafmarkets/ui 0.1.112 → 0.1.114

package/dist/index.mjs

@@ -11,6 +11,7 @@ import { Newspaper } from 'lucide-react';
 import * as LightweightCharts from 'lightweight-charts';
 import { BiChevronUp, BiChevronDown, BiX, BiCoin, BiWallet, BiCreditCard, BiCalendar, BiInfoCircle, BiPencil, BiImages, BiVideo, BiMap } from 'react-icons/bi';
 import { FaChartLine, FaBitcoin } from 'react-icons/fa';
+import { FiEdit2 } from 'react-icons/fi';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -5635,8 +5636,8 @@ var Header = ({
     isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
       const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
       const isPLPositive = portfolioSummary.pnl >= 0;
-      return /* @__PURE__ */ jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
-        portfolioArrowLeft !== null && /* @__PURE__ */ jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
+      return /* @__PURE__ */ jsx(PortfolioBarContainer, { className: "loaf-portfolio-bar", children: /* @__PURE__ */ jsxs(PortfolioBarPill, { ref: portfolioPillRef, className: "loaf-portfolio-pill", children: [
+        portfolioArrowLeft !== null && /* @__PURE__ */ jsx(PortfolioBarArrow, { className: "loaf-portfolio-arrow", style: { left: `${portfolioArrowLeft}px` } }),
         /* @__PURE__ */ jsxs(PBMetric, { children: [
           /* @__PURE__ */ jsx(PBMetricLabel, { children: "Holdings" }),
           /* @__PURE__ */ jsxs(PBMetricValue, { children: [
@@ -11852,6 +11853,45 @@ var getOrderStatusMeta = (statusRaw) => {
   }
   return { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" };
 };
+function EditableField({ value, onCommit, format }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+  const commit = () => {
+    const parsed = parseFloat(draft);
+    if (!isNaN(parsed) && parsed > 0 && parsed !== value) {
+      onCommit(parsed);
+    }
+    setEditing(false);
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      EditInput,
+      {
+        ref: inputRef,
+        type: "number",
+        step: "any",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit();
+          if (e.key === "Escape") setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(EditableCellWrap, { onClick: () => {
+    setDraft(String(value));
+    setEditing(true);
+  }, children: [
+    /* @__PURE__ */ jsx("span", { children: format(value) }),
+    /* @__PURE__ */ jsx(FiEdit2, { size: 10 })
+  ] });
+}
 function PortfolioActivityPanel({
   positions = [],
   showPositionsTab = false,
@@ -11863,6 +11903,7 @@ function PortfolioActivityPanel({
   tradeHistory = [],
   transfers = [],
   onCancelOrder,
+  onAmendOrder,
   cancellingOrderId = null,
   defaultTab,
   pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
@@ -12047,8 +12088,8 @@ function PortfolioActivityPanel({
             /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
             /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
             /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: prettyLabel(order.type) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: onAmendOrder ? /* @__PURE__ */ jsx(EditableField, { value: order.quantity, format: formatNumber2, onCommit: (v) => onAmendOrder(order.id, { quantity: v }) }) : /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: !isMarket && order.price && onAmendOrder ? /* @__PURE__ */ jsx(EditableField, { value: order.price, format: (v) => formatCurrency5(v), onCommit: (v) => onAmendOrder(order.id, { price: v }) }) : /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
             /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs(CellText, { $muted: true, children: [
               filledPercent,
               "%"
@@ -12480,6 +12521,45 @@ var SideBadge = styled25.span`
   font-weight: 600;
   color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
 `;
+var EditableCellWrap = styled25.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  cursor: pointer;
+  color: #fff;
+  font-size: 0.8rem;
+
+  svg {
+    color: rgba(255, 255, 255, 0.25);
+    transition: color 0.15s;
+  }
+
+  &:hover svg {
+    color: var(--color-accent, #E6C87E);
+  }
+`;
+var EditInput = styled25.input`
+  width: 5rem;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.78rem;
+  color: #fff;
+  outline: none;
+  font-family: inherit;
+
+  &:focus {
+    border-color: var(--color-accent, #E6C87E);
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+`;
 var CancelConfirmOverlay = styled25.div`
   position: fixed;
   inset: 0;