@orderly.network/ui-order-entry 2.10.1 → 2.10.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +1007 -651
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1008 -652
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +13 -13
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@ import React2, { forwardRef, useState, useImperativeHandle, useEffect, memo, cre
2
2
  import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useGetEstLiqPrice, useTrack, useQuery, useSymbolLeverage, useBoolean } from '@orderly.network/hooks';
3
3
  import { useTranslation, i18n } from '@orderly.network/i18n';
4
4
  import { useOrderEntryFormErrorMsg, useCanTrade } from '@orderly.network/react-app';
5
- import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, PositionType, BBOOrderType, OrderLevel, TrackerEventName } from '@orderly.network/types';
5
+ import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@orderly.network/types';
6
6
  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 } from '@orderly.network/ui';
7
7
  import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@orderly.network/ui-tpsl';
8
8
  import { Decimal, zero, todpIfNeed, getBBOType, removeTrailingZeros } from '@orderly.network/utils';
@@ -27,196 +27,211 @@ var AdditionalInfo = (props) => {
27
27
  useEffect(() => {
28
28
  props.onValueChange?.("visible_quantity", props.hidden ? 0 : 1);
29
29
  }, [props.hidden]);
30
- return /* @__PURE__ */ jsxs("div", { className: "oui-text-base-contrast-54", children: [
31
- /* @__PURE__ */ jsxs(
32
- Flex,
33
- {
34
- justify: pinned ? "start" : "between",
35
- mb: 3,
36
- width: pinned ? "unset" : "100%",
37
- className: "oui-gap-x-2 md:oui-gap-x-3",
38
- wrap: "wrap",
39
- gapY: 1,
40
- children: [
41
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
30
+ return /* @__PURE__ */ jsxs(
31
+ "div",
32
+ {
33
+ className: cn(
34
+ "oui-orderEntry-additionalInfo",
35
+ "oui-text-base-contrast-54"
36
+ ),
37
+ children: [
38
+ /* @__PURE__ */ jsxs(
39
+ Flex,
40
+ {
41
+ justify: pinned ? "start" : "between",
42
+ mb: 3,
43
+ width: pinned ? "unset" : "100%",
44
+ className: "oui-gap-x-2 md:oui-gap-x-3",
45
+ wrap: "wrap",
46
+ gapY: 1,
47
+ children: [
48
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
49
+ /* @__PURE__ */ jsx(
50
+ Checkbox,
51
+ {
52
+ "data-testid": "oui-testid-orderEntry-postOnly-checkBox",
53
+ id: "toggle_order_post_only",
54
+ className: "oui-postOnly-checkbox oui-peer",
55
+ color: "white",
56
+ variant: "radio",
57
+ disabled: !props.showExtra,
58
+ checked: orderTypeExtra === OrderType.POST_ONLY,
59
+ onCheckedChange: onTypeToggle(OrderType.POST_ONLY)
60
+ }
61
+ ),
62
+ /* @__PURE__ */ jsx(
63
+ Tooltip,
64
+ {
65
+ content: t("orderEntry.orderType.postOnly.tooltip"),
66
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
67
+ children: /* @__PURE__ */ jsx(
68
+ "label",
69
+ {
70
+ htmlFor: "toggle_order_post_only",
71
+ className: cn(
72
+ "oui-postOnly-label",
73
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
74
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
75
+ ),
76
+ children: t("orderEntry.orderType.postOnly")
77
+ }
78
+ )
79
+ }
80
+ )
81
+ ] }),
82
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
83
+ /* @__PURE__ */ jsx(
84
+ Checkbox,
85
+ {
86
+ "data-testid": "oui-testid-orderEntry-ioc-checkBox",
87
+ id: "toggle_order_iov",
88
+ color: "white",
89
+ className: cn("oui-ioc-checkbox", "oui-peer"),
90
+ variant: "radio",
91
+ checked: orderTypeExtra === OrderType.IOC,
92
+ onCheckedChange: onTypeToggle(OrderType.IOC),
93
+ disabled: !props.showExtra
94
+ }
95
+ ),
96
+ /* @__PURE__ */ jsx(
97
+ Tooltip,
98
+ {
99
+ content: t("orderEntry.orderType.ioc.tooltip"),
100
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
101
+ children: /* @__PURE__ */ jsx(
102
+ "label",
103
+ {
104
+ htmlFor: "toggle_order_iov",
105
+ className: cn(
106
+ "oui-ioc-label",
107
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
108
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
109
+ ),
110
+ children: t("orderEntry.orderType.ioc")
111
+ }
112
+ )
113
+ }
114
+ )
115
+ ] }),
116
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
117
+ /* @__PURE__ */ jsx(
118
+ Checkbox,
119
+ {
120
+ "data-testid": "oui-testid-orderEntry-fox-checkBox",
121
+ id: "toggle_order_fok",
122
+ color: "white",
123
+ variant: "radio",
124
+ className: cn("oui-fok-checkbox", "oui-peer"),
125
+ checked: orderTypeExtra === OrderType.FOK,
126
+ onCheckedChange: onTypeToggle(OrderType.FOK),
127
+ disabled: !props.showExtra
128
+ }
129
+ ),
130
+ /* @__PURE__ */ jsx(
131
+ Tooltip,
132
+ {
133
+ content: t("orderEntry.orderType.fok.tooltip"),
134
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
135
+ children: /* @__PURE__ */ jsx(
136
+ "label",
137
+ {
138
+ htmlFor: "toggle_order_fok",
139
+ className: cn(
140
+ "oui-fok-label",
141
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
142
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
143
+ ),
144
+ children: t("orderEntry.orderType.fok")
145
+ }
146
+ )
147
+ }
148
+ )
149
+ ] })
150
+ ]
151
+ }
152
+ ),
153
+ /* @__PURE__ */ jsxs(Flex, { gapX: 6, children: [
154
+ /* @__PURE__ */ jsxs(Flex, { children: [
42
155
  /* @__PURE__ */ jsx(
43
156
  Checkbox,
44
157
  {
45
- "data-testid": "oui-testid-orderEntry-postOnly-checkBox",
46
- id: "toggle_order_post_only",
47
- className: "oui-peer",
158
+ "data-testid": "oui-testid-orderEntry-orderConfirm-checkBox",
159
+ id: "toggle_order_confirm",
48
160
  color: "white",
49
- variant: "radio",
50
- disabled: !props.showExtra,
51
- checked: orderTypeExtra === OrderType.POST_ONLY,
52
- onCheckedChange: onTypeToggle(OrderType.POST_ONLY)
161
+ className: "oui-orderConfirm-checkbox",
162
+ checked: props.needConfirm,
163
+ onCheckedChange: (checked) => {
164
+ props.setNeedConfirm(!!checked);
165
+ }
53
166
  }
54
167
  ),
55
168
  /* @__PURE__ */ jsx(
56
- Tooltip,
169
+ "label",
57
170
  {
58
- content: t("orderEntry.orderType.postOnly.tooltip"),
59
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
60
- children: /* @__PURE__ */ jsx(
61
- "label",
62
- {
63
- htmlFor: "toggle_order_post_only",
64
- className: cn(
65
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
66
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
67
- ),
68
- children: t("orderEntry.orderType.postOnly")
69
- }
70
- )
171
+ htmlFor: "toggle_order_confirm",
172
+ className: "oui-orderConfirm-label oui-ml-1 oui-text-2xs",
173
+ children: t("orderEntry.orderConfirm")
71
174
  }
72
175
  )
73
176
  ] }),
74
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
177
+ /* @__PURE__ */ jsxs(Flex, { children: [
75
178
  /* @__PURE__ */ jsx(
76
179
  Checkbox,
77
180
  {
78
- "data-testid": "oui-testid-orderEntry-ioc-checkBox",
79
- id: "toggle_order_iov",
181
+ "data-testid": "oui-testid-orderEntry-hidden-checkBox",
182
+ id: "toggle_order_hidden",
80
183
  color: "white",
81
- className: "oui-peer",
82
- variant: "radio",
83
- checked: orderTypeExtra === OrderType.IOC,
84
- onCheckedChange: onTypeToggle(OrderType.IOC),
85
- disabled: !props.showExtra
184
+ className: "oui-orderHidden-checkbox",
185
+ checked: props.hidden,
186
+ onCheckedChange: (checked) => {
187
+ props.setHidden(checked);
188
+ }
86
189
  }
87
190
  ),
88
191
  /* @__PURE__ */ jsx(
89
192
  Tooltip,
90
193
  {
91
- content: t("orderEntry.orderType.ioc.tooltip"),
194
+ content: t("orderEntry.hidden.tooltip"),
92
195
  className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
93
196
  children: /* @__PURE__ */ jsx(
94
197
  "label",
95
198
  {
96
- htmlFor: "toggle_order_iov",
97
- className: cn(
98
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
99
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
100
- ),
101
- children: t("orderEntry.orderType.ioc")
199
+ htmlFor: "toggle_order_hidden",
200
+ className: "oui-orderHidden-label oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
201
+ children: t("orderEntry.hidden")
102
202
  }
103
203
  )
104
204
  }
105
205
  )
106
- ] }),
107
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
206
+ ] })
207
+ ] }),
208
+ !pinned && /* @__PURE__ */ jsxs(Fragment, { children: [
209
+ /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
210
+ /* @__PURE__ */ jsxs(Flex, { children: [
108
211
  /* @__PURE__ */ jsx(
109
- Checkbox,
212
+ Switch,
110
213
  {
111
- "data-testid": "oui-testid-orderEntry-fox-checkBox",
112
- id: "toggle_order_fok",
113
- color: "white",
114
- variant: "radio",
115
- className: "oui-peer",
116
- checked: orderTypeExtra === OrderType.FOK,
117
- onCheckedChange: onTypeToggle(OrderType.FOK),
118
- disabled: !props.showExtra
214
+ "data-testid": "oui-testid-orderEntry-additional-keepVisible-switch",
215
+ id: "toggle_order_keep_visible",
216
+ className: "oui-keepVisible-switch",
217
+ onCheckedChange: (checked) => {
218
+ props.setPinned(checked);
219
+ }
119
220
  }
120
221
  ),
121
222
  /* @__PURE__ */ jsx(
122
- Tooltip,
123
- {
124
- content: t("orderEntry.orderType.fok.tooltip"),
125
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
126
- children: /* @__PURE__ */ jsx(
127
- "label",
128
- {
129
- htmlFor: "toggle_order_fok",
130
- className: cn(
131
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
132
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
133
- ),
134
- children: t("orderEntry.orderType.fok")
135
- }
136
- )
137
- }
138
- )
139
- ] })
140
- ]
141
- }
142
- ),
143
- /* @__PURE__ */ jsxs(Flex, { gapX: 6, children: [
144
- /* @__PURE__ */ jsxs(Flex, { children: [
145
- /* @__PURE__ */ jsx(
146
- Checkbox,
147
- {
148
- "data-testid": "oui-testid-orderEntry-orderConfirm-checkBox",
149
- id: "toggle_order_confirm",
150
- color: "white",
151
- checked: props.needConfirm,
152
- onCheckedChange: (checked) => {
153
- props.setNeedConfirm(!!checked);
154
- }
155
- }
156
- ),
157
- /* @__PURE__ */ jsx(
158
- "label",
159
- {
160
- htmlFor: "toggle_order_confirm",
161
- className: "oui-ml-1 oui-text-2xs",
162
- children: t("orderEntry.orderConfirm")
163
- }
164
- )
165
- ] }),
166
- /* @__PURE__ */ jsxs(Flex, { children: [
167
- /* @__PURE__ */ jsx(
168
- Checkbox,
169
- {
170
- "data-testid": "oui-testid-orderEntry-hidden-checkBox",
171
- id: "toggle_order_hidden",
172
- color: "white",
173
- checked: props.hidden,
174
- onCheckedChange: (checked) => {
175
- props.setHidden(checked);
176
- }
177
- }
178
- ),
179
- /* @__PURE__ */ jsx(
180
- Tooltip,
181
- {
182
- content: t("orderEntry.hidden.tooltip"),
183
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
184
- children: /* @__PURE__ */ jsx(
185
223
  "label",
186
224
  {
187
- htmlFor: "toggle_order_hidden",
188
- className: "oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
189
- children: t("orderEntry.hidden")
225
+ htmlFor: "toggle_order_keep_visible",
226
+ className: "oui-keepVisible-label oui-ml-1 oui-text-2xs",
227
+ children: t("orderEntry.keepVisible")
190
228
  }
191
229
  )
192
- }
193
- )
194
- ] })
195
- ] }),
196
- !pinned && /* @__PURE__ */ jsxs(Fragment, { children: [
197
- /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
198
- /* @__PURE__ */ jsxs(Flex, { children: [
199
- /* @__PURE__ */ jsx(
200
- Switch,
201
- {
202
- "data-testid": "oui-testid-orderEntry-additional-keepVisible-switch",
203
- id: "toggle_order_keep_visible",
204
- onCheckedChange: (checked) => {
205
- props.setPinned(checked);
206
- }
207
- }
208
- ),
209
- /* @__PURE__ */ jsx(
210
- "label",
211
- {
212
- htmlFor: "toggle_order_keep_visible",
213
- className: "oui-ml-1 oui-text-2xs",
214
- children: t("orderEntry.keepVisible")
215
- }
216
- )
217
- ] })
218
- ] })
219
- ] });
230
+ ] })
231
+ ] })
232
+ ]
233
+ }
234
+ );
220
235
  };
