order display

Jaxkr · Dec 30, 2019 · 46ddc4f · 46ddc4f
1 parent ed298db
commit 46ddc4f
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 82 deletions.
diff --git a/lisk-dex-electron/package-lock.json b/lisk-dex-electron/package-lock.json
diff --git a/lisk-dex-electron/package.json b/lisk-dex-electron/package.json
@@ -10,11 +10,12 @@
       "build/**/*",
       "node_modules/**/*"
     ],
-    "directories":{
+    "directories": {
       "buildResources": "assets"
     }
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "electron-is-dev": "^1.1.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",

diff --git a/lisk-dex-electron/src/API.js b/lisk-dex-electron/src/API.js
@@ -0,0 +1,13 @@
+import axios from 'axios';
+const API_URL = 'https://cors-anywhere.herokuapp.com/http://3.93.232.78:7011';
+
+const instance = axios.create({
+    baseURL: API_URL,
+    timeout: 1000,
+    headers: {'X-LiskDexUI-Version': '0.1'}
+  });
+
+export async function getOrderbook() {
+    const orders = await instance.get('/orders?sort=price:asc');
+    return orders;
+}
diff --git a/lisk-dex-electron/src/App.css b/lisk-dex-electron/src/App.css
@@ -1,8 +1,13 @@
+body {
+  background-color: black;
+  color: white;
+}
+
 .container {
   display: grid;
   grid-template-columns: 20% 20% 40% 20%;
   grid-template-rows: 310px 310px;
-  border: 1px solid black;
+  border: 1px solid white;
   margin: 10px;
 }
 
@@ -18,38 +23,38 @@
 .market-name-and-stats {
   grid-column: 4;
   grid-row: 1/3;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 
 .buy-panel {
   grid-column: 1;
   grid-row: 1 / 2;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 .sell-panel {
   grid-column: 1;
   grid-row: 2 / 3;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 
 .sell-orders {
   grid-column: 2;
   grid-row: 1 / 2;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 .buy-orders {
   grid-column: 2;
   grid-row: 2 / 3;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 
 .depth-chart {
   grid-column: 3;
   grid-row: 1 / 2;
-  border: 1px solid black;
+  border: 1px solid white;
 }
 .your-orders {
   grid-column: 3;
   grid-row: 2 / 3;
-  border: 1px solid black;
+  border: 1px solid white;
 }
diff --git a/lisk-dex-electron/src/App.js b/lisk-dex-electron/src/App.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Orderbook from "./Orderbook";
 import "./App.css";
 
 class App extends React.Component {
@@ -23,15 +24,11 @@ class App extends React.Component {
         <div className="container">
           <div className="buy-panel">BUY</div>
           <div className="sell-panel">SELL</div>
-          <div className="buy-orders">
-            ORDERS TO BUY
-            <br></br>
-            increasing price top to bottom
-          </div>
           <div className="sell-orders">
-            ORDERS TO SELL
-            <br></br>
-            decreasing price top to bottom
+            <Orderbook side="asks"></Orderbook>
+          </div>
+          <div className="buy-orders">
+            <Orderbook side="bids"></Orderbook>
           </div>
           <div className="depth-chart">DEPTH CHART / LINES</div>
           <div className="your-orders">YOUR ORDERS</div>

diff --git a/lisk-dex-electron/src/Orderbook.css b/lisk-dex-electron/src/Orderbook.css
@@ -0,0 +1,13 @@
+.askOrderList {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column-reverse;
+    height: 100%;
+}
+
+.bidOrderList {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    height: 100%;
+}
diff --git a/lisk-dex-electron/src/Orderbook.js b/lisk-dex-electron/src/Orderbook.js
@@ -1,60 +1,77 @@
 import React from "react";
+import SingleOrder from "./SingleOrder";
+import { getOrderbook } from "./API";
+import "./Orderbook.css";
 
-class Orderbook extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = { orders: [] };
-      /*
+export default class Orderbook extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { orders: [], bids: [], asks: [], maxSize: { bid: 0, ask: 0 } };
+    /*
       Schema of the orders element:
       {
           amount: size of the order
           price: price at which the order is
       }
 
       Orders at the same price will be merged.
-      */ 
+      */
+  }
+
+  refreshOrderbook() {
+    getOrderbook().then(results => {
+      const bids = [];
+      const asks = [];
+      let maxSize = { bid: 0, ask: 0 };
+      for (let result of results.data) {
+        if (result.side === "bid") {
+          bids.push(result);
+          if (result.size > maxSize.bid) {
+            maxSize.bid = result.size;
+          }
+        } else if (result.side === "ask") {
+          asks.push(result);
+          if (result.size > maxSize.ask) {
+            maxSize.ask = result.size;
+          }
+        }
+      }
+      this.setState({ bids, asks, maxSize });
+    });
+  }
+
+  componentDidMount() {
+    this.refreshOrderbook();
+  }
+
+  render() {
+    if (this.props.side === "asks") {
+      const orders = this.state.asks.map(order => (
+        <SingleOrder
+          whole={Math.pow(10, 8)} // 10 ** 8 beddow in one LSK
+          key={order.orderId}
+          size={order.size}
+          price={order.price}
+          maxSize={this.state.maxSize}
+          side={this.props.side}
+          decimals={4}
+        ></SingleOrder>
+      ));
+      return <div className="askOrderList">{orders}</div>;
     }
-
-    componentDidMount() {}
-
-    render() {
-      return (
-        <>
-          <div className="top-bar">
-            <div className="top-bar-right">
-              <b>Lisk DEX</b>
-            </div>
-            <div className="top-bar-left">
-              API Status: <span style={{ color: "green" }}>Connected</span>
-            </div>
-          </div>
-          <div className="container">
-            <div className="buy-panel">BUY</div>
-            <div className="sell-panel">SELL</div>
-            <div className="buy-orders">
-              ORDERS TO BUY
-              <br></br>
-              increasing price top to bottom
-            </div>
-            <div className="sell-orders">
-              ORDERS TO SELL
-              <br></br>
-              decreasing price top to bottom
-            </div>
-            <div className="depth-chart">DEPTH CHART / LINES</div>
-            <div className="your-orders">YOUR ORDERS</div>
-            <div className="market-name-and-stats">
-              MRCL/LSK (current market name)
-              <br></br>
-              <br></br>
-              list of other markets
-              <br></br>
-              <br></br>
-              <br></br>
-              ect
-            </div>
-          </div>
-        </>
-      );
+    if (this.props.side === "bids") {
+      const orders = this.state.bids.map(order => (
+        <SingleOrder
+          whole={Math.pow(10, 8)} // 10 ** 8 beddow in one LSK
+          key={order.orderId}
+          size={order.size}
+          price={order.price}
+          maxSize={this.state.maxSize}
+          side={this.props.side}
+          decimals={4}
+        ></SingleOrder>
+      ));
+      return <div className="bidOrderList">{orders}</div>;
     }
-  }
+  }
+}
diff --git a/lisk-dex-electron/src/SingleOrder.css b/lisk-dex-electron/src/SingleOrder.css
@@ -0,0 +1,9 @@
+.orderLine {
+    width: 100%;
+    border: 1px solid white;
+    box-sizing: border-box;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    padding: 3px;
+    background: linear-gradient(to right, #700d0d 70%, rgba(0,0,0,0) 30%);
+}
diff --git a/lisk-dex-electron/src/SingleOrder.js b/lisk-dex-electron/src/SingleOrder.js
@@ -0,0 +1,28 @@
+import React from "react";
+import "./SingleOrder.css";
+
+export default class SingleOrder extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  bgCSS() {
+    if (this.props.side === "asks") {
+      const percentOfMaxSize = (this.props.size / this.props.maxSize.ask) * 100;
+      return `linear-gradient(to right, #700d0d ${percentOfMaxSize}%, rgba(0,0,0,0) 1%)`;
+    }
+    if (this.props.side === "bids") {
+        const percentOfMaxSize = (this.props.size / this.props.maxSize.bid) * 100;
+        return `linear-gradient(to right, #286113 ${percentOfMaxSize}%, rgba(0,0,0,0) 1%)`;
+    }
+  }
+
+  render() {
+    return (
+      <div style={{ background: this.bgCSS() }} className="orderLine">
+        {this.props.price}, {(this.props.size / this.props.whole).toFixed(this.props.decimals)}
+      </div>
+    );
+  }
+}