Merge #805

805: Add a disclaimer on taker startup r=klochowicz a=klochowicz

Display a modal pop-up that goes away when it gets acknowledged.

Co-authored-by: Mariusz Klochowicz <mariusz@klochowicz.com>

taker-frontend/src/App.tsx

@@ -16,6 +16,7 @@ import { Route, Routes } from "react-router-dom";
 import { useEventSource } from "react-sse-hooks";
 import useWebSocket from "react-use-websocket";
 import { useBackendMonitor } from "./components/BackendMonitor";
+import Disclaimer from "./components/Disclaimer";
 import Footer from "./components/Footer";
 import History from "./components/History";
 import Nav from "./components/NavBar";
@@ -103,6 +104,7 @@ export const App = () => {
 
     return (
         <>
+            <Disclaimer />
             <Nav walletInfo={walletInfo} connectedToMaker={connectedToMaker} />
             <Box textAlign="center" padding={3}>
                 <Routes>

taker-frontend/src/components/Disclaimer.tsx

@@ -0,0 +1,70 @@
+import {
+    Button,
+    Link,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    useDisclosure,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+
+// Disclaimer is a modal pop-up that opens up before you start using the app and
+// goes away after the user dismisses it. It displays the information we want
+// the user to know before they start using the software.
+export default function Disclaimer() {
+    const [ack, setAck] = useState<boolean>(false);
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    useEffect(() => {
+        if (!ack) {
+            onOpen();
+        } else {
+            onClose();
+        }
+    }, [ack, onClose, onOpen]);
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose}>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>Disclaimer</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <Text>
+                            ItchySats is a new and complex system that has not been fully audited. Like most complex
+                            software systems, ItchySats may contain bugs which, in extreme cases, could lead to a loss
+                            of funds.
+                        </Text>
+                        <br />
+                        <Text>Please be careful and test on testnet first following</Text>
+                        <Link
+                            href="https://itchysats.medium.com/p2p-bitcoin-cfds-give-it-a-try-4db2d5804328"
+                            isExternal
+                        >
+                            this guide!
+                        </Link>
+                        <Text>Additionally, CFD trading is inherently risky: so don't get rekt</Text>
+                    </ModalBody>
+                    <ModalFooter>
+                        <Button
+                            colorScheme="blue"
+                            mr={3}
+                            onClick={() => {
+                                setAck(true);
+                            }}
+                        >
+                            Close
+                        </Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+}