lukechilds
/
itchysats
mirror of https://github.com/lukechilds/itchysats.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Layout UI 

The Grid was restrictive and caused problems overlapping things.
We can achieve better layouting with flex components (for now mostly HStack and VStack flexes).
We can eventually also add space bounds to the flexes for more layourting (i.e. graph should take 70% on right...), but for now I kept it rather simple.

I experimented with Grids for the tiles where we group information (i.e. Buy, Order) but it did not look good, so I amd using flexes with fixed label width for better looks.
fix-bad-api-calls
Daniel Karzel 3 years ago
parent
bfa7db680f
commit
410ded4a24
No known key found for this signature in database GPG Key ID: 30C3FC2E438ADB6E
3 changed files with 170 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      frontend/src/MakerApp.tsx
  2. 45
      frontend/src/TakerApp.tsx
  3. 36
      frontend/src/components/OrderTile.tsx

42
frontend/src/MakerApp.tsx
View File

@ -1,9 +1,8 @@
import { import {
Box,
Button, Button,
Container, Container,
Flex, Divider,
Grid,
GridItem,
HStack, HStack,
Tab, Tab,
TabList, TabList,
@ -74,44 +73,48 @@ export default function App() {
!runningStates.includes(value.state) && !closedStates.includes(value.state) && !openStates.includes(value.state) !runningStates.includes(value.state) && !closedStates.includes(value.state) && !openStates.includes(value.state)
); );
const labelWidth = 110;
return ( return (
<Container maxWidth="120ch" marginTop="1rem"> <Container maxWidth="120ch" marginTop="1rem">
<Grid templateColumns="repeat(6, 1fr)" gap={4}> <HStack spacing={5}>
<GridItem colStart={1} colSpan={2}> <VStack>
<Wallet walletInfo={walletInfo} /> <Wallet walletInfo={walletInfo} />
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}> <VStack spacing={5} shadow={"md"} padding={5} width="100%" align={"stretch"}>
<HStack> <HStack>
<Text align={"left"}>Current Price:</Text> <Text width={labelWidth} align={"left"}>Current Price:</Text>
<Text>{49000}</Text> <Text>{49000}</Text>
</HStack> </HStack>
<HStack> <HStack>
<Text>Min Quantity:</Text> <Text width={labelWidth}>Min Quantity:</Text>
<CurrencyInputField <CurrencyInputField
onChange={(valueString: string) => setMinQuantity(parse(valueString))} onChange={(valueString: string) => setMinQuantity(parse(valueString))}
value={format(minQuantity)} value={format(minQuantity)}
/> />
</HStack> </HStack>
<HStack> <HStack>
<Text>Min Quantity:</Text> <Text width={labelWidth}>Min Quantity:</Text>
<CurrencyInputField <CurrencyInputField
onChange={(valueString: string) => setMaxQuantity(parse(valueString))} onChange={(valueString: string) => setMaxQuantity(parse(valueString))}
value={format(maxQuantity)} value={format(maxQuantity)}
/> />
</HStack> </HStack>
<HStack> <HStack>
<Text>Order Price:</Text> <Text width={labelWidth}>Order Price:</Text>
</HStack>
<CurrencyInputField <CurrencyInputField
onChange={(valueString: string) => setOrderPrice(parse(valueString))} onChange={(valueString: string) => setOrderPrice(parse(valueString))}
value={format(orderPrice)} value={format(orderPrice)}
/> />
<Text>Leverage:</Text> </HStack>
<Flex justifyContent={"space-between"}> <HStack>
<Text width={labelWidth}>Leverage:</Text>
<HStack spacing={5}>
<Button disabled={true}>x1</Button> <Button disabled={true}>x1</Button>
<Button disabled={true}>x2</Button> <Button disabled={true}>x2</Button>
<Button colorScheme="blue" variant="solid">x{5}</Button> <Button colorScheme="blue" variant="solid">x{5}</Button>
</Flex> </HStack>
<VStack> </HStack>
<Divider />
<Button <Button
disabled={isCreatingNewCfdOrder} disabled={isCreatingNewCfdOrder}
variant={"solid"} variant={"solid"}
@ -129,12 +132,11 @@ export default function App() {
</Button> </Button>
</VStack> </VStack>
</VStack> </VStack>
</GridItem>
<GridItem colStart={3} colSpan={2}>
{order && <OrderTile order={order} />} {order && <OrderTile order={order} />}
</GridItem> <Box width="40%" />
</Grid> </HStack>
<Tabs>
<Tabs marginTop={5}>
<TabList> <TabList>
<Tab>Running [{running.length}]</Tab> <Tab>Running [{running.length}]</Tab>
<Tab>Open [{open.length}]</Tab> <Tab>Open [{open.length}]</Tab>

45
frontend/src/TakerApp.tsx
View File

@ -1,9 +1,8 @@
import { import {
Box,
Button, Button,
Container, Container,
Flex, Divider,
Grid,
GridItem,
HStack, HStack,
Tab, Tab,
TabList, TabList,
@ -117,24 +116,20 @@ export default function App() {
!runningStates.includes(value.state) && !closedStates.includes(value.state) !runningStates.includes(value.state) && !closedStates.includes(value.state)
); );
const labelWidth = 120;
return ( return (
<Container maxWidth="120ch" marginTop="1rem"> <Container maxWidth="120ch" marginTop="1rem">
<HStack spacing={5}>
<VStack> <VStack>
<Grid templateColumns="repeat(6, 1fr)" gap={4}>
<GridItem colStart={1} colSpan={2}>
<Wallet walletInfo={walletInfo} /> <Wallet walletInfo={walletInfo} />
<VStack shadow={"md"} padding={5} align="stretch" spacing={4}> <VStack shadow={"md"} padding={5} align="stretch" spacing={5} width="100%">
<HStack>
{/*TODO: Do we need this? does it make sense to only display the price from the order?*/}
<Text align={"left"}>Current Price (Kraken):</Text>
<Text>tbd</Text>
</HStack>
<HStack> <HStack>
<Text align={"left"}>Order Price:</Text> <Text align={"left"} width={labelWidth}>Order Price:</Text>
<Text>{order?.price}</Text> <Text>{order?.price}</Text>
</HStack> </HStack>
<HStack> <HStack>
<Text>Quantity:</Text> <Text width={labelWidth}>Quantity:</Text>
<CurrencyInputField <CurrencyInputField
onChange={(valueString: string) => { onChange={(valueString: string) => {
setQuantity(parse(valueString)); setQuantity(parse(valueString));
@ -153,17 +148,19 @@ export default function App() {
/> />
</HStack> </HStack>
<HStack> <HStack>
<Text>Margin in BTC:</Text> <Text width={labelWidth}>Margin in BTC:</Text>
<Text>{margin}</Text> <Text>{margin}</Text>
</HStack> </HStack>
<Text>Leverage:</Text> <HStack>
{/* TODO: consider button group */} <Text width={labelWidth}>Leverage:</Text>
<Flex justifyContent={"space-between"}> <HStack spacing={5}>
<Button disabled={true}>x1</Button> <Button disabled={true}>x1</Button>
<Button disabled={true}>x2</Button> <Button disabled={true}>x2</Button>
<Button colorScheme="blue" variant="solid">x{order?.leverage}</Button> <Button colorScheme="blue" variant="solid">x{order?.leverage}</Button>
</Flex> </HStack>
{<Button </HStack>
<Divider />
<Button
disabled={isCreatingNewOrderRequest || !order} disabled={isCreatingNewOrderRequest || !order}
variant={"solid"} variant={"solid"}
colorScheme={"blue"} colorScheme={"blue"}
@ -176,11 +173,12 @@ export default function App() {
}} }}
> >
BUY BUY
</Button>} </Button>
</VStack>
</VStack> </VStack>
</GridItem> <Box width="100%" />
</Grid> </HStack>
<Tabs> <Tabs marginTop={5}>
<TabList> <TabList>
<Tab>Running [{running.length}]</Tab> <Tab>Running [{running.length}]</Tab>
<Tab>Closed [{closed.length}]</Tab> <Tab>Closed [{closed.length}]</Tab>
@ -199,7 +197,6 @@ export default function App() {
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
</VStack>
</Container> </Container>
); );
} }

36
frontend/src/components/OrderTile.tsx
View File

@ -1,4 +1,4 @@
import { Box, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import { Box, HStack, Text, VStack } from "@chakra-ui/react";
import React from "react"; import React from "react";
import { Order } from "./Types"; import { Order } from "./Types";
@ -11,14 +11,17 @@ function OrderTile(
order, order,
}: OrderProps, }: OrderProps,
) { ) {
const labelWidth = 140;
return ( return (
<Box borderRadius={"md"} borderColor={"blue.800"} borderWidth={2} bg={"gray.50"}> <Box borderRadius={"md"} borderColor={"blue.800"} borderWidth={2} bg={"gray.50"}>
<VStack> <VStack>
<Box bg="blue.800" w="100%"> <Box bg="blue.800" w="100%">
<Text padding={2} color={"white"} fontWeight={"bold"}>Current CFD Sell Order</Text> <Text padding={2} color={"white"} fontWeight={"bold"}>Current CFD Sell Order</Text>
</Box> </Box>
<SimpleGrid padding={5} columns={2} spacing={5}> <VStack padding={5} spacing={5} align={"stretch"}>
<Text>ID</Text> <HStack>
<Text width={labelWidth}>ID</Text>
<Text <Text
overflow="hidden" overflow="hidden"
textOverflow="ellipsis" textOverflow="ellipsis"
@ -27,17 +30,29 @@ function OrderTile(
> >
{order.id} {order.id}
</Text> </Text>
<Text>Trading Pair</Text> </HStack>
<HStack>
<Text width={labelWidth}>Trading Pair</Text>
<Text>{order.trading_pair}</Text> <Text>{order.trading_pair}</Text>
<Text>Price</Text> </HStack>
<HStack>
<Text width={labelWidth}>Price</Text>
<Text>{order.price}</Text> <Text>{order.price}</Text>
<Text>Min Quantity</Text> </HStack>
<HStack>
<Text width={labelWidth}>Min Quantity</Text>
<Text>{order.min_quantity}</Text> <Text>{order.min_quantity}</Text>
<Text>Max Quantity</Text> </HStack>
<HStack>
<Text width={labelWidth}>Max Quantity</Text>
<Text>{order.max_quantity}</Text> <Text>{order.max_quantity}</Text>
<Text>Leverage</Text> </HStack>
<HStack>
<Text width={labelWidth}>Leverage</Text>
<Text>{order.leverage}</Text> <Text>{order.leverage}</Text>
<Text>Liquidation Price</Text> </HStack>
<HStack>
<Text width={labelWidth}>Liquidation Price</Text>
<Text <Text
overflow="hidden" overflow="hidden"
textOverflow="ellipsis" textOverflow="ellipsis"
@ -46,7 +61,8 @@ function OrderTile(
> >
{order.liquidation_price} {order.liquidation_price}
</Text> </Text>
</SimpleGrid> </HStack>
</VStack>
</VStack> </VStack>
</Box> </Box>
); );

Write Preview
Loading…
Cancel
Save