@orderly.network/trading 2.10.1 → 2.10.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +639 -228
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +639 -228
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +21 -21
package/dist/index.js CHANGED
@@ -291,24 +291,25 @@ var init_setting_ui = __esm({
291
291
  size: "xs",
292
292
  type: "button",
293
293
  variant: "contained",
294
- className: "oui-bg-transparent hover:oui-bg-transparent",
294
+ className: "oui-preference-trigger-btn oui-bg-transparent hover:oui-bg-transparent",
295
295
  children: /* @__PURE__ */ jsxRuntime.jsx(
296
296
  ui.SettingFillIcon,
297
297
  {
298
298
  size: 16,
299
299
  color: "white",
300
300
  opacity: 1,
301
- className: "oui-text-white/[.36] hover:oui-text-white/80"
301
+ className: "oui-text-base-contrast-36 hover:oui-text-base-contrast-80"
302
302
  }
303
303
  )
304
304
  }
305
305
  );
306
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 0, children: [
306
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-preference", gap: 0, children: [
307
307
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
308
308
  /* @__PURE__ */ jsxRuntime.jsx(
309
309
  ui.Checkbox,
310
310
  {
311
311
  id: "oui-checkbox-hideOtherSymbols",
312
+ className: "oui-checkbox-hideOtherSymbols",
312
313
  color: "white",
313
314
  checked: props.hideOtherSymbols,
314
315
  onCheckedChange: (checked) => {
@@ -418,13 +419,13 @@ var init_setting_ui = __esm({
418
419
  gap: 1,
419
420
  className: "oui-cursor-pointer",
420
421
  children: [
421
- sel ? /* @__PURE__ */ jsxRuntime.jsx(SelIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UnselIcon, {}),
422
+ sel ? /* @__PURE__ */ jsxRuntime.jsx(SelIcon, { className: "oui-fill-base-contrast" }) : /* @__PURE__ */ jsxRuntime.jsx(UnselIcon, { className: "oui-fill-base-contrast-54" }),
422
423
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: sel ? 98 : 54, children: label })
423
424
  ]
424
425
  }
425
426
  );
426
427
  };
427
- SelIcon = () => {
428
+ SelIcon = (props) => {
428
429
  return /* @__PURE__ */ jsxRuntime.jsxs(
429
430
  "svg",
430
431
  {
@@ -433,38 +434,25 @@ var init_setting_ui = __esm({
433
434
  viewBox: "0 0 16 16",
434
435
  fill: "currentColor",
435
436
  xmlns: "http://www.w3.org/2000/svg",
436
- className: "oui-fill-white",
437
+ className: props.className,
437
438
  children: [
438
- /* @__PURE__ */ jsxRuntime.jsx(
439
- "path",
440
- {
441
- d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
442
- fill: "#fff",
443
- fillOpacity: ".36"
444
- }
445
- ),
439
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" }),
446
440
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3.333" })
447
441
  ]
448
442
  }
449
443
  );
450
444
  };
451
- UnselIcon = () => {
445
+ UnselIcon = (props) => {
452
446
  return /* @__PURE__ */ jsxRuntime.jsx(
453
447
  "svg",
454
448
  {
455
449
  width: "16",
456
450
  height: "16",
457
451
  viewBox: "0 0 16 16",
458
- fill: "none",
452
+ fill: "currentColor",
459
453
  xmlns: "http://www.w3.org/2000/svg",
460
- children: /* @__PURE__ */ jsxRuntime.jsx(
461
- "path",
462
- {
463
- d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
464
- fill: "#fff",
465
- fillOpacity: ".54"
466
- }
467
- )
454
+ className: props.className,
455
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" })
468
456
  }
469
457
  );
470
458
  };
@@ -520,12 +508,12 @@ var init_positionHeader_ui = __esm({
520
508
  return /* @__PURE__ */ jsxRuntime.jsxs(
521
509
  ui.Flex,
522
510
  {
511
+ className: "oui-positionHeader oui-rounded-b-xl oui-bg-base-9",
523
512
  direction: "column",
524
513
  gap: 2,
525
514
  width: "100%",
526
515
  itemAlign: "start",
527
516
  p: 2,
528
- className: "oui-rounded-b-xl oui-bg-base-9",
529
517
  children: [
530
518
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", gap: 2, children: [
531
519
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -579,25 +567,36 @@ var init_positionHeader_ui = __esm({
579
567
  );
580
568
  };
581
569
  DesktopLayout = (props) => {
582
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { py: 2, px: 3, gap: 6, width: "100%", justify: "between", children: [
583
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 5, children: [
584
- /* @__PURE__ */ jsxRuntime.jsx(
585
- UnrealPnL,
586
- {
587
- ...props,
588
- classNames: { label: "oui-text-base-contrast-54" }
589
- }
590
- ),
591
- /* @__PURE__ */ jsxRuntime.jsx(
592
- Notional,
593
- {
594
- ...props,
595
- classNames: { label: "oui-text-base-contrast-54" }
596
- }
597
- )
598
- ] }),
599
- /* @__PURE__ */ jsxRuntime.jsx(uiPositions.CloseAllPositionsWidget, { symbol: props.symbol })
600
- ] });
570
+ return /* @__PURE__ */ jsxRuntime.jsxs(
571
+ ui.Flex,
572
+ {
573
+ className: "oui-positionHeader",
574
+ py: 2,
575
+ px: 3,
576
+ gap: 6,
577
+ width: "100%",
578
+ justify: "between",
579
+ children: [
580
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 5, children: [
581
+ /* @__PURE__ */ jsxRuntime.jsx(
582
+ UnrealPnL,
583
+ {
584
+ ...props,
585
+ classNames: { label: "oui-text-base-contrast-54" }
586
+ }
587
+ ),
588
+ /* @__PURE__ */ jsxRuntime.jsx(
589
+ Notional,
590
+ {
591
+ ...props,
592
+ classNames: { label: "oui-text-base-contrast-54" }
593
+ }
594
+ )
595
+ ] }),
596
+ /* @__PURE__ */ jsxRuntime.jsx(uiPositions.CloseAllPositionsWidget, { symbol: props.symbol })
597
+ ]
598
+ }
599
+ );
601
600
  };
602
601
  UnrealPnL = (props) => {
603
602
  const { t } = i18n.useTranslation();
@@ -898,6 +897,7 @@ var init_dataList_ui = __esm({
898
897
  return /* @__PURE__ */ jsxRuntime.jsx(
899
898
  ui.Tabs,
900
899
  {
900
+ className: "oui-trading-dataList-tabs oui-h-full",
901
901
  defaultValue: current || "Positions" /* positions */,
902
902
  variant: "contained",
903
903
  trailing: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -912,7 +912,6 @@ var init_dataList_ui = __esm({
912
912
  }
913
913
  ) }),
914
914
  size: "lg",
915
- className: "oui-h-full",
916
915
  classNames: {
917
916
  trigger: "oui-group",
918
917
  tabsContent: "oui-h-[calc(100%_-_32px)]"
@@ -958,6 +957,7 @@ var init_lastTrades_ui = __esm({
958
957
  ui.Box,
959
958
  {
960
959
  className: ui.cn(
960
+ "oui-lastTrades",
961
961
  "oui-grid oui-grid-rows=[auto,1fr] oui-h-full oui-w-full",
962
962
  props.classNames?.root
963
963
  ),
@@ -1132,7 +1132,7 @@ function FaucetUi(props) {
1132
1132
  size: "md",
1133
1133
  onClick: props.getFaucet,
1134
1134
  loading: props.loading,
1135
- className: "oui-text-primary-light oui-border-primary-light oui-rounded",
1135
+ className: "oui-faucet-btn oui-rounded oui-border-primary-light oui-text-primary-light",
1136
1136
  "data-testid": "oui-testid-assetView-getFaucet-button",
1137
1137
  children: t("trading.faucet.getTestUSDC")
1138
1138
  }
@@ -1276,7 +1276,7 @@ var init_assetView_ui = __esm({
1276
1276
  const { description, formula } = props;
1277
1277
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[240px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
1278
1278
  typeof description !== "undefined" && description !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: description }),
1279
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-border-white/10", my: 2 }),
1279
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { color: "oui-border-line-10", my: 2 }),
1280
1280
  typeof formula !== "undefined" && formula !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formula })
1281
1281
  ] });
1282
1282
  };
@@ -1306,7 +1306,14 @@ var init_assetView_ui = __esm({
1306
1306
  ),
1307
1307
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
1308
1308
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "neutral", weight: "semibold", children: `${t("trading.asset.myAssets")} (USDC)` }),
1309
- /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onToggleVisibility, children: visible ? /* @__PURE__ */ jsxRuntime.jsx(ui.EyeIcon, { size: 18, className: "oui-text-base-contrast-54" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.EyeCloseIcon, { size: 18, className: "oui-text-base-contrast-54" }) })
1309
+ /* @__PURE__ */ jsxRuntime.jsx(
1310
+ "button",
1311
+ {
1312
+ className: "oui-assetView-toggle-visibility-btn",
1313
+ onClick: onToggleVisibility,
1314
+ children: visible ? /* @__PURE__ */ jsxRuntime.jsx(ui.EyeIcon, { size: 18, className: "oui-text-base-contrast-54" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.EyeCloseIcon, { size: 18, className: "oui-text-base-contrast-54" })
1315
+ }
1316
+ )
1310
1317
  ] })
1311
1318
  ]
1312
1319
  }
