@orderly.network/trading 3.0.4-alpha.1 → 3.0.4-alpha.3

package/dist/index.mjs

@@ -1,17 +1,17 @@
-import { useAccount, useLocalStorage, useConfig, useWalletConnector, useMutation, useChains, useReferralInfo, useCurEpochEstimate, TWType, useEpochInfo, usePositionStream, useOrderStream, useFundingDetails, useFundingRateBySymbol, useFundingRate, useSymbolsInfo, useOrderbookStream, useEventEmitter, useCollateral, useMarginRatio, useLeverage, useDebouncedCallback, useMediaQuery, useAssetsHistory, useGetRwaSymbolInfo, useBadgeBySymbol, useGetRwaSymbolOpenStatus, useGetRwaSymbolCloseTimeInterval, useMarketTradeStream, useAccountInstance, useComputedLTV, useTickerStream } from '@orderly.network/hooks';
-import React12, { forwardRef, useMemo, createContext, useContext, useState, useCallback, useEffect, useRef, createElement } from 'react';
+import { useBadgeBySymbol, useGetRwaSymbolOpenStatus, useLocalStorage, useGetRwaSymbolCloseTimeInterval, usePositionStream, useOrderStream, useAccount, useFundingDetails, useFundingRateBySymbol, useFundingRate, useSymbolsInfo, useOrderbookStream, useEventEmitter, useCollateral, useMarginRatio, useLeverage, useDebouncedCallback, useMediaQuery, useAssetsHistory, useGetRwaSymbolInfo, useWalletConnector, useConfig, useMutation, useChains, useReferralInfo, useCurEpochEstimate, TWType, useEpochInfo, useMarketTradeStream, useAccountInstance, useComputedLTV, useTickerStream } from '@orderly.network/hooks';
+import React12, { forwardRef, useMemo, createContext, useEffect, useState, useRef, useCallback, useContext, createElement } from 'react';
 import { useDataTap, useAppContext } from '@orderly.network/react-app';
-import { AccountStatusEnum, ChainNamespace, AlgoOrderRootType, OrderStatus, OrderSide, AssetHistoryStatusEnum, AssetHistorySideEnum, TradingviewFullscreenKey, OrderEntrySortKeys, EMPTY_LIST } from '@orderly.network/types';
-import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
-import { installExtension, ExtensionPositionEnum, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, modal, useModal, Flex, toast as toast$1, Text, ArrowRightShortIcon, Box, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, Divider, ChevronDownIcon, useScreen, Tooltip, Tabs, TabPanel, CloseIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, ExtensionSlot, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, ExclamationFillIcon, Switch, Checkbox, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@orderly.network/ui';
+import { TradingviewFullscreenKey, OrderEntrySortKeys, AlgoOrderRootType, OrderStatus, OrderSide, AccountStatusEnum, AssetHistoryStatusEnum, AssetHistorySideEnum, ChainNamespace, EMPTY_LIST } from '@orderly.network/types';
+import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
+import { injectable, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, Box, Flex, Text, toast as toast$1, useScreen, ExclamationFillIcon, CloseIcon, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber, Divider, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, ChevronDownIcon, modal, Tooltip, Tabs, TabPanel, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, useModal, ArrowRightShortIcon, Switch, Checkbox, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker } from '@orderly.network/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PositionHistoryWidget, LiquidationWidget, PositionsWidget, CloseAllPositionsWidget, MobileLiquidationWidget, MobilePositionsWidget, MobilePositionHistoryWidget, useReversePositionEnabled } from '@orderly.network/ui-positions';
-import { isTestnet, Decimal, commifyOptional, removeTrailingZeros, formatSymbol, optimizeSymbolDisplay, getPrecisionByNumber } from '@orderly.network/utils';
+import { Decimal, getPrecisionByNumber, commifyOptional, removeTrailingZeros, isTestnet, formatSymbol, optimizeSymbolDisplay } from '@orderly.network/utils';
 import { AssetsModule } from '@orderly.network/portfolio';
 import { DesktopOrderListWidget, TabType, MobileOrderListWidget } from '@orderly.network/ui-orders';
 import { AuthGuard } from '@orderly.network/ui-connector';
 import { OrderEntryWidget, LTVRiskTooltipWidget } from '@orderly.network/ui-order-entry';
-import { DepositAndWithdrawWithSheetId, TransferSheetId, DepositStatusWidget, DepositAndWithdrawWithDialogId, TransferDialogId } from '@orderly.network/ui-transfer';
+import { DepositStatusWidget, DepositAndWithdrawWithSheetId, TransferSheetId, DepositAndWithdrawWithDialogId, TransferDialogId } from '@orderly.network/ui-transfer';
 import { TradingviewWidget } from '@orderly.network/ui-tradingview';
 import Split from '@uiw/react-split';
 import { ScanQRCodeWidget } from '@orderly.network/ui-scaffold';
@@ -20,7 +20,7 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { SymbolInfoBarWidget, SymbolInfoBarRiskNotice, MarketsSheetWidget, HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget } from '@orderly.network/markets';
+import { HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget, SymbolInfoBarWidget, SymbolInfoBarRiskNotice, MarketsSheetWidget } from '@orderly.network/markets';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2204,7 +2204,7 @@ var init_listBox_desktop = __esm({
     };
   }
 });
