add utxos refresh button

app/components/MixStatus/index.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import {ProgressBar} from 'react-bootstrap';
+import { ProgressBar } from 'react-bootstrap';
 import mixService from '../../services/mixService';
 import utils from '../../services/utils';
 import * as Icon from 'react-feather';

app/containers/App.js

@@ -169,7 +169,12 @@ class App extends React.Component<Props> {
 
               {cliService.isLoggedIn() && walletService.isReady() &&  <div>
                 <button className='btn btn-sm btn-primary btn-deposit' onClick={() => modalService.openDeposit()}><Icon.Plus size={12}/> Deposit</button>
-                <div><small>Balance: {utils.toBtc(walletService.getBalanceDeposit()+walletService.getBalancePremix()+walletService.getBalancePostmix(), true)}</small></div>
+                <div>
+                  <small>Balance: {utils.toBtc(walletService.getBalance(), true)}</small>{' '}
+                  <small className='text-muted' title={'Refresh utxos ('+utils.durationElapsed(walletService.getLastUpdate())+' ago)'}>
+                    <a href='#' onClick={e => {walletService.fetchState(true);e.preventDefault()}}><Icon.RefreshCw size={12}/> </a>
+                  </small>
+                </div>
               </div>}
 
               <ul className="nav flex-column">
@@ -237,11 +242,11 @@ class App extends React.Component<Props> {
                 <small>Fetching wallet...</small>
               </div>}
               <div className="footerNav">
-                  <div>
-                    {cliService.isConnected() && <small>{cliService.getServerName()}</small>}
-                    {cliService.isCliLocal() && <small> {cliLocalStatusIcon} standalone</small>}
-                  </div>
-                  {!cliService.isCliLocal() && <div><small>{cliService.getCliUrl()}</small></div>}
+                <div>
+                  {cliService.isConnected() && <small>{cliService.getServerName()}</small>}
+                  {cliService.isCliLocal() && <small> {cliLocalStatusIcon} standalone</small>}
+                </div>
+                {!cliService.isCliLocal() && <div><small>{cliService.getCliUrl()}</small></div>}
               </div>
             </div>
             <Status

app/reducers/wallet.js

@@ -3,22 +3,7 @@ import { WALLET_SET } from '../actions/walletActions';
 import type { Action } from './types';
 import produce from 'immer';
 
-const initialState = {
-  /*wallet: {
-    deposit: {
-      utxos:[],
-      balance:0
-    },
-    premix: {
-      utxos:[],
-      balance:0
-    },
-    postmix: {
-      utxos:[],
-      balance:0
-    }
-  }*/
-}
+const initialState = {}
 
 const reducer = produce((state, action) => {
   const payload = action.payload

app/services/backendService.js

@@ -82,6 +82,11 @@ class BackendService {
           this.fetchBackendAsJson('/rest/cli/logout', 'POST')
         , 'cli.logout')
     },
+    restart: () => {
+      return this.withStatus('CLI', 'Restart', () =>
+          this.fetchBackendAsJson('/rest/cli/restart', 'POST')
+        , 'cli.restart')
+    },
     getConfig: () => {
       return this.withStatus('CLI', 'Fetch configuration', () =>
           this.fetchBackendAsJson('/rest/cli/config', 'GET')
@@ -110,10 +115,10 @@ class BackendService {
   };
 
   wallet = {
-    fetchUtxos: () => {
-      return this.withStatus('Wallet', 'Fetch utxos', () =>
-        this.fetchBackendAsJson('/rest/utxos', 'GET')
-        , 'wallet.fetchUtxos', true)
+    fetchUtxos: (refresh=false) => {
+      return this.withStatus('Wallet', 'Refresh utxos', () =>
+        this.fetchBackendAsJson('/rest/utxos?refresh='+refresh, 'GET')
+        , 'wallet.fetchUtxos', false)
     },
 
     fetchDeposit: (increment) => {

app/services/utils.js

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Icons from '@fortawesome/free-solid-svg-icons';
 import * as React from 'react';
 import { shell } from 'electron';
-import LinkExternal from '../components/Utils/LinkExternal';
+import moment from 'moment';
 
 const AMOUNT_PRECISION = 4
 const BTC_TO_SAT = 100000000
@@ -42,6 +42,7 @@ export const MIXABLE_STATUS = {
 export const CLI_STATUS = {
   NOT_INITIALIZED: 'NOT_INITIALIZED',
   NOT_READY: 'NOT_READY',
+  STARTING: 'STARTING',
   READY: 'READY'
 }
 
@@ -238,6 +239,11 @@ class Utils {
     }
     return str.substring(0, 5)+'...'+str.substring(len - 3)
   }
+
+  durationElapsed(time) {
+    const elapsed = new Date().getTime()-time
+    return moment.duration(elapsed).humanize()
+  }
 }
 
 const utils = new Utils()

app/services/walletService.js

 import ifNot from 'if-not-running';
-import moment from 'moment';
 import backendService from './backendService';
+import utils from './utils';
 
 const REFRESH_RATE = 10000;
 class WalletService {
@@ -51,8 +51,15 @@ class WalletService {
     if (!utxo.lastActivityElapsed) {
       return undefined
     }
-    const fetchElapsed = new Date().getTime()-this.state.wallet.fetchTime
-    return moment.duration(fetchElapsed + utxo.lastActivityElapsed).humanize()
+    return utils.durationElapsed(this.state.wallet.fetchTime-utxo.lastActivityElapsed)
+  }
+
+  getBalance() {
+    return this.state.wallet.balance;
+  }
+
+  getLastUpdate() {
+    return this.state.wallet.lastUpdate;
   }
 
   getUtxosDeposit () {
@@ -91,10 +98,10 @@ class WalletService {
     return this.state.wallet.postmix.zpub
   }
 
-  fetchState () {
+  fetchState (refresh=false) {
     return ifNot.run('walletService:fetchState', () => {
       // fetchState backend
-      return backendService.wallet.fetchUtxos().then(wallet => {
+      return backendService.wallet.fetchUtxos(refresh).then(wallet => {
         wallet.fetchTime = new Date().getTime()
         // set state
         if (this.state === undefined) {