116 lines
3.8 KiB
TypeScript
116 lines
3.8 KiB
TypeScript
import React, {Component} from "react";
|
||
import {EventProp} from "./Events";
|
||
import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
|
||
import {socket} from "../index";
|
||
import {symbolToPair} from "../utils";
|
||
import {Helmet} from "react-helmet";
|
||
import {Navbar, Sidebar} from "./Navbars";
|
||
import {Statusbar} from "./Statusbar";
|
||
|
||
type AppState = {
|
||
current_price: number,
|
||
current_tick: number,
|
||
last_update: Date,
|
||
positions: Array<PositionProp>,
|
||
events: Array<EventProp>,
|
||
active_pair: CurrencyPair,
|
||
available_pairs: Array<CurrencyPair>
|
||
}
|
||
|
||
class App extends Component<{}, AppState> {
|
||
event_id = 0;
|
||
|
||
state = {
|
||
current_price: 0,
|
||
current_tick: 0,
|
||
last_update: new Date(),
|
||
positions: [],
|
||
events: [],
|
||
active_pair: symbolToPair("tBTCUSD"),
|
||
available_pairs: []
|
||
}
|
||
|
||
constructor(props) {
|
||
super(props)
|
||
}
|
||
|
||
componentDidMount() {
|
||
console.log(this)
|
||
|
||
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) => {
|
||
this.setState({
|
||
current_price: data.price,
|
||
current_tick: data.tick,
|
||
last_update: new Date(),
|
||
positions: data.positions,
|
||
})
|
||
})
|
||
|
||
socket.on("new_event", (data: NewEventMessage) => {
|
||
// ignore new tick
|
||
if (!data.kind.toLowerCase().includes("new_tick")) {
|
||
const new_event: EventProp = {
|
||
id: this.event_id,
|
||
name: data.kind,
|
||
tick: data.tick
|
||
}
|
||
|
||
this.event_id += 1
|
||
|
||
this.setState((state) => ({
|
||
events: [...state.events, new_event]
|
||
}))
|
||
}
|
||
})
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title> Rustico
|
||
- {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title>
|
||
</Helmet>
|
||
<div className="bg-gray-800">
|
||
<div className="h-screen max-w-screen flex mx-auto">
|
||
<Navbar/>
|
||
|
||
<main
|
||
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}
|
||
tick={this.state.current_tick}/>
|
||
</div>
|
||
|
||
<div className="flex flex-col flex-grow my-8 shadow-md hover:shadow-lg">
|
||
<div
|
||
className="py-2 flex-grow bg-white dark:bg-gray-600 rounded-lg">
|
||
{/*<RPlot/>*/}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<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>
|
||
</footer>
|
||
</main>
|
||
|
||
<Sidebar/>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default App; |