Merge branch 'redux' into toaster-refactor

react/change.log

@@ -1,5 +1,7 @@
 v0.2.0.2a-beta
+--------------
 front:
+- fixed native t to t bug that led to interest loss
 - added pending request(s) spinner
 - added missing native z_balance api call for z-addresses
 - fixed native t to z address send bug
@@ -8,6 +10,8 @@ front:
 - minor UI reorder change
 - limit http stack history to 150 calls of each type
 - sort http stack history desc
+- swapped gettotalbalance interest with getinfo interest
+- extended settings / export keys ui
 
 back:
 - added cli route

react/src/actions/actions/settings.js

@@ -42,7 +42,7 @@ export function getAppInfo() {
 export function settingsWifkeyState(json, coin) {
   return {
     type: GET_WIF_KEY,
-    wifkey: json[`${coin}wif`],
+    wifkey: json,
     address: json[coin],
   }
 }

react/src/components/dashboard/atomic.js → react/src/components/dashboard/atomic/atomic.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { atomic } from '../../actions/actionCreators';
+import { atomic } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import AtomicRender from './atomic.render';
 

react/src/components/dashboard/atomic.render.js → react/src/components/dashboard/atomic/atomic.render.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
-import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
+import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto';
-import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
+import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC';
-import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat';
 
 const AtomicRender = function () {
   return (

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   getCoinTitle,
   getModeInfo
-} from '../../util/coinHelper';
+} from '../../../util/coinHelper';
 import CoinTileItem from './coinTileItem';
 
 import CoinTileRender from './coinTile.render';

react/src/components/dashboard/coinTile.render.js → react/src/components/dashboard/coinTile/coinTile.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const CoinTileRender = function() {
   return (
@@ -9,7 +9,7 @@ const CoinTileRender = function() {
         <i className="icon md-chevron-right"></i>
       </div>
       <div className="page-aside-inner">
-        <div className="search-wallet-widgets panel display-none">
+        <div className="search-wallet-widgets panel hide">
           <div className="panel-heading">
             <div className="panel-actions">
               <div className="input-search input-group-sm">

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

@@ -17,8 +17,8 @@ import {
   getNativeTxHistory,
   getKMDBalanceTotal,
   getSyncInfoNative
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import CoinTileItemRender from './coinTileItem.render';
 

react/src/components/dashboard/jumblr.js → react/src/components/dashboard/jumblr/jumblr.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-/*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
-import Store from '../../store';*/
 
 import JumblrRender from './jumblr.render';
 

react/src/components/dashboard/jumblr.render.js → react/src/components/dashboard/jumblr/jumblr.render.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
-import WalletsHeader from './walletsHeader';
+import WalletsHeader from '../walletsHeader/walletsHeader';
 
 const JumblrRender = function() {
   return (

react/src/components/dashboard/loginModal.js → react/src/components/dashboard/loginModal/loginModal.js

@@ -2,8 +2,8 @@ import React from 'react';
 import {
   toggleAddcoinModal,
   iguanaWalletPassphrase
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import LoginModalRender from './loginModal.render';
 

react/src/components/dashboard/loginModal.render.js → react/src/components/dashboard/loginModal/loginModal.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const LoginModalRender = function () {
   return (

react/src/components/dashboard/dashboard.render.js → react/src/components/dashboard/main/dashboard.render.js

@@ -1,21 +1,21 @@
 import React from 'react';
 
-import Navbar from './navbar';
+import Navbar from '../navbar/navbar';
-import CoinTile from './coinTile';
+import CoinTile from '../coinTile/coinTile';
-import EDEX from './edex';
+import EDEX from '../edex/edex';
-import WalletsBalance from './walletsBalance';
+import WalletsBalance from '../walletsBalance/walletsBalance';
-import WalletsProgress from './walletsProgress';
+import WalletsProgress from '../walletsProgress/walletsProgress';
-import WalletsNav from './walletsNav';
+import WalletsNav from '../walletsNav/walletsNav';
-import SendCoin from './sendCoin';
+import SendCoin from '../sendCoin/sendCoin';
-import WalletsData from './walletsData';
+import WalletsData from '../walletsData/walletsData';
-import Atomic from './atomic';
+import Atomic from '../atomic/atomic';
-import Jumblr from './jumblr';
+import Jumblr from '../jumblr/jumblr';
-import Settings from './settings';
+import Settings from '../settings/settings';
-import ReceiveCoin from './receiveCoin';
+import ReceiveCoin from '../receiveCoin/receiveCoin';
-import About from './about';
+import About from '../about/about';
-import WalletsNative from './walletsNative';
+import WalletsNative from '../walletsNative/walletsNative';
-import WalletsNativeTxInfo from './walletsNativeTxInfo';
+import WalletsNativeTxInfo from '../walletsNativeTxInfo/walletsNativeTxInfo';
-import WalletsTxInfo from './walletsTxInfo';
+import WalletsTxInfo from '../walletsTxInfo/walletsTxInfo';
 
 const DashboardRender = function() {
   return (

react/src/components/dashboard/dashboard.scss → react/src/components/dashboard/main/dashboard.scss

@@ -6,31 +6,27 @@
   text-align: center;
 }
 
-.display-none {
-  display: none !important;
-}
-
 .margin-top-30 {
   margin-top: 30px;
 }
 
-// jumblr.js
+//  jumblr.js
 .jumblr-header {
   font-size: 24px;
   text-align: center;
 }
 
-// loginModal.js
+//  loginModal.js
 .color-white {
   color: #fff;
 }
 
-//navbar.js
+// navbar.js
 .navbar-toolbar > li > a.padding-top-16 {
   padding-top: 16px;
 }
 
-//notifications.js
+// notifications.js
 .modal-body-container {
   height: 590px;
 }
@@ -40,7 +36,7 @@
   overflow-y: scroll;
 }
 
-//sendCoin.js
+// sendCoin.js
 .vertical-padding-10 {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -55,7 +51,7 @@
   color: #f44336;
 }
 
-//settings.js
+// settings.js
 .wallet-info-key {
   font-weight: bold;
 }
@@ -68,7 +64,7 @@
   text-align: left;
 }
 
-//walletsBalance.js
+// walletsBalance.js
 .font-weight-600 {
   font-weight: 600;
 }
@@ -77,7 +73,7 @@
   font-size: 22px;
 }
 
-//walletBasiliskConnection.js
+// walletBasiliskConnection.js
 .wallet-send-header {
   border-radius: 3px 3px 0 0;
 }
@@ -94,7 +90,7 @@
   font-size: 80%;
 }
 
-//walletsData.js
+// walletsData.js
 .z-index-10 {
   z-index: 10;
 }
@@ -107,12 +103,12 @@
   padding: 20px 0 10px 0;
 }
 
-//walletsHeader.js
+// walletsHeader.js
 .z-index-1 {
   z-index: 1;
 }
 
-//walletsNative.js
+// walletsNative.js
 .background-color-white {
   background-color: #fff;
 }
@@ -122,12 +118,12 @@
   vertical-align: middle;
 }
 
-//walletsNativeSyncProgress.js
+// walletsNativeSyncProgress.js
 .sync-progress-container {
   margin: -20px 0px 10px 0px;
 }
 
-//walletsNativeTxInfo.js
+// walletsNativeTxInfo.js
 .height-170 {
   height: 170px;
 }

react/src/components/dashboard/navbar.js → react/src/components/dashboard/navbar/navbar.js

@@ -7,8 +7,8 @@ import {
   toggleSyncOnlyModal,
   getSyncOnlyForks,
   logout
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import NavbarRender from './navbar.render';
 

react/src/components/dashboard/navbar.render.js → react/src/components/dashboard/navbar/navbar.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const NavbarRender = function() {
   return (
@@ -30,7 +30,7 @@ const NavbarRender = function() {
       <div className="navbar-container container-fluid">
         <div className="collapse navbar-collapse navbar-collapse-toolbar">
           <ul className="nav navbar-toolbar">
-            <li className="hidden-float display-none">
+            <li className="hidden-float hide">
               <a>
                 <i className="icon hamburger hamburger-arrow-left">
                   <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
@@ -48,7 +48,7 @@ const NavbarRender = function() {
                 <i className="site-menu-icon"></i> EasyDEX
               </a>
             </li>
-            <li className={ 'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
+            <li className={ 'hide ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
               <a onClick={ () => this.dashboardChangeSection('jumblr') }>
                 <i className="site-menu-icon"></i> Jumblr
               </a>
@@ -64,19 +64,19 @@ const NavbarRender = function() {
               <a
                 className="pointer padding-bottom-10 padding-top-16"
                 onClick={ this.toggleAddCoinModal }>
-                  <span>
+                <span>
-                    <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
+                  <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
-                  </span>
+                </span>
               </a>
             </li>
             <li
               className={ 'pointer dropdown' + (this.state.openDropMenu ? ' open' : '') }
               onClick={ this.openDropMenu }>
               <a className="navbar-avatar dropdown-toggle">
-                  <span className="avatar avatar-online">
+                <span className="avatar avatar-online">
-                    <img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
+                  <img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
-                    <i></i>
+                  <i></i>
-                  </span>
+                </span>
               </a>
               <ul className="dropdown-menu">
                 <li>

react/src/components/dashboard/notifications.js → react/src/components/dashboard/notifications/notifications.js

@@ -1,7 +1,5 @@
 import React from 'react';
-
+import { sortByDate } from '../../../util/sort';
-import { sortByDate } from '../../util/sort';
-
 import {
   NotificationsByTypeRender,
   NotificationsModalRender,

react/src/components/dashboard/notifications.render.js → react/src/components/dashboard/notifications/notifications.render.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
   secondsToString
-} from '../../util/time';
+} from '../../../util/time';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const NotificationsByTypeRender = function(logItem, type, index) {
   return (

react/src/components/dashboard/receiveCoin.js → react/src/components/dashboard/receiveCoin/receiveCoin.js

@@ -3,8 +3,8 @@ import {
   copyCoinAddress,
   checkAddressBasilisk,
   validateAddressBasilisk
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import {
   AddressActionsBasiliskModeRender,
@@ -62,10 +62,12 @@ class ReceiveCoin extends React.Component {
       for (let i = 0; i < this.props.addresses.public.length; i++) {
         let address = this.props.addresses.public[i];
 
-        if (this.isBasiliskMode() && this.hasNoAmount(address)) {
+        if (this.isBasiliskMode() &&
+            this.hasNoAmount(address)) {
           address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A';
         }
-        if (this.isBasiliskMode() && this.hasNoInterest(address)) {
+        if (this.isBasiliskMode() &&
+            this.hasNoInterest(address)) {
           address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A';
         }
 

react/src/components/dashboard/receiveCoin.render.js → react/src/components/dashboard/receiveCoin/receiveCoin.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const AddressActionsBasiliskModeRender = function(address) {
   return (
@@ -27,7 +27,7 @@ export const AddressActionsBasiliskModeRender = function(address) {
   );
 };
 
-export const AddressActionsNonBasiliskModeRender = function (address) {
+export const AddressActionsNonBasiliskModeRender = function(address) {
   return (
     <td>
       <span className="label label-default">
@@ -40,7 +40,7 @@ export const AddressActionsNonBasiliskModeRender = function (address) {
   );
 };
 
-export const AddressItemRender = function (address) {
+export const AddressItemRender = function(address) {
   return (
     <tr key={ address.address }>
       { this.renderAddressActions(address.address) }
@@ -51,7 +51,7 @@ export const AddressItemRender = function (address) {
   );
 };
 
-export const ReceiveCoinRender = function () {
+export const ReceiveCoinRender = function() {
   return (
     <div>
       <div className="col-xs-12 margin-top-20">

react/src/components/dashboard/sendCoin.js → react/src/components/dashboard/sendCoin/sendCoin.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import Config from '../../config';
+import Config from '../../../config';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import {
   checkTimestamp
-} from '../../util/time';
+} from '../../../util/time';
 import {
   edexGetTxIDList,
   edexRemoveTXID
-} from '../../util/cacheFormat';
+} from '../../../util/cacheFormat';
 import {
   resolveOpenAliasAddress,
   triggerToaster,
@@ -21,8 +21,8 @@ import {
   clearLastSendToResponseState,
   sendToAddressStateAlt,
   dexSendRawTX
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   UTXOCacheInfoRender,
   SendCoinResponseRender,

react/src/components/dashboard/sendCoin.render.js → react/src/components/dashboard/sendCoin/sendCoin.render.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import {
   secondsElapsedToString,
   secondsToString
-} from '../../util/time';
+} from '../../../util/time';
 
 export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import {
   iguanaActiveHandle,
   encryptWallet,
@@ -12,8 +12,8 @@ import {
   saveAppConfig,
   getAppInfo,
   shepherdCli
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import {
   AppInfoTabRender,
@@ -26,7 +26,6 @@ import {
   2) add fiat section
   3) kickstart section
   4) batch export/import wallet addresses
-  5) export keys, add coin selector
 */
 class Settings extends React.Component {
   constructor(props) {
@@ -41,6 +40,8 @@ class Settings extends React.Component {
       cliCmdString: null,
       cliCoin: null,
       cliResponse: null,
+      exportWifKeysRaw: false,
+      seedInputVisibility: false,
     };
     this.exportWifKeys = this.exportWifKeys.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -52,6 +53,8 @@ class Settings extends React.Component {
     this.renderPeersList = this.renderPeersList.bind(this);
     this.renderSNPeersList = this.renderSNPeersList.bind(this);
     this._saveAppConfig = this._saveAppConfig.bind(this);
+    this.exportWifKeysRaw = this.exportWifKeysRaw.bind(this);
+    this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
   }
 
   componentDidMount() {
@@ -72,6 +75,12 @@ class Settings extends React.Component {
     }
   }
 
+  toggleSeedInputVisibility() {
+    this.setState({
+      seedInputVisibility: !this.state.seedInputVisibility,
+    });
+  }
+
   execCliCmd() {
     Store.dispatch(shepherdCli('passthru', this.state.cliCoin, this.state.cliCmd));
   }
@@ -114,12 +123,14 @@ class Settings extends React.Component {
 
   renderPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
+      const _getPeersCoin = this.state.getPeersCoin;
-
+      const _rawPeers = this.props.Settings.rawPeers;
-      if (this.props.Settings.rawPeers &&
+      const coin = _getPeersCoin.split('|')[0];
-          this.state.getPeersCoin &&
+
-          this.props.Settings.rawPeers[coin]) {
+      if (_rawPeers &&
-        return this.props.Settings.rawPeers[coin].map((ip) =>
+          _getPeersCoin &&
+          _rawPeers[coin]) {
+        return _rawPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -142,12 +153,14 @@ class Settings extends React.Component {
 
   renderSNPeersList() {
     if (this.state.getPeersCoin) {
-      const coin = this.state.getPeersCoin.split('|')[0];
+      const _getPeersCoin = this.state.getPeersCoin;
-
+      const _supernetPeers = this.props.Settings.supernetPeers;
-      if (this.props.Settings.supernetPeers &&
+      const coin = _getPeersCoin.split('|')[0];
-          this.state.getPeersCoin &&
+
-          this.props.Settings.supernetPeers[coin]) {
+      if (_supernetPeers &&
-        return this.props.Settings.supernetPeers[coin].map((ip) =>
+          _getPeersCoin &&
+          _supernetPeers[coin]) {
+        return _supernetPeers[coin].map((ip) =>
           <div key={ ip }>{ ip }</div>
         );
       } else {
@@ -331,6 +344,60 @@ class Settings extends React.Component {
     }
   }
 
+  renderExportWifKeysRaw() {
+    const _wifKeysResponse = this.props.Settings.wifkey;
+
+    if (_wifKeysResponse &&
+        this.state.exportWifKeysRaw) {
+      return (
+        <div className="padding-bottom-30 padding-top-30">{ JSON.stringify(_wifKeysResponse, null, '\t') }</div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderWifKeys() {
+    let items = [];
+
+    if (this.props.Settings.wifkey) {
+      const _wifKeys = this.props.Settings.wifkey;
+
+      for (let i = 0; i < 2; i++) {
+        items.push(
+          <tr key={ `wif-export-table-header-${i}` }>
+            <td className="padding-bottom-10 padding-top-10">
+              <strong>{ i === 0 ? 'Address list' : 'Wif key list' }</strong>
+            </td>
+            <td className="padding-bottom-10 padding-top-10"></td>
+          </tr>
+        );
+
+        for (let _key in _wifKeys) {
+          if ((i === 0 && _key.length === 3 && _key !== 'tag') ||
+              (i === 1 && _key.indexOf('wif') > -1)) {
+            items.push(
+              <tr key={ _key }>
+                <td>{ _key }</td>
+                <td className="padding-left-15">{ _wifKeys[_key] }</td>
+              </tr>
+            );
+          }
+        }
+      }
+
+      return items;
+    } else {
+      return null;
+    }
+  }
+
+  exportWifKeysRaw() {
+    this.setState(Object.assign({}, this.state, {
+      exportWifKeysRaw: !this.state.exportWifKeysRaw,
+    }));
+  }
+
   render() {
     return SettingsRender.call(this);
   }

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
+import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto';
-import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
+import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC';
-import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat';
 
 export const AppInfoTabRender = function() {
   return (
@@ -278,7 +278,10 @@ export const SettingsRender = function() {
                       style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}>
                       <div className="panel-body">
                         <p>
-                          <div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/>
+                          <div className="padding-bottom-20">{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div>
+                          <div className="padding-bottom-20">
+                            <i>{ this.renderLB('SETTINGS.EXPORT_KEYS_NOTE') }</i>
+                          </div>
                           <strong>
                             <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
                           </strong>
@@ -287,11 +290,14 @@ export const SettingsRender = function() {
                         <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
                           <div className="form-group form-material floating">
                             <input
-                              type="password"
+                              type={ this.state.seedInputVisibility ? 'text' : 'password' }
                               className="form-control"
                               name="wifkeysPassphrase"
                               id="wifkeysPassphrase"
                               onChange={ this.updateInput } />
+                            <i
+                              className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                              onClick={ this.toggleSeedInputVisibility }></i>
                             <label className="floating-label" htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label>
                           </div>
                           <div className="col-sm-12 col-xs-12 text-align-center">
@@ -304,20 +310,18 @@ export const SettingsRender = function() {
 
                         <div className="col-sm-12 padding-top-15">
                           <div className="row">
-                            <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
+                            <table className="table">
-                              <tr>
+                              { this.renderWifKeys() }
-                                <td>
-                                  <strong>{ this.props.ActiveCoin.coin }</strong>
-                                </td>
-                                <td className="padding-left-15">{ this.props.Settings.address }</td>
-                              </tr>
-                              <tr>
-                                <td>
-                                  <strong>{ this.props.ActiveCoin.coin }Wif</strong>
-                                </td>
-                                <td className="padding-left-15">{ this.props.Settings.wifkey }</td>
-                              </tr>
                             </table>
+                            <div className={ this.props.Settings.wifkey ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              <button
+                                type="button"
+                                className="btn btn-primary waves-effect waves-light"
+                                onClick={ this.exportWifKeysRaw }>{ this.state.exportWifKeysRaw ? 'Hide' : 'Show' } raw data</button>
+                            </div>
+                            <div className={ this.state.exportWifKeysRaw ? 'col-sm-12 col-xs-12 text-align-center' : 'hide' }>
+                              { this.renderExportWifKeysRaw() }
+                            </div>
                           </div>
                         </div>
                       </div>

react/src/components/dashboard/syncOnly.js → react/src/components/dashboard/syncOnly/syncOnly.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { getCoinTitle } from '../../util/coinHelper';
+import { getCoinTitle } from '../../../util/coinHelper';
 import {
   stopInterval,
   addCoin,
   toggleSyncOnlyModal,
   stopIguanaFork,
   restartIguanaInstance
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 import {
   ProgressRender,

react/src/components/dashboard/syncOnly.render.js → react/src/components/dashboard/syncOnly/syncOnly.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const ProgressRender = function (fork) {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 import WalletsBalanceRender from './walletsBalance.render';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsBalanceRender = function() {
   return (

react/src/components/dashboard/walletsBasiliskConnection.js → react/src/components/dashboard/walletsBasiliskConnection/walletsBasiliskConnection.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { basiliskConnection } from '../../actions/actionCreators';
+import { basiliskConnection } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import WalletsBasiliskConnectionRender from './walletsBasiliskConnection.render';
 
 class WalletsBasiliskConnection extends React.Component {

react/src/components/dashboard/walletsBasiliskConnection.render.js → react/src/components/dashboard/walletsBasiliskConnection/walletsBasiliskConnection.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsBasiliskConnectionRender = function() {
   return (

react/src/components/dashboard/walletsBasiliskRefresh.render.js → react/src/components/dashboard/walletsBasiliskRefresh/walletsBasiliskRefresh.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsBasiliskRefreshRender = function() {
   return (

react/src/components/dashboard/walletsCacheData.js → react/src/components/dashboard/walletsCacheData/walletsCacheData.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
-import { toggleViewCacheModal } from '../../actions/actionCreators';
+import { toggleViewCacheModal } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import { TreeNode } from 'rc-tree';
 import WalletsCacheDataRender from './walletsCacheData.render';
 

react/src/components/dashboard/walletsCacheData.render.js → react/src/components/dashboard/walletsCacheData/walletsCacheData.render.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { animation } from '../../util/rc-tree-animate';
+import { animation } from '../../../util/rc-tree-animate';
 import { TreeNode } from 'rc-tree';
 
 const WalletsCacheDataRender = function() {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import Config from '../../config';
+import Config from '../../../config';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { sortByDate } from '../../util/sort';
+import { sortByDate } from '../../../util/sort';
 import {
   basiliskRefresh,
   basiliskConnection,
@@ -17,8 +17,8 @@ import {
   deleteCacheFile,
   fetchNewCacheData,
   fetchUtxoCache
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   PaginationItemRender,
   PaginationItemsPerPageSelectorRender,

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
+import WalletsBasiliskRefresh from '../walletsBasiliskRefresh/walletsBasiliskRefresh';
-import WalletsBasiliskConnection from './walletsBasiliskConnection';
+import WalletsBasiliskConnection from '../walletsBasiliskConnection/walletsBasiliskConnection';
-import WalletsNotariesList from './walletsNotariesList';
+import WalletsNotariesList from '../walletsNotariesList/walletsNotariesList';
-import WalletsCacheData from './walletsCacheData';
+import WalletsCacheData from '../walletsCacheData/walletsCacheData';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
 
 export const PaginationItemRender = function(i) {
   return (
@@ -171,7 +171,7 @@ export const WalletsDataRender = function() {
                               <i className="icon fa-history"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
                             </a>
                           </li>
-                          <li className={ 'display-none ' + (!this.state.useCache ? 'hide' : '') }>
+                          <li className={ 'hide ' + (!this.state.useCache ? 'hide' : '') }>
                             <a onClick={ this.restartBasiliskInstance }>
                               <i className="icon fa-refresh"></i> Restart Basilisk Instance (unsafe!)
                             </a>

react/src/components/dashboard/walletsHeader.render.js → react/src/components/dashboard/walletsHeader/walletsHeader.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsHeaderRender = function() {
   return (
@@ -14,7 +14,7 @@ const WalletsHeaderRender = function() {
           <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
         </li>
       </ol>
-      <div className="page-header-actions z-index-1 display-none">
+      <div className="page-header-actions z-index-1 hide">
         <div id="kmd_header_button">
           <button
             type="button"
@@ -38,7 +38,7 @@ const WalletsHeaderRender = function() {
           </ul>
         </div>
 
-        <div id="zec_header_button" className="display-none">
+        <div id="zec_header_button" className="hide">
           <button
             type="button"
             className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light">
@@ -69,7 +69,7 @@ const WalletsHeaderRender = function() {
           </button>
         </div>
 
-        <div id="kmd_header_button" className="display-none">
+        <div id="kmd_header_button" className="hide">
           <button
             type="button"
             className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light">
@@ -92,7 +92,7 @@ const WalletsHeaderRender = function() {
           </ul>
         </div>
 
-        <div className="row no-space width-350 hidden-xs display-none">
+        <div className="row no-space width-350 hidden-xs hide">
           <div className="col-xs-6">
             <div className="counter">
               <span className="font-weight-medium"> - BTC</span>

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

@@ -20,7 +20,6 @@ class WalletsNative extends React.Component {
       this.props.ActiveCoin.mode === 'native';
   }
 
-  // <WalletsNativeAlert {...this.props} />
   render() {
     if (this.isActiveCoinModeNative()) {
       return WalletsNativeRender.call(this);

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import WalletsNativeBalance from './walletsNativeBalance';
+import WalletsNativeBalance from '../walletsNativeBalance/walletsNativeBalance';
-import WalletsNativeInfo from './walletsNativeInfo';
+import WalletsNativeInfo from '../walletsNativeInfo/walletsNativeInfo';
-import WalletsNativeReceive from './walletsNativeReceive';
+import WalletsNativeReceive from '../walletsNativeReceive/walletsNativeReceive';
-import WalletsNativeSend from './walletsNativeSend';
+import WalletsNativeSend from '../walletsNativeSend/walletsNativeSend';
-import WalletsNativeSyncProgress from './walletsNativeSyncProgress';
+import WalletsNativeSyncProgress from '../walletsNativeSyncProgress/walletsNativeSyncProgress';
-import WalletsNativeTxHistory from './walletsNativeTxHistory';
+import WalletsNativeTxHistory from '../walletsNativeTxHistory/walletsNativeTxHistory';
 
 const WalletsNativeRender = function() {
   return (

react/src/components/dashboard/walletsNativeAlert.render.js → react/src/components/dashboard/walletsNativeAlert/walletsNativeAlert.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsNativeAlertRender = function() {
   return (

react/src/components/dashboard/walletsNativeBalance.render.js → react/src/components/dashboard/walletsNativeBalance/walletsNativeBalance.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsNativeBalanceRender = function() {
   return (

react/src/components/dashboard/walletsNativeInfo.render.js → react/src/components/dashboard/walletsNativeInfo/walletsNativeInfo.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsNativeInfoRender = function() {
   return (

react/src/components/dashboard/walletsNativeReceive.js → react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.js

@@ -2,8 +2,8 @@ import React from 'react';
 import {
   copyCoinAddress,
   getNewKMDAddresses
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   AddressListRender,
   WalletsNativeReceiveRender
@@ -66,7 +66,7 @@ class WalletsNativeReceive extends React.Component {
     if (this.props &&
         this.props.ActiveCoin &&
         this.props.ActiveCoin.nativeActiveSection === 'receive') {
-      WalletsNativeReceiveRender.call(this);
+      return WalletsNativeReceiveRender.call(this);
     }
 
     return null;

react/src/components/dashboard/walletsNativeReceive.render.js → react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const AddressListRender = function(address, type) {
   return (

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import Config from '../../config';
+import Config from '../../../config';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
 import {
   resolveOpenAliasAddress,
   triggerToaster,
   sendNativeTx,
   getKMDOPID
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   AddressListRender,
   OASendUIRender,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const AddressListRender = function() {
   return (

react/src/components/dashboard/walletsNativeSyncProgress.js → react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import {
   ChainActivationNotificationRender,
   WalletsNativeSyncProgressRender
@@ -37,7 +37,7 @@ class WalletsNativeSyncProgress extends React.Component {
     if (this.props.Settings &&
         this.props.Settings.debugLog) {
       if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
-        let temp = this.props.Settings.debugLog.split(' ');
+        const temp = this.props.Settings.debugLog.split(' ');
         let currentBestChain;
         let currentProgress;
 
@@ -61,6 +61,18 @@ class WalletsNativeSyncProgress extends React.Component {
             `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
           );
         }
+      } else if (this.props.Settings.debugLog.indexOf('Still rescanning') > -1) {
+        const temp = this.props.Settings.debugLog.split(' ');
+
+        for (let i = 0; i < temp.length; i++) {
+          if (temp[i].indexOf('Progress=') > -1) {
+            currentProgress = Number(temp[i].replace('Progress=', '')) * 100;
+          }
+        }
+
+        return (
+          `: ${currentProgress}%`
+        );
       } else {
         return (
           <span>...</span>

react/src/components/dashboard/walletsNativeSyncProgress.render.js → react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const ChainActivationNotificationRender = function() {
   return (

react/src/components/dashboard/walletsNativeTxHistory.js → react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { sortByDate } from '../../util/sort';
+import { sortByDate } from '../../../util/sort';
-import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
+import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   PaginationItemsPerPageSelectorRender,
   PaginationRender,

react/src/components/dashboard/walletsNativeTxHistory.render.js → react/src/components/dashboard/walletsNativeTxHistory/walletsNativeTxHistory.render.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
 
 export const PaginationItemsPerPageSelectorRender = function() {
   return (

react/src/components/dashboard/walletsNativeTxInfo.js → react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
+import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 
 class WalletsNativeTxInfo extends React.Component {
   constructor(props) {

react/src/components/dashboard/walletsNativeTxInfo.render.js → react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
 
 const WalletsNativeTxInfoRender = function(txInfo) {
   return (

react/src/components/dashboard/walletsNav.js → react/src/components/dashboard/walletsNav/walletsNav.js

@@ -6,8 +6,8 @@ import {
   toggleReceiveCoinForm,
   toggleSendReceiveCoinForms,
   toggleDashboardActiveSection
-} from '../../actions/actionCreators';
+} from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import {
   WalletsNavNoWalletRender,
   WalletsNavWithWalletRender

react/src/components/dashboard/walletsNav.render.js → react/src/components/dashboard/walletsNav/walletsNav.render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 export const WalletsNavNoWalletRender = function () {
   return (
@@ -8,8 +8,8 @@ export const WalletsNavNoWalletRender = function () {
         <div className="alert alert-info alert-dismissible">
           <button type="button" className="close"></button>
           <span className="font-size-24 text-align-center">
-                <i className="icon fa-paw"></i> { translate('INDEX.NO_WALLET_CAPS') }
+            <i className="icon fa-paw"></i> { translate('INDEX.NO_WALLET_CAPS') }
-              </span>
+          </span>
           <br/>
           { translate('INDEX.PLEASE_SELECT_A_WALLET') }.
         </div>

react/src/components/dashboard/walletsNotariesList.js → react/src/components/dashboard/walletsNotariesList/walletsNotariesList.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { displayNotariesModal } from '../../actions/actionCreators';
+import { displayNotariesModal } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import { TreeNode } from 'rc-tree';
 import {
   NotariesListRender,

react/src/components/dashboard/walletsNotariesList.render.js → react/src/components/dashboard/walletsNotariesList/walletsNotariesList.render.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import Tree, { TreeNode } from 'rc-tree';
-import { animation } from '../../util/rc-tree-animate';
+import { animation } from '../../../util/rc-tree-animate';
 
 export const NotariesListRender = function (node, index) {
   <TreeNode title={ `Node ${index}` } key={ `node-${index}` }>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 import WalletsProgressRender from './walletsProgress.render';
 
 class WalletsProgress extends React.Component {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
 
 const WalletsProgressRender = function () {
   return (

react/src/components/dashboard/walletsTxInfo.js → react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
+import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
-import Store from '../../store';
+import Store from '../../../store';
 import WalletsTxInfoRender from './walletsTxInfo.render';
 
 class WalletsTxInfo extends React.Component {

react/src/components/dashboard/walletsTxInfo.render.js → react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
+import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../util/time';
+import { secondsToString } from '../../../util/time';
 
 const WalletsTxInfoRender = function(txInfo) {
   return (

react/src/components/main/walletMain.js

@@ -2,9 +2,9 @@ import React from 'react';
 import Toaster from '../toaster/toaster';
 import AddCoin from '../addcoin/addcoin';
 import Login from '../login/login';
-import Dashboard from '../dashboard/dashboard';
+import Dashboard from '../dashboard/main/dashboard';
-import SyncOnly from '../dashboard/syncOnly';
+import SyncOnly from '../dashboard/syncOnly/syncOnly';
-import Notifications from '../dashboard/notifications';
+import Notifications from '../dashboard/notifications/notifications';
 
 class WalletMain extends React.Component {
   render() {

react/src/styles/index.scss

@@ -31,6 +31,6 @@
 @import '../assets/skins/orange.min.css';
 @import '../../node_modules/rc-tree/assets/index.css';
 @import '../components/addcoin/addcoin.scss';
-@import '../components/dashboard/dashboard.scss';
+@import '../components/dashboard/main/dashboard.scss';
 @import '../components/login/login.scss';
 @import '../components/overrides.scss';

react/src/translate/en.js

@@ -426,7 +426,9 @@ export const _lang = {
       'BIN': 'Bin',
       'DIR': 'Dir',
       'ADD_PEER_IP': 'Add Peer IP',
-      'APP_SESSION': 'App Session'
+      'APP_SESSION': 'App Session',
+      'EXPORT_KEYS_NOTE': 'Note: it\'s important that you provide the same passphrase you used to login to the wallet!<br>' +
+                          'In case passphrases will not match wallet is going to log you out of current session.'
     },
     'TX_INFO': {
       'ADDRESS': 'address',