Implement new release banner - Closes #2144

app/src/modules/autoUpdater.js

@@ -43,6 +43,7 @@ export default ({ // eslint-disable-line max-statements
 
   autoUpdater.on('update-available', ({ releaseNotes, version }) => {
     updater.error = undefined;
+    const { ipcMain } = electron;
     const versions = {
       oldVersion: electron.app.getVersion(),
       newVersion: version,
@@ -58,7 +59,16 @@ export default ({ // eslint-disable-line max-statements
         }
       }, 500);
     };
-    updateModal(electron, releaseNotes, updateApp, versions);
+
+    ipcMain.removeAllListeners('update:clicked');
+    ipcMain.on('update:clicked', () => {
+      updateModal(electron, releaseNotes, updateApp, versions);
+    });
+
+    win.send({
+      event: 'update:available',
+      value: { releaseNotes, version },
+    });
   });
 
   autoUpdater.on('update-not-available', () => {

app/src/modules/autoUpdater.test.js

@@ -68,6 +68,7 @@ describe('autoUpdater', () => {
         showErrorBox: spy(),
       },
       win: {
+        send: spy(),
         browser: {
           setProgressBar: spy(),
         },
@@ -160,10 +161,12 @@ describe('autoUpdater', () => {
     expect(params.autoUpdater.quitAndInstall).to.not.have.been.calledWith();
   });
 
-  it('should download the update if update is available and the "Update" button was pressed', () => {
+  it('should Send information to renderer when update is available', () => {
     const newPrams = { ...params, electron };
     autoUpdater(newPrams);
     callbacks['update-available']({ version });
+    expect(params.win.send).to.have.been.calledWith();
+    ipcRenderer.send('update:clicked');
     clock.tick(1001);
     ipcRenderer.send('update', { text: 'update' });
     clock.tick(100);

i18n/locales/en/common.json

@@ -2,6 +2,7 @@
   " - Confirm transaction on your {{deviceModel}}": " - Confirm transaction on your {{deviceModel}}",
   " LSK": " LSK",
   " Make sure that you are using the latest version of Lisk Hub.": " Make sure that you are using the latest version of Lisk Hub.",
+  " is out. ": " is out. ",
   "% of successfully forged blocks in relation to total blocks that were available for this particular delegate to forge": "% of successfully forged blocks in relation to total blocks that were available for this particular delegate to forge",
   "%s Connected. Welcome %s!": "%s Connected. Welcome %s!",
   "%s Disconnected. See you %s!": "%s Disconnected. See you %s!",
@@ -230,6 +231,7 @@
   "Lisk Hub": "Lisk Hub",
   "Lisk Hub currently supports Ledger Nano S and Trezor Model T wallets": "Lisk Hub currently supports Ledger Nano S and Trezor Model T wallets",
   "Lisk Hub {{newVersion}} is here!": "Lisk Hub {{newVersion}} is here!",
+  "Lisk Hub {{version}}": "Lisk Hub {{version}}",
   "Lisk Terms of Use": "Lisk Terms of Use",
   "Lisk Website": "Lisk Website",
   "Lisk accounts on {{WalletModel}}": "Lisk accounts on {{WalletModel}}",

jest.config.js

@@ -20,7 +20,7 @@ module.exports = {
     'src/store/middlewares/socket.test.js',
     'src/components/delegatesListView/*',
     'src/components/register/register.test.js',
-    'src/components/header/header.test.js',
+    'src/components/header/signInHeader/signInHeader.test.js',
   ],
   verbose: false,
   cache: false,
@@ -125,7 +125,7 @@ module.exports = {
     'src/components/login/login.js',
     'src/utils/hwWallet.js',
     'src/components/delegatesListView/*',
-    'src/components/header/header.js',
+    'src/components/header/signInHeader/signInHeader.js',
     'src/components/register/register.js',
   ],
   coverageThreshold: process.env.NO_COV ? {} : {

src/components/app/app.css

@@ -17,6 +17,8 @@ body {
   position: absolute;
   right: 0;
   top: 0;
+  display: flex;
+  flex-direction: column;
   z-index: var(--normal-index);
 }
 
@@ -57,15 +59,23 @@ body {
   text-align: center;
 }
 
-.mainBox {
+.mainContent {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   margin: 0 auto;
   width: 100%;
+}
+
+.mainBox {
   max-width: var(--main-box-width);
-  flex-grow: 1;
 }
 
 :global(.offlineWrapper) {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
 }
 
 @media (--medium-viewport) {

src/components/app/index.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { Route, Switch, withRouter } from 'react-router-dom';
 import styles from './app.css';
 import Toaster from '../toaster';
-import TopBar from '../topBar';
 import LoadingBar from '../loadingBar';
 import OfflineWrapper from '../offlineWrapper';
 import CustomRoute from '../customRoute';
 import Dialog from '../dialog';
 import NotFound from '../notFound';
 import InitializationMessage from '../initializationMessage';
 import routes from '../../constants/routes';
+import Header from '../header/header';
+import FlashMessageHolder from '../toolbox/flashMessage/holder';
 
 class App extends React.Component {
   constructor() {
@@ -26,72 +27,57 @@ class App extends React.Component {
   }
 
   render() {
-    const { history, location } = this.props;
+    const { location, history } = this.props;
     const allRoutes = Object.values(routes);
-    const defaultRoutes = allRoutes.filter(routeObj => routeObj.component);
-    const signinFlowRoutes = allRoutes.filter(routeObj => routeObj.isSigninFlow);
+    const mainClassNames = [
+      styles.bodyWrapper,
+      (this.state.loaded ? `${styles.loaded} appLoaded` : ''),
+    ].join(' ');
+    const routeObj = Object.values(routes).find(r => r.path === location.pathname) || {};
 
     return (
       <OfflineWrapper>
         <Dialog />
-        {
-          signinFlowRoutes.filter(route => route.path === location.pathname).length > 0
-            ? (
-              <main
-                className={this.state.loaded
-                  ? `${styles.wrapper} ${styles.loaded} appLoaded`
-                  : `${styles.wrapper}`
-                }
-                ref={(el) => { this.main = el; }}
-              >
-                <Switch>
-                  {this.state.loaded
-                  && signinFlowRoutes.map((route, key) => (
-                    <Route
-                      path={route.path}
-                      key={key}
-                      component={route.component}
-                      exact={route.exact}
-                    />
-                  ))
-                }
-                </Switch>
-                <Toaster />
-              </main>
-            )
-            : (
-              <main
-                className={this.state.loaded
-                  ? `${styles.bodyWrapper} ${styles.loaded} appLoaded`
-                  : `${styles.bodyWrapper}`}
-                ref={(el) => { this.main = el; }}
-              >
-                <TopBar />
-                <section>
-                  <InitializationMessage history={history} />
-                  <div className={styles.mainBox}>
-                    <Switch>
-                      {
-                        this.state.loaded && defaultRoutes.map(route => (
-                          <CustomRoute
-                            path={route.path}
-                            pathSuffix={route.pathSuffix}
-                            component={route.component}
-                            isPrivate={route.isPrivate}
-                            exact={route.exact}
-                            forbiddenTokens={route.forbiddenTokens}
-                            key={route.path}
-                          />
-                        ))
-                      }
-                      <Route path="*" component={NotFound} />
-                    </Switch>
-                  </div>
-                </section>
-                <Toaster />
-              </main>
-            )
-        }
+        <Header
+          isSigninFlow={routeObj.isSigninFlow}
+          location={location}
+        />
+        <main
+          className={mainClassNames}
+          ref={(el) => { this.main = el; }}
+        >
+          <section>
+            <FlashMessageHolder />
+            <InitializationMessage history={history} />
+            <div className={`${styles.mainContent} ${!routeObj.isSigninFlow ? styles.mainBox : ''}`}>
+              <Switch>
+                {this.state.loaded && allRoutes.map(route => (
+                  route.isSigninFlow
+                    ? (
+                      <Route
+                        path={route.path}
+                        key={route.path}
+                        component={route.component}
+                        exact={route.exact}
+                      />
+                    ) : (
+                      <CustomRoute
+                        path={route.path}
+                        pathSuffix={route.pathSuffix}
+                        component={route.component}
+                        isPrivate={route.isPrivate}
+                        exact={route.exact}
+                        forbiddenTokens={route.forbiddenTokens}
+                        key={route.path}
+                      />
+                    )
+                ))}
+                <Route path="*" component={NotFound} />
+              </Switch>
+            </div>
+          </section>
+          <Toaster />
+        </main>
         <LoadingBar markAsLoaded={this.markAsLoaded.bind(this)} />
       </OfflineWrapper>
     );

src/components/dashboard/dashboard.css

@@ -2,6 +2,7 @@
 @import '../app/mixins.css';
 
 .wrapper {
+  flex-shrink: 0;
   width: 100%;
   margin: 0px;
   overflow: hidden;

src/components/dashboard/dashboard.js

@@ -82,18 +82,18 @@ class Dashboard extends React.Component {
 
     return (
       <React.Fragment>
-        {
-          isLoggedIn
-            ? (
-              <Onboarding
-                slides={this.getOnboardingSlides()}
-                actionButtonLabel={t('Got it, thanks!')}
-                name="dashboardOnboarding"
-              />
-            )
-            : null
-        }
         <div className={`${styles.wrapper} dashboard-container`}>
+          {
+            isLoggedIn
+              ? (
+                <Onboarding
+                  slides={this.getOnboardingSlides()}
+                  actionButtonLabel={t('Got it, thanks!')}
+                  name="dashboardOnboarding"
+                />
+              )
+              : null
+          }
           <PageHeader
             title={t('Dashboard')}
             subtitle={t('All important information at a glance')}

src/components/errorBoundary/errorBoundary.css

@@ -4,6 +4,7 @@
 .errorBoundaryPage {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   align-items: center;
   height: 100%;
 }