221
236
  function AdditionalConfigButton(props) {
222
237
  const [open2, setOpen] = useState(false);
@@ -225,6 +240,7 @@ function AdditionalConfigButton(props) {
225
240
  "button",
226
241
  {
227
242
  "data-testid": "oui-testid-orderEntry-additional-button",
243
+ className: "oui-orderEntry-additionalConfig-btn",
228
244
  onClick: () => {
229
245
  setOpen(true);
230
246
  },
@@ -236,7 +252,7 @@ function AdditionalConfigButton(props) {
236
252
  viewBox: "0 0 16 16",
237
253
  fill: "currentColor",
238
254
  xmlns: "http://www.w3.org/2000/svg",
239
- className: "oui-fill-white/[.36] hover:oui-fill-white/80",
255
+ className: "oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
240
256
  children: /* @__PURE__ */ jsx(
241
257
  "path",
242
258
  {
@@ -247,33 +263,48 @@ function AdditionalConfigButton(props) {
247
263
  )
248
264
  }
249
265
  ) }),
250
- /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "end", className: "oui-w-[230px]", children: /* @__PURE__ */ jsx(AdditionalInfo, { ...props }) })
266
+ /* @__PURE__ */ jsx(
267
+ PopoverContent,
268
+ {
269
+ side: "top",
270
+ align: "end",
271
+ className: "oui-orderEntry-additionalInfo-popover-content oui-w-[230px]",
272
+ children: /* @__PURE__ */ jsx(AdditionalInfo, { ...props })
273
+ }
274
+ )
251
275
  ] });
252
276
  }
253
277
  var defaultPath = "M10.007 1.302a.74.74 0 0 0-.486.214c-1.033.989-1.349 1.815-.972 2.948-.88.675-1.437.84-2.536.84-1.503 0-2.484.182-3.152.85v.02a1.583 1.583 0 0 0 0 2.248l1.867 1.882-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.194 1.87 1.861a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.523.854-3.144 0-1.03.212-1.758.852-2.523 1.233.361 1.95.015 2.961-.995a.68.68 0 0 0 .188-.48c0-.234-.06-.593-.209-1.04a5.34 5.34 0 0 0-1.312-2.103 5.35 5.35 0 0 0-2.104-1.312c-.448-.15-.808-.208-1.042-.208";
254
278
  var PinButton = (props) => {
255
279
  const [path, setPath] = useState(defaultPath);
256
- return /* @__PURE__ */ jsx("button", { ...props, children: /* @__PURE__ */ jsx(
257
- "svg",
280
+ return /* @__PURE__ */ jsx(
281
+ "button",
258
282
  {
259
- width: 16,
260
- height: 16,
261
- viewBox: "0 0 16 16",
262
- fill: "currentColor",
263
- xmlns: "http://www.w3.org/2000/svg",
264
- focusable: false,
265
- onMouseEnter: () => {
266
- setPath(
267
- 'M10.008 1.302a.74.74 0 0 0-.486.214c-1.033.989-1.349 1.815-.972 2.948-.88.675-1.437.84-2.536.84-1.503 0-2.484.182-3.152.85v.02a1.583 1.583 0 0 0 0 2.248l1.867 1.882-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.194 1.87 1.861a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.523.854-3.144 0-1.03.212-1.758.853-2.523 1.232.361 1.95.015 2.96-.995a.68.68 0 0 0 .188-.48c0-.234-.06-.593-.209-1.04a5.34 5.34 0 0 0-1.312-2.103A5.35 5.35 0 0 0 11.05 1.51c-.448-.15-.808-.208-1.042-.208m.258 1.37c.708.131 1.421.6 1.93 1.107.507.508.94 1.13 1.119 1.945-.636.61-1.026.658-1.662.323a.67.67 0 0 0-.779.117c-1.214 1.213-1.533 2.314-1.533 3.8 0 1.292-.076 1.773-.48 2.206-.113.123-.27.104-.374 0L3.799 7.486a.24.24 0 0 1-.017-.34c.239-.29.769-.515 2.226-.514 1.742.001 2.668-.448 3.812-1.52a.67.67 0 0 0 .125-.77c-.343-.686-.29-1.047.321-1.67"'
268
- );
269
- },
270
- onMouseLeave: () => {
271
- setPath(defaultPath);
272
- },
273
- className: "oui-text-primary-darken",
274
- children: /* @__PURE__ */ jsx("path", { d: path })
283
+ ...props,
284
+ className: cn("oui-orderEntry-pin-btn", props.className),
285
+ children: /* @__PURE__ */ jsx(
286
+ "svg",
287
+ {
288
+ width: 16,
289
+ height: 16,
290
+ viewBox: "0 0 16 16",
291
+ fill: "currentColor",
292
+ xmlns: "http://www.w3.org/2000/svg",
293
+ focusable: false,
294
+ onMouseEnter: () => {
295
+ setPath(
296
+ 'M10.008 1.302a.74.74 0 0 0-.486.214c-1.033.989-1.349 1.815-.972 2.948-.88.675-1.437.84-2.536.84-1.503 0-2.484.182-3.152.85v.02a1.583 1.583 0 0 0 0 2.248l1.867 1.882-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.194 1.87 1.861a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.523.854-3.144 0-1.03.212-1.758.853-2.523 1.232.361 1.95.015 2.96-.995a.68.68 0 0 0 .188-.48c0-.234-.06-.593-.209-1.04a5.34 5.34 0 0 0-1.312-2.103A5.35 5.35 0 0 0 11.05 1.51c-.448-.15-.808-.208-1.042-.208m.258 1.37c.708.131 1.421.6 1.93 1.107.507.508.94 1.13 1.119 1.945-.636.61-1.026.658-1.662.323a.67.67 0 0 0-.779.117c-1.214 1.213-1.533 2.314-1.533 3.8 0 1.292-.076 1.773-.48 2.206-.113.123-.27.104-.374 0L3.799 7.486a.24.24 0 0 1-.017-.34c.239-.29.769-.515 2.226-.514 1.742.001 2.668-.448 3.812-1.52a.67.67 0 0 0 .125-.77c-.343-.686-.29-1.047.321-1.67"'
297
+ );
298
+ },
299
+ onMouseLeave: () => {
300
+ setPath(defaultPath);
301
+ },
302
+ className: "oui-text-primary-darken",
303
+ children: /* @__PURE__ */ jsx("path", { d: path })
304
+ }
305
+ )
275
306
  }
276
- ) });
307
+ );
277
308
  };
278
309
  function AdvancedTPSLResult(props) {
279
310
  const { order: formattedOrder, symbolInfo, onEdit, onDelete, errors } = props;
@@ -287,7 +318,7 @@ function AdvancedTPSLResult(props) {
287
318
  {
288
319
  direction: "column",
289
320
  itemAlign: "start",
290
- className: "oui-w-full",
321
+ className: "oui-advancedTPSLResult-tp oui-w-full",
291
322
  gap: 4,
292
323
  children: [
293
324
  /* @__PURE__ */ jsxs(
@@ -365,7 +396,7 @@ function AdvancedTPSLResult(props) {
365
396
  {
366
397
  direction: "column",
367
398
  itemAlign: "start",
368
- className: "oui-w-full",
399
+ className: "oui-advancedTPSLResult-sl oui-w-full",
369
400
  gap: 4,
370
401
  children: /* @__PURE__ */ jsxs(
371
402
  Flex,
@@ -438,31 +469,39 @@ function AdvancedTPSLResult(props) {
438
469
  {
439
470
  direction: "column",
440
471
  itemAlign: "start",
441
- className: "oui-w-full oui-text-2xs",
472
+ className: "oui-orderEntry-advancedTpslResult oui-w-full oui-text-2xs",
442
473
  gap: 4,
443
474
  children: [
444
- /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "start", className: "oui-w-full", children: [
445
- /* @__PURE__ */ jsx(Text, { children: t("common.tpsl") }),
446
- /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
447
- /* @__PURE__ */ jsx(
448
- DeleteIcon,
449
- {
450
- size: 12,
451
- className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
452
- opacity: 1,
453
- onClick: onDelete
454
- }
455
- ),
456
- /* @__PURE__ */ jsx(
457
- EditIcon,
458
- {
459
- size: 12,
460
- className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
461
- onClick: onEdit
462
- }
463
- )
464
- ] })
465
- ] }),
475
+ /* @__PURE__ */ jsxs(
476
+ Flex,
477
+ {
478
+ justify: "between",
479
+ itemAlign: "start",
480
+ className: "oui-advancedTpslResult-header oui-w-full",
481
+ children: [
482
+ /* @__PURE__ */ jsx(Text, { children: t("common.tpsl") }),
483
+ /* @__PURE__ */ jsxs(Flex, { gap: 2, className: "oui-advancedTpslResult-actions", children: [
484
+ /* @__PURE__ */ jsx(
485
+ DeleteIcon,
486
+ {
487
+ size: 12,
488
+ className: "oui-delete-btn oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
489
+ opacity: 1,
490
+ onClick: onDelete
491
+ }
492
+ ),
493
+ /* @__PURE__ */ jsx(
494
+ EditIcon,
495
+ {
496
+ size: 12,
497
+ className: "oui-edit-btn oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
498
+ onClick: onEdit
499
+ }
500
+ )
501
+ ] })
502
+ ]
503
+ }
504
+ ),
466
505
  /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "start", className: "oui-w-full", children: [
467
506
  /* @__PURE__ */ jsx(Text, { children: t("tpsl.mode") }),
468
507
  /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: formattedOrder.position_type === PositionType.FULL ? t("tpsl.fullPosition") : t("tpsl.partialPosition") })
@@ -505,33 +544,43 @@ var EditIcon = (props) => {
505
544
  var RegularFeesUI = (props) => {
506
545
  const { t } = useTranslation();
507
546
  const { taker, maker } = props;
508
- const originalTrailingFees = /* @__PURE__ */ jsx(Flex, { itemAlign: "center", justify: "between", width: "100%", gap: 1, children: /* @__PURE__ */ jsxs(Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
509
- /* @__PURE__ */ jsx(Text, { className: "oui-truncate", size: "2xs", children: t("common.fees") }),
510
- /* @__PURE__ */ jsx(
511
- AuthGuard,
512
- {
513
- fallback: () => /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
514
- t("dmm.taker"),
515
- ": --% / ",
516
- t("dmm.maker"),
517
- ": --%"
518
- ] }),
519
- children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
520
- /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
521
- t("dmm.taker"),
522
- ":"
523
- ] }),
524
- /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
525
- /* @__PURE__ */ jsx(Text, { size: "2xs", children: "/" }),
526
- /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
527
- t("dmm.maker"),
528
- ":"
529
- ] }),
530
- /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
531
- ] })
532
- }
533
- )
534
- ] }) });
547
+ const originalTrailingFees = /* @__PURE__ */ jsx(
548
+ Flex,
549
+ {
550
+ itemAlign: "center",
551
+ justify: "between",
552
+ width: "100%",
553
+ gap: 1,
554
+ className: "oui-orderEntry-fees",
555
+ children: /* @__PURE__ */ jsxs(Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
556
+ /* @__PURE__ */ jsx(Text, { className: "oui-fees-label oui-truncate", size: "2xs", children: t("common.fees") }),
557
+ /* @__PURE__ */ jsx(
558
+ AuthGuard,
559
+ {
560
+ fallback: () => /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
561
+ t("dmm.taker"),
562
+ ": --% / ",
563
+ t("dmm.maker"),
564
+ ": --%"
565
+ ] }),
566
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 1, className: "oui-fees-value-container", children: [
567
+ /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
568
+ t("dmm.taker"),
569
+ ":"
570
+ ] }),
571
+ /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
572
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: "/" }),
573
+ /* @__PURE__ */ jsxs(Text, { className: "oui-truncate", size: "2xs", children: [
574
+ t("dmm.maker"),
575
+ ":"
576
+ ] }),
577
+ /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
578
+ ] })
579
+ }
580
+ )
581
+ ] })
582
+ }
583
+ );
535
584
  return originalTrailingFees;
536
585
  };
537
586
  var RegularFeesWidget = (props) => {
@@ -605,7 +654,7 @@ var SlippageEditor = forwardRef((props, ref) => {
605
654
  children: /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 }) })
