orderbook-client

Technical stack

• create-react-app
• redux, redux-toolkit
• Jest
• browser native WebSocket API

Requirements

• Show max 8 quotes for both buy and sell. Quote row should vertical align center.

• Format number with commas as thousands separators.

• Add hover background color on whole row when mouse hover on the quote.

• Last price is up or down is determine by the data gain . (1 means up, -1 means down, 0 for changed)

• Price percentage change can be omitted.

• Quote total formula:

  • Sell quotes: sum up quote size from lowest price quote to the highest
  • Buy quotes: sum up quote size from highest price quote to the lowest

• Add hover calculation tooltip

  • Avg Price = sumproduct( price * size ) / total
  • Total Value = sumproduct( price * size )
  • sumproduct reference (see Example 1)

• Use mock data and a data update timer to present the following animations.

  • When new quote appear(price hasn't shown on the order book before), add highlight animation on whole quote row. Red background color for sell quote. Green background color for buy quote.
  • When quote size change, add highlight animation on size cell. Red background color if size increase. Green background color if size decrease.

• Bonus point for using webpack-dev-server proxy connect order book API:

  https://api.btse.com/futures/api/v2.1/orderbook/L2

• Bonus point for connecting to Websocket API:

  Endpoint: wss://ws.btse.com/ws/futures

  Topic: orderBook:BTCPFC_0