@iccandle/widget-web-trading 0.0.1 → 0.0.3

package/README.md

@@ -46,20 +46,60 @@ function TradingPage() {
 | `chartWidget` | `object \| null` | no | Host-owned TradingView widget instance (embed mode) |
 | `scanResultUrl` | `string \| null` | no | Opens the side panel Scan Result tab with this URL |
 | `onScanResultUrlChange` | `(url: string \| null) => void` | no | Called when scan result URL changes |
+| `onScanResultLoad` | `() => void` | no | Called when the scan result iframe finishes loading |
 | `children` | `ReactNode` | no | Custom chart slot content (see embed mode below) |
 
 ### Embed mode (host-owned chart)
 
-Pass an existing TradingView `chartWidget` to render trading panels around your chart instead of the built-in chart:
+When your app already owns the TradingView widget instance, pass it via `chartWidget` and render your chart mount point as `children`. The widget will wire up order lines, symbol sync, and trading panels around your chart instead of creating its own.
 
 ```tsx
-<WebTradingWidget
-  baseUrl="https://your-api.example.com"
-  token={token}
-  chartWidget={existingTvWidget}
-/>
+import { useEffect, useRef, useState } from "react";
+import { WebTradingWidget } from "@iccandle/widget-web-trading";
+import "@iccandle/widget-web-trading/style.css";
+
+function TradingPageWithHostChart() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartWidget, setChartWidget] = useState<object | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !window.TradingView) {
+      return;
+    }
+
+    const widget = new window.TradingView.widget({
+      container,
+      library_path: "/charting_library/",
+      // datafeed, symbol, interval, etc.
+    });
+
+    widget.onChartReady(() => {
+      setChartWidget(widget);
+    });
+
+    return () => {
+      setChartWidget(null);
+      widget.remove();
+    };
+  }, []);
+
+  return (
+    <div style={{ height: "100vh", width: "100%" }}>
+      <WebTradingWidget
+        baseUrl="https://your-api.example.com"
+        token={token}
+        chartWidget={chartWidget}
+      >
+        <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
+      </WebTradingWidget>
+    </div>
+  );
+}
 ```
 
+`chartWidget` must be the TradingView Charting Library widget instance from your host app. Pass `children` with the DOM element the chart is mounted into — omitting `children` leaves the chart slot empty.
+
 ### `ChartNewsOrdersOverlay`
 
 A lighter overlay for news-style layouts: