The setOrderbook method, as the name suggests, pulls and relays the information that is required to display the orderbook to the user. It does so by invoking the viewBuy() and viewSell() methods on our orderbook smart contract, and populating the buys[] and sells[] arrays in the app state:

1. We start writing the method by initializing a new contract instance that points to our Orderbook smart contract:

setOrderbook = () =>
 {
 let app = this;
 var lastBuy;
 var lastSell; 
 var contract = new this.watchweb3.eth.Contract(this.OrderbookABI.abi,this.OrderbookABI.address); 

2. We will first populate the buy orders in the buys[] array, and then the sell orders in the sells[] array.

3. We first call our smart contract viewLengthBuy method to find the total number of buy orders on our decentralized orderbook in the orderbook smart contract:

contract.methods.viewLengthBuy().call().then(function(response){
 if(response) {
 lastBuy = response;

4. If there are buy orders in the orderbook smart contract, then we proceed to populate these buy orders to our app's buys[] array:

if (lastBuy >= 1)
 {
 app.setState({
 buys: [],
 }) 
 
 for (let i = 1; i <= lastBuy ; i++)
 {

5. We do so by iterating between all the order numbers, from 1 until lastBuy.
6. For each OrderNo, we call the viewBuy contract method. The input parameter is the order number (i), and the output parameters are order amount (Amount), order price (Price), and the timestamp when the order was placed:

contract.methods.viewBuy(i).call().then(function(response){
 if(response) {
 
 let OrderNo = i; 
 let Amount = Number(response[0]);
 let Price = Number(response[1]);
 let TimeStamp = Number(response[2]); 

7. The response from viewBuy is captured in our local variables. If the order is still active, meaning it has trading units available, only then it is pushed to the orderbook:

if ( Amount > 0)
 {
 let buys = app.state.buys;
 buys.push({
 OrderNo,
 Amount,
 Price,
 TimeStamp
 });

 app.setState({
 buys
 })

8. The buys[] array is updated with the new buy order, and the app state is set after each iteration.
9. When we reach the end of the buy records on the orderbook, we sort the buy orders by price and timestamp:

if (i == lastBuy)
 {
 let buys = app.state.buys
 buys.sort(function (a, b) {
 if(a.Price == b.Price)
 {
 return (a.TimeStamp < b.TimeStamp) ? 1 : (a.TimeStamp < b.TimeStamp) ? -1 : 0;
 }
 else
 {
 return (a.Price < b.Price) ? 1 : -1;
 }
 });
 app.setState({
 buys
 }) 
 }

The higher the buy price, the greater the preference it gets in the orderbook. Thus, it is closer to the top of the orderbook. Buy orders are sorted in descending order, and then displayed to the user. If two buy orders have the same price, the buy order with the older timestamp gets preference.

After the sorting operation has been carried out, the buys array is again updated to the app state. This brings us to the end of the orderbook buy side. The orderbook sell side flows in a similar way to the buy side:

contract.methods.viewLengthSell().call().then(function(response){
 if(response) {
 lastSell = response;
 
 if (lastSell >= 1)
 {
 app.setState({
 sells: [],
 }) 
 
 for (let i = 1; i <= lastSell ; i++)
 {
 
 contract.methods.viewSell(i).call().then(function(response){
 if(response) {
 
 let OrderNo = i; 
 let Amount = Number(response[0]);
 let Price = Number(response[1]);
 let TimeStamp = Number(response[2]); 
 
 if ( Amount > 0)
 {

 let sells = app.state.sells;
 sells.push({
 OrderNo,
 Amount,
 Price,
 TimeStamp
 });

app.setState({
 sells
 })

if (i == lastSell)
 {
 let sells = app.state.sells
 sells.sort(function (a, b) {
 if(a.Price == b.Price)
 {
 return (a.TimeStamp < b.TimeStamp) ? -1 : (a.TimeStamp < b.TimeStamp) ? 1 : 0;
 }
 else
 {
 return (a.Price < b.Price) ? -1 : 1;
 }
 });
 app.setState({
 sells
 })
}

The only difference is that the sell side of the orderbook sorts orders in descending order, instead of ascending, so that the lowest sell price is at the top of the orderbook. This brings us to the end of the setOrderbook method. Next, let's set our listener for orderbook events.