import React, {Component} from "react" import {PositionProp} from "../types"; import {ClosePositionModal} from "./Overlays"; import {symbolToPair} from "../utils"; type PositionsTableState = { showConfirmation: boolean, positionToClose: number } export class PositionsTable extends Component<{ positions: Array }, PositionsTableState> { constructor(props) { super(props); this.toggleConfirmation = this.toggleConfirmation.bind(this) } state = { showConfirmation: false, positionToClose: 0, } toggleConfirmation() { this.setState((state) => ({ showConfirmation: !state.showConfirmation })) } stateColor(state: string): string { const lower_state = state.toLowerCase() let res: string if (lower_state.includes("profit")) { res = "green" } else if (lower_state.includes("break")) { res = "yellow" } else { res = "red" } return res } renderTableHead() { return ["status", "currency pair", "base price", "amount", "Profit/Loss", "actions"].map((entry) => { return ( {entry} ) } ) } renderTableRows() { return this.props.positions.map((position) => { // TODO: move symbolToPair out of here? const currencyPair = symbolToPair(position.symbol) const stateBg = "bg-".concat(this.stateColor(position.state)).concat("-100 ") const stateText = "text-".concat(this.stateColor(position.state)).concat("-800 ") const stateClass = "px-2 inline-flex text-xs leading-5 font-semibold rounded-full ".concat(stateBg).concat(stateText) return ( {/* Status */} {position.state}
{currencyPair.base}/{currencyPair.quote}
{/*
{position.}
*/}
{position.base_price.toLocaleString()} {currencyPair.quote}/{currencyPair.base}
{/*
Insert total % here?
*/}
{position.amount.toFixed(5)} {currencyPair.base}
Insert total % here?
{position.profit_loss.toLocaleString()} {currencyPair.quote}
{position.profit_loss_percentage.toFixed(2)}%
{ this.setState({ showConfirmation: true, positionToClose: position.id }) }}> Close
) }) } render() { return (
{this.renderTableHead()} {this.renderTableRows()}
) } }