@orderly.network/ui-order-entry 2.10.1-alpha.0 → 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.js CHANGED
@@ -33,196 +33,211 @@ var AdditionalInfo = (props) => {
33
33
  React2.useEffect(() => {
34
34
  props.onValueChange?.("visible_quantity", props.hidden ? 0 : 1);
35
35
  }, [props.hidden]);
36
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-base-contrast-54", children: [
37
- /* @__PURE__ */ jsxRuntime.jsxs(
38
- ui.Flex,
39
- {
40
- justify: pinned ? "start" : "between",
41
- mb: 3,
42
- width: pinned ? "unset" : "100%",
43
- className: "oui-gap-x-2 md:oui-gap-x-3",
44
- wrap: "wrap",
45
- gapY: 1,
46
- children: [
47
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
36
+ return /* @__PURE__ */ jsxRuntime.jsxs(
37
+ "div",
38
+ {
39
+ className: ui.cn(
40
+ "oui-orderEntry-additionalInfo",
41
+ "oui-text-base-contrast-54"
42
+ ),
43
+ children: [
44
+ /* @__PURE__ */ jsxRuntime.jsxs(
45
+ ui.Flex,
46
+ {
47
+ justify: pinned ? "start" : "between",
48
+ mb: 3,
49
+ width: pinned ? "unset" : "100%",
50
+ className: "oui-gap-x-2 md:oui-gap-x-3",
51
+ wrap: "wrap",
52
+ gapY: 1,
53
+ children: [
54
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
55
+ /* @__PURE__ */ jsxRuntime.jsx(
56
+ ui.Checkbox,
57
+ {
58
+ "data-testid": "oui-testid-orderEntry-postOnly-checkBox",
59
+ id: "toggle_order_post_only",
60
+ className: "oui-postOnly-checkbox oui-peer",
61
+ color: "white",
62
+ variant: "radio",
63
+ disabled: !props.showExtra,
64
+ checked: orderTypeExtra === types.OrderType.POST_ONLY,
65
+ onCheckedChange: onTypeToggle(types.OrderType.POST_ONLY)
66
+ }
67
+ ),
68
+ /* @__PURE__ */ jsxRuntime.jsx(
69
+ ui.Tooltip,
70
+ {
71
+ content: t("orderEntry.orderType.postOnly.tooltip"),
72
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
73
+ children: /* @__PURE__ */ jsxRuntime.jsx(
74
+ "label",
75
+ {
76
+ htmlFor: "toggle_order_post_only",
77
+ className: ui.cn(
78
+ "oui-postOnly-label",
79
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
80
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
81
+ ),
82
+ children: t("orderEntry.orderType.postOnly")
83
+ }
84
+ )
85
+ }
86
+ )
87
+ ] }),
88
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
89
+ /* @__PURE__ */ jsxRuntime.jsx(
90
+ ui.Checkbox,
91
+ {
92
+ "data-testid": "oui-testid-orderEntry-ioc-checkBox",
93
+ id: "toggle_order_iov",
94
+ color: "white",
95
+ className: ui.cn("oui-ioc-checkbox", "oui-peer"),
96
+ variant: "radio",
97
+ checked: orderTypeExtra === types.OrderType.IOC,
98
+ onCheckedChange: onTypeToggle(types.OrderType.IOC),
99
+ disabled: !props.showExtra
100
+ }
101
+ ),
102
+ /* @__PURE__ */ jsxRuntime.jsx(
103
+ ui.Tooltip,
104
+ {
105
+ content: t("orderEntry.orderType.ioc.tooltip"),
106
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
107
+ children: /* @__PURE__ */ jsxRuntime.jsx(
108
+ "label",
109
+ {
110
+ htmlFor: "toggle_order_iov",
111
+ className: ui.cn(
112
+ "oui-ioc-label",
113
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
114
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
115
+ ),
116
+ children: t("orderEntry.orderType.ioc")
117
+ }
118
+ )
119
+ }
120
+ )
121
+ ] }),
122
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
123
+ /* @__PURE__ */ jsxRuntime.jsx(
124
+ ui.Checkbox,
125
+ {
126
+ "data-testid": "oui-testid-orderEntry-fox-checkBox",
127
+ id: "toggle_order_fok",
128
+ color: "white",
129
+ variant: "radio",
130
+ className: ui.cn("oui-fok-checkbox", "oui-peer"),
131
+ checked: orderTypeExtra === types.OrderType.FOK,
132
+ onCheckedChange: onTypeToggle(types.OrderType.FOK),
133
+ disabled: !props.showExtra
134
+ }
135
+ ),
136
+ /* @__PURE__ */ jsxRuntime.jsx(
137
+ ui.Tooltip,
138
+ {
139
+ content: t("orderEntry.orderType.fok.tooltip"),
140
+ className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
141
+ children: /* @__PURE__ */ jsxRuntime.jsx(
142
+ "label",
143
+ {
144
+ htmlFor: "toggle_order_fok",
145
+ className: ui.cn(
146
+ "oui-fok-label",
147
+ "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
148
+ "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
149
+ ),
150
+ children: t("orderEntry.orderType.fok")
151
+ }
152
+ )
153
+ }
154
+ )
155
+ ] })
156
+ ]
157
+ }
158
+ ),
159
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 6, children: [
160
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
48
161
  /* @__PURE__ */ jsxRuntime.jsx(
49
162
  ui.Checkbox,
50
163
  {
51
- "data-testid": "oui-testid-orderEntry-postOnly-checkBox",
52
- id: "toggle_order_post_only",
53
- className: "oui-peer",
164
+ "data-testid": "oui-testid-orderEntry-orderConfirm-checkBox",
165
+ id: "toggle_order_confirm",
54
166
  color: "white",
55
- variant: "radio",
56
- disabled: !props.showExtra,
57
- checked: orderTypeExtra === types.OrderType.POST_ONLY,
58
- onCheckedChange: onTypeToggle(types.OrderType.POST_ONLY)
167
+ className: "oui-orderConfirm-checkbox",
168
+ checked: props.needConfirm,
169
+ onCheckedChange: (checked) => {
170
+ props.setNeedConfirm(!!checked);
171
+ }
59
172
  }
60
173
  ),
61
174
  /* @__PURE__ */ jsxRuntime.jsx(
62
- ui.Tooltip,
175
+ "label",
63
176
  {
64
- content: t("orderEntry.orderType.postOnly.tooltip"),
65
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
66
- children: /* @__PURE__ */ jsxRuntime.jsx(
67
- "label",
68
- {
69
- htmlFor: "toggle_order_post_only",
70
- className: ui.cn(
71
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
72
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
73
- ),
74
- children: t("orderEntry.orderType.postOnly")
75
- }
76
- )
177
+ htmlFor: "toggle_order_confirm",
178
+ className: "oui-orderConfirm-label oui-ml-1 oui-text-2xs",
179
+ children: t("orderEntry.orderConfirm")
77
180
  }
78
181
  )
79
182
  ] }),
80
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
183
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
81
184
  /* @__PURE__ */ jsxRuntime.jsx(
82
185
  ui.Checkbox,
83
186
  {
84
- "data-testid": "oui-testid-orderEntry-ioc-checkBox",
85
- id: "toggle_order_iov",
187
+ "data-testid": "oui-testid-orderEntry-hidden-checkBox",
188
+ id: "toggle_order_hidden",
86
189
  color: "white",
87
- className: "oui-peer",
88
- variant: "radio",
89
- checked: orderTypeExtra === types.OrderType.IOC,
90
- onCheckedChange: onTypeToggle(types.OrderType.IOC),
91
- disabled: !props.showExtra
190
+ className: "oui-orderHidden-checkbox",
191
+ checked: props.hidden,
192
+ onCheckedChange: (checked) => {
193
+ props.setHidden(checked);
194
+ }
92
195
  }
93
196
  ),
94
197
  /* @__PURE__ */ jsxRuntime.jsx(
95
198
  ui.Tooltip,
96
199
  {
97
- content: t("orderEntry.orderType.ioc.tooltip"),
200
+ content: t("orderEntry.hidden.tooltip"),
98
201
  className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
99
202
  children: /* @__PURE__ */ jsxRuntime.jsx(
100
203
  "label",
101
204
  {
102
- htmlFor: "toggle_order_iov",
103
- className: ui.cn(
104
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
105
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
106
- ),
107
- children: t("orderEntry.orderType.ioc")
205
+ htmlFor: "toggle_order_hidden",
206
+ className: "oui-orderHidden-label oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
207
+ children: t("orderEntry.hidden")
108
208
  }
109
209
  )
110
210
  }
111
211
  )
112
- ] }),
113
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
212
+ ] })
213
+ ] }),
214
+ !pinned && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
215
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
216
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
114
217
  /* @__PURE__ */ jsxRuntime.jsx(
115
- ui.Checkbox,
218
+ ui.Switch,
116
219
  {
117
- "data-testid": "oui-testid-orderEntry-fox-checkBox",
118
- id: "toggle_order_fok",
119
- color: "white",
120
- variant: "radio",
121
- className: "oui-peer",
122
- checked: orderTypeExtra === types.OrderType.FOK,
123
- onCheckedChange: onTypeToggle(types.OrderType.FOK),
124
- disabled: !props.showExtra
220
+ "data-testid": "oui-testid-orderEntry-additional-keepVisible-switch",
221
+ id: "toggle_order_keep_visible",
222
+ className: "oui-keepVisible-switch",
223
+ onCheckedChange: (checked) => {
224
+ props.setPinned(checked);
225
+ }
125
226
  }
126
227
  ),
127
228
  /* @__PURE__ */ jsxRuntime.jsx(
128
- ui.Tooltip,
129
- {
130
- content: t("orderEntry.orderType.fok.tooltip"),
131
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
132
- children: /* @__PURE__ */ jsxRuntime.jsx(
133
- "label",
134
- {
135
- htmlFor: "toggle_order_fok",
136
- className: ui.cn(
137
- "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
138
- "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
139
- ),
140
- children: t("orderEntry.orderType.fok")
141
- }
142
- )
143
- }
144
- )
145
- ] })
146
- ]
147
- }
148
- ),
149
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 6, children: [
150
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
151
- /* @__PURE__ */ jsxRuntime.jsx(
152
- ui.Checkbox,
153
- {
154
- "data-testid": "oui-testid-orderEntry-orderConfirm-checkBox",
155
- id: "toggle_order_confirm",
156
- color: "white",
157
- checked: props.needConfirm,
158
- onCheckedChange: (checked) => {
159
- props.setNeedConfirm(!!checked);
160
- }
161
- }
162
- ),
163
- /* @__PURE__ */ jsxRuntime.jsx(
164
- "label",
165
- {
166
- htmlFor: "toggle_order_confirm",
167
- className: "oui-ml-1 oui-text-2xs",
168
- children: t("orderEntry.orderConfirm")
169
- }
170
- )
171
- ] }),
172
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
173
- /* @__PURE__ */ jsxRuntime.jsx(
174
- ui.Checkbox,
175
- {
176
- "data-testid": "oui-testid-orderEntry-hidden-checkBox",
177
- id: "toggle_order_hidden",
178
- color: "white",
179
- checked: props.hidden,
180
- onCheckedChange: (checked) => {
181
- props.setHidden(checked);
182
- }
183
- }
184
- ),
185
- /* @__PURE__ */ jsxRuntime.jsx(
186
- ui.Tooltip,
187
- {
188
- content: t("orderEntry.hidden.tooltip"),
189
- className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
190
- children: /* @__PURE__ */ jsxRuntime.jsx(
191
229
  "label",
192
230
  {
193
- htmlFor: "toggle_order_hidden",
194
- className: "oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
195
- children: t("orderEntry.hidden")
231
+ htmlFor: "toggle_order_keep_visible",
232
+ className: "oui-keepVisible-label oui-ml-1 oui-text-2xs",
233
+ children: t("orderEntry.keepVisible")
196
234
  }
197
235
  )
198
- }
199
- )
200
- ] })
201
- ] }),
202
- !pinned && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
203
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
204
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
205
- /* @__PURE__ */ jsxRuntime.jsx(
206
- ui.Switch,
207
- {
208
- "data-testid": "oui-testid-orderEntry-additional-keepVisible-switch",
209
- id: "toggle_order_keep_visible",
210
- onCheckedChange: (checked) => {
211
- props.setPinned(checked);
212
- }
213
- }
214
- ),
215
- /* @__PURE__ */ jsxRuntime.jsx(
216
- "label",
217
- {
218
- htmlFor: "toggle_order_keep_visible",
219
- className: "oui-ml-1 oui-text-2xs",
220
- children: t("orderEntry.keepVisible")
221
- }
222
- )
223
- ] })
224
- ] })
225
- ] });
236
+ ] })
237
+ ] })
238
+ ]
239
+ }
240
+ );
226
241
  };
