@orderly.network/portfolio 2.8.13 → 2.8.14-alpha.0

package/dist/index.js

@@ -8115,6 +8115,7 @@ __export(setting_exports, {
   SettingWidget: () => SettingWidget
 });
 var ORDERLY_ORDER_SOUND_ALERT_KEY = "orderly_order_sound_alert";
+var ORDERLY_MWEB_ORDER_ENTRY_SIDE_MARKETS_LAYOUT = "orderly_mweb_order_entry_side_markets_layout";
 var useSettingScript = () => {
   const { data, mutate: refresh } = hooks.useAccountInfo();
   const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
@@ -8125,6 +8126,10 @@ var useSettingScript = () => {
     ORDERLY_ORDER_SOUND_ALERT_KEY,
     notification?.orderFilled?.defaultOpen ?? false
   );
+  const [orderPanelLayout, setOrderPanelLayout] = hooks.useLocalStorage(
+    ORDERLY_MWEB_ORDER_ENTRY_SIDE_MARKETS_LAYOUT,
+    "right"
+  );
   React12.useEffect(() => {
     setChecked(data?.maintenance_cancel_orders || false);
   }, [data]);
@@ -8153,7 +8158,9 @@ var useSettingScript = () => {
     canTouch,
     soundAlert,
     setSoundAlert,
-    hasOrderFilledMedia: Boolean(notification?.orderFilled?.media)
+    hasOrderFilledMedia: Boolean(notification?.orderFilled?.media),
+    orderPanelLayout,
+    setOrderPanelLayout
   };
 };
 var SettingDesktop = (props) => {
@@ -8242,6 +8249,74 @@ var SettingMobile = (props) => {
   const onLanguageChange = () => {
     setOpen(true);
   };
+  const renderItem = (position) => {
+    const isSelected = props.orderPanelLayout === position;
+    const handleClick = () => props.setOrderPanelLayout(position);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: "column",
+        gapY: 2,
+        className: "oui-group oui-flex-1 oui-cursor-pointer",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": isSelected,
+        "aria-label": `Layout ${position}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              direction: "column",
+              className: ui.cn(
+                "oui-h-[160px] oui-w-[120px] oui-shrink-0 oui-overflow-hidden oui-rounded-[10px] oui-border-4 oui-border-base-5 oui-bg-base-10 oui-p-0.5",
+                "group-hover:oui-border-base-4",
+                isSelected && "!oui-border-primary-light"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Flex,
+                  {
+                    direction: "row",
+                    itemAlign: "stretch",
+                    className: "oui-h-[152px] oui-shrink-0 oui-gap-0.5",
+                    children: position === "left" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(OrderEntryStripIcon, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(EmptyBlockIcon, {})
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(EmptyBlockIcon, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(OrderEntryStripIcon, {})
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-min-h-[4px] oui-flex-1 oui-bg-base-10" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              size: "2xs",
+              intensity: 54,
+              className: ui.cn(
+                "oui-text-center oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
+                isSelected && "oui-text-base-contrast-80"
+              ),
+              children: position === "left" ? t("trading.layout.advanced.left") : t("trading.layout.advanced.right")
+            }
+          )
+        ]
+      },
+      position
+    );
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mt: 1, p: 4, intensity: 900, r: "xl", itemAlign: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(uiScaffold.LanguageSwitcherWidget, { open, onOpenChange: setOpen }),
@@ -8279,7 +8354,7 @@ var SettingMobile = (props) => {
       {
         title: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-sm", children: t("portfolio.setting.systemUpgrade") }),
         id: "portfolio-apikey-manager",
-        className: "oui-bg-base-9 oui-font-semibold oui-mt-2",
+        className: "oui-mt-2 oui-bg-base-9 oui-font-semibold",
         classNames: { root: "oui-p-4", content: "!oui-pt-3" },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Flex,
@@ -8289,7 +8364,7 @@ var SettingMobile = (props) => {
             width: "100%",
             itemAlign: "center",
             pt: 3,
-            className: "oui-font-semibold oui-border-t-2 oui-border-line-6",
+            className: "oui-border-t-2 oui-border-line-6 oui-font-semibold",
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               ui.Flex,
               {
@@ -8323,7 +8398,7 @@ var SettingMobile = (props) => {
       {
         title: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-sm", children: t("portfolio.setting.soundAlerts") }),
         id: "portfolio-sound-alert-setting",
-        className: "oui-bg-base-9 oui-font-semibold oui-mt-2",
+        className: "oui-mt-2 oui-bg-base-9 oui-font-semibold",
         classNames: { root: "oui-p-4", content: "!oui-pt-3" },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Flex,
@@ -8333,7 +8408,7 @@ var SettingMobile = (props) => {
             width: "100%",
             itemAlign: "center",
             pt: 3,
-            className: "oui-font-semibold oui-border-t-2 oui-border-line-6",
+            className: "oui-border-t-2 oui-border-line-6 oui-font-semibold",
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               ui.Flex,
               {
@@ -8360,9 +8435,62 @@ var SettingMobile = (props) => {
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Card,
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-sm", children: t("trading.layout") }),
+        id: "portfolio-order-panel-setting",
+        className: "oui-mt-2 oui-bg-base-9 oui-font-semibold",
+        classNames: { root: "oui-p-4", content: "!oui-pt-3" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "row",
+            gap: 4,
+            width: "100%",
+            itemAlign: "center",
+            pt: 3,
+            className: "oui-border-t-2 oui-border-line-6 oui-font-semibold",
+            children: [
+              renderItem("left"),
+              renderItem("right")
+            ]
+          }
+        )
+      }
     )
   ] });
 };
+var EmptyBlockIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "50",
+    height: "80",
+    viewBox: "0 0 50 80",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "50", height: "80", rx: "2", fill: "#181C23" })
+  }
+);
+var OrderEntryStripIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "50",
+    height: "80",
+    viewBox: "0 0 50 80",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "50", height: "80", rx: "2", fill: "#181C23" }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "21", height: "11", rx: "2", fill: "#008676" }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "26", y: "3", width: "21", height: "11", rx: "2", fill: "#D92D6B" }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "69", width: "44", height: "8", rx: "2", fill: "#008676" })
+    ]
+  }
+);
 var Setting = (props) => {
   const { isMobile } = ui.useScreen();
   if (isMobile) {