- yarn / npm install
- yarn start
- yarn test for testing
- React.js for Orderbook UI
- Establish socket connection and get bids and asks data.
- Merge the push data to the orderbook
- Edge cases handle: automatic reconnect/resubscription, fallbacks with api, error handlers.
- Memory performance review
- Some e2e test cases with cypress.
- Rematch for Redux management, which handled all the data update logic.
The orderbook model should look like this:
export const orderbook = {
state: INIT_STATE, // initial state of the orderbook
reducers: {}, // reducers
effects: (dispatch) => ({
// effects handlers
initSnapshot() {},
udpateAsks() {}
updateBids() {}
}),
};
Use the Provider
to wrap our Orderbook
component and pass the store
prop.
<Provider store={store}>
<OrderbookContainer />
</Provider>
When we use the event handler to manage the data, we dispatch the data
subscriber.on("subscribed", function() {
const { asks, bids } = ctx.data;
dispatch.orderbook.initSnapshot({
asks,
bids,
});
});
/hooks
for managing event handlers
export const useSocketData = () => {
/**
* Event handlers
* 1. ws connect handler
* 2. data subscribe handler
* 3. error handler
*/
};
-
/orderbook
for UI rendering -
centrifugal.js for websocket management
-
Generating the
jwt_token
:
from websocket import WebSocketApp
from rabbitx import const
from rabbitx.client import Client, WSClient, WSClientCallback
if __name__ == '__main__':
private_key = 'PRIVATE_KEY'
# change this to your private key
testnet=True # change this to False if using on mainnet
if testnet:
client = Client(api_url=const.TESTNET_URL, private_key=private_key)
else:
client = Client(api_url=const.URL, private_key=private_key)
x=client.onboarding.onboarding()
print(x)
In this project, I put the generated token in the .env
file. However, it's a better option to get jwt_token
from an endpoint.
cypress
for some e2e tests. They may not be so thourough
- I spent quite some time for python environment setting... But finally run
onboarding.py
successfully on venv withpoetry
- It took some time on the socket data update logic. It was hard to debug at the beginning and couldn't calculate the
level Total
correctly - The frequent updated components should be an performance issue since we couldn't delay the update when new data comes in.
- Add the fallbacks if websocket is down, such as
http_stream
,socketJS
andsse
- Add the market
depth
, making the Orderbook more complete. - The calculation inside the
orderbook
model effects would be overloaded when the push data comes frequently. It's probably a performance issue.Web worker
could be a good solution to handle the complex calculation in the background thread and send back the result to main thread. - Use
styled-system
for responsive components - Error reports to some platform like
Sentry.io
for errors tracking - Should refactor the code into Typescript