227
242
  function AdditionalConfigButton(props) {
228
243
  const [open2, setOpen] = React2.useState(false);
@@ -231,6 +246,7 @@ function AdditionalConfigButton(props) {
231
246
  "button",
232
247
  {
233
248
  "data-testid": "oui-testid-orderEntry-additional-button",
249
+ className: "oui-orderEntry-additionalConfig-btn",
234
250
  onClick: () => {
235
251
  setOpen(true);
236
252
  },
@@ -242,7 +258,7 @@ function AdditionalConfigButton(props) {
242
258
  viewBox: "0 0 16 16",
243
259
  fill: "currentColor",
244
260
  xmlns: "http://www.w3.org/2000/svg",
245
- className: "oui-fill-white/[.36] hover:oui-fill-white/80",
261
+ className: "oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
246
262
  children: /* @__PURE__ */ jsxRuntime.jsx(
247
263
  "path",
248
264
  {
@@ -253,33 +269,48 @@ function AdditionalConfigButton(props) {
253
269
  )
254
270
  }
255
271
  ) }),
256
- /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverContent, { side: "top", align: "end", className: "oui-w-[230px]", children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...props }) })
272
+ /* @__PURE__ */ jsxRuntime.jsx(
273
+ ui.PopoverContent,
274
+ {
275
+ side: "top",
276
+ align: "end",
277
+ className: "oui-orderEntry-additionalInfo-popover-content oui-w-[230px]",
278
+ children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...props })
279
+ }
280
+ )
257
281
  ] });
258
282
  }
259
283
  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";
260
284
  var PinButton = (props) => {
261
285
  const [path, setPath] = React2.useState(defaultPath);
262
- return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
263
- "svg",
286
+ return /* @__PURE__ */ jsxRuntime.jsx(
287
+ "button",
264
288
  {
265
- width: 16,
266
- height: 16,
267
- viewBox: "0 0 16 16",
268
- fill: "currentColor",
269
- xmlns: "http://www.w3.org/2000/svg",
270
- focusable: false,
271
- onMouseEnter: () => {
272
- setPath(
273
- '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"'
274
- );
275
- },
276
- onMouseLeave: () => {
277
- setPath(defaultPath);
278
- },
279
- className: "oui-text-primary-darken",
280
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
289
+ ...props,
290
+ className: ui.cn("oui-orderEntry-pin-btn", props.className),
291
+ children: /* @__PURE__ */ jsxRuntime.jsx(
292
+ "svg",
293
+ {
294
+ width: 16,
295
+ height: 16,
296
+ viewBox: "0 0 16 16",
297
+ fill: "currentColor",
298
+ xmlns: "http://www.w3.org/2000/svg",
299
+ focusable: false,
300
+ onMouseEnter: () => {
301
+ setPath(
302
+ '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"'
303
+ );
304
+ },
305
+ onMouseLeave: () => {
306
+ setPath(defaultPath);
307
+ },
308
+ className: "oui-text-primary-darken",
309
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
310
+ }
311
+ )
281
312
  }
282
- ) });
313
+ );
283
314
  };
284
315
  function AdvancedTPSLResult(props) {
285
316
  const { order: formattedOrder, symbolInfo, onEdit, onDelete, errors } = props;
@@ -293,7 +324,7 @@ function AdvancedTPSLResult(props) {
293
324
  {
294
325
  direction: "column",
295
326
  itemAlign: "start",
296
- className: "oui-w-full",
327
+ className: "oui-advancedTPSLResult-tp oui-w-full",
297
328
  gap: 4,
298
329
  children: [
299
330
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -371,7 +402,7 @@ function AdvancedTPSLResult(props) {
371
402
  {
372
403
  direction: "column",
373
404
  itemAlign: "start",
374
- className: "oui-w-full",
405
+ className: "oui-advancedTPSLResult-sl oui-w-full",
375
406
  gap: 4,
376
407
  children: /* @__PURE__ */ jsxRuntime.jsxs(
377
408
  ui.Flex,
@@ -444,31 +475,39 @@ function AdvancedTPSLResult(props) {
444
475
  {
445
476
  direction: "column",
446
477
  itemAlign: "start",
447
- className: "oui-w-full oui-text-2xs",
478
+ className: "oui-orderEntry-advancedTpslResult oui-w-full oui-text-2xs",
448
479
  gap: 4,
449
480
  children: [
450
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "start", className: "oui-w-full", children: [
451
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.tpsl") }),
452
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
453
- /* @__PURE__ */ jsxRuntime.jsx(
454
- DeleteIcon,
455
- {
456
- size: 12,
457
- className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
458
- opacity: 1,
459
- onClick: onDelete
460
- }
461
- ),
462
- /* @__PURE__ */ jsxRuntime.jsx(
463
- EditIcon,
464
- {
465
- size: 12,
466
- className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
467
- onClick: onEdit
468
- }
469
- )
470
- ] })
471
- ] }),
481
+ /* @__PURE__ */ jsxRuntime.jsxs(
482
+ ui.Flex,
483
+ {
484
+ justify: "between",
485
+ itemAlign: "start",
486
+ className: "oui-advancedTpslResult-header oui-w-full",
487
+ children: [
488
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.tpsl") }),
489
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, className: "oui-advancedTpslResult-actions", children: [
490
+ /* @__PURE__ */ jsxRuntime.jsx(
491
+ DeleteIcon,
492
+ {
493
+ size: 12,
494
+ className: "oui-delete-btn oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
495
+ opacity: 1,
496
+ onClick: onDelete
497
+ }
498
+ ),
499
+ /* @__PURE__ */ jsxRuntime.jsx(
500
+ EditIcon,
501
+ {
502
+ size: 12,
503
+ className: "oui-edit-btn oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast",
504
+ onClick: onEdit
505
+ }
506
+ )
507
+ ] })
508
+ ]
509
+ }
510
+ ),
472
511
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "start", className: "oui-w-full", children: [
473
512
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.mode") }),
474
513
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast", children: formattedOrder.position_type === types.PositionType.FULL ? t("tpsl.fullPosition") : t("tpsl.partialPosition") })
@@ -511,33 +550,43 @@ var EditIcon = (props) => {
511
550
  var RegularFeesUI = (props) => {
512
551
  const { t } = i18n.useTranslation();
513
552
  const { taker, maker } = props;
514
- const originalTrailingFees = /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", justify: "between", width: "100%", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
515
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-truncate", size: "2xs", children: t("common.fees") }),
516
- /* @__PURE__ */ jsxRuntime.jsx(
517
- uiConnector.AuthGuard,
518
- {
519
- fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
520
- t("dmm.taker"),
521
- ": --% / ",
522
- t("dmm.maker"),
523
- ": --%"
524
- ] }),
525
- children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
526
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
527
- t("dmm.taker"),
528
- ":"
529
- ] }),
530
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
531
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "/" }),
532
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
533
- t("dmm.maker"),
534
- ":"
535
- ] }),
536
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
537
- ] })
538
- }
539
- )
540
- ] }) });
553
+ const originalTrailingFees = /* @__PURE__ */ jsxRuntime.jsx(
554
+ ui.Flex,
555
+ {
556
+ itemAlign: "center",
557
+ justify: "between",
558
+ width: "100%",
559
+ gap: 1,
560
+ className: "oui-orderEntry-fees",
561
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
562
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-fees-label oui-truncate", size: "2xs", children: t("common.fees") }),
563
+ /* @__PURE__ */ jsxRuntime.jsx(
564
+ uiConnector.AuthGuard,
565
+ {
566
+ fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
567
+ t("dmm.taker"),
568
+ ": --% / ",
569
+ t("dmm.maker"),
570
+ ": --%"
571
+ ] }),
572
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-fees-value-container", children: [
573
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
574
+ t("dmm.taker"),
575
+ ":"
576
+ ] }),
577
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
578
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "/" }),
579
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
580
+ t("dmm.maker"),
581
+ ":"
582
+ ] }),
583
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
584
+ ] })
585
+ }
586
+ )
587
+ ] })
588
+ }
589
+ );
541
590
  return originalTrailingFees;
542
591
  };
543
592
  var RegularFeesWidget = (props) => {
@@ -611,7 +660,7 @@ var SlippageEditor = React2.forwardRef((props, ref) => {
611
660
  children: /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 }) })
612
661
  }
613
662
  );
614
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs", children: [
663
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-slippageEditor oui-text-2xs", children: [
615
664
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mb: 2, gapX: 1, children: [
616
665
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.slippage") }),
617
666
  toolTipButton
@@ -643,6 +692,7 @@ var SlippageEditor = React2.forwardRef((props, ref) => {
643
692
  onValueChange,
644
693
  classNames: {
645
694
  root: ui.cn(
695
+ "oui-slippageEditor-customInput",
646
696
  "oui-rounded-md oui-bg-base-6",
647
697
  "oui-h-[40px] oui-w-[74px]"
648
698
  ),
@@ -666,6 +716,7 @@ var SlippageItem = ({ value, isActive, onClick }) => {
666
716
  width: 74,
667
717
  height: 40,
668
718
  className: ui.cn(
719
+ "oui-slippageEditor-option",
669
720
  "oui-cursor-pointer oui-select-none",
670
721
  isActive ? "oui-bg-primary-light oui-text-primary-contrast/80" : "oui-text-base-contrast-80"
671
722
  ),
@@ -696,15 +747,21 @@ var SlippageCell = (props) => {
696
747
  onOpenChange: toggle,
697
748
  title: t("common.settings"),
698
749
  contentProps: { size: isMobile ? "xs" : "sm" },
750
+ classNames: {
751
+ footer: "oui-orderEntry-slippage-footer",
752
+ body: "oui-orderEntry-slippage-body"
753
+ },
699
754
  actions: {
700
755
  primary: {
701
756
  disabled: false,
702
757
  label: t("common.save"),
703
- onClick: onConfirm
758
+ onClick: onConfirm,
759
+ className: "oui-slippage-save-btn"
704
760
  },
705
761
  secondary: {
706
762
  label: t("common.cancel"),
707
- onClick: () => setClose()
763
+ onClick: () => setClose(),
764
+ className: "oui-slippage-cancel-btn"
708
765
  }
709
766
  },
710
767
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -717,8 +774,8 @@ var SlippageCell = (props) => {
717
774
  )
718
775
  }
719
776
  ),
720
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
721
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.slippage") }),
777
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
778
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
722
779
  /* @__PURE__ */ jsxRuntime.jsx(
723
780
  uiConnector.AuthGuard,
724
781
  {
@@ -728,7 +785,7 @@ var SlippageCell = (props) => {
728
785
  t("common.max"),
729
786
  ": --%"
730
787
  ] }),
731
- children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
788
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-slippage-value-container", children: [
732
789
  /* @__PURE__ */ jsxRuntime.jsx(
733
790
  ui.Text.numeral,
734
791
  {
@@ -739,17 +796,24 @@ var SlippageCell = (props) => {
739
796
  children: props.estSlippage ?? 0
740
797
  }
741
798
  ),
742
- /* @__PURE__ */ jsxRuntime.jsx("button", { className: "oui-text-2xs", onClick: () => setOpen(), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-0.5", as: "span", children: [
743
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
744
- /* @__PURE__ */ jsxRuntime.jsx(
745
- ui.EditIcon,
746
- {
747
- className: "oui-text-primary oui-hidden md:oui-block",
748
- size: 12,
749
- opacity: 1
750
- }
751
- )
752
- ] }) })
799
+ /* @__PURE__ */ jsxRuntime.jsx(
800
+ "button",
801
+ {
802
+ className: "oui-slippage-edit-btn oui-text-2xs",
803
+ onClick: () => setOpen(),
804
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-0.5", as: "span", children: [
805
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
806
+ /* @__PURE__ */ jsxRuntime.jsx(
807
+ ui.EditIcon,
808
+ {
809
+ className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
810
+ size: 12,
811
+ opacity: 1
812
+ }
813
+ )
814
+ ] })
815
+ }
816
+ )
753
817
  ] })