@@ -1540,6 +1547,7 @@ var init_assetView_ui = __esm({
1540
1547
  const transferButton = hasSubAccount && /* @__PURE__ */ jsxRuntime.jsx(
1541
1548
  ui.Button,
1542
1549
  {
1550
+ className: "oui-assetView-transfer-btn",
1543
1551
  fullWidth: true,
1544
1552
  color: "secondary",
1545
1553
  size: "md",
@@ -1551,6 +1559,7 @@ var init_assetView_ui = __esm({
1551
1559
  const depositButton = isMainAccount && /* @__PURE__ */ jsxRuntime.jsxs(
1552
1560
  ui.Button,
1553
1561
  {
1562
+ className: "oui-assetView-deposit-btn",
1554
1563
  "data-testid": "oui-testid-assetView-deposit-button",
1555
1564
  fullWidth: true,
1556
1565
  size: "md",
@@ -1564,6 +1573,7 @@ var init_assetView_ui = __esm({
1564
1573
  const withdrawButton = isMainAccount && /* @__PURE__ */ jsxRuntime.jsxs(
1565
1574
  ui.Button,
1566
1575
  {
1576
+ className: "oui-assetView-withdraw-btn",
1567
1577
  fullWidth: true,
1568
1578
  color: "secondary",
1569
1579
  size: "md",
@@ -1582,7 +1592,7 @@ var init_assetView_ui = __esm({
1582
1592
  ]
1583
1593
  }
1584
1594
  );
1585
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-relative", children: [
1595
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-assetView oui-relative", children: [
1586
1596
  title && description && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, className: "oui-mb-[32px]", children: [
1587
1597
  /* @__PURE__ */ jsxRuntime.jsx(
1588
1598
  ui.Text,
@@ -1618,6 +1628,7 @@ var init_assetView_ui = __esm({
1618
1628
  /* @__PURE__ */ jsxRuntime.jsxs(
1619
1629
  ui.Button,
1620
1630
  {
1631
+ className: "oui-assetView-deposit-btn",
1621
1632
  "data-testid": "oui-testid-assetView-deposit-button",
1622
1633
  fullWidth: true,
1623
1634
  size: "md",
@@ -1681,7 +1692,7 @@ var init_assetView_ui = __esm({
1681
1692
  "oui-pointer-events-none oui-rounded-2xl oui-blur-[200px]"
1682
1693
  ),
1683
1694
  style: {
1684
- background: "conic-gradient(from -40.91deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg)"
1695
+ background: "conic-gradient(from -40.91deg at 40.63% 50.41%, rgba(var(--oui-color-base-foreground)/0) -48.92deg, rgba(var(--oui-color-base-foreground)/0) 125.18deg, rgb(var(--oui-color-primary)) 193.41deg, rgb(var(--oui-color-warning)) 216.02deg, rgb(var(--oui-color-link)) 236.07deg, rgb(var(--oui-color-primary-light)) 259.95deg, rgba(var(--oui-color-base-foreground)/0) 311.08deg, rgba(var(--oui-color-base-foreground)/0) 485.18deg)"
1685
1696
  }
1686
1697
  }
1687
1698
  )
@@ -1992,7 +2003,7 @@ var init_cell_desktop = __esm({
1992
2003
  style: { top: `${cellHeight / 2 - 2}px` }
1993
2004
  }
1994
2005
  ),
1995
- props.isHover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-inset-0 oui-bg-white oui-opacity-[.12]" }),
2006
+ props.isHover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-inset-0 oui-bg-base-contrast-12" }),
1996
2007
  currentHover && /* @__PURE__ */ jsxRuntime.jsx(
1997
2008
  "div",
1998
2009
  {
@@ -2073,7 +2084,7 @@ var init_listBox_desktop = __esm({
2073
2084
  return data.reduce((a, b) => Math.max(a, b[1]), 0);
2074
2085
  }, [data]);
2075
2086
  const [hoverIndex, setHoverIndex] = React12.useState(-1);
2076
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-order-book-list oui-flex oui-flex-col oui-gap-px", children: data.map((item, index) => {
2087
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-order-book-list oui-orderBook-list oui-flex oui-flex-col oui-gap-px", children: data.map((item, index) => {
2077
2088
  return /* @__PURE__ */ jsxRuntime.jsx(
2078
2089
  Tip,
2079
2090
  {
@@ -2414,7 +2425,7 @@ var init_header_desktop = __esm({
2414
2425
  Title,
2415
2426
  {
2416
2427
  id: "oui-order-book-header-price",
2417
- className: "oui-text-base-contrast-36",
2428
+ className: "oui-orderBook-header-price oui-text-base-contrast-36",
2418
2429
  children: `${t("common.price")}(${quote})`
2419
2430
  }
2420
2431
  ) }),
@@ -2423,7 +2434,7 @@ var init_header_desktop = __esm({
2423
2434
  {
2424
2435
  justifyEnd: true,
2425
2436
  id: "oui-order-book-header-qty",
2426
- className: "oui-text-base-contrast-36",
2437
+ className: "oui-orderBook-header-qty oui-text-base-contrast-36",
2427
2438
  children: `${t("common.qty")}(${optimizedBase})`
2428
2439
  }
2429
2440
  ) })
@@ -2437,8 +2448,24 @@ var init_header_desktop = __esm({
2437
2448
  pr: 3,
2438
2449
  className: ui.cn("oui-basis-5/12", showTotal && "oui-basis-1/2"),
2439
2450
  children: showTotal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2440
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Title, { id: "oui-order-book-header-total-quote", justifyEnd: true, children: `${t("common.total")}(${optimizedBase})` }) }),
2441
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Title, { justifyEnd: true, id: "oui-order-book-header-total-base", children: `${t("common.total")}(${quote})` }) })
2451
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
2452
+ Title,
2453
+ {
2454
+ id: "oui-order-book-header-total-quote",
2455
+ className: "oui-orderBook-header-total-quote",
2456
+ justifyEnd: true,
2457
+ children: `${t("common.total")}(${optimizedBase})`
2458
+ }
2459
+ ) }),
2460
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
2461
+ Title,
2462
+ {
2463
+ id: "oui-order-book-header-total-base",
2464
+ className: "oui-orderBook-header-total-base",
2465
+ justifyEnd: true,
2466
+ children: `${t("common.total")}(${quote})`
2467
+ }
2468
+ ) })
2442
2469
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
2443
2470
  ui.Popover,
2444
2471
  {
@@ -2471,7 +2498,15 @@ var init_header_desktop = __esm({
2471
2498
  itemAlign: "center",
2472
2499
  className: "oui-cursor-pointer oui-select-none oui-text-base-contrast-36 oui-transition-all hover:oui-text-base-contrast",
2473
2500
  children: [
2474
- /* @__PURE__ */ jsxRuntime.jsx(Title, { justifyEnd: true, id: "oui-order-book-header-total-base", children: `${t("common.total")}(${optimizedCoinType})` }),
2501
+ /* @__PURE__ */ jsxRuntime.jsx(
2502
+ Title,
2503
+ {
2504
+ id: "oui-order-book-header-total-base",
2505
+ className: "oui-orderBook-header-total-base",
2506
+ justifyEnd: true,
2507
+ children: `${t("common.total")}(${optimizedCoinType})`
2508
+ }
2509
+ ),
2475
2510
  /* @__PURE__ */ jsxRuntime.jsx(
2476
2511
  TriggerIcon,
2477
2512
  {
@@ -2862,6 +2897,7 @@ var init_index_desktop = __esm({
2862
2897
  id: "oui-orderbook-desktop",
2863
2898
  ref: divRef,
2864
2899
  className: ui.cn(
2900
+ "oui-orderBook",
2865
2901
  "oui-relative oui-size-full",
2866
2902
  showBuySellRatio ? "oui-grid-rows-[auto,auto,1fr,auto,1fr,auto]" : "oui-grid-rows-[auto,auto,1fr,auto,1fr]"
2867
2903
  ),
@@ -3231,7 +3267,7 @@ var init_listBox = __esm({
3231
3267
  ListBox = (props) => {
3232
3268
  const { data } = props;
3233
3269
  const { mode } = useOrderBookContext();
3234
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
3270
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-orderBook-list oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
3235
3271
  return /* @__PURE__ */ jsxRuntime.jsx(
3236
3272
  OrderBookCell,
3237
3273
  {
@@ -3301,19 +3337,26 @@ var init_depthSelect = __esm({
3301
3337
  label: `${d}`
3302
3338
  }));
3303
3339
  }, [props.depth]);
3304
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-order-book-depth", className: "oui-w-full oui-pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
3305
- ui.Picker,
3340
+ return /* @__PURE__ */ jsxRuntime.jsx(
3341
+ ui.Box,
3306
3342
  {
3307
- options,
3308
- fullWidth: true,
3309
- size: "sm",
3310
- value: props.value,
3311
- className: "oui-text-2xs oui-text-base-contrast-54",
3312
- onValueChange: (value) => {
3313
- props.onChange?.(value);
3314
- }
3343
+ id: "oui-order-book-depth",
3344
+ className: "oui-orderBook-depth oui-w-full oui-pt-2",
3345
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3346
+ ui.Picker,
3347
+ {
3348
+ options,
3349
+ fullWidth: true,
3350
+ size: "sm",
3351
+ value: props.value,
3352
+ className: "oui-text-2xs oui-text-base-contrast-54",
3353
+ onValueChange: (value) => {
3354
+ props.onChange?.(value);
3355
+ }
3356
+ }
3357
+ )
3315
3358
  }
3316
- ) });
3359
+ );
3317
3360
  };
3318
3361
  }
3319
3362
  });
@@ -3360,6 +3403,7 @@ var init_header = __esm({
3360
3403
  direction: "column",
3361
3404
  itemAlign: "start",
3362
3405
  id: "oui-order-book-header-price",
3406
+ className: "oui-orderBook-header-price",
3363
3407
  children: [
3364
3408
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.price") }),
3365
3409
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: `(${quote})` })
@@ -3407,7 +3451,7 @@ var init_markPrice2 = __esm({
3407
3451
  ui.Flex,
3408
3452
  {
3409
3453
  id: "oui-order-book-mark-price",
3410
- className: "oui-py-[6px]",
3454
+ className: "oui-orderBook-markPrice oui-py-[6px]",
3411
3455
  width: "100%",
3412
3456
  justify: "between",
3413
3457
  children: [
@@ -3484,7 +3528,10 @@ var init_orderBook = __esm({
3484
3528
  direction: "column",
3485
3529
  p: 2,
3486
3530
  id: "oui-orderbook-mobile",
3487
- className: ui.cn("oui-relative oui-size-full", props.className),
3531
+ className: ui.cn(
3532
+ "oui-orderBook oui-relative oui-size-full",
3533
+ props.className
3534
+ ),
3488
3535
  justify: "start",
3489
3536
  itemAlign: "start",
3490
3537
  children: [
@@ -3532,52 +3579,60 @@ var init_orderBook_ui = __esm({
3532
3579
  init_index_desktop();
3533
3580
  init_orderBook();
3534
3581
  exports.OrderBook = (props) => {
3535
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-font-semibold", width: "100%", height: "100%", children: props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
3536
- OrderBook,
3537
- {
3538
- level: props.level,
3539
- asks: props.asks,
3540
- bids: props.bids,
3541
- markPrice: props.markPrice,
3542
- lastPrice: props.lastPrice,
3543
- depths: props.depths,
3544
- activeDepth: props.selDepth,
3545
- base: props.base,
3546
- quote: props.quote,
3547
- isLoading: props.isLoading,
3548
- onItemClick: props.onItemClick,
3549
- cellHeight: props.cellHeight,
3550
- onDepthChange: props.onDepthChange,
3551
- className: props.className,
3552
- symbolInfo: props.symbolInfo,
3553
- showBuySellRatio: props.showBuySellRatio,
3554
- setShowBuySellRatio: props.setShowBuySellRatio,
3555
- buySellRatio: props.buySellRatio
3556
- }
3557
- ) : /* @__PURE__ */ jsxRuntime.jsx(
3558
- DesktopOrderBook,
3582
+ return /* @__PURE__ */ jsxRuntime.jsx(
3583
+ ui.Box,
3559
3584
  {
3560
- level: props.level,
3561
- asks: props.asks,
3562
- bids: props.bids,
3563
- markPrice: props.markPrice,
3564
- lastPrice: props.lastPrice,
3565
- depths: props.depths,
3566
- activeDepth: props.selDepth,
3567
- base: props.base,
3568
- quote: props.quote,
3569
- isLoading: props.isLoading,
3570
- onItemClick: props.onItemClick,
3571
- cellHeight: props.cellHeight,
3572
- onDepthChange: props.onDepthChange,
3573
- className: props.className,
3574
- pendingOrders: props.pendingOrders,
3575
- symbolInfo: props.symbolInfo,
3576
- showBuySellRatio: props.showBuySellRatio,
3577
- setShowBuySellRatio: props.setShowBuySellRatio,
3578
- buySellRatio: props.buySellRatio
3585
+ className: "oui-orderBook oui-font-semibold",
3586
+ width: "100%",
3587
+ height: "100%",
3588
+ children: props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
3589
+ OrderBook,
3590
+ {
3591
+ level: props.level,
3592
+ asks: props.asks,
3593
+ bids: props.bids,
3594
+ markPrice: props.markPrice,
3595
+ lastPrice: props.lastPrice,
3596
+ depths: props.depths,
3597
+ activeDepth: props.selDepth,
3598
+ base: props.base,
3599
+ quote: props.quote,
3600
+ isLoading: props.isLoading,
3601
+ onItemClick: props.onItemClick,
3602
+ cellHeight: props.cellHeight,
3603
+ onDepthChange: props.onDepthChange,
3604
+ className: props.className,
3605
+ symbolInfo: props.symbolInfo,
3606
+ showBuySellRatio: props.showBuySellRatio,
3607
+ setShowBuySellRatio: props.setShowBuySellRatio,
3608
+ buySellRatio: props.buySellRatio
3609
+ }
3610
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
3611
+ DesktopOrderBook,
3612
+ {
3613
+ level: props.level,
3614
+ asks: props.asks,
3615
+ bids: props.bids,
3616
+ markPrice: props.markPrice,
3617
+ lastPrice: props.lastPrice,
3618
+ depths: props.depths,
3619
+ activeDepth: props.selDepth,
3620
+ base: props.base,
3621
+ quote: props.quote,
3622
+ isLoading: props.isLoading,
3623
+ onItemClick: props.onItemClick,
3624
+ cellHeight: props.cellHeight,
3625
+ onDepthChange: props.onDepthChange,
3626
+ className: props.className,
3627
+ pendingOrders: props.pendingOrders,
3628
+ symbolInfo: props.symbolInfo,
3629
+ showBuySellRatio: props.showBuySellRatio,
3630
+ setShowBuySellRatio: props.setShowBuySellRatio,
3631
+ buySellRatio: props.buySellRatio
3632
+ }
3633
+ )
3579
3634
  }
3580
- ) });
3635
+ );
3581
3636
  };
3582
3637
  }
3583
3638
  });
@@ -3762,9 +3817,9 @@ var init_buySellRatioBar = __esm({
3762
3817
  height: "4px",
3763
3818
  position: "relative",
3764
3819
  borderRadius: "2px",
3765
- overflow: "hidden",
3766
- backgroundColor: "rgb(var(--oui-line-4))"
3820
+ overflow: "hidden"
3767
3821
  },
3822
+ className: "oui-bg-line-4",
3768
3823
  children: [
3769
3824
  /* @__PURE__ */ jsxRuntime.jsx(
3770
3825
  "div",
@@ -3833,8 +3888,8 @@ var init_riskRate_ui = __esm({
3833
3888
  const { wrongNetwork } = reactApp.useAppContext();
3834
3889
  const { t } = i18n.useTranslation();
3835
3890
  const textColor = wrongNetwork ? "" : isHigh ? "oui-text-danger" : isMedium ? "oui-text-warning-darken" : isLow ? ui.gradientTextVariants({ color: "brand" }) : "";
3836
- const boxClsName = wrongNetwork ? "oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe] oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full" : isHigh ? "oui-bg-gradient-to-tr oui-from-[#791438] oui-to-[#ff447c] oui-h-1.5 oui-rounded-full" : isMedium ? "oui-bg-gradient-to-tr oui-from-[#792e00] oui-to-[#ffb65d] oui-h-1.5 oui-rounded-full" : isLow ? "oui-bg-gradient-to-tr oui-from-[#59b0fe] oui-to-[#26fefe] oui-h-1.5 oui-rounded-full" : "oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe] oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full";
3837
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { "data-risk": "", className: "oui-space-y-2", children: [
3891
+ const boxClsName = wrongNetwork ? "oui-bg-gradient-to-r oui-opacity-20 oui-from-[rgb(var(--oui-gradient-brand-start))] oui-via-[rgb(var(--oui-color-warning-darken))] oui-to-[rgb(var(--oui-color-danger-darken))] oui-h-1.5 oui-rounded-full" : isHigh ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-danger-end))] oui-to-[rgb(var(--oui-gradient-danger-start))] oui-h-1.5 oui-rounded-full" : isMedium ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-warning-end))] oui-to-[rgb(var(--oui-gradient-warning-start))] oui-h-1.5 oui-rounded-full" : isLow ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-brand-end))] oui-to-[rgb(var(--oui-gradient-brand-start))] oui-h-1.5 oui-rounded-full" : "oui-bg-gradient-to-r oui-opacity-20 oui-from-[rgb(var(--oui-gradient-brand-start))] oui-via-[rgb(var(--oui-color-warning-darken))] oui-to-[rgb(var(--oui-color-danger-darken))] oui-h-1.5 oui-rounded-full";
3892
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-riskRate oui-space-y-2", "data-risk": "", children: [
3838
3893
  /* @__PURE__ */ jsxRuntime.jsx(
3839
3894
  ui.Flex,
3840
3895
  {
@@ -4115,7 +4170,14 @@ var init_orderBookAndTrades_ui = __esm({
4115
4170
  };
4116
4171
  exports.OrderBookAndTrades = (props) => {
4117
4172
  const { containerRef, containerSize } = props;
4118
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "oui-h-full", children: (containerSize?.width ?? 0) >= 572 ? /* @__PURE__ */ jsxRuntime.jsx(TwoColLayout, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(TabLayout, { ...props }) });
4173
+ return /* @__PURE__ */ jsxRuntime.jsx(
4174
+ "div",
4175
+ {
4176
+ ref: containerRef,
4177
+ className: "oui-trading-orderBookAndTrades oui-h-full",
4178
+ children: (containerSize?.width ?? 0) >= 572 ? /* @__PURE__ */ jsxRuntime.jsx(TwoColLayout, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(TabLayout, { ...props })
4179
+ }
4180
+ );
4119
4181
  };
4120
4182
  }
4121
4183
  });
@@ -4205,6 +4267,7 @@ var init_switchLayout = __esm({
4205
4267
  {
4206
4268
  px: 3,
4207
4269
  className: ui.cn(
4270
+ "oui-switchLayout",
4208
4271
  "oui-rounded-md",
4209
4272
  "oui-h-[28px]",
4210
4273
  "oui-cursor-pointer oui-transition-all",
@@ -4406,9 +4469,27 @@ var init_switchLayout = __esm({
4406
4469
  fill: "none",
4407
4470
  xmlns: "http://www.w3.org/2000/svg",
4408
4471
  children: [
4409
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "17", rx: "2", fill: "#181C23" }),
4410
- /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "19", width: "36", height: "54", rx: "2", fill: "#181C23" }),
4411
- /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "75", width: "36", height: "9", rx: "2", fill: "#181C23" }),
4472
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "17", rx: "2", fill: "rgb(var(--oui-color-base-7))" }),
4473
+ /* @__PURE__ */ jsxRuntime.jsx(
4474
+ "rect",
4475
+ {
4476
+ y: "19",
4477
+ width: "36",
4478
+ height: "54",
4479
+ rx: "2",
4480
+ fill: "rgb(var(--oui-color-base-7))"
4481
+ }
4482
+ ),
4483
+ /* @__PURE__ */ jsxRuntime.jsx(
4484
+ "rect",
4485
+ {
4486
+ y: "75",
4487
+ width: "36",
4488
+ height: "9",
4489
+ rx: "2",
4490
+ fill: "rgb(var(--oui-color-base-7))"
4491
+ }
4492
+ ),
4412
4493
  /* @__PURE__ */ jsxRuntime.jsx(
4413
4494
  "rect",
4414
4495
  {
@@ -4420,11 +4501,61 @@ var init_switchLayout = __esm({
4420
4501
  fill: "url(#paint0_linear_17647_26849)"
4421
4502
  }
4422
4503
  ),
4423
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "22", width: "14", height: "6", rx: "2", fill: "#008676" }),
4424
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "19", y: "22", width: "14", height: "6", rx: "2", fill: "#D92D6B" }),
4425
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "14", height: "3", rx: "1.5", fill: "#333948" }),
4426
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "19", y: "11", width: "14", height: "3", rx: "1.5", fill: "#335FFC" }),
4427
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "62", width: "30", height: "8", rx: "2", fill: "#008676" }),
4504
+ /* @__PURE__ */ jsxRuntime.jsx(
4505
+ "rect",
4506
+ {
4507
+ x: "3",
4508
+ y: "22",
4509
+ width: "14",
4510
+ height: "6",
4511
+ rx: "2",
4512
+ fill: "rgb(var(--oui-color-success-darken))"
4513
+ }
4514
+ ),
4515
+ /* @__PURE__ */ jsxRuntime.jsx(
4516
+ "rect",
4517
+ {
4518
+ x: "19",
4519
+ y: "22",
4520
+ width: "14",
4521
+ height: "6",
4522
+ rx: "2",
4523
+ fill: "rgb(var(--oui-color-danger-darken))"
4524
+ }
4525
+ ),
4526
+ /* @__PURE__ */ jsxRuntime.jsx(
4527
+ "rect",
4528
+ {
4529
+ x: "3",
4530
+ y: "11",
4531
+ width: "14",
4532
+ height: "3",
4533
+ rx: "1.5",
4534
+ fill: "rgb(var(--oui-color-base-4))"
4535
+ }
4536
+ ),
4537
+ /* @__PURE__ */ jsxRuntime.jsx(
4538
+ "rect",
4539
+ {
4540
+ x: "19",
4541
+ y: "11",
4542
+ width: "14",
4543
+ height: "3",
4544
+ rx: "1.5",
4545
+ fill: "rgb(var(--oui-color-primary-darken))"
4546
+ }
4547
+ ),
4548
+ /* @__PURE__ */ jsxRuntime.jsx(
4549
+ "rect",
4550
+ {
4551
+ x: "3",
4552
+ y: "62",
4553
+ width: "30",
4554
+ height: "8",
4555
+ rx: "2",
4556
+ fill: "rgb(var(--oui-color-success-darken))"
4557
+ }
4558
+ ),
4428
4559
  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
4429
4560
  "linearGradient",
4430
4561
  {
@@ -4435,8 +4566,8 @@ var init_switchLayout = __esm({
4435
4566
  y2: "79.5",
4436
4567
  gradientUnits: "userSpaceOnUse",
4437
4568
  children: [
4438
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#779eff" }),
4439
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#26FEFE" })
4569
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-primary-light))" }),
4570
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
4440
4571
  ]
4441
4572
  }
4442
4573
  ) })
@@ -4467,17 +4598,77 @@ var init_switchLayout = __esm({
4467
4598
  width: "144",
4468
4599
  height: "96",
4469
4600
  rx: "10",
4470
- fill: "#07080A",
4601
+ fill: "rgb(var(--oui-color-base-10))",
4471
4602
  stroke: getStrokeColor(),
4472
4603
  strokeWidth: "4"
4473
4604
  }
4474
4605
  ),
4475
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "8", width: "24", height: "84", rx: "2", fill: "#181C23" }),
4476
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
4477
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "21", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
4478
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "26", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
4479
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "10", width: "5", height: "2", rx: "1", fill: "#335FFC" }),
4480
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "14", width: "20", height: "76", rx: "2", fill: "#282E3A" })
4606
+ /* @__PURE__ */ jsxRuntime.jsx(
4607
+ "rect",
4608
+ {
4609
+ x: "8",
4610
+ y: "8",
4611
+ width: "24",
4612
+ height: "84",
4613
+ rx: "2",
4614
+ fill: "rgb(var(--oui-color-base-7))"
4615
+ }
4616
+ ),
4617
+ /* @__PURE__ */ jsxRuntime.jsx(
4618
+ "rect",
4619
+ {
4620
+ x: "16",
4621
+ y: "10",
4622
+ width: "4",
4623
+ height: "2",
4624
+ rx: "1",
4625
+ fill: "rgb(var(--oui-color-base-4))"
4626
+ }
4627
+ ),
4628
+ /* @__PURE__ */ jsxRuntime.jsx(
4629
+ "rect",
4630
+ {
4631
+ x: "21",
4632
+ y: "10",
4633
+ width: "4",
4634
+ height: "2",
4635
+ rx: "1",
4636
+ fill: "rgb(var(--oui-color-base-4))"
4637
+ }
4638
+ ),
4639
+ /* @__PURE__ */ jsxRuntime.jsx(
4640
+ "rect",
4641
+ {
4642
+ x: "26",
4643
+ y: "10",
4644
+ width: "4",
4645
+ height: "2",
4646
+ rx: "1",
4647
+ fill: "rgb(var(--oui-color-base-4))"
4648
+ }
4649
+ ),
4650
+ /* @__PURE__ */ jsxRuntime.jsx(
4651
+ "rect",
4652
+ {
4653
+ x: "10",
4654
+ y: "10",
4655
+ width: "5",
4656
+ height: "2",
4657
+ rx: "1",
4658
+ fill: "rgb(var(--oui-color-primary-darken))"
4659
+ }
4660
+ ),
4661
+ /* @__PURE__ */ jsxRuntime.jsx(
4662
+ "rect",
4663
+ {
4664
+ x: "10",
4665
+ y: "14",
4666
+ width: "20",
4667
+ height: "76",
4668
+ rx: "2",
4669
+ fill: "rgb(var(--oui-color-base-5))"
4670
+ }
4671
+ )
4481
4672
  ]
