combined native dashboard update

assets/mainWindow/js/loading.js

@@ -22,7 +22,7 @@ function initSettingsForm() {
           <div
             class="settings-help"
             title="${appConfSchema[key].info}">
-            <img src="EasyDEX-GUI/assets/mainWindow/img/fa-question.png" />
+            <img src="../EasyDEX-GUI/assets/mainWindow/img/fa-question.png" />
           </div>`;
       }
 
@@ -174,6 +174,8 @@ function closeMainWindow() {
   const remote = require('electron').remote;
   const window = remote.getCurrentWindow();
 
+  disableModeButtons();
+
   window.createWindow('open');
   window.hide();
 }
@@ -185,11 +187,19 @@ function quitApp() {
   window.forseCloseApp();
 }
 
+function disableModeButtons() {
+  $('#nativeOnlyBtn').attr('disabled', true);
+  $('#normalStartBtn').attr('disabled', true);
+  $('#settingsBtn').attr('disabled', true);
+}
+
 function normalStart() {
   const remote = require('electron').remote;
   let appConf = remote.getCurrentWindow().appConfig;
   appConf.iguanaLessMode = false;
 
+  disableModeButtons();
+
   // run iguana-less mode with no daemons startup
   if (appConf &&
       appConf.iguanaLessMode) {

react/src/actions/actionCreators.js

@@ -64,6 +64,7 @@ export * from './actions/cli';
 export * from './actions/update';
 export * from './actions/jumblr';
 export * from './actions/interest';
+export * from './actions/nativeDashboardUpdate';
 
 export function changeActiveAddress(address) {
   return {

react/src/actions/actions/nativeDashboardUpdate.js

@@ -0,0 +1,66 @@
+import {
+  triggerToaster,
+} from '../actionCreators';
+import Config from '../../config';
+import { DASHBOARD_UPDATE } from '../storeType';
+
+export function getDashboardUpdate(coin, activeCoinProps) {
+  return dispatch => {
+    const _fetchConfig = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ coin: coin }),
+    };
+
+    return fetch(
+      `http://127.0.0.1:${Config.agamaPort}/shepherd/native/dashboard/update`,
+      _fetchConfig
+    )
+    .catch(function(error) {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'getDashboardUpdate',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      dispatch(getDashboardUpdateState(json));
+
+      // dirty hack to trigger dashboard render
+      if (!activeCoinProps.balance &&
+          !activeCoinProps.addresses) {
+        setTimeout(() => {
+          dispatch(getDashboardUpdateState(json));
+        }, 100);
+      }
+    })
+  }
+}
+
+export function getDashboardUpdateState(json) {
+  let _listtransactions = json.result['listtransactions'];
+
+  if (_listtransactions &&
+      _listtransactions.error) {
+    _listtransactions = null;
+  } else if (_listtransactions && _listtransactions.result && _listtransactions.result.length) {
+    _listtransactions = _listtransactions.result;
+  } else if (!_listtransactions || (!_listtransactions.result || !_listtransactions.result.length)) {
+    _listtransactions = 'no data';
+  }
+
+  return {
+    type: DASHBOARD_UPDATE,
+    progress: json.result['getinfo'].result,
+    opids: json.result['z_getoperationstatus'].result,
+    txhistory: _listtransactions,
+    balance: json.result['z_gettotalbalance'].result,
+    addresses: json.result['addresses'],
+  };
+}

react/src/actions/storeType.js

@@ -30,6 +30,7 @@ export const DASHBOARD_ACTIVE_COIN_NATIVE_OPIDS = 'DASHBOARD_ACTIVE_COIN_NATIVE_
 export const DASHBOARD_ACTIVE_COIN_SENDTO = 'DASHBOARD_ACTIVE_COIN_SENDTO';
 export const DASHBOARD_ACTIVE_COIN_GET_CACHE = 'DASHBOARD_ACTIVE_COIN_GET_CACHE';
 export const DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR = 'DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR';
+export const DASHBOARD_UPDATE = 'DASHBOARD_UPDATE';
 export const VIEW_CACHE_DATA = 'VIEW_CACHE_DATA';
 export const SYNC_ONLY_MODAL_TOGGLE = 'SYNC_ONLY_MODAL_TOGGLE';
 export const SYNC_ONLY_DATA = 'SYNC_ONLY_DATA';