754
818
  }
755
819
  )
@@ -768,56 +832,62 @@ function AssetInfo(props) {
768
832
  symbol,
769
833
  side: props.side
770
834
  });
771
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-[2px] xl:oui-space-y-1", children: [
772
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
773
- isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
774
- ui.Tooltip,
775
- {
776
- content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
777
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
778
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
779
- "a",
780
- {
781
- href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
782
- target: "_blank",
783
- rel: "noopener noreferrer",
784
- className: "oui-text-primary oui-underline",
785
- children: t("common.liquidationPrice.tooltip.learnMore")
786
- }
787
- ) })
788
- ] }),
789
- children: /* @__PURE__ */ jsxRuntime.jsx(
790
- ui.Text,
835
+ return /* @__PURE__ */ jsxRuntime.jsxs(
836
+ "div",
837
+ {
838
+ className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
839
+ children: [
840
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
841
+ isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
842
+ ui.Tooltip,
843
+ {
844
+ content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
845
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
846
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
847
+ "a",
848
+ {
849
+ href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
850
+ target: "_blank",
851
+ rel: "noopener noreferrer",
852
+ className: "oui-text-primary oui-underline",
853
+ children: t("common.liquidationPrice.tooltip.learnMore")
854
+ }
855
+ ) })
856
+ ] }),
857
+ children: /* @__PURE__ */ jsxRuntime.jsx(
858
+ ui.Text,
859
+ {
860
+ size: "2xs",
861
+ className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
862
+ children: t("orderEntry.estLiqPrice")
863
+ }
864
+ )
865
+ }
866
+ ),
867
+ /* @__PURE__ */ jsxRuntime.jsx(
868
+ ui.Text.numeral,
791
869
  {
870
+ unit: props.quote,
792
871
  size: "2xs",
793
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
794
- children: t("orderEntry.estLiqPrice")
872
+ dp: props.dp,
873
+ className: "oui-estLiqPrice-value oui-text-base-contrast-80",
874
+ unitClassName: "oui-ml-1 oui-text-base-contrast-36",
875
+ children: canTrade ? displayEstLiqPrice ?? "--" : "--"
795
876
  }
796
877
  )
797
- }
798
- ),
799
- /* @__PURE__ */ jsxRuntime.jsx(
800
- ui.Text.numeral,
801
- {
802
- unit: props.quote,
803
- size: "2xs",
804
- dp: props.dp,
805
- className: "oui-text-base-contrast-80",
806
- unitClassName: "oui-ml-1 oui-text-base-contrast-36",
807
- children: canTrade ? displayEstLiqPrice ?? "--" : "--"
808
- }
809
- )
810
- ] }),
811
- orderType === types.OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsxRuntime.jsx(
812
- SlippageUI,
813
- {
814
- slippage: props.slippage,
815
- setSlippage: props.setSlippage,
816
- estSlippage: props.estSlippage
817
- }
818
- ),
819
- !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsxRuntime.jsx(FeesWidget, { symbol: props.symbol })
820
- ] });
878
+ ] }),
879
+ orderType === types.OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsxRuntime.jsx(
880
+ SlippageUI,
881
+ {
882
+ slippage: props.slippage,
883
+ setSlippage: props.setSlippage,
884
+ estSlippage: props.estSlippage
885
+ }
886
+ ),
887
+ !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsxRuntime.jsx(FeesWidget, { symbol: props.symbol })
888
+ ]
889
+ }
890
+ );
821
891
  }
822
892
  var calculateLTVColor = (val) => {
823
893
  if (val >= 0 && val < 50) {
@@ -840,68 +910,77 @@ var LTVRiskTooltipUI = (props) => {
840
910
  currentLtv,
841
911
  onConvert
842
912
  } = props;
843
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-w-72 oui-max-w-72", direction: "column", children: [
844
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
845
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("common.assets") }),
846
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
847
- ] }),
848
- holdingData.map((asset, index) => {
849
- return /* @__PURE__ */ jsxRuntime.jsxs(
850
- ui.Flex,
851
- {
852
- width: "100%",
853
- justify: "between",
854
- itemAlign: "center",
855
- children: [
856
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "xs", children: asset.token }),
857
- /* @__PURE__ */ jsxRuntime.jsx(
858
- ui.Text,
859
- {
860
- size: "xs",
861
- intensity: 80,
862
- className: ui.cn(
863
- Number(asset.collateralContribution) < 0 && "oui-text-warning"
864
- ),
865
- children: utils.removeTrailingZeros(asset.collateralContribution)
866
- }
867
- )
868
- ]
869
- },
870
- `item-${index}`
871
- );
872
- }),
873
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
874
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
875
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
876
- /* @__PURE__ */ jsxRuntime.jsxs(
877
- ui.Text,
878
- {
879
- size: "xs",
880
- intensity: 36,
881
- className: ui.cn("oui-select-none", calculateLTVColor(currentLtv)),
882
- children: [
883
- currentLtv,
884
- "%"
885
- ]
886
- }
887
- )
888
- ] }),
889
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
890
- threshold: isThresholdLoading ? "-" : ltv_threshold,
891
- usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
892
- }) }),
893
- /* @__PURE__ */ jsxRuntime.jsx(
894
- ui.Button,
895
- {
896
- fullWidth: true,
897
- size: "md",
898
- variant: "outlined",
899
- color: "secondary",
900
- onClick: onConvert,
901
- children: t("transfer.convert.convertAssets")
902
- }
903
- )
904
- ] });
913
+ return /* @__PURE__ */ jsxRuntime.jsxs(
914
+ ui.Flex,
915
+ {
916
+ gap: 1,
917
+ className: "oui-orderEntry-ltvRiskTooltip oui-w-72 oui-max-w-72",
918
+ direction: "column",
919
+ children: [
920
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
921
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("common.assets") }),
922
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
923
+ ] }),
924
+ holdingData.map((asset, index) => {
925
+ return /* @__PURE__ */ jsxRuntime.jsxs(
926
+ ui.Flex,
927
+ {
928
+ width: "100%",
929
+ justify: "between",
930
+ itemAlign: "center",
931
+ children: [
932
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "xs", children: asset.token }),
933
+ /* @__PURE__ */ jsxRuntime.jsx(
934
+ ui.Text,
935
+ {
936
+ size: "xs",
937
+ intensity: 80,
938
+ className: ui.cn(
939
+ Number(asset.collateralContribution) < 0 && "oui-text-warning"
940
+ ),
941
+ children: utils.removeTrailingZeros(asset.collateralContribution)
942
+ }
943
+ )
944
+ ]
945
+ },
946
+ `item-${index}`
947
+ );
948
+ }),
949
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
950
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
951
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
952
+ /* @__PURE__ */ jsxRuntime.jsxs(
953
+ ui.Text,
954
+ {
955
+ size: "xs",
956
+ intensity: 36,
957
+ className: ui.cn("oui-select-none", calculateLTVColor(currentLtv)),
958
+ children: [
959
+ currentLtv,
960
+ "%"
961
+ ]
962
+ }
963
+ )
964
+ ] }),
965
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
966
+ threshold: isThresholdLoading ? "-" : ltv_threshold,
967
+ usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
968
+ }) }),
969
+ /* @__PURE__ */ jsxRuntime.jsx(
970
+ ui.Button,
971
+ {
972
+ fullWidth: true,
973
+ size: "md",
974
+ variant: "outlined",
975
+ color: "secondary",
976
+ className: "oui-ltvRiskTooltip-convert-btn",
977
+ onClick: onConvert,
978
+ children: t("transfer.convert.convertAssets")
979
+ }
980
+ )
981
+ ]
982
+ }
983
+ );
905
984
  };
906
985
  var useConvertThreshold = () => {
907
986
  const { data, error, isLoading } = hooks.useQuery(
@@ -970,52 +1049,60 @@ var Available = (props) => {
970
1049
  const showLTV = React2.useMemo(() => {
971
1050
  return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
972
1051
  }, [currentLtv]);
973
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", children: [
974
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("common.available") }),
975
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
976
- showLTV && /* @__PURE__ */ jsxRuntime.jsx(
977
- ui.Tooltip,
978
- {
979
- className: "oui-bg-base-6 oui-p-2",
980
- content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, {}),
981
- children: /* @__PURE__ */ jsxRuntime.jsx(
982
- ui.InfoCircleIcon,
1052
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1053
+ ui.Flex,
1054
+ {
1055
+ itemAlign: "center",
1056
+ justify: "between",
1057
+ className: "oui-orderEntry-available",
1058
+ children: [
1059
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
1060
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
1061
+ showLTV && /* @__PURE__ */ jsxRuntime.jsx(
1062
+ ui.Tooltip,
983
1063
  {
984
- className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
1064
+ className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
1065
+ content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, {}),
1066
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1067
+ ui.InfoCircleIcon,
1068
+ {
1069
+ className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
1070
+ }
1071
+ )
1072
+ }
1073
+ ),
1074
+ /* @__PURE__ */ jsxRuntime.jsx(
1075
+ ui.Text.numeral,
1076
+ {
1077
+ unit: quote,
1078
+ size: "2xs",
1079
+ className: "oui-available-value oui-text-base-contrast-80",
1080
+ unitClassName: "oui-ml-1 oui-text-base-contrast-54",
1081
+ dp: 2,
1082
+ padding: false,
1083
+ children: canTrade ? freeCollateral : 0
1084
+ }
1085
+ ),
1086
+ /* @__PURE__ */ jsxRuntime.jsx(
1087
+ ui.Button,
1088
+ {
1089
+ variant: "text",
1090
+ size: "xs",
1091
+ color: "secondary",
1092
+ className: "oui-available-deposit-icon oui-p-0 hover:oui-text-base-contrast-80",
1093
+ onClick: () => {
1094
+ const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
1095
+ ui.modal.show(handleDomId, {
1096
+ activeTab: "deposit"
1097
+ });
1098
+ },
1099
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { opacity: 1 })
985
1100
  }
986
1101
  )
987
- }
988
- ),
989
- /* @__PURE__ */ jsxRuntime.jsx(
990
- ui.Text.numeral,
991
- {
992
- unit: quote,
993
- size: "2xs",
994
- className: "oui-text-base-contrast-80",
995
- unitClassName: "oui-ml-1 oui-text-base-contrast-54",
996
- dp: 2,
997
- padding: false,
998
- children: canTrade ? freeCollateral : 0
999
- }
1000
- ),
1001
- /* @__PURE__ */ jsxRuntime.jsx(
1002
- ui.Button,
1003
- {
1004
- variant: "text",
1005
- size: "xs",
1006
- color: "secondary",
1007
- className: "oui-p-0 hover:oui-text-base-contrast-80",
1008
- onClick: () => {
1009
- const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
1010
- ui.modal.show(handleDomId, {
1011
- activeTab: "deposit"
1012
- });
1013
- },
1014
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { opacity: 1 })
1015
- }
1016
- )
1017
- ] })
1018
- ] });
1102
+ ] })
1103
+ ]
1104
+ }
1105
+ );
1019
1106
  };
1020
1107
  function isBBOOrder(options2) {
1021
1108
  const { order_type, order_type_ext } = options2;
@@ -1208,13 +1295,36 @@ var OrderConfirmDialog = (props) => {
1208
1295
  )
1209
1296
  ] });
