Merge pull request #158 from SuperNETorg/cleanup

Cleanup

react/change.log

@@ -10,6 +10,9 @@ UI:
 - komodod crash report modal
 - values rounding (up to 6 decimals)
 - add coin multi ui reflow fix
+- reset app setting to default
+- manual balance / transactions list refresh
+- quick access dropdown on login to open settings / about / sync only modals
 
 v0.2.0.21a-beta
 --------------

react/src/actions/actionCreators.js

@@ -25,6 +25,7 @@ import {
   DASHBOARD_ACTIVE_COIN_CHANGE,
   ACTIVE_COIN_GET_ADDRESSES,
   DASHBOARD_ACTIVE_COIN_NATIVE_TXHISTORY,
+  DISPLAY_LOGIN_SETTINGS_MODAL,
   DISPLAY_COIND_DOWN_MODAL,
   START_INTERVAL,
   STOP_INTERVAL
@@ -359,3 +360,10 @@ export function toggleCoindDownModal(display) {
     displayCoindDownModal: display,
   }
 }
+
+export function toggleLoginSettingsModal(display) {
+  return {
+    type: DISPLAY_LOGIN_SETTINGS_MODAL,
+    displayLoginSettingsModal: display,
+  }
+}

react/src/actions/actions/basiliskCache.js

