40 lines
1.0 KiB
React
40 lines
1.0 KiB
React
|
const fillState = (order) => {
|
||
|
|
return ((order.quantity - order.remaining_quantity) / order.quantity) * 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function OrderView(props) {
|
||
|
|
const socket = window.socket;
|
||
|
|
const orders = props.orders || []
|
||
|
|
|
||
|
|
const cancelOrder = ((event, orderId) => {
|
||
|
|
socket.sendCancelOrder(orderId)
|
||
|
|
}).bind(this)
|
||
|
|
|
||
|
|
return(
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Limit</th>
|
||
|
|
<th>Side</th>
|
||
|
|
<th>Quantity</th>
|
||
|
|
<th>Remaining Quantity</th>
|
||
|
|
<th>Cancel</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{orders.map((order) => {
|
||
|
|
return(
|
||
|
|
<tr key={order.id}>
|
||
|
|
<td class="text-end">{order.price}</td>
|
||
|
|
<td class="text-center">{order.side}</td>
|
||
|
|
<td class="text-end">{order.quantity}</td>
|
||
|
|
<td class="text-end">{order.remaining_quantity}</td>
|
||
|
|
<td><button onClick={(event) => { cancelOrder(event, order.id) }}>Cancel</button></td>
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
)
|
||
|
|
}
|