4482
4673
  }
4483
4674
  );
@@ -4506,28 +4697,118 @@ var init_switchLayout = __esm({
4506
4697
  width: "144",
4507
4698
  height: "96",
4508
4699
  rx: "10",
4509
- fill: "#07080A",
4700
+ fill: "rgb(var(--oui-color-base-10))",
4510
4701
  stroke: getStrokeColor(),
4511
4702
  strokeWidth: "4"
4512
4703
  }
4513
4704
  ),
4514
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "8", width: "132", height: "8", rx: "2", fill: "#181C23" }),
4705
+ /* @__PURE__ */ jsxRuntime.jsx(
4706
+ "rect",
4707
+ {
4708
+ x: "8",
4709
+ y: "8",
4710
+ width: "132",
4711
+ height: "8",
4712
+ rx: "2",
4713
+ fill: "rgb(var(--oui-color-base-7))"
4714
+ }
4715
+ ),
4515
4716
  /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_31319_74729)", children: [
4516
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "10", width: "16", height: "4", rx: "2", fill: "#335FFC" }),
4517
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "28", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4518
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "46", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4519
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "64", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4520
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "82", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4521
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "100", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4522
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "118", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
4523
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "136", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" })
4717
+ /* @__PURE__ */ jsxRuntime.jsx(
4718
+ "rect",
4719
+ {
4720
+ x: "10",
4721
+ y: "10",
4722
+ width: "16",
4723
+ height: "4",
4724
+ rx: "2",
4725
+ fill: "rgb(var(--oui-color-primary-darken))"
4726
+ }
4727
+ ),
4728
+ /* @__PURE__ */ jsxRuntime.jsx(
4729
+ "rect",
4730
+ {
4731
+ x: "28",
4732
+ y: "10",
4733
+ width: "16",
4734
+ height: "4",
4735
+ rx: "2",
4736
+ fill: "rgb(var(--oui-color-base-4))"
4737
+ }
4738
+ ),
4739
+ /* @__PURE__ */ jsxRuntime.jsx(
4740
+ "rect",
4741
+ {
4742
+ x: "46",
4743
+ y: "10",
4744
+ width: "16",
4745
+ height: "4",
4746
+ rx: "2",
4747
+ fill: "rgb(var(--oui-color-base-4))"
4748
+ }
4749
+ ),
4750
+ /* @__PURE__ */ jsxRuntime.jsx(
4751
+ "rect",
4752
+ {
4753
+ x: "64",
4754
+ y: "10",
4755
+ width: "16",
4756
+ height: "4",
4757
+ rx: "2",
4758
+ fill: "rgb(var(--oui-color-base-4))"
4759
+ }
4760
+ ),
4761
+ /* @__PURE__ */ jsxRuntime.jsx(
4762
+ "rect",
4763
+ {
4764
+ x: "82",
4765
+ y: "10",
4766
+ width: "16",
4767
+ height: "4",
4768
+ rx: "2",
4769
+ fill: "rgb(var(--oui-color-base-4))"
4770
+ }
4771
+ ),
4772
+ /* @__PURE__ */ jsxRuntime.jsx(
4773
+ "rect",
4774
+ {
4775
+ x: "100",
4776
+ y: "10",
4777
+ width: "16",
4778
+ height: "4",
4779
+ rx: "2",
4780
+ fill: "rgb(var(--oui-color-base-4))"
4781
+ }
4782
+ ),
4783
+ /* @__PURE__ */ jsxRuntime.jsx(
4784
+ "rect",
4785
+ {
4786
+ x: "118",
4787
+ y: "10",
4788
+ width: "16",
4789
+ height: "4",
4790
+ rx: "2",
4791
+ fill: "rgb(var(--oui-color-base-4))"
4792
+ }
4793
+ ),
4794
+ /* @__PURE__ */ jsxRuntime.jsx(
4795
+ "rect",
4796
+ {
4797
+ x: "136",
4798
+ y: "10",
4799
+ width: "16",
4800
+ height: "4",
4801
+ rx: "2",
4802
+ fill: "rgb(var(--oui-color-base-4))"
4803
+ }
4804
+ )
4524
4805
  ] }),
