@kodiak-finance/orderly-ui-order-entry 2.10.0-alpha.2 → 2.10.0-alpha.4

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _kodiak_finance_orderly_types from '@kodiak-finance/orderly-types';
 import { MarginMode, OrderSide, OrderType, OrderLevel, OrderlyOrder, API } from '@kodiak-finance/orderly-types';
 import * as react from 'react';
-import react__default, { FC } from 'react';
+import react__default, { ReactNode, FC } from 'react';
 import * as _kodiak_finance_orderly_hooks from '@kodiak-finance/orderly-hooks';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -60,6 +60,22 @@ type OrderEntrySubmitSectionProps = {
     };
 };
 
+/**
+ * Host-provided panel that takes over the order-entry slot when selected
+ * from the order-type dropdown.
+ */
+interface ExtraTradeEntryPanel {
+    /** Stable unique id (e.g. "grid-bot"). */
+    id: string;
+    /** Label shown in the order-type dropdown. */
+    label: string;
+    /** Renders the panel body, scoped to the trade screen's current symbol. */
+    render: (props: {
+        symbol: string;
+    }) => ReactNode;
+    /** Suppress the Buy/Sell side buttons — for panels that act on both sides. */
+    hideSideButtons?: boolean;
+}
 declare enum InputType {
     NONE = 0,
     PRICE = 1,// price input focus
@@ -175,6 +191,13 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
 type OrderEntryProps = OrderEntryScriptReturn & {
     containerRef?: react__default.RefObject<HTMLDivElement>;
     disableFeatures?: ("slippageSetting" | "feesInfo")[];
+    /** Host-provided extras in the Advanced dropdown (e.g. grid bot). */
+    extraOptions?: Array<{
+        id: string;
+        label: string;
+    }>;
+    selectedExtraId?: string | null;
+    onExtraSelect?: (id: string | null) => void;
 };
 declare const OrderEntry: react__default.FC<OrderEntryProps>;
 
@@ -198,6 +221,8 @@ declare module "@kodiak-finance/orderly-plugin-core" {
 declare const OrderEntryWidget: react__default.FC<OrderEntryScriptInputs & {
     containerRef?: react__default.RefObject<HTMLDivElement>;
     disableFeatures?: ("slippageSetting" | "feesInfo")[];
+    /** Host-provided extras (e.g. grid-bot). */
+    extraPanels?: ExtraTradeEntryPanel[];
 }>;
 
 type OrderConfirmDialogProps = {
@@ -239,4 +264,4 @@ type SymbolBadgeProps = {
 };
 declare const SymbolBadge: FC<SymbolBadgeProps>;
 
-export { AdditionalInfo, FeesWidget, LTVRiskTooltipWidget, OrderConfirmDialog, OrderEntry, OrderEntryWidget, SymbolBadge, useOrderEntryScript };
+export { AdditionalInfo, type ExtraTradeEntryPanel, FeesWidget, LTVRiskTooltipWidget, OrderConfirmDialog, OrderEntry, OrderEntryWidget, SymbolBadge, useOrderEntryScript };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _kodiak_finance_orderly_types from '@kodiak-finance/orderly-types';
 import { MarginMode, OrderSide, OrderType, OrderLevel, OrderlyOrder, API } from '@kodiak-finance/orderly-types';
 import * as react from 'react';
-import react__default, { FC } from 'react';
+import react__default, { ReactNode, FC } from 'react';
 import * as _kodiak_finance_orderly_hooks from '@kodiak-finance/orderly-hooks';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -60,6 +60,22 @@ type OrderEntrySubmitSectionProps = {
     };
 };
 
+/**
+ * Host-provided panel that takes over the order-entry slot when selected
+ * from the order-type dropdown.
+ */
+interface ExtraTradeEntryPanel {
+    /** Stable unique id (e.g. "grid-bot"). */
+    id: string;
+    /** Label shown in the order-type dropdown. */
+    label: string;
+    /** Renders the panel body, scoped to the trade screen's current symbol. */
+    render: (props: {
+        symbol: string;
+    }) => ReactNode;
+    /** Suppress the Buy/Sell side buttons — for panels that act on both sides. */
+    hideSideButtons?: boolean;
+}
 declare enum InputType {
     NONE = 0,
     PRICE = 1,// price input focus
@@ -175,6 +191,13 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
 type OrderEntryProps = OrderEntryScriptReturn & {
     containerRef?: react__default.RefObject<HTMLDivElement>;
     disableFeatures?: ("slippageSetting" | "feesInfo")[];
+    /** Host-provided extras in the Advanced dropdown (e.g. grid bot). */
+    extraOptions?: Array<{
+        id: string;
+        label: string;
+    }>;
+    selectedExtraId?: string | null;
+    onExtraSelect?: (id: string | null) => void;
 };
 declare const OrderEntry: react__default.FC<OrderEntryProps>;
 
@@ -198,6 +221,8 @@ declare module "@kodiak-finance/orderly-plugin-core" {
 declare const OrderEntryWidget: react__default.FC<OrderEntryScriptInputs & {
     containerRef?: react__default.RefObject<HTMLDivElement>;
     disableFeatures?: ("slippageSetting" | "feesInfo")[];
+    /** Host-provided extras (e.g. grid-bot). */
+    extraPanels?: ExtraTradeEntryPanel[];
 }>;
 
 type OrderConfirmDialogProps = {
@@ -239,4 +264,4 @@ type SymbolBadgeProps = {
 };
 declare const SymbolBadge: FC<SymbolBadgeProps>;
 
-export { AdditionalInfo, FeesWidget, LTVRiskTooltipWidget, OrderConfirmDialog, OrderEntry, OrderEntryWidget, SymbolBadge, useOrderEntryScript };
+export { AdditionalInfo, type ExtraTradeEntryPanel, FeesWidget, LTVRiskTooltipWidget, OrderConfirmDialog, OrderEntry, OrderEntryWidget, SymbolBadge, useOrderEntryScript };

package/dist/index.js

@@ -1434,10 +1434,35 @@ orderlyUi.registerSimpleDialog(scaledOrderConfirmDialogId, ScaledOrderConfirmWid
     // className: "oui-p-0",
   }
 });
+var EXTRA_VALUE_PREFIX = "extra:";
 var OrderTypeSelect = (props) => {
   const { t } = orderlyI18n.useTranslation();
   const { isMobile } = orderlyUi.useScreen();
-  const { marketOrderDisabled = false, marketOrderDisabledTooltip } = props;
+  const {
+    marketOrderDisabled = false,
+    marketOrderDisabledTooltip,
+    extraOptions,
+    selectedExtraId,
+    onExtraSelect
+  } = props;
+  const extraEntries = React4.useMemo(
+    () => (extraOptions ?? []).map((opt) => ({
+      label: opt.label,
+      value: `${EXTRA_VALUE_PREFIX}${opt.id}`,
+      extraId: opt.id
+    })),
+    [extraOptions]
+  );
+  const routeAdvancedChange = (value) => {
+    if (value.startsWith(EXTRA_VALUE_PREFIX)) {
+      const id = value.slice(EXTRA_VALUE_PREFIX.length);
+      onExtraSelect?.(id);
+      return;
+    }
+    onExtraSelect?.(null);
+    props.onChange(value);
+  };
+  const advancedValue = selectedExtraId ? `${EXTRA_VALUE_PREFIX}${selectedExtraId}` : props.type;
   const allOptions = React4.useMemo(() => {
     return [
       { label: t("orderEntry.orderType.limitOrder"), value: orderlyTypes.OrderType.LIMIT },
@@ -1457,9 +1482,12 @@ var OrderTypeSelect = (props) => {
       {
         label: t("orderEntry.orderType.trailingStop"),
         value: orderlyTypes.OrderType.TRAILING_STOP
-      }
+      },
+      // Host-provided extras (e.g. grid bot) appear at the bottom of the
+      // mobile dropdown.
+      ...extraEntries.map((e) => ({ label: e.label, value: e.value }))
     ];
-  }, [t]);
+  }, [t, extraEntries]);
   const advancedOptions = React4.useMemo(() => {
     return [
       {
@@ -1474,9 +1502,12 @@ var OrderTypeSelect = (props) => {
       {
         label: t("orderEntry.orderType.trailingStop"),
         value: orderlyTypes.OrderType.TRAILING_STOP
-      }
+      },
+      // Host-provided extras (e.g. grid bot) appear at the bottom of the
+      // Advanced desktop dropdown.
+      ...extraEntries.map((e) => ({ label: e.label, value: e.value }))
     ];
-  }, [t]);
+  }, [t, extraEntries]);
   const displayLabelMap = React4.useMemo(() => {
     return {
       [orderlyTypes.OrderType.LIMIT]: t("orderEntry.orderType.limit"),
@@ -1499,8 +1530,11 @@ var OrderTypeSelect = (props) => {
       "oui-bg-base-7 oui-text-base-contrast-36"
     );
     const handleChange = (type) => {
+      if (selectedExtraId) onExtraSelect?.(null);
       props.onChange(type);
     };
+    const limitSelected = !selectedExtraId && props.type === orderlyTypes.OrderType.LIMIT;
+    const marketSelected = !selectedExtraId && props.type === orderlyTypes.OrderType.MARKET;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1511,8 +1545,8 @@ var OrderTypeSelect = (props) => {
             "button",
             {
               type: "button",
-              className: props.type === orderlyTypes.OrderType.LIMIT ? selectedButtonClassName : unselectedButtonClassName,
-              "aria-pressed": props.type === orderlyTypes.OrderType.LIMIT,
+              className: limitSelected ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": limitSelected,
               onClick: () => handleChange(orderlyTypes.OrderType.LIMIT),
               disabled: !props.canTrade,
               "data-testid": "oui-testid-orderEntry-orderType-limit",
@@ -1540,8 +1574,8 @@ var OrderTypeSelect = (props) => {
             "button",
             {
               type: "button",
-              className: props.type === orderlyTypes.OrderType.MARKET ? selectedButtonClassName : unselectedButtonClassName,
-              "aria-pressed": props.type === orderlyTypes.OrderType.MARKET,
+              className: marketSelected ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": marketSelected,
               onClick: () => handleChange(orderlyTypes.OrderType.MARKET),
               disabled: !props.canTrade,
               "data-testid": "oui-testid-orderEntry-orderType-market",
@@ -1557,10 +1591,10 @@ var OrderTypeSelect = (props) => {
                 orderlyUi.Select.options,
                 {
                   testid: "oui-testid-orderEntry-orderType-advanced-select",
-                  currentValue: props.type,
-                  value: props.type,
+                  currentValue: advancedValue,
+                  value: advancedValue,
                   options: advancedOptions,
-                  onValueChange: props.onChange,
+                  onValueChange: (v) => routeAdvancedChange(v),
                   placeholder: t("trading.layout.advanced"),
                   disabled: !props.canTrade,
                   contentProps: {
@@ -1570,6 +1604,11 @@ var OrderTypeSelect = (props) => {
                     trigger: "oui-bg-base-7 oui-border-none oui-h-8 oui-rounded-md"
                   },
                   valueFormatter: (value, option) => {
+                    if (typeof value === "string" && value.startsWith(EXTRA_VALUE_PREFIX)) {
+                      const id = value.slice(EXTRA_VALUE_PREFIX.length);
+                      const match = extraEntries.find((e) => e.extraId === id);
+                      return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", className: "oui-text-base-contrast-80", children: match?.label ?? option.placeholder });
+                    }
                     const isAdvanced = value === orderlyTypes.OrderType.STOP_LIMIT || value === orderlyTypes.OrderType.STOP_MARKET || value === orderlyTypes.OrderType.SCALED || value === orderlyTypes.OrderType.TRAILING_STOP;
                     if (!isAdvanced) {
                       return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", className: "oui-text-base-contrast-80", children: option.placeholder });
@@ -1587,6 +1626,10 @@ var OrderTypeSelect = (props) => {
     );
   }
   const handleMobileValueChange = (value) => {
+    if (value.startsWith(EXTRA_VALUE_PREFIX)) {
+      onExtraSelect?.(value.slice(EXTRA_VALUE_PREFIX.length));
+      return;
+    }
     if (marketOrderDisabled && value === orderlyTypes.OrderType.MARKET && marketOrderDisabledTooltip) {
       orderlyUi.modal.alert({
         title: t("common.tips"),
@@ -1594,14 +1637,15 @@ var OrderTypeSelect = (props) => {
       });
       return;
     }
+    if (selectedExtraId) onExtraSelect?.(null);
     props.onChange(value);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     orderlyUi.Select.options,
     {
       testid: "oui-testid-orderEntry-orderType-button",
-      currentValue: props.type,
-      value: props.type,
+      currentValue: advancedValue,
+      value: advancedValue,
       options: mobileOptions,
       onValueChange: handleMobileValueChange,
       contentProps: {
@@ -1617,6 +1661,11 @@ var OrderTypeSelect = (props) => {
         )
       },
       valueFormatter: (value, option) => {
+        if (typeof value === "string" && value.startsWith(EXTRA_VALUE_PREFIX)) {
+          const id = value.slice(EXTRA_VALUE_PREFIX.length);
+          const match = extraEntries.find((e) => e.extraId === id);
+          return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", className: "oui-text-base-contrast-80", children: match?.label ?? option.placeholder });
+        }
         const item = allOptions.find((o) => o.value === value);
         if (!item) {
           return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", children: option.placeholder });
@@ -2505,10 +2554,13 @@ function OrderEntryHeader(props) {
           setOrderValue("order_type", type);
         },
         marketOrderDisabled: props.marketOrderDisabled,
-        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip
+        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip,
+        extraOptions: props.extraOptions,
+        selectedExtraId: props.selectedExtraId,
+        onExtraSelect: props.onExtraSelect
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    !props.hideSideButtons && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: orderlyUi.cn(
@@ -5932,7 +5984,10 @@ var OrderEntry = (props) => {
                   marketOrderDisabled: props.isSymbolPostOnly,
                   marketOrderDisabledTooltip: t(
                     "orderEntry.orderType.symbolPostOnly.tooltip"
-                  )
+                  ),
+                  extraOptions: props.extraOptions,
+                  selectedExtraId: props.selectedExtraId,
+                  onExtraSelect: props.onExtraSelect
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -6631,12 +6686,40 @@ var InjectableOrderEntry = orderlyUi.injectable(
 );
 var OrderEntryWidget = (props) => {
   const state = useOrderEntryScript(props);
+  const [selectedExtraId, setSelectedExtraId] = React4.useState(null);
+  const extras = props.extraPanels ?? [];
+  const extraOptions = extras.map((e) => ({ id: e.id, label: e.label }));
+  const activeExtra = selectedExtraId ? extras.find((e) => e.id === selectedExtraId) ?? null : null;
+  if (activeExtra) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-2 xl:oui-space-y-3", ref: props.containerRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OrderEntryHeader,
+        {
+          symbol: props.symbol,
+          canTrade: state.canTrade,
+          side: state.side,
+          order_type: state.formattedOrder.order_type,
+          setOrderValue: state.manualSetOrderValue,
+          symbolLeverage: state.symbolLeverage,
+          marginMode: state.marginMode,
+          extraOptions,
+          selectedExtraId,
+          onExtraSelect: setSelectedExtraId,
+          hideSideButtons: activeExtra.hideSideButtons
+        }
+      ),
+      activeExtra.render({ symbol: props.symbol })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     InjectableOrderEntry,
     {
       ...state,
       containerRef: props.containerRef,
-      disableFeatures: props.disableFeatures
+      disableFeatures: props.disableFeatures,
+      extraOptions,
+      selectedExtraId,
+      onExtraSelect: setSelectedExtraId
     }
   );
 };