@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.6

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 (207) hide show
  1. package/dist/cjs/components/assets-list-cell/assets-list-cell.cjs +1 -1
  2. package/dist/cjs/components/badge/badge.cjs +1 -1
  3. package/dist/cjs/components/badge/chip.cjs +1 -0
  4. package/dist/cjs/components/badge/index.cjs +1 -1
  5. package/dist/cjs/components/base/borrow-rate-block/borrow-rate-block.cjs +1 -1
  6. package/dist/cjs/components/base/chart-with-side-card/chart-with-side-card.cjs +1 -1
  7. package/dist/cjs/components/base/history-chart/history-chart.cjs +1 -1
  8. package/dist/cjs/components/base/index.cjs +1 -1
  9. package/dist/cjs/components/base/info-list/info-list.cjs +1 -1
  10. package/dist/cjs/components/base/leverage-input/leverage-input.cjs +1 -1
  11. package/dist/cjs/components/base/leverage-preset-chips/constants.cjs +1 -0
  12. package/dist/cjs/components/base/leverage-preset-chips/index.cjs +1 -0
  13. package/dist/cjs/components/base/leverage-preset-chips/leverage-preset-chips.cjs +1 -0
  14. package/dist/cjs/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.cjs +1 -1
  15. package/dist/cjs/components/base/strategy-apy-breakdown-card/constants.cjs +1 -1
  16. package/dist/cjs/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.cjs +1 -1
  17. package/dist/cjs/components/base/title-meta/constants.cjs +1 -1
  18. package/dist/cjs/components/base/title-meta/title-meta.cjs +1 -1
  19. package/dist/cjs/components/base/values/index.cjs +1 -1
  20. package/dist/cjs/components/base/values/position-status-badge.cjs +1 -0
  21. package/dist/cjs/components/base/values/position-type-badge.cjs +1 -1
  22. package/dist/cjs/components/base-table/base-table-line.cjs +1 -0
  23. package/dist/cjs/components/base-table/base-table.cjs +1 -0
  24. package/dist/cjs/components/base-table/constants.cjs +1 -0
  25. package/dist/cjs/components/base-table/index.cjs +1 -0
  26. package/dist/cjs/components/base-table/types.cjs +1 -0
  27. package/dist/cjs/components/block-sync-pill/block-sync-pill.cjs +1 -1
  28. package/dist/cjs/components/checkbox/checkbox-labeled.cjs +1 -1
  29. package/dist/cjs/components/client-adapters/styled-rounded-image/styled-rounded-image.cjs +1 -1
  30. package/dist/cjs/components/collateral-allocation-tooltip/allocation-wheel.cjs +1 -0
  31. package/dist/cjs/components/collateral-allocation-tooltip/collateral-allocation-tooltip.cjs +1 -0
  32. package/dist/cjs/components/collateral-allocation-tooltip/constants.cjs +1 -0
  33. package/dist/cjs/components/collateral-allocation-tooltip/index.cjs +1 -0
  34. package/dist/cjs/components/composites/index.cjs +1 -1
  35. package/dist/cjs/components/composites/pool-assets-table/constants.cjs +1 -0
  36. package/dist/cjs/components/composites/pool-assets-table/index.cjs +1 -1
  37. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table-head.cjs +1 -1
  38. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table-row.cjs +1 -1
  39. package/dist/cjs/components/composites/pool-assets-table/pool-assets-table.cjs +1 -1
  40. package/dist/cjs/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.cjs +1 -1
  41. package/dist/cjs/components/composites/tx-preview/confirm/dialog/index.cjs +1 -1
  42. package/dist/cjs/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.cjs +1 -0
  43. package/dist/cjs/components/composites/tx-preview/confirm/index.cjs +1 -1
  44. package/dist/cjs/components/composites/tx-preview/index.cjs +1 -1
  45. package/dist/cjs/components/compound-apy/compound-apy.cjs +1 -1
  46. package/dist/cjs/components/filter/filter-chip.cjs +1 -1
  47. package/dist/cjs/components/graph/default-config.cjs +1 -1
  48. package/dist/cjs/components/graph/graph-view.cjs +1 -1
  49. package/dist/cjs/components/graph/graph.cjs +1 -1
  50. package/dist/cjs/components/hf-indicator/hf-indicator.cjs +1 -0
  51. package/dist/cjs/components/hf-indicator/index.cjs +1 -0
  52. package/dist/cjs/components/index.cjs +1 -1
  53. package/dist/cjs/components/infinite-scroll/index.cjs +1 -0
  54. package/dist/cjs/components/infinite-scroll/infinite-scroll-wrapper.cjs +1 -0
  55. package/dist/cjs/components/name-cell/index.cjs +1 -0
  56. package/dist/cjs/components/name-cell/name-cell.cjs +1 -0
  57. package/dist/cjs/components/network-icon/index.cjs +1 -1
  58. package/dist/cjs/components/network-icon/network-indicator.cjs +1 -0
  59. package/dist/cjs/components/trading-view/trading-view.cjs +1 -1
  60. package/dist/cjs/components/with-copy/with-copy.cjs +1 -1
  61. package/dist/cjs/components/yield-breakdown-tooltip/yield-breakdown-tooltip.cjs +1 -1
  62. package/dist/cjs/configs/tailwind-preset.cjs +1 -1
  63. package/dist/cjs/hooks/index.cjs +1 -1
  64. package/dist/cjs/hooks/use-observed-width-key.cjs +1 -0
  65. package/dist/cjs/index.cjs +1 -1
  66. package/dist/cjs/locale/en.json.cjs +1 -1
  67. package/dist/cjs/utils/format-money.cjs +1 -1
  68. package/dist/cjs/utils/index.cjs +1 -1
  69. package/dist/cjs/utils/leverage-presets.cjs +1 -0
  70. package/dist/esm/components/assets-list-cell/assets-list-cell.js +161 -159
  71. package/dist/esm/components/badge/badge.js +14 -8
  72. package/dist/esm/components/badge/chip.js +47 -0
  73. package/dist/esm/components/badge/index.js +8 -3
  74. package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js +3 -2
  75. package/dist/esm/components/base/chart-with-side-card/chart-with-side-card.js +6 -6
  76. package/dist/esm/components/base/history-chart/history-chart.js +86 -46
  77. package/dist/esm/components/base/index.js +144 -138
  78. package/dist/esm/components/base/info-list/info-list.js +7 -8
  79. package/dist/esm/components/base/leverage-input/leverage-input.js +1 -1
  80. package/dist/esm/components/base/leverage-preset-chips/constants.js +7 -0
  81. package/dist/esm/components/base/leverage-preset-chips/index.js +6 -0
  82. package/dist/esm/components/base/leverage-preset-chips/leverage-preset-chips.js +39 -0
  83. package/dist/esm/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.js +23 -30
  84. package/dist/esm/components/base/strategy-apy-breakdown-card/constants.js +3 -2
  85. package/dist/esm/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.js +194 -32
  86. package/dist/esm/components/base/title-meta/constants.js +1 -0
  87. package/dist/esm/components/base/title-meta/title-meta.js +53 -33
  88. package/dist/esm/components/base/values/index.js +16 -14
  89. package/dist/esm/components/base/values/position-status-badge.js +26 -0
  90. package/dist/esm/components/base/values/position-type-badge.js +7 -6
  91. package/dist/esm/components/base-table/base-table-line.js +117 -0
  92. package/dist/esm/components/base-table/base-table.js +110 -0
  93. package/dist/esm/components/base-table/constants.js +12 -0
  94. package/dist/esm/components/base-table/index.js +9 -0
  95. package/dist/esm/components/base-table/types.js +1 -0
  96. package/dist/esm/components/block-sync-pill/block-sync-pill.js +9 -6
  97. package/dist/esm/components/checkbox/checkbox-labeled.js +7 -4
  98. package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js +7 -4
  99. package/dist/esm/components/collateral-allocation-tooltip/allocation-wheel.js +71 -0
  100. package/dist/esm/components/collateral-allocation-tooltip/collateral-allocation-tooltip.js +102 -0
  101. package/dist/esm/components/collateral-allocation-tooltip/constants.js +12 -0
  102. package/dist/esm/components/collateral-allocation-tooltip/index.js +9 -0
  103. package/dist/esm/components/composites/index.js +31 -31
  104. package/dist/esm/components/composites/pool-assets-table/constants.js +9 -0
  105. package/dist/esm/components/composites/pool-assets-table/index.js +8 -6
  106. package/dist/esm/components/composites/pool-assets-table/pool-assets-table-head.js +52 -30
  107. package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js +108 -76
  108. package/dist/esm/components/composites/pool-assets-table/pool-assets-table.js +44 -26
  109. package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.js +109 -52
  110. package/dist/esm/components/composites/tx-preview/confirm/dialog/index.js +8 -10
  111. package/dist/esm/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.js +1 -0
  112. package/dist/esm/components/composites/tx-preview/confirm/index.js +24 -26
  113. package/dist/esm/components/composites/tx-preview/index.js +24 -26
  114. package/dist/esm/components/compound-apy/compound-apy.js +85 -80
  115. package/dist/esm/components/filter/filter-chip.js +1 -0
  116. package/dist/esm/components/graph/default-config.js +20 -18
  117. package/dist/esm/components/graph/graph-view.js +32 -31
  118. package/dist/esm/components/graph/graph.js +459 -458
  119. package/dist/esm/components/hf-indicator/hf-indicator.js +33 -0
  120. package/dist/esm/components/hf-indicator/index.js +4 -0
  121. package/dist/esm/components/index.js +732 -701
  122. package/dist/esm/components/infinite-scroll/index.js +4 -0
  123. package/dist/esm/components/infinite-scroll/infinite-scroll-wrapper.js +30 -0
  124. package/dist/esm/components/name-cell/index.js +4 -0
  125. package/dist/esm/components/name-cell/name-cell.js +35 -0
  126. package/dist/esm/components/network-icon/index.js +4 -2
  127. package/dist/esm/components/network-icon/network-indicator.js +82 -0
  128. package/dist/esm/components/trading-view/trading-view.js +193 -155
  129. package/dist/esm/components/with-copy/with-copy.js +7 -4
  130. package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js +112 -169
  131. package/dist/esm/configs/tailwind-preset.js +13 -1
  132. package/dist/esm/hooks/index.js +20 -18
  133. package/dist/esm/hooks/use-observed-width-key.js +24 -0
  134. package/dist/esm/index.js +881 -842
  135. package/dist/esm/locale/en.json.js +21 -18
  136. package/dist/esm/utils/format-money.js +59 -41
  137. package/dist/esm/utils/index.js +87 -83
  138. package/dist/esm/utils/leverage-presets.js +13 -0
  139. package/dist/globals.css +1 -1
  140. package/dist/types/components/assets-list-cell/assets-list-cell.d.ts +3 -0
  141. package/dist/types/components/badge/badge.d.ts +2 -1
  142. package/dist/types/components/badge/chip.d.ts +22 -0
  143. package/dist/types/components/badge/index.d.ts +1 -0
  144. package/dist/types/components/base/history-chart/history-chart.d.ts +13 -3
  145. package/dist/types/components/base/index.d.ts +1 -0
  146. package/dist/types/components/base/leverage-input/leverage-input.d.ts +1 -1
  147. package/dist/types/components/base/leverage-preset-chips/constants.d.ts +4 -0
  148. package/dist/types/components/base/leverage-preset-chips/index.d.ts +2 -0
  149. package/dist/types/components/base/leverage-preset-chips/leverage-preset-chips.d.ts +13 -0
  150. package/dist/types/components/base/liquidation-params-table/liquidation-params-table.d.ts +2 -2
  151. package/dist/types/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.d.ts +4 -5
  152. package/dist/types/components/base/strategy-apy-breakdown-card/constants.d.ts +1 -0
  153. package/dist/types/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.d.ts +12 -4
  154. package/dist/types/components/base/title-meta/constants.d.ts +1 -0
  155. package/dist/types/components/base/title-meta/title-meta.d.ts +9 -1
  156. package/dist/types/components/base/values/index.d.ts +1 -0
  157. package/dist/types/components/base/values/position-status-badge.d.ts +7 -0
  158. package/dist/types/components/base/values/position-type-badge.d.ts +1 -1
  159. package/dist/types/components/base-table/base-table-line.d.ts +21 -0
  160. package/dist/types/components/base-table/base-table.d.ts +19 -0
  161. package/dist/types/components/base-table/constants.d.ts +8 -0
  162. package/dist/types/components/base-table/index.d.ts +3 -0
  163. package/dist/types/components/base-table/types.d.ts +37 -0
  164. package/dist/types/components/collateral-allocation-tooltip/allocation-wheel.d.ts +10 -0
  165. package/dist/types/components/collateral-allocation-tooltip/collateral-allocation-tooltip.d.ts +23 -0
  166. package/dist/types/components/collateral-allocation-tooltip/constants.d.ts +8 -0
  167. package/dist/types/components/collateral-allocation-tooltip/index.d.ts +3 -0
  168. package/dist/types/components/composites/pool-assets-table/constants.d.ts +6 -0
  169. package/dist/types/components/composites/pool-assets-table/index.d.ts +1 -0
  170. package/dist/types/components/composites/pool-assets-table/pool-assets-table-head.d.ts +1 -2
  171. package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts +8 -8
  172. package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts +7 -20
  173. package/dist/types/components/composites/pool-assets-table/types.d.ts +4 -12
  174. package/dist/types/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.d.ts +23 -19
  175. package/dist/types/components/composites/tx-preview/confirm/dialog/index.d.ts +2 -2
  176. package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmPhase.d.ts +0 -3
  177. package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.d.ts +97 -0
  178. package/dist/types/components/graph/graph-view.d.ts +1 -1
  179. package/dist/types/components/graph/graph.d.ts +4 -0
  180. package/dist/types/components/hf-indicator/hf-indicator.d.ts +8 -0
  181. package/dist/types/components/hf-indicator/index.d.ts +1 -0
  182. package/dist/types/components/index.d.ts +5 -0
  183. package/dist/types/components/infinite-scroll/index.d.ts +1 -0
  184. package/dist/types/components/infinite-scroll/infinite-scroll-wrapper.d.ts +11 -0
  185. package/dist/types/components/name-cell/index.d.ts +1 -0
  186. package/dist/types/components/name-cell/name-cell.d.ts +13 -0
  187. package/dist/types/components/network-icon/index.d.ts +1 -0
  188. package/dist/types/components/network-icon/network-indicator.d.ts +23 -0
  189. package/dist/types/components/trading-view/trading-view.d.ts +10 -3
  190. package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts +6 -8
  191. package/dist/types/configs/tailwind-preset.d.ts +12 -0
  192. package/dist/types/hooks/index.d.ts +1 -0
  193. package/dist/types/hooks/use-observed-width-key.d.ts +8 -0
  194. package/dist/types/index.d.ts +6 -1
  195. package/dist/types/locale/en.json.d.ts +23 -18
  196. package/dist/types/utils/format-money.d.ts +11 -5
  197. package/dist/types/utils/index.d.ts +2 -1
  198. package/dist/types/utils/leverage-presets.d.ts +7 -0
  199. package/package.json +1 -1
  200. package/src/styles/base.css +30 -0
  201. package/src/styles/theme.css +16 -0
  202. package/dist/cjs/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.cjs +0 -1
  203. package/dist/cjs/components/composites/tx-preview/confirm/dialog/TransactionConfirmPageView.cjs +0 -1
  204. package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.js +0 -177
  205. package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmPageView.js +0 -54
  206. package/dist/types/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.d.ts +0 -17
  207. package/dist/types/components/composites/tx-preview/confirm/dialog/TransactionConfirmPageView.d.ts +0 -16
