@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/cjs/components/theme-toggle/theme-toggle.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_themeProvider = require('../theme-provider.cjs');
+
+function ThemeToggle() {
+  const { setTheme, actualTheme } = components_themeProvider.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(actualTheme === "dark" ? "light" : "dark"),
+      className: "rounded-md p-2 hover:bg-accent cursor-pointer",
+      "aria-label": "Toggle theme",
+      children: actualTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Light theme" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20v2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 12h2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Dark theme" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.ThemeToggle = ThemeToggle;

package/dist/cjs/components/token-icon/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tokenIcon_tokenIcon = require('./token-icon.cjs');
+
+
+
+exports.TokenIcon = components_tokenIcon_tokenIcon.TokenIcon;

package/dist/cjs/components/token-icon/token-icon.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components_image_image = require('../image/image.cjs');
+
+function TokenIcon({
+  symbol,
+  size = 48,
+  className,
+  ImageComponent = components_image_image.Image
+}) {
+  const name = symbol.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
+  const defaultSrc = "https://static.gearbox.fi/tokens/default.svg";
+  const [src, setSrc] = React.useState(
+    `https://static.gearbox.fi/tokens/${name}.svg`
+  );
+  const [isLoading, setIsLoading] = React.useState(true);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        display: "inline-block",
+        border: "none"
+      },
+      children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              backgroundColor: "#9ca3af",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              position: "relative",
+              opacity: isLoading ? 0 : 1,
+              transition: "opacity 0.3s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ImageComponent,
+              {
+                src,
+                alt: "",
+                width: size,
+                height: size,
+                className,
+                onError: () => setSrc(defaultSrc),
+                onLoad: () => setIsLoading(false)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+          }
+        ` })
+      ]
+    }
+  );
+}
+
+exports.TokenIcon = TokenIcon;

package/dist/cjs/components/token-symbol/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tokenSymbol_tokenSymbol = require('./token-symbol.cjs');
+
+
+
+exports.TokenSymbol = components_tokenSymbol_tokenSymbol.TokenSymbol;

package/dist/cjs/components/token-symbol/token-symbol.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_tokenIcon_tokenIcon = require('../token-icon/token-icon.cjs');
+require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function getTokenSymbol(token) {
+  if (!token) return void 0;
+  if (typeof token === "string") return token;
+  return token.symbol;
+}
+function getTokenTitle(token) {
+  if (!token) return void 0;
+  if (typeof token === "string") return token;
+  return token.title;
+}
+function TokenSymbol({
+  token,
+  title,
+  className,
+  comment,
+  showIcon = true,
+  showSymbol = false,
+  size = 24,
+  chainId,
+  network,
+  maxLength,
+  ...props
+}) {
+  const symbol = getTokenSymbol(token);
+  const tokenTitle = title || getTokenTitle(token);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-3", className), ...props, children: [
+    showIcon && symbol && /* @__PURE__ */ jsxRuntime.jsx(
+      components_tokenIcon_tokenIcon.TokenIcon,
+      {
+        symbol,
+        size,
+        className: "rounded-full border-0"
+      }
+    ),
+    showSymbol && tokenTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: tokenTitle }),
+      comment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+
+exports.TokenSymbol = TokenSymbol;

package/dist/cjs/components/tooltip/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tooltip_tooltip = require('./tooltip.cjs');
+
+
+
+exports.Tooltip = components_tooltip_tooltip.Tooltip;
+exports.TooltipContent = components_tooltip_tooltip.TooltipContent;
+exports.TooltipProvider = components_tooltip_tooltip.TooltipProvider;
+exports.TooltipTrigger = components_tooltip_tooltip.TooltipTrigger;

package/dist/cjs/components/tooltip/tooltip.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const TooltipPrimitive = require('@radix-ui/react-tooltip');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TooltipProvider = TooltipPrimitive__namespace.Provider;
+const Tooltip = TooltipPrimitive__namespace.Root;
+const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: utils_cn.cn(
+      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;

package/dist/cjs/components/trading-view/graph-dropdown.cjs

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const components_select_select = require('../select/select.cjs');
+
+function GraphDropdown({
+  items,
+  defaultItem,
+  onSelected,
+  multiple = false
+}) {
+  const getInitialValue = () => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      if (defaults.length === 0) return "";
+      return String(defaults[0].value);
+    }
+    const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+    return String(single?.value || "");
+  };
+  const getInitialSelected = () => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      return new Set(defaults.map((item) => item.value));
+    }
+    const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+    return new Set([single?.value].filter(Boolean));
+  };
+  const [selectedItems, setSelectedItems] = React.useState(getInitialSelected);
+  const [value, setValue] = React.useState(getInitialValue());
+  const [open, setOpen] = React.useState(false);
+  const isSelectingRef = React.useRef(false);
+  React.useEffect(() => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      const newSelected = new Set(defaults.map((item) => item.value));
+      setSelectedItems(newSelected);
+      if (defaults.length > 0) {
+        setValue(String(defaults[0].value));
+      }
+    } else {
+      const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+      if (single?.value) {
+        setValue(String(single.value));
+      }
+    }
+  }, [defaultItem, multiple]);
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (!newOpen && multiple && isSelectingRef.current) {
+        isSelectingRef.current = false;
+        return;
+      }
+      setOpen(newOpen);
+    },
+    [multiple]
+  );
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      const item = items.find((i) => String(i.value) === newValue);
+      if (!item) return;
+      if (multiple) {
+        isSelectingRef.current = true;
+        setSelectedItems((prev) => {
+          const newSelected = new Set(prev);
+          if (newSelected.has(item.value)) {
+            if (newSelected.size <= 1) {
+              return prev;
+            }
+            newSelected.delete(item.value);
+          } else {
+            newSelected.add(item.value);
+          }
+          onSelected(Array.from(newSelected));
+          return newSelected;
+        });
+      } else {
+        setValue(newValue);
+        onSelected(item.value);
+      }
+    },
+    [multiple, onSelected, items]
+  );
+  const title = React.useMemo(() => {
+    if (!multiple) {
+      const selectedItem = items.find((item) => String(item.value) === value);
+      const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+      return selectedItem || single;
+    }
+    const selected = Array.from(selectedItems).map((val) => items.find((item) => item.value === val)).filter((item) => !!item);
+    if (selected.length === 0) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      return defaults[0];
+    }
+    if (selected.length === 1) {
+      return selected[0];
+    }
+    const firstSelected = selected[0];
+    return {
+      value: firstSelected.value,
+      label: `${selected.length} selected`
+    };
+  }, [multiple, defaultItem, items, selectedItems, value]);
+  const selectedValue = React.useMemo(() => {
+    if (multiple) {
+      return "__multiple_placeholder__";
+    }
+    return value;
+  }, [multiple, value]);
+  const isOpenForbidden = !items.length || items.length === 1 && !multiple;
+  if (isOpenForbidden) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl leading-6", children: title.label }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    components_select_select.Select,
+    {
+      value: selectedValue,
+      onValueChange: handleValueChange,
+      open,
+      onOpenChange: handleOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_select_select.SelectTrigger, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ jsxRuntime.jsx(components_select_select.SelectValue, { children: title.label }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(components_select_select.SelectContent, { className: "min-w-[16rem]", children: [
+          multiple && /* @__PURE__ */ jsxRuntime.jsx(
+            components_select_select.SelectItem,
+            {
+              value: "__multiple_placeholder__",
+              className: "hidden",
+              disabled: true,
+              children: title.label
+            }
+          ),
+          items.map((item, index) => {
+            const isChecked = multiple && selectedItems.has(item.value);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              components_select_select.SelectItem,
+              {
+                value: String(item.value),
+                onSelect: (e) => {
+                  if (multiple) {
+                    e.preventDefault();
+                  }
+                  handleValueChange(String(item.value));
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `flex h-4 w-4 items-center justify-center rounded-[4px] border border-primary shadow transition-colors ${isChecked ? "bg-primary text-primary-foreground" : ""}`,
+                      children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+                    }
+                  ),
+                  item.label
+                ] })
+              },
+              `graph-item-${index}-${String(item.value)}`
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.GraphDropdown = GraphDropdown;

package/dist/cjs/components/trading-view/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tradingView_graphDropdown = require('./graph-dropdown.cjs');
+const components_tradingView_tradingView = require('./trading-view.cjs');
+
+
+
+exports.GraphDropdown = components_tradingView_graphDropdown.GraphDropdown;
+exports.TradingView = components_tradingView_tradingView.TradingView;

package/dist/cjs/components/trading-view/trading-view.cjs

@@ -0,0 +1,178 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const hooks_useMediaQuery = require('../../hooks/use-media-query.cjs');
+const components_buttons_rangeButtons_rangeButtons = require('../buttons/range-buttons/range-buttons.cjs');
+const components_graph_graph = require('../graph/graph.cjs');
+const components_graph_graphView = require('../graph/graph-view.cjs');
+const components_tradingView_graphDropdown = require('./graph-dropdown.cjs');
+
+const FullscreenExpandIcon = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-label": "Expand fullscreen",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Expand fullscreen" }),
+      /* @__PURE__ */ jsxRuntime.jsx("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" })
+    ]
+  }
+);
+const FullscreenExitIcon = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-label": "Exit fullscreen",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Exit fullscreen" }),
+      /* @__PURE__ */ jsxRuntime.jsx("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" })
+    ]
+  }
+);
+function TradingView({
+  data,
+  yMeasureUnit,
+  height = 306,
+  defaultGraph,
+  onGraphSelected,
+  graphs,
+  isMultipleSelect,
+  range,
+  rangeList,
+  setRange,
+  onGraphExpanded,
+  isGraphExpanded,
+  onUnselectSeries
+}) {
+  const dataArray = React.useMemo(() => {
+    return Array.isArray(data) ? data : data ? [data] : [];
+  }, [data]);
+  const isMultiple = React.useMemo(() => {
+    return Array.isArray(data) && data.length > 1;
+  }, [data]);
+  const isMobile = hooks_useMediaQuery.useIsMobile();
+  const yMeasureUnitSingle = React.useMemo(() => {
+    if (!yMeasureUnit) return void 0;
+    return Array.isArray(yMeasureUnit) ? yMeasureUnit[0] : yMeasureUnit;
+  }, [yMeasureUnit]);
+  const toolbar = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: onGraphSelected && graphs && defaultGraph && /* @__PURE__ */ jsxRuntime.jsx(
+      components_tradingView_graphDropdown.GraphDropdown,
+      {
+        onSelected: onGraphSelected,
+        items: graphs,
+        defaultItem: defaultGraph,
+        multiple: isMultipleSelect
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_buttons_rangeButtons_rangeButtons.RangeButtons, { range, rangeList, setRange }),
+      !isMobile && onGraphExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          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",
+          onClick: onGraphExpanded,
+          children: isGraphExpanded ? /* @__PURE__ */ jsxRuntime.jsx(FullscreenExitIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(FullscreenExpandIcon, { size: 16 })
+        }
+      )
+    ] })
+  ] });
+  const labelColorMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const nextColorIndexRef = React.useRef(0);
+  const seriesData = React.useMemo(() => {
+    const yMeasureUnitArray = Array.isArray(yMeasureUnit) ? yMeasureUnit : void 0;
+    return dataArray.map((graphData, index) => {
+      const label = graphData?.title || `Series ${index + 1}`;
+      if (!labelColorMapRef.current.has(label)) {
+        const usedColorIndices = new Set(
+          Array.from(labelColorMapRef.current.values())
+        );
+        let colorIndex2 = nextColorIndexRef.current;
+        for (let i = 0; i < components_graph_graph.DEFAULT_SERIES_COLORS.length; i++) {
+          const testIndex = (nextColorIndexRef.current + i) % components_graph_graph.DEFAULT_SERIES_COLORS.length;
+          if (!usedColorIndices.has(testIndex)) {
+            colorIndex2 = testIndex;
+            break;
+          }
+        }
+        labelColorMapRef.current.set(label, colorIndex2);
+        nextColorIndexRef.current = (colorIndex2 + 1) % components_graph_graph.DEFAULT_SERIES_COLORS.length;
+      }
+      const colorIndex = labelColorMapRef.current.get(label) ?? 0;
+      const colorPalette = components_graph_graph.DEFAULT_SERIES_COLORS[colorIndex % components_graph_graph.DEFAULT_SERIES_COLORS.length];
+      const rawData = graphData?.data || [];
+      const sortedData = [...rawData].sort((a, b) => {
+        const timeA = typeof a.time === "number" ? a.time : Number(a.time);
+        const timeB = typeof b.time === "number" ? b.time : Number(b.time);
+        return timeA - timeB;
+      });
+      const deduplicatedData = sortedData.reduce((acc, point) => {
+        const timeAsTime = point.time;
+        if (acc.length === 0 || acc[acc.length - 1].time !== timeAsTime) {
+          acc.push({
+            time: timeAsTime,
+            value: point.value
+          });
+        } else {
+          acc[acc.length - 1] = {
+            time: timeAsTime,
+            value: point.value
+          };
+        }
+        return acc;
+      }, []);
+      return {
+        data: deduplicatedData,
+        label,
+        yMeasureUnit: yMeasureUnitArray?.[index] ?? (Array.isArray(yMeasureUnit) ? void 0 : yMeasureUnit),
+        color: colorPalette.line,
+        topColor: colorPalette.top,
+        bottomColor: colorPalette.bottom
+      };
+    }).filter((series) => series.data.length > 0);
+  }, [dataArray, yMeasureUnit]);
+  const isLoading = isMultiple && dataArray.length > 0 ? dataArray.some((d) => !d) : !data;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: height ? `${height}px` : void 0
+      },
+      className: "w-full",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        components_graph_graphView.GraphViewWithData,
+        {
+          series: seriesData,
+          loading: isLoading,
+          toolbar,
+          size: height ? "full" : "default",
+          containerClassName: "h-full",
+          showLegend: isMultiple,
+          onUnselectSeries,
+          yMeasureUnit: yMeasureUnitSingle
+        }
+      )
+    }
+  );
+}
+
+exports.TradingView = TradingView;