Philipp Hoenisch
3 years ago
committed by
GitHub
GitHub
9 changed files with 690 additions and 281 deletions
@ -1,42 +0,0 @@ |
|||||
.App { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.App-logo { |
|
||||
height: 40vmin; |
|
||||
pointer-events: none; |
|
||||
} |
|
||||
|
|
||||
@media (prefers-reduced-motion: no-preference) { |
|
||||
.App-logo { |
|
||||
animation: App-logo-spin infinite 20s linear; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.App-header { |
|
||||
background-color: #282c34; |
|
||||
min-height: 100vh; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: calc(10px + 2vmin); |
|
||||
color: white; |
|
||||
} |
|
||||
|
|
||||
.App-link { |
|
||||
color: #61dafb; |
|
||||
} |
|
||||
|
|
||||
@keyframes App-logo-spin { |
|
||||
from { |
|
||||
transform: rotate(0deg); |
|
||||
} |
|
||||
to { |
|
||||
transform: rotate(360deg); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
font-size: calc(10px + 2vmin); |
|
||||
} |
|
||||
@ -1,138 +0,0 @@ |
|||||
import { Box, Button, HStack, SimpleGrid, Text, useToast, VStack } from "@chakra-ui/react"; |
|
||||
import React from "react"; |
|
||||
import { useAsync } from "react-async"; |
|
||||
import { postAcceptOrder, postRejectOrder } from "../MakerClient"; |
|
||||
import { Cfd, unixTimestampToDate } from "./Types"; |
|
||||
|
|
||||
interface CfdTileProps { |
|
||||
index: number; |
|
||||
cfd: Cfd; |
|
||||
} |
|
||||
|
|
||||
export default function CfdTile( |
|
||||
{ |
|
||||
index, |
|
||||
cfd, |
|
||||
}: CfdTileProps, |
|
||||
) { |
|
||||
const toast = useToast(); |
|
||||
|
|
||||
let { run: acceptOrder, isLoading: isAccepting } = useAsync({ |
|
||||
deferFn: async ([args]: any[]) => { |
|
||||
try { |
|
||||
let payload = { |
|
||||
order_id: args.order_id, |
|
||||
}; |
|
||||
await postAcceptOrder(payload); |
|
||||
} catch (e) { |
|
||||
const description = typeof e === "string" ? e : JSON.stringify(e); |
|
||||
|
|
||||
toast({ |
|
||||
title: "Error", |
|
||||
description, |
|
||||
status: "error", |
|
||||
duration: 9000, |
|
||||
isClosable: true, |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
let { run: rejectOrder, isLoading: isRejecting } = useAsync({ |
|
||||
deferFn: async ([args]: any[]) => { |
|
||||
try { |
|
||||
let payload = { |
|
||||
order_id: args.order_id, |
|
||||
}; |
|
||||
await postRejectOrder(payload); |
|
||||
} catch (e) { |
|
||||
const description = typeof e === "string" ? e : JSON.stringify(e); |
|
||||
|
|
||||
toast({ |
|
||||
title: "Error", |
|
||||
description, |
|
||||
status: "error", |
|
||||
duration: 9000, |
|
||||
isClosable: true, |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
let actionButtons; |
|
||||
if (cfd.state === "Open") { |
|
||||
actionButtons = <Box paddingBottom={5}> |
|
||||
<Button colorScheme="blue" variant="solid"> |
|
||||
Close |
|
||||
</Button> |
|
||||
</Box>; |
|
||||
} else if (cfd.state == "Requested") { |
|
||||
actionButtons = ( |
|
||||
<HStack> |
|
||||
<Box paddingBottom={5}> |
|
||||
<Button |
|
||||
colorScheme="blue" |
|
||||
variant="solid" |
|
||||
onClick={async () => acceptOrder(cfd)} |
|
||||
isLoading={isAccepting} |
|
||||
> |
|
||||
Accept |
|
||||
</Button> |
|
||||
</Box> |
|
||||
<Box paddingBottom={5}> |
|
||||
<Button |
|
||||
colorScheme="blue" |
|
||||
variant="solid" |
|
||||
onClick={async () => rejectOrder(cfd)} |
|
||||
isLoading={isRejecting} |
|
||||
> |
|
||||
Reject |
|
||||
</Button> |
|
||||
</Box> |
|
||||
</HStack> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
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> |
|
||||
{unixTimestampToDate(cfd.state_transition_timestamp).toString()} |
|
||||
</Text> |
|
||||
<Text>Status</Text> |
|
||||
<Text>{cfd.state}</Text> |
|
||||
</SimpleGrid> |
|
||||
{actionButtons} |
|
||||
</VStack> |
|
||||
</Box> |
|
||||
); |
|
||||
} |
|
||||
@ -0,0 +1,271 @@ |
|||||
|
import { ChevronRightIcon, ChevronUpIcon, TriangleDownIcon, TriangleUpIcon } from "@chakra-ui/icons"; |
||||
|
import { Badge, Box, chakra, HStack, IconButton, Table as CUITable, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react"; |
||||
|
import React from "react"; |
||||
|
import { Column, Row, useExpanded, useSortBy, useTable } from "react-table"; |
||||
|
import { Cfd } from "../Types"; |
||||
|
|
||||
|
interface CfdTableProps { |
||||
|
data: Cfd[]; |
||||
|
} |
||||
|
|
||||
|
export function CfdTable( |
||||
|
{ data }: CfdTableProps, |
||||
|
) { |
||||
|
const tableData = React.useMemo( |
||||
|
() => data, |
||||
|
[data], |
||||
|
); |
||||
|
|
||||
|
const columns: Array<Column<Cfd>> = React.useMemo( |
||||
|
() => [ |
||||
|
{ |
||||
|
id: "expander", |
||||
|
Header: () => null, |
||||
|
Cell: ({ row }: any) => ( |
||||
|
<span {...row.getToggleRowExpandedProps()}> |
||||
|
{row.isExpanded |
||||
|
? <IconButton |
||||
|
aria-label="Reduce" |
||||
|
icon={<ChevronUpIcon />} |
||||
|
onClick={() => { |
||||
|
row.toggleRowExpanded(); |
||||
|
}} |
||||
|
/> |
||||
|
: <IconButton |
||||
|
aria-label="Expand" |
||||
|
icon={<ChevronRightIcon />} |
||||
|
onClick={() => { |
||||
|
row.toggleRowExpanded(); |
||||
|
}} |
||||
|
/>} |
||||
|
</span> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
Header: "OrderId", |
||||
|
accessor: "order_id", // accessor is the "key" in the data
|
||||
|
}, |
||||
|
{ |
||||
|
Header: "Position", |
||||
|
accessor: ({ position }) => { |
||||
|
let colorScheme = "green"; |
||||
|
if (position.toLocaleLowerCase() === "buy") { |
||||
|
colorScheme = "purple"; |
||||
|
} |
||||
|
return ( |
||||
|
<Badge colorScheme={colorScheme}>{position}</Badge> |
||||
|
); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
Header: "Quantity", |
||||
|
accessor: ({ quantity_usd }) => { |
||||
|
return (<Dollars amount={quantity_usd} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Leverage", |
||||
|
accessor: "leverage", |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Margin", |
||||
|
accessor: "margin", |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Initial Price", |
||||
|
accessor: ({ initial_price }) => { |
||||
|
return (<Dollars amount={initial_price} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Liquidation Price", |
||||
|
isNumeric: true, |
||||
|
accessor: ({ liquidation_price }) => { |
||||
|
return (<Dollars amount={liquidation_price} />); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Unrealized P/L", |
||||
|
accessor: ({ profit_usd }) => { |
||||
|
return (<Dollars amount={profit_usd} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Timestamp", |
||||
|
accessor: "state_transition_timestamp", |
||||
|
}, |
||||
|
{ |
||||
|
Header: "State", |
||||
|
accessor: ({ state }) => { |
||||
|
let colorScheme = "gray"; |
||||
|
if (state.toLowerCase() === "rejected") { |
||||
|
colorScheme = "red"; |
||||
|
} |
||||
|
if (state.toLowerCase() === "contract setup") { |
||||
|
colorScheme = "green"; |
||||
|
} |
||||
|
return ( |
||||
|
<Badge colorScheme={colorScheme}>{state}</Badge> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
[], |
||||
|
); |
||||
|
|
||||
|
// if we mark certain columns only as hidden, they are still around and we can render them in the sub-row
|
||||
|
const hiddenColumns = ["order_id", "leverage", "state_transition_timestamp"]; |
||||
|
|
||||
|
return ( |
||||
|
<Table |
||||
|
tableData={tableData} |
||||
|
columns={columns} |
||||
|
hiddenColumns={hiddenColumns} |
||||
|
renderDetails={renderRowSubComponent} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function renderRowSubComponent(row: Row<Cfd>) { |
||||
|
// TODO: I would show additional information here such as txids, timestamps, actions
|
||||
|
let cells = row.allCells |
||||
|
.filter((cell) => { |
||||
|
return ["state_transition_timestamp"].includes(cell.column.id); |
||||
|
}) |
||||
|
.map((cell) => { |
||||
|
return cell; |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
Showing some more information here... |
||||
|
<HStack> |
||||
|
{cells.map(cell => ( |
||||
|
<Box key={cell.column.id}> |
||||
|
{cell.column.id} = {cell.render("Cell")} |
||||
|
</Box> |
||||
|
))} |
||||
|
</HStack> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
interface DollarsProps { |
||||
|
amount: number; |
||||
|
} |
||||
|
function Dollars({ amount }: DollarsProps) { |
||||
|
const price = Math.floor(amount * 100.0) / 100.0; |
||||
|
return ( |
||||
|
<> |
||||
|
$ {price} |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
interface TableProps { |
||||
|
columns: Array<Column<Cfd>>; |
||||
|
tableData: Cfd[]; |
||||
|
hiddenColumns: string[]; |
||||
|
renderDetails: any; |
||||
|
} |
||||
|
|
||||
|
export function Table({ columns, tableData, hiddenColumns, renderDetails }: TableProps) { |
||||
|
const { |
||||
|
getTableProps, |
||||
|
getTableBodyProps, |
||||
|
headerGroups, |
||||
|
rows, |
||||
|
prepareRow, |
||||
|
visibleColumns, |
||||
|
} = useTable( |
||||
|
{ |
||||
|
columns, |
||||
|
data: tableData, |
||||
|
initialState: { |
||||
|
hiddenColumns, |
||||
|
}, |
||||
|
}, |
||||
|
useSortBy, |
||||
|
useExpanded, |
||||
|
); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<CUITable {...getTableProps()} colorScheme="blue"> |
||||
|
<Thead> |
||||
|
{headerGroups.map((headerGroup) => ( |
||||
|
<Tr {...headerGroup.getHeaderGroupProps()}> |
||||
|
{headerGroup.headers.map((column) => ( |
||||
|
<Th |
||||
|
// @ts-ignore
|
||||
|
{...column.getHeaderProps(column.getSortByToggleProps())} |
||||
|
// @ts-ignore
|
||||
|
isNumeric={column.isNumeric} |
||||
|
> |
||||
|
{column.render("Header")} |
||||
|
<chakra.span pl="4"> |
||||
|
{// @ts-ignore
|
||||
|
column.isSorted |
||||
|
? ( |
||||
|
// @ts-ignore
|
||||
|
column.isSortedDesc |
||||
|
? ( |
||||
|
<TriangleDownIcon aria-label="sorted descending" /> |
||||
|
) |
||||
|
: ( |
||||
|
<TriangleUpIcon aria-label="sorted ascending" /> |
||||
|
) |
||||
|
) |
||||
|
: null} |
||||
|
</chakra.span> |
||||
|
</Th> |
||||
|
))} |
||||
|
</Tr> |
||||
|
))} |
||||
|
</Thead> |
||||
|
<Tbody {...getTableBodyProps()}> |
||||
|
{rows.map((row) => { |
||||
|
prepareRow(row); |
||||
|
return ( |
||||
|
<React.Fragment key={row.id}> |
||||
|
<Tr |
||||
|
{...row.getRowProps()} |
||||
|
onClick={() => |
||||
|
// @ts-ignore
|
||||
|
row.toggleRowExpanded()} |
||||
|
> |
||||
|
{row.cells.map((cell) => ( |
||||
|
// @ts-ignore
|
||||
|
<Td {...cell.getCellProps()} isNumeric={cell.column.isNumeric}> |
||||
|
{cell.render("Cell")} |
||||
|
</Td> |
||||
|
))} |
||||
|
</Tr> |
||||
|
|
||||
|
{// @ts-ignore
|
||||
|
row.isExpanded |
||||
|
? ( |
||||
|
<Tr> |
||||
|
<Td> |
||||
|
</Td> |
||||
|
<Td colSpan={visibleColumns.length - 1}> |
||||
|
{renderDetails(row)} |
||||
|
</Td> |
||||
|
</Tr> |
||||
|
) |
||||
|
: null} |
||||
|
</React.Fragment> |
||||
|
); |
||||
|
})} |
||||
|
</Tbody> |
||||
|
</CUITable> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,236 @@ |
|||||
|
import { CheckIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon } from "@chakra-ui/icons"; |
||||
|
import { Badge, Box, HStack, IconButton, useToast } from "@chakra-ui/react"; |
||||
|
import React from "react"; |
||||
|
import { useAsync } from "react-async"; |
||||
|
import { Column, Row } from "react-table"; |
||||
|
import { postAcceptOrder, postRejectOrder } from "../../MakerClient"; |
||||
|
import { Cfd } from "../Types"; |
||||
|
import { Table } from "./CfdTable"; |
||||
|
|
||||
|
interface CfdMableTakerProps { |
||||
|
data: Cfd[]; |
||||
|
} |
||||
|
|
||||
|
export function CfdTableMaker( |
||||
|
{ data }: CfdMableTakerProps, |
||||
|
) { |
||||
|
const tableData = React.useMemo( |
||||
|
() => data, |
||||
|
[data], |
||||
|
); |
||||
|
|
||||
|
const toast = useToast(); |
||||
|
|
||||
|
let { run: acceptOrder, isLoading: isAccepting } = useAsync({ |
||||
|
deferFn: async ([orderId]: any[]) => { |
||||
|
try { |
||||
|
let payload = { |
||||
|
order_id: orderId, |
||||
|
}; |
||||
|
await postAcceptOrder(payload); |
||||
|
} catch (e) { |
||||
|
const description = typeof e === "string" ? e : JSON.stringify(e); |
||||
|
|
||||
|
toast({ |
||||
|
title: "Error", |
||||
|
description, |
||||
|
status: "error", |
||||
|
duration: 9000, |
||||
|
isClosable: true, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
let { run: rejectOrder, isLoading: isRejecting } = useAsync({ |
||||
|
deferFn: async ([orderId]: any[]) => { |
||||
|
try { |
||||
|
let payload = { |
||||
|
order_id: orderId, |
||||
|
}; |
||||
|
await postRejectOrder(payload); |
||||
|
} catch (e) { |
||||
|
const description = typeof e === "string" ? e : JSON.stringify(e); |
||||
|
|
||||
|
toast({ |
||||
|
title: "Error", |
||||
|
description, |
||||
|
status: "error", |
||||
|
duration: 9000, |
||||
|
isClosable: true, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const columns: Array<Column<Cfd>> = React.useMemo( |
||||
|
() => [ |
||||
|
{ |
||||
|
id: "expander", |
||||
|
Header: () => null, |
||||
|
Cell: ({ row }: any) => ( |
||||
|
<span {...row.getToggleRowExpandedProps()}> |
||||
|
{row.isExpanded |
||||
|
? <IconButton |
||||
|
aria-label="Reduce" |
||||
|
icon={<ChevronUpIcon />} |
||||
|
onClick={() => { |
||||
|
row.toggleRowExpanded(); |
||||
|
}} |
||||
|
/> |
||||
|
: <IconButton |
||||
|
aria-label="Expand" |
||||
|
icon={<ChevronRightIcon />} |
||||
|
onClick={() => { |
||||
|
row.toggleRowExpanded(); |
||||
|
}} |
||||
|
/>} |
||||
|
</span> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
Header: "OrderId", |
||||
|
accessor: "order_id", |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Position", |
||||
|
accessor: ({ position }) => { |
||||
|
let colorScheme = "green"; |
||||
|
if (position.toLocaleLowerCase() === "buy") { |
||||
|
colorScheme = "purple"; |
||||
|
} |
||||
|
return ( |
||||
|
<Badge colorScheme={colorScheme}>{position}</Badge> |
||||
|
); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
Header: "Quantity", |
||||
|
accessor: ({ quantity_usd }) => { |
||||
|
return (<Dollars amount={quantity_usd} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Leverage", |
||||
|
accessor: "leverage", |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Margin", |
||||
|
accessor: "margin", |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Initial Price", |
||||
|
accessor: ({ initial_price }) => { |
||||
|
return (<Dollars amount={initial_price} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Liquidation Price", |
||||
|
isNumeric: true, |
||||
|
accessor: ({ liquidation_price }) => { |
||||
|
return (<Dollars amount={liquidation_price} />); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Unrealized P/L", |
||||
|
accessor: ({ profit_usd }) => { |
||||
|
return (<Dollars amount={profit_usd} />); |
||||
|
}, |
||||
|
isNumeric: true, |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Timestamp", |
||||
|
accessor: "state_transition_timestamp", |
||||
|
}, |
||||
|
{ |
||||
|
Header: "Action", |
||||
|
accessor: ({ state, order_id }) => { |
||||
|
if (state.toLowerCase() === "requested") { |
||||
|
return (<HStack> |
||||
|
<IconButton |
||||
|
colorScheme="green" |
||||
|
aria-label="Accept" |
||||
|
icon={<CheckIcon />} |
||||
|
onClick={async () => acceptOrder(order_id)} |
||||
|
isLoading={isAccepting} |
||||
|
/> |
||||
|
<IconButton |
||||
|
colorScheme="red" |
||||
|
aria-label="Reject" |
||||
|
icon={<CloseIcon />} |
||||
|
onClick={async () => rejectOrder(order_id)} |
||||
|
isLoading={isRejecting} |
||||
|
/> |
||||
|
</HStack>); |
||||
|
} |
||||
|
|
||||
|
let colorScheme = "gray"; |
||||
|
if (state.toLowerCase() === "rejected") { |
||||
|
colorScheme = "red"; |
||||
|
} |
||||
|
if (state.toLowerCase() === "contract setup") { |
||||
|
colorScheme = "green"; |
||||
|
} |
||||
|
return ( |
||||
|
<Badge colorScheme={colorScheme}>{state}</Badge> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
[], |
||||
|
); |
||||
|
|
||||
|
// if we mark certain columns only as hidden, they are still around and we can render them in the sub-row
|
||||
|
const hiddenColumns = ["order_id", "leverage", "Unrealized P/L", "state_transition_timestamp"]; |
||||
|
|
||||
|
return ( |
||||
|
<Table |
||||
|
tableData={tableData} |
||||
|
columns={columns} |
||||
|
hiddenColumns={hiddenColumns} |
||||
|
renderDetails={renderRowSubComponent} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function renderRowSubComponent(row: Row<Cfd>) { |
||||
|
// TODO: I would show additional information here such as txids, timestamps, actions
|
||||
|
let cells = row.allCells |
||||
|
.filter((cell) => { |
||||
|
return ["state_transition_timestamp"].includes(cell.column.id); |
||||
|
}) |
||||
|
.map((cell) => { |
||||
|
return cell; |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
Showing some more information here... |
||||
|
<HStack> |
||||
|
{cells.map(cell => ( |
||||
|
<Box key={cell.column.id}> |
||||
|
{cell.column.id} = {cell.render("Cell")} |
||||
|
</Box> |
||||
|
))} |
||||
|
</HStack> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
interface DollarsProps { |
||||
|
amount: number; |
||||
|
} |
||||
|
function Dollars({ amount }: DollarsProps) { |
||||
|
const price = Math.floor(amount * 100.0) / 100.0; |
||||
|
return ( |
||||
|
<> |
||||
|
$ {price} |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
Loading…
Reference in new issue