Browse Source
All display related decisions are taken in the UI, but on top of the UI's model. For this purpose we introduce classes for `CfdState` and `Position` so we can add the relevant mapping functions to these classes. To achieve the mapping from daemon sse even to the `Cfd` / `Order` interface (that now contain classes instead of just primitives) we extend the sse hook to accept a mapping function. We define this mapping function for `Cfd` and `Order`, because those contain classes, for all others we just use the default mapping. Actions are dynamically rendered based on the state. The daemon decides on the action name. A single post endpoint handles all actions. The UI maps the actions to icons. Co-authored-by: Thomas Eizinger <thomas@coblox.tech>fix-olivia-event-id
Daniel Karzel
3 years ago
13 changed files with 434 additions and 350 deletions
@ -1,236 +0,0 @@ |
|||
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