feat: display warning when backup not done

src/App.tsx

@@ -51,7 +51,7 @@ const GlobalCss = withStyles((theme: Theme) => {
 })(() => null);
 
 const electronStore = useElectronStore({});
-const backupStore = useBackupStore({});
+const backupStore = useBackupStore({ backupInfoLoaded: false });
 
 function App(): ReactElement {
   useEffect(() => {

src/common/WarningMessage.tsx

@@ -0,0 +1,99 @@
+import {
+  Card,
+  createStyles,
+  Grid,
+  IconButton,
+  makeStyles,
+  Theme,
+  Typography,
+} from "@material-ui/core";
+import WarningIcon from "@material-ui/icons/Warning";
+import React, { ReactElement } from "react";
+import CloseIcon from "@material-ui/icons/Close";
+
+type WarningMessageProps = {
+  message: string;
+  showCloseIcon?: boolean;
+  onClose?: () => void;
+  alignToStart?: boolean;
+  additionalButtons?: { button: ReactElement; key: string }[];
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    warningMessage: {
+      backgroundColor: theme.palette.warning.dark,
+      color: theme.palette.warning.contrastText,
+      marginBottom: theme.spacing(2),
+      padding: theme.spacing(1),
+    },
+    iconContainer: {
+      display: "flex",
+    },
+  })
+);
+
+const WarningMessage = (props: WarningMessageProps): ReactElement => {
+  const {
+    message,
+    showCloseIcon,
+    onClose,
+    alignToStart,
+    additionalButtons,
+  } = props;
+  const classes = useStyles();
+
+  return (
+    <Grid item>
+      <Card elevation={0} className={classes.warningMessage}>
+        <Grid
+          item
+          container
+          wrap="nowrap"
+          justify="space-between"
+          alignItems="center"
+        >
+          <Grid
+            item
+            container
+            spacing={1}
+            justify={alignToStart ? "flex-start" : "center"}
+            alignItems="center"
+            wrap="nowrap"
+          >
+            <Grid item className={classes.iconContainer}>
+              <WarningIcon fontSize="small" />
+            </Grid>
+            <Grid item>
+              <Typography variant="body2" align="center">
+                {message}
+              </Typography>
+            </Grid>
+          </Grid>
+          {(showCloseIcon || additionalButtons?.length) && (
+            <Grid item container justify="flex-end" spacing={1}>
+              {additionalButtons?.map((button) => (
+                <Grid item key={button.key}>
+                  {button.button}
+                </Grid>
+              ))}
+              {showCloseIcon && (
+                <Grid item>
+                  <IconButton
+                    color="inherit"
+                    size="small"
+                    onClick={() => (onClose ? onClose() : void 0)}
+                  >
+                    <CloseIcon />
+                  </IconButton>
+                </Grid>
+              )}
+            </Grid>
+          )}
+        </Grid>
+      </Card>
+    </Grid>
+  );
+};
+
+export default WarningMessage;

src/dashboard/Dashboard.tsx

@@ -28,6 +28,7 @@ import { Path } from "../router/Path";
 import Console from "./console/Console";
 import MenuItem, { MenuItemProps } from "./menu/MenuItem";
 import Overview from "./overview/Overview";
+// import SetupWarning from "./SetupWarning";
 import Trade from "./trade/Trade";
 import Tradehistory from "./tradehistory/Tradehistory";
 import Wallets from "./wallet/Wallets";
@@ -57,6 +58,7 @@ const useStyles = makeStyles((theme: Theme) =>
       padding: theme.spacing(3),
       height: "100vh",
       display: "flex",
+      flexDirection: "column",
     },
   })
 );
