diff --git a/main.py b/main.py index 2e325be..6b94a67 100755 --- a/main.py +++ b/main.py @@ -487,6 +487,7 @@ import asyncio import os import threading +from typing import List import dotenv from flask import Flask, render_template @@ -494,7 +495,7 @@ from flask_socketio import SocketIO from bfxbot import BfxBot from bfxbot.currency import Symbol -from bfxbot.models import SymbolStatus, Event, EventKind +from bfxbot.models import PositionWrapper, SymbolStatus, Event, EventKind from strategy import TrailingStopStrategy app = Flask(__name__) @@ -548,7 +549,8 @@ def start_bot(): API_SECRET = os.getenv("API_SECRET") if not bot: - bot = BfxBot(api_key=API_KEY, api_secret=API_SECRET, symbols=[Symbol.BTC], tick_duration=1) + bot = BfxBot(api_key=API_KEY, api_secret=API_SECRET, + symbols=[Symbol.BTC], tick_duration=20) strategy = TrailingStopStrategy() bot.set_strategy(Symbol.BTC, strategy) @@ -567,7 +569,17 @@ async def bot_loop(): @eh.on_event(EventKind.NEW_TICK) def on_new_tick(event: Event, status: SymbolStatus): - socketio.emit("new_tick", {"tick": event.tick, "price": status.prices[event.tick]}) + tick = event.tick + price = status.prices[event.tick] + positions: List[PositionWrapper] = status.positions[event.tick] if event.tick in status.positions else [] + + # wrapping into json + positions = list(map(lambda x: {"id": x.position.id, "symbol": x.position.symbol, "profit_loss": x.position.profit_loss, + "profit_loss_percentage": x.position.profit_loss_percentage}, positions)) + + socketio.emit("new_tick", {"tick": tick, + "price": price, + "positions": positions}) await bot.start() diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index dd3beb0..c0456bc 100644 --- a/websrc/components/App.tsx +++ b/websrc/components/App.tsx @@ -1,17 +1,18 @@ import React, { Component } from "react"; import { Col, Container, Nav, Navbar, Row } from "react-bootstrap"; -import Plot from "react-plotly.js"; import HCard from "./HCard"; import RPlot from "./RPlot"; -import { RToast } from "./RToast"; -import { NewTickData, socket } from "../"; +import { NewTickData, PositionState, socket } from "../"; +import { PositionTable } from "./Tables"; type AppState = { current_price: number, current_tick: number, - last_update: Date + last_update: Date, + positions: Array } + class App extends Component { constructor(props) { super(props) @@ -20,12 +21,18 @@ class App extends Component { state = { current_price: 0, current_tick: 0, - last_update: new Date() + last_update: new Date(), + positions: [] } componentDidMount() { socket.on("new_tick", (data: NewTickData) => { - this.setState({ current_price: data.price, current_tick: data.tick, last_update: new Date() }) + this.setState({ + current_price: data.price, + current_tick: data.tick, + last_update: new Date(), + positions: data.positions + }) }) } @@ -44,6 +51,9 @@ class App extends Component { + + + {/* Graph column */} diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx new file mode 100644 index 0000000..90d952b --- /dev/null +++ b/websrc/components/Tables.tsx @@ -0,0 +1,57 @@ +import React from "react" +import { Component } from "react" +import { Container, Table } from "react-bootstrap" +import { NewTickData, PositionState, socket } from '../'; + + +export class PositionTable extends Component<{}, { positions: Array }> { + constructor(props) { + super(props) + } + + state = { + positions: [] + } + + componentDidMount() { + socket.on('new_tick', (data: NewTickData) => { + this.setState({ + positions: data.positions + }) + }) + } + + tableData() { + return this.state.positions.map((position: PositionState, idx) => { + return ( + {position.id} + {position.symbol} + {position.profit_loss} + {position.profit_loss_percentage} % + ) + }) + } + + render() { + return ( + +
+

Open positions

+
+ + + + + + + + + + + {this.tableData()} + +
IDSymbolP/LP/L %
+
+ ) + } +} \ No newline at end of file diff --git a/websrc/index.tsx b/websrc/index.tsx index 646b886..1ada629 100644 --- a/websrc/index.tsx +++ b/websrc/index.tsx @@ -8,7 +8,15 @@ export const socket = io(); export type NewTickData = { tick: number, - price: number + price: number, + positions: Array +} + +export type PositionState = { + id: number, + symbol: string, + profit_loss: number, + profit_loss_percentage: number } socket.on("connect", function () {