World Trade Factory
A market dashboard and trading desk for following prices, reading charts, and connecting wallets without switching between pages.
The idea
I wanted to put the market overview, charts, and trading controls in the same place. World Trade Factory lets you browse crypto, stocks, indices, rates, foreign exchange, and commodities, then open a trading desk for a supported instrument.
The overview shows price changes alongside open, high, low, and previous close values. On the trading desk, the order book, recent trades, chart, and order controls sit together so you can follow activity while deciding what to do next.
Inside the desk
Live market data
Coinbase WebSockets update the crypto order book and recent trades. HTTP endpoints supply market quotes, historical candles, and the status of each trading integration.
Price charts
OHLCV charts show open, high, low, close, and volume data. Switch between one minute, five minute, hourly, and daily intervals to see recent activity or a longer trend.
Wallet connections
The interface supports Ethereum-compatible wallets and Solana. Users can select a network and view available routes through Jupiter, Uniswap, and PancakeSwap.
Orders and rules
An order history view tracks activity. A rule builder lets users set conditions based on price, percentage movement, or volume, with definitions saved in the browser. Mobile users can move between the chart, order book, and controls using tabs.
The engineering
Prices, chart history, wallet connections, and network selection change independently. The interface has to keep track of each one while showing whether the selected trading venue is configured. React state connects those updates to the chart and order controls.
Next.js handles pages and API routes. Recharts draws the charts, while ethers.js and Solana Web3 handle wallet interactions. Market data and venue status are checked separately, because a price can be available even when its trading integration is not configured.
The tech stack
| Technology | What it does |
|---|---|
| Next.js and React | Page routing, reusable components, and state for markets, charts, orders, and wallets. |
| JavaScript and CSS | Interface behavior and responsive layouts. Styled-jsx handles page styles, including the mobile trading tabs. |
| Recharts | Candlestick charts with live price updates and a choice of time intervals. |
| WebSockets and HTTP APIs | Coinbase streams live crypto updates. HTTP requests fetch quotes, historical candles, and trading venue status. |
| ethers.js | Wallet connections and transaction handling on supported Ethereum-compatible networks. |
| Solana Web3 | Solana wallet connections and transactions for supported swaps. |
| Vercel | Hosts the Next.js application and its API routes. |
Current status
The live site includes market feeds, charts, wallet connections, and order interfaces. SFOX and Alpaca integrations need credentials and venue configuration. Rules are saved in the browser and do not run as an always-on service.
This project gives me a place to work on live data, wallet integrations, and the details of building a trading interface for both desktop and mobile.
Want to hear more?
I’m happy to walk through the interface and the technology behind it.