How manish166/trading1 works
This is a React crypto-market dashboard that displays watched-symbol price tiles and connection status. The browser entry initializes a stream engine, while the dashboard hook independently opens a Binance WebSocket and writes parsed ticks to Zustand; the tiles instead subscribe to the engine’s throttled tick stream. Thus the implementation has two socket paths rather than one shared broker. The engine also exposes raw and buffered order-book stream APIs, but the service’s order-book bridge is only a commented placeholder. Relationships below are limited to the shown code and README.
Main entry points: TradingStreamEngine.ts Trading Stream Engine · useMarketStore.ts Market Store · App.tsx Dashboard Root · LivePriceGrid.tsx Price Grid
Components 12
Dashboard UI
- Dashboard Root
src/App.tsx - Price Grid
src/components/LivePriceGrid.tsx - Price Tile
src/components/PriceTickerTile.tsx
Stream Runtime
- Application Entry
src/main.tsx - Socket Hook
src/hooks/useWebSocket.ts - App Container
src/core/AppContainer.ts - Trading Stream Engine
src/ws/TradingStreamEngine.ts
Market State
- Market Store
src/store/useMarketStore.ts - Store Middleware
src/store/utils.ts
Network Transport
- Market Data Service
src/ws/MarketDataService.ts
Other components
- Browser
- Binance Streams
Connections 16
- Browser → Application Entry: loads app
src/main.tsx - Application Entry → App Container: initializes
src/main.tsx - Application Entry → Dashboard Root: renders
src/main.tsx - Dashboard Root → Socket Hook: opens socket
src/App.tsx - Dashboard Root → Price Grid: renders
src/App.tsx - Socket Hook → Binance Streams: connects and subscribes
src/hooks/useWebSocket.ts - Socket Hook → Market Store: writes ticks
src/hooks/useWebSocket.ts - Price Grid → Market Store: reads watchlist
src/components/LivePriceGrid.tsx - Price Grid → Price Tile: renders tiles
src/components/LivePriceGrid.tsx - Price Tile → App Container: gets engine
src/components/PriceTickerTile.tsx - App Container → Trading Stream Engine: creates engine
src/core/AppContainer.ts - Price Tile → Trading Stream Engine: subscribes to prices
src/components/PriceTickerTile.tsx - Trading Stream Engine → Market Data Service: connects and receives ticks
src/ws/TradingStreamEngine.ts - Trading Stream Engine → Market Store: tracks watchlist
src/ws/TradingStreamEngine.ts - Market Data Service → Binance Streams: opens stream
src/ws/MarketDataService.ts - Market Store → Store Middleware: created with
src/store/useMarketStore.ts