@orderly.network/trading 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/index.js

@@ -1823,16 +1823,16 @@ var init_assetView = __esm({
     init_assetView_widget();
   }
 });
-var OrderBookContext; exports.useOrderBookContext = void 0; var ORDERBOOK_COIN_TYPE_KEY, ORDERBOOK_MOBILE_COIN_TYPE_KEY; exports.OrderBookProvider = void 0;
+var OrderBookContext, useOrderBookContext, ORDERBOOK_COIN_TYPE_KEY, ORDERBOOK_MOBILE_COIN_TYPE_KEY, OrderBookProvider;
 var init_orderContext = __esm({
   "src/components/base/orderBook/orderContext.tsx"() {
     OrderBookContext = React12.createContext({
       cellHeight: 22
     });
-    exports.useOrderBookContext = () => React12.useContext(OrderBookContext);
+    useOrderBookContext = () => React12.useContext(OrderBookContext);
     ORDERBOOK_COIN_TYPE_KEY = "orderbook_coin_type";
     ORDERBOOK_MOBILE_COIN_TYPE_KEY = "orderbook_mobile_coin_unit";
-    exports.OrderBookProvider = (props) => {
+    OrderBookProvider = (props) => {
       const [mode, setMode] = React12.useState("quantity");
       const [totalMode, setTotalMode] = React12.useState("quantity");
       const memoizedValue = React12__default.default.useMemo(() => {
@@ -1905,7 +1905,7 @@ var init_cell_desktop = __esm({
     init_orderContext();
     init_types();
     DesktopOrderBookCell = (props) => {
-      const { cellHeight, showTotal, onItemClick, depth, pendingOrders } = exports.useOrderBookContext();
+      const { cellHeight, showTotal, onItemClick, depth, pendingOrders } = useOrderBookContext();
       const {
         symbolInfo,
         currentHover,
@@ -2052,7 +2052,7 @@ var init_listBox_desktop = __esm({
     };
     DesktopListBox = (props) => {
       const { data, type, countQty } = props;
-      const { symbolInfo, depth } = exports.useOrderBookContext();
+      const { symbolInfo, depth } = useOrderBookContext();
       const findMaxItem = React12.useCallback(() => {
         if (!data?.length) {
           return null;
@@ -2211,7 +2211,7 @@ var init_listBox_desktop = __esm({
     };
   }
 });
-var DesktopAsks, InjectableDesktopAsks;
+var DesktopAsks;
 var init_asks_desktop = __esm({
   "src/components/desktop/orderBook/asks.desktop.tsx"() {
     init_types();
@@ -2237,13 +2237,9 @@ var init_asks_desktop = __esm({
         }
       );
     };
-    InjectableDesktopAsks = ui.injectable(
-      DesktopAsks,
-      "OrderBook.Desktop.Asks"
-    );
   }
 });
-var DesktopBids, InjectableDesktopBids;
+var DesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2268,10 +2264,6 @@ var init_bids_desktop = __esm({
         }
       );
     };
-    InjectableDesktopBids = ui.injectable(
-      DesktopBids,
-      "OrderBook.Desktop.Bids"
-    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2411,7 +2403,7 @@ var init_header_desktop = __esm({
     };
     DesktopHeader = (props) => {
       const { base, quote = "USDC" } = props;
-      const { showTotal } = exports.useOrderBookContext();
+      const { showTotal } = useOrderBookContext();
       const { t } = i18n.useTranslation();
       const [popoverOpen, setOpen] = React12__default.default.useState(false);
       const [coinType] = hooks.useLocalStorage(ORDERBOOK_COIN_TYPE_KEY, base);
@@ -2763,7 +2755,7 @@ var init_markPrice_desktop = __esm({
     init_orderContext();
     DesktopMarkPrice = (props) => {
       const { markPrice = 0, lastPrice, asks, bids, symbolInfo } = props;
-      const { showTotal } = exports.useOrderBookContext();
+      const { showTotal } = useOrderBookContext();
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-row oui-pl-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -2806,14 +2798,21 @@ var init_markPrice_desktop = __esm({
         if (bids.length === 0 && asks.length === 0) {
           return 0;
         }
-        const bid1 = Number.isNaN(bids[0][0]) ? 0 : bids[0][0];
-        const index = asks.reverse().findIndex((item) => !Number.isNaN(item[0]));
-        let ask1 = 0;
+        const bidRaw = bids[0]?.[0];
+        const bid1 = bidRaw === void 0 || Number.isNaN(bidRaw) ? new utils.Decimal(0) : new utils.Decimal(bidRaw);
+        const asksReversed = [...asks].reverse();
+        const index = asksReversed.findIndex((item) => !Number.isNaN(item[0]));
+        let ask1 = new utils.Decimal(0);
         if (index !== -1) {
-          ask1 = Number.isNaN(asks[index][0]) ? 0 : asks[index][0];
+          const askRaw = asksReversed[index][0];
+          ask1 = Number.isNaN(askRaw) ? new utils.Decimal(0) : new utils.Decimal(askRaw);
+        }
+        const mid = ask1.add(bid1).div(2);
+        if (mid.isZero()) {
+          return 0;
         }
-        const dValue = new utils.Decimal(ask1).sub(bid1).div(new utils.Decimal(ask1).add(bid1).div(2));
-        return Math.ceil(dValue.toNumber() * 1e6 + 0.1) / 1e4;
+        const dValue = ask1.sub(bid1).div(mid);
+        return dValue.mul(1e6).add(0.1).toDecimalPlaces(0, utils.Decimal.ROUND_CEIL).div(1e4).toNumber();
       }, [asks, bids]);
       return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tooltip,
@@ -2887,7 +2886,7 @@ var init_index_desktop = __esm({
         };
       }, []);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        exports.OrderBookProvider,
+        OrderBookProvider,
         {
           cellHeight: props.cellHeight ?? 20,
           onItemClick: props.onItemClick,
@@ -2928,7 +2927,7 @@ var init_index_desktop = __esm({
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(DesktopHeader, { quote, base }),
-                /* @__PURE__ */ jsxRuntime.jsx(InjectableDesktopAsks, { data: [...props.asks] }),
+                /* @__PURE__ */ jsxRuntime.jsx(DesktopAsks, { data: [...props.asks] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DesktopMarkPrice,
                   {
@@ -2939,12 +2938,12 @@ var init_index_desktop = __esm({
                     symbolInfo: props.symbolInfo
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(InjectableDesktopBids, { data: [...props.bids] }),
+                /* @__PURE__ */ jsxRuntime.jsx(DesktopBids, { data: [...props.bids] }),
                 showBuySellRatio && /* @__PURE__ */ jsxRuntime.jsx(
                   exports.BuySellRatioBar,
                   {
                     ratio: buySellRatio || null,
-                    className: "oui-h-[38px] oui-px-3 oui-text-2xs"
+                    className: "oui-text-2xs oui-px-3 oui-h-[38px]"
                   }
                 ),
                 isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-bg-bg-8/70 oui-absolute oui-inset-0 oui-z-10 oui-flex oui-items-center oui-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) })
@@ -3274,7 +3273,7 @@ var init_listBox = __esm({
     init_cell();
     ListBox = (props) => {
       const { data } = props;
-      const { mode } = exports.useOrderBookContext();
+      const { mode } = useOrderBookContext();
       return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-orderBook-list oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           OrderBookCell,
@@ -3453,7 +3452,7 @@ var init_markPrice2 = __esm({
     init_midPriceView();
     init_orderContext();
     MarkPrice = (props) => {
-      const { symbolInfo } = exports.useOrderBookContext();
+      const { symbolInfo } = useOrderBookContext();
       const { quote_dp } = symbolInfo;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Flex,
@@ -3520,7 +3519,7 @@ var init_orderBook = __esm({
         "qty"
       );
       return /* @__PURE__ */ jsxRuntime.jsx(
-        exports.OrderBookProvider,
+        OrderBookProvider,
         {
           cellHeight: props.cellHeight ?? 20,
           onItemClick: props.onItemClick,
@@ -3875,9 +3874,7 @@ var orderBook_exports = {};
 __export(orderBook_exports, {
   BuySellRatioBar: () => exports.BuySellRatioBar,
   OrderBook: () => exports.OrderBook,
-  OrderBookProvider: () => exports.OrderBookProvider,
   OrderBookWidget: () => exports.OrderBookWidget,
-  useOrderBookContext: () => exports.useOrderBookContext,
   useOrderBookScript: () => exports.useOrderBookScript
 });
 var init_orderBook2 = __esm({
@@ -3886,7 +3883,6 @@ var init_orderBook2 = __esm({
     init_orderBook_widget();
     init_orderBook_script();
     init_buySellRatioBar();
-    init_orderContext();
   }
 });
 exports.RiskRate = void 0;
@@ -4255,6 +4251,53 @@ var init_orderBookAndTrades = __esm({
     init_orderBookAndTrades_script();
   }
 });
+var KlineDragIcon, CollapseIcon, ExpandIcon;
+var init_icons = __esm({
+  "src/components/base/icons.tsx"() {
+    KlineDragIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            id: "Vector",
+            d: "M5.9989 1.00708C5.8709 1.00708 5.7369 1.05008 5.6394 1.14758L3.7959 3.00708L4.4989 3.71008L5.4989 2.72607V4.50708C5.4989 4.78308 5.7229 5.00708 5.9989 5.00708C6.2749 5.00708 6.4989 4.78308 6.4989 4.50708V2.72607L7.4989 3.71008L8.2019 3.00708L6.3584 1.14758C6.2604 1.05008 6.1269 1.00708 5.9989 1.00708ZM5.9989 7.00707C5.7229 7.00707 5.4989 7.23107 5.4989 7.50707V9.28808L4.4989 8.30407L3.7959 9.00707L5.6394 10.8666C5.8349 11.0616 6.1629 11.0616 6.3584 10.8666L8.2019 9.00707L7.4989 8.30407L6.4989 9.28808V7.50707C6.4989 7.23107 6.2749 7.00707 5.9989 7.00707Z"
+          }
+        ) })
+      }
+    );
+    CollapseIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
+      }
+    );
+    ExpandIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
+      }
+    );
+  }
+});
 
 // src/components/desktop/layout/switchLayout.tsx
 var switchLayout_exports = {};
@@ -5364,29 +5407,6 @@ var init_tradingview_script = __esm({
     Key = "TRADINGVIEW_MOBILE_HEIGHT";
   }
 });
-var KlineDragIcon;
-var init_icons = __esm({
-  "src/components/base/icons.tsx"() {
-    KlineDragIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "12",
-        height: "12",
-        viewBox: "0 0 12 12",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            id: "Vector",
-            d: "M5.9989 1.00708C5.8709 1.00708 5.7369 1.05008 5.6394 1.14758L3.7959 3.00708L4.4989 3.71008L5.4989 2.72607V4.50708C5.4989 4.78308 5.7229 5.00708 5.9989 5.00708C6.2749 5.00708 6.4989 4.78308 6.4989 4.50708V2.72607L7.4989 3.71008L8.2019 3.00708L6.3584 1.14758C6.2604 1.05008 6.1269 1.00708 5.9989 1.00708ZM5.9989 7.00707C5.7229 7.00707 5.4989 7.23107 5.4989 7.50707V9.28808L4.4989 8.30407L3.7959 9.00707L5.6394 10.8666C5.8349 11.0616 6.1629 11.0616 6.3584 10.8666L8.2019 9.00707L7.4989 8.30407L6.4989 9.28808V7.50707C6.4989 7.23107 6.2749 7.00707 5.9989 7.00707Z"
-          }
-        ) })
-      }
-    );
-  }
-});
 var TradingviewUI;
 var init_tradingview_ui = __esm({
   "src/components/mobile/tradingview/tradingview.ui.tsx"() {
@@ -6893,10 +6913,17 @@ var Account = (props) => {
     }
   );
 };
-var InjectableAccount = ui.injectable(Account, "Account.MobileAccountMenu");
+ui.installExtension({
+  name: "mobile-account-menu",
+  scope: ["*"],
+  positions: [ui.ExtensionPositionEnum.MobileAccountMenu],
+  builder: useAccountScript,
+  __isInternal: true
+})((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Account, { ...props });
+});
 var MobileAccountMenuExtension = () => {
-  const state = useAccountScript();
-  return /* @__PURE__ */ jsxRuntime.jsx(InjectableAccount, { ...state });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.ExtensionSlot, { position: ui.ExtensionPositionEnum.MobileAccountMenu });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -7698,6 +7725,9 @@ init_fundingRate();
 init_fundingRateModal_script();
 init_fundingRateModal_ui();
 init_fundingRateModal_widget();
+
+// src/pages/trading/trading.ui.desktop.tsx
+init_icons();
 var SortablePanel = (props) => {
   const { showIndicator, dragOverlay } = props;
   const nodeRef = React12.useRef(null);
@@ -8021,7 +8051,7 @@ var useTradingScript = () => {
       case "middle":
         return 70;
       case "large":
-        return 280;
+        return 360;
       default:
         return 0;
     }
@@ -8317,9 +8347,19 @@ var DesktopLayout4 = (props) => {
     dataListMinHeight
   } = props;
   const { showCountdown, closeCountdown } = useShowRwaCountdown(props.symbol);
+  const { brokerName } = hooks.useBadgeBySymbol(props.symbol);
+  const { t } = i18n.useTranslation();
   const symbolInfoBarHeight2 = React12.useMemo(() => {
-    return showCountdown ? 104 : 56;
-  }, [showCountdown]);
+    let height = 56;
+    if (brokerName) {
+      height += 46;
+      height += 8;
+    }
+    if (showCountdown) {
+      height += 48;
+    }
+    return height;
+  }, [showCountdown, brokerName]);
   const { isRwa, open } = hooks.useGetRwaSymbolOpenStatus(props.symbol);
   React12.useEffect(() => {
     if (isRwa && !open) {
@@ -8438,6 +8478,36 @@ var DesktopLayout4 = (props) => {
       onSymbolChange: props.onSymbolChange
     }
   );
+  const toggleButtoncls = ui.cn(
+    "oui-text-base-contrast-36",
+    resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
+  );
+  const marketsHeader = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      className: panelSize === "small" ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
+      justify: panelSize === "large" ? "between" : "center",
+      width: "100%",
+      px: 3,
+      children: [
+        panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
+        panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { className: toggleButtoncls })
+          }
+        ),
+        (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { className: toggleButtoncls })
+          }
+        )
+      ]
+    }
+  );
   const marketsView = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
     {
@@ -8449,16 +8519,37 @@ var DesktopLayout4 = (props) => {
       style: { minWidth: marketsWidth },
       className: "oui-trading-markets-container oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
-      children: !animating && marketLayout === "left" && marketsWidget
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Flex,
+        {
+          id: "oui-side-markets",
+          className: "oui-relative oui-font-semibold",
+          direction: "column",
+          gapY: 5,
+          height: "100%",
+          width: "100%",
+          children: [
+            marketsHeader,
+            !animating && marketLayout === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                width: "100%",
+                className: ui.cn(
+                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
+                  panelSize === "middle" && "oui-h-full"
+                ),
+                children: marketsWidget
+              }
+            )
+          ]
+        }
+      )
     }
   );
   const symbolInfoBarView = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
     {
       className: "oui-trading-symbolInfoBar-container",
-      intensity: 900,
-      r: "2xl",
-      px: 3,
       width: "100%",
       style: {
         minHeight: symbolInfoBarHeight2,
@@ -9013,13 +9104,6 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
-var InjectableTradingPage = ui.injectable(
-  DesktopLayout4,
-  "Trading.TradingPage"
-);
-var TradingPageExtension = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(InjectableTradingPage, { ...props });
-};
 var Countdown = ({
   timeInterval
 }) => {
@@ -9126,6 +9210,12 @@ var MaybeEqual = () => {
 var MobileLayout4 = (props) => {
   const { t } = i18n.useTranslation();
   const { isRwa, open, closeTimeInterval } = hooks.useGetRwaSymbolInfo(props.symbol);
+  const { brokerId, brokerName, brokerNameRaw, displayName } = hooks.useBadgeBySymbol(
+    props.symbol
+  );
+  const isCommunityListed = Boolean(brokerId ?? brokerName);
+  const baseFromSymbol = props.symbol?.split("_")[1] ?? props.symbol ?? "";
+  const symbolWithBroker = brokerName != null ? `${baseFromSymbol}-${brokerNameRaw}` : displayName ?? props.symbol ?? "";
   React12.useEffect(() => {
     if (isRwa && !open) {
       showRwaOutsideMarketHoursNotify();
@@ -9219,7 +9309,17 @@ var MobileLayout4 = (props) => {
       )
     }
   );
-  const topBar = /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { intensity: 900, className: "oui-rounded-xl", mx: 1, px: 3, py: 2, children: [
+  const topBar = /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { mx: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      markets.SymbolInfoBarRiskNotice,
+      {
+        visible: isCommunityListed,
+        symbolWithBroker,
+        brokerName: brokerNameRaw ?? brokerName ?? "",
+        autoHeight: true,
+        className: "oui-my-1"
+      }
+    ) }),
     symbolInfoBar,
     /* @__PURE__ */ jsxRuntime.jsx(
       ui.SimpleSheet,
@@ -9227,7 +9327,7 @@ var MobileLayout4 = (props) => {
         open: props.openMarketsSheet,
         onOpenChange: props.onOpenMarketsSheetChange,
         classNames: {
-          body: "oui-h-full oui-pb-0",
+          body: "oui-h-full oui-pb-0 ",
           content: "!oui-w-[372px] !oui-max-w-[372px] !oui-p-0"
         },
         contentProps: { side: "left", closeable: false },
@@ -9261,11 +9361,12 @@ var MobileLayout4 = (props) => {
 };
 var Trading = (props) => {
   const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    TradingPageExtension,
+    DesktopLayout4,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props