-var DesktopAsks;
+var DesktopAsks, InjectableDesktopAsks;
 var init_asks_desktop = __esm({
   "src/components/desktop/orderBook/asks.desktop.tsx"() {
     init_types();
@@ -2230,9 +2230,13 @@ var init_asks_desktop = __esm({
         }
       );
     };
+    InjectableDesktopAsks = injectable(
+      DesktopAsks,
+      "OrderBook.Desktop.Asks"
+    );
   }
 });
-var DesktopBids;
+var DesktopBids, InjectableDesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2257,6 +2261,10 @@ var init_bids_desktop = __esm({
         }
       );
     };
+    InjectableDesktopBids = injectable(
+      DesktopBids,
+      "OrderBook.Desktop.Bids"
+    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2920,7 +2928,14 @@ var init_index_desktop = __esm({
                   )
                 ] }),
                 /* @__PURE__ */ jsx(DesktopHeader, { quote, base }),
-                /* @__PURE__ */ jsx(DesktopAsks, { data: [...props.asks] }),
+                /* @__PURE__ */ jsx(
+                  InjectableDesktopAsks,
+                  {
+                    data: [...props.asks],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   DesktopMarkPrice,
                   {
@@ -2931,7 +2946,14 @@ var init_index_desktop = __esm({
                     symbolInfo: props.symbolInfo
                   }
                 ),
-                /* @__PURE__ */ jsx(DesktopBids, { data: [...props.bids] }),
+                /* @__PURE__ */ jsx(
+                  InjectableDesktopBids,
+                  {
+                    data: [...props.bids],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 showBuySellRatio && /* @__PURE__ */ jsx(
                   BuySellRatioBar,
                   {
@@ -6911,17 +6933,10 @@ var Account = (props) => {
     }
   );
 };
-installExtension({
-  name: "mobile-account-menu",
-  scope: ["*"],
-  positions: [ExtensionPositionEnum.MobileAccountMenu],
-  builder: useAccountScript,
-  __isInternal: true
-})((props) => {
-  return /* @__PURE__ */ jsx(Account, { ...props });
-});
+var InjectableAccount = injectable(Account, "Account.MobileAccountMenu");
 var MobileAccountMenuExtension = () => {
-  return /* @__PURE__ */ jsx(ExtensionSlot, { position: ExtensionPositionEnum.MobileAccountMenu });
+  const state = useAccountScript();
+  return /* @__PURE__ */ jsx(InjectableAccount, { ...state });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -8396,7 +8411,10 @@ var DesktopLayout4 = (props) => {
           }
         ];
       },
-      sideEffects: ({ active, dragOverlay }) => {
+      sideEffects: ({
+        active,
+        dragOverlay
+      }) => {
         active.node.style.opacity = "0";
         const innerElement = dragOverlay.node.querySelector(".inner-content");
         if (innerElement) {
@@ -8469,11 +8487,9 @@ var DesktopLayout4 = (props) => {
   const marketsWidget = /* @__PURE__ */ jsx(
     SideMarketsWidget,
     {
-      resizeable,
-      panelSize,
-      onPanelSizeChange,
       symbol: props.symbol,
-      onSymbolChange: props.onSymbolChange
+      onSymbolChange: props.onSymbolChange,
+      panelSize
     }
   );
   const toggleButtoncls = cn(
@@ -8515,13 +8531,13 @@ var DesktopLayout4 = (props) => {
       height: "100%",
       width: marketsWidth,
       style: { minWidth: marketsWidth },
-      className: "oui-trading-markets-container oui-transition-all oui-duration-150",
+      className: "oui-trading-markets-container oui-min-h-0 oui-min-w-0 oui-max-w-full oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
       children: /* @__PURE__ */ jsxs(
         Flex,
         {
           id: "oui-side-markets",
-          className: "oui-relative oui-font-semibold",
+          className: "oui-relative oui-min-h-0 oui-min-w-0 oui-font-semibold",
           direction: "column",
           gapY: 5,
           height: "100%",
@@ -8532,10 +8548,7 @@ var DesktopLayout4 = (props) => {
               Box,
               {
                 width: "100%",
-                className: cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-full"
-                ),
+                className: "oui-min-h-0 oui-min-w-0 oui-max-w-full oui-flex-1 oui-overflow-hidden oui-rounded-b-2xl",
                 children: marketsWidget
               }
             )
@@ -8579,10 +8592,10 @@ var DesktopLayout4 = (props) => {
     {
       classNames: {
         root: cn(
-          tradingViewFullScreen ? "!oui-absolute oui-top-0 oui-left-0 oui-right-0 oui-bottom-0 oui-z-[40] oui-bg-base-10" : "oui-z-1"
+          tradingViewFullScreen ? "!oui-absolute oui-inset-0 oui-z-40 oui-bg-base-10" : "oui-z-1"
         ),
         content: cn(
-          tradingViewFullScreen ? "oui-top-3 oui-bottom-3 oui-left-3 oui-right-3 oui-bg-base-9 oui-rounded-[16px] oui-overflow-hidden" : ""
+          tradingViewFullScreen ? "oui-inset-3 oui-overflow-hidden oui-rounded-[16px] oui-bg-base-9" : ""
         )
       },
       symbol: props.symbol,
@@ -8714,7 +8727,8 @@ var DesktopLayout4 = (props) => {
         Flex,
         {
           gap: 2,
-          className: "oui-flex-1 oui-overflow-hidden",
+          itemAlign: "stretch",
+          className: "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
           style: { minWidth: marketsWidth + tradingViewMinWidth + space },
           children: [
             marketLayout === "left" && marketsView,
@@ -8744,10 +8758,20 @@ var DesktopLayout4 = (props) => {
   );
   const renderTradingViewAndOrderbookView = () => {
     if (max4XL && layout === "left") {
-      return /* @__PURE__ */ jsxs(Flex, { gapX: 2, style: { minHeight: orderbookMinHeight }, height: "100%", children: [
-        tradingViewAndOrderbookView,
-        marketLayout === "left" && marketsView
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gapX: 2,
+          itemAlign: "stretch",
+          className: "oui-min-h-0",
+          style: { minHeight: orderbookMinHeight },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
     }
     return tradingViewAndOrderbookView;
   };
@@ -8876,6 +8900,7 @@ var DesktopLayout4 = (props) => {
                                             pt: 3,
                                             r: "2xl",
                                             width: marketsWidth,
+                                            className: "oui-overflow-hidden",
                                             style: {
                                               minHeight: tradindviewMinHeight + orderbookMinHeight + space,
                                               maxHeight: tradindviewMaxHeight + orderbookMaxHeight + space
@@ -9053,8 +9078,9 @@ var DesktopLayout4 = (props) => {
                   /* @__PURE__ */ jsxs(
                     Flex,
                     {
+                      itemAlign: "stretch",
                       className: cn(
-                        "oui-flex-1 oui-overflow-hidden",
+                        "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
                         layout === "left" && "oui-flex-row-reverse"
                       ),
                       gap: 2,
@@ -9102,6 +9128,12 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
+
+// src/pages/trading/trading.injectable.tsx
+var InjectableDesktopLayout = injectable(
+  DesktopLayout4,
+  "Trading.Layout.Desktop"
+);
 var Countdown = ({
   timeInterval
 }) => {
@@ -9364,7 +9396,7 @@ var Trading = (props) => {
     return /* @__PURE__ */ jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsx(
-    DesktopLayout4,
+    InjectableDesktopLayout,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props