Improve the way to update

electron.js

@@ -1,69 +1,12 @@
 const electron = require('electron')
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
-const semver = require('semver')
 
 const path = require('path')
 const isDev = require('electron-is-dev')
-const https = require('https')
-const { dialog, shell } = electron
-
-const updateJsonLink =
-  'https://chainx-signer-release.oss-cn-hangzhou.aliyuncs.com/update.json'
 
 let mainWindow
 
-async function updateIfNewVersion() {
-  const currentVersion = app.getVersion()
-  const latestInfo = await new Promise((resolve, reject) => {
-    https
-      .get(updateJsonLink, res => {
-        let body = ''
-        res.on('data', d => {
-          body += d
-        })
-        res.on('end', function() {
-          try {
-            const parsed = JSON.parse(body)
-            resolve(parsed)
-          } catch (err) {
-            reject(err)
-          }
-        })
-      })
-      .on('error', e => {
-        reject(e)
-      })
-  })
-
-  if (semver.lte(latestInfo.version, currentVersion)) {
-    return
-  }
-
-  if (latestInfo.forceUpdate) {
-    dialog.showMessageBoxSync({
-      title: 'New Version',
-      message: `Please update to version ${latestInfo.version}`,
-      buttons: ['OK'],
-      defaultId: 0
-    })
-
-    await shell.openExternal(latestInfo.path)
-    app.quit()
-  } else {
-    const buttonIndex = await dialog.showMessageBoxSync({
-      title: 'New Version',
-      message: `New version detected. Check the OK button to update.`,
-      buttons: ['OK', 'Cancel'],
-      defaultId: 0
-    })
-
-    if (buttonIndex === 0) {
-      await shell.openExternal(latestInfo.path)
-    }
-  }
-}
-
 function isWin() {
   return process.platform === 'win32'
 }
