added types.ts. renamed various type names. added fake currency switch to be implemented

websrc/components/App.tsx

@@ -2,22 +2,24 @@ import React, {Component} from "react";
 import {Col, Container, Navbar, Row} from "react-bootstrap";
 import HCard from "./HCard";
 import RPlot from "./RPlot";
-import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState, socket} from "../";
 import {PositionTable} from "./Tables";
-import {EventData, Events} from "./Events";
+import {EventProp, Events} from "./Events";
 import {Helmet} from "react-helmet";
+import {CurrencyDropdown} from "./Currency";
+import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState} from "../types";
+import {socket} from "../index";
 
 type AppState = {
     current_price: number,
     current_tick: number,
     last_update: Date,
     positions: Array<PositionState>,
-    events: Array<EventData>
+    events: Array<EventProp>
 }
 
-let event_id = 0;
-
 class App extends Component<{}, AppState> {
+    event_id = 0;
+
     state = {
         current_price: 0,
         current_tick: 0,
@@ -54,13 +56,13 @@ class App extends Component<{}, AppState> {
         socket.on("new_event", (data: NewEventMessage) => {
             // ignore new tick
             if (!data.kind.toLowerCase().includes("new_tick")) {
-                const new_event: EventData = {
+                const new_event: EventProp = {
-                    id: event_id,
+                    id: this.event_id,
                     name: data.kind,
                     tick: data.tick
                 }
 
-                event_id += 1
+                this.event_id += 1
 
                 this.setState({
                     events: [...this.state.events, new_event]
@@ -76,8 +78,10 @@ class App extends Component<{}, AppState> {
                     {/* TODO: fix currency */}
                     <title> Rustico - USD {String(this.state.current_price)} </title>
                 </Helmet>
+
                 <Navbar bg="light" expand="lg" className="border-bottom">
-                    <Navbar.Brand href="#">Rustico - BfxBot</Navbar.Brand>
+                    <Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
+                    <CurrencyDropdown active_pair={"BTC/USD"} pairs={["BTC/USD", "XMR/USD"]}/>
                 </Navbar>
 
                 <Container fluid className="mt-2 border flex-fill d-flex">

websrc/components/Events.tsx

@@ -2,20 +2,13 @@ import React, {Component} from "react";
 import {Container, ListGroup} from "react-bootstrap";
 
 
-export type EventData = {
+export type EventProp = {
     id: number,
     name: string,
     tick: number
 }
 
-
+export class Events extends Component<{ events: Array<EventProp> }> {
-const testEvent: EventData = {
-    id: 1,
-    name: "Test",
-    tick: 1
-}
-
-export class Events extends Component<{ events: Array<EventData> }, { events: Array<EventData> }> {
     constructor(props) {
         super(props);
     }
@@ -25,7 +18,7 @@ export class Events extends Component<{ events: Array<EventData> }, { events: Ar
     }
 
     mapEvents() {
-        return this.state.events.map((event: EventData) => {
+        return this.state.events.map((event: EventProp) => {
             return (
                 <ListGroup.Item action key={event.id}>
                     {event.name} @ Tick {event.tick}

websrc/components/RPlot.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from "react"
 import Plot from "react-plotly.js"
 
-import {NewTickMessage, socket} from '../';
+import {socket} from '../';
+import {NewTickMessage} from "../types";
 
 
 type FirstConnectData = {

websrc/components/Tables.tsx

@@ -1,9 +1,10 @@
 import React, {Component} from "react"
 import {Badge, Button, Container, Table} from "react-bootstrap"
-import {PositionCloseMessage, PositionState, socket} from '../';
+import {socket} from '../';
+import {PositionCloseMessage, PositionProp} from "../types";
 
 
-export class PositionTable extends Component<{ positions: Array<PositionState> }> {
+export class PositionTable extends Component<{ positions: Array<PositionProp> }> {
     constructor(props) {
         super(props)
     }
@@ -32,7 +33,7 @@ export class PositionTable extends Component<{ positions: Array<PositionState> }
     }
 
     tableData() {
-        return this.props.positions.map((position: PositionState) => {
+        return this.props.positions.map((position: PositionProp) => {
             let row_bg = "";
 
             if (!position.state.toLowerCase().includes("break")) {

websrc/index.tsx

@@ -6,39 +6,6 @@ import io from "socket.io-client";
 
 export const socket = io();
 
-
-export type PositionState = {
-    id: number,
-    state: string,
-    base_price: number,
-    amount: number,
-    symbol: string,
-    profit_loss: number,
-    profit_loss_percentage: number
-}
-
-export type FirstConnectMessage = {
-    ticks: Array<number>,
-    prices: Array<number>,
-    positions: Array<PositionState>
-}
-
-export type NewEventMessage = {
-    tick: number,
-    kind: string,
-}
-
-export type NewTickMessage = {
-    tick: number,
-    price: number,
-    positions: Array<PositionState>
-}
-
-export type PositionCloseMessage = {
-    message_name: string,
-    position_id: number,
-}
-
 socket.on("connect", function () {
     console.log("Connected!")
 })

websrc/types.ts

@@ -0,0 +1,34 @@
+import {EventProp} from "./components/Events";
+
+export type PositionProp = {
+    id: number,
+    state: string,
+    base_price: number,
+    amount: number,
+    symbol: string,
+    profit_loss: number,
+    profit_loss_percentage: number
+}
+
+export type FirstConnectMessage = {
+    ticks: Array<number>,
+    prices: Array<number>,
+    positions: Array<PositionProp>
+}
+
+export type NewEventMessage = {
+    tick: number,
+    kind: string,
+}
+
+export type NewTickMessage = {
+    tick: number,
+    price: number,
+    positions: Array<PositionProp>
+}
+
+export type PositionCloseMessage = {
+    message_name: string,
+    position_id: number,
+}
+