2020-12-14 18:52:43 +00:00
|
|
|
|
import React, {Component} from "react";
|
|
|
|
|
import {Col, Container, Navbar, Row} from "react-bootstrap";
|
2020-12-13 11:27:50 +00:00
|
|
|
|
import HCard from "./HCard";
|
2020-12-13 19:32:33 +00:00
|
|
|
|
import RPlot from "./RPlot";
|
2020-12-16 12:02:50 +00:00
|
|
|
|
import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState, socket} from "../";
|
2020-12-14 18:52:43 +00:00
|
|
|
|
import {PositionTable} from "./Tables";
|
2020-12-14 20:26:14 +00:00
|
|
|
|
import {EventData, Events} from "./Events";
|
2020-12-16 12:57:29 +00:00
|
|
|
|
import {Helmet} from "react-helmet";
|
2020-12-13 19:32:33 +00:00
|
|
|
|
|
|
|
|
|
type AppState = {
|
|
|
|
|
current_price: number,
|
|
|
|
|
current_tick: number,
|
2020-12-14 14:50:31 +00:00
|
|
|
|
last_update: Date,
|
2020-12-14 20:26:14 +00:00
|
|
|
|
positions: Array<PositionState>,
|
|
|
|
|
events: Array<EventData>
|
2020-12-13 19:32:33 +00:00
|
|
|
|
}
|
2020-12-12 20:18:25 +00:00
|
|
|
|
|
2020-12-16 12:02:50 +00:00
|
|
|
|
let event_id = 0;
|
2020-12-14 14:50:31 +00:00
|
|
|
|
|
2020-12-14 18:52:43 +00:00
|
|
|
|
class App extends Component<{}, AppState> {
|
2020-12-13 19:32:33 +00:00
|
|
|
|
state = {
|
|
|
|
|
current_price: 0,
|
|
|
|
|
current_tick: 0,
|
2020-12-14 14:50:31 +00:00
|
|
|
|
last_update: new Date(),
|
2020-12-14 20:26:14 +00:00
|
|
|
|
positions: [],
|
|
|
|
|
events: []
|
2020-12-13 19:32:33 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-12-14 18:52:43 +00:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
}
|
|
|
|
|
|
2020-12-13 19:32:33 +00:00
|
|
|
|
componentDidMount() {
|
2020-12-16 12:02:50 +00:00
|
|
|
|
console.log(this)
|
|
|
|
|
|
2020-12-16 11:28:21 +00:00
|
|
|
|
socket.on("first_connect", (data: FirstConnectMessage) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
current_price: data.prices[data.prices.length - 1],
|
|
|
|
|
current_tick: data.ticks[data.ticks.length - 1],
|
|
|
|
|
last_update: new Date(),
|
|
|
|
|
positions: data.positions
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
socket.on("new_tick", (data: NewTickMessage) => {
|
2020-12-14 14:50:31 +00:00
|
|
|
|
this.setState({
|
|
|
|
|
current_price: data.price,
|
|
|
|
|
current_tick: data.tick,
|
|
|
|
|
last_update: new Date(),
|
2020-12-14 20:26:14 +00:00
|
|
|
|
positions: data.positions,
|
2020-12-14 14:50:31 +00:00
|
|
|
|
})
|
2020-12-13 19:32:33 +00:00
|
|
|
|
})
|
2020-12-16 12:02:50 +00:00
|
|
|
|
|
|
|
|
|
socket.on("new_event", (data: NewEventMessage) => {
|
|
|
|
|
// ignore new tick
|
|
|
|
|
if (!data.kind.toLowerCase().includes("new_tick")) {
|
|
|
|
|
const new_event: EventData = {
|
|
|
|
|
id: event_id,
|
|
|
|
|
name: data.kind,
|
|
|
|
|
tick: data.tick
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
event_id += 1
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
events: [...this.state.events, new_event]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
2020-12-13 19:32:33 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-12-12 20:18:25 +00:00
|
|
|
|
render() {
|
|
|
|
|
return (
|
2020-12-14 13:55:33 +00:00
|
|
|
|
<div className="d-flex flex-fill flex-column">
|
2020-12-16 12:57:29 +00:00
|
|
|
|
<Helmet>
|
|
|
|
|
{/* TODO: fix currency */}
|
|
|
|
|
<title> Rustico - USD {String(this.state.current_price)} </title>
|
|
|
|
|
</Helmet>
|
2020-12-14 13:55:33 +00:00
|
|
|
|
<Navbar bg="light" expand="lg" className="border-bottom">
|
2020-12-14 20:26:14 +00:00
|
|
|
|
<Navbar.Brand href="#">Rustico - BfxBot</Navbar.Brand>
|
2020-12-14 13:55:33 +00:00
|
|
|
|
</Navbar>
|
|
|
|
|
|
|
|
|
|
<Container fluid className="mt-2 border flex-fill d-flex">
|
|
|
|
|
<Row className="flex-fill">
|
|
|
|
|
{/* Toolbar column */}
|
2020-12-14 20:26:14 +00:00
|
|
|
|
<Col md={4} lg={4} className="border-right d-flex flex-column">
|
2020-12-14 13:55:33 +00:00
|
|
|
|
<Row className="justify-content-center border-bottom py-2">
|
2020-12-14 18:52:43 +00:00
|
|
|
|
<HCard title="Current tick:" content={String(this.state.current_tick)}
|
|
|
|
|
update={this.state.last_update}/>
|
|
|
|
|
<HCard title="Current price:" content={String(this.state.current_price)}
|
|
|
|
|
update={this.state.last_update}/>
|
2020-12-14 13:55:33 +00:00
|
|
|
|
</Row>
|
2020-12-14 20:26:14 +00:00
|
|
|
|
<Row className={"flex-fill"}>
|
2020-12-16 12:02:50 +00:00
|
|
|
|
{this.state.positions.length > 0 ?
|
|
|
|
|
<PositionTable positions={this.state.positions}/> : null}
|
2020-12-14 14:50:31 +00:00
|
|
|
|
</Row>
|
2020-12-14 20:26:14 +00:00
|
|
|
|
<Row className={"my-2"}>
|
2020-12-16 12:02:50 +00:00
|
|
|
|
{this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
|
2020-12-14 20:26:14 +00:00
|
|
|
|
</Row>
|
2020-12-14 13:55:33 +00:00
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
{/* Graph column */}
|
|
|
|
|
<Col md={8} lg={8} className="flex-fill">
|
2020-12-14 18:52:43 +00:00
|
|
|
|
<RPlot/>
|
2020-12-14 13:55:33 +00:00
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
2020-12-14 18:52:43 +00:00
|
|
|
|
</Container>
|
2020-12-14 20:26:14 +00:00
|
|
|
|
<footer className="footer py-3 bg-light border-top">
|
2020-12-14 13:55:33 +00:00
|
|
|
|
<Container className="text-center">
|
|
|
|
|
<span className="text-muted">Made with ❤️ by the Pepe</span>
|
|
|
|
|
</Container>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
2020-12-12 20:18:25 +00:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default App;
|