react/src/components/dashboard/coinTile/coinTileItem.js

@@ -18,7 +18,8 @@ import {
   getNativeTxHistory,
   getKMDBalanceTotal,
   getSyncInfoNative,
-  getDebugLog
+  getDebugLog,
+  getDashboardUpdate
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import Config from '../../../config';
@@ -42,8 +43,8 @@ class CoinTileItem extends React.Component {
   dispatchCoinActions(coin, mode) {
     if (mode === 'native') {
       Store.dispatch(iguanaActiveHandle(true));
-      const _propsDashboard = this.props.Dashboard;
-      const syncPercentage = _propsDashboard && _propsDashboard.progress && (parseFloat(parseInt(_propsDashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2)).replace('NaN', 0);
+      const _propsDashboard = this.props.ActiveCoin;
+      const syncPercentage = _propsDashboard && _propsDashboard.progress && (parseFloat(parseInt(_propsDashboard.progress.blocks, 10) * 100 / parseInt(_propsDashboard.progress.longestchain, 10)).toFixed(2)).replace('NaN', 0);
 
       if (syncPercentage < 100 &&
           !this.props.Dashboard.displayCoindDownModal) {
@@ -56,10 +57,7 @@ class CoinTileItem extends React.Component {
           syncPercentage &&
           (Config.iguanaLessMode || syncPercentage >= NATIVE_MIN_SYNC_PERCENTAGE_THRESHOLD)) {
         Store.dispatch(getSyncInfoNative(coin, true));
-        Store.dispatch(getKMDBalanceTotal(coin));
-        Store.dispatch(getNativeTxHistory(coin));
-        Store.dispatch(getKMDAddressesNative(coin, mode));
-        Store.dispatch(getKMDOPID(null, coin));
+        Store.dispatch(getDashboardUpdate(coin, _propsDashboard));
       } else {
         Store.dispatch(getSyncInfoNative(coin));
       }
@@ -205,14 +203,15 @@ const mapStateToProps = (state) => {
     ActiveCoin: {
       coin: state.ActiveCoin.coin,
       addresses: state.ActiveCoin.addresses,
-      mainBasiliskAddress: state.ActiveCoin.mainBasiliskAddress
+      mainBasiliskAddress: state.ActiveCoin.mainBasiliskAddress,
+      progress: state.ActiveCoin.progress,
     },
     Dashboard: state.Dashboard,
     Interval: {
       interval: state.Interval.interval
     }
   };
- 
+
 };
 
 export default connect(mapStateToProps)(CoinTileItem);

react/src/components/dashboard/walletsData/walletsData.js

@@ -385,20 +385,20 @@ class WalletsData extends React.Component {
       if (this.isFullySynced()) {
         return (
           <tr className="hover--none">
-            <td colSpan="7">{ translate('INDEX.LOADING_HISTORY') }...</td>
+            <td colSpan="7" className="table-cell-offset-16">{ translate('INDEX.LOADING_HISTORY') }...</td>
           </tr>
         );
       } else {
         return (
           <tr className="hover--none">
-            <td colSpan="7">{ translate('INDEX.SYNC_IN_PROGRESS') }...</td>
+            <td colSpan="7" className="table-cell-offset-16">{ translate('INDEX.SYNC_IN_PROGRESS') }...</td>
           </tr>
         );
       }
     } else if (this.state.itemsList === 'no data') {
       return (
         <tr className="hover--none">
-          <td colSpan="7">{ translate('INDEX.NO_DATA') }</td>
+          <td colSpan="7" className="table-cell-offset-16">{ translate('INDEX.NO_DATA') }</td>
         </tr>
       );
     } else if (this.state.itemsList) {

react/src/components/dashboard/walletsData/walletsData.scss

@@ -86,4 +86,7 @@
     padding: 38px;
     background: rgba(255, 255, 255, 0.85);
   }
+}
+.table-cell-offset-16 {
+  padding-left: 16px;
 }

react/src/components/dashboard/walletsNative/walletsNative.render.js

@@ -27,7 +27,7 @@ const WalletsNativeRender = function() {
             </li>
           </ol>
         </div>
-        <div className="page-content">
+        <div className={ 'page-content' + (this.state.nativeOnly ? ' page-content-native' : '') }>
           <WalletsProgress />
           <div className="row">
             <WalletsBalance />

react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js

@@ -430,8 +430,6 @@ class WalletsNativeSend extends React.Component {
       valid = false;
     }
 
-    valid = false;
-
     return valid;
   }
 

react/src/components/dashboard/walletsProgress/walletsProgress.render.js

@@ -56,15 +56,13 @@ export const CoinIsBusyRender = function() {
 
 export const ChainActivationNotificationRender = function() {
   return (
-    <div className="alert alert-info alert-dismissible margin-bottom-40">
+    <div className="alert alert-info alert-dismissible margin-bottom-50 margin-top-40">
       <button
         className="close"
         type="button">
         <span>×</span>
       </button>
-      <h4>
-        { translate('INDEX.ACTIVATING_CHAIN') }
-        { this.renderActivatingBestChainProgress() }
+      <h4>{ translate('INDEX.ACTIVATING_CHAIN') } { this.renderActivatingBestChainProgress() }
       </h4>
       <p>{ this.renderLB('INDEX.KMD_STARTED') }</p>
     </div>
@@ -75,7 +73,7 @@ export const WalletsProgressRender = function() {
   return (
     <div
       id="edex-footer"
-      className="margin-bottom-20">
+      className="margin-bottom-30 margin-top-10">
       { !this.isNativeMode() &&
         this.props.ActiveCoin.progress &&
         <div className="row no-space">

react/src/components/overrides.scss

@@ -245,64 +245,6 @@ input:checked + .slider:before {
   width: 200px;
 }
 
-.spinner {
-  width: 50px;
-  height: 40px;
-  text-align: center;
-  font-size: 10px;
-
-  > div {
-    background-color: #333;
-    height: 100%;
-    width: 6px;
-    display: inline-block;
-
-    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    animation: sk-stretchdelay 1.2s infinite ease-in-out;
-  }
-
-  .rect2 {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
-  }
-  .rect3 {
-    -webkit-animation-delay: -1.0s;
-    animation-delay: -1.0s;
-  }
-  .rect4 {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
-  }
-  .rect5 {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
-  }
-}
-
-@-webkit-keyframes sk-stretchdelay {
-  0%,
-  40%,
-  100% {
-    -webkit-transform: scaleY(0.4)
-  }
-  20% {
-    -webkit-transform: scaleY(1.0)
-  }
-}
-
-@keyframes sk-stretchdelay {
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-    -webkit-transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1.0);
-    -webkit-transform: scaleY(1.0);
-  }
-}
-
 .bootstrap-select {
   > .dropdown-toggle {
     z-index: 0;
@@ -446,4 +388,14 @@ select{
 
 .no-padding-left {
   padding-left: 0;
+}
+
+.alert-info {
+  width: 97.1%;
+  margin: 0 auto;
+}
+
+.page-content-native {
+  position: relative;
+  top: -72px;
 }

react/src/reducers/activeCoin.js

@@ -19,7 +19,7 @@ import {
   DASHBOARD_UPDATE,
 } from '../actions/storeType';
 
-// TODO: refactor
+// TODO: refactor current coin props copy on change
 
 export function ActiveCoin(state = {
   coins: {},
@@ -63,7 +63,8 @@ export function ActiveCoin(state = {
         let _coins = state.coins;
         _coins[state.coin] = _coinDataToStore;
 
-        return Object.assign({}, state, {
+        return {
+          ...state,
           coins: _coins,
           addresses: _coinData.addresses,
           coin: _coinData.coin,
@@ -80,7 +81,7 @@ export function ActiveCoin(state = {
           opids: _coinData.opids,
           activeBasiliskAddress: _coinData.activeBasiliskAddress,
           progress: _coinData.progress,
-        });
+        };
       } else {
         if (state.coin) {
           const _coinData = {
@@ -103,7 +104,8 @@ export function ActiveCoin(state = {
           let _coins = state.coins;
           _coins[state.coin] = _coinData;
 
-          return Object.assign({}, state, {
+          return {
+            ...state,
             coins: _coins,
             coin: action.coin,
             mode: action.mode,
@@ -115,9 +117,10 @@ export function ActiveCoin(state = {
             showTransactionInfoTxIndex: null,
             activeSection: 'default',
             progress: null,
-          });
+          };
         } else {
-          return Object.assign({}, state, {
+          return {
+            ...state,
             coin: action.coin,
             mode: action.mode,
             balance: 0,
@@ -128,84 +131,102 @@ export function ActiveCoin(state = {
             showTransactionInfoTxIndex: null,
             activeSection: 'default',
             progress: null,
-          });
+          };
         }
       }
     case DASHBOARD_ACTIVE_COIN_BALANCE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         balance: action.balance,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_SEND_FORM:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         send: action.send,
         receive: false,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_RECEIVE_FORM:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         send: false,
         receive: action.receive,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_RESET_FORMS:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         send: false,
         receive: false,
-      });
+      };
     case ACTIVE_COIN_GET_ADDRESSES:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         addresses: action.addresses,
-      });
+      };
     case DASHBOARD_ACTIVE_SECTION:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         activeSection: action.section,
-      });
+      };
     case DASHBOARD_ACTIVE_TXINFO_MODAL:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         showTransactionInfo: action.showTransactionInfo,
         showTransactionInfoTxIndex: action.showTransactionInfoTxIndex,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_NATIVE_BALANCE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         balance: action.balance,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_NATIVE_TXHISTORY:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         txhistory: action.txhistory,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_NATIVE_OPIDS:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         opids: action.opids,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_SENDTO:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         lastSendToResponse: action.lastSendToResponse,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_GET_CACHE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         cache: action.cache,
-      });
+      };
     case DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         mainBasiliskAddress: action.address,
-      });
+      };
     case DASHBOARD_ACTIVE_ADDRESS:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         activeAddress: action.address,
-      });
+      };
     case SYNCING_FULL_MODE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         progress: action.progress,
-      });
+      };
     case SYNCING_NATIVE_MODE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         progress: action.progress,
-      });
+      };
     case DASHBOARD_UPDATE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         progress: action.progress,
         opids: action.opids,
         txhistory: action.txhistory,
         balance: action.balance,
