Merge branch 'master' into luke-442-window-shrink-bug

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, '_blank', 'noopener noreferrer');
+  };
+
   /**
    * Decide which screen to render.
    */
@@ -49,6 +103,8 @@ class App extends Component {
       parityStore: { api }
     } = this.props;
 
+    const { newRelease } = this.state;
+
     if (isFirstRun) {
       return (
         <div className='window'>
@@ -79,6 +135,12 @@ class App extends Component {
       <ReactResizeDetector handleHeight onResize={this.handleResize}>
         <div className='content'>
           <div className='window'>
+            <Modal
+              title='New version available'
+              description={newRelease ? `${newRelease.name} was released!` : ''}
+              visible={newRelease && !newRelease.ignore}
+              buttons={this.renderModalLinks()}
+            >
               <Router>
                 <Switch>
                   {/* The next line is the homepage */}
@@ -101,6 +163,7 @@ class App extends Component {
                   <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

@@ -30,6 +30,7 @@
 }
 
 .alert-screen-content {
+  width: 75%;
 
   .alert-screen_image {
     display: flex;

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

@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 import { Image as SUIImage, Modal as SUIModal } from 'semantic-ui-react';
 
 export const Modal = ({
+  buttons,
   children,
   description,
   fullscreen,
+  icon,
   link,
-  loading,
-  navigateTo,
   title,
   visible
 }) => (
@@ -24,19 +24,21 @@ export const Modal = ({
     >
       <div className={`alert-screen ${fullscreen ? '-full-screen' : ''}`}>
         <SUIModal.Content image className='alert-screen-content'>
+          {icon && (
             <SUIImage
-            wrapped
               alt='loading'
-            size='medium'
-            src={loading}
               className='alert-screen_image'
+              size='medium'
+              src={icon}
+              wrapped
             />
+          )}
           <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>
@@ -45,12 +47,12 @@ export const Modal = ({
 );
 
 Modal.propTypes = {
+  buttons: PropTypes.node,
   children: PropTypes.node,
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   fullscreen: PropTypes.bool,
+  icon: PropTypes.string,
   link: PropTypes.node,
-  loading: PropTypes.any.isRequired,
-  navigateTo: PropTypes.node,
   title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   visible: PropTypes.bool
 };