merge latest from master and fix conflicts

packages/fether-electron/src/main/app/messages/index.js

@@ -18,17 +18,6 @@ export default async (fetherApp, event, action, ...args) => {
       return;
     }
     switch (action) {
-      case 'app-resize': {
-        if (!fetherApp.win || !args[0]) {
-          return;
-        }
-        const [width] = fetherApp.win.getContentSize();
-        // Conversion to integer is required to pass as argument to setContentSize.
-        // Reference: https://electronjs.org/docs/all#winsetcontentsizewidth-height-animate
-        const newHeight = parseInt(args[0]);
-        fetherApp.win.setContentSize(width, Math.round(newHeight) + 2);
-        break;
-      }
       case 'app-right-click': {
         if (!fetherApp.win) {
           return;

packages/fether-electron/src/main/app/methods/setupWin32Listeners.js

@@ -8,13 +8,7 @@ import Pino from '../utils/pino';
 const pino = Pino();
 
 function setupWin32Listeners (fetherApp) {
-  const {
-    moveWindowUp,
-    onWindowClose,
-    processSaveWinPosition,
-    showTrayBalloon,
-    win
-  } = fetherApp;
+  const { onWindowClose, processSaveWinPosition, win } = fetherApp;
 
   if (process.platform === 'win32') {
     /**
@@ -52,7 +46,6 @@ function setupWin32Listeners (fetherApp) {
       } else if (wParam.readUInt32LE(0) === 0xf030) {
         // SC_MAXIMIZE
         eventName = 'maximize';
-        showTrayBalloon(fetherApp);
       } else if (wParam.readUInt32LE(0) === 0xf020) {
         // SC_MINIMIZE
         eventName = 'minimize';
@@ -60,7 +53,6 @@ function setupWin32Listeners (fetherApp) {
       } else if (wParam.readUInt32LE(0) === 0xf120) {
         // SC_RESTORE
         eventName = 'restored';
-        showTrayBalloon(fetherApp);
       }
 
       if (eventName !== null) {
@@ -74,17 +66,7 @@ function setupWin32Listeners (fetherApp) {
      * Detect event on Windows when Fether window was moved or resized
      */
     win.hookWindowMessage(Number.parseInt('0x0232'), (wParam, lParam) => {
-      pino.info('Detected completion of move or resize event');
-
-      // Move Fether window back up into view if it was a resize event
-      // that causes the bottom to be cropped
-      moveWindowUp(fetherApp);
-
-      // Try again after a delay incase Fether window resize occurs
-      // x seconds after navigating to a new page.
-      setTimeout(() => {
-        moveWindowUp(fetherApp);
-      }, 5000);
+      pino.info('Detected completion of moved or resize event');
 
       // Save Fether window position to Electron settings
       processSaveWinPosition(fetherApp);

packages/fether-electron/src/main/app/methods/setupWinListeners.js

@@ -11,12 +11,7 @@ import Pino from '../utils/pino';
 const pino = Pino();
 
 function setupWinListeners (fetherApp) {
-  const {
-    moveWindowUp,
-    onWindowClose,
-    processSaveWinPosition,
-    win
-  } = fetherApp;
+  const { onWindowClose, processSaveWinPosition, win } = fetherApp;
 
   // Open external links in browser
   win.webContents.on('new-window', (event, url) => {
@@ -24,7 +19,7 @@ function setupWinListeners (fetherApp) {
     electron.shell.openExternal(url);
   });
 
-  // Linux (unchecked on others)
+  // Windows and Linux (unchecked on others)
   win.on('move', () => {
     /**
      * On Linux using this with debouncing is the closest equivalent
@@ -49,17 +44,12 @@ function setupWinListeners (fetherApp) {
      * On Linux the closest equivalent to achieving 'moved' is debouncing
      * on the 'move' event. It also works in 'close' even when app crashes
      */
-    processSaveWinPosition(fetherApp);
+    pino.info('Detected moved event');
   });
 
-  // macOS and Linux (not Windows)
+  // macOS and Linux and Windows
   win.on('resize', () => {
     pino.info('Detected resize event');
-
-    moveWindowUp(fetherApp);
-    setTimeout(() => {
-      moveWindowUp(fetherApp);
-    }, 5000);
   });
 
   win.on('blur', () => {

packages/fether-electron/src/main/app/methods/showWindow.js

@@ -16,6 +16,8 @@ function showWindow (fetherApp, trayPos) {
     calculateWinPosition,
     createWindow,
     fixWinPosition,
+    moveWindowUp,
+    processSaveWinPosition,
     setupWinListeners,
     setupWin32Listeners,
     win
@@ -84,6 +86,13 @@ function showWindow (fetherApp, trayPos) {
     fetherApp.hasSetupWinListeners = true;
   }
 
+  moveWindowUp(fetherApp);
+  setTimeout(() => {
+    moveWindowUp(fetherApp);
+  }, 5000);
+
+  processSaveWinPosition(fetherApp);
+
   fetherApp.emit('after-show-window');
 }
 

packages/fether-electron/src/main/app/options/config/index.js

@@ -17,7 +17,7 @@ const INDEX_HTML_PATH =
   });
 
 // Icon path differs when started with `yarn electron` or `yarn start`
-let iconPath = path.join(staticPath, 'assets', 'icons', 'icon.png');
+let iconPath = path.join(staticPath, 'assets', 'icons', 'mac', 'iconDock.png');
 let iconDockPath = '';
 
 if (process.platform === 'win32') {
@@ -71,7 +71,7 @@ const DEFAULT_OPTIONS = {
 
 const TASKBAR_OPTIONS = {
   frame: false,
-  height: 464,
+  height: 515,
   // On Linux the user must click the tray icon and then click the tooltip
   // to toggle the Fether window open/close
   tooltip: tooltip,

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/Accounts/AccountsList/AccountsList.js

@@ -90,7 +90,6 @@ class AccountsList extends Component {
               )}
             </div>
           </div>
-
           <nav className='footer-nav'>
             <div className='footer-nav_status'>
               <Health />

packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js

@@ -11,7 +11,6 @@ export const Feedback = ({ accountsListLength }) => (
     href='https://github.com/paritytech/fether/issues/new'
     rel='noopener noreferrer'
     target='_blank'
-    style={{ marginBottom: accountsListLength > 1 ? '-2px' : '-10px' }}
   >
     Feedback
   </a>

packages/fether-react/src/Accounts/CreateAccount/AccountImportOptions/AccountImportOptions.js

@@ -168,7 +168,7 @@ class AccountImportOptions extends Component {
             {importingFromSigner ? (
               <Scanner
                 onScan={this.handleSignerImported}
-                label='Please show the QR code of the account on the webcam.'
+                label='Scan Parity Signer account QR code'
               />
             ) : (
               <button
@@ -203,15 +203,16 @@ class AccountImportOptions extends Component {
       </Card>
     );
 
+    const spacer = <div style={{ height: '0.5rem' }} />;
+
     return (
       <RequireHealthOverlay require='node'>
         <div className='center-md'>
           {!importingFromSigner && jsonCard}
-          <br />
+          {spacer}
           {signerCard}
-          <br />
+          {spacer}
           {!importingFromSigner && phraseCard}
-          <br />
           <p>{error}</p>
           <nav className='form-nav -space-around'>
             {currentStep > 1 && (

packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js

@@ -63,7 +63,7 @@ class CreateAccount extends Component {
     const Steps = this.getSteps(isImport);
 
     return (
-      <div>
+      <React.Fragment>
         <Header
           left={
             // Show back button if we already have some accounts, so we can go back to AccountsList
@@ -98,17 +98,7 @@ class CreateAccount extends Component {
             </div>
           ) : (
             <div className='footer-nav_option'>
-              {isImport ? (
-                <p>
-                  Need to create an account?
-                  <button
-                    className='button -footer'
-                    onClick={this.handleToggleCreateImport}
-                  >
-                    New account
-                  </button>
-                </p>
-              ) : (
+              {isImport ? null : (
                 <p>
                   Already have an account?
                   <button
@@ -122,7 +112,7 @@ class CreateAccount extends Component {
             </div>
           )}
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }

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

@@ -13,7 +13,9 @@ import {
 } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import isElectron from 'is-electron';
-import ReactResizeDetector from 'react-resize-detector';
+import { Modal } from 'fether-ui';
+import semver from 'semver';
+import { version } from '../../package.json';
 
 import Accounts from '../Accounts';
 import BackupAccount from '../BackupAccount';
@@ -23,29 +25,71 @@ 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 =
   process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
+
 const electron = isElectron() ? window.require('electron') : null;
 
 @inject('onboardingStore', 'parityStore')
 @observer
 class App extends Component {
+  state = {
+    newRelease: false // false | {name, url, ignore}
+  };
+
   componentDidMount () {
     window.addEventListener('contextmenu', this.handleRightClick);
+
+    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);
+      });
   }
 
   componentDidUnmount () {
     window.removeEventListener('contextmenu', this.handleRightClick);
   }
 
-  handleResize = (_, height) => {
-    if (!electron) {
-      return;
-    }
-    // Send height to main process
-    electron.ipcRenderer.send('asynchronous-message', 'app-resize', height);
+  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');
   };
 
   handleRightClick = () => {
@@ -64,6 +108,8 @@ class App extends Component {
       parityStore: { api }
     } = this.props;
 
+    const { newRelease } = this.state;
+
     if (isFirstRun) {
       return (
         <div className='window'>
@@ -79,21 +125,24 @@ class App extends Component {
     // the children, just a <RequireHealthOverlay />.
     if (!api) {
       return (
-        <ReactResizeDetector handleHeight onResize={this.handleResize}>
         <RequireHealthOverlay fullscreen require='node'>
           {/* Adding these components to have minimum height on window */}
           <div className='content'>
             <div className='window' />
           </div>
         </RequireHealthOverlay>
-        </ReactResizeDetector>
       );
     }
 
     return (
-      <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 */}
@@ -116,9 +165,9 @@ class App extends Component {
                 <Redirect from='*' to='/' />
               </Switch>
             </Router>
+          </Modal>
         </div>
       </div>
-      </ReactResizeDetector>
     );
   }
 }

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

@@ -49,11 +49,11 @@ class Onboarding extends Component {
 
   render () {
     return (
-      <div>
+      <React.Fragment>
         <Header title={<h1>Terms of Use</h1>} />
 
         <div className='window_content'>
-          <div className='box -padded-extra'>
+          <div className='box -padded -scroller'>
             <div className='terms-and-conditions-wrapper'>
               <FetherForm.Field
                 as={ReactMarkdown}
@@ -76,7 +76,7 @@ class Onboarding extends Component {
             </button>
           </div>
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }

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/Scanner/Scanner.js

@@ -73,7 +73,7 @@ export default class Scanner extends React.PureComponent {
     const size = 300;
 
     return (
-      <div>
+      <React.Fragment>
         {isLoading ? (
           <img alt='loading' src={loading} />
         ) : webcamError ? (
@@ -81,11 +81,10 @@ export default class Scanner extends React.PureComponent {
         ) : (
           <div>
             <p>{label}</p>
-            <br />
             <QrSigner scan onScan={onScan} size={size} />
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

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

@@ -76,7 +76,7 @@ class ScanSignedTx extends Component {
               <Card className='-centered'>
                 <Scanner
                   onScan={this.onScanSignedTx}
-                  label='Please show the QR code of the signed transaction on the webcam'
+                  label='Show the signed transaction QR code'
                 />
 
                 {error && <p className='text -standard'>{error}</p>}

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/Send/Unlock/Unlock.js

@@ -90,9 +90,7 @@ class Unlock extends Component {
                     render={({ handleSubmit, pristine, submitting }) => (
                       <form onSubmit={handleSubmit}>
                         <div className='text'>
-                          <p>
-                            Enter your password to confirm this transaction.
-                          </p>
+                          <p>Unlock account:</p>
                         </div>
 
                         <Field

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

@@ -66,6 +66,7 @@ class Tokens extends PureComponent {
     const { isMenuOpen } = this.state;
 
     return (
+      <React.Fragment>
         <div className='tokens'>
           <div className={isMenuOpen ? 'popup-underlay' : ''} />
           <AccountHeader
@@ -92,13 +93,13 @@ class Tokens extends PureComponent {
           />
 
           <TokensList />
-
+        </div>
         <nav className='footer-nav'>
           <div className='footer-nav_status'>
             <Health />
           </div>
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }

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/Whitelist/Whitelist.js

@@ -100,22 +100,18 @@ class Whitelist extends Component {
     const displayedTokens = search ? matches : this.props.tokensArrayWithoutEth;
 
     return (
-      <RequireHealthOverlay require='sync'>
-        <div>
+      <React.Fragment>
         <Header
           left={
-              <Link
-                to='/tokens'
-                className='icon -back'
-                onClick={history.goBack}
-              >
+            <Link to='/tokens' className='icon -back' onClick={history.goBack}>
               Close
             </Link>
           }
           title={<h1>Search tokens</h1>}
         />
-
+        <RequireHealthOverlay require='sync'>
           <div className='window_content'>
+            <div className='box -scroller'>
               <div className='box -padded'>
                 <div className='search-form'>
                   <input
@@ -133,7 +129,6 @@ class Whitelist extends Component {
                   </button>
                 </div>
               </div>
-            <div className='box -scroller'>
               <ul className='list -tokens'>
                 {displayedTokens.map(token => (
                   <NewTokenItem key={token.address} token={token} />
@@ -141,14 +136,13 @@ class Whitelist extends Component {
               </ul>
             </div>
           </div>
-
+        </RequireHealthOverlay>
         <nav className='footer-nav'>
           <div className='footer-nav_status'>
             <Health />
           </div>
         </nav>
-        </div>
-      </RequireHealthOverlay>
+      </React.Fragment>
     );
   }
 }