@@ -211,6 +213,9 @@ const Dashboard = (): ReactElement => {
         </Grid>
       </Drawer>
       <main className={classes.content}>
+        {/* <Grid item container>
+          {<SetupWarning />}
+        </Grid> */}
         <Switch>
           {menuItems.map((item) => (
             <Route exact path={`${path}${item.path}`} key={item.text}>

src/dashboard/SetupWarning.tsx

@@ -0,0 +1,102 @@
+import {
+  Button,
+  Collapse,
+  createStyles,
+  makeStyles,
+  Theme,
+} from "@material-ui/core";
+import { inject, observer } from "mobx-react";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { interval } from "rxjs";
+import { catchError, exhaustMap, filter, take } from "rxjs/operators";
+import api from "../api";
+import WarningMessage from "../common/WarningMessage";
+import { Path } from "../router/Path";
+import { BackupStore, BACKUP_STORE } from "../stores/backupStore";
+
+type SetupWarningProps = {
+  backupStore?: BackupStore;
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      width: "100%",
+      marginBottom: theme.spacing(2),
+    },
+  })
+);
+
+const SetupWarning = inject(BACKUP_STORE)(
+  observer(
+    (props: SetupWarningProps): ReactElement => {
+      const { backupStore } = props;
+      const classes = useStyles();
+      const history = useHistory();
+      const [visible, setVisible] = useState(false);
+      const [closeBtnVisible, setCloseBtnVisible] = useState(false);
+
+      useEffect(() => {
+        interval(1000).subscribe(() =>
+          setVisible(
+            backupStore!.backupInfoLoaded &&
+              (!!backupStore!.defaultPassword ||
+                !backupStore!.mnemonicShown ||
+                !!backupStore!.defaultBackupDirectory)
+          )
+        );
+      }, [backupStore]);
+
+      useEffect(() => {
+        const balanceSubscription = interval(5000)
+          .pipe(
+            exhaustMap(() => api.getbalance$()),
+            catchError((e, caught) => caught),
+            filter((value) => !!Object.keys(value.balances)?.length),
+            take(1),
+            filter(
+              (value) =>
+                !Object.values(value.balances).some(
+                  (balance) => Number(balance.total_balance) > 0
+                )
+            )
+          )
+          .subscribe({
+            next: () => setCloseBtnVisible(true),
+          });
+        return () => balanceSubscription.unsubscribe();
+      }, []);
+
+      return (
+        <Collapse in={visible} className={classes.wrapper}>
+          <WarningMessage
+            message="Secure your funds. Setup password, store mnemonic, and save backup data."
+            alignToStart
+            showCloseIcon={closeBtnVisible}
+            onClose={() => setVisible(false)}
+            additionalButtons={[
+              {
+                button: (
+                  <Button
+                    size="small"
+                    color="inherit"
+                    variant="outlined"
+                    onClick={() =>
+                      history.push(`${Path.SETTINGS}${Path.INITIAL_SETUP}`)
+                    }
+                  >
+                    Setup Now
+                  </Button>
+                ),
+                key: "CloseWarningBtn",
+              },
+            ]}
+          />
+        </Collapse>
+      );
+    }
+  )
+);
+
+export default SetupWarning;

src/dashboard/overview/Overview.tsx

@@ -18,7 +18,6 @@ type StateType = DashboardContentState & {
 const styles = () => {
   return createStyles({
     wrapper: {
-      flex: 1,
       overflowY: "auto",
     },
   });

src/dashboard/wallet/Deposit.tsx

@@ -13,13 +13,13 @@ import ErrorMessage from "../../common/ErrorMessage";
 import { getErrorMsg } from "../../common/errorUtil";
 import Loader from "../../common/Loader";
 import QrCode from "../../common/QrCode";
+import WarningMessage from "../../common/WarningMessage";
 import { DepositResponse } from "../../models/DepositResponse";
 import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse";
 import { Info } from "../../models/Info";
 import Address from "./Address";
 import BoltzFeeInfo from "./BoltzFeeInfo";
 import CheckBoltzTransactionStatus from "./CheckBoltzTransactionStatus";
-import WarningMessage from "./WarningMessage";
 
 type DepositProps = {
   currency: string;

src/dashboard/wallet/WithdrawAddress.tsx

@@ -19,7 +19,7 @@ import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse";
 import Address from "./Address";
 import BoltzFeeInfo from "./BoltzFeeInfo";
 import { withdraw } from "./walletUtil";
-import WarningMessage from "./WarningMessage";
+import WarningMessage from "../../common/WarningMessage";
 
 type WithdrawAddressProps = {
   currency: string;

src/stores/backupStore.ts

@@ -2,7 +2,7 @@ import { observable } from "mobx";
 import { BackupInfo } from "../models/BackupInfo";
 
 export type Details = {
-  backupInfoLoaded?: boolean;
+  backupInfoLoaded: boolean;
   defaultPassword?: boolean;
   mnemonicShown?: boolean;
   defaultBackupDirectory?: boolean;
@@ -24,7 +24,7 @@ export const useBackupStore = (defaultDetails: Details) => {
       store.details.defaultBackupDirectory = value.backup.defaultLocation;
       store.details.backupDirectory = value.backup.location;
     },
-    get backupInfoLoaded(): boolean | undefined {
+    get backupInfoLoaded(): boolean {
       return store.details.backupInfoLoaded;
     },
     get backupDirectory(): string | undefined {