The setOrderbook method is invoked to set event streams, one for each trading asset pair. The event streams are triggered every time a new order is submitted to the orderbook.

Start writing the setOrderbook method by capturing the this instance in the local app parameter, like this:

setOrderbook = () => {
let app = this;

The orderbookHandler method is an internal method invoked any time there is a new message on the orderbook event streams. The method checks the asset code of the base asset and counter asset of the new offer to determine which orderbook needs to be updated. The state variables holding the bids and asks are updated accordingly, as follows:

var orderbookHandler = function (orderbookResponse) {
 
 if (orderbookResponse.base.asset_code == 'USD' && orderbookResponse.counter.asset_code == 'GBP')
 {
 var bidsUSDGBP = orderbookResponse.bids;
 var asksUSDGBP = orderbookResponse.asks;
 app.setState
 ({
 bidsUSDGBP,
 asksUSDGBP
 });
 }
 
else if (orderbookResponse.base.asset_code == 'USD' && orderbookResponse.counter.asset_code == 'EUR')
 {
 var bidsUSDEUR = orderbookResponse.bids;
 var asksUSDEUR = orderbookResponse.asks;
 app.setState
 ({
 bidsUSDEUR,
 asksUSDEUR
 });
 }

else if (orderbookResponse.base.asset_code == 'GBP' && orderbookResponse.counter.asset_code == 'EUR')
 {
 var bidsGBPEUR = orderbookResponse.bids;
 var asksGBPEUR = orderbookResponse.asks;
 app.setState
 ({
 bidsGBPEUR,
 asksGBPEUR
 });
 }
 
else
 {
 console.log("Invalid orderbook pair");
 }
 };

Next, we set the three event streams, that is, es1, es2, and es3. Each event stream checks the current status of the orderbook member within the server object. On a new message, the internal orderbookHandler method is called, as follows:

var es1 = this.server.orderbook(app.USD,app.GBP)
 .cursor('now')
 .stream({
 onmessage: orderbookHandler
 })

var es2 = this.server.orderbook(app.GBP,app.EUR)
 .cursor('now')
 .stream({
 onmessage: orderbookHandler
 })

var es3 = this.server.orderbook(app.USD,app.EUR)
 .cursor('now')
 .stream({
 onmessage: orderbookHandler
 })
 
 };

Individual event streams exist for the three orderbook pairs—USD-GBP, GBP-EUR, and USD-EUR. To set the orderbook object, we send the selling asset and the buying asset as the input parameter.

That brings us to the end of the setOrderbook method. 

The bids and asks arrays for the currency pairs—namely, bidsUSDGBP, asksUSDGBP, bidsUSDEUR, asksUSDEUR, bidsGBPEUR, and asksGBPEUR—are stored in the app state. The Orderbook.js app component checks the current base and counter for trading and renders the relevant orderbook, as follows:

//Orderbook.js
 
if(props.counter.code == 'USD' && props.base.code == 'GBP')
 {
 
 bids = props.bidsUSDGBP;
 asks = props.asksUSDGBP;
 Asymbol = props.assets[0].symbol;
 Psymbol = props.assets[1].symbol; 
 
 }
 else if(props.counter.code == 'USD' && props.base.code == 'EUR')
 {
 bids = props.bidsUSDEUR;
 asks = props.asksUSDEUR;
 Asymbol = props.assets[0].symbol;
 Psymbol = props.assets[2].symbol; 
 }
 else if(props.counter.code == 'GBP' && props.base.code == 'EUR')
 {
 bids = props.bidsGBPEUR;
 asks = props.asksGBPEUR;
 Asymbol = props.assets[1].symbol;
 Psymbol = props.assets[2].symbol; 
 }
 else
 {
 console.log ("Invalid Pair");
 }

Depending on the currently selected counter and base asset, the bids and asks arrays are set for mapping. The asset symbols are also fetched from the asset interfaces. With that, we come to the end of the orderbook section.