@loafmarkets/ui 0.0.2 → 0.0.4

package/dist/index.d.mts

@@ -56,6 +56,34 @@ interface PortfolioSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const PortfolioSummary: React.ForwardRefExoticComponent<PortfolioSummaryProps & React.RefAttributes<HTMLDivElement>>;
 
+type OrderbookSide = "ask" | "bid";
+type OrderbookLevel = {
+    price: number;
+    amount: number;
+    depth?: number;
+};
+type OrderbookTrade = {
+    type: "buy" | "sell";
+    price: number;
+    amount: number;
+    time?: string;
+};
+interface OrderbookProps extends React.HTMLAttributes<HTMLDivElement> {
+    asks: OrderbookLevel[];
+    bids: OrderbookLevel[];
+    midPrice: number;
+    midChangePercent?: number;
+    trades?: OrderbookTrade[];
+    priceLabel?: string;
+    amountLabel?: string;
+    precision?: number;
+    amountPrecision?: number;
+    defaultTab?: "orderbook" | "trades";
+    onTabChange?: (tab: "orderbook" | "trades") => void;
+    rightHeader?: React.ReactNode;
+}
+declare const Orderbook: React.ForwardRefExoticComponent<OrderbookProps & React.RefAttributes<HTMLDivElement>>;
+
 type HousePositionPendingOrder = {
     type: "buy" | "sell";
     tokens: number;
@@ -74,6 +102,10 @@ type HousePositionSliderOrderPayload = {
     targetTokens: number;
     targetValue: number;
 };
+type HousePositionOrderbook = {
+    bids?: OrderbookLevel[];
+    asks?: OrderbookLevel[];
+};
 interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement> {
     tokenId: string;
     tokenSymbol: string;
@@ -83,37 +115,10 @@ interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement>
     tokensHeld: number;
     pendingOrders?: HousePositionPendingOrder[];
     defaultOrderType?: "market" | "limit";
+    orderbook?: HousePositionOrderbook;
     onConfirmOrder?: (payload: HousePositionSliderOrderPayload) => void;
 }
-declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
-
-type OrderbookSide = "ask" | "bid";
-type OrderbookLevel = {
-    price: number;
-    amount: number;
-    depth?: number;
-};
-type OrderbookTrade = {
-    type: "buy" | "sell";
-    price: number;
-    amount: number;
-    time?: string;
-};
-interface OrderbookProps extends React.HTMLAttributes<HTMLDivElement> {
-    asks: OrderbookLevel[];
-    bids: OrderbookLevel[];
-    midPrice: number;
-    midChangePercent?: number;
-    trades?: OrderbookTrade[];
-    priceLabel?: string;
-    amountLabel?: string;
-    precision?: number;
-    amountPrecision?: number;
-    defaultTab?: "orderbook" | "trades";
-    onTabChange?: (tab: "orderbook" | "trades") => void;
-    rightHeader?: React.ReactNode;
-}
-declare const Orderbook: React.ForwardRefExoticComponent<OrderbookProps & React.RefAttributes<HTMLDivElement>>;
+declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
 
 type PropertyTourProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title: string;
@@ -165,6 +170,7 @@ type YourOrder = {
     amount: number;
     total: number;
     filledPercent: number;
+    status?: string;
 };
 type YourOrdersProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title?: string;
@@ -268,4 +274,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.d.ts

@@ -56,6 +56,34 @@ interface PortfolioSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const PortfolioSummary: React.ForwardRefExoticComponent<PortfolioSummaryProps & React.RefAttributes<HTMLDivElement>>;
 
+type OrderbookSide = "ask" | "bid";
+type OrderbookLevel = {
+    price: number;
+    amount: number;
+    depth?: number;
+};
+type OrderbookTrade = {
+    type: "buy" | "sell";
+    price: number;
+    amount: number;
+    time?: string;
+};
+interface OrderbookProps extends React.HTMLAttributes<HTMLDivElement> {
+    asks: OrderbookLevel[];
+    bids: OrderbookLevel[];
+    midPrice: number;
+    midChangePercent?: number;
+    trades?: OrderbookTrade[];
+    priceLabel?: string;
+    amountLabel?: string;
+    precision?: number;
+    amountPrecision?: number;
+    defaultTab?: "orderbook" | "trades";
+    onTabChange?: (tab: "orderbook" | "trades") => void;
+    rightHeader?: React.ReactNode;
+}
+declare const Orderbook: React.ForwardRefExoticComponent<OrderbookProps & React.RefAttributes<HTMLDivElement>>;
+
 type HousePositionPendingOrder = {
     type: "buy" | "sell";
     tokens: number;
@@ -74,6 +102,10 @@ type HousePositionSliderOrderPayload = {
     targetTokens: number;
     targetValue: number;
 };
+type HousePositionOrderbook = {
+    bids?: OrderbookLevel[];
+    asks?: OrderbookLevel[];
+};
 interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement> {
     tokenId: string;
     tokenSymbol: string;
@@ -83,37 +115,10 @@ interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement>
     tokensHeld: number;
     pendingOrders?: HousePositionPendingOrder[];
     defaultOrderType?: "market" | "limit";
+    orderbook?: HousePositionOrderbook;
     onConfirmOrder?: (payload: HousePositionSliderOrderPayload) => void;
 }
-declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
-
-type OrderbookSide = "ask" | "bid";
-type OrderbookLevel = {
-    price: number;
-    amount: number;
-    depth?: number;
-};
-type OrderbookTrade = {
-    type: "buy" | "sell";
-    price: number;
-    amount: number;
-    time?: string;
-};
-interface OrderbookProps extends React.HTMLAttributes<HTMLDivElement> {
-    asks: OrderbookLevel[];
-    bids: OrderbookLevel[];
-    midPrice: number;
-    midChangePercent?: number;
-    trades?: OrderbookTrade[];
-    priceLabel?: string;
-    amountLabel?: string;
-    precision?: number;
-    amountPrecision?: number;
-    defaultTab?: "orderbook" | "trades";
-    onTabChange?: (tab: "orderbook" | "trades") => void;
-    rightHeader?: React.ReactNode;
-}
-declare const Orderbook: React.ForwardRefExoticComponent<OrderbookProps & React.RefAttributes<HTMLDivElement>>;
+declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
 
 type PropertyTourProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title: string;
@@ -165,6 +170,7 @@ type YourOrder = {
     amount: number;
     total: number;
     filledPercent: number;
+    status?: string;
 };
 type YourOrdersProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title?: string;
@@ -268,4 +274,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.js

@@ -234,6 +234,66 @@ var PortfolioSummary = React5__namespace.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,
@@ -243,6 +303,7 @@ function HousePositionSlider({
   tokensHeld,
   pendingOrders = [],
   defaultOrderType = "market",
+  orderbook,
   onConfirmOrder,
   className,
   ...props
@@ -256,45 +317,103 @@ function HousePositionSlider({
   const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
   const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
   const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
   const [ownershipInput, setOwnershipInput] = React5__namespace.useState("");
   const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
   const houseRef = React5__namespace.useRef(null);
+  const asks = orderbook?.asks ?? [];
+  const bids = orderbook?.bids ?? [];
   React5__namespace.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__namespace.useCallback(() => {
+    setOrderMode("none");
+    setBuyTrackingMode("dollars");
+    setDeltaDollars(0);
+    setDeltaTokensBuy(0);
+    setDeltaTokensSell(0);
+  }, []);
   const updateOrderFromTargetValue = React5__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
@@ -315,13 +434,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__namespace.useCallback(
     (newOwnershipPercent) => {
@@ -350,13 +465,47 @@ function HousePositionSlider({
         setDeltaTokensBuy(0);
         return;
       }
-      setOrderMode("none");
-      setBuyTrackingMode("dollars");
-      setDeltaDollars(0);
-      setDeltaTokensBuy(0);
-      setDeltaTokensSell(0);
+      resetOrder();
+    },
+    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
+  );
+  const updateOrderFromSlider = React5__namespace.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__namespace.useCallback(
     (clientY) => {
@@ -364,9 +513,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();
@@ -396,15 +545,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,
@@ -429,6 +584,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute left-4 top-4 text-[1.1rem] font-semibold tracking-[0.5px] text-white", children: "Place Order" }),
     hasChange ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -442,46 +599,53 @@ function HousePositionSlider({
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs uppercase tracking-[1px] text-[#888]", children: valueLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-baseline gap-2 text-[2rem] font-bold text-white", children: isDragging ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: cn("text-[2rem] font-semibold", deltaValue >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]"),
-          children: [
-            deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "",
-            "$",
-            fmt0(deltaValue)
-          ]
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "$",
-          fmt0(targetValue)
-        ] }),
-        hasChange ? /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: houseRef, className: "h-[200px] w-[160px] select-none touch-none", style: { cursor: "ns-resize" }, onMouseDown, onTouchStart, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 120 160", className: "h-full w-full overflow-visible", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("clipPath", { id: "loaf-clip", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#loaf-clip)", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: showDecrease ? targetFillY : baselineFillY, width: "100", height: showDecrease ? targetFillHeight : baselineFillHeight, fill: "rgba(220,175,120,0.7)" }),
-        showIncrease ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: targetFillY, width: "100", height: targetFillHeight - baselineFillHeight, fill: "rgba(14,203,129,0.35)" }) : null,
-        showDecrease ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: baselineFillY, width: "100", height: baselineFillHeight - targetFillHeight, fill: "rgba(246,70,93,0.35)" }) : null,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-lg font-semibold text-white/60", children: [
+          "$",
+          fmt0(targetValue)
+        ] })
       ] })
