From 50352152d423656242d410aa17e457aaca8b7b36 Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp Date: Sun, 19 Feb 2023 13:57:48 -0500 Subject: [PATCH] Update welcome message + added banner (#118) * Update welcome message + added banner * remove unused vars --- package.json | 2 +- src/AppContainer.js | 27 ++++++--- src/MainView.js | 24 +------- src/components/BetaBanner/BetaBanner.js | 56 ++++++++++++++----- src/components/NodeStatusBar/NodeStatusBar.js | 5 +- 5 files changed, 68 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 231de43..8b58876 100644 --- 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 index 3938769..f3abbe9 100644 --- a/src/AppContainer.js +++ b/src/AppContainer.js @@ -14,12 +14,15 @@ 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 = () => { @@ -27,7 +30,6 @@ export const AppContainer = () => { 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 && } + + + + Cloudmos Deploy desktop is now being deprecated. We're now officially in the browser!{" "} + window.electron.openUrl("https://deploy.cloudmos.io")} className={classes.checkItOut}> + Check it out! + + + +
diff --git a/src/MainView.js b/src/MainView.js index f63aad9..a5c1725 100644 --- 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 ( - {isShowingWelcome && } - diff --git a/src/components/BetaBanner/BetaBanner.js b/src/components/BetaBanner/BetaBanner.js index 58a3482..ebd3d3f 100644 --- 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 && ( - + - - Welcome! - - - -
+ + + Important! + + + + + 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. + +
- Cloudmos Deploy is currently in BETA. 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. +
+ + + 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. + +
+ +
diff --git a/src/components/NodeStatusBar/NodeStatusBar.js b/src/components/NodeStatusBar/NodeStatusBar.js index c0b7291..5d2f532 100644 --- 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 ( - + {isEditingSettings && } {isSelectingNetwork && }