Merge #660

660: Move wallet info out of navbar into main screen r=bonomat a=bonomat

resolves #519
resolves #536

![image](https://user-images.githubusercontent.com/224613/142798202-f661ab9d-7812-4fdb-854d-123df2222528.png)


Co-authored-by: bonomat <philipp@hoenisch.at>

taker-frontend/src/App.tsx

@@ -5,6 +5,7 @@ import {
     AccordionItem,
     AccordionPanel,
     Box,
+    Center,
     StackDivider,
     useToast,
     VStack,
@@ -33,7 +34,7 @@ import {
     StateGroupKey,
     WalletInfo,
 } from "./components/Types";
-import { Wallet } from "./components/Wallet";
+import { Wallet, WalletInfoBar } from "./components/Wallet";
 import useLatestEvent from "./Hooks";
 
 async function getMargin(payload: MarginRequestPayload): Promise<MarginResponse> {
@@ -138,58 +139,65 @@ export const App = () => {
                     <Route path="/wallet" element={<Wallet walletInfo={walletInfo} />} />
                     <Route
                         path="/"
-                        element={<VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
+                        element={<>
-                            <Trade
+                            <Center>
-                                orderId={order?.id}
+                                <WalletInfoBar walletInfo={walletInfo} />
-                                quantity={format(effectiveQuantity)}
+                            </Center>
-                                maxQuantity={max_quantity || 0}
+                            <VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
-                                minQuantity={min_quantity || 0}
+                                <Trade
-                                referencePrice={referencePrice}
+                                    orderId={order?.id}
-                                askPrice={askPrice}
+                                    quantity={format(effectiveQuantity)}
-                                margin={margin}
+                                    maxQuantity={max_quantity || 0}
-                                leverage={leverage}
+                                    minQuantity={min_quantity || 0}
-                                liquidationPrice={liquidationPrice}
+                                    referencePrice={referencePrice}
-                                onQuantityChange={(valueString: string) => {
+                                    askPrice={askPrice}
-                                    setUserHasEdited(true);
+                                    margin={margin}
-                                    setQuantity(parse(valueString));
+                                    leverage={leverage}
-                                    if (!order) {
+                                    liquidationPrice={liquidationPrice}
-                                        return;
+                                    onQuantityChange={(valueString: string) => {
-                                    }
+                                        setUserHasEdited(true);
-                                    let quantity = valueString ? Number.parseFloat(valueString) : 0;
+                                        setQuantity(parse(valueString));
-                                    let payload: MarginRequestPayload = {
+                                        if (!order) {
-                                        leverage: order.leverage,
+                                            return;
-                                        price: order.price,
+                                        }
-                                        quantity,
+                                        let quantity = valueString ? Number.parseFloat(valueString) : 0;
-                                    };
+                                        let payload: MarginRequestPayload = {
-                                    calculateMargin(payload);
+                                            leverage: order.leverage,
-                                }}
+                                            price: order.price,
-                                onLongSubmit={makeNewOrderRequest}
+                                            quantity,
-                                isSubmitting={isCreatingNewOrderRequest}
+                                        };
-                            />
+                                        calculateMargin(payload);
-                            <History
+                                    }}
-                                cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
+                                    onLongSubmit={makeNewOrderRequest}
-                                title={"Open Positions"}
+                                    isSubmitting={isCreatingNewOrderRequest}
-                            />
+                                />
-
+                                <History
-                            <Accordion allowToggle width={"100%"}>
+                                    cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
-                                <AccordionItem>
+                                    title={"Open Positions"}
-                                    <h2>
+                                />
-                                        <AccordionButton>
+
-                                            <AccordionIcon />
+                                <Accordion allowToggle width={"100%"}>
-                                            <Box w={"100%"} textAlign="center">
+                                    <AccordionItem>
-                                                Show Closed Positions
+                                        <h2>
-                                            </Box>
+                                            <AccordionButton>
-                                            <AccordionIcon />
+                                                <AccordionIcon />
-                                        </AccordionButton>
+                                                <Box w={"100%"} textAlign="center">
-                                    </h2>
+                                                    Show Closed Positions
-                                    <AccordionPanel pb={4}>
+                                                </Box>
-                                        <History
+                                                <AccordionIcon />
-                                            cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
+                                            </AccordionButton>
-                                        />
+                                        </h2>
-                                    </AccordionPanel>
+                                        <AccordionPanel pb={4}>
-                                </AccordionItem>
+                                            <History
-                            </Accordion>
+                                                cfds={cfds.filter((cfd) =>
-                        </VStack>}
+                                                    cfd.state.getGroup() === StateGroupKey.CLOSED
+                                                )}
+                                            />
+                                        </AccordionPanel>
+                                    </AccordionItem>
+                                </Accordion>
+                            </VStack>
+                        </>}
                     />
                 </Routes>
             </Box>

taker-frontend/src/components/NavBar.tsx

@@ -17,7 +17,6 @@ import { useNavigate } from "react-router-dom";
 import logoBlack from "../images/logo_nav_bar_black.svg";
 import logoWhite from "../images/logo_nav_bar_white.svg";
 import { WalletInfo } from "./Types";
-import { WalletNavBar } from "./Wallet";
 
 interface NavProps {
     walletInfo: WalletInfo | null;
@@ -57,8 +56,6 @@ export default function Nav({ walletInfo }: NavProps) {
                         </MenuList>
                     </Menu>
 
-                    <WalletNavBar walletInfo={walletInfo} />
-
                     <Flex alignItems={"center"}>
                         <Stack direction={"row"} spacing={7}>
                             <Button onClick={toggleColorMode} bg={"transparent"}>

taker-frontend/src/components/Wallet.tsx

@@ -1,6 +1,7 @@
-import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
+import { CheckIcon, CopyIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 import { Box, Center, Divider, HStack, IconButton, Skeleton, Text, useClipboard } from "@chakra-ui/react";
 import * as React from "react";
+import { useNavigate } from "react-router-dom";
 import Timestamp from "./Timestamp";
 import { WalletInfo } from "./Types";
 
@@ -49,19 +50,28 @@ export default function Wallet(
     );
 }
 
-const WalletNavBar = ({
+const WalletInfoBar = ({
     walletInfo,
 }: WalletProps) => {
     const { balance } = walletInfo || {};
+    const navigate = useNavigate();
 
     return (
         <HStack>
-            <Text align={"left"} as="b">On-chain balance:</Text>
+            <Text align={"left"} as="b">Wallet Balance:</Text>
             <Skeleton isLoaded={balance != null}>
-                <Text>{balance} BTC</Text>
+                <HStack>
+                    <Text>{balance} BTC</Text>
+                    <IconButton
+                        bg={"transparent"}
+                        aria-label="Go to wallet"
+                        icon={<ExternalLinkIcon />}
+                        onClick={() => navigate("/wallet")}
+                    />
+                </HStack>
             </Skeleton>
         </HStack>
     );
 };
 
-export { Wallet, WalletNavBar };
+export { Wallet, WalletInfoBar };