Improve the use of VStack, HStack and Flex

The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will.

Let's use the Stack component when it is a simple row or column of items.  If we need to customize the items let's use Flex.

More info: https://chakra-ui.com/docs/components/stack#notes-on-stack-vs-flex

dapp/src/DApp.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { ChakraProvider, Box } from "@chakra-ui/react"
+import { ChakraProvider, Box, Flex } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
@@ -10,10 +10,10 @@ function DApp() {
   useDetectThemeMode()
 
   return (
-    <Box height="100%" p={6}>
+    <Flex p={6} gap={2} direction="column">
       <Navbar />
       <Overview />
-    </Box>
+    </Flex>
   )
 }
 

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -59,7 +59,7 @@ export default function ConnectWallet() {
   const { btcAccount, ethAccount } = useWalletContext()
 
   return (
-    <HStack spacing="8px">
+    <HStack>
       <HStack mr="16px">
         <Text>Balance</Text>
         <Text as="b">

dapp/src/components/Navbar/index.tsx

@@ -1,22 +1,22 @@
 import React from "react"
-import { Box, Button, HStack, Icon, Switch } from "@chakra-ui/react"
+import { Button, Flex, Icon, Switch } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
 import { ChevronRight } from "../../static/icons"
 import { USD } from "../../constants"
 
 export default function Navbar() {
   return (
-    <Box mb={4}>
-      <HStack justifyContent="end">
+    <Flex gap={4} direction="column">
+      <Flex justifyContent="end">
         <ConnectWallet />
-      </HStack>
-      <HStack mt={8} justifyContent="space-between">
+      </Flex>
+      <Flex justifyContent="space-between">
         {/* TODO: Handle click actions */}
         <Switch size="sm">Show values in {USD.symbol}</Switch>
         <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
           Read documentation
         </Button>
-      </HStack>
-    </Box>
+      </Flex>
+    </Flex>
   )
 }

dapp/src/components/Overview/PositionDetails.tsx

@@ -8,27 +8,22 @@ import {
   Tooltip,
   Icon,
   useColorModeValue,
+  Flex,
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
 
 export default function PositionDetails() {
   return (
-    <VStack
-      p="24px"
-      h="100%"
-      justifyContent="space-between"
-      /* Unset alignItems to get a full-width button. */
-      alignItems="unset"
-    >
+    <Flex p="24px" h="100%" direction="column" justifyContent="space-between">
       <Box>
         <Text mb="8px">Your positions</Text>
-        <VStack alignItems="flex-start" gap="0">
+        <Flex direction="column" alignItems="flex-start">
           <HStack>
             <Text>34.75</Text>
             <Text>{BITCOIN.symbol}</Text>
           </HStack>
-          <HStack w="100%" justifyContent="space-between">
+          <Flex w="100%" justifyContent="space-between">
             <HStack>
               <Text>1.245.148,1</Text>
               <Text>{USD.symbol}</Text>
@@ -37,15 +32,14 @@ export default function PositionDetails() {
             <Tooltip label="Template">
               <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
             </Tooltip>
-          </HStack>
-        </VStack>
+          </Flex>
+        </Flex>
       </Box>
-      {/* Unset alignItems to get a full-width button. */}
-      <VStack spacing="16px" alignItems="unset" width="100%">
+      <Flex direction="column" gap={2}>
         {/* TODO: Handle click actions */}
         <Button>Stake</Button>
         <Button variant="outline">Withdraw</Button>
-      </VStack>
-    </VStack>
+      </Flex>
+    </Flex>
   )
 }