PriceInfo UI improvement

Remove price info field from taker and move price info into create order box.

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

frontend/src/TakerApp.tsx

@@ -20,7 +20,6 @@ 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 Wallet from "./components/Wallet";
@@ -120,7 +119,6 @@ export default function App() {
             <HStack spacing={5}>
                 <VStack>
                     <Wallet walletInfo={walletInfo} />
-                    <CurrentPrice priceInfo={priceInfo} />
                     <Grid
                         gridTemplateColumns="max-content auto"
                         shadow="md"

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>
     );
 }