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

Simplify UI 

- No more routes for trade, wallet and settings.
- Use Grid instead of flexbox.
fix-bad-api-calls
Thomas Eizinger 3 years ago
parent
edeb3565d4
commit
ffeec85459
No known key found for this signature in database GPG Key ID: 651AC83A6C6C8B96
2 changed files with 144 additions and 253 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      frontend/src/Maker.tsx
  2. 65
      frontend/src/Taker.tsx

94
frontend/src/Maker.tsx
View File

@ -1,25 +1,11 @@
import {
Box,
Button,
Center,
Divider,
Flex,
HStack,
SimpleGrid,
StackDivider,
Text,
useToast,
VStack,
} from "@chakra-ui/react";
import { Button, Container, Flex, Grid, GridItem, HStack, Stack, Text, useToast, VStack } from "@chakra-ui/react";
import React, { useState } from "react";
import { useAsync } from "react-async";
import { Route, Routes } from "react-router-dom";
import { useEventSource } from "react-sse-hooks";
import "./App.css";
import CfdTile from "./components/CfdTile";
import CurrencyInputField from "./components/CurrencyInputField";
import useLatestEvent from "./components/Hooks";
import NavLink from "./components/NavLink";
import OrderTile from "./components/OrderTile";
import { Cfd, Order, WalletInfo } from "./components/Types";
import Wallet from "./components/Wallet";
@ -62,30 +48,10 @@ export default function App() {
});
return (
<Center marginTop={50}>
<HStack>
<Box marginRight={5}>
<VStack align={"top"}>
<NavLink text={"trade"} path={"trade"} />
<NavLink text={"wallet"} path={"wallet"} />
<NavLink text={"settings"} path={"settings"} />
</VStack>
</Box>
<Box width={1200} height="100%">
<Routes>
<Route
path="trade"
element={<Flex direction={"row"} height={"100%"}>
<Flex direction={"row"} width={"100%"}>
<VStack
spacing={5}
shadow={"md"}
padding={5}
width={"100%"}
divider={<StackDivider borderColor="gray.200" />}
>
<Box width={"100%"} overflow={"scroll"}>
<SimpleGrid columns={2} spacing={10}>
<Container maxWidth="120ch" marginTop="1rem">
<Grid templateColumns="repeat(6, 1fr)" gap={4}>
<GridItem colSpan={4}>
<Stack>
{cfds && cfds.map((cfd, index) =>
<CfdTile
key={"cfd_" + index}
@ -93,13 +59,11 @@ export default function App() {
cfd={cfd}
/>
)}
</SimpleGrid>
</Box>
</VStack>
</Flex>
<Flex width={"50%"} marginLeft={5} direction={"column"}>
</Stack>
</GridItem>
<GridItem colStart={5} colSpan={2}>
<Wallet walletInfo={walletInfo} />
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"} height={"100%"}>
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
<HStack>
<Text align={"left"}>Current Price:</Text>
<Text>{49000}</Text>
@ -132,7 +96,6 @@ export default function App() {
<Button colorScheme="blue" variant="solid">x{5}</Button>
</Flex>
<VStack>
<Center><Text>Maker UI</Text></Center>
<Button
disabled={isCreatingNewCfdOrder}
variant={"solid"}
@ -148,42 +111,11 @@ export default function App() {
>
{order ? "Update Sell Order" : "Create Sell Order"}
</Button>
<Divider />
<Box width={"100%"} overflow={"scroll"}>
<Box>
{order
&& <OrderTile
order={order}
/>}
</Box>
</Box>
{order && <OrderTile order={order} />}
</VStack>
</VStack>
</Flex>
</Flex>}
>
</Route>
<Route
path="wallet"
element={<Center height={"100%"} shadow={"md"}>
<Box>
<Text>Wallet</Text>
</Box>
</Center>}
>
</Route>
<Route
path="settings"
element={<Center height={"100%"} shadow={"md"}>
<Box>
<Text>Settings</Text>
</Box>
</Center>}
>
</Route>
</Routes>
</Box>
</HStack>
</Center>
</GridItem>
</Grid>
</Container>
);
}

65
frontend/src/Taker.tsx
View File

@ -1,13 +1,11 @@
import { Box, Button, Center, Flex, HStack, SimpleGrid, StackDivider, Text, useToast, VStack } from "@chakra-ui/react";
import { Button, Container, Flex, Grid, GridItem, HStack, Stack, Text, useToast, VStack } from "@chakra-ui/react";
import React, { useState } from "react";
import { useAsync } from "react-async";
import { Route, Routes } from "react-router-dom";
import { useEventSource } from "react-sse-hooks";
import "./App.css";
import CfdTile from "./components/CfdTile";
import CurrencyInputField from "./components/CurrencyInputField";
import useLatestEvent from "./components/Hooks";
import NavLink from "./components/NavLink";
import { Cfd, Order, WalletInfo } from "./components/Types";
import Wallet from "./components/Wallet";
@ -96,29 +94,10 @@ export default function App() {
});
return (
<Center marginTop={50}>
<HStack>
<Box marginRight={5}>
<VStack align={"top"}>
<NavLink text={"trade"} path={"trade"} />
<NavLink text={"wallet"} path={"wallet"} />
<NavLink text={"settings"} path={"settings"} />
</VStack>
</Box>
<Box width={1200} height="100%" maxHeight={800}>
<Routes>
<Route path="trade">
<Flex direction={"row"} height={"100%"}>
<Flex direction={"row"} width={"100%"}>
<VStack
spacing={5}
shadow={"md"}
padding={5}
width={"100%"}
divider={<StackDivider borderColor="gray.200" />}
>
<Box width={"100%"} overflow={"scroll"}>
<SimpleGrid columns={2} spacing={10}>
<Container maxWidth="120ch" marginTop="1rem">
<Grid templateColumns="repeat(6, 1fr)" gap={4}>
<GridItem colSpan={4}>
<Stack>
{cfds && cfds.map((cfd, index) =>
<CfdTile
key={"cfd_" + index}
@ -126,13 +105,11 @@ export default function App() {
cfd={cfd}
/>
)}
</SimpleGrid>
</Box>
</VStack>
</Flex>
<Flex width={"50%"} marginLeft={5}>
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
</Stack>
</GridItem>
<GridItem colStart={5} colSpan={2}>
<Wallet walletInfo={walletInfo} />
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
<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>
@ -189,26 +166,8 @@ export default function App() {
BUY
</Button>}
</VStack>
</Flex>
</Flex>
</Route>
<Route path="wallet">
<Center height={"100%"} shadow={"md"}>
<Box>
<Text>Wallet</Text>
</Box>
</Center>
</Route>
<Route path="settings">
<Center height={"100%"} shadow={"md"}>
<Box>
<Text>Settings</Text>
</Box>
</Center>
</Route>
</Routes>
</Box>
</HStack>
</Center>
</GridItem>
</Grid>
</Container>
);
}

Write Preview
Loading…
Cancel
Save