Merge #662

662: Hide closed positions r=bonomat a=bonomat

Kinda resolves #556 (not really, but at least it helps a bit :) )

hidden
![image](https://user-images.githubusercontent.com/224613/142800557-3c2bfe1e-aca8-4bd8-8adb-47c9b95851d5.png)

shown
![image](https://user-images.githubusercontent.com/224613/142800600-587b4b9a-f917-4814-a73f-d1ce17776a3d.png)



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

taker-frontend/src/App.tsx

@@ -1,4 +1,14 @@
-import { Box, StackDivider, useToast, VStack } from "@chakra-ui/react";
+import {
+    Accordion,
+    AccordionButton,
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    StackDivider,
+    useToast,
+    VStack,
+} from "@chakra-ui/react";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { useAsync } from "react-async";
@@ -162,10 +172,25 @@ export const App = () => {
                                 cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
                                 title={"Open Positions"}
                             />
-                            <History
+
-                                cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
+                            <Accordion allowToggle width={"100%"}>
-                                title={"Closed Positions"}
+                                <AccordionItem>
-                            />
+                                    <h2>
+                                        <AccordionButton>
+                                            <AccordionIcon />
+                                            <Box w={"100%"} textAlign="center">
+                                                Show Closed Positions
+                                            </Box>
+                                            <AccordionIcon />
+                                        </AccordionButton>
+                                    </h2>
+                                    <AccordionPanel pb={4}>
+                                        <History
+                                            cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
+                                        />
+                                    </AccordionPanel>
+                                </AccordionItem>
+                            </Accordion>
                         </VStack>
                     </Route>
                 </Switch>

taker-frontend/src/components/History.tsx

@@ -35,13 +35,14 @@ import { Cfd, StateGroupKey, StateKey, Tx, TxLabel } from "./Types";
 
 interface HistoryProps {
     cfds: Cfd[];
-    title: string;
+    title?: string;
 }
 
 const History = ({ cfds, title }: HistoryProps) => {
     return (
         <VStack spacing={3}>
-            <Heading size={"lg"} padding={2}>{title}</Heading>
+            {title
+                && <Heading size={"lg"} padding={2}>{title}</Heading>}
             <SimpleGrid
                 columns={{ sm: 2, md: 4 }}
                 gap={4}