@loafmarkets/ui 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -212,6 +212,66 @@ var PortfolioSummary = React5.forwardRef(
 PortfolioSummary.displayName = "PortfolioSummary";
 var clamp = (v, min, max) => Math.min(max, Math.max(min, v));
 var fmt0 = (v) => Math.abs(v).toLocaleString(void 0, { maximumFractionDigits: 0 });
+var normalizeLevels = (levels = []) => levels.filter((level) => Number.isFinite(level.price) && level.price > 0 && Number.isFinite(level.amount) && level.amount > 0);
+var estimateMarketBuyFromUsd = (levels = [], usdAmount) => {
+  if (!Number.isFinite(usdAmount) || usdAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
+  const asks = normalizeLevels(levels).sort((a, b) => a.price - b.price);
+  let remainingUsd = usdAmount;
+  let tokensFilled = 0;
+  let spent = 0;
+  for (const level of asks) {
+    if (remainingUsd <= 0) break;
+    const levelValueCapacity = level.amount * level.price;
+    const usdToSpend = Math.min(remainingUsd, levelValueCapacity);
+    const tokensFromLevel = usdToSpend / level.price;
+    tokensFilled += tokensFromLevel;
+    spent += usdToSpend;
+    remainingUsd -= usdToSpend;
+  }
+  return {
+    tokens: tokensFilled,
+    value: spent,
+    avgPrice: tokensFilled > 0 ? spent / tokensFilled : null
+  };
+};
+var estimateMarketBuyFromTokens = (levels = [], tokenAmount) => {
+  if (!Number.isFinite(tokenAmount) || tokenAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
+  const asks = normalizeLevels(levels).sort((a, b) => a.price - b.price);
+  let remainingTokens = tokenAmount;
+  let tokensFilled = 0;
+  let spent = 0;
+  for (const level of asks) {
+    if (remainingTokens <= 0) break;
+    const tokensFromLevel = Math.min(remainingTokens, level.amount);
+    spent += tokensFromLevel * level.price;
+    tokensFilled += tokensFromLevel;
+    remainingTokens -= tokensFromLevel;
+  }
+  return {
+    tokens: tokensFilled,
+    value: spent,
+    avgPrice: tokensFilled > 0 ? spent / tokensFilled : null
+  };
+};
+var estimateMarketSellFromTokens = (levels = [], tokenAmount) => {
+  if (!Number.isFinite(tokenAmount) || tokenAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
+  const bids = normalizeLevels(levels).sort((a, b) => b.price - a.price);
+  let remainingTokens = tokenAmount;
+  let tokensFilled = 0;
+  let received = 0;
+  for (const level of bids) {
+    if (remainingTokens <= 0) break;
+    const tokensFromLevel = Math.min(remainingTokens, level.amount);
+    received += tokensFromLevel * level.price;
+    tokensFilled += tokensFromLevel;
+    remainingTokens -= tokensFromLevel;
+  }
+  return {
+    tokens: tokensFilled,
+    value: received,
+    avgPrice: tokensFilled > 0 ? received / tokensFilled : null
+  };
+};
 function HousePositionSlider({
   tokenId,
   tokenSymbol,
@@ -221,6 +281,7 @@ function HousePositionSlider({
   tokensHeld,
   pendingOrders = [],
   defaultOrderType = "market",
+  orderbook,
   onConfirmOrder,
   className,
   ...props
@@ -234,45 +295,103 @@ function HousePositionSlider({
   const [orderType, setOrderType] = React5.useState(defaultOrderType);
   const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
   const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React5.useState(false);
   const [ownershipInput, setOwnershipInput] = React5.useState("");
   const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
   const houseRef = React5.useRef(null);
+  const asks = orderbook?.asks ?? [];
+  const bids = orderbook?.bids ?? [];
   React5.useEffect(() => {
+    if (orderType !== "limit") return;
+    if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
     setLimitPriceInput(currentPrice.toFixed(2));
-  }, [currentPrice]);
+  }, [currentPrice, limitPriceDirty, orderType]);
   const effectivePrice = orderType === "limit" ? limitPrice : currentPrice;
-  const holdingsValue = tokensHeld * effectivePrice;
-  const totalCapacity = holdingsValue + availableCash;
   const pendingBuyValue = pendingOrders.filter((o) => o.type === "buy").reduce((s, o) => s + o.value, 0);
   const pendingSellTokens = pendingOrders.filter((o) => o.type === "sell").reduce((s, o) => s + Math.abs(o.tokens), 0);
   const effectiveAvailableCash = Math.max(0, availableCash - pendingBuyValue);
   const effectiveTokensHeld = Math.max(0, tokensHeld - pendingSellTokens);
-  const baselinePct = totalCapacity <= 0 ? 0 : holdingsValue / totalCapacity * 100;
+  const holdingsValue = tokensHeld * effectivePrice;
+  const sliderHoldingsValue = effectiveTokensHeld * effectivePrice;
+  const sliderTotalCapacity = sliderHoldingsValue + effectiveAvailableCash;
+  const baselinePct = sliderTotalCapacity <= 0 ? 0 : sliderHoldingsValue / sliderTotalCapacity * 100;
   let deltaTokens = 0;
   let deltaValue = 0;
+  let marketAvgPrice = null;
   let targetTokens = tokensHeld;
   let targetValue = holdingsValue;
+  const limitPriceSafe = limitPrice > 0 ? limitPrice : currentPrice || 1;
   if (orderMode === "buy") {
-    if (buyTrackingMode === "tokens") {
-      deltaTokens = deltaTokensBuy;
-      deltaValue = deltaTokensBuy * effectivePrice;
+    if (orderType === "market") {
+      if (buyTrackingMode === "tokens") {
+        const desiredTokens = Math.max(0, deltaTokensBuy);
+        const result = estimateMarketBuyFromTokens(asks, desiredTokens);
+        deltaTokens = result.tokens;
+        deltaValue = result.value;
+        marketAvgPrice = result.avgPrice;
+      } else {
+        const notional = Math.min(Math.max(0, deltaDollars), effectiveAvailableCash);
+        const result = estimateMarketBuyFromUsd(asks, notional);
+        deltaTokens = result.tokens;
+        deltaValue = result.value;
+        marketAvgPrice = result.avgPrice;
+      }
     } else {
-      deltaValue = deltaDollars;
-      deltaTokens = deltaDollars / (effectivePrice || 1);
+      if (buyTrackingMode === "tokens") {
+        deltaTokens = deltaTokensBuy;
+        deltaValue = deltaTokensBuy * limitPriceSafe;
+      } else {
+        const notional = Math.min(Math.max(0, deltaDollars), effectiveAvailableCash);
+        deltaValue = notional;
+        deltaTokens = notional / limitPriceSafe;
+      }
     }
   } else if (orderMode === "sell") {
-    deltaTokens = deltaTokensSell;
-    deltaValue = deltaTokensSell * effectivePrice;
+    if (orderType === "market") {
+      const tokensToSell = Math.abs(deltaTokensSell);
+      const result = estimateMarketSellFromTokens(bids, tokensToSell);
+      deltaTokens = -result.tokens;
+      deltaValue = -result.value;
+      marketAvgPrice = result.avgPrice;
+    } else {
+      deltaTokens = deltaTokensSell;
+      deltaValue = deltaTokensSell * limitPriceSafe;
+    }
   }
   targetTokens = tokensHeld + deltaTokens;
   targetValue = targetTokens * effectivePrice;
-  const targetPct = totalCapacity <= 0 ? 0 : targetValue / totalCapacity * 100;
+  const plannedDeltaValue = (() => {
+    if (orderMode === "buy") {
+      if (buyTrackingMode === "dollars") {
+        const notional = Math.min(Math.max(0, deltaDollars), effectiveAvailableCash);
+        return notional;
+      }
+      const tokensPlanned = Math.max(0, deltaTokensBuy);
+      const referencePrice = orderType === "market" ? currentPrice || limitPriceSafe : limitPriceSafe;
+      return Math.min(tokensPlanned * referencePrice, effectiveAvailableCash);
+    }
+    if (orderMode === "sell") {
+      const tokensToSell = Math.abs(Math.min(0, deltaTokensSell));
+      const sellValue = tokensToSell * effectivePrice;
+      return -Math.min(sellValue, sliderHoldingsValue);
+    }
+    return 0;
+  })();
+  const sliderTargetValue = clamp(sliderHoldingsValue + plannedDeltaValue, 0, sliderTotalCapacity);
+  const targetPct = sliderTotalCapacity <= 0 ? 0 : sliderTargetValue / sliderTotalCapacity * 100;
   const isIncrease = orderMode === "buy";
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
   const currentOwnership = totalTokens <= 0 ? 0 : tokensHeld / totalTokens * 100;
   const targetOwnership = totalTokens <= 0 ? 0 : targetTokens / totalTokens * 100;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
+  const resetOrder = React5.useCallback(() => {
+    setOrderMode("none");
+    setBuyTrackingMode("dollars");
+    setDeltaDollars(0);
+    setDeltaTokensBuy(0);
+    setDeltaTokensSell(0);
+  }, []);
   const updateOrderFromTargetValue = React5.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
@@ -293,13 +412,9 @@ function HousePositionSlider({
         setDeltaTokensBuy(0);
         return;
       }
-      setOrderMode("none");
-      setBuyTrackingMode("dollars");
-      setDeltaDollars(0);
-      setDeltaTokensBuy(0);
-      setDeltaTokensSell(0);
+      resetOrder();
     },
-    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, tokensHeld]
+    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
   const updateOrderFromOwnership = React5.useCallback(
     (newOwnershipPercent) => {
@@ -328,13 +443,47 @@ function HousePositionSlider({
         setDeltaTokensBuy(0);
         return;
       }
-      setOrderMode("none");
-      setBuyTrackingMode("dollars");
-      setDeltaDollars(0);
-      setDeltaTokensBuy(0);
-      setDeltaTokensSell(0);
+      resetOrder();
+    },
+    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
+  );
+  const updateOrderFromSlider = React5.useCallback(
+    (pct) => {
+      const normalized = (pct - 50) / 50;
+      const magnitude = Math.min(Math.abs(normalized), 1);
+      if (magnitude < 0.02) {
+        resetOrder();
+        return;
+      }
+      if (normalized > 0) {
+        const notional = clamp(magnitude * effectiveAvailableCash, 0, effectiveAvailableCash);
+        if (notional <= 0) {
+          resetOrder();
+          return;
+        }
+        setOrderMode("buy");
+        setBuyTrackingMode("dollars");
+        setDeltaDollars(notional);
+        setDeltaTokensBuy(0);
+        setDeltaTokensSell(0);
+        return;
+      }
+      if (normalized < 0) {
+        const tokensToSell = clamp(magnitude * effectiveTokensHeld, 0, effectiveTokensHeld);
+        if (tokensToSell <= 0) {
+          resetOrder();
+          return;
+        }
+        setOrderMode("sell");
+        setBuyTrackingMode("dollars");
+        setDeltaTokensSell(-tokensToSell);
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+        return;
+      }
+      resetOrder();
     },
-    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld]
+    [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
   const handleDragAtClientY = React5.useCallback(
     (clientY) => {
@@ -342,9 +491,9 @@ function HousePositionSlider({
       const rect = houseRef.current.getBoundingClientRect();
       const y = clientY - rect.top;
       const pct = clamp(100 - y / rect.height * 100, 0, 100);
-      updateOrderFromTargetValue(pct / 100 * totalCapacity);
+      updateOrderFromSlider(pct);
     },
-    [totalCapacity, updateOrderFromTargetValue]
+    [updateOrderFromSlider]
   );
   const onMouseDown = (e) => {
     e.preventDefault();
@@ -374,15 +523,21 @@ function HousePositionSlider({
     document.addEventListener("touchend", onEnd);
   };
   const handleCancel = () => {
-    setOrderMode("none");
-    setBuyTrackingMode("dollars");
-    setDeltaDollars(0);
-    setDeltaTokensBuy(0);
-    setDeltaTokensSell(0);
+    resetOrder();
+  };
+  const handleOrderTypeSelection = (next) => {
+    setOrderType(next);
+    if (next === "limit") {
+      setLimitPriceDirty(false);
+      setLimitPrice(currentPrice);
+      setLimitPriceInput(currentPrice.toFixed(2));
+    } else {
+      setLimitPriceDirty(false);
+    }
   };
   const handleConfirm = () => {
     if (!hasChange) return;
-    const priceToUse = orderType === "market" ? currentPrice : limitPrice;
+    const priceToUse = orderType === "market" ? marketAvgPrice ?? currentPrice : limitPrice;
     onConfirmOrder?.({
       side: isIncrease ? "buy" : "sell",
       orderType,
@@ -407,6 +562,8 @@ function HousePositionSlider({
   const showIncrease = targetPct > baselinePct;
   const showDecrease = targetPct < baselinePct;
   const valueLabel = orderType === "limit" ? `${tokenSymbol} Owned at Limit` : `${tokenSymbol} Owned`;
+  const deltaSign = deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "";
+  const percentMarkers = [100, 50, 25, 0];
   return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col items-center gap-6 rounded-[12px] bg-black/20 px-8 pb-6 pt-12", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 text-[1.1rem] font-semibold tracking-[0.5px] text-white", children: "Place Order" }),
     hasChange ? /* @__PURE__ */ jsx(
@@ -420,46 +577,53 @@ function HousePositionSlider({
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs uppercase tracking-[1px] text-[#888]", children: valueLabel }),
-      /* @__PURE__ */ jsx("div", { className: "inline-flex items-baseline gap-2 text-[2rem] font-bold text-white", children: isDragging ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn("text-[2rem] font-semibold", deltaValue >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]"),
-          children: [
-            deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "",
-            "$",
-            fmt0(deltaValue)
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          "$",
-          fmt0(targetValue)
-        ] }),
-        hasChange ? /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
           "span",
           {
             className: cn(
-              "relative top-[-0.5rem] text-[0.85rem] font-semibold",
+              "text-[2.2rem] font-semibold",
               deltaValue >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]"
             ),
             children: [
-              deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "",
+              deltaSign,
+              "$",
               fmt0(deltaValue)
             ]
           }
-        ) : null
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { ref: houseRef, className: "h-[200px] w-[160px] select-none touch-none", style: { cursor: "ns-resize" }, onMouseDown, onTouchStart, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 160", className: "h-full w-full overflow-visible", children: [
-      /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8", fill: "rgba(255,255,255,0.04)", stroke: "rgba(255,255,255,0.10)" }),
-      /* @__PURE__ */ jsx("clipPath", { id: "loaf-clip", children: /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8" }) }),
-      /* @__PURE__ */ jsxs("g", { clipPath: "url(#loaf-clip)", children: [
-        /* @__PURE__ */ jsx("rect", { x: "10", y: showDecrease ? targetFillY : baselineFillY, width: "100", height: showDecrease ? targetFillHeight : baselineFillHeight, fill: "rgba(220,175,120,0.7)" }),
-        showIncrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: targetFillY, width: "100", height: targetFillHeight - baselineFillHeight, fill: "rgba(14,203,129,0.35)" }) : null,
-        showDecrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: baselineFillY, width: "100", height: baselineFillHeight - targetFillHeight, fill: "rgba(246,70,93,0.35)" }) : null,
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: targetFillY, x2: "108", y2: targetFillY, stroke: showIncrease ? "#0ecb81" : showDecrease ? "#f6465d" : "rgba(234,217,162,1)", strokeWidth: "2", strokeLinecap: "round" })
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-lg font-semibold text-white/60", children: [
+          "$",
+          fmt0(targetValue)
+        ] })
       ] })
-    ] }) }),
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-[200px] flex-col justify-between text-xs text-white/40", children: percentMarkers.map((marker) => /* @__PURE__ */ jsxs("span", { children: [
+        marker,
+        "%"
+      ] }, marker)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: houseRef,
+          className: "h-[200px] w-[160px] select-none touch-none",
+          style: { cursor: "ns-resize" },
+          onMouseDown,
+          onTouchStart,
+          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 160", className: "h-full w-full overflow-visible", children: [
+            /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8", fill: "rgba(255,255,255,0.04)", stroke: "rgba(255,255,255,0.10)" }),
+            /* @__PURE__ */ jsx("clipPath", { id: "loaf-clip", children: /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8" }) }),
+            /* @__PURE__ */ jsxs("g", { clipPath: "url(#loaf-clip)", children: [
+              /* @__PURE__ */ jsx("rect", { x: "10", y: showDecrease ? targetFillY : baselineFillY, width: "100", height: showDecrease ? targetFillHeight : baselineFillHeight, fill: "rgba(220,175,120,0.7)" }),
+              showIncrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: targetFillY, width: "100", height: targetFillHeight - baselineFillHeight, fill: "rgba(14,203,129,0.35)" }) : null,
+              showDecrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: baselineFillY, width: "100", height: baselineFillHeight - targetFillHeight, fill: "rgba(246,70,93,0.35)" }) : null,
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: targetFillY, x2: "108", y2: targetFillY, stroke: showIncrease ? "#0ecb81" : showDecrease ? "#f6465d" : "rgba(234,217,162,1)", strokeWidth: "2", strokeLinecap: "round" })
+            ] })
+          ] })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -509,7 +673,7 @@ function HousePositionSlider({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+      orderType === "market" ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-white/50", children: isIncrease ? "Buying" : "Selling" }),
         /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
           orderMode === "buy" && buyTrackingMode === "dollars" ? /* @__PURE__ */ jsx("span", { className: "mr-1 text-[#0ecb81]", children: "~" }) : null,
@@ -558,7 +722,7 @@ function HousePositionSlider({
           "button",
           {
             type: "button",
-            onClick: () => setOrderType("market"),
+            onClick: () => handleOrderTypeSelection("market"),
             className: cn(
               "flex-1 rounded-[6px] px-3 py-2 text-[0.8rem] font-medium transition",
               orderType === "market" ? "bg-[rgba(201,162,39,0.2)] text-[#C9A227]" : "text-white/50 hover:bg-white/5"
@@ -570,7 +734,7 @@ function HousePositionSlider({
           "button",
           {
             type: "button",
-            onClick: () => setOrderType("limit"),
+            onClick: () => handleOrderTypeSelection("limit"),
             className: cn(
               "flex-1 rounded-[6px] px-3 py-2 text-[0.8rem] font-medium transition",
               orderType === "limit" ? "bg-[rgba(201,162,39,0.2)] text-[#C9A227]" : "text-white/50 hover:bg-white/5"
@@ -588,6 +752,7 @@ function HousePositionSlider({
             onChange: (e) => {
               const input = e.target.value;
               if (input === "" || /^[0-9]*\.?[0-9]*$/.test(input)) {
+                setLimitPriceDirty(true);
                 setLimitPriceInput(input);
                 const num = Number.parseFloat(input);
                 if (Number.isFinite(num) && num > 0) setLimitPrice(num);