Merge pull request #184 from valefar-on-discord/offline-warning

Adding connection detector to alert the user if they are online

src/react/App.tsx

@@ -1,12 +1,13 @@
-import { HashRouter, Route, Switch } from "react-router-dom";
+import { CssBaseline, ThemeProvider } from "@material-ui/core";
 import React, { FC, ReactElement, useState } from "react";
+import { HashRouter, Route, Switch } from "react-router-dom";
 import styled from "styled-components";
-import Home from "./pages/Home";
-import { CssBaseline, ThemeProvider } from "@material-ui/core";
 import 'typeface-roboto';
+import { OnlineDetector } from "./components/OnlineDetector";
+import Home from "./pages/Home";
 import MainWizard from "./pages/MainWizard";
 import theme from "./theme";
-import { Network, ReuseMnemonicAction } from './types';
+import { Network } from './types';
 
 const Container = styled.main`
   display: flex;
@@ -16,7 +17,7 @@ const Container = styled.main`
 
 /**
  * The React app top level including theme and routing.
- * 
+ *
  * @returns the react element containing the app
  */
 const App: FC = (): ReactElement => {
@@ -27,6 +28,7 @@ const App: FC = (): ReactElement => {
       <CssBaseline />
       <HashRouter>
         <Container>
+          <OnlineDetector />
           <Switch>
             <Route exact path="/" render={() => <Home network={network} setNetwork={setNetwork} />} />
             <Route exact path="/wizard/:stepSequenceKey" render={() => <MainWizard network={network} />} />

src/react/components/OnlineDetector.tsx

@@ -0,0 +1,162 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  Typography,
+} from "@material-ui/core";
+import PermScanWifiIcon from "@material-ui/icons/PermScanWifi";
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import { BackgroundLight, Orange } from "../colors";
+
+const FixedErrorButton = styled(Button)`
+  width: 210px;
+  height: 50px;
+  position: fixed;
+  top: 26px;
+  left: 10px;
+  cursor: pointer;
+  color: ${Orange};
+`
+
+const PulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0px rgba(250, 30, 14, 0.7);
+  }
+
+  70% {
+    box-shadow: 0 0 0 22px rgba(250, 30, 14, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0px rgba(250, 30, 14, 0);
+  }
+`
+
+const PusleCircle = styled(Box)`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  left: 22px;
+  box-shadow: 0 0 0 0px rgba(250, 30, 14, 0.7);
+  opacity: 1;
+  animation: ${PulseAnimation} 3s infinite;
+  border-radius: 1000px;
+`
+
+const ErrorIcon = styled(PermScanWifiIcon)`
+  margin-right: 6px;
+  z-index: 1;
+`
+
+const StyledDialog = styled(Dialog)`
+  & .MuiPaper-root {
+    border-radius: 20px;
+    align-items: center;
+    background: ${BackgroundLight};
+    margin: auto;
+    padding: 20px 0px;
+  }
+`
+
+const StyledDialogTitle = styled(DialogTitle)`
+  & .MuiTypography-root {
+    font-size: 30px;
+  }
+`
+
+const StyledDialogContent = styled(DialogContent)`
+  min-height: 250px;
+`
+
+const PaddedText = styled(Typography)`
+  margin-bottom: 8px;
+`
+
+/**
+ * This will add an event listener to detect the users internet connectivity.
+ * If active, a pulsing warning icon with text will appear on the screen that
+ * when clicked will show a dialog warning the user of the danger of internet
+ * connectivity.
+ *
+ * @returns the warning and dialog component to render if necessary
+ */
+export const OnlineDetector = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [showWarning, setShowWarning] = React.useState<boolean>(false);
+
+  const updateOnlineStatus = () => {
+    if (navigator.onLine) {
+      setShowWarning(true);
+      window.removeEventListener("online", updateOnlineStatus);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("online", updateOnlineStatus);
+    updateOnlineStatus();
+
+    return () => {
+      window.removeEventListener("online", updateOnlineStatus);
+    };
+  }, []);
+
+  const onHideWarning = () => {
+    setOpen(false);
+    setShowWarning(false);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {showWarning && (
+        <FixedErrorButton onClick={() => setOpen(true)}>
+          <PusleCircle />
+          <ErrorIcon />
+          <Typography variant="body1">Internet Detected</Typography>
+        </FixedErrorButton>
+      )}
+
+      <StyledDialog
+        open={open}
+      >
+        <StyledDialogTitle>Internet Connection Detected</StyledDialogTitle>
+        <StyledDialogContent>
+          <Grid container direction="column" spacing={3}>
+            <Grid item>
+              <PaddedText variant="body1">Being connected to the internet while using this tool drastically increases the risk of exposing your Secret Recovery Phrase.</PaddedText>
+              <Typography variant="body1">You can avoid this risk by having a live OS such as Tails installed on a USB drive and run on a computer with network capabilities disabled.</Typography>
+            </Grid>
+            <Grid item>
+              <PaddedText variant="body1">You can visit https://tails.net/install/ for instructions on how to download, install, and run Tails on a USB device.</PaddedText>
+              <Typography variant="body1">If you have any questions you can get help at https://dsc.gg/ethstaker</Typography>
+            </Grid>
+          </Grid>
+        </StyledDialogContent>
+        <DialogActions>
+          <Button
+            color="secondary"
+            onClick={() => onHideWarning()}
+            variant="contained"
+          >
+            Hide Warning
+          </Button>
+          <Button
+            color="primary"
+            onClick={() => onClose()}
+            variant="contained"
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </StyledDialog>
+    </>
+  )
+};