4525
4806
  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_31319_74729", children: /* @__PURE__ */ jsxRuntime.jsx(
4526
4807
  "rect",
4527
4808
  {
4528
4809
  width: "130",
4529
4810
  height: "4",
4530
- fill: "white",
4811
+ fill: "rgb(var(--oui-color-base-foreground))",
4531
4812
  transform: "translate(10 10)"
4532
4813
  }
4533
4814
  ) }) })
@@ -4559,28 +4840,118 @@ var init_switchLayout = __esm({
4559
4840
  width: "144",
4560
4841
  height: "96",
4561
4842
  rx: "10",
4562
- fill: "#07080A",
4843
+ fill: "rgb(var(--oui-color-base-10))",
4563
4844
  stroke: getStrokeColor(),
4564
4845
  strokeWidth: "4"
4565
4846
  }
4566
4847
  ),
4567
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "84", width: "132", height: "8", rx: "2", fill: "#181C23" }),
4848
+ /* @__PURE__ */ jsxRuntime.jsx(
4849
+ "rect",
4850
+ {
4851
+ x: "8",
4852
+ y: "84",
4853
+ width: "132",
4854
+ height: "8",
4855
+ rx: "2",
4856
+ fill: "rgb(var(--oui-color-base-7))"
4857
+ }
4858
+ ),
4568
4859
  /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_31319_74743)", children: [
