@kodiak-finance/orderly-ui-order-entry 2.8.20 → 2.8.21-beta.3

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebounce
 import { useTranslation, i18n } from '@kodiak-finance/orderly-i18n';
 import { useOrderEntryFormErrorMsg, useAppContext } from '@kodiak-finance/orderly-react-app';
 import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, PositionType, BBOOrderType, AccountStatusEnum, OrderLevel, TrackerEventName } from '@kodiak-finance/orderly-types';
-import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, Select, Grid, Checkbox, Slider, textVariants, SettingFillIcon, Badge, Divider, Button, TokenIcon, DataTable, SimpleDropdownMenu, CaretDownIcon, Switch, useScreen, toast, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, DotStatus, EditIcon as EditIcon$1, useModal } from '@kodiak-finance/orderly-ui';
+import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, Grid, Checkbox, Select, Slider, textVariants, SettingFillIcon, Badge, Divider, Button, TokenIcon, DataTable, SimpleDropdownMenu, CaretDownIcon, Switch, useScreen, toast, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, DotStatus, EditIcon as EditIcon$1, useModal } from '@kodiak-finance/orderly-ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@kodiak-finance/orderly-ui-tpsl';
 import { Decimal, zero, todpIfNeed, getBBOType, removeTrailingZeros } from '@kodiak-finance/orderly-utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -746,6 +746,7 @@ var SlippageEditor = forwardRef((props, ref) => {
         Input,
         {
           suffix: "%",
+          inputMode: "decimal",
           formatters: [
             inputFormatter.numberFormatter,
             inputFormatter.dpFormatter(2)
@@ -2243,152 +2244,49 @@ var PriceInput = (props) => {
     }
   );
 };