@@ -0,0 +1,4 @@
1
+ import { InfiniteScrollWrapper as o } from "./infinite-scroll-wrapper.js";
2
+ export {
3
+ o as InfiniteScrollWrapper
4
+ };
@@ -0,0 +1,30 @@
1
+ import { jsxs as r, Fragment as a, jsx as e } from "react/jsx-runtime";
2
+ import { DialogContainer as l } from "../dialog/dialog-container.js";
3
+ import { FormattedMessageTyped as p } from "../typed-intl/index.js";
4
+ import { Typography as s } from "../typography/typography.js";
5
+ import { VSpace as m } from "../vspace/vspace.js";
6
+ function g({
7
+ hasMore: o,
8
+ dataLength: t,
9
+ children: i,
10
+ onNextLoad: n
11
+ }) {
12
+ return /* @__PURE__ */ r("div", { className: "w-full", children: [
13
+ i,
14
+ o && t > 0 && /* @__PURE__ */ r(a, { children: [
15
+ /* @__PURE__ */ e(m, { size: "md" }),
16
+ /* @__PURE__ */ e(l, { padding: !1, children: /* @__PURE__ */ e(
17
+ "button",
18
+ {
19
+ type: "button",
20
+ onClick: n,
21
+ className: "flex w-full cursor-pointer items-center justify-center gap-2 p-3.5 hover:text-white",
22
+ children: /* @__PURE__ */ e(s, { as: "span", variant: "bodySmall", color: "secondary", children: /* @__PURE__ */ e(p, { messageId: "components.infiniteScrollWrapper.showMore" }) })
23
+ }
24
+ ) })
25
+ ] })
26
+ ] });
27
+ }
28
+ export {
29
+ g as InfiniteScrollWrapper
30
+ };
@@ -0,0 +1,4 @@
1
+ import { NameCell as m } from "./name-cell.js";
2
+ export {
3
+ m as NameCell
4
+ };
@@ -0,0 +1,35 @@
1
+ import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
+ import { Typography as l } from "../typography/typography.js";
3
+ function f({
4
+ title: c,
5
+ subtitle: r,
6
+ chips: o,
7
+ caption: s,
8
+ leading: n,
9
+ disabledStyle: t = !1
10
+ }) {
11
+ const i = /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col items-start justify-center gap-0.5", children: [
12
+ /* @__PURE__ */ a("div", { className: "flex min-w-0 w-full items-start gap-x-2", children: [
13
+ /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 break-words [overflow-wrap:anywhere]", children: c }),
14
+ o
15
+ ] }),
16
+ r && /* @__PURE__ */ e(
17
+ l,
18
+ {
19
+ variant: "caption",
20
+ color: "secondary",
21
+ as: "span",
22
+ className: "block min-w-0 text-xs",
23
+ children: r
24
+ }
25
+ ),
26
+ t && s && /* @__PURE__ */ e(l, { as: "span", variant: "caption", className: "leading-none", children: s })
27
+ ] });
28
+ return n ? /* @__PURE__ */ a("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-x-3", children: [
29
+ n,
30
+ i
31
+ ] }) : i;
32
+ }
33
+ export {
34
+ f as NameCell
35
+ };
@@ -1,4 +1,6 @@
1
- import { NetworkIcon as e } from "./network-icon.js";
1
+ import { NetworkIcon as t } from "./network-icon.js";
2
+ import { NetworkIndicator as c } from "./network-indicator.js";
2
3
  export {
3
- e as NetworkIcon
4
+ t as NetworkIcon,
5
+ c as NetworkIndicator
4
6
  };
