This project was bootstrapped with Create React App and connect to the Kraken FX websocket API.
It displays the order book in real-time for the pair XBTUSD showing the Price, Quantity and calculates the cumulative quantity for each price.
From the Depth Level dropdown the user can select a how many level in the book wants to display.
Live on Heroku: https://kraken-orderbook.herokuapp.com/
Clone repo, then cd into the directory, then npm install.
Run npm run dev to launch the app in the development mode.
Open http://localhost:3000 to view it in the browser.
In case you face CORS error, you can use a CORS removal extension for Chrome or if you are on Mac you can open Chrome with the command:
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
(BEAR IN MIND THIS WILL REDUCE SECURITY)
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Afterwards run npm start to launch in Prod mode.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
The websocket connection is establish in App.js and subscribe for the public order book data for the pair XBT USD (feed: "book", product_ids: ["PI_XBTUSD"]).
On connection, the first api message is the book snapshot book_snapshot and the following are all the order book updates with price and qty information. When qty is zero, the price can be removed from the book.
Although is a small app and I could have used simply the component props for interacts with component, but I decided to use the react Context for the state management having app scalability in mind.
The components are all functional components with react hooks instead of Class components in order to improve the performance and code readability.
UI and code are split in 3 main components:
- Order Book
- Depth Level
- Input price
The data manipulation functions are included in utils.js for facilitate testing and reusability.
It displays two tables for the order book Buy and Sell prices. Buy orders sorted by descending price and Sell orders sorted by ascending. Each level in the book include the quantity for the related prices and also the Total quantity which is the cumulated quantity of all the orders from the closest price from the market price. Default depth level is 10 but can be changed by the Depth level dropdown selection. By clicking on a price value, the Input price field will be populated with the selected value.
It's a dropdown menu that allow the user to select how many prices wants to be able to visualize. Default value is 10 max 50
Number input field that accept manual input or can be populated by clocking on a specific price from the order book.