-var QuantityInput = memo((props) => {
+var QtyAndTotalInput = memo((props) => {
   const { t } = useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
-  const { base, base_dp } = symbolInfo;
-  return /* @__PURE__ */ jsx(
-    CustomInput,
-    {
-      id: "order_quantity_input",
-      name: "order_quantity_input",
-      label: t("common.qty"),
-      suffix: base,
-      error: getErrorMsg("order_quantity"),
-      value: props.order_quantity,
-      onChange: (e) => {
-        setOrderValue("order_quantity", e);
-      },
-      formatters: [inputFormatter.dpFormatter(base_dp)],
-      onFocus: onFocus(3 /* QUANTITY */),
-      onBlur: onBlur(3 /* QUANTITY */),
-      className: "!oui-rounded-r",
-      classNames: {
-        suffix: "oui-justify-end"
-      }
-    }
-  );
-});
-QuantityInput.displayName = "QuantityInput";
-var TotalTypeSelect = memo((props) => {
-  const { t } = useTranslation();
-  const options2 = useMemo(() => {
-    return [
-      {
-        label: t("orderEntry.orderSize"),
-        value: "orderSize" /* OrderSize */
-      },
+  const { base, quote, base_dp, quote_dp } = symbolInfo;
+  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
+    /* @__PURE__ */ jsx(
+      CustomInput,
       {
-        label: t("orderEntry.initialMargin"),
-        value: "initialMargin" /* InitialMargin */
-      }
-    ];
-  }, [t]);
-  return /* @__PURE__ */ jsx(
-    Select.options,
-    {
-      size: "xs",
-      value: props.value,
-      valueFormatter: (value, option) => {
-        const item = options2.find((o) => o.value === value);
-        return item?.label + "\u2248";
-      },
-      classNames: {
-        trigger: cn(
-          "oui-w-auto oui-border-none oui-bg-transparent",
-          "oui-absolute oui-left-0 oui-top-[5px] oui-text-2xs oui-text-base-contrast-36"
-        )
-      },
-      onValueChange: props.onChange,
-      options: options2
-    }
-  );
-});
-TotalTypeSelect.displayName = "TotalTypeSelect";
-var TotalInput = memo((props) => {
-  const { t } = useTranslation();
-  const { total } = props;
-  const [margin, setMargin] = useState("");
-  const {
-    symbolInfo,
-    onFocus,
-    onBlur,
-    getErrorMsg,
-    setOrderValue,
-    leverage = 1,
-    currentFocusInput
-  } = useOrderEntryContext();
-  const { quote } = symbolInfo;
-  const [totalType, setTotalType] = useLocalStorage(
-    "orderly_order_total_type",
-    "orderSize" /* OrderSize */
-  );
-  useEffect(() => {
-    if (total) {
-      if (currentFocusInput !== 6 /* MARGIN */) {
-        const margin2 = new Decimal(total).div(leverage).todp(2).toString();
-        setMargin(margin2);
+        id: "order_quantity_input",
+        name: "order_quantity_input",
+        label: t("common.qty"),
+        suffix: base,
+        error: getErrorMsg("order_quantity"),
+        value: props.order_quantity,
+        onChange: (e) => {
+          setOrderValue("order_quantity", e);
+        },
+        formatters: [inputFormatter.dpFormatter(base_dp)],
+        onFocus: onFocus(3 /* QUANTITY */),
+        onBlur: onBlur(3 /* QUANTITY */),
+        inputMode: "decimal",
+        className: "!oui-rounded-r oui-rounded-bl-xl"
       }
-    } else {
-      setMargin("");
-    }
-  }, [total, leverage, currentFocusInput]);
-  const onMarginChange = (val) => {
-    const total2 = val ? new Decimal(val).mul(leverage).toString() : "";
-    setOrderValue("total", total2);
-    setMargin(val);
-  };
-  const prefix = /* @__PURE__ */ jsx(TotalTypeSelect, { value: totalType, onChange: setTotalType });
-  if (totalType === "initialMargin" /* InitialMargin */) {
-    return /* @__PURE__ */ jsx(
+    ),
+    /* @__PURE__ */ jsx(
       CustomInput,
       {
-        id: "order_margin_input",
-        name: "order_margin_input",
-        label: `${t("orderEntry.initialMargin")}\u2248`,
-        prefix,
+        id: "order_total_input",
+        name: "order_total_input",
+        label: `${t("common.total")}\u2248`,
         suffix: quote,
-        error: getErrorMsg("total") ? "initial margin error" : "",
-        value: margin,
-        onChange: onMarginChange,
-        formatters: [inputFormatter.dpFormatter(2)],
-        onFocus: onFocus(6 /* MARGIN */),
-        onBlur: onBlur(6 /* MARGIN */),
-        className: "!oui-rounded-l",
-        classNames: {
-          suffix: "oui-justify-end"
-        }
+        error: getErrorMsg("total"),
+        value: props.total,
+        onChange: (e) => {
+          setOrderValue("total", e);
+        },
+        formatters: [inputFormatter.dpFormatter(quote_dp)],
+        onFocus: onFocus(5 /* TOTAL */),
+        onBlur: onBlur(5 /* TOTAL */),
+        inputMode: "decimal",
+        className: "!oui-rounded-bl oui-rounded-br-xl"
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    CustomInput,
-    {
-      id: "order_total_input",
-      name: "order_total_input",
-      label: `${t("orderEntry.orderSize")}\u2248`,
-      prefix,
-      suffix: quote,
-      error: getErrorMsg("total"),
-      value: props.total,
-      onChange: (val) => {
-        setOrderValue("total", val);
-      },
-      className: "!oui-rounded-l",
-      classNames: {
-        suffix: "oui-justify-end"
-      },
-      formatters: [inputFormatter.dpFormatter(2)],
-      onFocus: onFocus(5 /* TOTAL */),
-      onBlur: onBlur(5 /* TOTAL */)
-    }
-  );
-});
-TotalInput.displayName = "TotalInput";
-var QtyAndTotalInput = memo((props) => {
-  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
-    /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
-    /* @__PURE__ */ jsx(TotalInput, { total: props.total })
+    )
   ] });
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
@@ -4036,6 +3934,7 @@ var TPSLTriggerPriceInput = (props) => {
       },
       color: props.error ? "danger" : void 0,
       autoComplete: "off",
+      inputMode: "decimal",
       value: innerValue,
       classNames: {
         additional: "oui-text-base-contrast-54",
@@ -4504,21 +4403,29 @@ var OrderEntry = (props) => {
                 ),
                 !showSoundSection && extraButton
               ] }),
-              showSoundSection && /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", children: [
-                /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
-                  /* @__PURE__ */ jsx(
-                    Switch,
-                    {
-                      className: "oui-h-[14px]",
-                      id: soundAlertId,
-                      checked: soundAlert,
-                      onCheckedChange: (checked) => setSoundAlert(checked)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("label", { htmlFor: soundAlertId, className: "oui-text-xs", children: t("portfolio.setting.soundAlerts") })
-                ] }),
-                extraButton
-              ] }),
+              showSoundSection && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  justify: "between",
+                  itemAlign: "center",
+                  className: "!oui-mt-0 xl:!oui-mt-3",
+                  children: [
+                    /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
+                      /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          className: "oui-h-[14px]",
+                          id: soundAlertId,
+                          checked: soundAlert,
+                          onCheckedChange: (checked) => setSoundAlert(checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("label", { htmlFor: soundAlertId, className: "oui-text-xs", children: t("portfolio.setting.soundAlerts") })
+                    ] }),
+                    extraButton
+                  ]
+                }
+              ),
               !showSoundSection && isMobile && (formattedOrder.order_type == OrderType.LIMIT || formattedOrder.order_type == OrderType.MARKET) && !formattedOrder.reduce_only && !pinned && /* @__PURE__ */ jsx(Flex, { className: "oui-w-full", justify: "end", children: extraButton }),
               pinned && /* @__PURE__ */ jsxs(Box, { p: 2, r: "md", intensity: 700, position: "relative", children: [
                 /* @__PURE__ */ jsx(AdditionalInfo, { ...additionalInfoProps }),