[Refactored placeorder component]

[Added common utility function for calculating estimated returns based on clean orderbook] [removed redundunt tests for keys and values] [#3]
Leasehold · May 6, 2020 · 0d60781 · 0d60781
1 parent e11b833
commit 0d60781
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 84 deletions.
diff --git a/lisk-dex-electron/src/PlaceOrder.jsx b/lisk-dex-electron/src/PlaceOrder.jsx
@@ -4,6 +4,7 @@ import * as transactions from '@liskhq/lisk-transactions';
 import axios from 'axios';
 import BalanceDisplay from './BalanceDisplay';
 import userContext from './context';
+import { getCleanOrderBook, estimateBestReturnsForSeller, estimatedBestReturnsForBuyer } from './Utils';
 
 export default class PlaceOrder extends React.Component {
   static contextType = userContext;
@@ -34,6 +35,32 @@ export default class PlaceOrder extends React.Component {
 
   getOrderType = () => (this.state.marketMode ? 'market' : 'limit');
 
+  getEstimatedReturns = () => {
+    const orderBook = getCleanOrderBook(this.context.orderBookData);
+    const amount = parseFloat(this.state.amount);
+    const { asks } = orderBook;
+    const { bids } = orderBook;
+    let estimatedReturns = { };
+    let assetType = '';
+
+    let { price } = this.state;
+
+    if (this.props.side === 'ask') {
+      if (this.getOrderType() === 'market') {
+        price = this.context.maxBid;
+      }
+      estimatedReturns = estimateBestReturnsForSeller(amount, price, bids);
+      assetType = this.context.activeAssets[1].toUpperCase();
+    } else {
+      if (this.getOrderType() === 'market') {
+        price = this.context.minAsk;
+      }
+      estimatedReturns = estimatedBestReturnsForBuyer(amount, price, asks);
+      assetType = this.context.activeAssets[0].toUpperCase();
+    }
+    return { ...estimatedReturns, assetType };
+  }
+
   handleSubmit(event) {
     event.preventDefault();
     this.clearErrors();
@@ -268,60 +295,16 @@ export default class PlaceOrder extends React.Component {
             <br />
             {this.state.errors.amount && <div className="error-message">{this.state.errors.amount}</div>}
             <input name="amount" className="order-val-input" type="text" title="Decimal number" value={this.state.amount} onChange={this.handleChange} />
-            {this.state.marketMode
-              && (
-              <>
-                {
-                  this.props.side === 'bid'
-                  && (
-                  <div style={{ color: 'grey', fontSize: '15px', marginBottom: '10px' }}>
-                    ≈
-                    {(this.state.amount / this.context.minAsk).toFixed(4)}
-                    {' '}
-                    {this.context.activeAssets[0].toUpperCase()}
-                  </div>
-                  )
-                }
-                {
-                  this.props.side === 'ask'
-                  && (
-                  <div style={{ color: 'grey', fontSize: '15px', marginBottom: '10px' }}>
-                    ≈
-                    {(this.state.amount * this.context.maxBid).toFixed(4)}
-                    {' '}
-                    {this.context.activeAssets[1].toUpperCase()}
-                  </div>
-                  )
-                }
-              </>
-              )}
-            {!this.state.marketMode
-              && (
-              <>
-                {
-                  this.props.side === 'bid'
-                  && (
-                  <div style={{ color: 'grey', fontSize: '15px', marginBottom: '10px' }}>
-                    ≈
-                    {(this.state.amount / this.state.price).toFixed(4)}
-                    {' '}
-                    {this.context.activeAssets[0].toUpperCase()}
-                  </div>
-                  )
-                }
-                {
-                  this.props.side === 'ask'
-                  && (
-                  <div style={{ color: 'grey', fontSize: '15px', marginBottom: '10px' }}>
-                    ≈
-                    {(this.state.amount * this.state.price).toFixed(4)}
-                    {' '}
-                    {this.context.activeAssets[1].toUpperCase()}
-                  </div>
-                  )
-                }
-              </>
-              )}
+            {
+               (
+                 <div style={{ color: 'grey', fontSize: '15px', marginBottom: '10px' }}>
+                   ≈
+                   {this.getEstimatedReturns().estimatedReturns.toFixed(4)}
+                   {' '}
+                   {this.getEstimatedReturns().assetType}
+                 </div>
+               )
+            }
             {this.props.side === 'bid' && <input className="place-buy-order-button" type="submit" value={this.state.isSubmitting ? '' : 'Submit'} disabled={this.state.isSubmitting} />}
             {this.props.side === 'ask' && <input className="place-sell-order-button" type="submit" value={this.state.isSubmitting ? '' : 'Submit'} disabled={this.state.isSubmitting} />}
             {this.state.isSubmitting && (

diff --git a/lisk-dex-electron/src/Utils.js b/lisk-dex-electron/src/Utils.js
@@ -94,7 +94,7 @@ const estimatedBestReturnsForBuyer = (amount, price, asks) => {
 };
 
 // todo - reuse the function in orderbook.js, make sure calculations are in one place
-const getUIOrderBookFrom = (contextOrderBook) => {
+const getCleanOrderBook = (contextOrderBook) => {
   const calculateAmount = (size, whole) => parseFloat((size / whole).toFixed(4));
   const asks = [];
   const bids = [];
@@ -119,5 +119,5 @@ const getUIOrderBookFrom = (contextOrderBook) => {
 
 
 export {
-  formatThousands, groupByKey, Keys, Values, estimateBestReturnsForSeller, estimatedBestReturnsForBuyer, EstimationStatus, getUIOrderBookFrom,
+  formatThousands, groupByKey, Keys, Values, estimateBestReturnsForSeller, estimatedBestReturnsForBuyer, EstimationStatus, getCleanOrderBook,
 };
diff --git a/lisk-dex-electron/src/tests/Utils.test.js b/lisk-dex-electron/src/tests/Utils.test.js
@@ -1,5 +1,5 @@
 import {
-  groupByKey, Keys, Values, formatThousands, EstimationStatus, estimateBestReturnsForSeller, estimatedBestReturnsForBuyer, getUIOrderBookFrom,
+  groupByKey, formatThousands, EstimationStatus, estimateBestReturnsForSeller, estimatedBestReturnsForBuyer, getCleanOrderBook,
 } from '../Utils';
 
 import { asks, bids } from './fixtures/orderbook/orderbook';
@@ -35,32 +35,6 @@ describe('Utils tests => ', () => {
     expect(groupByKey(actualArray, 'price', 'value')).toEqual(expectedReduction);
   });
 
-  it('Gets keys from dict in correct order', () => {
-    const actualDict = {
-      0.8: { price: 0.8, value: 7 },
-      0.85: { price: 0.85, value: 1 },
-      0.86: { price: 0.86, value: 1 },
-      0.9: { price: 0.9, value: 1 },
-      0.92: { price: 0.92, value: 6 },
-    };
-
-    const expectedKeys = ['0.8', '0.85', '0.86', '0.9', '0.92'];
-
-    expect(Keys(actualDict)).toEqual(expectedKeys);
-  });
-
-  it('Gets values from dict in correct order', () => {
-    const actualDict = {
-      0.8: { price: 0.8, value: 7 },
-      0.85: { price: 0.85, value: 1 },
-      0.86: { price: 0.86, value: 1 },
-      0.9: { price: 0.9, value: 1 },
-      0.92: { price: 0.92, value: 6 },
-    };
-    const expectedValues = [{ price: 0.8, value: 7 }, { price: 0.85, value: 1 }, { price: 0.86, value: 1 }, { price: 0.9, value: 1 }, { price: 0.92, value: 6 }];
-    expect(Values(actualDict)).toEqual(expectedValues);
-  });
-
   test.each`
       sellerAmountInLshForSell      |        marketPriceInLsk            |     estimatedReturnsInLsk      |        buyerOrders    |     estimatedStatus
       ${150}                        |        ${0.78}                     |         ${0}                   |        ${bids}        |     ${EstimationStatus.NO_MATCH}
@@ -111,7 +85,7 @@ describe('Utils tests => ', () => {
         { price: 0.4000, amount: 62.6993 },
       ],
     };
-    const actualProcessedOrderBook = getUIOrderBookFrom(context.orderBookData);
+    const actualProcessedOrderBook = getCleanOrderBook(context.orderBookData);
     expect(actualProcessedOrderBook).toStrictEqual(expectedOrderBook);
   });
 });