Update welcome message + added banner (#118)

* Update welcome message + added banner * remove unused vars
maxmaxlabs · Feb 19, 2023 · 5035215 · 5035215
1 parent 5d84c6a
commit 5035215
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "akashlytics-deploy",
-  "version": "0.17.3",
+  "version": "0.18.0",
   "private": false,
   "repository": {
     "type": "git",

diff --git a/src/AppContainer.js b/src/AppContainer.js
@@ -14,20 +14,22 @@ import { NodeStatusBar } from "./components/NodeStatusBar";
 import { Register } from "./routes/Register";
 import { NewWallet } from "./routes/NewWallet";
 import { Footer } from "./components/Footer";
+import { AppBar, Toolbar } from "@material-ui/core";
+import { LinkTo } from "./shared/components/LinkTo";
 
 const useStyles = makeStyles((theme) => ({
   body: {
-    paddingTop: "30px",
-    height: "calc(100% - 30px)"
-  }
+    paddingTop: "78px",
+    height: "calc(100% - 78px)"
+  },
+  checkItOut: { marginLeft: ".5rem", fontWeight: "bold", color: theme.palette.secondary.contrastText }
 }));
 
 export const AppContainer = () => {
   const classes = useStyles();
   const [isAppInitiated, setIsAppInitiated] = useState(false);
   const { address, selectedWallet } = useWallet();
   const { wallets } = useStorageWallets();
-  const [showBetaBanner, setShowBetaBanner] = useState(false);
   const history = useHistory();
 
   const walletsExist = wallets.length > 0;
@@ -42,16 +44,25 @@ export const AppContainer = () => {
       }
     }
 
-    let isBetaBannerSeen = localStorage.getItem("isBetaBannerSeen");
-    isBetaBannerSeen = !!isBetaBannerSeen && isBetaBannerSeen === "true" ? true : false;
-    setShowBetaBanner(!isBetaBannerSeen);
+    // let isBetaBannerSeen = localStorage.getItem("isBetaBannerSeen");
+    // isBetaBannerSeen = !!isBetaBannerSeen && isBetaBannerSeen === "true" ? true : false;
+    // setShowBetaBanner(!isBetaBannerSeen);
     setIsAppInitiated(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <>
-      {showBetaBanner && <BetaBanner />}
+      <BetaBanner />
+      <AppBar color="secondary">
+        <Toolbar variant="dense" className={classes.toolbar}>
+          Cloudmos Deploy desktop is now being deprecated. We're now officially in the browser!{" "}
+          <LinkTo onClick={() => window.electron.openUrl("https://deploy.cloudmos.io")} className={classes.checkItOut}>
+            Check it out!
+          </LinkTo>
+        </Toolbar>
+      </AppBar>
+
       <NodeStatusBar />
 
       <div className={classes.body}>

diff --git a/src/MainView.js b/src/MainView.js
@@ -5,9 +5,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "./shared/components/ErrorFallback";
 import { LeftNav, drawerWidth, closedDrawerWidth } from "./components/LeftNav";
 import { RightContent } from "./components/RightContent";
-import { useEffect, useState } from "react";
-import { useWallet } from "./context/WalletProvider";
-import { WelcomeModal } from "./components/WelcomeModal";
+import { useState } from "react";
 import { Layout } from "./shared/components/Layout";
 import { accountBarHeight } from "./shared/constants";
 
@@ -18,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
     height: "100%"
   },
   accountAppBar: {
-    top: "30px",
+    top: "78px",
     backgroundColor: theme.palette.grey[300]
   },
   accountBar: {
@@ -44,32 +42,14 @@ const useStyles = makeStyles((theme) => ({
 
 export function MainView() {
   const classes = useStyles();
-  const [isShowingWelcome, setIsShowingWelcome] = useState(false);
-  const [isWelcomeShown, setIsWelcomeShown] = useState(false);
   const [isNavOpen, setIsNavOpen] = useState(true);
-  const { balance, isRefreshingBalance } = useWallet();
-
-  useEffect(() => {
-    if (!isRefreshingBalance && typeof balance === "number" && balance === 0 && !isShowingWelcome && !isWelcomeShown) {
-      setIsShowingWelcome(true);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRefreshingBalance, balance, isWelcomeShown, isShowingWelcome]);
 
   const onOpenMenuClick = () => {
     setIsNavOpen((prev) => !prev);
   };
 
-  const onWelcomeClose = () => {
-    setIsWelcomeShown(true);
-    setIsShowingWelcome(false);
-  };
-
   return (
     <Layout marginTop={`${accountBarHeight}px`} height={`calc(100% - ${accountBarHeight}px) !important`}>
-      {isShowingWelcome && <WelcomeModal open={isShowingWelcome} onClose={onWelcomeClose} />}
-
       <Box height="100%">
         <AppBar position="fixed" color="default" elevation={0} component="header" className={classes.accountAppBar}>
           <Toolbar variant="dense" className={classes.accountBar}>

diff --git a/src/components/BetaBanner/BetaBanner.js b/src/components/BetaBanner/BetaBanner.js
@@ -1,18 +1,22 @@
 import { useState } from "react";
 import { makeStyles, Dialog, DialogContent, DialogActions, Button, Chip, Typography, Box } from "@material-ui/core";
+import LaunchIcon from "@material-ui/icons/Launch";
 
 const useStyles = makeStyles((theme) => ({
   grow: { flexGrow: 1 },
   betaChip: {
-    fontWeight: "bold",
-    width: "100%"
+    fontWeight: "bold"
   },
   betaText: {
-    padding: "0 1rem"
+    padding: "1rem"
+  },
+  title: {
+    marginBottom: ".5rem"
   },
   appBar: {
     top: "30px"
-  }
+  },
+  checkItOut: { display: "flex", alignItems: "center" }
 }));
 
 export const BetaBanner = () => {
@@ -28,24 +32,48 @@ export const BetaBanner = () => {
   return (
     <>
       {isBetaBarVisible && (
-        <Dialog open={true} maxWidth="xs" fullWidth>
+        <Dialog open={true} maxWidth="sm" fullWidth>
           <DialogContent className={classes.dialogContent}>
-            <Typography variant="h3">
-              <strong>Welcome!</strong>
-            </Typography>
-            <Box padding="1rem 0">
-              <Chip label="BETA" color="secondary" className={classes.betaChip} size="small" />
-            </Box>
             <div className={classes.betaText}>
+              <Typography variant="h5" className={classes.title}>
+                <strong>
+                  Important! <Chip label="deprecated" color="secondary" className={classes.betaChip} size="small" />
+                </strong>
+              </Typography>
+
+              <Typography variant="body1">
+                Thank you for using Cloudmos Deploy as a desktop app. We're writing to let you know that we'll be discontinuing support for this version of the
+                app. We won't be providing any further updates, but don't worry - we have an exciting new version of Cloudmos Deploy available in your browser.
+              </Typography>
+              <br />
               <Typography variant="body1">
-                <strong>Cloudmos Deploy</strong> is currently in <strong>BETA</strong>. We strongly suggest you start with a new wallet and a small amount of
-                AKT until we further stabilize the product. Enjoy!
+                Our new browser version offers an improved experience, with all the same great features you're used to. We believe that you'll love it just as
+                much as the desktop app, if not more.
               </Typography>
+              <br />
+
+              <Typography variant="body1">
+                Thank you for choosing Cloudmos Deploy, and we hope to see you using our new browser version soon. If you have any questions or concerns, please
+                don't hesitate to reach out to our support team.
+              </Typography>
+              <br />
+
+              <Button
+                variant="contained"
+                color="secondary"
+                onClick={() => window.electron.openUrl("https://deploy.cloudmos.io")}
+                classes={{ label: classes.checkItOut }}
+              >
+                Check it out!{" "}
+                <Box component="span" marginLeft=".5rem" display="flex">
+                  <LaunchIcon />
+                </Box>
+              </Button>
             </div>
           </DialogContent>
           <DialogActions>
             <Button variant="contained" onClick={onCloseClick} type="button" color="primary">
-              Got it!
+              Got it
             </Button>
           </DialogActions>
         </Dialog>

diff --git a/src/components/NodeStatusBar/NodeStatusBar.js b/src/components/NodeStatusBar/NodeStatusBar.js
@@ -11,6 +11,9 @@ import { LinkTo } from "../../shared/components/LinkTo";
 import GitHubButton from "react-github-btn";
 
 const useStyles = makeStyles((theme) => ({
+  root: {
+    top: "48px"
+  },
   toolbar: {
     minHeight: "30px",
     maxHeight: "30px",
@@ -86,7 +89,7 @@ export const NodeStatusBar = () => {
   };
 
   return (
-    <AppBar position="fixed" color="default" elevation={0}>
+    <AppBar position="fixed" color="default" elevation={0} className={classes.root}>
       {isEditingSettings && <SettingsModal onClose={onSettingsModalClose} />}
       {isSelectingNetwork && <SelectNetworkModal onClose={onSelectNetworkModalClose} />}