@loafmarkets/ui 0.1.112 → 0.1.114

package/dist/index.d.mts

@@ -883,6 +883,10 @@ type PortfolioActivityPanelProps = {
     tradeHistory?: readonly TradeHistoryItem[];
     transfers?: readonly TransferHistoryItem[];
     onCancelOrder?: (orderId: number) => Promise<void>;
+    onAmendOrder?: (orderId: number, fields: {
+        quantity?: number;
+        price?: number;
+    }) => Promise<void>;
     cancellingOrderId?: number | null;
     defaultTab?: ActivityTabId;
     pageSize?: number;
@@ -890,7 +894,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;

package/dist/index.d.ts

@@ -883,6 +883,10 @@ type PortfolioActivityPanelProps = {
     tradeHistory?: readonly TradeHistoryItem[];
     transfers?: readonly TransferHistoryItem[];
     onCancelOrder?: (orderId: number) => Promise<void>;
+    onAmendOrder?: (orderId: number, fields: {
+        quantity?: number;
+        price?: number;
+    }) => Promise<void>;
     cancellingOrderId?: number | null;
     defaultTab?: ActivityTabId;
     pageSize?: number;
@@ -890,7 +894,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;

package/dist/index.js

@@ -12,6 +12,7 @@ var lucideReact = require('lucide-react');
 var LightweightCharts = require('lightweight-charts');
 var bi = require('react-icons/bi');
 var fa = require('react-icons/fa');
+var fi = require('react-icons/fi');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -5661,8 +5662,8 @@ var Header = ({
     isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
       const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
       const isPLPositive = portfolioSummary.pnl >= 0;
-      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
-        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
+      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { className: "loaf-portfolio-bar", children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, className: "loaf-portfolio-pill", children: [
+        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { className: "loaf-portfolio-arrow", style: { left: `${portfolioArrowLeft}px` } }),
         /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Holdings" }),
           /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
@@ -11878,6 +11879,45 @@ var getOrderStatusMeta = (statusRaw) => {
   }
   return { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" };
 };
+function EditableField({ value, onCommit, format }) {
+  const [editing, setEditing] = React5.useState(false);
+  const [draft, setDraft] = React5.useState("");
+  const inputRef = React5.useRef(null);
+  React5.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(EditableCellWrap, { onClick: () => {
+    setDraft(String(value));
+    setEditing(true);
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: format(value) }),
+    /* @__PURE__ */ jsxRuntime.jsx(fi.FiEdit2, { size: 10 })
+  ] });
+}
 function PortfolioActivityPanel({
   positions = [],
   showPositionsTab = false,
@@ -11889,6 +11929,7 @@ function PortfolioActivityPanel({
   tradeHistory = [],
   transfers = [],
   onCancelOrder,
+  onAmendOrder,
   cancellingOrderId = null,
   defaultTab,
   pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
@@ -12073,8 +12114,8 @@ function PortfolioActivityPanel({
             /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: order.tokenName }) }),
             /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: prettyLabel(order.type) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(order.quantity) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: onAmendOrder ? /* @__PURE__ */ jsxRuntime.jsx(EditableField, { value: order.quantity, format: formatNumber2, onCommit: (v) => onAmendOrder(order.id, { quantity: v }) }) : /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(order.quantity) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: !isMarket && order.price && onAmendOrder ? /* @__PURE__ */ jsxRuntime.jsx(EditableField, { value: order.price, format: (v) => formatCurrency5(v), onCommit: (v) => onAmendOrder(order.id, { price: v }) }) : /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(CellText, { $muted: true, children: [
               filledPercent,
               "%"
@@ -12506,6 +12547,45 @@ var SideBadge = styled25__default.default.span`
   font-weight: 600;
   color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
 `;
+var EditableCellWrap = styled25__default.default.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__default.default.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__default.default.div`
   position: fixed;
   inset: 0;