1210
1297
  };
1211
- const header = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
1212
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "symbol", showIcon: true, children: order.symbol }),
1213
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "end", gapX: 1, children: [
1214
- /* @__PURE__ */ jsxRuntime.jsx(OrderTypeTag, { type: order_type }),
1215
- side === types.OrderSide.BUY ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "sell", size: "sm", children: t("common.sell") })
1216
- ] })
1217
- ] });
1298
+ const header = /* @__PURE__ */ jsxRuntime.jsxs(
1299
+ ui.Flex,
1300
+ {
1301
+ justify: "between",
1302
+ className: "oui-orderEntry-orderConfirmDialog-header",
1303
+ children: [
1304
+ /* @__PURE__ */ jsxRuntime.jsx(
1305
+ ui.Text.formatted,
1306
+ {
1307
+ rule: "symbol",
1308
+ showIcon: true,
1309
+ className: "oui-orderConfirmDialog-symbol",
1310
+ children: order.symbol
1311
+ }
1312
+ ),
1313
+ /* @__PURE__ */ jsxRuntime.jsxs(
1314
+ ui.Flex,
1315
+ {
1316
+ justify: "end",
1317
+ gapX: 1,
1318
+ className: "oui-orderConfirmDialog-header-tags",
1319
+ children: [
1320
+ /* @__PURE__ */ jsxRuntime.jsx(OrderTypeTag, { type: order_type }),
1321
+ side === types.OrderSide.BUY ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "sell", size: "sm", children: t("common.sell") })
1322
+ ]
1323
+ }
1324
+ )
1325
+ ]
1326
+ }
1327
+ );
1218
1328
  const quantityItem = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
1219
1329
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.orderQty") }),
1220
1330
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1314,33 +1424,68 @@ var OrderConfirmDialog = (props) => {
1314
1424
  }
1315
1425
  )
1316
1426
  ] });
1317
- const orderConfirmCheckbox = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, pt: 4, pb: 5, children: [
1318
- /* @__PURE__ */ jsxRuntime.jsx(
1319
- ui.Checkbox,
1320
- {
1321
- id: "orderConfirm",
1322
- color: "white",
1323
- onCheckedChange: (checked) => {
1324
- setNeedConfirm(!!!checked);
1325
- }
1326
- }
1327
- ),
1328
- /* @__PURE__ */ jsxRuntime.jsx(
1329
- "label",
1330
- {
1331
- htmlFor: "orderConfirm",
1332
- className: ui.textVariants({
1333
- size: "xs",
1334
- intensity: 54
1335
- }),
1336
- children: t("orderEntry.disableOrderConfirm")
1337
- }
1338
- )
1339
- ] });
1340
- const buttons = /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, gapX: 3, children: [
1341
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "secondary", size: "md", onClick: () => onCancel(), children: t("common.cancel") }),
1342
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "md", onClick: () => onConfirm(), children: t("common.confirm") })
1343
- ] });
1427
+ const orderConfirmCheckbox = /* @__PURE__ */ jsxRuntime.jsxs(
1428
+ ui.Flex,
1429
+ {
1430
+ gapX: 1,
1431
+ pt: 4,
1432
+ pb: 5,
1433
+ className: "oui-orderEntry-orderConfirmDialog-disableConfirm",
1434
+ children: [
1435
+ /* @__PURE__ */ jsxRuntime.jsx(
1436
+ ui.Checkbox,
1437
+ {
1438
+ id: "orderConfirm",
1439
+ color: "white",
1440
+ className: "oui-orderConfirmDialog-disableConfirm-checkbox",
1441
+ onCheckedChange: (checked) => {
1442
+ setNeedConfirm(!!!checked);
1443
+ }
1444
+ }
1445
+ ),
1446
+ /* @__PURE__ */ jsxRuntime.jsx(
1447
+ "label",
1448
+ {
1449
+ htmlFor: "orderConfirm",
1450
+ className: ui.textVariants({
1451
+ size: "xs",
1452
+ intensity: 54
1453
+ }),
1454
+ children: t("orderEntry.disableOrderConfirm")
1455
+ }
1456
+ )
1457
+ ]
1458
+ }
1459
+ );
1460
+ const buttons = /* @__PURE__ */ jsxRuntime.jsxs(
1461
+ ui.Grid,
1462
+ {
1463
+ cols: 2,
1464
+ gapX: 3,
1465
+ className: "oui-orderEntry-orderConfirmDialog-actions",
1466
+ children: [
1467
+ /* @__PURE__ */ jsxRuntime.jsx(
1468
+ ui.Button,
1469
+ {
1470
+ color: "secondary",
1471
+ size: "md",
1472
+ className: "oui-cancel-btn",
1473
+ onClick: () => onCancel(),
1474
+ children: t("common.cancel")
1475
+ }
1476
+ ),
1477
+ /* @__PURE__ */ jsxRuntime.jsx(
1478
+ ui.Button,
1479
+ {
1480
+ size: "md",
1481
+ className: "oui-confirm-btn",
1482
+ onClick: () => onConfirm(),
1483
+ children: t("common.confirm")
1484
+ }
1485
+ )
1486
+ ]
1487
+ }
1488
+ );
1344
1489
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1345
1490
  header,
1346
1491
  /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
@@ -1350,7 +1495,7 @@ var OrderConfirmDialog = (props) => {
1350
1495
  className: ui.textVariants({
1351
1496
  size: "sm",
1352
1497
  intensity: 54,
1353
- className: "oui-space-y-1"
1498
+ className: "oui-orderEntry-orderConfirmDialog-content oui-space-y-1"
1354
1499
  }),
1355
1500
  children: [
1356
1501
  quantityItem,
@@ -1435,10 +1580,14 @@ var MaxQtyConfirm = React2.memo((props) => {
1435
1580
  closable: true,
1436
1581
  onOpenChange: props.onOpenChange,
1437
1582
  size: "sm",
1583
+ classNames: {
1584
+ footer: "oui-maxQtyConfirm-footer",
1585
+ body: "oui-maxQtyConfirm-body"
1586
+ },
1438
1587
  actions: {
1439
1588
  primary: {
1440
1589
  label: t("orderEntry.placeOrderNow"),
1441
- className: "oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1590
+ className: "oui-primary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1442
1591
  onClick: () => {
1443
1592
  props.onConfirm();
1444
1593
  return Promise.resolve();
@@ -1446,14 +1595,14 @@ var MaxQtyConfirm = React2.memo((props) => {
1446
1595
  },
1447
1596
  secondary: {
1448
1597
  label: t("common.cancel"),
1449
- className: "oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1598
+ className: "oui-secondary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
1450
1599
  onClick: () => {
1451
1600
  props.onOpenChange(false);
1452
1601
  return Promise.resolve();
1453
1602
  }
1454
1603
  }
1455
1604
  },
1456
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
1605
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-maxQtyConfirm-content oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
1457
1606
  maxQty: `${props.maxQty} ${props.base}`
1458
1607
  }) })
1459
1608
  }
@@ -1546,12 +1695,13 @@ var ScaledOrderConfirm = (props) => {
1546
1695
  }
1547
1696
  ];
1548
1697
  }, [t, symbolInfo, askAndBid, base_dp, quote_dp]);
1549
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-font-semibold", children: [
1698
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-scaledOrderConfirm oui-font-semibold", children: [
1550
1699
  /* @__PURE__ */ jsxRuntime.jsx(
1551
1700
  ui.DataTable,
1552
1701
  {
1553
1702
  classNames: {
1554
1703
  root: ui.cn(
1704
+ "oui-scaledOrderConfirm-table",
1555
1705
  "oui-bg-base-7",
1556
1706
  "oui-rounded-lg",
1557
1707
  // need to set overflow hidden because table header will avoid the border radius
@@ -1573,7 +1723,7 @@ var ScaledOrderConfirm = (props) => {
1573
1723
  }
1574
1724
  }
1575
1725
  ),
1576
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-mb-5 oui-mt-4 oui-text-2xs", children: [
1726
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-scaledOrderConfirm-content oui-mb-5 oui-mt-4 oui-text-2xs", children: [
1577
1727
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
1578
1728
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.totalOrders") }),
1579
1729
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: order.orders?.length })
@@ -1610,8 +1760,25 @@ var ScaledOrderConfirm = (props) => {
1610
1760
  ] })
1611
1761
  ] }),
1612
1762
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, gapX: 3, children: [
1613
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "secondary", size: "md", onClick: onCancel, children: t("common.cancel") }),
1614
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "md", onClick: onConfirm, children: t("common.confirm") })
1763
+ /* @__PURE__ */ jsxRuntime.jsx(
1764
+ ui.Button,
1765
+ {
1766
+ color: "secondary",
1767
+ size: "md",
1768
+ className: "oui-scaledOrderConfirm-cancel-btn",
1769
+ onClick: onCancel,
1770
+ children: t("common.cancel")
1771
+ }
1772
+ ),
1773
+ /* @__PURE__ */ jsxRuntime.jsx(
1774
+ ui.Button,
1775
+ {
1776
+ size: "md",
1777
+ className: "oui-scaledOrderConfirm-confirm-btn",
1778
+ onClick: onConfirm,
1779
+ children: t("common.confirm")
1780
+ }
1781
+ )
1615
1782
  ] })
1616
1783
  ] });
1617
1784
  };
