Browse Source

Merge pull request #213 from comit-network/price-info-improvement

upload-correct-windows-binary
Philipp Hoenisch 3 years ago
committed by GitHub
parent
commit
5e28e4c582
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      frontend/src/MakerApp.tsx
  2. 5
      frontend/src/TakerApp.tsx
  3. 21
      frontend/src/components/CurrentPrice.tsx

6
frontend/src/MakerApp.tsx

@ -77,7 +77,7 @@ export default function App() {
<HStack spacing={5}>
<VStack>
<Wallet walletInfo={walletInfo} />
<CurrentPrice priceInfo={priceInfo} />
<Grid
gridTemplateColumns="max-content auto"
padding={5}
@ -87,8 +87,8 @@ export default function App() {
width="100%"
alignItems="center"
>
<Text align={"left"}>Current Price:</Text>
<Text>{49000}</Text>
<Text align={"left"}>Reference Price:</Text>
<CurrentPrice priceInfo={priceInfo} />
<Text>Min Quantity:</Text>
<CurrencyInputField

5
frontend/src/TakerApp.tsx

@ -20,9 +20,8 @@ import { useAsync } from "react-async";
import { useEventSource } from "react-sse-hooks";
import { CfdTable } from "./components/cfdtables/CfdTable";
import CurrencyInputField from "./components/CurrencyInputField";
import CurrentPrice from "./components/CurrentPrice";
import useLatestEvent from "./components/Hooks";
import { Cfd, intoCfd, intoOrder, Order, PriceInfo, StateGroupKey, WalletInfo } from "./components/Types";
import { Cfd, intoCfd, intoOrder, Order, StateGroupKey, WalletInfo } from "./components/Types";
import Wallet from "./components/Wallet";
interface CfdOrderRequestPayload {
@ -65,7 +64,6 @@ export default function App() {
let cfds = cfdsOrUndefined ? cfdsOrUndefined! : [];
const order = useLatestEvent<Order>(source, "order", intoOrder);
const walletInfo = useLatestEvent<WalletInfo>(source, "wallet");
const priceInfo = useLatestEvent<PriceInfo>(source, "quote");
const toast = useToast();
let [quantity, setQuantity] = useState("0");
@ -120,7 +118,6 @@ export default function App() {
<HStack spacing={5}>
<VStack>
<Wallet walletInfo={walletInfo} />
<CurrentPrice priceInfo={priceInfo} />
<Grid
gridTemplateColumns="max-content auto"
shadow="md"

21
frontend/src/components/CurrentPrice.tsx

@ -1,4 +1,4 @@
import { Box, Center, Divider, HStack, Skeleton, Text } from "@chakra-ui/react";
import { HStack, Skeleton, Text, Tooltip } from "@chakra-ui/react";
import React from "react";
import Timestamp from "./Timestamp";
import { PriceInfo } from "./Types";
@ -15,28 +15,17 @@ export default function CurrentPrice(
const { ask, bid, last_updated_at } = priceInfo || {};
return (
<Box shadow={"md"} marginBottom={5} padding={5}>
<Center><Text fontWeight={"bold"}>Current Price</Text></Center>
<Tooltip label={<><Text align={"left"}>Updated:</Text><Timestamp timestamp={last_updated_at!} /></>}>
<HStack>
<Text align={"left"}>Bid:</Text>
<Text align={"left"} fontWeight={"bold"}>Bid:</Text>
<Skeleton isLoaded={bid != null}>
<Text>{bid} USD</Text>
</Skeleton>
</HStack>
<Divider marginTop={2} marginBottom={2} />
<HStack>
<Text align={"left"}>Ask:</Text>
<Text align={"left"} fontWeight={"bold"}>Ask:</Text>
<Skeleton isLoaded={ask != null}>
<Text>{ask} USD</Text>
</Skeleton>
</HStack>
<Divider marginTop={2} marginBottom={2} />
<HStack>
<Text align={"left"}>Updated:</Text>
<Skeleton isLoaded={last_updated_at != null}>
<Timestamp timestamp={last_updated_at!} />
</Skeleton>
</HStack>
</Box>
</Tooltip>
);
}

Loading…
Cancel
Save