@@ -104,9 +47,6 @@ const activateInstance = e => {
 
 app.on('ready', async () => {
   createWindow()
-  if (!isDev) {
-    await updateIfNewVersion()
-  }
 })
 
 app.on('window-all-closed', () => {

package.json

@@ -71,6 +71,7 @@
     "sass-loader": "7.2.0",
     "semver": "6.3.0",
     "style-loader": "1.0.0",
+    "styled-components": "^5.0.1",
     "terser-webpack-plugin": "1.4.1",
     "ts-pnp": "1.1.4",
     "url-loader": "2.1.0",

preload.js

@@ -1,6 +1,8 @@
 const electron = require('electron')
 const electronStore = require('electron-store')
 const { sockets, setMainWindow } = require('./server')
+const { fetchLatestVersion, versionLte } = require('./utils')
+const { shell } = require('electron')
 
 setMainWindow(electron.remote.getCurrentWindow())
 
@@ -16,6 +18,8 @@ window.wallet = {
   }
 }
 
+window.require = require
+
 window.ElectronStore = function(...args) {
   return new electronStore(...args)
 }
@@ -29,3 +33,6 @@ window.settingStore = new window.ElectronStore({
   name: 'settings',
   default: {}
 })
+window.fetchLatestVersion = fetchLatestVersion
+window.versionLte = versionLte
+window.openExternal = url => shell.openExternal(url)

src/pages/App.js

@@ -14,14 +14,20 @@ import { setChainx, sleep } from '../shared'
 import spinner from '../assets/loading.gif'
 import './index.scss'
 import { useSelector, useDispatch } from 'react-redux'
-import { setInitLoading } from '../store/reducers/statusSlice'
+import {
+  setAppVersion,
+  setInitLoading,
+  setLatestVersion,
+  updateInfoSelector
+} from '../store/reducers/statusSlice'
 import { currentChainxNodeSelector } from '../store/reducers/nodeSlice'
 
 import {
   handleApiResponse,
   handlePairedResponse,
   setService
 } from '../services/socketService'
+import ForceUpdateDialog from './ForceUpdateDialog'
 
 window.wallet.socketResponse = data => {
   if (typeof data === 'string') data = JSON.parse(data)
@@ -39,6 +45,8 @@ setService(window.sockets)
 
 window.sockets.initialize().then(() => console.log('sockets initialized'))
 
+const appVersion = window.require('electron').remote.app.getVersion()
+
 export default function App() {
   let redirectUrl = '/'
 
@@ -53,6 +61,11 @@ export default function App() {
   }
 
   useEffect(() => {
+    dispatch(setAppVersion(appVersion))
+    window.fetchLatestVersion().then(latestVersion => {
+      dispatch(setLatestVersion(latestVersion))
+    })
+
     getSetting()
     // eslint-disable-next-line
   }, [])
@@ -67,10 +80,21 @@ export default function App() {
       })
   }
 
+  const updateInfo = useSelector(updateInfoSelector)
+
   return (
     <Router>
       <React.Fragment>
         <Header props />
+        {do {
+          if (
+            updateInfo.hasNewVersion &&
+            updateInfo?.versionInfo?.forceUpdate
+          ) {
+            // eslint-disable-next-line no-unused-expressions
+            ;<ForceUpdateDialog />
+          }
+        }}
         {do {
           if (loading || initLoading) {
             // eslint-disable-next-line no-unused-expressions

src/pages/ForceUpdateDialog.js

@@ -0,0 +1,62 @@
+import { Dialog, PrimaryButton } from '@chainx/ui'
+import styled from 'styled-components'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { updateInfoSelector } from '../store/reducers/statusSlice'
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paper {
+    min-width: unset !important;
+  }
+
+  .makeStyles-header-1 {
+    justify-content: space-around;
+  }
+
+  .makeStyles-title-2 {
+    font-weight: 600;
+  }
+
+  .makeStyles-closeButton-3 {
+    display: none;
+  }
+  .MuiDialog-paper {
+    position: relative;
+    left: 30px;
+  }
+
+  width: 300px;
+  div.wrapper {
+    padding: 0 10px 10px;
+    p {
+      text-align: center;
+      font-size: 14px;
+      margin-top: 8px;
+    }
+  }
+`
+
+export default function() {
+  const { versionInfo } = useSelector(updateInfoSelector)
+  if (!versionInfo) {
+    throw new Error('No update info available')
+  }
+
+  return (
+    <StyledDialog title="New Version" open>
+      <div className="wrapper">
+        <p>
+          Please update ChainX signer to <b>{versionInfo.version}</b>
+        </p>
+        <PrimaryButton
+          size="fullWidth"
+          onClick={() => {
+            window.openExternal(versionInfo.path)
+          }}
+        >
+          download
+        </PrimaryButton>
+      </div>
+    </StyledDialog>
+  )
+}

src/pages/Header/header.scss

@@ -1,12 +1,21 @@
 @import '../../assets/variables.scss';
 
 .header {
+  position: relative;
   height: 70px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   border-bottom: 1px solid #DCE0E2;
+
+  & > span {
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+
   .container-header {
     justify-content: space-between;
     .logo {

src/pages/Header/index.js

@@ -13,7 +13,8 @@ import {
   setShowAccountMenu,
   setShowNodeMenu,
   showAccountMenuSelector,
-  showNodeMenuSelector
+  showNodeMenuSelector,
+  updateInfoSelector
 } from '../../store/reducers/statusSlice'
 import { CHAINX_MAIN, CHAINX_TEST } from '../../store/reducers/constants'
 import {
@@ -32,6 +33,7 @@ import NodesPanelSwitch from './NodesPanelSwitch'
 import AccountPanelSwitch from './AccountPanelSwitch'
 import NodesPanel from './NodesPanel'
 import AccountsPanel from './AccountsPanel'
+import newVersion from '../../assets/new-version.svg'
 
 function Header(props) {
   const refAccountList = useRef(null)
@@ -43,6 +45,7 @@ function Header(props) {
   const showAccountMenu = useSelector(showAccountMenuSelector)
   const showNodeMenu = useSelector(showNodeMenuSelector)
   const dispatch = useDispatch()
+  const updateInfo = useSelector(updateInfoSelector)
 
   useEffect(() => {
     getDelay(nodeList, chainId, dispatch, setNodeDelay)
@@ -117,6 +120,16 @@ function Header(props) {
           <AccountsPanel history={props.history} />
         ) : null}
       </div>
+      {updateInfo && updateInfo.hasNewVersion && (
+        <span
+          onClick={event => {
+            event.preventDefault()
+            window.openExternal(updateInfo.versionInfo.path)
+          }}
+        >
+          <img src={newVersion} alt="new version" />
+        </span>
+      )}
     </div>
   )
 }

src/store/reducers/statusSlice.js

@@ -1,15 +1,27 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, createSelector } from '@reduxjs/toolkit'
 
 const statusSlice = createSlice({
   name: 'status',
   initialState: {
+    appVersion: '0.0.0',
+    latestVersion: {
+      version: '0.0.0',
+      forceUpdate: false,
+      path: 'https://github.com/chainx-org/chainx-signer/releases'
+    },
     loading: false,
     initLoading: true,
     homeLoading: true,
     showAccountMenu: false,
     showNodeMenu: false
   },
   reducers: {
+    setAppVersion: (state, action) => {
+      state.appVersion = action.payload
+    },
+    setLatestVersion: (state, action) => {
+      state.latestVersion = action.payload
+    },
     setLoading: (state, action) => {
       state.loading = action.payload
     },
@@ -29,6 +41,8 @@ const statusSlice = createSlice({
 })
 
 export const {
+  setAppVersion,
+  setLatestVersion,
   setLoading,
   setInitLoading,
   setHomeLoading,
@@ -38,5 +52,25 @@ export const {
 
 export const showAccountMenuSelector = state => state.status.showAccountMenu
 export const showNodeMenuSelector = state => state.status.showNodeMenu
+export const appVersionSelector = state => state.status.appVersion
+export const latestVersionSelector = state => state.status.latestVersion
+export const updateInfoSelector = createSelector(
+  latestVersionSelector,
+  appVersionSelector,
+  (latestVersion, appVersion) => {
+    if (window.versionLte(latestVersion.version, appVersion)) {
+      return {
+        hasNewVersion: false
+      }
+    }
+
+    return {
+      hasNewVersion: true,
+      versionInfo: {
+        ...latestVersion
+      }
+    }
+  }
+)
 
 export default statusSlice.reducer