You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.2 KiB
59 lines
2.2 KiB
import { Box, Button, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { Cfd } from "./Types";
|
|
|
|
interface CfdTileProps {
|
|
index: number;
|
|
cfd: Cfd;
|
|
}
|
|
|
|
export default function CfdTile(
|
|
{
|
|
index,
|
|
cfd,
|
|
}: CfdTileProps,
|
|
) {
|
|
return (
|
|
<Box borderRadius={"md"} borderColor={"blue.800"} borderWidth={2} bg={"gray.50"}>
|
|
<VStack>
|
|
<Box bg="blue.800" w="100%">
|
|
<Text padding={2} color={"white"} fontWeight={"bold"}>CFD #{index}</Text>
|
|
</Box>
|
|
<SimpleGrid padding={5} columns={2} spacing={5}>
|
|
<Text>Trading Pair</Text>
|
|
<Text>{cfd.trading_pair}</Text>
|
|
<Text>Position</Text>
|
|
<Text>{cfd.position}</Text>
|
|
<Text>CFD Price</Text>
|
|
<Text>{cfd.initial_price}</Text>
|
|
<Text>Leverage</Text>
|
|
<Text>{cfd.leverage}</Text>
|
|
<Text>Quantity</Text>
|
|
<Text>{cfd.quantity_usd}</Text>
|
|
<Text>Margin</Text>
|
|
<Text>{cfd.margin}</Text>
|
|
<Text>Liquidation Price</Text>
|
|
<Text
|
|
overflow="hidden"
|
|
textOverflow="ellipsis"
|
|
whiteSpace="nowrap"
|
|
_hover={{ overflow: "visible" }}
|
|
>
|
|
{cfd.liquidation_price}
|
|
</Text>
|
|
<Text>Profit</Text>
|
|
<Text>{cfd.profit_usd}</Text>
|
|
<Text>Open since</Text>
|
|
{/* TODO: Format date in a more compact way */}
|
|
<Text>
|
|
{(new Date(cfd.state_transition_unix_timestamp * 1000).toString())}
|
|
</Text>
|
|
<Text>Status</Text>
|
|
<Text>{cfd.state}</Text>
|
|
</SimpleGrid>
|
|
{cfd.state === "Open"
|
|
&& <Box paddingBottom={5}><Button colorScheme="blue" variant="solid">Close</Button></Box>}
|
|
</VStack>
|
|
</Box>
|
|
);
|
|
}
|
|
|