606
655
  }
607
656
  );
608
- return /* @__PURE__ */ jsxs("div", { className: "oui-text-2xs", children: [
657
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-slippageEditor oui-text-2xs", children: [
609
658
  /* @__PURE__ */ jsxs(Flex, { mb: 2, gapX: 1, children: [
610
659
  /* @__PURE__ */ jsx(Text, { size: "xs", children: t("orderEntry.slippage") }),
611
660
  toolTipButton
@@ -637,6 +686,7 @@ var SlippageEditor = forwardRef((props, ref) => {
637
686
  onValueChange,
638
687
  classNames: {
639
688
  root: cn(
689
+ "oui-slippageEditor-customInput",
640
690
  "oui-rounded-md oui-bg-base-6",
641
691
  "oui-h-[40px] oui-w-[74px]"
642
692
  ),
@@ -660,6 +710,7 @@ var SlippageItem = ({ value, isActive, onClick }) => {
660
710
  width: 74,
661
711
  height: 40,
662
712
  className: cn(
713
+ "oui-slippageEditor-option",
663
714
  "oui-cursor-pointer oui-select-none",
664
715
  isActive ? "oui-bg-primary-light oui-text-primary-contrast/80" : "oui-text-base-contrast-80"
665
716
  ),
@@ -690,15 +741,21 @@ var SlippageCell = (props) => {
690
741
  onOpenChange: toggle,
691
742
  title: t("common.settings"),
692
743
  contentProps: { size: isMobile ? "xs" : "sm" },
744
+ classNames: {
745
+ footer: "oui-orderEntry-slippage-footer",
746
+ body: "oui-orderEntry-slippage-body"
747
+ },
693
748
  actions: {
694
749
  primary: {
695
750
  disabled: false,
696
751
  label: t("common.save"),
697
- onClick: onConfirm
752
+ onClick: onConfirm,
753
+ className: "oui-slippage-save-btn"
698
754
  },
699
755
  secondary: {
700
756
  label: t("common.cancel"),
701
- onClick: () => setClose()
757
+ onClick: () => setClose(),
758
+ className: "oui-slippage-cancel-btn"
702
759
  }
703
760
  },
704
761
  children: /* @__PURE__ */ jsx(
@@ -711,8 +768,8 @@ var SlippageCell = (props) => {
711
768
  )
712
769
  }
713
770
  ),
714
- /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
715
- /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("orderEntry.slippage") }),
771
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
772
+ /* @__PURE__ */ jsx(Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
716
773
  /* @__PURE__ */ jsx(
717
774
  AuthGuard,
718
775
  {
@@ -722,7 +779,7 @@ var SlippageCell = (props) => {
722
779
  t("common.max"),
723
780
  ": --%"
724
781
  ] }),
725
- children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
782
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 1, className: "oui-slippage-value-container", children: [
726
783
  /* @__PURE__ */ jsx(
727
784
  Text.numeral,
728
785
  {
@@ -733,17 +790,24 @@ var SlippageCell = (props) => {
733
790
  children: props.estSlippage ?? 0
734
791
  }
735
792
  ),
736
- /* @__PURE__ */ jsx("button", { className: "oui-text-2xs", onClick: () => setOpen(), children: /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-0.5", as: "span", children: [
737
- /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
738
- /* @__PURE__ */ jsx(
739
- EditIcon$1,
740
- {
741
- className: "oui-text-primary oui-hidden md:oui-block",
742
- size: 12,
743
- opacity: 1
744
- }
745
- )
746
- ] }) })
793
+ /* @__PURE__ */ jsx(
794
+ "button",
795
+ {
796
+ className: "oui-slippage-edit-btn oui-text-2xs",
797
+ onClick: () => setOpen(),
798
+ children: /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-0.5", as: "span", children: [
799
+ /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
800
+ /* @__PURE__ */ jsx(
801
+ EditIcon$1,
802
+ {
803
+ className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
804
+ size: 12,
805
+ opacity: 1
806
+ }
807
+ )
808
+ ] })
809
+ }
810
+ )
747
811
  ] })
748
812
  }
749
813
  )
@@ -762,56 +826,62 @@ function AssetInfo(props) {
762
826
  symbol,
763
827
  side: props.side
764
828
  });
765
- return /* @__PURE__ */ jsxs("div", { className: "oui-space-y-[2px] xl:oui-space-y-1", children: [
766
- /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
767
- isMobile ? /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsx(
768
- Tooltip,
769
- {
770
- content: /* @__PURE__ */ jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
771
- /* @__PURE__ */ jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
772
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
773
- "a",
774
- {
775
- href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
776
- target: "_blank",
777
- rel: "noopener noreferrer",
778
- className: "oui-text-primary oui-underline",
779
- children: t("common.liquidationPrice.tooltip.learnMore")
780
- }
781
- ) })
782
- ] }),
783
- children: /* @__PURE__ */ jsx(
784
- Text,
829
+ return /* @__PURE__ */ jsxs(
830
+ "div",
831
+ {
832
+ className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
833
+ children: [
834
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
835
+ isMobile ? /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsx(
836
+ Tooltip,
837
+ {
838
+ content: /* @__PURE__ */ jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
839
+ /* @__PURE__ */ jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
840
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
841
+ "a",
842
+ {
843
+ href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
844
+ target: "_blank",
845
+ rel: "noopener noreferrer",
846
+ className: "oui-text-primary oui-underline",
847
+ children: t("common.liquidationPrice.tooltip.learnMore")
848
+ }
849
+ ) })
850
+ ] }),
851
+ children: /* @__PURE__ */ jsx(
852
+ Text,
853
+ {
854
+ size: "2xs",
855
+ className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
856
+ children: t("orderEntry.estLiqPrice")
857
+ }
858
+ )
859
+ }
860
+ ),
861
+ /* @__PURE__ */ jsx(
862
+ Text.numeral,
785
863
  {
864
+ unit: props.quote,
786
865
  size: "2xs",
787
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
788
- children: t("orderEntry.estLiqPrice")
866
+ dp: props.dp,
867
+ className: "oui-estLiqPrice-value oui-text-base-contrast-80",
868
+ unitClassName: "oui-ml-1 oui-text-base-contrast-36",
869
+ children: canTrade ? displayEstLiqPrice ?? "--" : "--"
789
870
  }
790
871
  )
791
- }
792
- ),
793
- /* @__PURE__ */ jsx(
794
- Text.numeral,
795
- {
796
- unit: props.quote,
797
- size: "2xs",
798
- dp: props.dp,
799
- className: "oui-text-base-contrast-80",
800
- unitClassName: "oui-ml-1 oui-text-base-contrast-36",
801
- children: canTrade ? displayEstLiqPrice ?? "--" : "--"
802
- }
803
- )
804
- ] }),
805
- orderType === OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsx(
806
- SlippageUI,
807
- {
808
- slippage: props.slippage,
809
- setSlippage: props.setSlippage,
810
- estSlippage: props.estSlippage
811
- }
812
- ),
813
- !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsx(FeesWidget, { symbol: props.symbol })
814
- ] });
872
+ ] }),
873
+ orderType === OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsx(
874
+ SlippageUI,
875
+ {
876
+ slippage: props.slippage,
877
+ setSlippage: props.setSlippage,
878
+ estSlippage: props.estSlippage
879
+ }
880
+ ),
881
+ !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsx(FeesWidget, { symbol: props.symbol })
882
+ ]
883
+ }
884
+ );
815
885
  }
816
886
  var calculateLTVColor = (val) => {
817
887
  if (val >= 0 && val < 50) {
@@ -834,68 +904,77 @@ var LTVRiskTooltipUI = (props) => {
834
904
  currentLtv,
835
905
  onConvert
836
906
  } = props;
837
- return /* @__PURE__ */ jsxs(Flex, { gap: 1, className: "oui-w-72 oui-max-w-72", direction: "column", children: [
838
- /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
839
- /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("common.assets") }),
840
- /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
841
- ] }),
842
- holdingData.map((asset, index) => {
843
- return /* @__PURE__ */ jsxs(
844
- Flex,
845
- {
846
- width: "100%",
847
- justify: "between",
848
- itemAlign: "center",
849
- children: [
850
- /* @__PURE__ */ jsx(Text, { intensity: 80, size: "xs", children: asset.token }),
851
- /* @__PURE__ */ jsx(
852
- Text,
853
- {
854
- size: "xs",
855
- intensity: 80,
856
- className: cn(
857
- Number(asset.collateralContribution) < 0 && "oui-text-warning"
858
- ),
859
- children: removeTrailingZeros(asset.collateralContribution)
860
- }
861
- )
862
- ]
863
- },
864
- `item-${index}`
865
- );
866
- }),
867
- /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
868
- /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
869
- /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
870
- /* @__PURE__ */ jsxs(
871
- Text,
872
- {
873
- size: "xs",
874
- intensity: 36,
875
- className: cn("oui-select-none", calculateLTVColor(currentLtv)),
876
- children: [
877
- currentLtv,
878
- "%"
879
- ]
880
- }
881
- )
882
- ] }),
883
- /* @__PURE__ */ jsx(Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
884
- threshold: isThresholdLoading ? "-" : ltv_threshold,
885
- usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
886
- }) }),
887
- /* @__PURE__ */ jsx(
888
- Button,
889
- {
890
- fullWidth: true,
891
- size: "md",
892
- variant: "outlined",
893
- color: "secondary",
894
- onClick: onConvert,
895
- children: t("transfer.convert.convertAssets")
896
- }
897
- )
898
- ] });
907
+ return /* @__PURE__ */ jsxs(
908
+ Flex,
909
+ {
910
+ gap: 1,
911
+ className: "oui-orderEntry-ltvRiskTooltip oui-w-72 oui-max-w-72",
912
+ direction: "column",
913
+ children: [
914
+ /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
915
+ /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("common.assets") }),
916
+ /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
917
+ ] }),
918
+ holdingData.map((asset, index) => {
919
+ return /* @__PURE__ */ jsxs(
920
+ Flex,
921
+ {
922
+ width: "100%",
923
+ justify: "between",
924
+ itemAlign: "center",
925
+ children: [
926
+ /* @__PURE__ */ jsx(Text, { intensity: 80, size: "xs", children: asset.token }),
927
+ /* @__PURE__ */ jsx(
928
+ Text,
929
+ {
930
+ size: "xs",
931
+ intensity: 80,
932
+ className: cn(
933
+ Number(asset.collateralContribution) < 0 && "oui-text-warning"
934
+ ),
935
+ children: removeTrailingZeros(asset.collateralContribution)
936
+ }
937
+ )
938
+ ]
939
+ },
940
+ `item-${index}`
941
+ );
942
+ }),
943
+ /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
944
+ /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
945
+ /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
946
+ /* @__PURE__ */ jsxs(
947
+ Text,
948
+ {
949
+ size: "xs",
950
+ intensity: 36,
951
+ className: cn("oui-select-none", calculateLTVColor(currentLtv)),
952
+ children: [
953
+ currentLtv,
954
+ "%"
955
+ ]
956
+ }
957
+ )
958
+ ] }),
959
+ /* @__PURE__ */ jsx(Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
960
+ threshold: isThresholdLoading ? "-" : ltv_threshold,
961
+ usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
962
+ }) }),
963
+ /* @__PURE__ */ jsx(
964
+ Button,
965
+ {
966
+ fullWidth: true,
967
+ size: "md",
968
+ variant: "outlined",
969
+ color: "secondary",
970
+ className: "oui-ltvRiskTooltip-convert-btn",
971
+ onClick: onConvert,
972
+ children: t("transfer.convert.convertAssets")
973
+ }
974
+ )
975
+ ]
976
+ }
977
+ );
899
978
  };
