From ba9aa11fc1689bcb754beef37b97380fff44e5c8 Mon Sep 17 00:00:00 2001
From: Mariusz Klochowicz <mariusz@klochowicz.com>
Date: Mon, 22 Nov 2021 16:19:54 +1030
Subject: [PATCH] Display connected takers in the maker's UI

Simple list of connected takers (as the UI is mostly used for testing, it
doesn't need to look pretty).
---
 maker-frontend/src/MakerApp.tsx               |  8 +++++-
 .../src/components/ConnectedTakers.tsx        | 25 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 maker-frontend/src/components/ConnectedTakers.tsx

diff --git a/maker-frontend/src/MakerApp.tsx b/maker-frontend/src/MakerApp.tsx
index 768562d..4cbb8a1 100644
--- a/maker-frontend/src/MakerApp.tsx
+++ b/maker-frontend/src/MakerApp.tsx
@@ -20,6 +20,7 @@ import React, { useEffect, useState } from "react";
 import { useAsync } from "react-async";
 import { useEventSource } from "react-sse-hooks";
 import { CfdTable } from "./components/cfdtables/CfdTable";
+import ConnectedTakers, { TakerId } from "./components/ConnectedTakers";
 import CurrencyInputField from "./components/CurrencyInputField";
 import CurrentPrice from "./components/CurrentPrice";
 import createErrorToast from "./components/ErrorToast";
@@ -41,6 +42,8 @@ export default function App() {
     const order = useLatestEvent<Order>(source, "order", intoOrder);
     const walletInfo = useLatestEvent<WalletInfo>(source, "wallet");
     const priceInfo = useLatestEvent<PriceInfo>(source, "quote");
+    const takersOrUndefined = useLatestEvent<TakerId[]>(source, "takers");
+    let takers = takersOrUndefined || [];
 
     const toast = useToast();
 
@@ -151,7 +154,10 @@ export default function App() {
                         </GridItem>
                     </Grid>
                 </VStack>
-                {order && <OrderTile order={order} />}
+                <VStack>
+                    <ConnectedTakers takers={takers} />
+                    {order && <OrderTile order={order} />}
+                </VStack>
                 <Box width="40%" />
             </HStack>
 
diff --git a/maker-frontend/src/components/ConnectedTakers.tsx b/maker-frontend/src/components/ConnectedTakers.tsx
new file mode 100644
index 0000000..8c81fa1
--- /dev/null
+++ b/maker-frontend/src/components/ConnectedTakers.tsx
@@ -0,0 +1,25 @@
+import { Heading, ListItem, UnorderedList, VStack } from "@chakra-ui/react";
+import React from "react";
+
+export interface TakerId {
+    id: string;
+}
+
+interface Props {
+    takers: TakerId[];
+}
+
+const ConnectedTakers = ({ takers }: Props) => {
+    return (
+        <VStack spacing={3}>
+            <Heading size={"sm"} padding={2}>{"Connected takers: " + takers.length}</Heading>
+            <UnorderedList>
+                {takers.map((taker) => {
+                    return (<ListItem>{taker}</ListItem>);
+                })}
+            </UnorderedList>
+        </VStack>
+    );
+};
+
+export default ConnectedTakers;