-      });
+        addresses: action.addresses,
+      };
     default:
       return state;
   }

react/src/reducers/dashboard.js

@@ -1,10 +1,6 @@
 import {
   DASHBOARD_SECTION_CHANGE,
   GET_MAIN_ADDRESS,
-  BASILISK_REFRESH,
-  SYNCING_FULL_MODE,
-  SYNCING_NATIVE_MODE,
-  BASILISK_CONNECTION,
   VIEW_CACHE_DATA,
   TOGGLE_NOTIFICATIONS_MODAL,
   DISPLAY_COIND_DOWN_MODAL,
@@ -14,8 +10,6 @@ import {
 export function Dashboard(state = {
   activeSection: 'wallets',
   activeHandle: null,
-  basiliskRefresh: false,
-  basiliskConnection: false,
   displayViewCacheModal: false,
   guiLog: {},
   displayCoindDownModal: false,
@@ -23,46 +17,31 @@ export function Dashboard(state = {
 }, action) {
   switch (action.type) {
     case DASHBOARD_SECTION_CHANGE:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         activeSection: action.activeSection,
-      });
+      };
     case GET_MAIN_ADDRESS:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         activeHandle: action.activeHandle,
-      });
-    case BASILISK_REFRESH:
-      return Object.assign({}, state, {
-        basiliskRefresh: action.basiliskRefresh,
-        progress: action.progress,
-      });
-    case BASILISK_CONNECTION:
-      return Object.assign({}, state, {
-        basiliskConnection: action.basiliskConnection,
-        progress: action.progress,
-      });
-    case SYNCING_FULL_MODE:
-      return Object.assign({}, state, {
-        syncingFullMode: action.syncingFullMode,
-        progress: action.progress,
-      });
-    case SYNCING_NATIVE_MODE:
-      return Object.assign({}, state, {
-        syncingNativeMode: action.syncingNativeMode,
-        progress: action.progress,
-      });
+      };
     case VIEW_CACHE_DATA:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         displayViewCacheModal: action.display,
-      });
+      };
     case DISPLAY_COIND_DOWN_MODAL:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         displayCoindDownModal: action.displayCoindDownModal,
-      });
+      };
       break;
     case DISPLAY_CLAIM_INTEREST_MODAL:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         displayClaimInterestModal: action.displayClaimInterestModal,
-      });
+      };
       break;
     default:
       return state;