@@ -0,0 +1,82 @@
1
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
2
+ import { faChevronDown as h } from "@fortawesome/free-solid-svg-icons";
3
+ import { forwardRef as b } from "react";
4
+ import "../buttons/back-button/back-button.js";
5
+ import { Button as y } from "../buttons/button/button.js";
6
+ import "../buttons/copy-button/copy-button.js";
7
+ import "../buttons/external-button/external-button.js";
8
+ import "../buttons/filter-button/filter-button.js";
9
+ import "../buttons/navigation-button/navigation-button.js";
10
+ import "@gearbox-protocol/sdk";
11
+ import { cn as a } from "../../utils/cn.js";
12
+ import "sonner";
13
+ import "@gearbox-protocol/sdk/common-utils";
14
+ import "luxon";
15
+ import "../../utils/z-index.js";
16
+ import "../buttons/tab-button/tab-button.js";
17
+ import { FaIcon as u } from "../icons/fa-icon.js";
18
+ import { FormattedMessageTyped as I } from "../typed-intl/index.js";
19
+ import { Typography as w } from "../typography/typography.js";
20
+ import { NetworkIcon as v } from "./network-icon.js";
21
+ const x = {
22
+ sm: "sm",
23
+ md: "default",
24
+ default: "default",
25
+ lg: "lg"
26
+ }, N = b(
27
+ ({
28
+ network: m,
29
+ chainId: k,
30
+ size: d = "md",
31
+ iconSize: n = 20,
32
+ chevronSize: o = 12,
33
+ showTitle: s = !0,
34
+ opened: p,
35
+ onClick: t,
36
+ interactive: l,
37
+ className: c,
38
+ ...f
39
+ }, g) => {
40
+ const e = l ?? !!t;
41
+ return /* @__PURE__ */ r(
42
+ y,
43
+ {
44
+ ref: g,
45
+ variant: "outline",
46
+ size: x[d],
47
+ disabled: !e,
48
+ onClick: t,
49
+ className: a(
50
+ c,
51
+ "min-w-fit",
52
+ "h-10 rounded-[20px]",
53
+ "hover:bg-transparent hover:border hover:border-gray-60",
54
+ "disabled:text-primary-foreground disabled:bg-transparent disabled:border disabled:border-gray-40"
55
+ ),
56
+ ...f,
57
+ children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
58
+ s && /* @__PURE__ */ i(w, { as: "span", variant: "bodySmall", color: "secondary", children: [
59
+ /* @__PURE__ */ r(I, { messageId: "components.networkIndicator.title" }),
60
+ ":"
61
+ ] }),
62
+ /* @__PURE__ */ r(v, { network: m, size: n }),
63
+ e && /* @__PURE__ */ r(
64
+ u,
65
+ {
66
+ icon: h,
67
+ className: a(
68
+ "text-secondary-foreground transition-transform",
69
+ p && "rotate-180"
70
+ ),
71
+ style: { width: o, height: o }
72
+ }
73
+ )
74
+ ] })
75
+ }
76
+ );
77
+ }
78
+ );
79
+ N.displayName = "NetworkIndicator";
80
+ export {
81
+ N as NetworkIndicator
82
+ };
@@ -1,17 +1,18 @@
1
- import { jsxs as h, jsx as i } from "react/jsx-runtime";
2
- import { useMemo as g, useCallback as ce, useRef as N } from "react";
3
- import { toast as ue } from "sonner";
4
- import { useIsMobile as me } from "../../hooks/use-media-query.js";
1
+ import { jsxs as p, jsx as n } from "react/jsx-runtime";
2
+ import { useMemo as I, useCallback as fe, useRef as C } from "react";
3
+ import { toast as be } from "sonner";
4
+ import { SectionHeading as we } from "../base/section-heading/section-heading.js";
5
+ import { useIsMobile as he } from "../../hooks/use-media-query.js";
5
6
  import "@gearbox-protocol/sdk";
