Check for new Fether release & prompt user on startup

packages/fether-react/package.json

@@ -68,7 +68,8 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "^2.1.3",
     "recompose": "^0.27.1",
-    "rxjs": "^6.2.0"
+    "rxjs": "^6.2.0",
+    "semver": "^5.6.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.2.0",

packages/fether-react/src/App/App.js

@@ -13,7 +13,10 @@ import {
 } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import isElectron from 'is-electron';
+import { Modal } from 'fether-ui';
 import ReactResizeDetector from 'react-resize-detector';
+import semver from 'semver';
+import { version } from '../../package.json';
 
 import Accounts from '../Accounts';
 import BackupAccount from '../BackupAccount';
@@ -23,6 +26,8 @@ import Send from '../Send';
 import Tokens from '../Tokens';
 import Whitelist from '../Whitelist';
 
+const currentVersion = version;
+
 // Use MemoryRouter for production viewing in file:// protocol
 // https://github.com/facebook/create-react-app/issues/3591
 const Router =
@@ -40,6 +45,55 @@ class App extends Component {
     electron.ipcRenderer.send('asynchronous-message', 'app-resize', height);
   };
 
+  state = {
+    newRelease: false // false | {name, url, ignore}
+  };
+
+  componentDidMount () {
+    window
+      .fetch('https://api.github.com/repos/paritytech/fether/releases/latest')
+      .then(j => j.json())
+      .then(({ name, html_url: url, tag_name: tag }) => {
+        const latestVersion = tag.match(/v(\d+\.\d+(\.\d+)?)/)[1];
+        if (semver.gt(latestVersion, currentVersion)) {
+          this.setState({
+            newRelease: {
+              name,
+              url,
+              ignore: false
+            }
+          });
+        }
+      })
+      .catch(e => {
+        console.error('Error while checking for a new version of Fether:', e);
+      });
+  }
+
+  renderModalLinks = () => {
+    return (
+      <nav className='form-nav -binary'>
+        <button className='button -back' onClick={this.hideNewReleaseModal}>
+          Remind me later
+        </button>
+
+        <button className='button' onClick={this.openNewReleaseUrl}>
+          Download
+        </button>
+      </nav>
+    );
+  };
+
+  hideNewReleaseModal = () => {
+    this.setState({
+      newRelease: { ...this.state.newRelease, ignore: true }
+    });
+  };
+
+  openNewReleaseUrl = () => {
+    window.open(this.state.newRelease.url);
+  };
+
   /**
    * Decide which screen to render.
    */
@@ -79,28 +133,36 @@ class App extends Component {
       <ReactResizeDetector handleHeight onResize={this.handleResize}>
         <div className='content'>
           <div className='window'>
-            <Router>
-              <Switch>
-                {/* The next line is the homepage */}
-                <Redirect exact from='/' to='/accounts' />
-                <Route path='/accounts' component={Accounts} />
-                <Route path='/onboarding' component={Onboarding} />
-                <Route path='/tokens/:accountAddress' component={Tokens} />
-                <Route
-                  path='/whitelist/:accountAddress'
-                  component={Whitelist}
-                />
-                <Route
-                  path='/backup/:accountAddress'
-                  component={BackupAccount}
-                />
-                <Route
-                  path='/send/:tokenAddress/from/:accountAddress'
-                  component={Send}
-                />
-                <Redirect from='*' to='/' />
-              </Switch>
-            </Router>
+            <Modal
+              title='New version available'
+              description={`${this.state.newRelease.name &&
+                this.state.newRelease.name} was released!`}
+              visible={this.state.newRelease && !this.state.newRelease.ignore}
+              buttons={this.renderModalLinks()}
+            >
+              <Router>
+                <Switch>
+                  {/* The next line is the homepage */}
+                  <Redirect exact from='/' to='/accounts' />
+                  <Route path='/accounts' component={Accounts} />
+                  <Route path='/onboarding' component={Onboarding} />
+                  <Route path='/tokens/:accountAddress' component={Tokens} />
+                  <Route
+                    path='/whitelist/:accountAddress'
+                    component={Whitelist}
+                  />
+                  <Route
+                    path='/backup/:accountAddress'
+                    component={BackupAccount}
+                  />
+                  <Route
+                    path='/send/:tokenAddress/from/:accountAddress'
+                    component={Send}
+                  />
+                  <Redirect from='*' to='/' />
+                </Switch>
+              </Router>
+            </Modal>
           </div>
         </div>
       </ReactResizeDetector>

packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js

@@ -41,7 +41,7 @@ class HealthModal extends Component {
       <Modal
         description={this.renderDescription()}
         fullscreen={fullscreen}
-        loading={loading}
+        icon={loading}
         title={this.renderTitle()}
         visible={visible}
       >

packages/fether-react/src/Send/Sent/Sent.js

@@ -57,8 +57,8 @@ class Sent extends Component {
             description={this.renderDescription()}
             fullscreen
             link={this.renderLink()}
-            loading={this.renderIcon()}
-            navigateTo={this.renderGoHomepage()}
+            icon={this.renderIcon()}
+            buttons={this.renderGoHomepage()}
             title={this.renderTitle()}
             visible
           />

packages/fether-react/src/Tokens/TokensList/TokensList.js

@@ -31,7 +31,7 @@ class TokensList extends Component {
         <Modal
           description='Please wait...'
           fullscreen={false}
-          loading={loading}
+          icon={loading}
           title='Loading account tokens...'
           visible={isLoadingAccountTokens}
         />

packages/fether-react/src/assets/sass/components/_alert-screen.scss

@@ -31,6 +31,8 @@
 
 .alert-screen-content {
 
+  width: 75%;
+
   .alert-screen_image {
     display: flex;
     align-items: center;

packages/fether-ui/src/Modal/Modal.js

@@ -12,8 +12,8 @@ export const Modal = ({
   description,
   fullscreen,
   link,
-  loading,
-  navigateTo,
+  icon,
+  buttons,
   title,
   visible
 }) => (
@@ -24,19 +24,21 @@ export const Modal = ({
     >
       <div className={`alert-screen ${fullscreen ? '-full-screen' : ''}`}>
         <SUIModal.Content image className='alert-screen-content'>
-          <SUIImage
-            wrapped
-            alt='loading'
-            size='medium'
-            src={loading}
-            className='alert-screen_image'
-          />
+          {icon && (
+            <SUIImage
+              wrapped
+              alt='loading'
+              size='medium'
+              src={icon}
+              className='alert-screen_image'
+            />
+          )}
           <SUIModal.Description className='alert-screen_text'>
             <h1>{title}</h1>
             <p>{description}</p>
             <p>{link || null}</p>
           </SUIModal.Description>
-          {navigateTo || null}
+          {buttons || null}
         </SUIModal.Content>
       </div>
     </SUIModal>
@@ -49,8 +51,8 @@ Modal.propTypes = {
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   fullscreen: PropTypes.bool,
   link: PropTypes.node,
-  loading: PropTypes.any.isRequired,
-  navigateTo: PropTypes.node,
+  icon: PropTypes.any,
+  buttons: PropTypes.node,
   title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   visible: PropTypes.bool
 };