@orderly.network/hooks 3.0.4-alpha.4 → 3.1.0-alpha.0

package/dist/index.d.mts

@@ -170,7 +170,7 @@ declare global {
         };
     }
 }
-declare const _default: "3.0.4-alpha.4";
+declare const _default: "3.1.0-alpha.0";
 
 declare const fetcher: (url: string, init: RequestInit | undefined, queryOptions: useQueryOptions<any>) => Promise<any>;
 type useQueryOptions<T> = SWRConfiguration & {
@@ -2406,6 +2406,7 @@ type PosterLayoutConfig = {
     updateTime?: layoutInfo;
 };
 type DrawOptions = {
+    direction?: "ltr" | "rtl";
     /**
      * Color of common text
      */

package/dist/index.d.ts

@@ -170,7 +170,7 @@ declare global {
         };
     }
 }
-declare const _default: "3.0.4-alpha.4";
+declare const _default: "3.1.0-alpha.0";
 
 declare const fetcher: (url: string, init: RequestInit | undefined, queryOptions: useQueryOptions<any>) => Promise<any>;
 type useQueryOptions<T> = SWRConfiguration & {
@@ -2406,6 +2406,7 @@ type PosterLayoutConfig = {
     updateTime?: layoutInfo;
 };
 type DrawOptions = {
+    direction?: "ltr" | "rtl";
     /**
      * Color of common text
      */

package/dist/index.js

@@ -76,9 +76,9 @@ function useMarketCategoriesConfig() {
 // src/version.ts
 if (typeof window !== "undefined") {
   window.__ORDERLY_VERSION__ = window.__ORDERLY_VERSION__ || {};
-  window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "3.0.4-alpha.4";
+  window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "3.1.0-alpha.0";
 }
-var version_default = "3.0.4-alpha.4";
+var version_default = "3.1.0-alpha.0";
 var fetcher = (url, init2 = {}, queryOptions) => net.get(url, init2, queryOptions?.formatter);
 var noCacheConfig = {
   dedupingInterval: 0,
@@ -7420,6 +7420,7 @@ var useLeverageBySymbol = (symbol, marginMode) => {
 function useMaxQty(symbol, side, reduceOnlyOrOptions, marginMode) {
   const reduceOnly = typeof reduceOnlyOrOptions === "object" && reduceOnlyOrOptions !== null ? reduceOnlyOrOptions.reduceOnly ?? false : reduceOnlyOrOptions ?? false;
   const finalMarginMode = typeof reduceOnlyOrOptions === "object" && reduceOnlyOrOptions !== null ? reduceOnlyOrOptions.marginMode ?? types.MarginMode.CROSS : marginMode ?? types.MarginMode.CROSS;
+  const currentOrderReferencePrice = typeof reduceOnlyOrOptions === "object" && reduceOnlyOrOptions !== null && typeof reduceOnlyOrOptions.currentOrderReferencePrice === "number" && reduceOnlyOrOptions.currentOrderReferencePrice > 0 ? reduceOnlyOrOptions.currentOrderReferencePrice : void 0;
   const positions3 = usePositions();
   const accountInfo = useAccountInfo();
   const symbolInfo = useSymbolsInfo();
@@ -7460,18 +7461,18 @@ function useMaxQty(symbol, side, reduceOnlyOrOptions, marginMode) {
       const pendingLongOrders = buyOrdersQty > 0 ? [{ referencePrice: markPrice, quantity: buyOrdersQty }] : [];
       const pendingSellOrders = sellOrdersQty > 0 ? [{ referencePrice: markPrice, quantity: sellOrdersQty }] : [];
       const markPriceDecimal = new utils.Decimal(markPrice);
-      const leverageDecimal = new utils.Decimal(leverage);
-      const isoOrderFrozenLong = buyOrdersQty > 0 ? markPriceDecimal.mul(buyOrdersQty).div(leverageDecimal).toNumber() : 0;
-      const isoOrderFrozenShort = sellOrdersQty > 0 ? markPriceDecimal.mul(sellOrdersQty).div(leverageDecimal).toNumber() : 0;
+      const marginRate = perp.account.isolatedMarginRate({ leverage });
+      const isoOrderFrozenLong = buyOrdersQty > 0 ? markPriceDecimal.mul(buyOrdersQty).mul(marginRate).toNumber() : 0;
+      const isoOrderFrozenShort = sellOrdersQty > 0 ? markPriceDecimal.mul(sellOrdersQty).mul(marginRate).toNumber() : 0;
       const symbolMaxNotional = accountInfo.max_notional?.[symbol] ?? perp.positions.maxPositionNotional({
         leverage,
         IMRFactor: IMR_Factor
       });
-      const currentOrderReferencePrice = typeof reduceOnlyOrOptions === "object" && reduceOnlyOrOptions !== null && typeof reduceOnlyOrOptions.currentOrderReferencePrice === "number" && reduceOnlyOrOptions.currentOrderReferencePrice > 0 ? reduceOnlyOrOptions.currentOrderReferencePrice : markPrice;
+      const effectiveOrderReferencePrice = currentOrderReferencePrice ?? markPrice;
       return perp.account.maxQtyForIsolatedMargin({
         symbol,
         orderSide: side,
-        currentOrderReferencePrice,
+        currentOrderReferencePrice: effectiveOrderReferencePrice,
         availableBalance,
         leverage,
         baseIMR,
@@ -7514,8 +7515,10 @@ function useMaxQty(symbol, side, reduceOnlyOrOptions, marginMode) {
     symbolInfo,
     side,
     totalCollateral,
+    freeCollateralUSDCOnly,
     finalMarginMode,
-    symbolLeverage
+    symbolLeverage,
+    currentOrderReferencePrice
   ]);
   return Math.max(maxQty, 0);
 }
@@ -12814,15 +12817,17 @@ var BackgroundPaint = class extends BasePaint {
     );
   }
   async _drawImage(options) {
+    const width = this.painter.width * this.painter.ratio;
+    const height = this.painter.height * this.painter.ratio;
     return this.loadImg(options.backgroundImg).then((img) => {
       this.img = img;
-      this.ctx.drawImage(
-        this.img,
-        0,
-        0,
-        this.painter.width * this.painter.ratio,
-        this.painter.height * this.painter.ratio
-      );
+      this.ctx.save();
+      if (options.direction === "rtl") {
+        this.ctx.translate(width, 0);
+        this.ctx.scale(-1, 1);
+      }
+      this.ctx.drawImage(this.img, 0, 0, width, height);
+      this.ctx.restore();
     });
   }
   loadImg(url) {
@@ -12885,6 +12890,7 @@ var DataPaint = class extends BasePaint {
     this.BROKER_BADGE_HEIGHT = 18;
     this.BROKER_BADGE_PADDING_X = 8;
     this.BROKER_BADGE_RADIUS = 4;
+    this.ITEM_GAP = 7;
   }
   formatMarginMode(marginMode) {
     return marginMode === types.MarginMode.ISOLATED ? "Isolated" : "Cross";
@@ -12932,7 +12938,9 @@ var DataPaint = class extends BasePaint {
       color: layout.color,
       fontSize: this._ratio(layout.fontSize),
       top: this._ratio(position.top),
-      left: this._ratio(position.left),
+      left: this.inlineStart(options, position.left),
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options),
       textBaseline: "top",
       fontFamily: options.fontFamily
     });
@@ -12943,126 +12951,63 @@ var DataPaint = class extends BasePaint {
       options
     );
     const { position, fontSize = 14 } = layout;
-    let left = this._ratio(position.left);
+    let cursor = this.inlineStart(options, position.left);
     const top = layout.position.top + offsetTop + this.transformTop;
-    let prevElementBoundingBox = {};
+    const items = [];
     if (typeof options.data?.position.side !== "undefined") {
-      prevElementBoundingBox = this._drawText(options.data.position.side, {
+      items.push({
+        kind: "text",
+        text: options.data.position.side,
         color: options.data?.position.side.toUpperCase() === "LONG" ? options.profitColor || this.DEFAULT_PROFIT_COLOR : options.lossColor || this.DEFAULT_LOSS_COLOR,
-        left,
-        top: this._ratio(top),
-        fontSize: this._ratio(fontSize),
-        fontFamily: options.fontFamily
+        fontSize: this._ratio(fontSize)
       });
     }
     if (typeof options.data?.position.symbol !== "undefined") {
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      if (prevElementBoundingBox.width) {
-        prevElementBoundingBox = this._drawText("|", {
-          color: "rgba(255,255,255,0.2)",
-          left,
-          top: this._ratio(top),
-          fontSize: this._ratio(fontSize),
-          fontFamily: options.fontFamily
-        });
-      }
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      prevElementBoundingBox = this._drawText(options.data?.position.symbol, {
+      items.push({
+        kind: "text",
+        text: options.data.position.symbol,
         color: layout.color,
-        left,
-        top: this._ratio(top),
-        fontSize: this._ratio(fontSize),
-        fontFamily: options.fontFamily
+        fontSize: this._ratio(fontSize)
+      });
+    }
+    const brokerName = options.data?.position.brokerName?.trim();
+    if (brokerName) {
+      items.push({
+        kind: "badge",
+        text: brokerName,
+        fontSize: this._ratio(12),
+        fontWeight: 600
       });
-      const brokerName = options.data?.position.brokerName?.trim();
-      if (brokerName) {
-        left += (prevElementBoundingBox.width ?? 0) + this._ratio(10);
-        const badgeHeight = this._ratio(this.BROKER_BADGE_HEIGHT);
-        const badgePaddingX = this._ratio(this.BROKER_BADGE_PADDING_X);
-        const badgeRadius = this._ratio(this.BROKER_BADGE_RADIUS);
-        const badgeFontSize = this._ratio(12);
-        const badgeFontWeight = 600;
-        const textMetrics = this._drawText(
-          brokerName,
-          {
-            left: 0,
-            top: 0,
-            fontSize: badgeFontSize,
-            fontWeight: badgeFontWeight,
-            fontFamily: options.fontFamily
-          },
-          true
-        );
-        const badgeWidth = (textMetrics.width ?? 0) + badgePaddingX * 2;
-        const badgeTop = this._ratio(top) - badgeHeight / 2;
-        this._fillRoundedRect(
-          left,
-          badgeTop,
-          badgeWidth,
-          badgeHeight,
-          badgeRadius,
-          "rgba(255,255,255,0.06)"
-        );
-        this._drawText(brokerName, {
-          color: "rgba(255,255,255,0.36)",
-          left: left + badgePaddingX,
-          top: badgeTop + badgeHeight / 2,
-          fontSize: badgeFontSize,
-          fontWeight: badgeFontWeight,
-          fontFamily: options.fontFamily,
-          textBaseline: "middle"
-        });
-        prevElementBoundingBox = {
-          ...prevElementBoundingBox,
-          width: badgeWidth
-        };
-      }
     }
     const marginMode = options.data?.position.marginMode;
     if (marginMode) {
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      if (prevElementBoundingBox.width) {
-        prevElementBoundingBox = this._drawText("|", {
-          color: "rgba(255,255,255,0.2)",
-          left,
-          top: this._ratio(top),
-          fontSize: this._ratio(fontSize),
-          fontFamily: options.fontFamily
-        });
-      }
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      const marginModeText = this.formatMarginMode(marginMode);
-      prevElementBoundingBox = this._drawText(marginModeText, {
+      items.push({
+        kind: "text",
+        text: this.formatMarginMode(marginMode),
         color: layout.color,
-        left,
-        top: this._ratio(top),
-        fontSize: this._ratio(fontSize),
-        fontFamily: options.fontFamily
+        fontSize: this._ratio(fontSize)
       });
     }
     if (typeof options.data?.position.leverage !== "undefined") {
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      if (prevElementBoundingBox.width) {
-        prevElementBoundingBox = this._drawText("|", {
-          color: "rgba(255,255,255,0.2)",
-          left,
-          top: this._ratio(top),
-          fontSize: this._ratio(fontSize),
-          fontFamily: options.fontFamily
-        });
-      }
-      left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
-      prevElementBoundingBox = this._drawText(
-        `${options.data?.position.leverage}X`,
-        {
-          color: layout.color,
-          left,
-          top: this._ratio(top),
-          fontSize: this._ratio(fontSize),
-          fontFamily: options.fontFamily
-        }
-      );
+      items.push({
+        kind: "text",
+        text: `${options.data.position.leverage}X`,
+        color: layout.color,
+        fontSize: this._ratio(fontSize)
+      });
     }
+    const topPx = this._ratio(top);
+    items.forEach((item, index) => {
+      cursor = this.drawInlineItem(options, item, cursor, topPx);
+      if (index < items.length - 1) {
+        cursor = this.drawInlineSeparator(
+          options,
+          cursor,
+          topPx,
+          this._ratio(fontSize)
+        );
+      }
+    });
   }
   _fillRoundedRect(x, y, width, height, radius, color) {
     const r = Math.min(radius, width / 2, height / 2);
@@ -13084,7 +13029,7 @@ var DataPaint = class extends BasePaint {
       options
     );
     const { position } = layout;
-    let left = this._ratio(position.left);
+    let cursor = this.inlineStart(options, position.left);
     let prevElementBoundingBox = {};
     const top = (position.top ?? 0) + offsetTop + this.transformTop;
     if (typeof options.data?.position.ROI !== "undefined") {
@@ -13093,11 +13038,13 @@ var DataPaint = class extends BasePaint {
         `${prefix}${utils.commify(options.data?.position.ROI)}%`,
         {
           color: prefix === "+" ? options.profitColor || this.DEFAULT_PROFIT_COLOR : options.lossColor || this.DEFAULT_LOSS_COLOR,
-          left,
+          left: cursor,
           top: this._ratio(top),
           fontSize: this._ratio(layout.fontSize),
           fontWeight: 700,
-          fontFamily: options.fontFamily
+          fontFamily: options.fontFamily,
+          textAlign: this.inlineStartAlign(options),
+          direction: this.textDirection(options)
         }
       );
     }
@@ -13106,21 +13053,27 @@ var DataPaint = class extends BasePaint {
       let text = `${prefix}${utils.commify(options.data?.position.pnl)} ${options.data?.position.currency}`;
       let fontWeight = 600;
       if (prevElementBoundingBox.width) {
-        left += (prevElementBoundingBox.width ?? 0) + this._ratio(8);
+        cursor = this.advanceCursor(
+          options,
+          cursor,
+          (prevElementBoundingBox.width ?? 0) + this._ratio(8)
+        );
         text = `(${text})`;
       } else {
-        left = this._ratio(position.left);
+        cursor = this.inlineStart(options, position.left);
         fontWeight = 700;
       }
       const color = typeof options.data.position.ROI === "undefined" ? prefix === "+" ? options.profitColor || this.DEFAULT_PROFIT_COLOR : options.lossColor || this.DEFAULT_LOSS_COLOR : layout.secondaryColor;
       const fontSize = typeof options.data.position.ROI === "undefined" ? this._ratio(layout.fontSize) : this._ratio(layout.secondaryFontSize);
       prevElementBoundingBox = this._drawText(text, {
         color,
-        left,
+        left: cursor,
         top: this._ratio(top),
         fontSize,
         fontWeight,
-        fontFamily: options.fontFamily
+        fontFamily: options.fontFamily,
+        textAlign: this.inlineStartAlign(options),
+        direction: this.textDirection(options)
       });
     }
   }
@@ -13134,22 +13087,27 @@ var DataPaint = class extends BasePaint {
     (options.data?.position.informations.length ?? 0) === 2;
     const col = informations.length > 4 ? 3 : 2;
     informations.forEach((info, index) => {
-      const left = position.left + index % col * this.positionInfoCellWidth;
+      const colIndex = index % col;
+      const inlineOffset = position.left + colIndex * this.positionInfoCellWidth;
       const top = position.top + Math.floor(index / col) * 38 + this.transformTop;
       this._drawText(info.title, {
-        left: this._ratio(left),
+        left: this.inlineStart(options, inlineOffset),
         top: this._ratio(top),
         fontSize: this._ratio(10),
         color: layout.labelColor,
-        fontFamily: options.fontFamily
+        fontFamily: options.fontFamily,
+        textAlign: this.inlineStartAlign(options),
+        direction: this.textDirection(options)
       });
       this._drawText(info.value, {
-        left: this._ratio(left),
+        left: this.inlineStart(options, inlineOffset),
         top: this._ratio(top + 17),
         fontSize: this._ratio(layout.fontSize),
         fontWeight: 500,
         color: layout.color,
-        fontFamily: options.fontFamily
+        fontFamily: options.fontFamily,
+        textAlign: this.inlineStartAlign(options),
+        direction: this.textDirection(options)
       });
     });
   }
@@ -13164,13 +13122,14 @@ var DataPaint = class extends BasePaint {
     return this._drawText(
       options.data?.domain,
       {
-        left: !hasReferral ? this._ratio(position.left) : this._ratio(this.painter.width - 20),
+        left: !hasReferral ? this.inlineStart(options, position.left) : this.inlineEnd(options, 20),
         top: !hasReferral ? this._ratio(top) : this._ratio(this.painter.height - 16),
         fontSize: this._ratio(layout.fontSize),
         color: options.brandColor ?? this.DEFAULT_PROFIT_COLOR,
         fontFamily: options.fontFamily,
         textBaseline: layout.textBaseline,
-        textAlign: !hasReferral ? layout.textAlign : "end",
+        textAlign: !hasReferral ? this.inlineStartAlign(options) : this.inlineEndAlign(options),
+        direction: this.textDirection(options),
         fontWeight: 600
       },
       onlyMeasure
@@ -13184,10 +13143,10 @@ var DataPaint = class extends BasePaint {
     const { position } = layout;
     const hasReferral = this.hasReferral(options);
     let top = this.painter.height - position.bottom;
-    let left = this._ratio(position.left);
+    let left = this.inlineStart(options, position.left);
     if (hasReferral) {
       const metrics = this.drawDomainUrl(options, true);
-      left = this._ratio(this.painter.width) - metrics.width - this._ratio(8 + position.left);
+      left = this.inlineStart(options, position.left + 8) + (this.isRTL(options) ? metrics.width : -metrics.width);
       top = this.painter.height - position.bottom;
     }
     this._drawText(
@@ -13199,9 +13158,10 @@ var DataPaint = class extends BasePaint {
         fontSize: this._ratio(layout.fontSize),
         color: layout.color,
         // color: "red",
-        textAlign: !hasReferral ? layout.textAlign : "end",
+        textAlign: !hasReferral ? this.inlineStartAlign(options) : this.inlineEndAlign(options),
         fontFamily: options.fontFamily,
-        textBaseline: layout.textBaseline
+        textBaseline: layout.textBaseline,
+        direction: this.textDirection(options)
       }
     );
   }
@@ -13223,36 +13183,44 @@ var DataPaint = class extends BasePaint {
     const searchParams = url.searchParams;
     searchParams.append("ref", options.data.referral.code);
     url.search = searchParams.toString();
+    const qrSize = this._ratio(this.QRCODE_SIZE);
+    const qrLeft = this.isRTL(options) ? this.inlineStart(options, position.left) - qrSize : this.inlineStart(options, position.left);
     qrPaint(this.ctx, {
       size: this._ratio(this.QRCODE_SIZE),
       padding: this._ratio(2),
-      left: this._ratio(position.left),
+      left: qrLeft,
       top: this._ratio(top - this.QRCODE_SIZE),
       data: `${url.toString()}`
     });
     this._drawText(options.data.referral.slogan, {
-      left: this._ratio(position.left + 66),
+      left: this.inlineStart(options, position.left + 66),
       top: this._ratio(top - this.QRCODE_SIZE),
       fontSize: this._ratio(14),
       color: options.brandColor ?? this.DEFAULT_PROFIT_COLOR,
       fontFamily: options.fontFamily,
-      textBaseline: "top"
+      textBaseline: "top",
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options)
     });
     this._drawText("Referral Code", {
-      left: this._ratio(position.left + 66),
+      left: this.inlineStart(options, position.left + 66),
       top: this._ratio(top - 29),
       fontSize: this._ratio(12),
       color: layout.color,
       fontFamily: options.fontFamily,
-      textBaseline: "middle"
+      textBaseline: "middle",
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options)
     });
     this._drawText(options.data.referral.code, {
-      left: this._ratio(position.left + 66),
+      left: this.inlineStart(options, position.left + 66),
       top: this._ratio(top),
       fontSize: this._ratio(16),
       color: messageLayout.color,
       fontFamily: options.fontFamily,
-      textBaseline: "bottom"
+      textBaseline: "bottom",
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options)
     });
   }
   _drawText(str, options, onlyMeasure = false) {
@@ -13264,13 +13232,15 @@ var DataPaint = class extends BasePaint {
       fontWeight = 500,
       color = "black",
       textBaseline = "middle",
-      textAlign = "start"
+      textAlign = "start",
+      direction = "ltr"
     } = options ?? {};
     this.ctx.save();
     this.ctx.font = `${fontWeight} ${fontSize}px ${options?.fontFamily}`;
     this.ctx.fillStyle = color;
     this.ctx.textBaseline = textBaseline;
     this.ctx.textAlign = textAlign;
+    this.ctx.direction = direction;
     boundingBox = this.ctx.measureText(str);
     if (!onlyMeasure) {
       this.ctx.fillText(str, left, top);
@@ -13284,6 +13254,98 @@ var DataPaint = class extends BasePaint {
   _ratio(num) {
     return num * this.painter.ratio;
   }
+  canvasWidth() {
+    return this._ratio(this.painter.width);
+  }
+  textDirection(options) {
+    return this.isRTL(options) ? "rtl" : "ltr";
+  }
+  isRTL(options) {
+    return options.direction === "rtl";
+  }
+  inlineStart(options, value) {
+    return this.isRTL(options) ? this.canvasWidth() - this._ratio(value) : this._ratio(value);
+  }
+  inlineEnd(options, value) {
+    return this.isRTL(options) ? this._ratio(value) : this.canvasWidth() - this._ratio(value);
+  }
+  inlineStartAlign(options) {
+    return this.isRTL(options) ? "right" : "left";
+  }
+  inlineEndAlign(options) {
+    return this.isRTL(options) ? "left" : "right";
+  }
+  advanceCursor(options, cursor, width) {
+    return this.isRTL(options) ? cursor - width : cursor + width;
+  }
+  drawInlineSeparator(options, cursor, top, fontSize) {
+    const gap = this._ratio(this.ITEM_GAP);
+    const separatorMetrics = this._drawText("|", {
+      color: "rgba(255,255,255,0.2)",
+      left: this.advanceCursor(options, cursor, gap),
+      top,
+      fontSize,
+      fontFamily: options.fontFamily,
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options)
+    });
+    return this.advanceCursor(
+      options,
+      this.advanceCursor(options, cursor, gap),
+      (separatorMetrics.width ?? 0) + gap
+    );
+  }
+  drawInlineItem(options, item, cursor, top) {
+    if (item.kind === "text") {
+      const metrics = this._drawText(item.text, {
+        color: item.color,
+        left: cursor,
+        top,
+        fontSize: item.fontSize,
+        fontWeight: item.fontWeight,
+        fontFamily: options.fontFamily,
+        textAlign: this.inlineStartAlign(options),
+        direction: this.textDirection(options)
+      });
+      return this.advanceCursor(options, cursor, metrics.width ?? 0);
+    }
+    const badgeHeight = this._ratio(this.BROKER_BADGE_HEIGHT);
+    const badgePaddingX = this._ratio(this.BROKER_BADGE_PADDING_X);
+    const badgeRadius = this._ratio(this.BROKER_BADGE_RADIUS);
+    const textMetrics = this._drawText(
+      item.text,
+      {
+        left: 0,
+        top: 0,
+        fontSize: item.fontSize,
+        fontWeight: item.fontWeight ?? 600,
+        direction: this.textDirection(options)
+      },
+      true
+    );
+    const badgeWidth = (textMetrics.width ?? 0) + badgePaddingX * 2;
+    const badgeTop = top - badgeHeight / 2;
+    const badgeLeft = this.isRTL(options) ? cursor - badgeWidth : cursor;
+    this._fillRoundedRect(
+      badgeLeft,
+      badgeTop,
+      badgeWidth,
+      badgeHeight,
+      badgeRadius,
+      "rgba(255,255,255,0.06)"
+    );
+    this._drawText(item.text, {
+      color: "rgba(255,255,255,0.36)",
+      left: this.isRTL(options) ? badgeLeft + badgeWidth - badgePaddingX : badgeLeft + badgePaddingX,
+      top: badgeTop + badgeHeight / 2,
+      fontSize: item.fontSize,
+      fontWeight: item.fontWeight ?? 600,
+      textBaseline: "middle",
+      textAlign: this.inlineStartAlign(options),
+      direction: this.textDirection(options)
+    });
+    return this.advanceCursor(options, cursor, badgeWidth);
+  }
 };
 
 // src/services/painter/painter.ts
@@ -19072,20 +19134,39 @@ var useOrderEntry2 = (symbol, options = {}) => {
     symbolLeverage
   });
   const [estSlippage, setEstSlippage] = React.useState(null);
+  const [bestAskBidSnapshot, setBestAskBidSnapshot] = React.useState([]);
   const [doCreateOrder, { isMutating }] = useMutation(
     getCreateOrderUrl(formattedOrder)
   );
-  const bestAskBid = askAndBid.current?.[0] || [];
-  const referencePriceFromOrder = bestAskBid.length >= 2 && formattedOrder.order_type && formattedOrder.side ? getOrderReferencePriceFromOrder(formattedOrder, bestAskBid) : null;
+  const bestAskBid = bestAskBidSnapshot;
+  const getReferencePriceForSide = (side) => {
+    if (bestAskBid.length < 2 || !formattedOrder.order_type) {
+      return null;
+    }
+    const referencePrice = getOrderReferencePriceFromOrder(
+      {
+        ...formattedOrder,
+        side
+      },
+      bestAskBid
+    );
+    const slippage = Number(formattedOrder.slippage);
+    if (effectiveMarginMode !== types.MarginMode.ISOLATED || side !== types.OrderSide.BUY || formattedOrder.order_type !== types.OrderType.MARKET || !referencePrice || !Number.isFinite(slippage) || slippage <= 0) {
+      return referencePrice;
+    }
+    return new utils.Decimal(referencePrice).mul(new utils.Decimal(1).add(new utils.Decimal(slippage).div(100))).toNumber();
+  };
+  const buyReferencePriceFromOrder = getReferencePriceForSide(types.OrderSide.BUY);
+  const sellReferencePriceFromOrder = getReferencePriceForSide(types.OrderSide.SELL);
   const maxBuyQtyValue = useMaxQty(symbol, types.OrderSide.BUY, {
     reduceOnly: formattedOrder.reduce_only,
     marginMode: effectiveMarginMode,
-    currentOrderReferencePrice: referencePriceFromOrder && referencePriceFromOrder > 0 ? referencePriceFromOrder : void 0
+    currentOrderReferencePrice: buyReferencePriceFromOrder && buyReferencePriceFromOrder > 0 ? buyReferencePriceFromOrder : void 0
   });
   const maxSellQtyValue = useMaxQty(symbol, types.OrderSide.SELL, {
     reduceOnly: formattedOrder.reduce_only,
     marginMode: effectiveMarginMode,
-    currentOrderReferencePrice: referencePriceFromOrder && referencePriceFromOrder > 0 ? referencePriceFromOrder : void 0
+    currentOrderReferencePrice: sellReferencePriceFromOrder && sellReferencePriceFromOrder > 0 ? sellReferencePriceFromOrder : void 0
   });
   const maxQtyValue = formattedOrder.side === types.OrderSide.BUY ? maxBuyQtyValue : maxSellQtyValue;
   const maxQty = options.maxQty ?? maxQtyValue;
@@ -19177,6 +19258,10 @@ var useOrderEntry2 = (symbol, options = {}) => {
   React.useEffect(() => {
     updateOrderPrice();
   }, [formattedOrder.order_type_ext, formattedOrder.level]);
+  React.useEffect(() => {
+    askAndBid.current = [[]];
+    setBestAskBidSnapshot([]);
+  }, [symbol]);
   const onOrderBookUpdate = useDebounce.useDebouncedCallback((data) => {
     const parsedData = [
       [data.asks?.[data.asks.length - 1]?.[0], data.bids?.[0]?.[0]],
@@ -19186,6 +19271,10 @@ var useOrderEntry2 = (symbol, options = {}) => {
       [data.asks?.[data.asks.length - 5]?.[0], data.bids?.[4]?.[0]]
     ];
     askAndBid.current = parsedData;
+    const nextBestAskBid = parsedData[0] || [];
+    setBestAskBidSnapshot(
+      (prev) => prev[0] === nextBestAskBid[0] && prev[1] === nextBestAskBid[1] ? prev : nextBestAskBid
+    );
     updateOrderPriceByOrderBook();
     updateEstSlippage(data);
   }, 200);