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

package/dist/index.js

@@ -5,8 +5,8 @@ var React11 = require('react');
 var reactApp = require('@orderly.network/react-app');
 var types = require('@orderly.network/types');
 var uiOrders = require('@orderly.network/ui-orders');
-var ui = require('@orderly.network/ui');
 var i18n = require('@orderly.network/i18n');
+var ui = require('@orderly.network/ui');
 var jsxRuntime = require('react/jsx-runtime');
 var uiPositions = require('@orderly.network/ui-positions');
 var utils = require('@orderly.network/utils');
@@ -186,6 +186,113 @@ var init_setting_ui = __esm({
     Setting = (props) => {
       const [open, setOpen] = React11.useState(false);
       const { t } = i18n.useTranslation();
+      const { isMobile } = ui.useScreen();
+      const SettingsContent = React11.useMemo(() => {
+        return () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Flex,
+              {
+                itemAlign: "center",
+                justify: isMobile ? "center" : "start",
+                className: "oui-w-full",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base oui-pb-3", children: t("trading.portfolioSettings") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.decimalPrecision") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DecimalPrecisionCheckbox,
+              {
+                value: props.pnlNotionalDecimalPrecision,
+                onValueChange: (e) => {
+                  props.setPnlNotionalDecimalPrecision(e);
+                  setOpen(false);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.unrealPnlPriceBasis") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              UnPnlPriceBasisCheckBox,
+              {
+                value: props.unPnlPriceBasis,
+                onValueChange: (e) => {
+                  props.setUnPnlPriceBasic(e);
+                  setOpen(false);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, justify: "between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("trading.portfolioSettings.reversePosition") }),
+              isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+                ui.ExclamationFillIcon,
+                {
+                  size: 14,
+                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80 oui-cursor-pointer",
+                  onClick: () => {
+                    ui.modal.alert({
+                      title: t("common.tips"),
+                      message: t(
+                        "trading.portfolioSettings.reversePosition.tooltip"
+                      )
+                    });
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Tooltip,
+                {
+                  content: t("trading.portfolioSettings.reversePosition.tooltip"),
+                  className: "oui-max-w-[300px]",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.ExclamationFillIcon,
+                    {
+                      size: 14,
+                      className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80 oui-cursor-pointer"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Switch,
+              {
+                checked: props.reversePosition,
+                onCheckedChange: (checked) => {
+                  props.setReversePosition(checked);
+                }
+              }
+            )
+          ] })
+        ] });
+      }, [
+        t,
+        isMobile,
+        props.pnlNotionalDecimalPrecision,
+        props.unPnlPriceBasis,
+        props.reversePosition
+      ]);
+      const triggerButton = /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "xs",
+          type: "button",
+          variant: "contained",
+          className: "oui-bg-transparent hover:oui-bg-transparent",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.SettingFillIcon,
+            {
+              size: 16,
+              color: "white",
+              opacity: 1,
+              className: "oui-text-white/[.36] hover:oui-text-white/80"
+            }
+          )
+        }
+      );
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 0, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -208,58 +315,26 @@ var init_setting_ui = __esm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
+        isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Sheet, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.SheetTrigger, { asChild: true, children: triggerButton }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.SheetContent, { side: "bottom", className: "oui-px-5 oui-pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              size: "xs",
-              type: "button",
-              variant: "contained",
-              className: "oui-bg-transparent hover:oui-bg-transparent",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.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__ */ jsxRuntime.jsx(SettingsContent, {})
             }
-          ) }),
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: triggerButton }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.DropdownMenuContent,
             {
               className: "oui-px-5 oui-py-3 oui-w-[360px]",
               alignOffset: 2,
               align: "end",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-text-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base oui-pb-3", children: t("trading.portfolioSettings") }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, {}),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.decimalPrecision") }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DecimalPrecisionCheckbox,
-                  {
-                    value: props.pnlNotionalDecimalPrecision,
-                    onValueChange: (e) => {
-                      props.setPnlNotionalDecimalPrecision(e);
-                      setOpen(false);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pb-3 oui-text-base-contrast-54 oui-mt-2", children: t("trading.portfolioSettings.unrealPnlPriceBasis") }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  UnPnlPriceBasisCheckBox,
-                  {
-                    value: props.unPnlPriceBasis,
-                    onValueChange: (e) => {
-                      props.setUnPnlPriceBasic(e);
-                      setOpen(false);
-                    }
-                  }
-                )
-              ] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(SettingsContent, {})
             }
           )
         ] })
@@ -385,14 +460,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 } = uiPositions.useReversePositionEnabled();
       return {
-        ...props
+        ...props,
+        reversePosition: isEnabled,
+        setReversePosition: setEnabled
       };
     };
   }
@@ -424,6 +500,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 } = ui.useScreen();
       return isMobile ? /* @__PURE__ */ jsxRuntime.jsx(MobileLayout, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DesktopLayout, { ...props });
@@ -470,27 +547,19 @@ var init_positionHeader_ui = __esm({
                 justify: "between",
                 width: "100%",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Checkbox,
-                      {
-                        id: "oui-checkbox-hideOtherSymbols",
-                        color: "white",
-                        checked: !props.showAllSymbol,
-                        onCheckedChange: (checked) => {
-                          props.setShowAllSymbol(!checked);
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SettingWidget,
+                    {
+                      pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
+                      setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
+                      unPnlPriceBasis: props.unPnlPriceBasis,
+                      setUnPnlPriceBasic: props.setUnPnlPriceBasic,
+                      hideOtherSymbols: !props.showAllSymbol,
+                      setHideOtherSymbols: (value) => {
+                        props.setShowAllSymbol(!value);
                       }
-                    )
-                  ] }),
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(uiPositions.CloseAllPositionsWidget, { symbol: props.symbol })
                 ]
               }
@@ -567,7 +636,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] = hooks.usePositionStream(symbol, {
         calcMode
@@ -584,7 +659,10 @@ var init_positionHeader_script = __esm({
         notional,
         showAllSymbol,
         setShowAllSymbol,
-        symbol
+        symbol,
+        setPnlNotionalDecimalPrecision,
+        unPnlPriceBasis,
+        setUnPnlPriceBasic
       };
     };
   }
@@ -632,8 +710,10 @@ var init_dataList_ui = __esm({
         /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyPositionHeaderWidget,
           {
+            setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
             pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
             symbol: !!props.showAllSymbol ? void 0 : props.symbol,
+            setUnPnlPriceBasic: props.setUnPnlPriceBasic,
             unPnlPriceBasis: props.unPnlPriceBasis
           }
         ) }),
@@ -5180,8 +5260,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__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(