6
- import { cn as de } from "../../utils/cn.js";
7
+ import { cn as pe } from "../../utils/cn.js";
7
8
  import "@gearbox-protocol/sdk/common-utils";
8
9
  import "luxon";
9
10
  import "../../utils/z-index.js";
10
- import { RangeButtons as fe } from "../buttons/range-buttons/range-buttons.js";
11
- import { DEFAULT_SERIES_COLORS as j, getSeriesColorPalette as ae, GraphLegend as we } from "../graph/graph.js";
11
+ import { DEFAULT_SERIES_COLORS as T, getSeriesColorPalette as ve, GraphLegend as ge } from "../graph/graph.js";
12
12
  import { GraphViewWithData as xe } from "../graph/graph-view.js";
13
- import { GraphDropdown as ve } from "./graph-dropdown.js";
14
- const pe = ({ size: e = 16 }) => /* @__PURE__ */ h(
13
+ import { Select as Se, SelectTrigger as ye, SelectValue as Ae, SelectContent as Ie, SelectItem as Ce } from "../select/select.js";
14
+ import { GraphDropdown as Ne } from "./graph-dropdown.js";
15
+ const Me = ({ size: e = 16 }) => /* @__PURE__ */ p(
15
16
  "svg",
16
17
  {
17
18
  width: e,
@@ -24,11 +25,11 @@ const pe = ({ size: e = 16 }) => /* @__PURE__ */ h(
24
25
  strokeLinejoin: "round",
25
26
  "aria-label": "Expand fullscreen",
26
27
  children: [
27
- /* @__PURE__ */ i("title", { children: "Expand fullscreen" }),
28
- /* @__PURE__ */ i("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
28
+ /* @__PURE__ */ n("title", { children: "Expand fullscreen" }),
29
+ /* @__PURE__ */ n("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
29
30
  ]
30
31
  }
31
- ), be = ({ size: e = 16 }) => /* @__PURE__ */ h(
32
+ ), ke = ({ size: e = 16 }) => /* @__PURE__ */ p(
32
33
  "svg",
33
34
  {
34
35
  width: e,
@@ -41,132 +42,138 @@ const pe = ({ size: e = 16 }) => /* @__PURE__ */ h(
41
42
  strokeLinejoin: "round",
42
43
  "aria-label": "Exit fullscreen",
43
44
  children: [
44
- /* @__PURE__ */ i("title", { children: "Exit fullscreen" }),
45
- /* @__PURE__ */ i("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
45
+ /* @__PURE__ */ n("title", { children: "Exit fullscreen" }),
46
+ /* @__PURE__ */ n("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
46
47
  ]
47
48
  }
48
- ), $ = "ui-kit:tradingview-series-colors:";
49
- function L(e) {
49
+ ), Ee = {
50
+ timeScale: { borderVisible: !1 },
51
+ rightPriceScale: { borderVisible: !1 },
52
+ leftPriceScale: { borderVisible: !1 }
53
+ }, X = "ui-kit:tradingview-series-colors:";
54
+ function j(e) {
50
55
  if (typeof window > "u" || !window.localStorage)
51
56
  return /* @__PURE__ */ new Map();
52
57
  try {
53
- const o = window.localStorage.getItem($ + e);
54
- if (!o) return /* @__PURE__ */ new Map();
55
- const c = JSON.parse(o);
58
+ const r = window.localStorage.getItem(X + e);
59
+ if (!r) return /* @__PURE__ */ new Map();
60
+ const c = JSON.parse(r);
56
61
  return c == null || typeof c != "object" ? /* @__PURE__ */ new Map() : new Map(
57
62
  Object.entries(c).filter(
58
- ([, r]) => typeof r == "number" && r >= 0 && r < j.length
63
+ ([, o]) => typeof o == "number" && o >= 0 && o < T.length
59
64
  )
60
65
  );
61
66
  } catch {
62
67
  return /* @__PURE__ */ new Map();
63
68
  }
64
69
  }
65
- function ye(e, o) {
70
+ function Re(e, r) {
66
71
  if (!(typeof window > "u" || !window.localStorage))
67
72
  try {
68
73
  window.localStorage.setItem(
69
- $ + e,
70
- JSON.stringify(Object.fromEntries(o))
74
+ X + e,
75
+ JSON.stringify(Object.fromEntries(r))
71
76
  );
72
77
  } catch {
73
78
  }
74
79
  }
75
- function J(e, o) {
76
- if (o.size === 0) return;
77
- const c = L(e);
78
- for (const [r, v] of o)
79
- c.set(r, v);
80
- ye(e, c);
80
+ function $(e, r) {
81
+ if (r.size === 0) return;
82
+ const c = j(e);
83
+ for (const [o, v] of r)
84
+ c.set(o, v);
85
+ Re(e, c);
81
86
  }
82
- function ze({
87
+ function Ze({
83
88
  data: e,
84
- yMeasureUnit: o,
89
+ yMeasureUnit: r,
85
90
  height: c = 306,
86
- defaultGraph: r,
91
+ defaultGraph: o,
87
92
  onGraphSelected: v,
88
93
  graphs: f,
89
- isMultipleSelect: X,
90
- range: q,
91
- rangeList: R,
92
- setRange: Q,
93
- onGraphExpanded: I,
94
- isGraphExpanded: Y,
95
- onUnselectSeries: O,
96
- graphsWithNoData: Z,
97
- loadingGraphs: A,
98
- isLoading: T,
94
+ isMultipleSelect: q,
95
+ range: Q,
96
+ rangeList: S,
97
+ setRange: Y,
98
+ onGraphExpanded: N,
99
+ isGraphExpanded: Z,
100
+ onUnselectSeries: L,
101
+ graphsWithNoData: D,
102
+ loadingGraphs: M,
103
+ isLoading: V,
99
104
  noDataMessage: _ = "No data available for this graph",
100
- currentValueDecimals: D,
105
+ currentValueDecimals: P,
101
106
  containerClassName: U,
102
107
  useSharedPriceScale: K,
103
- showCurrentValue: P,
104
- yScaleMin: G,
105
- yScaleMinMultiple: ee,
106
- seriesColorPersistenceKey: u,
107
- ...z
108
+ showCurrentValue: G,
109
+ yScaleMin: ee,
110
+ yScaleMinMultiple: te,
111
+ seriesColorPersistenceKey: d,
112
+ title: re,
113
+ trailing: k,
114
+ ...oe
108
115
  }) {
109
- const p = g(() => Array.isArray(e) ? e : e ? [e] : [], [e]), C = g(() => Array.isArray(e) && e.length > 1, [e]), F = me(), te = ce(
110
- (w, y) => {
111
- ue.error(_);
116
+ const g = I(() => Array.isArray(e) ? e : e ? [e] : [], [e]), ne = I(() => Array.isArray(e) && e.length > 1, [e]), z = he(), le = fe(
117
+ (u, y) => {
118
+ be.error(_);
112
119
  },
113
120
  [_]
114
- ), oe = g(() => {
115
- if (o)
116
- return Array.isArray(o) ? o[0] : o;
117
- }, [o]), V = !!(v && f && r), l = N(/* @__PURE__ */ new Map()), a = N(0), B = N(!1);
118
- if (f && f.length > 0 && !B.current) {
119
- B.current = !0;
120
- const w = u ? L(u) : /* @__PURE__ */ new Map(), y = String(f[0].value);
121
- l.current.set(y, 0), a.current = 1;
121
+ ), ie = I(() => {
122
+ if (r)
123
+ return Array.isArray(r) ? r[0] : r;
124
+ }, [r]), se = !!(v && f && o), i = C(/* @__PURE__ */ new Map()), b = C(0), F = C(!1);
125
+ if (f && f.length > 0 && !F.current) {
126
+ F.current = !0;
127
+ const u = d ? j(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
128
+ i.current.set(y, 0), b.current = 1;
122
129
  for (let t = 1; t < f.length; t++) {
123
- const m = String(f[t].value);
124
- if (l.current.has(m)) continue;
125
- const b = w.get(m) ?? t;
126
- l.current.set(m, b), a.current = Math.max(a.current, b + 1);
130
+ const a = String(f[t].value);
131
+ if (i.current.has(a)) continue;
132
+ const x = u.get(a) ?? t;
133
+ i.current.set(a, x), b.current = Math.max(b.current, x + 1);
127
134
  }
128
- u && J(
129
- u,
130
- l.current
135
+ d && $(
136
+ d,
137
+ i.current
131
138
  );
132
139
  }
133
- const W = g(() => {
134
- const w = Array.isArray(o) ? o : void 0;
135
- if (u) {
136
- const t = L(u);
137
- for (const [m, x] of t)
138
- l.current.has(m) || (l.current.set(m, x), a.current = Math.max(
139
- a.current,
140
- x + 1
140
+ const w = I(() => {
141
+ const u = Array.isArray(r) ? r : void 0;
142
+ if (d) {
143
+ const t = j(d);
144
+ for (const [a, h] of t)
145
+ i.current.has(a) || (i.current.set(a, h), b.current = Math.max(
146
+ b.current,
147
+ h + 1
141
148
  ));
142
149
  }
143
- const y = p.map((t, m) => {
144
- const x = t?.title || `Series ${m + 1}`, b = r != null ? Array.isArray(r) ? r[0]?.value ?? r[0] : typeof r == "object" && "value" in r ? r.value : r : null, E = p.length === 1 ? b != null ? String(b) : "single" : t?.id || x;
145
- if (!l.current.has(E)) {
146
- const n = new Set(
147
- Array.from(l.current.values())
150
+ const y = g.map((t, a) => {
151
+ const h = t?.title || `Series ${a + 1}`, x = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, R = g.length === 1 ? x != null ? String(x) : "single" : t?.id || h;
152
+ if (!i.current.has(R)) {
153
+ const l = new Set(
154
+ Array.from(i.current.values())
148
155
  );
149
- let s = a.current;
150
- for (let d = 0; d < j.length; d++) {
151
- const S = (a.current + d) % j.length;
152
- if (!n.has(S)) {
153
- s = S;
156
+ let s = b.current;
157
+ for (let m = 0; m < T.length; m++) {
158
+ const A = (b.current + m) % T.length;
159
+ if (!l.has(A)) {
160
+ s = A;
154
161
  break;
155
162
  }
156
163
  }
157
- l.current.set(E, s), a.current = s + 1;
164
+ i.current.set(R, s), b.current = s + 1;
158
165
  }
159
- const le = l.current.get(E) ?? 0, k = ae(le), se = [...t?.data || []].sort((n, s) => {
160
- const d = typeof n.time == "number" ? n.time : Number(n.time), S = typeof s.time == "number" ? s.time : Number(s.time);
161
- return d - S;
162
- }).reduce((n, s) => {
163
- const d = s.time;
164
- return n.length === 0 || n[n.length - 1].time !== d ? n.push({ time: d, value: s.value }) : n[n.length - 1] = { time: d, value: s.value }, n;
165
- }, []), H = t?.lineColor ?? t?.color ?? void 0;
166
+ const ae = i.current.get(R) ?? 0, O = ve(ae), me = [...t?.data || []].sort((l, s) => {
167
+ const m = typeof l.time == "number" ? l.time : Number(l.time), A = typeof s.time == "number" ? s.time : Number(s.time);
168
+ return m - A;
169
+ }).reduce((l, s) => {
170
+ const m = s.time;
171
+ return l.length === 0 || l[l.length - 1].time !== m ? l.push({ time: m, value: s.value }) : l[l.length - 1] = { time: m, value: s.value }, l;
172
+ }, []), J = t?.lineColor ?? t?.color ?? void 0;
166
173
  return {
167
- data: se,
168
- label: x,
169
- yMeasureUnit: w?.[m] ?? (Array.isArray(o) ? void 0 : o),
174
+ data: me,
175
+ label: h,
176
+ yMeasureUnit: u?.[a] ?? (Array.isArray(r) ? void 0 : r),
170
177
  ...t?.priceScaleId != null && {
171
178
  priceScaleId: t.priceScaleId
172
179
  },
@@ -176,8 +183,8 @@ function ze({
176
183
  ...t?.lineStyle != null && {
177
184
  lineStyle: t.lineStyle
178
185
  },
179
- ...H != null ? {
180
- lineColor: H,
186
+ ...J != null ? {
187
+ lineColor: J,
181
188
  ...t?.topColor != null && {
182
189
  topColor: t.topColor
183
190
  },
@@ -185,79 +192,110 @@ function ze({
185
192
  bottomColor: t.bottomColor
186
193
  }
187
194
  } : {
188
- color: k.line,
189
- topColor: k.top,
190
- bottomColor: k.bottom
195
+ color: O.line,
196
+ topColor: O.top,
197
+ bottomColor: O.bottom
191
198
  }
192
199
  };
193
200
  });
194
- return u && l.current.size > 0 && J(
195
- u,
196
- l.current
201
+ return d && i.current.size > 0 && $(
202
+ d,
203
+ i.current
197
204
  ), y;
198
- }, [p, r, o, u]), re = T !== void 0 ? T : A !== void 0 ? A.size > 0 : C && p.length > 0 ? p.some((w) => !w) : !e, ne = z.title, M = C && !V && !ne, ie = (!F && I || R.length > 0 || V || M) && /* @__PURE__ */ h("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
199
- /* @__PURE__ */ i("div", { className: "min-w-0", children: v && f && r ? /* @__PURE__ */ i(
200
- ve,
201
- {
202
- onSelected: v,
203
- items: f,
204
- defaultItem: r,
205
- multiple: X,
206
- graphsWithNoData: Z,
207
- loadingGraphs: A,
208
- onNoDataSelected: te
209
- }
210
- ) : M ? /* @__PURE__ */ i(
211
- we,
212
- {
213
- series: W,
214
- onUnselect: O,
215
- inline: !0
216
- }
217
- ) : null }),
218
- /* @__PURE__ */ h("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
219
- /* @__PURE__ */ i(fe, { range: q, rangeList: R, setRange: Q }),
220
- !F && I && /* @__PURE__ */ i(
205
+ }, [g, o, r, d]), H = V !== void 0 ? V : M !== void 0 ? M.size > 0 : ne && g.length > 0 ? g.some((u) => !u) : !e, B = C(w);
206
+ w.length > 0 && (B.current = w);
207
+ const W = w.length > 0 ? w : H ? B.current : w, E = re, ce = !z && N ? !0 : S.length > 0 || se || E != null || k != null, ue = v && f && o ? /* @__PURE__ */ n(
208
+ Ne,
209
+ {
210
+ onSelected: v,
211
+ items: f,
212
+ defaultItem: o,
213
+ multiple: q,
214
+ graphsWithNoData: D,
215
+ loadingGraphs: M,
216
+ onNoDataSelected: le
217
+ }
218
+ ) : E != null ? /* @__PURE__ */ n(we, { className: "min-w-0 truncate", children: E }) : null, de = ce && /* @__PURE__ */ p("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
219
+ /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: ue }),
220
+ /* @__PURE__ */ p("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
221
+ k,
222
+ k != null && S.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
223
+ S.length > 0 ? /* @__PURE__ */ p(Se, { value: Q, onValueChange: Y, children: [
224
+ /* @__PURE__ */ n(
225
+ ye,
226
+ {
227
+ size: "sm",
228
+ className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
229
+ children: /* @__PURE__ */ n(Ae, {})
230
+ }
231
+ ),
232
+ /* @__PURE__ */ n(Ie, { align: "end", children: S.map((u) => /* @__PURE__ */ n(Ce, { value: u.value, children: u.label }, u.value)) })
233
+ ] }) : null,
234
+ !z && N && /* @__PURE__ */ n(
221
235
  "button",
222
236
  {
223
237
  type: "button",
224
- className: "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center text-xs leading-[14px] font-medium text-center rounded-md border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted border-muted text-muted-foreground hover:border-secondary ml-1.5",
225
- onClick: I,
226
- children: Y ? /* @__PURE__ */ i(be, { size: 16 }) : /* @__PURE__ */ i(pe, { size: 16 })
238
+ className: "flex min-h-[26px] min-w-[44px] cursor-pointer items-center justify-center rounded-md border border-muted bg-muted px-2.5 py-1.5 text-center text-xs font-medium leading-[14px] text-muted-foreground transition-colors hover:border-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
239
+ onClick: N,
240
+ children: Z ? /* @__PURE__ */ n(ke, { size: 16 }) : /* @__PURE__ */ n(Me, { size: 16 })
227
241
  }
228
242
  )
229
243
  ] })
230
244
  ] });
231
- return /* @__PURE__ */ i(
245
+ return /* @__PURE__ */ p(
232
246
  "div",
233
247
  {
234
- style: {
235
- width: "100%",
236
- height: c ? `${c}px` : void 0
237
- },
238
- className: "w-full",
239
- children: /* @__PURE__ */ i(
240
- xe,
241
- {
242
- series: W,
243
- loading: re,
244
- toolbar: ie,
245
- size: c ? "full" : "default",
246
- containerClassName: de("h-full", U),
247
- showLegend: C && !M,
248
- onUnselectSeries: O,
249
- yMeasureUnit: oe,
250
- currentValueDecimals: D,
251
- useSharedPriceScale: K,
252
- showCurrentValue: P,
253
- yScaleMin: G,
254
- yScaleMinMultiple: ee,
255
- ...z
256
- }
257
- )
248
+ className: pe(
249
+ "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
250
+ U
251
+ ),
252
+ children: [
253
+ de,
254
+ /* @__PURE__ */ n(
255
+ "div",
256
+ {
257
+ style: {
258
+ width: "100%",
259
+ height: c ? `${c}px` : void 0
260
+ },
261
+ className: "w-full",
262
+ children: /* @__PURE__ */ n(
263
+ xe,
264
+ {
265
+ ...oe,
266
+ series: w,
267
+ loading: H,
268
+ size: c ? "full" : "default",
269
+ padding: "none",
270
+ variant: "ghost",
271
+ className: "rounded-md border border-border bg-card",
272
+ containerClassName: "h-full overflow-hidden rounded-none border-0 bg-transparent shadow-none",
273
+ showLegend: !1,
274
+ onUnselectSeries: L,
275
+ yMeasureUnit: ie,
276
+ currentValueDecimals: P,
277
+ useSharedPriceScale: K,
278
+ showCurrentValue: G,
279
+ yScaleMin: ee,
280
+ yScaleMinMultiple: te,
281
+ hideDefaultTooltip: !0,
282
+ optionsOverrides: Ee
283
+ }
284
+ )
285
+ }
286
+ ),
287
+ W.length > 0 ? /* @__PURE__ */ n(
288
+ ge,
289
+ {
290
+ series: W,
291
+ onUnselect: L,
292
+ inline: !0
293
+ }
294
+ ) : null
295
+ ]
258
296
  }
259
297
  );
260
298
  }
261
299
  export {
262
- ze as TradingView
300
+ Ze as TradingView
263
301
  };