preliminary, rough support to balances

websrc/components/App.tsx

@@ -1,6 +1,14 @@
 import React, {Component} from "react";
 import {EventProp} from "./Events";
-import {CurrencyPair, EventName, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
+import {
+    Balance,
+    CurrencyPair,
+    EventName,
+    FirstConnectMessage,
+    NewEventMessage,
+    NewTickMessage,
+    PositionProp
+} from "../types";
 import {socket} from "../index";
 import {symbolToPair} from "../utils";
 import {Helmet} from "react-helmet";
@@ -16,7 +24,8 @@ type AppState = {
     positions: Array<PositionProp>,
     events: Array<EventProp>,
     active_pair: CurrencyPair,
-    available_pairs: Array<CurrencyPair>
+    available_pairs: Array<CurrencyPair>,
+    balances: Array<Balance>
 }
 
 class App extends Component<{}, AppState> {
@@ -28,6 +37,7 @@ class App extends Component<{}, AppState> {
         last_update: new Date(),
         positions: [],
         events: [],
+        balances: [],
         active_pair: symbolToPair("tBTCUSD"),
         available_pairs: []
     }
@@ -42,7 +52,8 @@ class App extends Component<{}, AppState> {
                 current_price: data.prices[data.prices.length - 1],
                 current_tick: data.ticks[data.ticks.length - 1],
                 last_update: new Date(),
-                positions: data.positions
+                positions: data.positions,
+                balances: data.balances
             })
         })
 
@@ -52,6 +63,7 @@ class App extends Component<{}, AppState> {
                 current_tick: data.tick,
                 last_update: new Date(),
                 positions: data.positions,
+                balances: data.balances
             })
         })
 
@@ -88,7 +100,8 @@ class App extends Component<{}, AppState> {
                             className="my-1 py-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
                     transition duration-500 ease-in-out overflow-y-auto flex flex-col">
                             <div className="flex justify-center text-2xl my-4">
-                                <Statusbar positions={this.state.positions} price={this.state.current_price}
+                                <Statusbar balances={this.state.balances} positions={this.state.positions}
+                                           price={this.state.current_price}
                                            tick={this.state.current_tick}/>
                             </div>
 
@@ -99,7 +112,8 @@ class App extends Component<{}, AppState> {
                                 </div>
                             </div>
 
-                            {this.state.positions.length > 0 ? <PositionsTable positions={this.state.positions}/> : null}
+                            {this.state.positions.length > 0 ?
+                                <PositionsTable positions={this.state.positions}/> : null}
 
                             <footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">
                                 <span className="my-1 mx-1">Made with ❤️ by the Peperone in a scantinato</span>