4569
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "86", width: "16", height: "4", rx: "2", fill: "#335FFC" }),
4570
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "28", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4571
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "46", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4572
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "64", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4573
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "82", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4574
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "100", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4575
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "118", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
4576
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "136", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" })
4860
+ /* @__PURE__ */ jsxRuntime.jsx(
4861
+ "rect",
4862
+ {
4863
+ x: "10",
4864
+ y: "86",
4865
+ width: "16",
4866
+ height: "4",
4867
+ rx: "2",
4868
+ fill: "rgb(var(--oui-color-primary-darken))"
4869
+ }
4870
+ ),
4871
+ /* @__PURE__ */ jsxRuntime.jsx(
4872
+ "rect",
4873
+ {
4874
+ x: "28",
4875
+ y: "86",
4876
+ width: "16",
4877
+ height: "4",
4878
+ rx: "2",
4879
+ fill: "rgb(var(--oui-color-base-4))"
4880
+ }
4881
+ ),
4882
+ /* @__PURE__ */ jsxRuntime.jsx(
4883
+ "rect",
4884
+ {
4885
+ x: "46",
4886
+ y: "86",
4887
+ width: "16",
4888
+ height: "4",
4889
+ rx: "2",
4890
+ fill: "rgb(var(--oui-color-base-4))"
4891
+ }
4892
+ ),
4893
+ /* @__PURE__ */ jsxRuntime.jsx(
4894
+ "rect",
4895
+ {
4896
+ x: "64",
4897
+ y: "86",
4898
+ width: "16",
4899
+ height: "4",
4900
+ rx: "2",
4901
+ fill: "rgb(var(--oui-color-base-4))"
4902
+ }
4903
+ ),
4904
+ /* @__PURE__ */ jsxRuntime.jsx(
4905
+ "rect",
4906
+ {
4907
+ x: "82",
4908
+ y: "86",
4909
+ width: "16",
4910
+ height: "4",
4911
+ rx: "2",
4912
+ fill: "rgb(var(--oui-color-base-4))"
4913
+ }
4914
+ ),
4915
+ /* @__PURE__ */ jsxRuntime.jsx(
4916
+ "rect",
4917
+ {
4918
+ x: "100",
4919
+ y: "86",
4920
+ width: "16",
4921
+ height: "4",
4922
+ rx: "2",
4923
+ fill: "rgb(var(--oui-color-base-4))"
4924
+ }
4925
+ ),
4926
+ /* @__PURE__ */ jsxRuntime.jsx(
4927
+ "rect",
4928
+ {
4929
+ x: "118",
4930
+ y: "86",
4931
+ width: "16",
4932
+ height: "4",
4933
+ rx: "2",
4934
+ fill: "rgb(var(--oui-color-base-4))"
4935
+ }
4936
+ ),
4937
+ /* @__PURE__ */ jsxRuntime.jsx(
4938
+ "rect",
4939
+ {
4940
+ x: "136",
4941
+ y: "86",
4942
+ width: "16",
4943
+ height: "4",
4944
+ rx: "2",
4945
+ fill: "rgb(var(--oui-color-base-4))"
4946
+ }
4947
+ )
4577
4948
  ] }),
4578
4949
  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_31319_74743", children: /* @__PURE__ */ jsxRuntime.jsx(
4579
4950
  "rect",
4580
4951
  {
4581
4952
  width: "130",
4582
4953
  height: "4",
4583
- fill: "white",
4954
+ fill: "rgb(var(--oui-color-base-foreground))",
4584
4955
  transform: "translate(10 86)"
4585
4956
  }
4586
4957
  ) }) })
@@ -4612,13 +4983,23 @@ var init_switchLayout = __esm({
4612
4983
  width: "144",
4613
4984
  height: "96",
4614
4985
  rx: "10",
4615
- fill: "#07080A",
4986
+ fill: "rgb(var(--oui-color-base-10))",
4616
4987
  stroke: getStrokeColor(),
4617
4988
  strokeWidth: "4"
4618
4989
  }
4619
4990
  ),
4620
4991
  /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_31319_74757)", children: [
