How biikash1/tradeforge-frontend works
TradeForge Frontend is a React trading terminal. Users authenticate, explore market data, and then trade assets or manage portfolios, watchlists, wallet activity, deposits, and withdrawals. The app routes users through feature pages; Redux actions make REST requests and update shared state, while the market dashboard also receives WebSocket updates. The graph preserves the README’s documented features, but some feature-to-state links rely on the SOURCE INDEX because their full implementations were not sampled.
Main entry points: App.jsx App routes · Store.js Redux store · api.js API client · Home.jsx Market dashboard
Components 23
Application shell
- App routes
src/App.jsx
Markets and trading
- Market dashboard
src/pages/Home/Home.jsx - Coin search
src/pages/Search/SearchCoins.jsx - Asset trading
src/pages/Stock Details/TradingForm.jsx - Watchlist
src/pages/Watchlist/Watchlist.jsx
Account and activity
- Authentication
src/pages/Auth/Auth.jsx - Portfolio
src/pages/Portfolio/Portfolio.jsx - Order activity
src/pages/Activity/Activity.jsx - Wallet
src/pages/Wallet/Wallet.jsx - Fiat payments
src/pages/Payment Details/PaymentDetails.jsx - Withdrawals
src/pages/Withdrawal/Withdrawal.jsx - Withdrawal admin
src/pages/Admin/WithdrawalAdmin.jsx
Client state and services
- Coin actions
src/State/Coin/ActionCoin.js - Order actions
src/State/Order/ActionOrder.js - Wallet actions
src/State/Wallet/ActionWallet.js - Withdrawal actions
src/State/Withdrawal/ActionWithdrawal.js - Redux store
src/State/Store.js - API client
src/config/api.js - WebSocket client
src/config/websocket.js - Chat service
src/services/chatService.js
Shared interface
- UI components
src/components/ui/button.jsx
Other components
- User
- TradeForge API
Connections 39
- User → App routes: uses
README.md - App routes → Authentication: routes to
src/App.jsx - App routes → Market dashboard: routes to
src/App.jsx - App routes → Portfolio: routes to
src/App.jsx - App routes → Order activity: routes to
src/App.jsx - App routes → Wallet: routes to
src/App.jsx - App routes → Withdrawals: routes to
src/App.jsx - App routes → Fiat payments: routes to
src/App.jsx - App routes → Watchlist: routes to
src/App.jsx - App routes → Coin search: routes to
src/App.jsx - App routes → Withdrawal admin: routes to
- App routes → Redux store: reads state
README.md - App routes → WebSocket client: connects
src/App.jsx - Market dashboard → Coin actions: dispatches
src/pages/Home/Home.jsx - Coin search → Coin actions: dispatches
src/pages/Search/SearchCoins.jsx - Market dashboard → WebSocket client: subscribes
src/pages/Home/Home.jsx - Market dashboard → Chat service: requests reply
src/pages/Home/Home.jsx - Market dashboard → Asset trading: opens trade
- Asset trading → Order actions: dispatches
src/pages/Stock Details/TradingForm.jsx - Asset trading → Wallet actions: dispatches
src/pages/Stock Details/TradingForm.jsx - Portfolio → Redux store: dispatches
src/pages/Portfolio/Portfolio.jsx - Order activity → Order actions: dispatches
src/pages/Activity/Activity.jsx - Watchlist → Redux store: dispatches
- Wallet → Wallet actions: dispatches
src/pages/Wallet/Wallet.jsx - Fiat payments → Withdrawal actions: dispatches
src/pages/Payment Details/PaymentDetails.jsx - Withdrawals → Withdrawal actions: dispatches
src/pages/Withdrawal/Withdrawal.jsx - Withdrawal admin → Withdrawal actions: dispatches
- Coin actions → API client: requests data
src/State/Coin/ActionCoin.js - Order actions → API client: requests data
src/State/Order/ActionOrder.js - Wallet actions → API client: requests data
src/State/Wallet/ActionWallet.js - Withdrawal actions → API client: requests data
src/State/Withdrawal/ActionWithdrawal.js - API client → TradeForge API: REST requests
README.md - Chat service → API client: uses client
src/services/chatService.js - Coin actions → Redux store: updates state
- Order actions → Redux store: updates state
- Wallet actions → Redux store: updates state
- Withdrawal actions → Redux store: updates state
- UI components → Coin search: renders controls
src/pages/Search/SearchCoins.jsx - UI components → Wallet: renders controls
src/pages/Wallet/Wallet.jsx