@iccandle/widget-web-trading 0.0.0 → 0.0.1
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.
- package/README.md +104 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,95 @@
|
|
|
1
|
-
# widget-web-trading
|
|
1
|
+
# @iccandle/widget-web-trading
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React trading chart widget — order entry, terminal, and TradingView chart integration.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Published to npm as a library bundle. **Only `dist/` is included in the package** (`package.json` `"files": ["dist"]`). Source, `public/charting_library/`, and dev tooling are not shipped.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @iccandle/widget-web-trading
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
**Peer dependencies** (install in your app if not already present):
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Supported: React 18 or 19.
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { WebTradingWidget } from "@iccandle/widget-web-trading";
|
|
25
|
+
import "@iccandle/widget-web-trading/style.css";
|
|
26
|
+
|
|
27
|
+
function TradingPage() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ height: "100vh", width: "100%" }}>
|
|
30
|
+
<WebTradingWidget
|
|
31
|
+
baseUrl="https://your-api.example.com"
|
|
32
|
+
token="your-auth-token"
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Props
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Required | Description |
|
|
42
|
+
|------|------|----------|-------------|
|
|
43
|
+
| `baseUrl` | `string` | yes | API base URL for widget requests |
|
|
44
|
+
| `token` | `string \| null` | no | Auth token; stored in `localStorage` under `web-trading-token` |
|
|
45
|
+
| `variant` | `"chart" \| "news"` | no | UI mode (default: `"chart"`) |
|
|
46
|
+
| `chartWidget` | `object \| null` | no | Host-owned TradingView widget instance (embed mode) |
|
|
47
|
+
| `scanResultUrl` | `string \| null` | no | Opens the side panel Scan Result tab with this URL |
|
|
48
|
+
| `onScanResultUrlChange` | `(url: string \| null) => void` | no | Called when scan result URL changes |
|
|
49
|
+
| `children` | `ReactNode` | no | Custom chart slot content (see embed mode below) |
|
|
50
|
+
|
|
51
|
+
### Embed mode (host-owned chart)
|
|
52
|
+
|
|
53
|
+
Pass an existing TradingView `chartWidget` to render trading panels around your chart instead of the built-in chart:
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<WebTradingWidget
|
|
57
|
+
baseUrl="https://your-api.example.com"
|
|
58
|
+
token={token}
|
|
59
|
+
chartWidget={existingTvWidget}
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### `ChartNewsOrdersOverlay`
|
|
64
|
+
|
|
65
|
+
A lighter overlay for news-style layouts:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { ChartNewsOrdersOverlay } from "@iccandle/widget-web-trading";
|
|
69
|
+
|
|
70
|
+
<ChartNewsOrdersOverlay
|
|
71
|
+
baseUrl="https://your-api.example.com"
|
|
72
|
+
onCreateNewOrder={() => { /* open order panel */ }}
|
|
73
|
+
/>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Package exports
|
|
77
|
+
|
|
78
|
+
| Import | File |
|
|
79
|
+
|--------|------|
|
|
80
|
+
| `@iccandle/widget-web-trading` | `dist/web-trading-widget.js` (ESM) / `.cjs` (CJS) |
|
|
81
|
+
| `@iccandle/widget-web-trading/style.css` | `dist/web-trading-widget.css` |
|
|
82
|
+
| Types | `dist/web-trading-widget.d.ts` |
|
|
83
|
+
|
|
84
|
+
## TradingView charting library
|
|
85
|
+
|
|
86
|
+
The widget loads TradingView from `/charting_library/charting_library.js` at runtime. **This library is not part of the npm package.**
|
|
87
|
+
|
|
88
|
+
Your host app must serve the TradingView Charting Library assets (e.g. copy `charting_library/` into your `public/` folder) so they are available at `/charting_library/`.
|
|
89
|
+
|
|
90
|
+
## Local development
|
|
91
|
+
|
|
92
|
+
Clone the repo to work on the widget itself:
|
|
6
93
|
|
|
7
94
|
```bash
|
|
8
95
|
npm install
|
|
@@ -11,16 +98,21 @@ npm run dev
|
|
|
11
98
|
|
|
12
99
|
Open http://localhost:3002
|
|
13
100
|
|
|
14
|
-
|
|
101
|
+
The dev app uses `public/charting_library/` locally. Auth tokens can be set in `localStorage` (`web-trading-token`) or passed via the `token` prop.
|
|
102
|
+
|
|
103
|
+
## Build & publish
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
npm run build # outputs to dist/
|
|
107
|
+
npm publish # publishes dist/ only
|
|
108
|
+
```
|
|
15
109
|
|
|
16
|
-
|
|
17
|
-
- Uses the same API endpoints — set auth tokens in localStorage (`session_token`, `access_token`) for live data.
|
|
18
|
-
- TradingView charting library is in `public/charting_library/`.
|
|
110
|
+
`npm run build:app` builds the standalone Vite demo app (not published).
|
|
19
111
|
|
|
20
|
-
## Project structure
|
|
112
|
+
## Project structure (source repo)
|
|
21
113
|
|
|
22
|
-
- `
|
|
114
|
+
- `components/dashboard/chart/new-order/web-trading-widget.entry.ts` — library entry
|
|
23
115
|
- `components/dashboard/chart/` — chart UI and trading panels
|
|
24
|
-
- `services/
|
|
25
|
-
- `public/charting_library/` — TradingView
|
|
26
|
-
|
|
116
|
+
- `services/widget-api/` — API client
|
|
117
|
+
- `public/charting_library/` — TradingView assets (dev only, not published)
|
|
118
|
+
- `vite.lib.config.ts` — library build config
|