@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/mini-chart/wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper.d.ts","sourceRoot":"","sources":["../../../../src/site/components/mini-chart/wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAaA,CAAA;eAEc,OAAO"}

package/dist/site/components/mini-chart/wrapper.js

@@ -0,0 +1,92 @@
+import { useRef, useEffect } from 'react';
+import { Box } from '@hanzo/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/site/components/mini-chart/mini-chart.tsx
+var MiniChart = ({
+  widgetProps,
+  containerStyles = {}
+}) => {
+  const {
+    symbol,
+    exchange,
+    lineColor,
+    topGradientColor,
+    bottomGradientColor,
+    width,
+    height,
+    autosize,
+    locale,
+    ...rest
+  } = widgetProps;
+  const symbolString = exchange ? `${exchange}:${symbol}` : symbol;
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js";
+    script.async = true;
+    script.onload = async () => {
+      const iframe = containerRef.current?.querySelector("iframe");
+      if (iframe && iframe instanceof Element) {
+        iframe.style.colorScheme = "normal";
+        setTimeout(() => {
+          document.querySelector("#mini-symbol-overview-ticker");
+        }, 1200);
+      }
+      const copyDiv = document.querySelector(".tradingview-widget-copyright");
+      if (copyDiv) {
+        setTimeout(() => {
+          copyDiv.classList.remove("invisible");
+        }, 1200);
+      }
+    };
+    const config = JSON.stringify({
+      symbol: symbolString,
+      width: autosize ? "100%" : width || 350,
+      height: autosize ? "100%" : height || 220,
+      locale: locale ?? "en",
+      isTransparent: "true",
+      trendLineColor: lineColor || "rgba(41, 98, 255, 1)",
+      underLineColor: topGradientColor || "rgba(41, 98, 255, 0.3)",
+      underLineBottomColor: bottomGradientColor || "rgba(41, 98, 255, 0)",
+      ...rest
+    });
+    script.innerHTML = config;
+    containerRef.current.appendChild(script);
+    return () => {
+      while (containerRef.current?.firstChild) {
+        containerRef.current.removeChild(containerRef.current.firstChild);
+      }
+    };
+  }, [JSON.stringify(widgetProps)]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: containerStyles, className: "tradingview-widget-container h-[150px]", ref: containerRef }),
+    /* @__PURE__ */ jsxs("div", { className: "tradingview-widget-copyright border-t w-full invisible", children: [
+      /* @__PURE__ */ jsx("a", { href: `https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : ""}`, rel: "noopener", target: "_blank", children: /* @__PURE__ */ jsxs(Box, { tag: "span", className: "text-[--hz-ui-primary]", children: [
+        symbol,
+        " quotes"
+      ] }) }),
+      "\xA0by TradingView"
+    ] })
+  ] });
+};
+var mini_chart_default = MiniChart;
+var Wrapper = ({
+  symbol,
+  exchange
+}) => /* @__PURE__ */ jsx(mini_chart_default, { widgetProps: {
+  symbol,
+  exchange,
+  autosize: true,
+  colorTheme: "dark",
+  lineColor: "rgb(114, 27, 228)",
+  bottomGradientColor: "rgba(255, 255, 255, 0.1)",
+  dateRange: "60M"
+} });
+var wrapper_default = Wrapper;
+
+export { wrapper_default as default };