4621
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "8", width: "132", height: "84", rx: "2", fill: "#181C23" }),
4992
+ /* @__PURE__ */ jsxRuntime.jsx(
4993
+ "rect",
4994
+ {
4995
+ x: "8",
4996
+ y: "8",
4997
+ width: "132",
4998
+ height: "84",
4999
+ rx: "2",
5000
+ fill: "rgb(var(--oui-color-base-7))"
5001
+ }
5002
+ ),
4622
5003
  /* @__PURE__ */ jsxRuntime.jsx(
4623
5004
  "rect",
4624
5005
  {
@@ -4628,7 +5009,7 @@ var init_switchLayout = __esm({
4628
5009
  height: "188",
4629
5010
  rx: "2",
4630
5011
  transform: "rotate(45 66.8789 -76)",
4631
- fill: "#20252F"
5012
+ fill: "rgb(var(--oui-color-base-6))"
4632
5013
  }
4633
5014
  ),
4634
5015
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4640,7 +5021,7 @@ var init_switchLayout = __esm({
4640
5021
  height: "188",
4641
5022
  rx: "2",
4642
5023
  transform: "rotate(45 73.9492 -68.929)",
4643
- fill: "#20252F"
5024
+ fill: "rgb(var(--oui-color-base-6))"
4644
5025
  }
4645
5026
  ),
4646
5027
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4652,7 +5033,7 @@ var init_switchLayout = __esm({
4652
5033
  height: "188",
4653
5034
  rx: "2",
4654
5035
  transform: "rotate(45 81.0195 -61.8579)",
4655
- fill: "#20252F"
5036
+ fill: "rgb(var(--oui-color-base-6))"
4656
5037
  }
4657
5038
  ),
4658
5039
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4664,7 +5045,7 @@ var init_switchLayout = __esm({
4664
5045
  height: "188",
4665
5046
  rx: "2",
4666
5047
  transform: "rotate(45 88.0938 -54.7867)",
4667
- fill: "#20252F"
5048
+ fill: "rgb(var(--oui-color-base-6))"
4668
5049
  }
4669
5050
  ),
4670
5051
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4676,7 +5057,7 @@ var init_switchLayout = __esm({
4676
5057
  height: "188",
4677
5058
  rx: "2",
4678
5059
  transform: "rotate(45 95.1641 -47.7157)",
4679
- fill: "#20252F"
5060
+ fill: "rgb(var(--oui-color-base-6))"
4680
5061
  }
4681
5062
  ),
4682
5063
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4688,7 +5069,7 @@ var init_switchLayout = __esm({
4688
5069
  height: "188",
4689
5070
  rx: "2",
4690
5071
  transform: "rotate(45 102.234 -40.6447)",
4691
- fill: "#20252F"
5072
+ fill: "rgb(var(--oui-color-base-6))"
4692
5073
  }
4693
5074
  ),
4694
5075
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4700,7 +5081,7 @@ var init_switchLayout = __esm({
4700
5081
  height: "188",
4701
5082
  rx: "2",
4702
5083
  transform: "rotate(45 109.305 -33.5736)",
4703
- fill: "#20252F"
5084
+ fill: "rgb(var(--oui-color-base-6))"
4704
5085
  }
4705
5086
  ),
4706
5087
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4712,7 +5093,7 @@ var init_switchLayout = __esm({
4712
5093
  height: "188",
4713
5094
  rx: "2",
4714
5095
  transform: "rotate(45 116.375 -26.5026)",
4715
- fill: "#20252F"
5096
+ fill: "rgb(var(--oui-color-base-6))"
4716
5097
  }
4717
5098
  ),
4718
5099
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4724,7 +5105,7 @@ var init_switchLayout = __esm({
4724
5105
  height: "188",
4725
5106
  rx: "2",
4726
5107
  transform: "rotate(45 123.449 -19.4315)",
4727
- fill: "#20252F"
5108
+ fill: "rgb(var(--oui-color-base-6))"
4728
5109
  }
4729
5110
  ),
4730
5111
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4736,7 +5117,7 @@ var init_switchLayout = __esm({
4736
5117
  height: "188",
4737
5118
  rx: "2",
4738
5119
  transform: "rotate(45 130.52 -12.3604)",
4739
- fill: "#20252F"
5120
+ fill: "rgb(var(--oui-color-base-6))"
4740
5121
  }
4741
5122
  ),
4742
5123
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4748,7 +5129,7 @@ var init_switchLayout = __esm({
4748
5129
  height: "188",
4749
5130
  rx: "2",
4750
5131
  transform: "rotate(45 137.59 -5.28931)",
4751
- fill: "#20252F"
5132
+ fill: "rgb(var(--oui-color-base-6))"
4752
5133
  }
4753
5134
  ),
4754
5135
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4760,7 +5141,7 @@ var init_switchLayout = __esm({
4760
5141
  height: "188",
4761
5142
  rx: "2",
4762
5143
  transform: "rotate(45 144.66 1.78174)",
4763
- fill: "#20252F"
5144
+ fill: "rgb(var(--oui-color-base-6))"
4764
5145
  }
4765
5146
  ),
4766
5147
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4772,7 +5153,7 @@ var init_switchLayout = __esm({
4772
5153
  height: "188",
4773
5154
  rx: "2",
4774
5155
  transform: "rotate(45 151.73 8.85278)",
4775
- fill: "#20252F"
5156
+ fill: "rgb(var(--oui-color-base-6))"
4776
5157
  }
4777
5158
  ),
4778
5159
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4784,7 +5165,7 @@ var init_switchLayout = __esm({
4784
5165
  height: "188",
4785
5166
  rx: "2",
4786
5167
  transform: "rotate(45 158.805 15.9238)",
4787
- fill: "#20252F"
5168
+ fill: "rgb(var(--oui-color-base-6))"
4788
5169
  }
4789
5170
  ),
4790
5171
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4796,7 +5177,7 @@ var init_switchLayout = __esm({
4796
5177
  height: "188",
4797
5178
  rx: "2",
4798
5179
  transform: "rotate(45 165.875 22.995)",
4799
- fill: "#20252F"
5180
+ fill: "rgb(var(--oui-color-base-6))"
4800
5181
  }
4801
5182
  ),
4802
5183
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4808,7 +5189,7 @@ var init_switchLayout = __esm({
4808
5189
  height: "188",
4809
5190
  rx: "2",
4810
5191
  transform: "rotate(45 172.945 30.066)",
4811
- fill: "#20252F"
5192
+ fill: "rgb(var(--oui-color-base-6))"
4812
5193
  }
4813
5194
  ),
4814
5195
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4820,7 +5201,7 @@ var init_switchLayout = __esm({
4820
5201
  height: "188",
4821
5202
  rx: "2",
4822
5203
  transform: "rotate(45 180.016 37.1371)",
4823
- fill: "#20252F"
5204
+ fill: "rgb(var(--oui-color-base-6))"
4824
5205
  }
4825
5206
  ),
4826
5207
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4832,7 +5213,7 @@ var init_switchLayout = __esm({
4832
5213
  height: "188",
4833
5214
  rx: "2",
4834
5215
  transform: "rotate(45 187.086 44.2081)",
4835
- fill: "#20252F"
5216
+ fill: "rgb(var(--oui-color-base-6))"
4836
5217
  }
4837
5218
  ),
4838
5219
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4844,7 +5225,7 @@ var init_switchLayout = __esm({
4844
5225
  height: "188",
4845
5226
  rx: "2",
4846
5227
  transform: "rotate(45 194.156 51.2792)",
4847
- fill: "#20252F"
5228
+ fill: "rgb(var(--oui-color-base-6))"
4848
5229
  }
4849
5230
  ),
4850
5231
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4856,7 +5237,7 @@ var init_switchLayout = __esm({
4856
5237
  height: "188",
4857
5238
  rx: "2",
4858
5239
  transform: "rotate(45 201.23 58.3503)",
4859
- fill: "#20252F"
5240
+ fill: "rgb(var(--oui-color-base-6))"
4860
5241
  }
4861
5242
  )
4862
5243
  ] }),
@@ -4865,7 +5246,7 @@ var init_switchLayout = __esm({
4865
5246
  {
4866
5247
  width: "132",
4867
5248
  height: "84",
4868
- fill: "white",
5249
+ fill: "rgb(var(--oui-color-base-foreground))",
4869
5250
  transform: "translate(8 8)"
4870
5251
  }
4871
5252
  ) }) })
@@ -5003,7 +5384,7 @@ var init_tradingview_ui = __esm({
5003
5384
  return /* @__PURE__ */ jsxRuntime.jsxs(
5004
5385
  "div",
5005
5386
  {
5006
- className: "oui-pb-1 oui-flex oui-flex-col oui-gap-1",
5387
+ className: "oui-trading-tradingview oui-pb-1 oui-flex oui-flex-col oui-gap-1",
5007
5388
  style: { height: props.height },
5008
5389
  ref: props.boxRef,
5009
5390
  children: [
@@ -5254,7 +5635,7 @@ var init_topTab_ui = __esm({
5254
5635
  props.setTab(e);
5255
5636
  props.setVisible(true);
5256
5637
  },
5257
- className: props.className,
5638
+ className: ui.cn("oui-trading-topTab", props.className),
5258
5639
  classNames: {
5259
5640
  tabsList: "oui-p-2",
5260
5641
  tabsContent: "oui-min-h-[176px] oui-max-h-[396px]"
@@ -5380,7 +5761,7 @@ var init_orderBookAndEntry_ui = __esm({
5380
5761
  "div",
5381
5762
  {
5382
5763
  className: ui.cn(
5383
- "oui-mx-1 oui-grid oui-gap-1",
5764
+ "oui-trading-orderBookAndEntry oui-mx-1 oui-grid oui-gap-1",
5384
5765
  props.layout === "right" ? "oui-grid-cols-[4fr,6fr]" : "oui-grid-cols-[6fr,4fr]",
5385
5766
  props.className
5386
5767
  ),
@@ -5774,7 +6155,7 @@ var init_dataList_ui2 = __esm({
5774
6155
  defaultValue: "Position" /* position */,
5775
6156
  onValueChange: (e) => setTab(e),
5776
6157
  size: "lg",
5777
- className,
6158
+ className: ui.cn("oui-trading-dataList-tabs", className),
5778
6159
  classNames: {
5779
6160
  tabsList: "oui-bg-base-9 oui-rounded-t-xl oui-p-2 oui-overflow-x-scroll oui-hide-scrollbar"
5780
6161
  },
@@ -5891,25 +6272,33 @@ var HeadIcon = () => {
5891
6272
  "path",
5892
6273
  {
5893
6274
  d: "m31.002 14.493-8.326-22.51L.166.31l8.327 22.51z",
5894
- fill: "#03435D"
6275
+ fill: "rgb(var(--oui-color-base-5))"
5895
6276
  }
5896
6277
  ),
5897
6278
  /* @__PURE__ */ jsxRuntime.jsx(
5898
6279
  "path",
5899
6280
  {
5900
6281
  d: "m4.456-8.716-18.03 15.84 15.84 18.03 18.03-15.84z",
5901
- fill: "#157CF2"
6282
+ fill: "rgb(var(--oui-color-primary))"
5902
6283
  }
5903
6284
  ),
5904
6285
  /* @__PURE__ */ jsxRuntime.jsx(
5905
6286
  "path",
5906
6287
  {
5907
6288
  d: "m17.548 38.67 22.825-7.416-7.416-22.825-22.826 7.416z",
5908
- fill: "#F3E200"
6289
+ fill: "rgb(var(--oui-color-warning))"
5909
6290
  }
5910
6291
  )
5911
6292
  ] }),
5912
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", rx: "12", fill: "#fff" }) }) })
6293
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx(
6294
+ "rect",
6295
+ {
6296
+ width: "24",
6297
+ height: "24",
6298
+ rx: "12",
6299
+ fill: "rgb(var(--oui-color-base-foreground))"
6300
+ }
6301
+ ) }) })
5913
6302
  ]
5914
6303
  }
5915
6304
  );
@@ -5949,14 +6338,14 @@ var USDCIcon = (props) => {
5949
6338
  "path",
5950
6339
  {
5951
6340
  d: "M10 20c5.542 0 10-4.458 10-10S15.542 0 10 0 0 4.458 0 10s4.458 10 10 10",
5952
- fill: "#2775CA"
6341
+ fill: "rgb(var(--oui-color-primary))"
5953
6342
  }
5954
6343
  ),
5955
6344
  /* @__PURE__ */ jsxRuntime.jsx(
5956
6345
  "path",
5957
6346
  {
5958
6347
  d: "M13 11.473c0-1.452-.94-1.95-2.82-2.158-1.344-.166-1.613-.498-1.613-1.078s.448-.955 1.343-.955c.806 0 1.254.25 1.478.872.045.124.18.207.313.207h.717c.179 0 .313-.125.313-.29v-.042c-.179-.913-.985-1.618-2.015-1.701v-.996c0-.166-.134-.29-.358-.332h-.671c-.18 0-.314.124-.359.332v.954c-1.343.166-2.194.996-2.194 2.034 0 1.369.896 1.908 2.776 2.116 1.254.207 1.657.456 1.657 1.12s-.627 1.12-1.477 1.12c-1.165 0-1.568-.456-1.702-1.078a.32.32 0 0 0-.313-.25h-.762c-.179 0-.313.125-.313.291v.042c.179 1.037.895 1.784 2.373 1.991v.996c0 .166.134.29.358.332h.672c.18 0 .313-.124.358-.332v-.996C12.105 13.465 13 12.593 13 11.473",
5959
- fill: "#fff",
6348
+ fill: "rgb(var(--oui-color-base-foreground))",
5960
6349
  fillOpacity: ".98"
5961
6350
  }
5962
6351
  ),
@@ -5964,11 +6353,17 @@ var USDCIcon = (props) => {
5964
6353
  "path",
5965
6354
  {
5966
6355
  d: "M7.74 16.57c-3.458-1.215-5.23-4.986-3.945-8.324.665-1.821 2.127-3.208 3.944-3.859.178-.086.266-.216.266-.433v-.607c0-.174-.088-.304-.266-.347-.044 0-.133 0-.177.043-4.21 1.3-6.516 5.68-5.186 9.798.798 2.428 2.704 4.292 5.186 5.072.177.087.355 0 .399-.173.044-.043.044-.087.044-.173v-.608c0-.13-.133-.303-.266-.39m4.698-13.527c-.178-.086-.355 0-.4.174-.043.043-.043.086-.043.173v.607c0 .174.133.347.266.434 3.457 1.213 5.23 4.985 3.944 8.323-.664 1.821-2.127 3.209-3.944 3.859-.178.086-.266.216-.266.433v.607c0 .174.088.304.266.347.044 0 .133 0 .177-.043 4.21-1.3 6.515-5.68 5.186-9.798-.798-2.471-2.748-4.335-5.186-5.116",
5967
- fill: "#fff"
6356
+ fill: "rgb(var(--oui-color-base-foreground))"
5968
6357
  }
5969
6358
  )
5970
6359
  ] }),
