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

Merge pull request #125 from comit-network/simplify-ui

fix-bad-api-calls
Thomas Eizinger 3 years ago
committed by GitHub
parent
8f1e3dd83a ffeec85459
commit
f1b31a2a07
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
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
Unified 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 { import { Button, Container, Flex, Grid, GridItem, HStack, Stack, Text, useToast, VStack } from "@chakra-ui/react";
Box,
Button,
Center,
Divider,
Flex,
HStack,
SimpleGrid,
StackDivider,
Text,
useToast,
VStack,
} from "@chakra-ui/react";
import React, { useState } from "react"; import React, { useState } from "react";
import { useAsync } from "react-async"; import { useAsync } from "react-async";
import { Route, Routes } from "react-router-dom";
import { useEventSource } from "react-sse-hooks"; import { useEventSource } from "react-sse-hooks";
import "./App.css"; import "./App.css";
import CfdTile from "./components/CfdTile"; import CfdTile from "./components/CfdTile";
import CurrencyInputField from "./components/CurrencyInputField"; import CurrencyInputField from "./components/CurrencyInputField";
import useLatestEvent from "./components/Hooks"; import useLatestEvent from "./components/Hooks";
import NavLink from "./components/NavLink";
import OrderTile from "./components/OrderTile"; import OrderTile from "./components/OrderTile";
import { Cfd, Order, WalletInfo } from "./components/Types"; import { Cfd, Order, WalletInfo } from "./components/Types";
import Wallet from "./components/Wallet"; import Wallet from "./components/Wallet";
@ -62,30 +48,10 @@ export default function App() {
}); });
return ( return (
<Center marginTop={50}> <Container maxWidth="120ch" marginTop="1rem">
<HStack> <Grid templateColumns="repeat(6, 1fr)" gap={4}>
<Box marginRight={5}> <GridItem colSpan={4}>
<VStack align={"top"}> <Stack>
<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}>
{cfds && cfds.map((cfd, index) => {cfds && cfds.map((cfd, index) =>
<CfdTile <CfdTile
key={"cfd_" + index} key={"cfd_" + index}
@ -93,13 +59,11 @@ export default function App() {
cfd={cfd} cfd={cfd}
/> />
)} )}
</SimpleGrid> </Stack>
</Box> </GridItem>
</VStack> <GridItem colStart={5} colSpan={2}>
</Flex>
<Flex width={"50%"} marginLeft={5} direction={"column"}>
<Wallet walletInfo={walletInfo} /> <Wallet walletInfo={walletInfo} />
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"} height={"100%"}> <VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
<HStack> <HStack>
<Text align={"left"}>Current Price:</Text> <Text align={"left"}>Current Price:</Text>
<Text>{49000}</Text> <Text>{49000}</Text>
@ -132,7 +96,6 @@ export default function App() {
<Button colorScheme="blue" variant="solid">x{5}</Button> <Button colorScheme="blue" variant="solid">x{5}</Button>
</Flex> </Flex>
<VStack> <VStack>
<Center><Text>Maker UI</Text></Center>
<Button <Button
disabled={isCreatingNewCfdOrder} disabled={isCreatingNewCfdOrder}
variant={"solid"} variant={"solid"}
@ -148,42 +111,11 @@ export default function App() {
> >
{order ? "Update Sell Order" : "Create Sell Order"} {order ? "Update Sell Order" : "Create Sell Order"}
</Button> </Button>
<Divider /> {order && <OrderTile order={order} />}
<Box width={"100%"} overflow={"scroll"}>
<Box>
{order
&& <OrderTile
order={order}
/>}
</Box>
</Box>
</VStack> </VStack>
</VStack> </VStack>
</Flex> </GridItem>
</Flex>} </Grid>
> </Container>
</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>
); );
} }

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 React, { useState } from "react";
import { useAsync } from "react-async"; import { useAsync } from "react-async";
import { Route, Routes } from "react-router-dom";
import { useEventSource } from "react-sse-hooks"; import { useEventSource } from "react-sse-hooks";
import "./App.css"; import "./App.css";
import CfdTile from "./components/CfdTile"; import CfdTile from "./components/CfdTile";
import CurrencyInputField from "./components/CurrencyInputField"; import CurrencyInputField from "./components/CurrencyInputField";
import useLatestEvent from "./components/Hooks"; import useLatestEvent from "./components/Hooks";
import NavLink from "./components/NavLink";
import { Cfd, Order, WalletInfo } from "./components/Types"; import { Cfd, Order, WalletInfo } from "./components/Types";
import Wallet from "./components/Wallet"; import Wallet from "./components/Wallet";
@ -96,29 +94,10 @@ export default function App() {
}); });
return ( return (
<Center marginTop={50}> <Container maxWidth="120ch" marginTop="1rem">
<HStack> <Grid templateColumns="repeat(6, 1fr)" gap={4}>
<Box marginRight={5}> <GridItem colSpan={4}>
<VStack align={"top"}> <Stack>
<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}>
{cfds && cfds.map((cfd, index) => {cfds && cfds.map((cfd, index) =>
<CfdTile <CfdTile
key={"cfd_" + index} key={"cfd_" + index}
@ -126,13 +105,11 @@ export default function App() {
cfd={cfd} cfd={cfd}
/> />
)} )}
</SimpleGrid> </Stack>
</Box> </GridItem>
</VStack> <GridItem colStart={5} colSpan={2}>
</Flex>
<Flex width={"50%"} marginLeft={5}>
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
<Wallet walletInfo={walletInfo} /> <Wallet walletInfo={walletInfo} />
<VStack spacing={5} shadow={"md"} padding={5} align={"stretch"}>
<HStack> <HStack>
{/*TODO: Do we need this? does it make sense to only display the price from the order?*/} {/*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 align={"left"}>Current Price (Kraken):</Text>
@ -189,26 +166,8 @@ export default function App() {
BUY BUY
</Button>} </Button>}
</VStack> </VStack>
</Flex> </GridItem>
</Flex> </Grid>
</Route> </Container>
<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>
); );
} }

Write Preview
Loading…
Cancel
Save