@@ -1724,10 +1891,16 @@ var OrderTypeSelect = (props) => {
1724
1891
  options: options2,
1725
1892
  onValueChange: props.onChange,
1726
1893
  contentProps: {
1727
- className: "oui-bg-base-8"
1894
+ className: ui.cn(
1895
+ "oui-orderEntry-orderTypeSelect-content",
1896
+ "oui-bg-base-8"
1897
+ )
1728
1898
  },
1729
1899
  classNames: {
1730
- trigger: "oui-bg-base-6 oui-border-line"
1900
+ trigger: ui.cn(
1901
+ "oui-orderEntry-orderTypeSelect-btn",
1902
+ "oui-bg-base-6 oui-border-line"
1903
+ )
1731
1904
  },
1732
1905
  valueFormatter: (value, option) => {
1733
1906
  const item = options2.find((o) => o.value === value);
@@ -1768,6 +1941,7 @@ var LeverageBadge = (props) => {
1768
1941
  itemAlign: "center",
1769
1942
  gapX: 1,
1770
1943
  className: ui.cn(
1944
+ "oui-orderEntry-leverage-btn",
1771
1945
  "oui-h-8",
1772
1946
  "oui-rounded oui-border oui-border-line oui-bg-base-6",
1773
1947
  "oui-cursor-pointer oui-select-none oui-text-xs oui-font-semibold oui-text-base-contrast-54"
@@ -1788,6 +1962,7 @@ function OrderEntryHeader(props) {
1788
1962
  "div",
1789
1963
  {
1790
1964
  className: ui.cn(
1965
+ "oui-orderEntry-side",
1791
1966
  "oui-grid oui-w-full oui-flex-1 oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
1792
1967
  "oui-grid-cols-2"
1793
1968
  ),
@@ -1802,6 +1977,7 @@ function OrderEntryHeader(props) {
1802
1977
  fullWidth: true,
1803
1978
  "data-type": types.OrderSide.BUY,
1804
1979
  className: ui.cn(
1980
+ "oui-orderEntry-side-buy-btn",
1805
1981
  side === types.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"
1806
1982
  ),
1807
1983
  "data-testid": "oui-testid-orderEntry-side-buy-button",
@@ -1818,6 +1994,7 @@ function OrderEntryHeader(props) {
1818
1994
  fullWidth: true,
1819
1995
  size: "md",
1820
1996
  className: ui.cn(
1997
+ "oui-orderEntry-side-sell-btn",
1821
1998
  side === types.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"
1822
1999
  ),
1823
2000
  "data-testid": "oui-testid-orderEntry-side-sell-button",
@@ -1831,11 +2008,12 @@ function OrderEntryHeader(props) {
1831
2008
  "div",
1832
2009
  {
1833
2010
  className: ui.cn(
2011
+ "oui-orderEntry-header-controls",
1834
2012
  "oui-grid oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
1835
2013
  "oui-grid-cols-2"
1836
2014
  ),
1837
2015
  children: [
1838
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
2016
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full oui-orderEntry-orderTypeSelect", children: /* @__PURE__ */ jsxRuntime.jsx(
1839
2017
  OrderTypeSelect,
1840
2018
  {
1841
2019
  type: order_type,
@@ -1846,7 +2024,7 @@ function OrderEntryHeader(props) {
1846
2024
  }
1847
2025
  }
1848
2026
  ) }),
1849
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
2027
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full oui-orderEntry-leverage", children: /* @__PURE__ */ jsxRuntime.jsx(
1850
2028
  LeverageBadge,
1851
2029
  {
1852
2030
  symbol: props.symbol,
@@ -1955,7 +2133,8 @@ var CustomInput = React2.forwardRef(
1955
2133
  ],
1956
2134
  classNames: {
1957
2135
  root: ui.cn(
1958
- "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",
2136
+ "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",
2137
+ props.error ? "oui-border-transparent" : "focus-within:oui-border-transparent",
1959
2138
  props.className,
1960
2139
  props.classNames?.root
1961
2140
  ),
@@ -1978,7 +2157,7 @@ var InputLabel = (props) => {
1978
2157
  {
1979
2158
  htmlFor: props.id,
1980
2159
  className: ui.cn(
1981
- "oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
2160
+ "oui-input-label oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
1982
2161
  props.className
1983
2162
  ),
1984
2163
  children: props.children
@@ -2017,12 +2196,18 @@ var BBOOrderTypeSelect = (props) => {
2017
2196
  options: options2,
2018
2197
  onValueChange: props.onChange,
2019
2198
  contentProps: {
2020
- className: "oui-bg-base-8 oui-w-full",
2199
+ className: ui.cn(
2200
+ "oui-orderEntry-bboOrderTypeSelect-content",
2201
+ "oui-bg-base-8 oui-w-full"
2202
+ ),
2021
2203
  style: props.contentStyle
2022
2204
  },
2023
2205
  size: "sm",
2024
2206
  classNames: {
2025
- trigger: "oui-border-none oui-bg-transparent"
2207
+ trigger: ui.cn(
2208
+ "oui-orderEntry-bboOrderTypeSelect-btn",
2209
+ "oui-border-none oui-bg-transparent"
2210
+ )
2026
2211
  },
2027
2212
  valueFormatter: (value, option) => {
2028
2213
  const item = options2.find((item2) => item2.value === value);
@@ -2039,7 +2224,7 @@ var LimitPriceSuffix = (props) => {
2039
2224
  {
2040
2225
  direction: "column",
2041
2226
  itemAlign: "end",
2042
- className: ui.cn("oui-order-entry-limit-price-input-suffix", "oui-text-2xs"),
2227
+ className: ui.cn("oui-orderEntry-limitPrice-suffix", "oui-text-2xs"),
2043
2228
  children: [
2044
2229
  quote,
2045
2230
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "end", itemAlign: "center", gap: 2, children: [
@@ -2052,6 +2237,7 @@ var LimitPriceSuffix = (props) => {
2052
2237
  itemAlign: "center",
2053
2238
  r: "base",
2054
2239
  className: ui.cn(
2240
+ "oui-orderEntry-bboToggle",
2055
2241
  "oui-mt-[2px] oui-cursor-pointer oui-select-none oui-border",
2056
2242
  bbo.bboStatus === "on" /* ON */ ? "oui-border-primary" : "oui-border-line-12",
2057
2243
  bbo.bboStatus === "disabled" /* DISABLED */ && "oui-cursor-not-allowed"
@@ -2071,6 +2257,7 @@ var LimitPriceSuffix = (props) => {
2071
2257
  ui.Text,
2072
2258
  {
2073
2259
  className: ui.cn(
2260
+ "oui-orderEntry-bboToggle-label",
2074
2261
  bbo.bboStatus === "on" /* ON */ && "oui-text-primary",
2075
2262
  bbo.bboStatus === "off" /* OFF */ && "oui-text-base-contrast-54",
2076
2263
  bbo.bboStatus === "disabled" /* DISABLED */ && "oui-text-base-contrast-20"
@@ -2084,6 +2271,7 @@ var LimitPriceSuffix = (props) => {
2084
2271
  ui.Text,
2085
2272
  {
2086
2273
  className: ui.cn(
2274
+ "oui-orderEntry-midPrice-btn",
2087
2275
  "oui-select-none",
2088
2276
  "oui-cursor-pointer oui-text-primary"
2089
2277
  ),
@@ -2122,7 +2310,7 @@ var PriceInput = (props) => {
2122
2310
  "div",
2123
2311
  {
2124
2312
  ref: priceInputContainerRef,
2125
- className: "oui-group oui-relative oui-w-full",
2313
+ className: "oui-orderEntry-priceInput-container oui-group oui-relative oui-w-full",
2126
2314
  children: [
2127
2315
  /* @__PURE__ */ jsxRuntime.jsx(
2128
2316
  CustomInput,
@@ -2132,6 +2320,7 @@ var PriceInput = (props) => {
2132
2320
  label: t("common.price"),
2133
2321
  suffix,
2134
2322
  value: props.order_price,
2323
+ className: "oui-orderEntry-priceInput",
2135
2324
  onChange: (e) => {
2136
2325
  setOrderValue("order_price", e);
2137
2326
  },
@@ -2147,16 +2336,25 @@ var PriceInput = (props) => {
2147
2336
  }
2148
2337
  }
2149
2338
  ),
2150
- bbo.bboStatus === "on" /* ON */ && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("oui-absolute oui-bottom-1 oui-left-0"), children: /* @__PURE__ */ jsxRuntime.jsx(
2151
- BBOOrderTypeSelect,
2339
+ bbo.bboStatus === "on" /* ON */ && /* @__PURE__ */ jsxRuntime.jsx(
2340
+ "div",
2152
2341
  {
2153
- value: bbo.bboType,
2154
- onChange: bbo.onBBOChange,
2155
- contentStyle: {
2156
- width: props.priceInputContainerWidth
2157
- }
2342
+ className: ui.cn(
2343
+ "oui-orderEntry-bboSelect",
2344
+ "oui-absolute oui-bottom-1 oui-left-0"
2345
+ ),
2346
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2347
+ BBOOrderTypeSelect,
2348
+ {
2349
+ value: bbo.bboType,
2350
+ onChange: bbo.onBBOChange,
2351
+ contentStyle: {
2352
+ width: props.priceInputContainerWidth
2353
+ }
2354
+ }
2355
+ )
2158
2356
  }
2159
- ) })
2357
+ )
2160
2358
  ]
2161
2359
  }
2162
2360
  );
@@ -2180,7 +2378,7 @@ var QuantityInput = React2.memo((props) => {
2180
2378
  formatters: [ui.inputFormatter.dpFormatter(base_dp)],
2181
2379
  onFocus: onFocus(3 /* QUANTITY */),
2182
2380
  onBlur: onBlur(3 /* QUANTITY */),
2183
- className: "!oui-rounded-r",
2381
+ className: "oui-orderEntry-quantityInput !oui-rounded-r",
2184
2382
  classNames: {
2185
2383
  suffix: "oui-justify-end"
2186
2384
  }
@@ -2213,7 +2411,8 @@ var TotalTypeSelect = React2.memo((props) => {
2213
2411
  },
2214
2412
  classNames: {
2215
2413
  trigger: ui.cn(
2216
- "oui-w-auto oui-border-none oui-bg-transparent",
2414
+ "oui-orderEntry-totalTypeSelect-btn",
2415
+ "oui-w-auto oui-border-none oui-bg-transparent oui-shadow-none",
2217
2416
  "oui-absolute oui-left-0 oui-top-[5px] oui-text-2xs oui-text-base-contrast-36"
2218
2417
  )
2219
2418
  },
@@ -2272,7 +2471,7 @@ var TotalInput = React2.memo((props) => {
2272
2471
  formatters: [ui.inputFormatter.dpFormatter(2)],
2273
2472
  onFocus: onFocus(6 /* MARGIN */),
2274
2473
  onBlur: onBlur(6 /* MARGIN */),
2275
- className: "!oui-rounded-l",
2474
+ className: "oui-orderEntry-marginInput !oui-rounded-l",
2276
2475
  classNames: {
2277
2476
  suffix: "oui-justify-end"
2278
2477
  }
@@ -2292,7 +2491,7 @@ var TotalInput = React2.memo((props) => {
2292
2491
  onChange: (val) => {
2293
2492
  setOrderValue("total", val);
2294
2493
  },
2295
- className: "!oui-rounded-l",
2494
+ className: "oui-orderEntry-totalInput !oui-rounded-l",
2296
2495
  classNames: {
2297
2496
  suffix: "oui-justify-end"
2298
2497
  },
@@ -2304,10 +2503,17 @@ var TotalInput = React2.memo((props) => {
2304
2503
  });
2305
2504
  TotalInput.displayName = "TotalInput";
2306
2505
  var QtyAndTotalInput = React2.memo((props) => {
2307
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
2308
- /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { order_quantity: props.order_quantity }),
2309
- /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total })
2310
- ] });
2506
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2507
+ ui.Grid,
2508
+ {
2509
+ cols: 2,
2510
+ className: "oui-orderEntry-qtyAndTotal oui-group oui-space-x-1",
2511
+ children: [
2512
+ /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { order_quantity: props.order_quantity }),
2513
+ /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total })
2514
+ ]
2515
+ }
2516
+ );
2311
2517
  });
2312
2518
  QtyAndTotalInput.displayName = "QtyAndTotalInput";
2313
2519
  var QuantityDistributionInput = React2.memo((props) => {
@@ -2334,6 +2540,7 @@ var QuantityDistributionInput = React2.memo((props) => {
2334
2540
  width: "100%",
2335
2541
  intensity: 600,
2336
2542
  className: ui.cn(
2543
+ "oui-orderEntry-quantityDistribution",
2337
2544
  "oui-t-rounded oui-text-base-contrast-36",
2338
2545
  "oui-border oui-border-solid oui-border-line",
2339
2546
  props.className
@@ -2343,7 +2550,7 @@ var QuantityDistributionInput = React2.memo((props) => {
2343
2550
  ui.Text,
2344
2551
  {
2345
2552
  size: "2xs",
2346
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
2553
+ className: "oui-quantityDistribution-hint oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
2347
2554
  onClick: showHint,
2348
2555
  children: t("orderEntry.quantityDistribution")
2349
2556
  }
@@ -2468,32 +2675,44 @@ var QuantityDistribution = (props) => {
2468
2675
  [types.DistributionType.CUSTOM]: t("orderEntry.distributionType.custom")
2469
2676
  };
2470
2677
  }, [t]);
2471
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: ui.cn("oui-gap-x-[6px] lg:oui-gap-x-2"), wrap: "wrap", children: Object.values(types.DistributionType).map((type) => {
2472
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
2473
- /* @__PURE__ */ jsxRuntime.jsx(
2474
- ui.Checkbox,
2475
- {
2476
- id: `distribution-type-${type}`,
2477
- color: "white",
2478
- variant: "radio",
2479
- checked: value === type,
2480
- onCheckedChange: onChange(type)
2481
- }
2678
+ return /* @__PURE__ */ jsxRuntime.jsx(
2679
+ ui.Flex,
2680
+ {
2681
+ className: ui.cn(
2682
+ "oui-orderEntry-quantityDistribution-options",
2683
+ "oui-gap-x-[6px] lg:oui-gap-x-2"
2482
2684
  ),
2483
- /* @__PURE__ */ jsxRuntime.jsx(
2484
- "label",
2485
- {
2486
- htmlFor: `distribution-type-${type}`,
2487
- className: ui.cn(
2488
- "oui-text-2xs",
2489
- "oui-ml-1",
2490
- "oui-whitespace-nowrap oui-break-normal"
2685
+ wrap: "wrap",
2686
+ children: Object.values(types.DistributionType).map((type) => {
2687
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", children: [
2688
+ /* @__PURE__ */ jsxRuntime.jsx(
2689
+ ui.Checkbox,
2690
+ {
2691
+ id: `distribution-type-${type}`,
2692
+ color: "white",
2693
+ variant: "radio",
2694
+ className: "oui-quantityDistribution-option-radio",
2695
+ checked: value === type,
2696
+ onCheckedChange: onChange(type)
2697
+ }
2491
2698
  ),
2492
- children: distributionTypeMap[type]
2493
- }
2494
- )
2495
- ] }, type);
2496
- }) });
2699
+ /* @__PURE__ */ jsxRuntime.jsx(
2700
+ "label",
2701
+ {
2702
+ htmlFor: `distribution-type-${type}`,
2703
+ className: ui.cn(
2704
+ "oui-quantityDistribution-option-label",
2705
+ "oui-text-2xs",
2706
+ "oui-ml-1",
2707
+ "oui-whitespace-nowrap oui-break-normal"
2708
+ ),
2709
+ children: distributionTypeMap[type]
2710
+ }
2711
+ )
2712
+ ] }, type);
2713
+ })
2714
+ }
2715
+ );
2497
2716
  };
2498
2717
  var FlatQuantity = () => {
2499
2718
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2766,6 +2985,7 @@ var ScaledPriceInput = React2.memo((props) => {
2766
2985
  label: t("orderEntry.startPrice"),
2767
2986
  suffix: quote,
2768
2987
  id: "order_start_price_input",
2988
+ className: "oui-orderEntry-scaledOrder-startPriceInput",
2769
2989
  value: props.start_price,
2770
2990
  error: getErrorMsg("start_price"),
2771
2991
  onChange: (e) => {
@@ -2785,6 +3005,7 @@ var ScaledPriceInput = React2.memo((props) => {
2785
3005
  label: t("orderEntry.endPrice"),
2786
3006
  suffix: quote,
2787
3007
  id: "order_end_price_input",
3008
+ className: "oui-orderEntry-scaledOrder-endPriceInput",
2788
3009
  value: props.end_price,
2789
3010
  error: getErrorMsg("end_price"),
2790
3011
  onChange: (val) => {
@@ -2815,8 +3036,10 @@ var ScaledQuantityUnit = (props) => {
2815
3036
  tokens: options2,
2816
3037
  classNames: {
2817
3038
  trigger: ui.cn(
3039
+ "oui-orderEntry-scaledQuantityUnit-btn",
2818
3040
  "oui-absolute oui-right-0 oui-top-1",
2819
- "oui-w-full oui-justify-end"
3041
+ "oui-w-full oui-justify-end",
3042
+ "oui-shadow-none"
2820
3043
  )
2821
3044
  },
2822
3045
  value: props.value,
@@ -2860,7 +3083,7 @@ var ScaledQuantityInput = React2.memo((props) => {
2860
3083
  suffix,
2861
3084
  id: "order_quantity_input",
2862
3085
  name: "order_quantity_input",
2863
- className: "!oui-rounded-r",
3086
+ className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-r",
2864
3087
  value: props.order_quantity,
2865
3088
  error: getErrorMsg(
2866
3089
  "order_quantity",
@@ -2882,7 +3105,7 @@ var ScaledQuantityInput = React2.memo((props) => {
2882
3105
  suffix,
2883
3106
  id: "order_total_input",
2884
3107
  name: "order_total_input",
2885
- className: "!oui-rounded-r",
3108
+ className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-r",
2886
3109
  value: props.total,
2887
3110
  error: getErrorMsg("order_quantity", `${errors?.total?.value} ${quote}`),
2888
3111
  onChange: (val) => {
@@ -2902,6 +3125,7 @@ var SkewInput = React2.memo((props) => {
2902
3125
  {
2903
3126
  id: "order_skew_input",
2904
3127
  label: t("orderEntry.skew"),
3128
+ className: "oui-orderEntry-scaledOrder-skewInput",
2905
3129
  value: props.skew,
2906
3130
  error: getErrorMsg("skew"),
2907
3131
  onChange: (val) => {
@@ -2928,7 +3152,7 @@ var TotalOrdersInput = React2.memo((props) => {
2928
3152
  label: t("orderEntry.totalOrders"),
2929
3153
  placeholder: "2-20",
2930
3154
  id: "order_total_orders_input",
2931
- className: "!oui-rounded-l",
3155
+ className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-l",
2932
3156
  value: props.total_orders,
2933
3157
  error: getErrorMsg("total_orders"),
2934
3158
  onChange: (val) => {
@@ -2947,7 +3171,7 @@ var TotalOrdersInput = React2.memo((props) => {
2947
3171
  var ScaledOrderInput = (props) => {
2948
3172
  const { values } = props;
2949
3173
  const showSkewInput = values.distribution_type === types.DistributionType.CUSTOM;
2950
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-1", children: [
3174
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-scaledOrderInput oui-space-y-1", children: [
2951
3175
  /* @__PURE__ */ jsxRuntime.jsx(
2952
3176
  ScaledPriceInput,
2953
3177
  {
@@ -2955,16 +3179,23 @@ var ScaledOrderInput = (props) => {
2955
3179
  end_price: values.end_price
2956
3180
  }
2957
3181
  ),
2958
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
2959
- /* @__PURE__ */ jsxRuntime.jsx(
2960
- ScaledQuantityInput,
2961
- {
2962
- order_quantity: values.order_quantity,
2963
- total: values.total
2964
- }
2965
- ),
2966
- /* @__PURE__ */ jsxRuntime.jsx(TotalOrdersInput, { total_orders: values.total_orders })
2967
- ] }),
3182
+ /* @__PURE__ */ jsxRuntime.jsxs(
3183
+ ui.Grid,
3184
+ {
3185
+ cols: 2,
3186
+ className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-space-x-1",
3187
+ children: [
3188
+ /* @__PURE__ */ jsxRuntime.jsx(
3189
+ ScaledQuantityInput,
3190
+ {
3191
+ order_quantity: values.order_quantity,
3192
+ total: values.total
3193
+ }
3194
+ ),
3195
+ /* @__PURE__ */ jsxRuntime.jsx(TotalOrdersInput, { total_orders: values.total_orders })
3196
+ ]
3197
+ }
3198
+ ),
2968
3199
  /* @__PURE__ */ jsxRuntime.jsx(
2969
3200
  QuantityDistributionInput,
2970
3201
  {
@@ -2985,7 +3216,7 @@ var TriggerPriceInput = React2.memo((props) => {
2985
3216
  setOrderValue,
2986
3217
  triggerPriceInputRef
2987
3218
  } = useOrderEntryContext();
2988
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-group", children: /* @__PURE__ */ jsxRuntime.jsx(
3219
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-orderEntry-triggerPriceInput-container oui-group", children: /* @__PURE__ */ jsxRuntime.jsx(
2989
3220
  CustomInput,
2990
3221
  {
2991
3222
  ref: triggerPriceInputRef,
@@ -2994,6 +3225,7 @@ var TriggerPriceInput = React2.memo((props) => {
2994
3225
  label: t("common.trigger"),
2995
3226
  suffix: symbolInfo.quote,
2996
3227
  value: props.trigger_price,
3228
+ className: "oui-orderEntry-triggerPriceInput",
2997
3229
  onChange: (e) => {
2998
3230
  setOrderValue("trigger_price", e);
2999
3231
  },
@@ -3015,7 +3247,7 @@ var ActivePriceInput = React2.memo((props) => {
3015
3247
  setOrderValue,
3016
3248
  activatedPriceInputRef
3017
3249
  } = useOrderEntryContext();
3018
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-group", children: /* @__PURE__ */ jsxRuntime.jsx(
3250
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-orderEntry-activatedPriceInput-container oui-group", children: /* @__PURE__ */ jsxRuntime.jsx(
3019
3251
  CustomInput,
3020
3252
  {
3021
3253
  ref: activatedPriceInputRef,
@@ -3026,6 +3258,7 @@ var ActivePriceInput = React2.memo((props) => {
3026
3258
  suffix: symbolInfo.quote,
3027
3259
  error: getErrorMsg("activated_price"),
3028
3260
  value: props.activated_price,
3261
+ className: "oui-orderEntry-activatedPriceInput",
3029
3262
  onChange: (val) => {
3030
3263
  setOrderValue("activated_price", val);
3031
3264
  },
@@ -3087,6 +3320,7 @@ var TrailingCallbackSelect = React2.memo(
3087
3320
  options: options2,
3088
3321
  classNames: {
3089
3322
  trigger: ui.cn(
3323
+ "oui-orderEntry-trailingCallbackSelect-btn",
3090
3324
  "oui-absolute oui-right-0 oui-top-1",
3091
3325
  "oui-w-[124px] oui-justify-end",
3092
3326
  "oui-text-base-contrast-36"
@@ -3098,7 +3332,7 @@ var TrailingCallbackSelect = React2.memo(
3098
3332
  align: "end",
3099
3333
  alignOffset: -1,
3100
3334
  sideOffset: -4,
3101
- className: "oui-border oui-border-line-6"
3335
+ className: "oui-orderEntry-trailingCallbackSelect-content oui-border oui-border-line-6"
3102
3336
  }
3103
3337
  }
3104
3338
  );
@@ -3159,7 +3393,7 @@ var TrailingCallbackInput = React2.memo(
3159
3393
  // sideOffset={-25}
3160
3394
  // className="!oui-p-3"
3161
3395
  // >
3162
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
3396
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-trailingCallback oui-relative", children: [
3163
3397
  /* @__PURE__ */ jsxRuntime.jsx(
3164
3398
  CustomInput,
3165
3399
  {
@@ -3169,6 +3403,7 @@ var TrailingCallbackInput = React2.memo(
3169
3403
  suffix,
3170
3404
  error: getErrorMsg("callback_rate"),
3171
3405
  value: callback_rate,
3406
+ className: "oui-trailingCallback-rateInput",
3172
3407
  onChange: (val) => {
3173
3408
  setOrderValue("callback_rate", val);
3174
3409
  },
@@ -3189,7 +3424,7 @@ var TrailingCallbackInput = React2.memo(
3189
3424
  /* @__PURE__ */ jsxRuntime.jsx(
3190
3425
  CallbackRatePercentages,
3191
3426
  {
3192
- className: "oui-absolute oui-bottom-1 oui-left-2",
3427
+ className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-left-2",
3193
3428
  callback_rate
3194
3429
  }
3195
3430
  )
@@ -3205,6 +3440,7 @@ var TrailingCallbackInput = React2.memo(
3205
3440
  suffix,
3206
3441
  error: getErrorMsg("callback_value"),
3207
3442
  value: callback_value,
3443
+ className: "oui-trailingCallback-valueInput",
3208
3444
  onChange: (val) => {
3209
3445
  setOrderValue("callback_value", val);
3210
3446
  },
@@ -3222,7 +3458,7 @@ var TrailingCallbackInput = React2.memo(
3222
3458
  TrailingCallbackInput.displayName = "TrailingCallbackInput";
3223
3459
  var TrailingStopInput = (props) => {
3224
3460
  const { values } = props;
3225
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-1", children: [
3461
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-trailingStopInput oui-space-y-1", children: [
3226
3462
  /* @__PURE__ */ jsxRuntime.jsx(ActivePriceInput, { activated_price: values.activated_price }),
3227
3463
  /* @__PURE__ */ jsxRuntime.jsx(
3228
3464
  TrailingCallbackInput,
@@ -3262,7 +3498,7 @@ function OrderInput(props) {
3262
3498
  priceInputContainerWidth: props.priceInputContainerWidth
3263
3499
  }
3264
3500
  );
3265
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-1", children: [
3501
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-orderInput-container oui-space-y-1", children: [
3266
3502
  triggerPriceInput,
3267
3503
  priceInput,
3268
3504
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3319,7 +3555,7 @@ var QuantitySlider = React2.memo((props) => {
3319
3555
  setSliderValue(quantityToSlider());
3320
3556
  }
3321
3557
  }, [order_quantity, maxQty]);
3322
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3558
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-quantitySlider", children: [
3323
3559
  /* @__PURE__ */ jsxRuntime.jsx(
3324
3560
  ui.Slider,
3325
3561
  {
@@ -3335,67 +3571,89 @@ var QuantitySlider = React2.memo((props) => {
3335
3571
  max: SLIDER_MAX
3336
3572
  }
3337
3573
  ),
3338
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-pt-1 xl:oui-pt-2", children: [
3339
- /* @__PURE__ */ jsxRuntime.jsx(
3340
- ui.Text.numeral,
3341
- {
3342
- size: "2xs",
3343
- color,
3344
- dp: 2,
3345
- padding: false,
3346
- suffix: "%",
3347
- children: canTrade ? sliderValue : 0
3348
- }
3349
- ),
3350
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
3351
- /* @__PURE__ */ jsxRuntime.jsx(
3352
- "button",
3353
- {
3354
- className: ui.textVariants({
3574
+ /* @__PURE__ */ jsxRuntime.jsxs(
3575
+ ui.Flex,
3576
+ {
3577
+ justify: "between",
3578
+ className: "oui-quantitySlider-footer oui-pt-1 xl:oui-pt-2",
3579
+ children: [
3580
+ /* @__PURE__ */ jsxRuntime.jsx(
3581
+ ui.Text.numeral,
3582
+ {
3355
3583
  size: "2xs",
3356
- className: "oui-mr-1"
3357
- }),
3358
- onClick: onMax,
3359
- "data-testid": "oui-testid-orderEntry-maxQty-value-button",
3360
- children: maxLabel
3361
- }
3362
- ),
3363
- /* @__PURE__ */ jsxRuntime.jsx(
3364
- ui.Text.numeral,
3365
- {
3366
- size: "2xs",
3367
- color,
3368
- dp: base_dp,
3369
- padding: false,
3370
- "data-testid": "oui-testid-orderEntry-maxQty-value",
3371
- children: canTrade ? maxQty : 0
3372
- }
3373
- )
3374
- ] })
3375
- ] })
3584
+ color,
3585
+ dp: 2,
3586
+ padding: false,
3587
+ suffix: "%",
3588
+ children: canTrade ? sliderValue : 0
3589
+ }
3590
+ ),
3591
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
3592
+ /* @__PURE__ */ jsxRuntime.jsx(
3593
+ "button",
3594
+ {
3595
+ className: ui.textVariants({
3596
+ size: "2xs",
3597
+ className: "oui-quantitySlider-maxQty-btn oui-mr-1"
3598
+ }),
3599
+ onClick: onMax,
3600
+ "data-testid": "oui-testid-orderEntry-maxQty-value-button",
3601
+ children: maxLabel
3602
+ }
3603
+ ),
3604
+ /* @__PURE__ */ jsxRuntime.jsx(
3605
+ ui.Text.numeral,
3606
+ {
3607
+ size: "2xs",
3608
+ color,
3609
+ dp: base_dp,
3610
+ padding: false,
3611
+ className: "oui-quantitySlider-maxQty-value",
3612
+ "data-testid": "oui-testid-orderEntry-maxQty-value",
3613
+ children: canTrade ? maxQty : 0
3614
+ }
3615
+ )
3616
+ ] })
3617
+ ]
3618
+ }
3619
+ )
3376
3620
  ] });
3377
3621
  });
3378
3622
  QuantitySlider.displayName = "QuantitySlider";
3379
3623
  var ReduceOnlySwitch = ({
3380
3624
  checked,
3381
3625
  onCheckedChange,
3382
- className,
3383
- testId = "oui-testid-orderEntry-reduceOnly-switch"
3626
+ className
3384
3627
  }) => {
3385
3628
  const { t } = i18n.useTranslation();
3386
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, className, children: [
3387
- /* @__PURE__ */ jsxRuntime.jsx(
3388
- ui.Switch,
3389
- {
3390
- "data-testid": testId,
3391
- className: "oui-h-[14px]",
3392
- id: "reduceOnly",
3393
- checked,
3394
- onCheckedChange
3395
- }
3396
- ),
3397
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "reduceOnly", className: "oui-text-xs", children: t("orderEntry.reduceOnly") })
3398
- ] });
3629
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3630
+ ui.Flex,
3631
+ {
3632
+ itemAlign: "center",
3633
+ gapX: 1,
3634
+ className: ui.cn("oui-orderEntry-reduceOnly", className),
3635
+ children: [
3636
+ /* @__PURE__ */ jsxRuntime.jsx(
3637
+ ui.Switch,
3638
+ {
3639
+ "data-testid": "oui-testid-orderEntry-reduceOnly-switch",
3640
+ className: ui.cn("oui-reduceOnly-switch", "oui-h-[14px]"),
3641
+ id: "reduceOnly",
3642
+ checked,
3643
+ onCheckedChange
3644
+ }
3645
+ ),
3646
+ /* @__PURE__ */ jsxRuntime.jsx(
3647
+ "label",
3648
+ {
3649
+ htmlFor: "reduceOnly",
3650
+ className: "oui-reduceOnly-label oui-text-xs",
3651
+ children: t("orderEntry.reduceOnly")
3652
+ }
3653
+ )
3654
+ ]
3655
+ }
3656
+ );
3399
3657
  };
3400
3658
  var PnlInputContext = React2.createContext(
3401
3659
  {}
@@ -3584,14 +3842,18 @@ var PNLInput = (props) => {
3584
3842
  autoComplete: "off",
3585
3843
  onValueChange,
3586
3844
  formatters: [
3845
+ ui.inputFormatter.numberFormatter,
3587
3846
  props.formatter({ dp: quote_dp, mode, type }),
3588
3847
  ui.inputFormatter.currencyFormatter
3589
3848
  // inputFormatter.identifierFormatter(),
3590
3849
  ],
3591
3850
  classNames: {
3592
- root: type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss",
3851
+ root: ui.cn(
3852
+ "oui-orderEntry-pnlInput-container",
3853
+ type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
3854
+ ),
3593
3855
  additional: "oui-text-base-contrast-54",
3594
- input: "oui-text-inherit"
3856
+ input: "oui-orderEntry-pnlInput oui-text-inherit"
3595
3857
  },
3596
3858
  onFocus: () => {
3597
3859
  setPrefix("");
@@ -3627,10 +3889,17 @@ var PNLMenus = (props) => {
3627
3889
  menu: props.modes,
3628
3890
  align: "end",
3629
3891
  size: "xs",
3630
- className: "oui-min-w-[80px]",
3892
+ className: "oui-pnlInput-menu oui-min-w-[80px]",
3631
3893
  onCloseAutoFocus: (event) => event.preventDefault(),
3632
3894
  onSelect: (item) => props.onModeChange(item),
3633
- children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "oui-p-2", "data-testid": props.testId, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, color: "white" }) })
3895
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3896
+ "button",
3897
+ {
3898
+ className: "oui-pnlInput-menuTrigger-btn oui-p-2",
3899
+ "data-testid": props.testId,
3900
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, color: "white" })
3901
+ }
3902
+ )
3634
3903
  }
3635
3904
  );
3636
3905
  };
@@ -3693,47 +3962,56 @@ var OrderTPSL = (props) => {
3693
3962
  return null;
3694
3963
  }
3695
3964
  const isSlPriceWarning = props.errors?.["sl_trigger_price"]?.["type"] === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
3696
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3697
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", children: [
3698
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
3699
- /* @__PURE__ */ jsxRuntime.jsx(
3700
- ui.Switch,
3701
- {
3702
- id: "order_entry_tpsl",
3703
- className: "oui-h-[14px]",
3704
- checked: props.switchState,
3705
- disabled: props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET,
3706
- onCheckedChange: (checked) => {
3707
- props.onSwitchChanged(checked);
3708
- }
3709
- }
3710
- ),
3711
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "order_entry_tpsl", className: "oui-text-xs", children: t("common.tpsl") })
3712
- ] }),
3713
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 2, children: [
3714
- isMobile && props.onReduceOnlyChange && /* @__PURE__ */ jsxRuntime.jsx(
3715
- ReduceOnlySwitch,
3716
- {
3717
- checked: props.reduceOnlyChecked ?? false,
3718
- onCheckedChange: props.onReduceOnlyChange
3719
- }
3720
- ),
3721
- !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
3722
- TPSLAdvancedButton,
3723
- {
3724
- className: ui.cn(
3725
- "oui-group oui-invisible",
3726
- props.switchState && "oui-visible"
3965
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-tpsl", children: [
3966
+ /* @__PURE__ */ jsxRuntime.jsxs(
3967
+ ui.Flex,
3968
+ {
3969
+ itemAlign: "center",
3970
+ justify: "between",
3971
+ className: "oui-orderEntry-tpsl-header",
3972
+ children: [
3973
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
3974
+ /* @__PURE__ */ jsxRuntime.jsx(
3975
+ ui.Switch,
3976
+ {
3977
+ id: "order_entry_tpsl",
3978
+ className: "oui-h-[14px]",
3979
+ checked: props.switchState,
3980
+ disabled: props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET,
3981
+ onCheckedChange: (checked) => {
3982
+ props.onSwitchChanged(checked);
3983
+ }
3984
+ }
3727
3985
  ),
3728
- showTPSLAdvanced: props.showTPSLAdvanced
3729
- }
3730
- )
3731
- ] })
3732
- ] }),
3986
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "order_entry_tpsl", className: "oui-text-xs", children: t("common.tpsl") })
3987
+ ] }),
3988
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 2, children: [
3989
+ isMobile && props.onReduceOnlyChange && /* @__PURE__ */ jsxRuntime.jsx(
3990
+ ReduceOnlySwitch,
3991
+ {
3992
+ checked: props.reduceOnlyChecked ?? false,
3993
+ onCheckedChange: props.onReduceOnlyChange
3994
+ }
3995
+ ),
3996
+ !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
3997
+ TPSLAdvancedButton,
3998
+ {
3999
+ className: ui.cn(
4000
+ "oui-group oui-invisible",
4001
+ props.switchState && "oui-visible"
4002
+ ),
4003
+ showTPSLAdvanced: props.showTPSLAdvanced
4004
+ }
4005
+ )
4006
+ ] })
4007
+ ]
4008
+ }
4009
+ ),
3733
4010
  /* @__PURE__ */ jsxRuntime.jsx(
3734
4011
  "div",
3735
4012
  {
3736
4013
  className: ui.cn(
4014
+ "oui-orderEntry-tpsl-body",
3737
4015
  "oui-max-h-0 oui-overflow-hidden oui-transition-all",
3738
4016
  props.switchState && "oui-max-h-[120px]"
3739
4017
  ),
@@ -3780,7 +4058,7 @@ var TPSLInputForm = React2__default.default.forwardRef((props, ref) => {
3780
4058
  "div",
3781
4059
  {
3782
4060
  ref,
3783
- className: "oui-space-y-1 oui-px-px oui-py-2 oui-transition-all",
4061
+ className: "oui-orderEntry-tpsl-form oui-space-y-1 oui-px-px oui-py-2 oui-transition-all",
3784
4062
  children: [
3785
4063
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", gapX: 2, children: [
3786
4064
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3845,7 +4123,11 @@ var TPSLAdvancedButton = (props) => {
3845
4123
  itemAlign: "center",
3846
4124
  gapX: 1,
3847
4125
  onClick: props.showTPSLAdvanced,
3848
- className: ui.cn("oui-group oui-cursor-pointer", props.className),
4126
+ className: ui.cn(
4127
+ "oui-orderEntry-tpsl-advanced-btn",
4128
+ "oui-group oui-cursor-pointer",
4129
+ props.className
4130
+ ),
3849
4131
  children: [
3850
4132
  /* @__PURE__ */ jsxRuntime.jsx(
3851
4133
  ui.Text,
@@ -3861,7 +4143,7 @@ var TPSLAdvancedButton = (props) => {
3861
4143
  ui.SettingFillIcon,
3862
4144
  {
3863
4145
  size: 12,
3864
- className: "oui-text-base-contrast-54 group-hover:oui-text-base-contrast oui-cursor-pointer",
4146
+ className: "oui-advanced-icon oui-text-base-contrast-54 group-hover:oui-text-base-contrast oui-cursor-pointer",
3865
4147
  opacity: 1,
3866
4148
  onClick: props.showTPSLAdvanced
3867
4149
  }
@@ -3950,7 +4232,11 @@ var TPSLTriggerPriceInput = (props) => {
3950
4232
  value: innerValue,
3951
4233
  classNames: {
3952
4234
  additional: "oui-text-base-contrast-54",
3953
- root: ui.cn("oui-pr-2 md:oui-pr-3", props.classNames?.root),
4235
+ root: ui.cn(
4236
+ "oui-orderEntry-tpsl-triggerPrice",
4237
+ "oui-pr-2 md:oui-pr-3",
4238
+ props.classNames?.root
4239
+ ),
3954
4240
  prefix: ui.cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
3955
4241
  input: ui.cn(
3956
4242
  "oui-text-2xs placeholder:oui-text-2xs",
@@ -4230,7 +4516,7 @@ var OrderEntry = (props) => {
4230
4516
  setHasAdvancedTPSLResult(false);
4231
4517
  }, [props.symbol]);
4232
4518
  const showReduceOnlySection = isMobile && formattedOrder.order_type !== types.OrderType.LIMIT && formattedOrder.order_type !== types.OrderType.MARKET || !isMobile;
4233
- const showSoundSection = Boolean(notification?.orderFilled?.media) && (notification?.orderFilled?.displayInOrderEntry ?? true);
4519
+ const showSoundSection = (Boolean(notification?.orderFilled?.media) || Boolean(notification?.orderFilled?.soundOptions?.length)) && (notification?.orderFilled?.displayInOrderEntry ?? true);
4234
4520
  const additionalInfoProps = {
4235
4521
  pinned,
4236
4522
  setPinned,
@@ -4275,7 +4561,10 @@ var OrderEntry = (props) => {
4275
4561
  /* @__PURE__ */ jsxRuntime.jsxs(
4276
4562
  "div",
4277
4563
  {
4278
- className: "oui-space-y-2 oui-text-base-contrast-54 xl:oui-space-y-3",
4564
+ className: ui.cn(
4565
+ "oui-orderEntry",
4566
+ "oui-space-y-2 oui-text-base-contrast-54 xl:oui-space-y-3"
4567
+ ),
4279
4568
  ref: props.containerRef,
4280
4569
  children: [
4281
4570
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4328,6 +4617,7 @@ var OrderEntry = (props) => {
4328
4617
  id: "order-entry-submit-button",
4329
4618
  "data-type": types.OrderSide.BUY,
4330
4619
  className: ui.cn(
4620
+ "oui-orderEntry-submit-btn",
4331
4621
  side === types.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"
4332
4622
  ),
4333
4623
  onClick: validateSubmit,
@@ -4405,47 +4695,83 @@ var OrderEntry = (props) => {
4405
4695
  }
4406
4696
  }
4407
4697
  ),
4408
- showReduceOnlySection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
4409
- /* @__PURE__ */ jsxRuntime.jsx(
4410
- ReduceOnlySwitch,
4411
- {
4412
- checked: formattedOrder.reduce_only ?? false,
4413
- onCheckedChange: (checked) => {
4414
- setOrderValue("reduce_only", checked);
4415
- }
4416
- }
4417
- ),
4418
- !showSoundSection && extraButton
4419
- ] }),
4420
- showSoundSection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", children: [
4421
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
4422
- /* @__PURE__ */ jsxRuntime.jsx(
4423
- ui.Switch,
4424
- {
4425
- className: "oui-h-[14px]",
4426
- id: soundAlertId,
4427
- checked: soundAlert,
4428
- onCheckedChange: (checked) => setSoundAlert(checked)
4429
- }
4430
- ),
4431
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: soundAlertId, className: "oui-text-xs", children: t("portfolio.setting.soundAlerts") })
4432
- ] }),
4433
- extraButton
4434
- ] }),
4698
+ showReduceOnlySection && /* @__PURE__ */ jsxRuntime.jsxs(
4699
+ ui.Flex,
4700
+ {
4701
+ justify: "between",
4702
+ itemAlign: "center",
4703
+ className: ui.cn("oui-reduceOnly-container", "oui-mt-2"),
4704
+ children: [
4705
+ /* @__PURE__ */ jsxRuntime.jsx(
4706
+ ReduceOnlySwitch,
4707
+ {
4708
+ checked: formattedOrder.reduce_only ?? false,
4709
+ onCheckedChange: (checked) => {
4710
+ setOrderValue("reduce_only", checked);
4711
+ }
4712
+ }
4713
+ ),
4714
+ !showSoundSection && extraButton
4715
+ ]
4716
+ }
4717
+ ),
4718
+ showSoundSection && /* @__PURE__ */ jsxRuntime.jsxs(
4719
+ ui.Flex,
4720
+ {
4721
+ justify: "between",
4722
+ itemAlign: "center",
4723
+ className: "oui-soundAlert-container",
4724
+ children: [
4725
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
4726
+ /* @__PURE__ */ jsxRuntime.jsx(
4727
+ ui.Switch,
4728
+ {
4729
+ className: ui.cn("oui-soundAlert-switch", "oui-h-[14px]"),
4730
+ id: soundAlertId,
4731
+ checked: soundAlert,
4732
+ onCheckedChange: (checked) => setSoundAlert(checked)
4733
+ }
4734
+ ),
4735
+ /* @__PURE__ */ jsxRuntime.jsx(
4736
+ "label",
4737
+ {
4738
+ htmlFor: soundAlertId,
4739
+ className: ui.cn("oui-soundAlert-label", "oui-text-xs"),
4740
+ children: t("portfolio.setting.soundAlerts")
4741
+ }
4742
+ )
4743
+ ] }),
4744
+ extraButton
4745
+ ]
4746
+ }
4747
+ ),
4435
4748
  !showSoundSection && isMobile && (formattedOrder.order_type == types.OrderType.LIMIT || formattedOrder.order_type == types.OrderType.MARKET) && !formattedOrder.reduce_only && !pinned && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "oui-w-full", justify: "end", children: extraButton }),
4436
- pinned && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { p: 2, r: "md", intensity: 700, position: "relative", children: [
4437
- /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...additionalInfoProps }),
4438
- /* @__PURE__ */ jsxRuntime.jsx(
4439
- PinButton,
4440
- {
4441
- onClick: () => {
4442
- setPinned(false);
4443
- },
4444
- className: "oui-group oui-absolute oui-right-2 oui-top-2",
4445
- "data-testid": "oui-testid-orderEntry-pinned-button"
4446
- }
4447
- )
4448
- ] })
4749
+ pinned && /* @__PURE__ */ jsxRuntime.jsxs(
4750
+ ui.Box,
4751
+ {
4752
+ p: 2,
4753
+ r: "md",
4754
+ intensity: 700,
4755
+ position: "relative",
4756
+ className: "oui-additional-container",
4757
+ children: [
4758
+ /* @__PURE__ */ jsxRuntime.jsx(AdditionalInfo, { ...additionalInfoProps }),
4759
+ /* @__PURE__ */ jsxRuntime.jsx(
4760
+ PinButton,
4761
+ {
4762
+ onClick: () => {
4763
+ setPinned(false);
4764
+ },
4765
+ className: ui.cn(
4766
+ "oui-additional-pin-btn",
4767
+ "oui-group oui-absolute oui-right-2 oui-top-2"
4768
+ ),
4769
+ "data-testid": "oui-testid-orderEntry-pinned-button"
4770
+ }
4771
+ )
4772
+ ]
4773
+ }
4774
+ )
4449
4775
  ]
4450
4776
  }
4451
4777
  ),
@@ -4455,9 +4781,13 @@ var OrderEntry = (props) => {
4455
4781
  open: showTPSLAdvanced,
4456
4782
  onOpenChange: setShowTPSLAdvanced,
4457
4783
  classNames: {
4458
- body: "oui-h-full oui-pb-0 oui-border-none",
4459
- overlay: "!oui-bg-base-10/60",
4784
+ body: ui.cn(
4785
+ "oui-tpslAdvanced-body",
4786
+ "oui-h-full oui-pb-0 oui-border-none"
4787
+ ),
4788
+ overlay: ui.cn("oui-tpslAdvanced-overlay", "!oui-bg-base-10/60"),
4460
4789
  content: ui.cn(
4790
+ "oui-tpslAdvanced-sheet",
4461
4791
  "oui-rounded-[16px] oui-border-none !oui-p-0",
4462
4792
  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]"
4463
4793
  )
@@ -4618,6 +4948,8 @@ function usePriceInputContainer({
4618
4948
 
4619
4949
  // src/orderEntry.script.ts
4620
4950
  var ORDERLY_ORDER_SOUND_ALERT_KEY = "orderly_order_sound_alert";
4951
+ var ORDERLY_ORDER_SOUND_OPTION_KEY = "orderly_order_sound_option";
4952
+ var ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS = 3 * 1e3;
4621
4953
  var useOrderEntryScript = (inputs) => {
4622
4954
  const { symbol } = inputs;
4623
4955
  const [localOrderType, setLocalOrderType] = hooks.useLocalStorage(
@@ -4629,9 +4961,15 @@ var useOrderEntryScript = (inputs) => {
4629
4961
  types.OrderSide.BUY
4630
4962
  );
4631
4963
  const { notification } = hooks.useOrderlyContext();
4964
+ const orderFilledConfig = notification?.orderFilled;
4965
+ const defaultSoundValue = orderFilledConfig?.defaultSoundValue ?? orderFilledConfig?.soundOptions?.[0]?.value;
4632
4966
  const [soundAlert, setSoundAlert] = hooks.useLocalStorage(
4633
4967
  ORDERLY_ORDER_SOUND_ALERT_KEY,
4634
- notification?.orderFilled?.defaultOpen ?? false
4968
+ orderFilledConfig?.defaultOpen ?? false
4969
+ );
4970
+ const [initialSoundValue] = hooks.useLocalStorage(
4971
+ ORDERLY_ORDER_SOUND_OPTION_KEY,
4972
+ defaultSoundValue ?? null
4635
4973
  );
4636
4974
  const canTrade = reactApp.useCanTrade();
4637
4975
  const {
@@ -4657,6 +4995,7 @@ var useOrderEntryScript = (inputs) => {
4657
4995
  const triggerPriceInputRef = React2.useRef(null);
4658
4996
  const priceInputRef = React2.useRef(null);
4659
4997
  const activatedPriceInputRef = React2.useRef(null);
4998
+ const lastUserActiveTimeRef = React2.useRef(Date.now());
4660
4999
  const { bboStatus, bboType, setBBOType, onBBOChange, toggleBBO } = useBBOState({
4661
5000
  tpslSwitch,
4662
5001
  order_type: formattedOrder.order_type,
@@ -4853,6 +5192,23 @@ var useOrderEntryScript = (inputs) => {
4853
5192
  setOrderValue("reduce_only", false);
4854
5193
  }
4855
5194
  }, [tpslSwitch]);
5195
+ React2.useEffect(() => {
5196
+ lastUserActiveTimeRef.current = Date.now();
5197
+ }, [
5198
+ formattedOrder.order_price,
5199
+ formattedOrder.order_quantity,
5200
+ formattedOrder.side
5201
+ ]);
5202
+ React2.useEffect(() => {
5203
+ const lastActive = lastUserActiveTimeRef.current;
5204
+ const now = Date.now();
5205
+ const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
5206
+ ee.emit(types.ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, {
5207
+ symbol,
5208
+ estLiqPrice: state.estLiqPrice ?? null,
5209
+ isUserActive
5210
+ });
5211
+ }, [ee, symbol, state.estLiqPrice]);
4856
5212
  return {
4857
5213
  ...state,
4858
5214
  slPriceError: slPriceError ?? void 0,