5971
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })
6360
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsxRuntime.jsx(
6361
+ "path",
6362
+ {
6363
+ fill: "rgb(var(--oui-color-base-foreground))",
6364
+ d: "M0 0h20v20H0z"
6365
+ }
6366
+ ) }) })
5972
6367
  ]
5973
6368
  }
5974
6369
  );
@@ -5998,7 +6393,7 @@ var OrderlyIcon = (props) => {
5998
6393
  fillRule: "evenodd",
5999
6394
  clipRule: "evenodd",
6000
6395
  d: "M14.1553 4.89304C14.2199 4.94541 14.1821 5.04758 14.0989 5.04758H5.95035C5.86716 5.04758 5.82936 4.94541 5.894 4.89304C7.0223 3.97912 8.45953 3.43164 10.0246 3.43164C11.5898 3.43164 13.0269 3.97912 14.1553 4.89304Z",
6001
- fill: "white"
6396
+ fill: "rgb(var(--oui-color-base-foreground))"
6002
6397
  }
6003
6398
  ),
6004
6399
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -6007,7 +6402,7 @@ var OrderlyIcon = (props) => {
6007
6402
  fillRule: "evenodd",
6008
6403
  clipRule: "evenodd",
6009
6404
  d: "M7.47013 11.7869C7.42315 11.7199 7.34748 11.6777 7.26565 11.6777H3.82985C3.75113 11.6777 3.69375 11.7525 3.71563 11.8281C4.5078 14.565 7.0326 16.566 10.0247 16.566C13.017 16.566 15.5417 14.565 16.3339 11.8281C16.3558 11.7525 16.2984 11.6777 16.2197 11.6777H12.7839C12.702 11.6777 12.6264 11.7199 12.5795 11.7869C12.0155 12.5911 11.0815 13.1167 10.0248 13.1167C8.96803 13.1167 8.03406 12.5911 7.47013 11.7869Z",
6010
- fill: "white"
6405
+ fill: "rgb(var(--oui-color-base-foreground))"
6011
6406
  }
6012
6407
  ),
6013
6408
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -6016,7 +6411,7 @@ var OrderlyIcon = (props) => {
6016
6411
  fillRule: "evenodd",
6017
6412
  clipRule: "evenodd",
6018
6413
  d: "M12.3347 7.90519C12.3822 7.95756 12.449 7.9891 12.5196 7.9891H16.1137C16.1952 7.9891 16.253 7.90983 16.2261 7.83301C15.9724 7.10689 15.5948 6.43893 15.1187 5.85447C15.074 5.79961 15.0067 5.76855 14.9358 5.76855H5.11323C5.04247 5.76855 4.97512 5.79961 4.93044 5.85447C4.45429 6.43893 4.0767 7.10689 3.82306 7.83301C3.79622 7.90983 3.85398 7.9891 3.93536 7.9891H7.52952C7.60022 7.9891 7.66694 7.95756 7.71445 7.90519C8.28491 7.2763 9.10861 6.88136 10.0246 6.88136C10.9405 6.88136 11.7643 7.2763 12.3347 7.90519Z",
6019
- fill: "white"
6414
+ fill: "rgb(var(--oui-color-base-foreground))"
6020
6415
  }
6021
6416
  ),
6022
6417
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -6025,7 +6420,7 @@ var OrderlyIcon = (props) => {
6025
6420
  fillRule: "evenodd",
6026
6421
  clipRule: "evenodd",
6027
6422
  d: "M13.1164 10.9586C13.0553 10.9586 13.0118 10.899 13.0284 10.8401C13.1033 10.5722 13.1433 10.2898 13.1433 9.9981C13.1433 9.58758 13.064 9.19556 12.9199 8.83657C12.8954 8.77581 12.9392 8.70801 13.0046 8.70801H16.392C16.4349 8.70801 16.472 8.73831 16.4799 8.78052C16.5538 9.17511 16.5925 9.58216 16.5925 9.9982C16.5925 10.2978 16.5724 10.5926 16.5337 10.8815C16.5277 10.9258 16.4897 10.9586 16.4451 10.9586H13.1164ZM7.02223 10.8401C7.03868 10.899 6.99532 10.9586 6.93421 10.9586H3.60551C3.56084 10.9586 3.52285 10.9258 3.5169 10.8815C3.47807 10.5926 3.45801 10.2978 3.45801 9.9982C3.45801 9.58216 3.4967 9.17511 3.57069 8.78052C3.57859 8.73831 3.61563 8.70801 3.65856 8.70801H7.04593C7.11141 8.70801 7.15516 8.77581 7.13076 8.83657C6.98657 9.19556 6.90722 9.58758 6.90722 9.9981C6.90722 10.2898 6.94728 10.5722 7.02223 10.8401Z",
6028
- fill: "white"
6423
+ fill: "rgb(var(--oui-color-base-foreground))"
6029
6424
  }
6030
6425
  )
6031
6426
  ] }),
@@ -6040,12 +6435,19 @@ var OrderlyIcon = (props) => {
6040
6435
  y2: "19.9493",
6041
6436
  gradientUnits: "userSpaceOnUse",
6042
6437
  children: [
6043
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#C750FF" }),
6044
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5800E8" })
6438
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
6439
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
6045
6440
  ]
6046
6441
  }
6047
6442
  ),
6048
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_6403_64483", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) })
6443
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_6403_64483", children: /* @__PURE__ */ jsxRuntime.jsx(
6444
+ "rect",
6445
+ {
6446
+ width: "20",
6447
+ height: "20",
6448
+ fill: "rgb(var(--oui-color-base-foreground))"
6449
+ }
6450
+ ) })
6049
6451
  ] })
6050
6452
  ]
6051
6453
  }
@@ -6053,7 +6455,7 @@ var OrderlyIcon = (props) => {
6053
6455
  };
