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,7 +139,11 @@ export const App = () => {
                     <Route path="/wallet" element={<Wallet walletInfo={walletInfo} />} />
                     <Route
                         path="/"
-                        element={<VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
+                        element={<>
+                            <Center>
+                                <WalletInfoBar walletInfo={walletInfo} />
+                            </Center>
+                            <VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
                                 <Trade
                                     orderId={order?.id}
                                     quantity={format(effectiveQuantity)}
@@ -184,12 +189,15 @@ export const App = () => {
                                         </h2>
                                         <AccordionPanel pb={4}>
                                             <History
-                                            cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
+                                                cfds={cfds.filter((cfd) =>
+                                                    cfd.state.getGroup() === StateGroupKey.CLOSED
+                                                )}
                                             />
                                         </AccordionPanel>
                                     </AccordionItem>
                                 </Accordion>
-                        </VStack>}
+                            </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}>
+                <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 };