900
979
  var useConvertThreshold = () => {
901
980
  const { data, error, isLoading } = useQuery(
@@ -964,52 +1043,60 @@ var Available = (props) => {
964
1043
  const showLTV = useMemo(() => {
965
1044
  return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
966
1045
  }, [currentLtv]);
967
- return /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", children: [
968
- /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("common.available") }),
969
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
970
- showLTV && /* @__PURE__ */ jsx(
971
- Tooltip,
972
- {
973
- className: "oui-bg-base-6 oui-p-2",
974
- content: /* @__PURE__ */ jsx(LTVRiskTooltipWidget, {}),
975
- children: /* @__PURE__ */ jsx(
976
- InfoCircleIcon,
1046
+ return /* @__PURE__ */ jsxs(
1047
+ Flex,
1048
+ {
1049
+ itemAlign: "center",
1050
+ justify: "between",
1051
+ className: "oui-orderEntry-available",
1052
+ children: [
1053
+ /* @__PURE__ */ jsx(Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
1054
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
1055
+ showLTV && /* @__PURE__ */ jsx(
1056
+ Tooltip,
977
1057
  {
978
- className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
1058
+ className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
1059
+ content: /* @__PURE__ */ jsx(LTVRiskTooltipWidget, {}),
1060
+ children: /* @__PURE__ */ jsx(
1061
+ InfoCircleIcon,
1062
+ {
1063
+ className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
1064
+ }
1065
+ )
1066
+ }
1067
+ ),
1068
+ /* @__PURE__ */ jsx(
1069
+ Text.numeral,
1070
+ {
1071
+ unit: quote,
1072
+ size: "2xs",
1073
+ className: "oui-available-value oui-text-base-contrast-80",
1074
+ unitClassName: "oui-ml-1 oui-text-base-contrast-54",
1075
+ dp: 2,
1076
+ padding: false,
1077
+ children: canTrade ? freeCollateral : 0
1078
+ }
1079
+ ),
1080
+ /* @__PURE__ */ jsx(
1081
+ Button,
1082
+ {
1083
+ variant: "text",
1084
+ size: "xs",
1085
+ color: "secondary",
1086
+ className: "oui-available-deposit-icon oui-p-0 hover:oui-text-base-contrast-80",
1087
+ onClick: () => {
1088
+ const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
1089
+ modal.show(handleDomId, {
1090
+ activeTab: "deposit"
1091
+ });
1092
+ },
1093
+ children: /* @__PURE__ */ jsx(AddCircleIcon, { opacity: 1 })
979
1094
  }
980
1095
  )
981
- }
982
- ),
983
- /* @__PURE__ */ jsx(
984
- Text.numeral,
985
- {
986
- unit: quote,
987
- size: "2xs",
988
- className: "oui-text-base-contrast-80",
989
- unitClassName: "oui-ml-1 oui-text-base-contrast-54",
990
- dp: 2,
991
- padding: false,
992
- children: canTrade ? freeCollateral : 0
993
- }
994
- ),
995
- /* @__PURE__ */ jsx(
996
- Button,
997
- {
998
- variant: "text",
999
- size: "xs",
1000
- color: "secondary",
1001
- className: "oui-p-0 hover:oui-text-base-contrast-80",
1002
- onClick: () => {
1003
- const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
1004
- modal.show(handleDomId, {
1005
- activeTab: "deposit"
1006
- });
1007
- },
1008
- children: /* @__PURE__ */ jsx(AddCircleIcon, { opacity: 1 })
1009
- }
1010
- )
1011
- ] })
1012
- ] });
1096
+ ] })
1097
+ ]
1098
+ }
1099
+ );
1013
1100
  };
1014
1101
  function isBBOOrder(options2) {
1015
1102
  const { order_type, order_type_ext } = options2;
@@ -1202,13 +1289,36 @@ var OrderConfirmDialog = (props) => {
1202
1289
  )
1203
1290
  ] });
1204
1291
  };
1205
- const header = /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
1206
- /* @__PURE__ */ jsx(Text.formatted, { rule: "symbol", showIcon: true, children: order.symbol }),
1207
- /* @__PURE__ */ jsxs(Flex, { justify: "end", gapX: 1, children: [
1208
- /* @__PURE__ */ jsx(OrderTypeTag, { type: order_type }),
1209
- side === OrderSide.BUY ? /* @__PURE__ */ jsx(Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsx(Badge, { color: "sell", size: "sm", children: t("common.sell") })
1210
- ] })
1211
- ] });
1292
+ const header = /* @__PURE__ */ jsxs(
1293
+ Flex,
1294
+ {
1295
+ justify: "between",
1296
+ className: "oui-orderEntry-orderConfirmDialog-header",
1297
+ children: [
1298
+ /* @__PURE__ */ jsx(
1299
+ Text.formatted,
1300
+ {
1301
+ rule: "symbol",
1302
+ showIcon: true,
1303
+ className: "oui-orderConfirmDialog-symbol",
1304
+ children: order.symbol
1305
+ }
1306
+ ),
1307
+ /* @__PURE__ */ jsxs(
1308
+ Flex,
1309
+ {
1310
+ justify: "end",
1311
+ gapX: 1,
1312
+ className: "oui-orderConfirmDialog-header-tags",
1313
+ children: [
1314
+ /* @__PURE__ */ jsx(OrderTypeTag, { type: order_type }),
1315
+ side === OrderSide.BUY ? /* @__PURE__ */ jsx(Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsx(Badge, { color: "sell", size: "sm", children: t("common.sell") })
1316
+ ]
1317
+ }
1318
+ )
1319
+ ]
1320
+ }
1321
+ );
1212
1322
  const quantityItem = /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
1213
1323
  /* @__PURE__ */ jsx(Text, { children: t("common.orderQty") }),
1214
1324
  /* @__PURE__ */ jsx(
@@ -1308,33 +1418,68 @@ var OrderConfirmDialog = (props) => {
1308
1418
  }
1309
1419
  )
1310
1420
  ] });
1311
- const orderConfirmCheckbox = /* @__PURE__ */ jsxs(Flex, { gapX: 1, pt: 4, pb: 5, children: [
1312
- /* @__PURE__ */ jsx(
1313
- Checkbox,
1314
- {
1315
- id: "orderConfirm",
1316
- color: "white",
1317
- onCheckedChange: (checked) => {
1318
- setNeedConfirm(!!!checked);
1319
- }
1320
- }
1321
- ),
1322
- /* @__PURE__ */ jsx(
1323
- "label",
1324
- {
1325
- htmlFor: "orderConfirm",
1326
- className: textVariants({
1327
- size: "xs",
1328
- intensity: 54
1329
- }),
1330
- children: t("orderEntry.disableOrderConfirm")
1331
- }
1332
- )
1333
- ] });
1334
- const buttons = /* @__PURE__ */ jsxs(Grid, { cols: 2, gapX: 3, children: [
1335
- /* @__PURE__ */ jsx(Button, { color: "secondary", size: "md", onClick: () => onCancel(), children: t("common.cancel") }),
1336
- /* @__PURE__ */ jsx(Button, { size: "md", onClick: () => onConfirm(), children: t("common.confirm") })
1337
- ] });
1421
+ const orderConfirmCheckbox = /* @__PURE__ */ jsxs(
1422
+ Flex,
1423
+ {
1424
+ gapX: 1,
1425
+ pt: 4,
1426
+ pb: 5,
1427
+ className: "oui-orderEntry-orderConfirmDialog-disableConfirm",
1428
+ children: [
1429
+ /* @__PURE__ */ jsx(
1430
+ Checkbox,
1431
+ {
1432
+ id: "orderConfirm",
1433
+ color: "white",
1434
+ className: "oui-orderConfirmDialog-disableConfirm-checkbox",
1435
+ onCheckedChange: (checked) => {
1436
+ setNeedConfirm(!!!checked);
1437
+ }
1438
+ }
1439
+ ),
1440
+ /* @__PURE__ */ jsx(
1441
+ "label",
1442
+ {
1443
+ htmlFor: "orderConfirm",
1444
+ className: textVariants({
1445
+ size: "xs",
1446
+ intensity: 54
1447
+ }),
1448
+ children: t("orderEntry.disableOrderConfirm")
1449
+ }
1450
+ )
1451
+ ]
1452
+ }
1453
+ );
1454
+ const buttons = /* @__PURE__ */ jsxs(
1455
+ Grid,
1456
+ {
1457
+ cols: 2,
1458
+ gapX: 3,
1459
+ className: "oui-orderEntry-orderConfirmDialog-actions",
1460
+ children: [
1461
+ /* @__PURE__ */ jsx(
1462
+ Button,
1463
+ {
1464
+ color: "secondary",
1465
+ size: "md",
1466
+ className: "oui-cancel-btn",
1467
+ onClick: () => onCancel(),
1468
+ children: t("common.cancel")
1469
+ }
1470
+ ),
1471
+ /* @__PURE__ */ jsx(
1472
+ Button,
1473
+ {
1474
+ size: "md",
1475
+ className: "oui-confirm-btn",
1476
+ onClick: () => onConfirm(),
1477
+ children: t("common.confirm")
1478
+ }
1479
+ )
1480
+ ]
1481
+ }
1482
+ );
1338
1483
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1339
1484
  header,
1340
1485
  /* @__PURE__ */ jsx(Divider, { className: "oui-my-4" }),
