@loafmarkets/ui 0.1.111 → 0.1.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -883,6 +883,10 @@ type PortfolioActivityPanelProps = {
883
883
  tradeHistory?: readonly TradeHistoryItem[];
884
884
  transfers?: readonly TransferHistoryItem[];
885
885
  onCancelOrder?: (orderId: number) => Promise<void>;
886
+ onAmendOrder?: (orderId: number, fields: {
887
+ quantity?: number;
888
+ price?: number;
889
+ }) => Promise<void>;
886
890
  cancellingOrderId?: number | null;
887
891
  defaultTab?: ActivityTabId;
888
892
  pageSize?: number;
@@ -890,7 +894,7 @@ type PortfolioActivityPanelProps = {
890
894
  className?: string;
891
895
  style?: React.CSSProperties;
892
896
  };
893
- 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;
897
+ 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;
894
898
 
895
899
  type SelectorItem = {
896
900
  readonly tokenName: string;
package/dist/index.d.ts CHANGED
@@ -883,6 +883,10 @@ type PortfolioActivityPanelProps = {
883
883
  tradeHistory?: readonly TradeHistoryItem[];
884
884
  transfers?: readonly TransferHistoryItem[];
885
885
  onCancelOrder?: (orderId: number) => Promise<void>;
886
+ onAmendOrder?: (orderId: number, fields: {
887
+ quantity?: number;
888
+ price?: number;
889
+ }) => Promise<void>;
886
890
  cancellingOrderId?: number | null;
887
891
  defaultTab?: ActivityTabId;
888
892
  pageSize?: number;
@@ -890,7 +894,7 @@ type PortfolioActivityPanelProps = {
890
894
  className?: string;
891
895
  style?: React.CSSProperties;
892
896
  };
893
- 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;
897
+ 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;
894
898
 
895
899
  type SelectorItem = {
896
900
  readonly tokenName: string;
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ var lucideReact = require('lucide-react');
12
12
  var LightweightCharts = require('lightweight-charts');
13
13
  var bi = require('react-icons/bi');
14
14
  var fa = require('react-icons/fa');
15
+ var fi = require('react-icons/fi');
15
16
 
16
17
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
17
18
 
@@ -11878,6 +11879,45 @@ var getOrderStatusMeta = (statusRaw) => {
11878
11879
  }
11879
11880
  return { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" };
11880
11881
  };
11882
+ function EditableField({ value, onCommit, format }) {
11883
+ const [editing, setEditing] = React5.useState(false);
11884
+ const [draft, setDraft] = React5.useState("");
11885
+ const inputRef = React5.useRef(null);
11886
+ React5.useEffect(() => {
11887
+ if (editing) inputRef.current?.focus();
11888
+ }, [editing]);
11889
+ const commit = () => {
11890
+ const parsed = parseFloat(draft);
11891
+ if (!isNaN(parsed) && parsed > 0 && parsed !== value) {
11892
+ onCommit(parsed);
11893
+ }
11894
+ setEditing(false);
11895
+ };
11896
+ if (editing) {
11897
+ return /* @__PURE__ */ jsxRuntime.jsx(
11898
+ EditInput,
11899
+ {
11900
+ ref: inputRef,
11901
+ type: "number",
11902
+ step: "any",
11903
+ value: draft,
11904
+ onChange: (e) => setDraft(e.target.value),
11905
+ onBlur: commit,
11906
+ onKeyDown: (e) => {
11907
+ if (e.key === "Enter") commit();
11908
+ if (e.key === "Escape") setEditing(false);
11909
+ }
11910
+ }
11911
+ );
11912
+ }
11913
+ return /* @__PURE__ */ jsxRuntime.jsxs(EditableCellWrap, { onClick: () => {
11914
+ setDraft(String(value));
11915
+ setEditing(true);
11916
+ }, children: [
11917
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: format(value) }),
11918
+ /* @__PURE__ */ jsxRuntime.jsx(fi.FiEdit2, { size: 10 })
11919
+ ] });
11920
+ }
11881
11921
  function PortfolioActivityPanel({
11882
11922
  positions = [],
11883
11923
  showPositionsTab = false,
@@ -11889,6 +11929,7 @@ function PortfolioActivityPanel({
11889
11929
  tradeHistory = [],
11890
11930
  transfers = [],
11891
11931
  onCancelOrder,
11932
+ onAmendOrder,
11892
11933
  cancellingOrderId = null,
11893
11934
  defaultTab,
11894
11935
  pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
@@ -12073,8 +12114,8 @@ function PortfolioActivityPanel({
12073
12114
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: order.tokenName }) }),
12074
12115
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
12075
12116
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: prettyLabel(order.type) }) }),
12076
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(order.quantity) }) }),
12077
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
12117
+ /* @__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) }) }),
12118
+ /* @__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) }) }),
12078
12119
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(CellText, { $muted: true, children: [
12079
12120
  filledPercent,
12080
12121
  "%"
@@ -12417,6 +12458,7 @@ var PositionsRow = styled25__default.default.div`
12417
12458
  align-items: center;
12418
12459
  gap: 0 0.75rem;
12419
12460
  padding: 0.5rem 0.5rem;
12461
+ min-height: 2.6rem;
12420
12462
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
12421
12463
  &:last-child { border-bottom: none; }
12422
12464
  `;
@@ -12483,6 +12525,7 @@ var GridRow = styled25__default.default.div`
12483
12525
  align-items: center;
12484
12526
  gap: 0 0.75rem;
12485
12527
  padding: 0.5rem 0.5rem;
12528
+ min-height: 2.6rem;
12486
12529
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
12487
12530
  &:last-child { border-bottom: none; }
12488
12531
  `;
@@ -12504,6 +12547,45 @@ var SideBadge = styled25__default.default.span`
12504
12547
  font-weight: 600;
12505
12548
  color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
12506
12549
  `;
12550
+ var EditableCellWrap = styled25__default.default.span`
12551
+ display: inline-flex;
12552
+ align-items: center;
12553
+ gap: 0.35rem;
12554
+ cursor: pointer;
12555
+ color: #fff;
12556
+ font-size: 0.8rem;
12557
+
12558
+ svg {
12559
+ color: rgba(255, 255, 255, 0.25);
12560
+ transition: color 0.15s;
12561
+ }
12562
+
12563
+ &:hover svg {
12564
+ color: var(--color-accent, #E6C87E);
12565
+ }
12566
+ `;
12567
+ var EditInput = styled25__default.default.input`
12568
+ width: 5rem;
12569
+ background: rgba(255, 255, 255, 0.06);
12570
+ border: 1px solid rgba(255, 255, 255, 0.15);
12571
+ border-radius: 4px;
12572
+ padding: 0.2rem 0.4rem;
12573
+ font-size: 0.78rem;
12574
+ color: #fff;
12575
+ outline: none;
12576
+ font-family: inherit;
12577
+
12578
+ &:focus {
12579
+ border-color: var(--color-accent, #E6C87E);
12580
+ }
12581
+
12582
+ &::-webkit-inner-spin-button,
12583
+ &::-webkit-outer-spin-button {
12584
+ -webkit-appearance: none;
12585
+ margin: 0;
12586
+ }
12587
+ -moz-appearance: textfield;
12588
+ `;
12507
12589
  var CancelConfirmOverlay = styled25__default.default.div`
12508
12590
  position: fixed;
12509
12591
  inset: 0;