@@ -67,10 +67,11 @@ export function fetchNewCacheData(_payload) {
         _coin = `&coin=${_payload.coin}`,
         _calls = `&calls=${_payload.calls}`,
         _address = _payload.address ? (`&address=${_payload.address}`) : '',
+        _skip = _payload.skip ? (`&skip=${_payload.skip}`) : '',
         _iguanaInstancePort = Config.useBasiliskInstance ? `&port=${Config.iguanaCorePort + 1}` : '';
 
   return dispatch => {
-    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/${_route}${_userpass}${_pubkey}${_coin}${_calls}${_address}${_iguanaInstancePort}`, {
+    return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/${_route}${_userpass}${_pubkey}${_coin}${_calls}${_address}${_skip}${_iguanaInstancePort}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',

react/src/actions/storeType.js

@@ -45,3 +45,4 @@ export const LOG_GUI_HTTP = 'LOG_GUI_HTTP';
 export const CLI = 'CLI';
 export const LOGOUT = 'LOGOUT';
 export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL';
+export const DISPLAY_LOGIN_SETTINGS_MODAL = 'DISPLAY_LOGIN_SETTINGS_MODAL';

react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getCoinTitle } from '../../../util/coinHelper';
+import { translate } from '../../../translate/translate';
+import { toggleLoginSettingsModal } from '../../../actions/actionCreators';
+import Store from '../../../store';
+
+import { LoginSettingsModalRender } from './loginSettingsModal.render';
+
+class LoginSettingsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+    this.closeLoginSettingsModal = this.closeLoginSettingsModal.bind(this);
+  }
+
+  closeLoginSettingsModal() {
+    Store.dispatch(toggleLoginSettingsModal(false));
+  }
+
+  render() {
+    if (this.props &&
+        this.props.Main &&
+        this.props.Main.displayLoginSettingsModal) {
+      return LoginSettingsModalRender.call(this);
+    } else {
+      return null;
+    }
+  }
+}
+
+export default LoginSettingsModal;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+import About from '../about/about';
+import Settings from '../settings/settings';
+
+export const LoginSettingsModalRender = function() {
+  return (
+    <div>
+      <div className="modal show login-settings-modal">
+        <div className="modal-dialog modal-center modal-lg">
+          <div className="modal-content">
+            <div className="modal-body modal-body-container">
+              { this.props.section === 'settings' &&
+                <Settings
+                  {...this.props}
+                  disableWalletSpecificUI="true" />
+              }
+              { this.props.section === 'about' &&
+                <About />
+              }
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-default"
+                onClick={ this.closeLoginSettingsModal }>{ translate('INDEX.CLOSE') }</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop show in"></div>
+    </div>
+  );
+};

react/src/components/dashboard/settings/settings.js

@@ -62,6 +62,7 @@ class Settings extends React.Component {
       updateProgressPatch: null,
       wifkeysPassphrase: '',
       trimPassphraseTimer: null,
+      disableWalletSpecificUI: null,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -82,7 +83,9 @@ class Settings extends React.Component {
   }
 
   componentDidMount() {
+    if (!this.props.disableWalletSpecificUI) {
       Store.dispatch(iguanaActiveHandle());
+    }
     Store.dispatch(getAppConfig());
     Store.dispatch(getAppInfo());
   }
@@ -95,6 +98,7 @@ class Settings extends React.Component {
         activeTab: this.state.activeTab,
         activeTabHeight: _height,
         tabElId: this.state.tabElId,
+        disableWalletSpecificUI: props.disableWalletSpecificUI,
       }));
     }
   }

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

@@ -156,6 +156,7 @@ export const SettingsRender = function() {
                 <div
                   className="panel-group"
                   id="SettingsAccordion">
+                  { !this.props.disableWalletSpecificUI &&
                     <div
                       id="WalletInfo"
                       onClick={ () => this.openTab('WalletInfo', 0) }
@@ -206,7 +207,8 @@ export const SettingsRender = function() {
                         </div>
                       </div>
                     </div>
-
+                  }
+                  { !this.props.disableWalletSpecificUI &&
                   <div
                     id="AddNodeforCoin"
                     onClick={ () => this.openTab('AddNodeforCoin', 1) }
@@ -292,7 +294,8 @@ export const SettingsRender = function() {
                       </div>
                     </div>
                   </div>
-
+                  }
+                  { !this.props.disableWalletSpecificUI &&
                   <div
                     id="DumpWallet"
                     onClick={ () => this.openTab('DumpWallet', 2) }
@@ -308,7 +311,8 @@ export const SettingsRender = function() {
                       <div className="panel-body">Wallet Backup section to be updated soon.</div>
                     </div>
                   </div>
-
+                  }
+                  { !this.props.disableWalletSpecificUI &&
                   <div
                     id="FiatCurrencySettings"
                     onClick={ () => this.openTab('FiatCurrencySettings', 3) }
@@ -324,7 +328,8 @@ export const SettingsRender = function() {
                       <div className="panel-body">Fiat currency settings section to be updated soon.</div>
                     </div>
                   </div>
-
+                  }
+                  { !this.props.disableWalletSpecificUI &&
                   <div
                     id="ExportKeys"
                     onClick={ () => this.openTab('ExportKeys', 4) }
@@ -401,7 +406,8 @@ export const SettingsRender = function() {
                       </div>
                     </div>
                   </div>
-
+                  }
+                  { !this.props.disableWalletSpecificUI &&
                   <div
                     id="ImportKeys"
                     onClick={ () => this.openTab('ImportKeys', 5) }
@@ -450,6 +456,7 @@ export const SettingsRender = function() {
                       </div>
                     </div>
                   </div>
+                  }
 
                   <div
                     className="panel"
@@ -548,6 +555,7 @@ export const SettingsRender = function() {
                   </div>
                   { this.renderAppInfoTab() }
 
+                  { this.props.Main && this.props.Main.coins.native &&
                     <div
                       id="Cli"
                       onClick={ () => this.openTab('Cli', 9) }
@@ -609,6 +617,7 @@ export const SettingsRender = function() {
                         </div>
                       </div>
                     </div>
+                  }
 
                   { this.renderAppUpdateTab() }
                 </div>

react/src/components/dashboard/walletsBalance/walletsBalance.js

@@ -1,12 +1,31 @@
 import React from 'react';
 import { translate } from '../../../translate/translate';
+import {
+  fetchNewCacheData,
+  getKMDBalanceTotal,
+  iguanaEdexBalance
+} from '../../../actions/actionCreators';
+import Store from '../../../store';
 
 import WalletsBalanceRender from './walletsBalance.render';
 
 class WalletsBalance extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      currentAddress: null,
+    };
     this.isFullySynced = this.isFullySynced.bind(this);
+    this.refreshBalance = this.refreshBalance.bind(this);
+  }
+
+  componentWillReceiveProps(props) {
+    if (!this.state.currentAddress &&
+        this.props.ActiveCoin.activeAddress) {
+      this.setState(Object.assign({}, this.state, {
+        currentAddress: this.props.ActiveCoin.activeAddress,
+      }));
+    }
   }
 
   isFullySynced() {
@@ -21,6 +40,30 @@ class WalletsBalance extends React.Component {
     }
   }
 
+  refreshBalance() {
+    const _mode = this.props.ActiveCoin.mode;
+    const _coin = this.props.ActiveCoin.coin;
+
+    switch(_mode) {
+      case 'basilisk':
+        Store.dispatch(fetchNewCacheData({
+          'pubkey': this.props.Dashboard.activeHandle.pubkey,
+          'allcoins': false,
+          'coin': this.props.ActiveCoin.coin,
+          'calls': 'getbalance',
+          'skip': true,
+          'address': this.state.currentAddress,
+        }));
+        break;
+      case 'native':
+        Store.dispatch(getKMDBalanceTotal(_coin));
+        break;
+      case 'full':
+        Store.dispatch(iguanaEdexBalance(_coin));
+        break;
+    }
+  }
+
   renderBalance(type) {
     let _balance = '0';
     const _mode = this.props.ActiveCoin.mode;

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

@@ -26,6 +26,9 @@ const WalletsBalanceRender = function() {
         <div className={ this.isNativeMode() ? 'col-lg-3 col-xs-12' : this.isBasiliskMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12'}>
           <div className="widget widget-shadow">
             <div className="widget-content">
+              <i
+                className="icon fa-refresh manual-balance-refresh pointer"
+                onClick={ this.refreshBalance }></i>
               <div className="padding-20 padding-top-10">
                 <div className="clearfix">
                   <div className="pull-left padding-vertical-10">

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

@@ -17,7 +17,9 @@ import {
   getDexNotaries,
   deleteCacheFile,
   fetchNewCacheData,
-  fetchUtxoCache
+  fetchUtxoCache,
+  getNativeTxHistory,
+  getFullTransactionsList
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import {
@@ -61,6 +63,7 @@ class WalletsData extends React.Component {
     this.restartBasiliskInstance = this.restartBasiliskInstance.bind(this);
     this.basiliskRefreshActionOne = this.basiliskRefreshActionOne.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.refreshTxHistory = this.refreshTxHistory.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
@@ -137,6 +140,30 @@ class WalletsData extends React.Component {
     }
   }
 
+  refreshTxHistory() {
+    const _mode = this.props.ActiveCoin.mode;
+    const _coin = this.props.ActiveCoin.coin;
+
+    switch(_mode) {
+      case 'basilisk':
+        Store.dispatch(fetchNewCacheData({
+          'pubkey': this.props.Dashboard.activeHandle.pubkey,
+          'allcoins': false,
+          'coin': _coin,
+          'calls': 'listtransactions',
+          'skip': true,
+          'address': this.state.currentAddress,
+        }));
+        break;
+      case 'native':
+        Store.dispatch(getNativeTxHistory(_coin));
+        break;
+      case 'full':
+        Store.dispatch(getFullTransactionsList(_coin));
+        break;
+    }
+  }
+
   removeAndFetchNewCache() {
     Store.dispatch(deleteCacheFile({
       'pubkey': this.props.Dashboard.activeHandle.pubkey,

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

@@ -157,6 +157,9 @@ export const WalletsDataRender = function() {
               <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                 <div className="panel">
                   <header className="panel-heading z-index-10">
+                  <i
+                    className="icon fa-refresh manual-txhistory-refresh pointer"
+                    onClick={ this.refreshTxHistory }></i>
                     <div className={ 'panel-actions' + (this.props.ActiveCoin.mode === 'basilisk' ? '' : ' hide') }>
                       <div className={ 'margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
                         <div

react/src/components/login/login.js

@@ -8,7 +8,8 @@ import {
   toggleSyncOnlyModal,
   getSyncOnlyForks,
   createNewWallet,
-  triggerToaster
+  triggerToaster,
+  toggleLoginSettingsModal
 } from '../../actions/actionCreators';
 import Config from '../../config';
 import Store from '../../store';
@@ -39,6 +40,8 @@ class Login extends React.Component {
       isCustomSeedWeak: false,
       nativeOnly: Config.iguanaLessMode,
       trimPassphraseTimer: null,
+      displayLoginSettingsDropdown: false,
+      displayLoginSettingsDropdownSection: null,
     };
     this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
     this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this);
@@ -51,11 +54,21 @@ class Login extends React.Component {
     this.copyPassPhraseToClipboard = this.copyPassPhraseToClipboard.bind(this);
     this.execWalletCreate = this.execWalletCreate.bind(this);
     this.resizeLoginTextarea = this.resizeLoginTextarea.bind(this);
+    this.toggleLoginSettingsDropdown = this.toggleLoginSettingsDropdown.bind(this);
   }
 
   // the setInterval handler for 'activeCoins'
   _iguanaActiveCoins = null;
 
+  toggleLoginSettingsDropdownSection(sectionName) {
+    Store.dispatch(toggleLoginSettingsModal(true));
+    
+    this.setState({
+      displayLoginSettingsDropdown: false,
+      displayLoginSettingsDropdownSection: sectionName,
+    });
+  }
+
   isCustomWalletSeed() {
     return this.state.customWalletSeed;
   }
@@ -95,6 +108,9 @@ class Login extends React.Component {
     );
 
     Store.dispatch(toggleSyncOnlyModal(true));
+    this.setState({
+      displayLoginSettingsDropdown: false,
+    });
   }
 
   componentDidMount() {
@@ -117,6 +133,12 @@ class Login extends React.Component {
     }));
   }
 
+  toggleLoginSettingsDropdown() {
+    this.setState(Object.assign({}, this.state, {
+      displayLoginSettingsDropdown: !this.state.displayLoginSettingsDropdown,
+    }));
+  }
+
   componentWillReceiveProps(props) {
     if (props &&
         props.Main &&

react/src/components/login/login.render.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal';
 
 const LoginRender = function () {
   return (
     <div>
+      <LoginSettingsModal
+        {...this.props}
+        section={ this.state.displayLoginSettingsDropdownSection } />
       { this.renderSwallModal() }
       <div className="page animsition vertical-align text-center fade-in">
         <div className="page-content vertical-align-middle col-xs-12 col-sm-6 col-sm-offset-3">
@@ -16,13 +20,35 @@ const LoginRender = function () {
               alt="SuperNET Iguana" />
           </div>
 
-          <div className={ this.state.nativeOnly ? 'hide' : 'vertical-padding-20 horizontal-padding-0' }>
+          <div className="login-settings-dropdown margin-bottom-30">
+            <div>
               <span
-              className="display-sync-only-coins-toggle"
-              onClick={ this.openSyncOnlyModal }>
-              <i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
+                className="login-settings-dropdown-trigger"
+                onClick={ this.toggleLoginSettingsDropdown }>
+                <i className="icon fa-cogs"></i>&nbsp;
+                <span className="login-settings-dropdown-label">Quick access</span>
               </span>
             </div>
+            <div>
+              <ul className={ this.state.displayLoginSettingsDropdown ? 'dropdown-menu show' : 'hide' }>
+                <li>
+                  <a onClick={ () => this.toggleLoginSettingsDropdownSection('settings') }>
+                    <i className="icon md-settings"></i> { translate('INDEX.SETTINGS') }
+                  </a>
+                </li>
+                <li className={ this.state.nativeOnly ? 'hide' : '' }>
+                  <a onClick={ this.openSyncOnlyModal }>
+                    <i className="icon fa-cubes"></i> { translate('ADD_COIN.SYNC_ONLY') }
+                  </a>
+                </li>
+                <li>
+                  <a onClick={ () => this.toggleLoginSettingsDropdownSection('about') }>
+                    <i className="icon fa-users"></i> { translate('INDEX.ABOUT_IGUANA') }
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
 
           <div className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
             <div className="panel">

react/src/components/login/login.scss

@@ -127,3 +127,29 @@ input[type="password"] {
     font-size: 13px;
   }
 }
+
+.login-settings-dropdown {
+  font-size: 16px;
+
+  .dropdown-menu {
+    left: 42%;
+    top: inherit;
+  }
+}
+
+.login-settings-dropdown-trigger {
+  cursor: pointer;
+}
+
+.login-settings-modal {
+  .modal-body {
+    overflow-y: scroll;
+    color: #757575;
+  }
+  .panel-title {
+    color: #757575;
+  }
+  a {
+    color: #fb8c00;
+  }
+}

react/src/components/overrides.scss

@@ -642,3 +642,10 @@ select{
 .backround-gray {
   background: #f3f4f5;
 }
+
+.manual-balance-refresh,
+.manual-txhistory-refresh {
+  position: absolute;
+  right: 4px;
+  top: 3px;
+}

react/src/reducers/main.js

@@ -1,12 +1,14 @@
 import {
   GET_ACTIVE_COINS,
   LOGIN,
-  ACTIVE_HANDLE
+  ACTIVE_HANDLE,
+  DISPLAY_LOGIN_SETTINGS_MODAL
 } from '../actions/storeType';
 
 export function Main(state = {
   isLoggedIn: false,
   activeCoins: [],
+  displayLoginSettingsModal: false,
 }, action) {
   switch (action.type) {
     case GET_ACTIVE_COINS:
@@ -23,6 +25,10 @@ export function Main(state = {
         isLoggedIn: action.isLoggedIn,
         activeHandle: action.handle,
       });
+    case DISPLAY_LOGIN_SETTINGS_MODAL:
+      return Object.assign({}, state, {
+        displayLoginSettingsModal: action.displayLoginSettingsModal,
+      });
     default:
       return state;
   }

react/src/store.js

@@ -3,6 +3,7 @@ import thunkMiddleware from 'redux-thunk';
 import createLogger from 'redux-logger';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { browserHistory } from 'react-router';
+import Config from './config';
 
 import rootReducer from './reducers/index';
 
@@ -19,7 +20,7 @@ const defaultState = {
 /* eslint-disable no-underscore-dangle */
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const enhancers = composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware));
+const enhancers = Config.debug || Config.dev ? composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware)) : composeEnhancers(applyMiddleware(thunkMiddleware));
 const store = createStore(
   rootReducer,
   defaultState,