@orderly.network/trading 2.8.5-alpha.0 → 2.8.6-alpha.0

package/dist/index.mjs

@@ -3,10 +3,10 @@ import React11, { forwardRef, useMemo, createContext, useContext, useState, useC
 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 { TabType, DesktopOrderListWidget, MobileOrderListWidget } from '@orderly.network/ui-orders';
-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, Checkbox, SettingFillIcon, ExclamationFillIcon, Spinner, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@orderly.network/ui';
 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, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@orderly.network/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { PositionHistoryWidget, LiquidationWidget, PositionsWidget, CloseAllPositionsWidget, MobileLiquidationWidget, MobilePositionsWidget, MobilePositionHistoryWidget } from '@orderly.network/ui-positions';
+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 { AssetsModule } from '@orderly.network/portfolio';
 import { AuthGuard } from '@orderly.network/ui-connector';
@@ -179,6 +179,113 @@ var init_setting_ui = __esm({
     Setting = (props) => {
       const [open, setOpen] = useState(false);
       const { t } = useTranslation();
+      const { isMobile } = useScreen();
+      const SettingsContent = useMemo(() => {
+        return () => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-text-sm", children: [
+            /* @__PURE__ */ jsx(
+              Flex,
+              {
+                itemAlign: "center",
+                justify: isMobile ? "center" : "start",
+                className: "oui-w-full",
+                children: /* @__PURE__ */ jsx(Text, { className: "oui-text-base oui-pb-3", children: t("trading.portfolioSettings") })
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.decimalPrecision") }),
+            /* @__PURE__ */ jsx(
+              DecimalPrecisionCheckbox,
+              {
+                value: props.pnlNotionalDecimalPrecision,
+                onValueChange: (e) => {
+                  props.setPnlNotionalDecimalPrecision(e);
+                  setOpen(false);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
+            /* @__PURE__ */ jsx(Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.unrealPnlPriceBasis") }),
+            /* @__PURE__ */ jsx(
+              UnPnlPriceBasisCheckBox,
+              {
+                value: props.unPnlPriceBasis,
+                onValueChange: (e) => {
+                  props.setUnPnlPriceBasic(e);
+                  setOpen(false);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
+          /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, justify: "between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("trading.portfolioSettings.reversePosition") }),
+              isMobile ? /* @__PURE__ */ jsx(
+                ExclamationFillIcon,
+                {
+                  size: 14,
+                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80 oui-cursor-pointer",
+                  onClick: () => {
+                    modal.alert({
+                      title: t("common.tips"),
+                      message: t(
+                        "trading.portfolioSettings.reversePosition.tooltip"
+                      )
+                    });
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  content: t("trading.portfolioSettings.reversePosition.tooltip"),
+                  className: "oui-max-w-[300px]",
+                  children: /* @__PURE__ */ jsx(
+                    ExclamationFillIcon,
+                    {
+                      size: 14,
+                      className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80 oui-cursor-pointer"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: props.reversePosition,
+                onCheckedChange: (checked) => {
+                  props.setReversePosition(checked);
+                }
+              }
+            )
+          ] })
+        ] });
+      }, [
+        t,
+        isMobile,
+        props.pnlNotionalDecimalPrecision,
+        props.unPnlPriceBasis,
+        props.reversePosition
+      ]);
+      const triggerButton = /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          type: "button",
+          variant: "contained",
+          className: "oui-bg-transparent hover:oui-bg-transparent",
+          children: /* @__PURE__ */ jsx(
+            SettingFillIcon,
+            {
+              size: 16,
+              color: "white",
+              opacity: 1,
+              className: "oui-text-white/[.36] hover:oui-text-white/80"
+            }
+          )
+        }
+      );
       return /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
         /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
           /* @__PURE__ */ jsx(
@@ -201,58 +308,26 @@ var init_setting_ui = __esm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
+        isMobile ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: triggerButton }),
+          /* @__PURE__ */ jsx(SheetContent, { side: "bottom", className: "oui-px-5 oui-pt-3", children: /* @__PURE__ */ jsx(
+            "div",
             {
-              size: "xs",
-              type: "button",
-              variant: "contained",
-              className: "oui-bg-transparent hover:oui-bg-transparent",
-              children: /* @__PURE__ */ jsx(
-                SettingFillIcon,
-                {
-                  size: 16,
-                  color: "white",
-                  opacity: 1,
-                  className: "oui-text-white/[.36] hover:oui-text-white/80"
-                }
-              )
+              style: {
+                paddingBottom: `max(32px, calc(12px + env(safe-area-inset-bottom)))`
+              },
+              children: /* @__PURE__ */ jsx(SettingsContent, {})
             }
-          ) }),
+          ) })
+        ] }) : /* @__PURE__ */ jsxs(DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: triggerButton }),
           /* @__PURE__ */ jsx(
             DropdownMenuContent,
             {
               className: "oui-px-5 oui-py-3 oui-w-[360px]",
               alignOffset: 2,
               align: "end",
-              children: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-text-sm", children: [
-                /* @__PURE__ */ jsx(Text, { className: "oui-text-base oui-pb-3", children: t("trading.portfolioSettings") }),
-                /* @__PURE__ */ jsx(Divider, {}),
-                /* @__PURE__ */ jsx(Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.decimalPrecision") }),
-                /* @__PURE__ */ jsx(
-                  DecimalPrecisionCheckbox,
-                  {
-                    value: props.pnlNotionalDecimalPrecision,
-                    onValueChange: (e) => {
-                      props.setPnlNotionalDecimalPrecision(e);
-                      setOpen(false);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
-                /* @__PURE__ */ jsx(Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.unrealPnlPriceBasis") }),
-                /* @__PURE__ */ jsx(
-                  UnPnlPriceBasisCheckBox,
-                  {
-                    value: props.unPnlPriceBasis,
-                    onValueChange: (e) => {
-                      props.setUnPnlPriceBasic(e);
-                      setOpen(false);
-                    }
-                  }
-                )
-              ] })
+              children: /* @__PURE__ */ jsx(SettingsContent, {})
             }
           )
         ] })