-    ] }) }),
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[200px] flex-col justify-between text-xs text-white/40", children: percentMarkers.map((marker) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        marker,
+        "%"
+      ] }, marker)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: houseRef,
+          className: "h-[200px] w-[160px] select-none touch-none",
+          style: { cursor: "ns-resize" },
+          onMouseDown,
+          onTouchStart,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 120 160", className: "h-full w-full overflow-visible", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("clipPath", { id: "loaf-clip", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#loaf-clip)", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: showDecrease ? targetFillY : baselineFillY, width: "100", height: showDecrease ? targetFillHeight : baselineFillHeight, fill: "rgba(220,175,120,0.7)" }),
+              showIncrease ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: targetFillY, width: "100", height: targetFillHeight - baselineFillHeight, fill: "rgba(14,203,129,0.35)" }) : null,
+              showDecrease ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: baselineFillY, width: "100", height: baselineFillHeight - targetFillHeight, fill: "rgba(246,70,93,0.35)" }) : null,
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       "button",
       {
@@ -531,7 +695,7 @@ function HousePositionSlider({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
+      orderType === "market" ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/50", children: isIncrease ? "Buying" : "Selling" }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
           orderMode === "buy" && buyTrackingMode === "dollars" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1 text-[#0ecb81]", children: "~" }) : null,
@@ -580,7 +744,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"
@@ -592,7 +756,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"
@@ -610,6 +774,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);
@@ -1150,7 +1315,8 @@ var YourOrders = React5__namespace.forwardRef(
             ] }),
             orders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-10 text-center text-sm text-white/50", children: "No orders" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: orders.map((order) => {
               const sideClass = order.side === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]";
-              const filled = clampPct(order.filledPercent);
+              const filled = clampPct(order.filledPercent ?? 0);
+              const isCancelled = order.status?.toUpperCase() === "CANCELLED";
               const canEditPrice = Boolean(onEditPrice);
               const canEditAmount = Boolean(onEditAmount);
               const canCancel = Boolean(onCancel);
@@ -1208,7 +1374,7 @@ var YourOrders = React5__namespace.forwardRef(
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 h-1 w-4/5 overflow-hidden rounded-sm bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full rounded-sm bg-[#C9A227]", style: { width: `${filled}%` } }) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 text-center", children: isCancelled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded border border-white/20 px-3 py-1 text-[0.78rem] uppercase tracking-wide text-[#f6465d]", children: "Cancelled" }) : /* @__PURE__ */ jsxRuntime.jsx(
                       "button",
                       {
                         type: "button",