Update notification (#478)

app/background/setting/client.js

@@ -7,4 +7,5 @@ export const clientStub = ipcRendererInjector => makeClient(ipcRendererInjector,
   'setLocale',
   'getCustomLocale',
   'setCustomLocale',
+  'getLatestRelease',
 ]);

app/background/setting/service.js

@@ -37,6 +37,21 @@ export async function setCustomLocale(json) {
   return await put(CUSTOM_LOCALE, JSON.stringify(json));
 }
 
+export async function getLatestRelease() {
+  try {
+    const releases = await (
+      await fetch(
+        'https://api.github.com/repos/kyokan/bob-wallet/releases'
+      )
+    ).json();
+    const latest = releases.filter(r => !r.draft && !r.prerelease)[0];
+    return latest;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
 const sName = 'Setting';
 const methods = {
   getExplorer,
@@ -45,6 +60,7 @@ const methods = {
   setLocale,
   getCustomLocale,
   setCustomLocale,
+  getLatestRelease,
 };
 
 export async function start(server) {

app/components/Sidebar/index.js

@@ -1,3 +1,4 @@
+import { shell } from 'electron';
 import React, { Component } from 'react';
 import { withRouter, NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -22,6 +23,7 @@ const nodeClient = clientStub(() => require('electron').ipcRenderer);
     walletSync: state.wallet.walletSync,
     walletHeight: state.wallet.walletHeight,
     address: state.wallet.address,
+    updateAvailable: state.app.updateAvailable,
   }),
   dispatch => ({
 
@@ -44,6 +46,7 @@ class Sidebar extends Component {
     walletHeight: PropTypes.number.isRequired,
     network: PropTypes.string.isRequired,
     address: PropTypes.string.isRequired,
+    updateAvailable: PropTypes.object,
   };
 
   static contextType = I18nContext;
@@ -199,13 +202,27 @@ class Sidebar extends Component {
       newBlockStatus,
       chainHeight,
       tip,
+      updateAvailable,
     } = this.props;
 
     return (
       <div className="sidebar__footer">
-        <div className="sidebar__footer__row">
-          <div className="sidebar__footer__title">{newBlockStatus}</div>
-        </div>
+        {updateAvailable ? (
+          <div className="sidebar__footer__row">
+            <button
+              className="sidebar__footer__update-notif"
+              onClick={() => shell.openExternal(updateAvailable.url)}
+            >
+              {t('updateAvailable')} ({updateAvailable.version})
+            </button>
+          </div>
+        ) : null}
+        {newBlockStatus ? (
+          <div className="sidebar__footer__row">
+            <div className="sidebar__footer__title">{newBlockStatus}</div>
+          </div>)
+          : null
+        }
         <div className="sidebar__footer__row">
           <div className="sidebar__footer__title">{t('currentHeight')}</div>
           <div className="sidebar__footer__text">

app/components/Sidebar/sidebar.scss

@@ -1,4 +1,4 @@
-@import '../../variables';
+@import '../../variables.scss';
 
 .sidebar {
   @extend %col-nowrap;
@@ -79,7 +79,7 @@
 
   &__footer {
     @extend %col-nowrap;
-    padding-bottom: 1rem;
+    padding: 0.3rem 0rem;
     position: relative;
     flex: 0 0 auto;
     border-top: 1px solid rgba($black, 0.1);
@@ -115,6 +115,13 @@
         color: #333;
       }
     }
+
+    &__update-notif {
+      @extend %h5;
+      @extend %btn-secondary;
+      padding: 0.5rem;
+      text-align: center;
+    }
   }
 
   &__search {

app/ducks/app.js

@@ -1,3 +1,5 @@
+import semver from 'semver';
+const pkg = require('../../package.json');
 import settingsClient from "../utils/settingsClient";
 import hip2Client from '../utils/hip2Client';
 import { SET_HIP2_PORT } from "./hip2Reducer";
@@ -6,12 +8,30 @@ const SET_DEEPLINK = 'app/setDeeplink';
 const SET_LOCALE = 'app/setLocale';
 const SET_CUSTOM_LOCALE = 'app/setCustomLocale';
 const SET_DEEPLINK_PARAMS = 'app/setDeeplinkParams';
+const SET_UPDATE_AVAILABLE = 'app/setUpdateAvailable';
 
 const initialState = {
   deeplink: '',
   deeplinkParams: {},
   locale: '',
   customLocale: null,
+  updateAvailable: null,
+};
+
+export const checkForUpdates = () => async (dispatch) => {
+  const latestRelease = await settingsClient.getLatestRelease();
+  if (!latestRelease) return;
+
+  const canUpdate = semver.gt(latestRelease.tag_name.replace(/$v/i, ''), pkg.version);
+  if (canUpdate) {
+    dispatch({
+      type: SET_UPDATE_AVAILABLE,
+      payload: {
+        version: latestRelease.tag_name,
+        url: `https://github.com/kyokan/bob-wallet/releases/tag/${latestRelease.tag_name}`,
+      },
+    });
+  }
 };
 
 export const initHip2 = () => async (dispatch) => {
@@ -103,6 +123,11 @@ export default function appReducer(state = initialState, action) {
         ...state,
         customLocale: action.payload,
       };
+    case SET_UPDATE_AVAILABLE:
+      return {
+        ...state,
+        updateAvailable: action.payload,
+      };
     default:
       return state;
   }

app/pages/App/index.js

@@ -37,7 +37,7 @@ import AppHeader from "../AppHeader";
 import Exchange from '../Exchange';
 import SignMessage from "../SignMessage";
 import VerifyMessage from "../VerifyMessage";
-import {fetchLocale, initHip2} from "../../ducks/app";
+import {fetchLocale, initHip2, checkForUpdates} from "../../ducks/app";
 import {I18nContext} from "../../utils/i18n";
 const connClient = cClientStub(() => require('electron').ipcRenderer);
 const settingClient = sClientStub(() => require('electron').ipcRenderer);
@@ -49,6 +49,7 @@ const settingClient = sClientStub(() => require('electron').ipcRenderer);
   (dispatch) => ({
     initHip2: () => dispatch(initHip2()),
     setExplorer: (explorer) => dispatch(nodeActions.setExplorer(explorer)),
+    checkForUpdates: () => dispatch(checkForUpdates()),
     fetchLocale: () => dispatch(fetchLocale()),
   }),
 )
@@ -77,6 +78,7 @@ class App extends Component {
   async componentDidMount() {
     this.setState({isLoading: true});
     this.props.fetchLocale();
+    this.props.checkForUpdates();
     await this.props.startNode();
     await this.props.initHip2();
     this.props.watchActivity();

locales/en.json

@@ -531,6 +531,7 @@
   "unknownBid": "Unknown Bid",
   "unlockWallet": "Unlock Wallet",
   "update": "Update",
+  "updateAvailable": "Update Available",
   "uploadAuctionFile": "Upload Auction File",
   "userDirectory": "User Directory",
   "verify": "Verify",