@@ -378,14 +453,15 @@ var init_setting_ui = __esm({
     };
   }
 });
-
-// src/components/desktop/dataList/setting/setting.script.tsx
 var useSettingScript;
 var init_setting_script = __esm({
   "src/components/desktop/dataList/setting/setting.script.tsx"() {
     useSettingScript = (props) => {
+      const { isEnabled, setEnabled } = useReversePositionEnabled();
       return {
-        ...props
+        ...props,
+        reversePosition: isEnabled,
+        setReversePosition: setEnabled
       };
     };
   }
@@ -417,6 +493,7 @@ var init_setting = __esm({
 var PositionHeader, MobileLayout, DesktopLayout, UnrealPnL, Notional;
 var init_positionHeader_ui = __esm({
   "src/components/base/positionHeader/positionHeader.ui.tsx"() {
+    init_setting();
     PositionHeader = (props) => {
       const { isMobile } = useScreen();
       return isMobile ? /* @__PURE__ */ jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsx(DesktopLayout, { ...props });
@@ -463,27 +540,19 @@ var init_positionHeader_ui = __esm({
                 justify: "between",
                 width: "100%",
                 children: [
-                  /* @__PURE__ */ jsxs(Flex, { children: [
-                    /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        id: "oui-checkbox-hideOtherSymbols",
-                        color: "white",
-                        checked: !props.showAllSymbol,
-                        onCheckedChange: (checked) => {
-                          props.setShowAllSymbol(!checked);
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "label",
-                      {
-                        className: "oui-cursor-pointer oui-text-2xs oui-text-base-contrast-54 oui-ml-1",
-                        htmlFor: "oui-checkbox-hideOtherSymbols",
-                        children: t("trading.hideOtherSymbols")
+                  /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+                    SettingWidget,
+                    {
+                      pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
+                      setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
+                      unPnlPriceBasis: props.unPnlPriceBasis,
+                      setUnPnlPriceBasic: props.setUnPnlPriceBasic,
+                      hideOtherSymbols: !props.showAllSymbol,
+                      setHideOtherSymbols: (value) => {
+                        props.setShowAllSymbol(!value);
                       }
-                    )
-                  ] }),
+                    }
+                  ) }),
                   /* @__PURE__ */ jsx(CloseAllPositionsWidget, { symbol: props.symbol })
                 ]
               }
@@ -560,7 +629,13 @@ var init_positionHeader_script = __esm({
   "src/components/base/positionHeader/positionHeader.script.tsx"() {
     init_hooks();
     usePositionHeaderScript = (inputs) => {
-      const { pnlNotionalDecimalPrecision, unPnlPriceBasis, symbol } = inputs;
+      const {
+        pnlNotionalDecimalPrecision,
+        setPnlNotionalDecimalPrecision,
+        unPnlPriceBasis,
+        setUnPnlPriceBasic,
+        symbol
+      } = inputs;
       const calcMode = unPnlPriceBasis;
       const [data] = usePositionStream(symbol, {
         calcMode
@@ -577,7 +652,10 @@ var init_positionHeader_script = __esm({
         notional,
         showAllSymbol,
         setShowAllSymbol,
-        symbol
+        symbol,
+        setPnlNotionalDecimalPrecision,
+        unPnlPriceBasis,
+        setUnPnlPriceBasic
       };
     };
   }
@@ -625,8 +703,10 @@ var init_dataList_ui = __esm({
         /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyPositionHeaderWidget,
           {
+            setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
             pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
             symbol: !!props.showAllSymbol ? void 0 : props.symbol,
+            setUnPnlPriceBasic: props.setUnPnlPriceBasic,
             unPnlPriceBasis: props.unPnlPriceBasis
           }
         ) }),
@@ -5173,8 +5253,10 @@ var init_dataList_ui2 = __esm({
           LazyPositionHeaderWidget2,
           {
             pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
+            setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
             symbol: props.showAllSymbol ? void 0 : props.symbol,
-            unPnlPriceBasis: props.unPnlPriceBasis
+            unPnlPriceBasis: props.unPnlPriceBasis,
+            setUnPnlPriceBasic: props.setUnPnlPriceBasic
           }
         ) }),
         /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(