6054
6456
  var AccountSheet = (props) => {
6055
6457
  const { t } = i18n.useTranslation();
6056
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 4, children: [
6458
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-accountSheet", direction: "column", gap: 4, children: [
6057
6459
  /* @__PURE__ */ jsxRuntime.jsx(AccountInfo, { ...props }),
6058
6460
  /* @__PURE__ */ jsxRuntime.jsx(ReferralInfo, { ...props }),
6059
6461
  /* @__PURE__ */ jsxRuntime.jsx(TradingRewardsInfo, { ...props }),
@@ -6066,7 +6468,7 @@ var AccountSheet = (props) => {
6066
6468
  onClick: props.onGetTestUSDC,
6067
6469
  fullWidth: true,
6068
6470
  loading: props.gettingTestUSDC,
6069
- className: "oui-border-primary-light oui-text-primary-light",
6471
+ className: "oui-accountSheet-getTestUSDC-btn oui-border-primary-light oui-text-primary-light",
6070
6472
  children: t("trading.faucet.getTestUSDC")
6071
6473
  }
6072
6474
  ),
@@ -6256,7 +6658,7 @@ var TradingRewardsInfo = (props) => {
6256
6658
  width: "100%",
6257
6659
  angle: 180,
6258
6660
  justify: "between",
6259
- className: "oui-bg-gradient-to-t oui-from-[#2d0061] oui-to-[#bd6bed]",
6661
+ className: "oui-bg-gradient-to-t oui-from-[rgb(var(--oui-gradient-secondary-end))] oui-to-[rgb(var(--oui-gradient-secondary-start))]",
6260
6662
  children: [
6261
6663
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 80, children: t("tradingRewards.myEstRewards") }),
6262
6664
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
@@ -6592,7 +6994,7 @@ var BottomNavBar = (props) => {
6592
6994
  return /* @__PURE__ */ jsxRuntime.jsx(ChainWidget, {});
6593
6995
  };
6594
6996
  const showScanQRCode = !props.disabledConnect && props.status !== types.AccountStatusEnum.EnableTradingWithoutConnected && props.status < types.AccountStatusEnum.EnableTrading;
6595
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-bg-base-9 oui-border-t oui-border-line-4", children: [
6997
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-bottomNavBar oui-bg-base-9 oui-border-t oui-border-line-4", children: [
6596
6998
  /* @__PURE__ */ jsxRuntime.jsxs(
6597
6999
  ui.Flex,
6598
7000
  {
@@ -6979,7 +7381,7 @@ var RiskIndicator = (props) => {
6979
7381
  "div",
6980
7382
  {
6981
7383
  className: ui.cn(
6982
- "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-white after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-white/50",
7384
+ "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
6983
7385
  className
6984
7386
  // {
6985
7387
  // "oui-rotate-0": value > 1,
@@ -6993,12 +7395,21 @@ var RiskIndicator = (props) => {
6993
7395
  );
6994
7396
  };
6995
7397
  var PortfolioSheet = (props) => {
6996
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 4, width: "100%", children: [
6997
- /* @__PURE__ */ jsxRuntime.jsx(Asset, { ...props }),
6998
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
6999
- /* @__PURE__ */ jsxRuntime.jsx(MarginRatio, { ...props }),
7000
- /* @__PURE__ */ jsxRuntime.jsx(Buttons, { ...props })
7001
- ] });
7398
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7399
+ ui.Flex,
7400
+ {
7401
+ className: "oui-portfolioSheet",
7402
+ direction: "column",
7403
+ gap: 4,
7404
+ width: "100%",
7405
+ children: [
7406
+ /* @__PURE__ */ jsxRuntime.jsx(Asset, { ...props }),
7407
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
7408
+ /* @__PURE__ */ jsxRuntime.jsx(MarginRatio, { ...props }),
7409
+ /* @__PURE__ */ jsxRuntime.jsx(Buttons, { ...props })
7410
+ ]
7411
+ }
7412
+ );
7002
7413
  };
7003
7414
  var Asset = (props) => {
7004
7415
  const { t } = i18n.useTranslation();
@@ -7999,6 +8410,7 @@ var DesktopLayout4 = (props) => {
7999
8410
  ui.Box,
8000
8411
  {
8001
8412
  className: ui.cn(
8413
+ "oui-trading-markets-container",
8002
8414
  "oui-bg-base-10",
8003
8415
  // -8 is for reducing the container's padding
8004
8416
  "oui-sticky oui-z-30 oui-mb-[-8px] oui-py-2",
@@ -8031,7 +8443,7 @@ var DesktopLayout4 = (props) => {
8031
8443
  height: "100%",
8032
8444
  width: marketsWidth,
8033
8445
  style: { minWidth: marketsWidth },
8034
- className: "oui-transition-all oui-duration-150",
8446
+ className: "oui-trading-markets-container oui-transition-all oui-duration-150",
8035
8447
  onTransitionEnd: () => setAnimating(false),
8036
8448
  children: !animating && marketLayout === "left" && marketsWidget
8037
8449
  }
@@ -8039,6 +8451,7 @@ var DesktopLayout4 = (props) => {
8039
8451
  const symbolInfoBarView = /* @__PURE__ */ jsxRuntime.jsx(
8040
8452
  ui.Box,
8041
8453
  {
8454
+ className: "oui-trading-symbolInfoBar-container",
8042
8455
  intensity: 900,
8043
8456
  r: "2xl",
8044
8457
  px: 3,
@@ -8092,7 +8505,7 @@ var DesktopLayout4 = (props) => {
8092
8505
  intensity: 900,
8093
8506
  r: "2xl",
8094
8507
  style: { flex: 1, minWidth: tradingViewMinWidth },
8095
- className: "oui-overflow-hidden",
8508
+ className: "oui-trading-tradingview-container oui-overflow-hidden",
8096
8509
  children: tradingviewWidget
8097
8510
  }
8098
8511
  );
@@ -8107,7 +8520,7 @@ var DesktopLayout4 = (props) => {
8107
8520
  maxWidth: horizontalDraggable ? orderbookMaxWidth : orderbookMinWidth,
8108
8521
  width: orderBookSplitSize
8109
8522
  },
8110
- className: "oui-overflow-hidden",
8523
+ className: "oui-trading-orderBook-container oui-overflow-hidden",
8111
8524
  children: orderbookWidget
8112
8525
  }
8113
8526
  );
@@ -8131,18 +8544,18 @@ var DesktopLayout4 = (props) => {
8131
8544
  minHeight: dataListInitialHeight
8132
8545
  // minHeight: `max(${dataListMinHeight}px, calc(100vh - ${symbolInfoBarHeight}px - ${orderbookMaxHeight}px - ${space}px))`,
8133
8546
  },
8134
- className: "oui-overflow-hidden",
8547
+ className: "oui-trading-dataList-container oui-overflow-hidden",
8135
8548
  children: dataListWidget
8136
8549
  }
8137
8550
  );
8138
8551
  const orderInteractionWidgets = React12.useMemo(() => {
8139
8552
  return {
8140
8553
  margin: {
8141
- className: "",
8554
+ className: "oui-trading-riskRate-container",
8142
8555
  element: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyRiskRateWidget, {}) })
8143
8556
  },
8144
8557
  assets: {
8145
- className: "oui-border oui-border-line-12",
8558
+ className: "oui-trading-assetsView-container oui-border oui-border-line-12",
8146
8559
  element: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8147
8560
  /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
8148
8561
  LazyAssetViewWidget,
@@ -8160,7 +8573,7 @@ var DesktopLayout4 = (props) => {
8160
8573
  ] })
8161
8574
  },
8162
8575
  orderEntry: {
8163
- className: "",
8576
+ className: "oui-trading-orderEntry-container",
8164
8577
  element: /* @__PURE__ */ jsxRuntime.jsx(
8165
8578
  uiOrderEntry.OrderEntryWidget,
8166
8579
  {
@@ -8179,6 +8592,7 @@ var DesktopLayout4 = (props) => {
8179
8592
  const orderEntryView = /* @__PURE__ */ jsxRuntime.jsx(
8180
8593
  ui.Flex,
8181
8594
  {
8595
+ className: "oui-trading-orderEntry-container",
8182
8596
  gapY: 2,
8183
8597
  direction: "column",
8184
8598
  height: "100%",
@@ -8294,7 +8708,10 @@ var DesktopLayout4 = (props) => {
8294
8708
  marketLayout === "top" && /* @__PURE__ */ jsxRuntime.jsx(
8295
8709
  ui.Box,
8296
8710
  {
8297
- className: ui.cn("oui-mt-2 oui-max-h-8 oui-px-3", props.className),
8711
+ className: ui.cn(
8712
+ "oui-trading-markets-container oui-mt-2 oui-max-h-8 oui-px-3",
8713
+ props.className
8714
+ ),
8298
8715
  children: horizontalMarketsView
8299
8716
  }
8300
8717
  ),
@@ -8690,14 +9107,8 @@ var MaybeEqual = () => {
8690
9107
  viewBox: "0 0 8 8",
8691
9108
  fill: "none",
8692
9109
  xmlns: "http://www.w3.org/2000/svg",
8693
- children: /* @__PURE__ */ jsxRuntime.jsx(
8694
- "path",
8695
- {
8696
- d: "M6.456 3.48a3.5 3.5 0 0 0 .431-.567 9 9 0 0 0 .361-.654l-.648-.66-.107.185q-.071.12-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.114q-.307 0-.666-.194t-.742-.42q-.383-.227-.777-.42a1.7 1.7 0 0 0-.771-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.404 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.298-.395.742-.396.347 0 .7.194.354.193.721.42.37.227.763.42.396.195.826.195.374.001.665-.155.29-.151.526-.404m.352 2.941a3.5 3.5 0 0 0 .431-.566q.196-.315.361-.654l-.648-.66-.107.184-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.115q-.307 0-.666-.195-.36-.193-.742-.42-.383-.226-.778-.42a1.7 1.7 0 0 0-.77-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.405 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.297-.395.742-.396.347 0 .7.194.354.193.721.42.369.226.763.42.396.194.826.194.374.001.665-.154.29-.152.526-.404",
8697
- fill: "#fff",
8698
- fillOpacity: ".54"
8699
- }
8700
- )
9110
+ className: "oui-fill-base-contrast-54",
9111
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.456 3.48a3.5 3.5 0 0 0 .431-.567 9 9 0 0 0 .361-.654l-.648-.66-.107.185q-.071.12-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.114q-.307 0-.666-.194t-.742-.42q-.383-.227-.777-.42a1.7 1.7 0 0 0-.771-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.404 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.298-.395.742-.396.347 0 .7.194.354.193.721.42.37.227.763.42.396.195.826.195.374.001.665-.155.29-.151.526-.404m.352 2.941a3.5 3.5 0 0 0 .431-.566q.196-.315.361-.654l-.648-.66-.107.184-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.115q-.307 0-.666-.195-.36-.193-.742-.42-.383-.226-.778-.42a1.7 1.7 0 0 0-.77-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.405 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.297-.395.742-.396.347 0 .7.194.354.193.721.42.369.226.763.42.396.194.826.194.374.001.665-.154.29-.152.526-.404" })
8701
9112
  }
8702
9113
  );
8703
9114
  };