@@ -1344,7 +1489,7 @@ var OrderConfirmDialog = (props) => {
1344
1489
  className: textVariants({
1345
1490
  size: "sm",
1346
1491
  intensity: 54,
1347
- className: "oui-space-y-1"
1492
+ className: "oui-orderEntry-orderConfirmDialog-content oui-space-y-1"
1348
1493
  }),
1349
1494
  children: [
1350
1495
  quantityItem,
@@ -1429,10 +1574,14 @@ var MaxQtyConfirm = memo((props) => {
1429
1574
  closable: true,
1430
1575
  onOpenChange: props.onOpenChange,
1431
1576
  size: "sm",
1577
+ classNames: {
1578
+ footer: "oui-maxQtyConfirm-footer",
1579
+ body: "oui-maxQtyConfirm-body"
1580
+ },
1432
1581
  actions: {
1433
1582
  primary: {
1434
1583
  label: t("orderEntry.placeOrderNow"),
1435
- className: "oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1584
+ className: "oui-primary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1436
1585
  onClick: () => {
1437
1586
  props.onConfirm();
1438
1587
  return Promise.resolve();
@@ -1440,14 +1589,14 @@ var MaxQtyConfirm = memo((props) => {
1440
1589
  },
1441
1590
  secondary: {
1442
1591
  label: t("common.cancel"),
1443
- className: "oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1592
+ className: "oui-secondary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1444
1593
  onClick: () => {
1445
1594
  props.onOpenChange(false);
1446
1595
  return Promise.resolve();
1447
1596
  }
1448
1597
  }
1449
1598
  },
1450
- children: /* @__PURE__ */ jsx("div", { className: "oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
1599
+ children: /* @__PURE__ */ jsx("div", { className: "oui-maxQtyConfirm-content oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
1451
1600
  maxQty: `${props.maxQty} ${props.base}`
1452
1601
  }) })
1453
1602
  }
@@ -1540,12 +1689,13 @@ var ScaledOrderConfirm = (props) => {
1540
1689
  }
1541
1690
  ];
1542
1691
  }, [t, symbolInfo, askAndBid, base_dp, quote_dp]);
1543
- return /* @__PURE__ */ jsxs("div", { className: "oui-font-semibold", children: [
1692
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-scaledOrderConfirm oui-font-semibold", children: [
1544
1693
  /* @__PURE__ */ jsx(
1545
1694
  DataTable,
1546
1695
  {
1547
1696
  classNames: {
1548
1697
  root: cn(
1698
+ "oui-scaledOrderConfirm-table",
1549
1699
  "oui-bg-base-7",
1550
1700
  "oui-rounded-lg",
1551
1701
  // need to set overflow hidden because table header will avoid the border radius
@@ -1567,7 +1717,7 @@ var ScaledOrderConfirm = (props) => {
1567
1717
  }
1568
1718
  }
1569
1719
  ),
1570
- /* @__PURE__ */ jsxs("div", { className: "oui-mb-5 oui-mt-4 oui-text-2xs", children: [
1720
+ /* @__PURE__ */ jsxs("div", { className: "oui-scaledOrderConfirm-content oui-mb-5 oui-mt-4 oui-text-2xs", children: [
1571
1721
  /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
1572
1722
  /* @__PURE__ */ jsx(Text, { children: t("orderEntry.totalOrders") }),
1573
1723
  /* @__PURE__ */ jsx(Text, { intensity: 80, children: order.orders?.length })
@@ -1604,8 +1754,25 @@ var ScaledOrderConfirm = (props) => {
1604
1754
  ] })
1605
1755
  ] }),
1606
1756
  /* @__PURE__ */ jsxs(Grid, { cols: 2, gapX: 3, children: [
1607
- /* @__PURE__ */ jsx(Button, { color: "secondary", size: "md", onClick: onCancel, children: t("common.cancel") }),
1608
- /* @__PURE__ */ jsx(Button, { size: "md", onClick: onConfirm, children: t("common.confirm") })
1757
+ /* @__PURE__ */ jsx(
1758
+ Button,
1759
+ {
1760
+ color: "secondary",
1761
+ size: "md",
1762
+ className: "oui-scaledOrderConfirm-cancel-btn",
1763
+ onClick: onCancel,
1764
+ children: t("common.cancel")
1765
+ }
1766
+ ),
1767
+ /* @__PURE__ */ jsx(
1768
+ Button,
1769
+ {
1770
+ size: "md",
1771
+ className: "oui-scaledOrderConfirm-confirm-btn",
1772
+ onClick: onConfirm,
1773
+ children: t("common.confirm")
1774
+ }
1775
+ )
1609
1776
  ] })
1610
1777
  ] });
1611
1778
  };
@@ -1718,10 +1885,16 @@ var OrderTypeSelect = (props) => {
1718
1885
  options: options2,
1719
1886
  onValueChange: props.onChange,
1720
1887
  contentProps: {
1721
- className: "oui-bg-base-8"
1888
+ className: cn(
1889
+ "oui-orderEntry-orderTypeSelect-content",
1890
+ "oui-bg-base-8"
1891
+ )
1722
1892
  },
1723
1893
  classNames: {
1724
- trigger: "oui-bg-base-6 oui-border-line"
1894
+ trigger: cn(
1895
+ "oui-orderEntry-orderTypeSelect-btn",
1896
+ "oui-bg-base-6 oui-border-line"
1897
+ )
1725
1898
  },
1726
1899
  valueFormatter: (value, option) => {
1727
1900
  const item = options2.find((o) => o.value === value);
@@ -1762,6 +1935,7 @@ var LeverageBadge = (props) => {
1762
1935
  itemAlign: "center",
1763
1936
  gapX: 1,
1764
1937
  className: cn(
1938
+ "oui-orderEntry-leverage-btn",
1765
1939
  "oui-h-8",
1766
1940
  "oui-rounded oui-border oui-border-line oui-bg-base-6",
1767
1941
  "oui-cursor-pointer oui-select-none oui-text-xs oui-font-semibold oui-text-base-contrast-54"
@@ -1782,6 +1956,7 @@ function OrderEntryHeader(props) {
1782
1956
  "div",
1783
1957
  {
1784
1958
  className: cn(
1959
+ "oui-orderEntry-side",
1785
1960
  "oui-grid oui-w-full oui-flex-1 oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
1786
1961
  "oui-grid-cols-2"
1787
1962
  ),
@@ -1796,6 +1971,7 @@ function OrderEntryHeader(props) {
1796
1971
  fullWidth: true,
1797
1972
  "data-type": OrderSide.BUY,
1798
1973
  className: cn(
1974
+ "oui-orderEntry-side-buy-btn",
1799
1975
  side === OrderSide.BUY && canTrade ? "oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
1800
1976
  ),
1801
1977
  "data-testid": "oui-testid-orderEntry-side-buy-button",
@@ -1812,6 +1988,7 @@ function OrderEntryHeader(props) {
1812
1988
  fullWidth: true,
1813
1989
  size: "md",
1814
1990
  className: cn(
1991
+ "oui-orderEntry-side-sell-btn",
1815
1992
  side === OrderSide.SELL && props.canTrade ? "oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
1816
1993
  ),
1817
1994
  "data-testid": "oui-testid-orderEntry-side-sell-button",
@@ -1825,11 +2002,12 @@ function OrderEntryHeader(props) {
1825
2002
  "div",
1826
2003
  {
1827
2004
  className: cn(
2005
+ "oui-orderEntry-header-controls",
1828
2006
  "oui-grid oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
1829
2007
  "oui-grid-cols-2"
1830
2008
  ),
1831
2009
  children: [
1832
- /* @__PURE__ */ jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsx(
2010
+ /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-orderEntry-orderTypeSelect", children: /* @__PURE__ */ jsx(
1833
2011
  OrderTypeSelect,
1834
2012
  {
1835
2013
  type: order_type,
@@ -1840,7 +2018,7 @@ function OrderEntryHeader(props) {
1840
2018
  }
1841
2019
  }
1842
2020
  ) }),
1843
- /* @__PURE__ */ jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsx(
2021
+ /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-orderEntry-leverage", children: /* @__PURE__ */ jsx(
1844
2022
  LeverageBadge,
1845
2023
  {
1846
2024
  symbol: props.symbol,
@@ -1949,7 +2127,8 @@ var CustomInput = forwardRef(
1949
2127
  ],
1950
2128
  classNames: {
1951
2129
  root: cn(
1952
- "orderly-order-entry oui-relative oui-h-[54px] oui-rounded oui-border oui-border-solid oui-border-line oui-px-2 oui-py-1 group-first:oui-rounded-t-xl group-last:oui-rounded-b-xl",
2130
+ "oui-orderEntry-customInput orderly-order-entry oui-relative oui-h-[54px] oui-rounded oui-border oui-border-solid oui-border-line oui-px-2 oui-py-1 group-first:oui-rounded-t-xl group-last:oui-rounded-b-xl",
2131
+ props.error ? "oui-border-transparent" : "focus-within:oui-border-transparent",
1953
2132
  props.className,
1954
2133
  props.classNames?.root
1955
2134
  ),
@@ -1972,7 +2151,7 @@ var InputLabel = (props) => {
1972
2151
  {
1973
2152
  htmlFor: props.id,
1974
2153
  className: cn(
1975
- "oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
2154
+ "oui-input-label oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
1976
2155
  props.className
1977
2156
  ),
1978
2157
  children: props.children
@@ -2011,12 +2190,18 @@ var BBOOrderTypeSelect = (props) => {
2011
2190
  options: options2,
2012
2191
  onValueChange: props.onChange,
2013
2192
  contentProps: {
2014
- className: "oui-bg-base-8 oui-w-full",
2193
+ className: cn(
2194
+ "oui-orderEntry-bboOrderTypeSelect-content",
2195
+ "oui-bg-base-8 oui-w-full"
2196
+ ),
2015
2197
  style: props.contentStyle
2016
2198
  },
2017
2199
  size: "sm",
2018
2200
  classNames: {
2019
- trigger: "oui-border-none oui-bg-transparent"
2201
+ trigger: cn(
2202
+ "oui-orderEntry-bboOrderTypeSelect-btn",
2203
+ "oui-border-none oui-bg-transparent"
2204
+ )
2020
2205
  },
2021
2206
  valueFormatter: (value, option) => {
2022
2207
  const item = options2.find((item2) => item2.value === value);
@@ -2033,7 +2218,7 @@ var LimitPriceSuffix = (props) => {
2033
2218
  {
2034
2219
  direction: "column",
2035
2220
  itemAlign: "end",
2036
- className: cn("oui-order-entry-limit-price-input-suffix", "oui-text-2xs"),
2221
+ className: cn("oui-orderEntry-limitPrice-suffix", "oui-text-2xs"),
2037
2222
  children: [
2038
2223
  quote,
2039
2224
  /* @__PURE__ */ jsxs(Flex, { justify: "end", itemAlign: "center", gap: 2, children: [
@@ -2046,6 +2231,7 @@ var LimitPriceSuffix = (props) => {
2046
2231
  itemAlign: "center",
2047
2232
  r: "base",
2048
2233
  className: cn(
2234
+ "oui-orderEntry-bboToggle",
2049
2235
  "oui-mt-[2px] oui-cursor-pointer oui-select-none oui-border",
2050
2236
  bbo.bboStatus === "on" /* ON */ ? "oui-border-primary" : "oui-border-line-12",
2051
2237
  bbo.bboStatus === "disabled" /* DISABLED */ && "oui-cursor-not-allowed"
@@ -2065,6 +2251,7 @@ var LimitPriceSuffix = (props) => {
2065
2251
  Text,
2066
2252
  {
2067
2253
  className: cn(
2254
+ "oui-orderEntry-bboToggle-label",
2068
2255
  bbo.bboStatus === "on" /* ON */ && "oui-text-primary",
2069
2256
  bbo.bboStatus === "off" /* OFF */ && "oui-text-base-contrast-54",
2070
2257
  bbo.bboStatus === "disabled" /* DISABLED */ && "oui-text-base-contrast-20"
@@ -2078,6 +2265,7 @@ var LimitPriceSuffix = (props) => {
2078
2265
  Text,
2079
2266
  {
2080
2267
  className: cn(
2268
+ "oui-orderEntry-midPrice-btn",
2081
2269
  "oui-select-none",
2082
2270
  "oui-cursor-pointer oui-text-primary"
2083
2271
  ),
@@ -2116,7 +2304,7 @@ var PriceInput = (props) => {
2116
2304
  "div",
2117
2305
  {
2118
2306
  ref: priceInputContainerRef,
2119
- className: "oui-group oui-relative oui-w-full",
2307
+ className: "oui-orderEntry-priceInput-container oui-group oui-relative oui-w-full",
2120
2308
  children: [
2121
2309
  /* @__PURE__ */ jsx(
2122
2310
  CustomInput,
@@ -2126,6 +2314,7 @@ var PriceInput = (props) => {
2126
2314
  label: t("common.price"),
2127
2315
  suffix,
2128
2316
  value: props.order_price,
2317
+ className: "oui-orderEntry-priceInput",
2129
2318
  onChange: (e) => {
2130
2319
  setOrderValue("order_price", e);
2131
2320
  },
@@ -2141,16 +2330,25 @@ var PriceInput = (props) => {
2141
2330
  }
2142
2331
  }
2143
2332
  ),
2144
- bbo.bboStatus === "on" /* ON */ && /* @__PURE__ */ jsx("div", { className: cn("oui-absolute oui-bottom-1 oui-left-0"), children: /* @__PURE__ */ jsx(
2145
- BBOOrderTypeSelect,
2333
+ bbo.bboStatus === "on" /* ON */ && /* @__PURE__ */ jsx(
2334
+ "div",
2146
2335
  {
2147
- value: bbo.bboType,
2148
- onChange: bbo.onBBOChange,
2149
- contentStyle: {
2150
- width: props.priceInputContainerWidth
2151
- }
2336
+ className: cn(
2337
+ "oui-orderEntry-bboSelect",
2338
+ "oui-absolute oui-bottom-1 oui-left-0"
2339
+ ),
2340
+ children: /* @__PURE__ */ jsx(
2341
+ BBOOrderTypeSelect,
2342
+ {
2343
+ value: bbo.bboType,
2344
+ onChange: bbo.onBBOChange,
2345
+ contentStyle: {
2346
+ width: props.priceInputContainerWidth
2347
+ }
2348
+ }
2349
+ )
2152
2350
  }
2153
- ) })
2351
+ )
2154
2352
  ]
2155
2353
  }
2156
2354
  );
@@ -2174,7 +2372,7 @@ var QuantityInput = memo((props) => {
2174
2372
  formatters: [inputFormatter.dpFormatter(base_dp)],
2175
2373
  onFocus: onFocus(3 /* QUANTITY */),
2176
2374
  onBlur: onBlur(3 /* QUANTITY */),
2177
- className: "!oui-rounded-r",
2375
+ className: "oui-orderEntry-quantityInput !oui-rounded-r",
2178
2376
  classNames: {
2179
2377
  suffix: "oui-justify-end"
2180
2378
  }
@@ -2207,7 +2405,8 @@ var TotalTypeSelect = memo((props) => {
2207
2405
  },
2208
2406
  classNames: {
2209
2407
  trigger: cn(
2210
- "oui-w-auto oui-border-none oui-bg-transparent",
2408
+ "oui-orderEntry-totalTypeSelect-btn",
2409
+ "oui-w-auto oui-border-none oui-bg-transparent oui-shadow-none",
2211
2410
  "oui-absolute oui-left-0 oui-top-[5px] oui-text-2xs oui-text-base-contrast-36"
2212
2411
  )
2213
2412
  },
@@ -2266,7 +2465,7 @@ var TotalInput = memo((props) => {
2266
2465
  formatters: [inputFormatter.dpFormatter(2)],
2267
2466
  onFocus: onFocus(6 /* MARGIN */),
2268
2467
  onBlur: onBlur(6 /* MARGIN */),
2269
- className: "!oui-rounded-l",
2468
+ className: "oui-orderEntry-marginInput !oui-rounded-l",
2270
2469
  classNames: {
2271
2470
  suffix: "oui-justify-end"
2272
2471
  }
@@ -2286,7 +2485,7 @@ var TotalInput = memo((props) => {
2286
2485
  onChange: (val) => {
2287
2486
  setOrderValue("total", val);
2288
2487
  },
2289
- className: "!oui-rounded-l",
2488
+ className: "oui-orderEntry-totalInput !oui-rounded-l",
2290
2489
  classNames: {
2291
2490
  suffix: "oui-justify-end"
2292
2491
  },
@@ -2298,10 +2497,17 @@ var TotalInput = memo((props) => {
2298
2497
  });
2299
2498
  TotalInput.displayName = "TotalInput";
2300
2499
  var QtyAndTotalInput = memo((props) => {
2301
- return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
2302
- /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
2303
- /* @__PURE__ */ jsx(TotalInput, { total: props.total })
2304
- ] });
2500
+ return /* @__PURE__ */ jsxs(
2501
+ Grid,
2502
+ {
2503
+ cols: 2,
2504
+ className: "oui-orderEntry-qtyAndTotal oui-group oui-space-x-1",
2505
+ children: [
2506
+ /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
2507
+ /* @__PURE__ */ jsx(TotalInput, { total: props.total })
2508
+ ]
2509
+ }
2510
+ );
2305
2511
  });
2306
2512
  QtyAndTotalInput.displayName = "QtyAndTotalInput";
2307
2513
  var QuantityDistributionInput = memo((props) => {
@@ -2328,6 +2534,7 @@ var QuantityDistributionInput = memo((props) => {
2328
2534
  width: "100%",
2329
2535
  intensity: 600,
2330
2536
  className: cn(
2537
+ "oui-orderEntry-quantityDistribution",
2331
2538
  "oui-t-rounded oui-text-base-contrast-36",
2332
2539
  "oui-border oui-border-solid oui-border-line",
2333
2540
  props.className
@@ -2337,7 +2544,7 @@ var QuantityDistributionInput = memo((props) => {
2337
2544
  Text,
2338
2545
  {
2339
2546
  size: "2xs",
2340
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
2547
+ className: "oui-quantityDistribution-hint oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
2341
2548
  onClick: showHint,
2342
2549
  children: t("orderEntry.quantityDistribution")
2343
2550
  }
@@ -2462,32 +2669,44 @@ var QuantityDistribution = (props) => {
2462
2669
  [DistributionType.CUSTOM]: t("orderEntry.distributionType.custom")
2463
2670
  };
2464
2671
  }, [t]);
2465
- return /* @__PURE__ */ jsx(Flex, { className: cn("oui-gap-x-[6px] lg:oui-gap-x-2"), wrap: "wrap", children: Object.values(DistributionType).map((type) => {
2466
- return /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
2467
- /* @__PURE__ */ jsx(
2468
- Checkbox,
2469
- {
2470
- id: `distribution-type-${type}`,
2471
- color: "white",
2472
- variant: "radio",
2473
- checked: value === type,
2474
- onCheckedChange: onChange(type)
2475
- }
2672
+ return /* @__PURE__ */ jsx(
2673
+ Flex,
2674
+ {
2675
+ className: cn(
2676
+ "oui-orderEntry-quantityDistribution-options",
2677
+ "oui-gap-x-[6px] lg:oui-gap-x-2"
2476
2678
  ),
2477
- /* @__PURE__ */ jsx(
2478
- "label",
2479
- {
2480
- htmlFor: `distribution-type-${type}`,
2481
- className: cn(
2482
- "oui-text-2xs",
2483
- "oui-ml-1",
2484
- "oui-whitespace-nowrap oui-break-normal"
2679
+ wrap: "wrap",
2680
+ children: Object.values(DistributionType).map((type) => {
2681
+ return /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", children: [
2682
+ /* @__PURE__ */ jsx(
2683
+ Checkbox,
2684
+ {
2685
+ id: `distribution-type-${type}`,
2686
+ color: "white",
2687
+ variant: "radio",
2688
+ className: "oui-quantityDistribution-option-radio",
2689
+ checked: value === type,
2690
+ onCheckedChange: onChange(type)
2691
+ }
2485
2692
  ),
2486
- children: distributionTypeMap[type]
2487
- }
2488
- )
2489
- ] }, type);
2490
- }) });
2693
+ /* @__PURE__ */ jsx(
2694
+ "label",
2695
+ {
2696
+ htmlFor: `distribution-type-${type}`,
2697
+ className: cn(
2698
+ "oui-quantityDistribution-option-label",
2699
+ "oui-text-2xs",
2700
+ "oui-ml-1",
2701
+ "oui-whitespace-nowrap oui-break-normal"
2702
+ ),
2703
+ children: distributionTypeMap[type]
2704
+ }
2705
+ )
2706
+ ] }, type);
2707
+ })
2708
+ }
2709
+ );
2491
2710
  };
2492
2711
  var FlatQuantity = () => {
2493
2712
  return /* @__PURE__ */ jsxs(
@@ -2760,6 +2979,7 @@ var ScaledPriceInput = memo((props) => {
2760
2979
  label: t("orderEntry.startPrice"),
2761
2980
  suffix: quote,
2762
2981
  id: "order_start_price_input",
2982
+ className: "oui-orderEntry-scaledOrder-startPriceInput",
2763
2983
  value: props.start_price,
2764
2984
  error: getErrorMsg("start_price"),
2765
2985
  onChange: (e) => {
@@ -2779,6 +2999,7 @@ var ScaledPriceInput = memo((props) => {
2779
2999
  label: t("orderEntry.endPrice"),
2780
3000
  suffix: quote,
2781
3001
  id: "order_end_price_input",
3002
+ className: "oui-orderEntry-scaledOrder-endPriceInput",
2782
3003
  value: props.end_price,
2783
3004
  error: getErrorMsg("end_price"),
2784
3005
  onChange: (val) => {
@@ -2809,8 +3030,10 @@ var ScaledQuantityUnit = (props) => {
2809
3030
  tokens: options2,
2810
3031
  classNames: {
2811
3032
  trigger: cn(
3033
+ "oui-orderEntry-scaledQuantityUnit-btn",
2812
3034
  "oui-absolute oui-right-0 oui-top-1",
2813
- "oui-w-full oui-justify-end"
3035
+ "oui-w-full oui-justify-end",
3036
+ "oui-shadow-none"
2814
3037
  )
2815
3038
  },
2816
3039
  value: props.value,
@@ -2854,7 +3077,7 @@ var ScaledQuantityInput = memo((props) => {
2854
3077
  suffix,
2855
3078
  id: "order_quantity_input",
2856
3079
  name: "order_quantity_input",
2857
- className: "!oui-rounded-r",
3080
+ className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-r",
2858
3081
  value: props.order_quantity,
2859
3082
  error: getErrorMsg(
2860
3083
  "order_quantity",
@@ -2876,7 +3099,7 @@ var ScaledQuantityInput = memo((props) => {
2876
3099
  suffix,
2877
3100
  id: "order_total_input",
2878
3101
  name: "order_total_input",
2879
- className: "!oui-rounded-r",
3102
+ className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-r",
2880
3103
  value: props.total,
2881
3104
  error: getErrorMsg("order_quantity", `${errors?.total?.value} ${quote}`),
2882
3105
  onChange: (val) => {
@@ -2896,6 +3119,7 @@ var SkewInput = memo((props) => {
2896
3119
  {
2897
3120
  id: "order_skew_input",
2898
3121
  label: t("orderEntry.skew"),
3122
+ className: "oui-orderEntry-scaledOrder-skewInput",
2899
3123
  value: props.skew,
2900
3124
  error: getErrorMsg("skew"),
2901
3125
  onChange: (val) => {
@@ -2922,7 +3146,7 @@ var TotalOrdersInput = memo((props) => {
2922
3146
  label: t("orderEntry.totalOrders"),
2923
3147
  placeholder: "2-20",
2924
3148
  id: "order_total_orders_input",
2925
- className: "!oui-rounded-l",
3149
+ className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-l",
2926
3150
  value: props.total_orders,
2927
3151
  error: getErrorMsg("total_orders"),
2928
3152
  onChange: (val) => {
@@ -2941,7 +3165,7 @@ var TotalOrdersInput = memo((props) => {
2941
3165
  var ScaledOrderInput = (props) => {
2942
3166
  const { values } = props;
2943
3167
  const showSkewInput = values.distribution_type === DistributionType.CUSTOM;
2944
- return /* @__PURE__ */ jsxs("div", { className: "oui-space-y-1", children: [
3168
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-scaledOrderInput oui-space-y-1", children: [
2945
3169
  /* @__PURE__ */ jsx(
2946
3170
  ScaledPriceInput,
2947
3171
  {
@@ -2949,16 +3173,23 @@ var ScaledOrderInput = (props) => {
2949
3173
  end_price: values.end_price
2950
3174
  }
2951
3175
  ),
2952
- /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
2953
- /* @__PURE__ */ jsx(
2954
- ScaledQuantityInput,
2955
- {
2956
- order_quantity: values.order_quantity,
2957
- total: values.total
2958
- }
2959
- ),
2960
- /* @__PURE__ */ jsx(TotalOrdersInput, { total_orders: values.total_orders })
2961
- ] }),
3176
+ /* @__PURE__ */ jsxs(
3177
+ Grid,
3178
+ {
3179
+ cols: 2,
3180
+ className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-space-x-1",
3181
+ children: [
3182
+ /* @__PURE__ */ jsx(
3183
+ ScaledQuantityInput,
3184
+ {
3185
+ order_quantity: values.order_quantity,
3186
+ total: values.total
3187
+ }
3188
+ ),
3189
+ /* @__PURE__ */ jsx(TotalOrdersInput, { total_orders: values.total_orders })
3190
+ ]
3191
+ }
3192
+ ),
2962
3193
  /* @__PURE__ */ jsx(
2963
3194
  QuantityDistributionInput,
2964
3195
  {
@@ -2979,7 +3210,7 @@ var TriggerPriceInput = memo((props) => {
2979
3210
  setOrderValue,
2980
3211
  triggerPriceInputRef
2981
3212
  } = useOrderEntryContext();
2982
- return /* @__PURE__ */ jsx("div", { className: "oui-group", children: /* @__PURE__ */ jsx(
3213
+ return /* @__PURE__ */ jsx("div", { className: "oui-orderEntry-triggerPriceInput-container oui-group", children: /* @__PURE__ */ jsx(
2983
3214
  CustomInput,
2984
3215
  {
2985
3216
  ref: triggerPriceInputRef,
@@ -2988,6 +3219,7 @@ var TriggerPriceInput = memo((props) => {
2988
3219
  label: t("common.trigger"),
2989
3220
  suffix: symbolInfo.quote,
2990
3221
  value: props.trigger_price,
3222
+ className: "oui-orderEntry-triggerPriceInput",
2991
3223
  onChange: (e) => {
2992
3224
  setOrderValue("trigger_price", e);
2993
3225
  },
@@ -3009,7 +3241,7 @@ var ActivePriceInput = memo((props) => {
3009
3241
  setOrderValue,
3010
3242
  activatedPriceInputRef
3011
3243
  } = useOrderEntryContext();
3012
- return /* @__PURE__ */ jsx("div", { className: "oui-group", children: /* @__PURE__ */ jsx(
3244
+ return /* @__PURE__ */ jsx("div", { className: "oui-orderEntry-activatedPriceInput-container oui-group", children: /* @__PURE__ */ jsx(
3013
3245
  CustomInput,
3014
3246
  {
3015
3247
  ref: activatedPriceInputRef,
@@ -3020,6 +3252,7 @@ var ActivePriceInput = memo((props) => {
3020
3252
  suffix: symbolInfo.quote,
3021
3253
  error: getErrorMsg("activated_price"),
3022
3254
  value: props.activated_price,
3255
+ className: "oui-orderEntry-activatedPriceInput",
3023
3256
  onChange: (val) => {
3024
3257
  setOrderValue("activated_price", val);
3025
3258
  },
@@ -3081,6 +3314,7 @@ var TrailingCallbackSelect = memo(
3081
3314
  options: options2,
3082
3315
  classNames: {
3083
3316
  trigger: cn(
3317
+ "oui-orderEntry-trailingCallbackSelect-btn",
3084
3318
  "oui-absolute oui-right-0 oui-top-1",
3085
3319
  "oui-w-[124px] oui-justify-end",
3086
3320
  "oui-text-base-contrast-36"
@@ -3092,7 +3326,7 @@ var TrailingCallbackSelect = memo(
3092
3326
  align: "end",
3093
3327
  alignOffset: -1,
3094
3328
  sideOffset: -4,
3095
- className: "oui-border oui-border-line-6"
3329
+ className: "oui-orderEntry-trailingCallbackSelect-content oui-border oui-border-line-6"
3096
3330
  }
3097
3331
  }
3098
3332
  );
@@ -3153,7 +3387,7 @@ var TrailingCallbackInput = memo(
3153
3387
  // sideOffset={-25}
3154
3388
  // className="!oui-p-3"
3155
3389
  // >
3156
- /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
3390
+ /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-trailingCallback oui-relative", children: [
3157
3391
  /* @__PURE__ */ jsx(
3158
3392
  CustomInput,
3159
3393
  {
@@ -3163,6 +3397,7 @@ var TrailingCallbackInput = memo(
3163
3397
  suffix,
3164
3398
  error: getErrorMsg("callback_rate"),
3165
3399
  value: callback_rate,
3400
+ className: "oui-trailingCallback-rateInput",
3166
3401
  onChange: (val) => {
3167
3402
  setOrderValue("callback_rate", val);
3168
3403
  },
@@ -3183,7 +3418,7 @@ var TrailingCallbackInput = memo(
3183
3418
  /* @__PURE__ */ jsx(
3184
3419
  CallbackRatePercentages,
3185
3420
  {
3186
- className: "oui-absolute oui-bottom-1 oui-left-2",
3421
+ className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-left-2",
3187
3422
  callback_rate
3188
3423
  }
3189
3424
  )
@@ -3199,6 +3434,7 @@ var TrailingCallbackInput = memo(
3199
3434
  suffix,
3200
3435
  error: getErrorMsg("callback_value"),
3201
3436
  value: callback_value,
3437
+ className: "oui-trailingCallback-valueInput",
3202
3438
  onChange: (val) => {
3203
3439
  setOrderValue("callback_value", val);
3204
3440
  },
@@ -3216,7 +3452,7 @@ var TrailingCallbackInput = memo(
3216
3452
  TrailingCallbackInput.displayName = "TrailingCallbackInput";
3217
3453
  var TrailingStopInput = (props) => {
3218
3454
  const { values } = props;
3219
- return /* @__PURE__ */ jsxs("div", { className: "oui-space-y-1", children: [
3455
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-trailingStopInput oui-space-y-1", children: [
3220
3456
  /* @__PURE__ */ jsx(ActivePriceInput, { activated_price: values.activated_price }),
3221
3457
  /* @__PURE__ */ jsx(
3222
3458
  TrailingCallbackInput,
@@ -3256,7 +3492,7 @@ function OrderInput(props) {
3256
3492
  priceInputContainerWidth: props.priceInputContainerWidth
3257
3493
  }
3258
3494
  );
3259
- return /* @__PURE__ */ jsxs("div", { className: "oui-space-y-1", children: [
3495
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-orderInput-container oui-space-y-1", children: [
3260
3496
  triggerPriceInput,
3261
3497
  priceInput,
3262
3498
  /* @__PURE__ */ jsx(
@@ -3313,7 +3549,7 @@ var QuantitySlider = memo((props) => {
3313
3549
  setSliderValue(quantityToSlider());
3314
3550
  }
3315
3551
  }, [order_quantity, maxQty]);
3316
- return /* @__PURE__ */ jsxs("div", { children: [
3552
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-quantitySlider", children: [
3317
3553
  /* @__PURE__ */ jsx(
3318
3554
  Slider,
3319
3555
  {
@@ -3329,67 +3565,89 @@ var QuantitySlider = memo((props) => {
3329
3565
  max: SLIDER_MAX
3330
3566
  }
3331
3567
  ),
3332
- /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-pt-1 xl:oui-pt-2", children: [
3333
- /* @__PURE__ */ jsx(
3334
- Text.numeral,
3335
- {
3336
- size: "2xs",
3337
- color,
3338
- dp: 2,
3339
- padding: false,
3340
- suffix: "%",
3341
- children: canTrade ? sliderValue : 0
3342
- }
3343
- ),
3344
- /* @__PURE__ */ jsxs(Flex, { children: [
3345
- /* @__PURE__ */ jsx(
3346
- "button",
3347
- {
3348
- className: textVariants({
3568
+ /* @__PURE__ */ jsxs(
3569
+ Flex,
3570
+ {
3571
+ justify: "between",
3572
+ className: "oui-quantitySlider-footer oui-pt-1 xl:oui-pt-2",
3573
+ children: [
3574
+ /* @__PURE__ */ jsx(
3575
+ Text.numeral,
3576
+ {
3349
3577
  size: "2xs",
3350
- className: "oui-mr-1"
3351
- }),
3352
- onClick: onMax,
3353
- "data-testid": "oui-testid-orderEntry-maxQty-value-button",
3354
- children: maxLabel
3355
- }
3356
- ),
3357
- /* @__PURE__ */ jsx(
3358
- Text.numeral,
3359
- {
3360
- size: "2xs",
3361
- color,
3362
- dp: base_dp,
3363
- padding: false,
3364
- "data-testid": "oui-testid-orderEntry-maxQty-value",
3365
- children: canTrade ? maxQty : 0
3366
- }
3367
- )
3368
- ] })
3369
- ] })
3578
+ color,
3579
+ dp: 2,
3580
+ padding: false,
3581
+ suffix: "%",
3582
+ children: canTrade ? sliderValue : 0
3583
+ }
3584
+ ),
3585
+ /* @__PURE__ */ jsxs(Flex, { children: [
3586
+ /* @__PURE__ */ jsx(
3587
+ "button",
3588
+ {
3589
+ className: textVariants({
3590
+ size: "2xs",
3591
+ className: "oui-quantitySlider-maxQty-btn oui-mr-1"
3592
+ }),
3593
+ onClick: onMax,
3594
+ "data-testid": "oui-testid-orderEntry-maxQty-value-button",
3595
+ children: maxLabel
3596
+ }
3597
+ ),
3598
+ /* @__PURE__ */ jsx(
3599
+ Text.numeral,
3600
+ {
3601
+ size: "2xs",
3602
+ color,
3603
+ dp: base_dp,
3604
+ padding: false,
3605
+ className: "oui-quantitySlider-maxQty-value",
3606
+ "data-testid": "oui-testid-orderEntry-maxQty-value",
3607
+ children: canTrade ? maxQty : 0
3608
+ }
3609
+ )
3610
+ ] })
3611
+ ]
3612
+ }
3613
+ )
3370
3614
  ] });
3371
3615
  });
3372
3616
  QuantitySlider.displayName = "QuantitySlider";
3373
3617
  var ReduceOnlySwitch = ({
3374
3618
  checked,
3375
3619
  onCheckedChange,
3376
- className,
3377
- testId = "oui-testid-orderEntry-reduceOnly-switch"
3620
+ className
3378
3621
  }) => {
3379
3622
  const { t } = useTranslation();
3380
- return /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, className, children: [
3381
- /* @__PURE__ */ jsx(
3382
- Switch,
3383
- {
3384
- "data-testid": testId,
3385
- className: "oui-h-[14px]",
3386
- id: "reduceOnly",
3387
- checked,
3388
- onCheckedChange
3389
- }
3390
- ),
3391
- /* @__PURE__ */ jsx("label", { htmlFor: "reduceOnly", className: "oui-text-xs", children: t("orderEntry.reduceOnly") })
3392
- ] });
3623
+ return /* @__PURE__ */ jsxs(
3624
+ Flex,
3625
+ {
3626
+ itemAlign: "center",
3627
+ gapX: 1,
3628
+ className: cn("oui-orderEntry-reduceOnly", className),
3629
+ children: [
3630
+ /* @__PURE__ */ jsx(
3631
+ Switch,
3632
+ {
3633
+ "data-testid": "oui-testid-orderEntry-reduceOnly-switch",
3634
+ className: cn("oui-reduceOnly-switch", "oui-h-[14px]"),
3635
+ id: "reduceOnly",
3636
+ checked,
3637
+ onCheckedChange
3638
+ }
3639
+ ),
3640
+ /* @__PURE__ */ jsx(
3641
+ "label",
3642
+ {
3643
+ htmlFor: "reduceOnly",
3644
+ className: "oui-reduceOnly-label oui-text-xs",
3645
+ children: t("orderEntry.reduceOnly")
3646
+ }
3647
+ )
3648
+ ]
3649
+ }
3650
+ );
3393
3651
  };
3394
3652
  var PnlInputContext = createContext(
3395
3653
  {}
@@ -3578,14 +3836,18 @@ var PNLInput = (props) => {
3578
3836
  autoComplete: "off",
3579
3837
  onValueChange,
3580
3838
  formatters: [
3839
+ inputFormatter.numberFormatter,
3581
3840
  props.formatter({ dp: quote_dp, mode, type }),
3582
3841
  inputFormatter.currencyFormatter
3583
3842
  // inputFormatter.identifierFormatter(),
3584
3843
  ],
3585
3844
  classNames: {
3586
- root: type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss",
3845
+ root: cn(
3846
+ "oui-orderEntry-pnlInput-container",
3847
+ type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
3848
+ ),
3587
3849
  additional: "oui-text-base-contrast-54",
3588
- input: "oui-text-inherit"
3850
+ input: "oui-orderEntry-pnlInput oui-text-inherit"
3589
3851
  },
3590
3852
  onFocus: () => {
3591
3853
  setPrefix("");
@@ -3621,10 +3883,17 @@ var PNLMenus = (props) => {
3621
3883
  menu: props.modes,
3622
3884
  align: "end",
3623
3885
  size: "xs",
3624
- className: "oui-min-w-[80px]",
3886
+ className: "oui-pnlInput-menu oui-min-w-[80px]",
3625
3887
  onCloseAutoFocus: (event) => event.preventDefault(),
3626
3888
  onSelect: (item) => props.onModeChange(item),
3627
- children: /* @__PURE__ */ jsx("button", { className: "oui-p-2", "data-testid": props.testId, children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, color: "white" }) })
3889
+ children: /* @__PURE__ */ jsx(
3890
+ "button",
3891
+ {
3892
+ className: "oui-pnlInput-menuTrigger-btn oui-p-2",
3893
+ "data-testid": props.testId,
3894
+ children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, color: "white" })
3895
+ }
3896
+ )
3628
3897
  }
3629
3898
  );
3630
3899
  };
@@ -3687,47 +3956,56 @@ var OrderTPSL = (props) => {
3687
3956
  return null;
3688
3957
  }
3689
3958
  const isSlPriceWarning = props.errors?.["sl_trigger_price"]?.["type"] === ERROR_MSG_CODES.SL_PRICE_WARNING;
3690
- return /* @__PURE__ */ jsxs("div", { children: [
3691
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", children: [
3692
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
3693
- /* @__PURE__ */ jsx(
3694
- Switch,
3695
- {
3696
- id: "order_entry_tpsl",
3697
- className: "oui-h-[14px]",
3698
- checked: props.switchState,
3699
- disabled: props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET,
3700
- onCheckedChange: (checked) => {
3701
- props.onSwitchChanged(checked);
3702
- }
3703
- }
3704
- ),
3705
- /* @__PURE__ */ jsx("label", { htmlFor: "order_entry_tpsl", className: "oui-text-xs", children: t("common.tpsl") })
3706
- ] }),
3707
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 2, children: [
3708
- isMobile && props.onReduceOnlyChange && /* @__PURE__ */ jsx(
3709
- ReduceOnlySwitch,
3710
- {
3711
- checked: props.reduceOnlyChecked ?? false,
3712
- onCheckedChange: props.onReduceOnlyChange
3713
- }
3714
- ),
3715
- !isMobile && /* @__PURE__ */ jsx(
3716
- TPSLAdvancedButton,
3717
- {
3718
- className: cn(
3719
- "oui-group oui-invisible",
3720
- props.switchState && "oui-visible"
3959
+ return /* @__PURE__ */ jsxs("div", { className: "oui-orderEntry-tpsl", children: [
3960
+ /* @__PURE__ */ jsxs(
3961
+ Flex,
3962
+ {
3963
+ itemAlign: "center",
3964
+ justify: "between",
3965
+ className: "oui-orderEntry-tpsl-header",
3966
+ children: [
3967
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
3968
+ /* @__PURE__ */ jsx(
3969
+ Switch,
3970
+ {
3971
+ id: "order_entry_tpsl",
3972
+ className: "oui-h-[14px]",
3973
+ checked: props.switchState,
3974
+ disabled: props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET,
3975
+ onCheckedChange: (checked) => {
3976
+ props.onSwitchChanged(checked);
3977
+ }
3978
+ }
3721
3979
  ),
3722
- showTPSLAdvanced: props.showTPSLAdvanced
3723
- }
3724
- )
3725
- ] })
3726
- ] }),
3980
+ /* @__PURE__ */ jsx("label", { htmlFor: "order_entry_tpsl", className: "oui-text-xs", children: t("common.tpsl") })
3981
+ ] }),
3982
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 2, children: [
3983
+ isMobile && props.onReduceOnlyChange && /* @__PURE__ */ jsx(
3984
+ ReduceOnlySwitch,
3985
+ {
3986
+ checked: props.reduceOnlyChecked ?? false,
3987
+ onCheckedChange: props.onReduceOnlyChange
3988
+ }
3989
+ ),
3990
+ !isMobile && /* @__PURE__ */ jsx(
3991
+ TPSLAdvancedButton,
3992
+ {
3993
+ className: cn(
3994
+ "oui-group oui-invisible",
3995
+ props.switchState && "oui-visible"
3996
+ ),
3997
+ showTPSLAdvanced: props.showTPSLAdvanced
3998
+ }
3999
+ )
4000
+ ] })
4001
+ ]
4002
+ }
4003
+ ),
3727
4004
  /* @__PURE__ */ jsx(
3728
4005
  "div",
3729
4006
  {
3730
4007
  className: cn(
4008
+ "oui-orderEntry-tpsl-body",
3731
4009
  "oui-max-h-0 oui-overflow-hidden oui-transition-all",
3732
4010
  props.switchState && "oui-max-h-[120px]"
3733
4011
  ),
@@ -3774,7 +4052,7 @@ var TPSLInputForm = React2.forwardRef((props, ref) => {
3774
4052
  "div",
3775
4053
  {
3776
4054
  ref,
3777
- className: "oui-space-y-1 oui-px-px oui-py-2 oui-transition-all",
4055
+ className: "oui-orderEntry-tpsl-form oui-space-y-1 oui-px-px oui-py-2 oui-transition-all",
3778
4056
  children: [
3779
4057
  /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", gapX: 2, children: [
3780
4058
  /* @__PURE__ */ jsx(
@@ -3839,7 +4117,11 @@ var TPSLAdvancedButton = (props) => {
3839
4117
  itemAlign: "center",
3840
4118
  gapX: 1,
3841
4119
  onClick: props.showTPSLAdvanced,
3842
- className: cn("oui-group oui-cursor-pointer", props.className),
4120
+ className: cn(
4121
+ "oui-orderEntry-tpsl-advanced-btn",
4122
+ "oui-group oui-cursor-pointer",
4123
+ props.className
4124
+ ),
3843
4125
  children: [
3844
4126
  /* @__PURE__ */ jsx(
3845
4127
  Text,
@@ -3855,7 +4137,7 @@ var TPSLAdvancedButton = (props) => {
3855
4137
  SettingFillIcon,
3856
4138
  {
3857
4139
  size: 12,
3858
- className: "oui-text-base-contrast-54 group-hover:oui-text-base-contrast oui-cursor-pointer",
4140
+ className: "oui-advanced-icon oui-text-base-contrast-54 group-hover:oui-text-base-contrast oui-cursor-pointer",
3859
4141
  opacity: 1,
3860
4142
  onClick: props.showTPSLAdvanced
3861
4143
  }
@@ -3944,7 +4226,11 @@ var TPSLTriggerPriceInput = (props) => {
3944
4226
  value: innerValue,
3945
4227
  classNames: {
3946
4228
  additional: "oui-text-base-contrast-54",
3947
- root: cn("oui-pr-2 md:oui-pr-3", props.classNames?.root),
4229
+ root: cn(
4230
+ "oui-orderEntry-tpsl-triggerPrice",
4231
+ "oui-pr-2 md:oui-pr-3",
4232
+ props.classNames?.root
4233
+ ),
3948
4234
  prefix: cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
3949
4235
  input: cn(
3950
4236
  "oui-text-2xs placeholder:oui-text-2xs",
@@ -4224,7 +4510,7 @@ var OrderEntry = (props) => {
4224
4510
  setHasAdvancedTPSLResult(false);
4225
4511
  }, [props.symbol]);
4226
4512
  const showReduceOnlySection = isMobile && formattedOrder.order_type !== OrderType.LIMIT && formattedOrder.order_type !== OrderType.MARKET || !isMobile;
4227
- const showSoundSection = Boolean(notification?.orderFilled?.media) && (notification?.orderFilled?.displayInOrderEntry ?? true);
4513
+ const showSoundSection = (Boolean(notification?.orderFilled?.media) || Boolean(notification?.orderFilled?.soundOptions?.length)) && (notification?.orderFilled?.displayInOrderEntry ?? true);
4228
4514
  const additionalInfoProps = {
4229
4515
  pinned,
4230
4516
  setPinned,
@@ -4269,7 +4555,10 @@ var OrderEntry = (props) => {
4269
4555
  /* @__PURE__ */ jsxs(
4270
4556
  "div",
4271
4557
  {
4272
- className: "oui-space-y-2 oui-text-base-contrast-54 xl:oui-space-y-3",
4558
+ className: cn(
4559
+ "oui-orderEntry",
4560
+ "oui-space-y-2 oui-text-base-contrast-54 xl:oui-space-y-3"
4561
+ ),
4273
4562
  ref: props.containerRef,
4274
4563
  children: [
4275
4564
  /* @__PURE__ */ jsx(
@@ -4322,6 +4611,7 @@ var OrderEntry = (props) => {
4322
4611
  id: "order-entry-submit-button",
4323
4612
  "data-type": OrderSide.BUY,
4324
4613
  className: cn(
4614
+ "oui-orderEntry-submit-btn",
4325
4615
  side === OrderSide.BUY ? "orderly-order-entry-submit-button-buy oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "orderly-order-entry-submit-button-sell oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80"
4326
4616
  ),
4327
4617
  onClick: validateSubmit,
@@ -4399,47 +4689,83 @@ var OrderEntry = (props) => {
4399
4689
  }
4400
4690
  }
4401
4691
  ),
4402
- showReduceOnlySection && /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
4403
- /* @__PURE__ */ jsx(
4404
- ReduceOnlySwitch,
4405
- {
4406
- checked: formattedOrder.reduce_only ?? false,
4407
- onCheckedChange: (checked) => {
4408
- setOrderValue("reduce_only", checked);
4409
- }
4410
- }
4411
- ),
4412
- !showSoundSection && extraButton
4413
- ] }),
4414
- showSoundSection && /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", children: [
4415
- /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
4416
- /* @__PURE__ */ jsx(
4417
- Switch,
4418
- {
4419
- className: "oui-h-[14px]",
4420
- id: soundAlertId,
4421
- checked: soundAlert,
4422
- onCheckedChange: (checked) => setSoundAlert(checked)
4423
- }
4424
- ),
4425
- /* @__PURE__ */ jsx("label", { htmlFor: soundAlertId, className: "oui-text-xs", children: t("portfolio.setting.soundAlerts") })
4426
- ] }),
4427
- extraButton
4428
- ] }),
4692
+ showReduceOnlySection && /* @__PURE__ */ jsxs(
4693
+ Flex,
4694
+ {
4695
+ justify: "between",
4696
+ itemAlign: "center",
4697
+ className: cn("oui-reduceOnly-container", "oui-mt-2"),
4698
+ children: [
4699
+ /* @__PURE__ */ jsx(
4700
+ ReduceOnlySwitch,
4701
+ {
4702
+ checked: formattedOrder.reduce_only ?? false,
4703
+ onCheckedChange: (checked) => {
4704
+ setOrderValue("reduce_only", checked);
4705
+ }
4706
+ }
4707
+ ),
4708
+ !showSoundSection && extraButton
4709
+ ]
4710
+ }
4711
+ ),
4712
+ showSoundSection && /* @__PURE__ */ jsxs(
4713
+ Flex,
4714
+ {
4715
+ justify: "between",
4716
+ itemAlign: "center",
4717
+ className: "oui-soundAlert-container",
4718
+ children: [
4719
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
4720
+ /* @__PURE__ */ jsx(
4721
+ Switch,
4722
+ {
4723
+ className: cn("oui-soundAlert-switch", "oui-h-[14px]"),
4724
+ id: soundAlertId,
4725
+ checked: soundAlert,
4726
+ onCheckedChange: (checked) => setSoundAlert(checked)
4727
+ }
4728
+ ),
4729
+ /* @__PURE__ */ jsx(
4730
+ "label",
4731
+ {
4732
+ htmlFor: soundAlertId,
4733
+ className: cn("oui-soundAlert-label", "oui-text-xs"),
4734
+ children: t("portfolio.setting.soundAlerts")
4735
+ }
4736
+ )
4737
+ ] }),
4738
+ extraButton
4739
+ ]
4740
+ }
4741
+ ),
4429
4742
  !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 }),
4430
- pinned && /* @__PURE__ */ jsxs(Box, { p: 2, r: "md", intensity: 700, position: "relative", children: [
4431
- /* @__PURE__ */ jsx(AdditionalInfo, { ...additionalInfoProps }),
4432
- /* @__PURE__ */ jsx(
4433
- PinButton,
4434
- {
4435
- onClick: () => {
4436
- setPinned(false);
4437
- },
4438
- className: "oui-group oui-absolute oui-right-2 oui-top-2",
4439
- "data-testid": "oui-testid-orderEntry-pinned-button"
4440
- }
4441
- )
4442
- ] })
4743
+ pinned && /* @__PURE__ */ jsxs(
4744
+ Box,
4745
+ {
4746
+ p: 2,
4747
+ r: "md",
4748
+ intensity: 700,
4749
+ position: "relative",
4750
+ className: "oui-additional-container",
4751
+ children: [
4752
+ /* @__PURE__ */ jsx(AdditionalInfo, { ...additionalInfoProps }),
4753
+ /* @__PURE__ */ jsx(
4754
+ PinButton,
4755
+ {
4756
+ onClick: () => {
4757
+ setPinned(false);
4758
+ },
4759
+ className: cn(
4760
+ "oui-additional-pin-btn",
4761
+ "oui-group oui-absolute oui-right-2 oui-top-2"
4762
+ ),
4763
+ "data-testid": "oui-testid-orderEntry-pinned-button"
4764
+ }
4765
+ )
4766
+ ]
4767
+ }
4768
+ )
4443
4769
  ]
4444
4770
  }
4445
4771
  ),
@@ -4449,9 +4775,13 @@ var OrderEntry = (props) => {
4449
4775
  open: showTPSLAdvanced,
4450
4776
  onOpenChange: setShowTPSLAdvanced,
4451
4777
  classNames: {
4452
- body: "oui-h-full oui-pb-0 oui-border-none",
4453
- overlay: "!oui-bg-base-10/60",
4778
+ body: cn(
4779
+ "oui-tpslAdvanced-body",
4780
+ "oui-h-full oui-pb-0 oui-border-none"
4781
+ ),
4782
+ overlay: cn("oui-tpslAdvanced-overlay", "!oui-bg-base-10/60"),
4454
4783
  content: cn(
4784
+ "oui-tpslAdvanced-sheet",
4455
4785
  "oui-rounded-[16px] oui-border-none !oui-p-0",
4456
4786
  isMobile ? "oui-inset-y-0 oui-right-0 oui-w-[280px]" : "!oui-bottom-[40px] oui-right-3 oui-top-[44px] !oui-h-auto oui-w-[360px]"
4457
4787
  )
@@ -4612,6 +4942,8 @@ function usePriceInputContainer({
4612
4942
 
4613
4943
  // src/orderEntry.script.ts
4614
4944
  var ORDERLY_ORDER_SOUND_ALERT_KEY = "orderly_order_sound_alert";
4945
+ var ORDERLY_ORDER_SOUND_OPTION_KEY = "orderly_order_sound_option";
4946
+ var ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS = 3 * 1e3;
4615
4947
  var useOrderEntryScript = (inputs) => {
4616
4948
  const { symbol } = inputs;
4617
4949
  const [localOrderType, setLocalOrderType] = useLocalStorage(
@@ -4623,9 +4955,15 @@ var useOrderEntryScript = (inputs) => {
4623
4955
  OrderSide.BUY
4624
4956
  );
4625
4957
  const { notification } = useOrderlyContext();
4958
+ const orderFilledConfig = notification?.orderFilled;
4959
+ const defaultSoundValue = orderFilledConfig?.defaultSoundValue ?? orderFilledConfig?.soundOptions?.[0]?.value;
4626
4960
  const [soundAlert, setSoundAlert] = useLocalStorage(
4627
4961
  ORDERLY_ORDER_SOUND_ALERT_KEY,
4628
- notification?.orderFilled?.defaultOpen ?? false
4962
+ orderFilledConfig?.defaultOpen ?? false
4963
+ );
4964
+ const [initialSoundValue] = useLocalStorage(
4965
+ ORDERLY_ORDER_SOUND_OPTION_KEY,
4966
+ defaultSoundValue ?? null
4629
4967
  );
4630
4968
  const canTrade = useCanTrade();
4631
4969
  const {
@@ -4651,6 +4989,7 @@ var useOrderEntryScript = (inputs) => {
4651
4989
  const triggerPriceInputRef = useRef(null);
4652
4990
  const priceInputRef = useRef(null);
4653
4991
  const activatedPriceInputRef = useRef(null);
4992
+ const lastUserActiveTimeRef = useRef(Date.now());
4654
4993
  const { bboStatus, bboType, setBBOType, onBBOChange, toggleBBO } = useBBOState({
4655
4994
  tpslSwitch,
4656
4995
  order_type: formattedOrder.order_type,
@@ -4847,6 +5186,23 @@ var useOrderEntryScript = (inputs) => {
4847
5186
  setOrderValue("reduce_only", false);
4848
5187
  }
4849
5188
  }, [tpslSwitch]);
5189
+ useEffect(() => {
5190
+ lastUserActiveTimeRef.current = Date.now();
5191
+ }, [
5192
+ formattedOrder.order_price,
5193
+ formattedOrder.order_quantity,
5194
+ formattedOrder.side
5195
+ ]);
5196
+ useEffect(() => {
5197
+ const lastActive = lastUserActiveTimeRef.current;
5198
+ const now = Date.now();
5199
+ const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
5200
+ ee.emit(ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, {
5201
+ symbol,
5202
+ estLiqPrice: state.estLiqPrice ?? null,
5203
+ isUserActive
5204
+ });
5205
+ }, [ee, symbol, state.estLiqPrice]);
4850
5206
  return {
4851
5207
  ...state,
4852
5208
  slPriceError: slPriceError ?? void 0,