Merge pull request #164 from SuperNETorg/feature/prop-refactor

Refactor wallestnav to use connect & mapstatetoprops

react/src/components/addcoin/addcoin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../translate/translate';
 import Config from '../../config';
 import {
@@ -16,8 +17,8 @@ import CoinSelectorsRender from './coin-selectors.render';
 import AddCoinRender from './addcoin.render';
 
 class AddCoin extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       nativeOnly: Config.iguanaLessMode,
       coins: [],
@@ -355,4 +356,16 @@ class AddCoin extends React.Component {
   }
 }
 
-export default AddCoin;
+
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+    },
+    AddCoin: state.AddCoin,      
+  };
+
+};
+
+export default connect(mapStateToProps)(AddCoin);

react/src/components/addcoin/addcoinOptionsCrypto.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../translate/translate';
 import Config from '../../config';
 
 class AddCoinOptionsCrypto extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       nativeOnly: Config.iguanaLessMode,
     }
@@ -60,4 +61,11 @@ class AddCoinOptionsCrypto extends React.Component {
   }
 }
 
-export default AddCoinOptionsCrypto;
+const mapStateToProps = (state) => {
+  return {
+    appSettings:  state.appSettings,
+  };
+ 
+};
+
+export default connect(mapStateToProps)(AddCoinOptionsCrypto);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { atomic } from '../../../actions/actionCreators';
 import Store from '../../../store';
 
@@ -10,8 +11,8 @@ import AtomicRender from './atomic.render';
     2) validation
 */
 class Atomic extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       output: null,
       api: null,
@@ -497,5 +498,13 @@ class Atomic extends React.Component {
     return AtomicRender.call(this);
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    Atomic: {
+      response: state.Atomic.response,
+    }
+  };
+ 
+};
 
-export default Atomic;
+export default connect(mapStateToProps)(Atomic);

react/src/components/dashboard/claimInterestModal/claimInterestModal.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import ReactDOM from 'react-dom';
 import Store from '../../../store';
 import {
@@ -16,8 +17,8 @@ import {
 } from './claimInterestModal.render';
 
 class ClaimInterestModal extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       open: false,
       isLoading: true,
@@ -133,5 +134,18 @@ class ClaimInterestModal extends React.Component {
     return ClaimInterestModalRender.call(this);
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      balance: state.ActiveCoin.balance,
+      activeSection: state.ActiveCoin.activeSection,
+    },
+    Dashboard: {
+      displayClaimInterestModal: state.Dashboard.displayClaimInterestModal
+    }
+  };
+ 
+};
 
-export default ClaimInterestModal;
+export default connect(mapStateToProps)(ClaimInterestModal);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   getCoinTitle,
   getModeInfo
@@ -8,10 +9,8 @@ import CoinTileItem from './coinTileItem';
 import CoinTileRender from './coinTile.render';
 
 class CoinTile extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
-    this.state = {
-    };
     this.renderTiles = this.renderTiles.bind(this);
   }
 
@@ -21,11 +20,10 @@ class CoinTile extends React.Component {
       'basilisk',
       'full'
     ];
-    const allCoins = this.props.Main.coins;
+    const allCoins = this.props.allCoins;
     let items = [];
 
-    if (this.props.Main &&
+    if (allCoins) {
-        allCoins) {
       modes.map(function(mode) {
         allCoins[mode].map(function(coin) {
           const _coinMode = getModeInfo(mode);
@@ -56,7 +54,7 @@ class CoinTile extends React.Component {
           key={ i }
           i={ i }
           item={ item }
-          {...this.props} />)
+       />)
     );
   }
 
@@ -64,5 +62,12 @@ class CoinTile extends React.Component {
     return CoinTileRender.call(this);
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    allCoins: state.Main.coins,
+  };
+ 
+};
+
+export default connect(mapStateToProps)(CoinTile);
 
-export default CoinTile;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   dashboardChangeActiveCoin,
   iguanaActiveHandle,
@@ -30,10 +31,8 @@ const IGUNA_ACTIVE_HANDLE_TIMEOUT_KMD_NATIVE = 15000;
 const NATIVE_MIN_SYNC_PERCENTAGE_THRESHOLD = 90;
 
 class CoinTileItem extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
-    this.state = {
-    };
   }
 
   // TODO: 1) cache native/full node data to file
@@ -201,5 +200,19 @@ class CoinTileItem extends React.Component {
     return CoinTileItemRender.call(this);
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      addresses: state.ActiveCoin.addresses,
+      mainBasiliskAddress: state.ActiveCoin.mainBasiliskAddress
+    },
+    Dashboard: state.Dashboard,
+    Interval: {
+      interval: state.Interval.interval
+    }
+  };
+ 
+};
 
-export default CoinTileItem;
+export default connect(mapStateToProps)(CoinTileItem);

react/src/components/dashboard/coindDownModal/coindDownModal.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { toggleCoindDownModal } from '../../../actions/actionCreators';
 import Store from '../../../store';
 
 import CoindDownModalRender from './coindDownModal.render';
 
 class CoindDownModal extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       display: false,
       debugLogCrash: null,
@@ -18,20 +19,11 @@ class CoindDownModal extends React.Component {
     Store.dispatch(toggleCoindDownModal(false));
   }
 
-  componentWillReceiveProps(props) {
+  componentWillReceiveProps(nextProps) {
-    const coindDownModalProps = props ? props.Dashboard : null;
+    if (this.props.displayCoindDownModal !== nextProps.displayCoindDownModal) {
-
-    if (coindDownModalProps &&
-        coindDownModalProps.displayCoindDownModal !== this.state.display) {
       this.setState(Object.assign({}, this.state, {
-        display: coindDownModalProps.displayCoindDownModal,
+        display: nextProps.displayCoindDownModal,
       }));
-
-      setTimeout(() => {
-        this.setState(Object.assign({}, this.state, {
-          display: coindDownModalProps.displayCoindDownModal,
-        }));
-      }, 100);
     }
   }
 
@@ -43,5 +35,12 @@ class CoindDownModal extends React.Component {
     return null;
   }
 }
-
+const mapStateToProps = (state) => {
-export default CoindDownModal;
+  return {
+    displayCoindDownModal: state.Dashboard.displayCoindDownModal,
+    debugLog: state.Settings.debugLog
+  };
+ 
+};
+
+export default connect(mapStateToProps)(CoindDownModal);

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

@@ -24,8 +24,9 @@ const CoindDownModalRender = function () {
                   <strong>Debug.log ({ translate('INDEX.LAST_50_LINES') })</strong>
                   <div className="form-group form-material floating">
                     <textarea
+                      readOnly
                       className="form-control"
-                      value={ this.props.Settings.debugLog }></textarea>
+                      value={ this.props.debugLog || '' }></textarea>
                   </div>
                   <button
                     type="button"

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import {
   dashboardChangeActiveCoin,
@@ -39,8 +40,8 @@ if (!window.jumblrPasshrase) { // gen jumblr passphrase
 }
 
 class Jumblr extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       activeTab: 0,
       randomSeed: window.jumblrPasshrase,
@@ -424,4 +425,13 @@ class Jumblr extends React.Component {
   }
 }
 
-export default Jumblr;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(Jumblr);

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

@@ -359,7 +359,6 @@ export const JumblrRender = function() {
                     <p>{ translate('JUMBLR.DEPOSIT_FORM_P1') }</p>
                     <p className="padding-bottom-20">{ translate('JUMBLR.DEPOSIT_FORM_P2') }</p>
                     <WalletsNativeSend
-                      {...this.props}
                       renderFormOnly="true"
                       activeSection="send" />
                   </div>
@@ -461,7 +460,6 @@ export const JumblrRender = function() {
                   </div>
                   <div className={ 'tab-pane' + (this.state.activeTab === 1 ? ' active' : '') }>
                     <ReceiveCoin
-                      {...this.props.ActiveCoin}
                       activeSection="receive"
                       renderTableOnly="true" />
                   </div>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { getCoinTitle } from '../../../util/coinHelper';
 import { translate } from '../../../translate/translate';
 import { toggleLoginSettingsModal } from '../../../actions/actionCreators';
@@ -29,4 +30,11 @@ class LoginSettingsModal extends React.Component {
   }
 }
 
-export default LoginSettingsModal;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main
+  };
+
+};
+
+export default connect(mapStateToProps)(LoginSettingsModal);

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

@@ -6,13 +6,12 @@ import Settings from '../settings/settings';
 export const LoginSettingsModalRender = function() {
   return (
     <div>
-      <div className="modal show login-settings-modal">
+      <div className="modal show login-settings-modal ff">
         <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' &&

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import DashboardRender from './dashboard.render';
 
 class Dashboard extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
     };
     this.renderDashboard = this.renderDashboard.bind(this);
@@ -38,4 +39,17 @@ class Dashboard extends React.Component {
   }
 }
 
-export default Dashboard;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+    },
+    Dashboard: {
+      activeSection: state.Dashboard.activeSection, 
+    }     
+  };
+
+};
+
+export default connect(mapStateToProps)(Dashboard);

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

@@ -23,33 +23,33 @@ const DashboardRender = function() {
       <div
         className={ this.isSectionActive('wallets') ? 'page-main' : '' }
         id="section-dashboard">
-        <Navbar {...this.props} />
+        <Navbar />
-        <CoindDownModal {...this.props} />
+        <CoindDownModal />
         <div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
-          <CoinTile {...this.props} />
+          <CoinTile />
-          <WalletsNav {...this.props} />
+          <WalletsNav />
-          { !this.isNativeMode() && <WalletsProgress {...this.props} /> }
+          { !this.isNativeMode() && <WalletsProgress /> }
-          { !this.isNativeMode() && <WalletsBalance {...this.props} />}
+          { !this.isNativeMode() && <WalletsBalance />}
-          <SendCoin {...this.props} />
+          <SendCoin />
-          { !this.isNativeMode() && <ReceiveCoin {...this.props.ActiveCoin} /> }
+          { !this.isNativeMode() && <ReceiveCoin /> }
-          { !this.isNativeMode() && <WalletsData {...this.props} /> }
+          { !this.isNativeMode() && <WalletsData /> }
-          <WalletsTxInfo {...this.props} />
+          <WalletsTxInfo />
-          <WalletsNative {...this.props} />
+          <WalletsNative />
         </div>
         { this.isSectionActive('edex') &&
-          <EDEX {...this.props} />
+          <EDEX />
         }
         { this.isSectionActive('atomic') &&
-          <Atomic {...this.props} />
+          <Atomic />
         }
         { this.isSectionActive('jumblr') &&
-          <Jumblr {...this.props} />
+          <Jumblr  />
         }
         { this.isSectionActive('settings') &&
-          <Settings {...this.props} />
+          <Settings />
         }
         { this.isSectionActive('about') &&
-          <About {...this.props} />
+          <About />
         }
       </div>
     </div>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   dashboardChangeSection,
   toggleAddcoinModal,
@@ -15,8 +16,8 @@ import { checkAC } from '../../addcoin/payload';
 import NavbarRender from './navbar.render';
 
 class Navbar extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       openDropMenu: false,
       nativeOnly: Config.iguanaLessMode,
@@ -114,5 +115,22 @@ class Navbar extends React.Component {
     return NavbarRender.call(this);
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+      coin: state.ActiveCoin.coin,
+    },
+    Dashboard: {
+      activeSection: state.Dashboard.activeSection,
+    },
+    Interval: {
+      interval: state.Interval.interval,
+    },
+    nativeOnly: Config.iguanaLessMode
+  };
+ 
+};
+
+export default connect(mapStateToProps)(Navbar);
 
-export default Navbar;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { sortByDate } from '../../../util/sort';
 import Config from '../../../config';
 import {
@@ -8,8 +9,8 @@ import {
 } from './notifications.render';
 
 class Notifications extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       displayModal: false,
       calls: {
@@ -107,4 +108,15 @@ class Notifications extends React.Component {
   }
 }
 
-export default Notifications;
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: {
+      guiLog: state.Dashboard.guiLog,
+      activeHandle: state.Dashboard.activeHandle,
+    }     
+  };
+
+};
+
+export default connect(mapStateToProps)(Notifications);
+

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   copyCoinAddress,
   checkAddressBasilisk,
@@ -18,8 +19,8 @@ import {
 // TODO: fallback to localstorage/stores data in case iguana is taking too long to respond
 
 class ReceiveCoin extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
 
     this.state = {
       openDropMenu: false,
@@ -216,5 +217,18 @@ class ReceiveCoin extends React.Component {
     return null;
   }
 }
-
+const mapStateToProps = (state) => {
-export default ReceiveCoin;
+  return {
+    coin: state.ActiveCoin.coin,
+    mode: state.ActiveCoin.mode,
+    receive: state.ActiveCoin.receive,
+    balance: state.ActiveCoin.balance,
+    cache: state.ActiveCoin.cache,
+    activeSection: state.ActiveCoin.activeSection,
+    activeAddress: state.ActiveCoin.activeAddress,
+    addresses: state.ActiveCoin.addresses
+  };
+ 
+};
+
+export default connect(mapStateToProps)(ReceiveCoin);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import Config from '../../../config';
 import { translate } from '../../../translate/translate';
 import { checkTimestamp } from '../../../util/time';
@@ -41,7 +42,7 @@ class SendCoin extends React.Component {
     super(props);
     this.state = {
       currentStep: 0,
-      sendFrom: this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : null,
+      sendFrom: this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : null,
       sendFromAmount: 0,
       sendTo: '',
       sendToOA: null,
@@ -874,4 +875,25 @@ class SendCoin extends React.Component {
   }
 }
 
-export default SendCoin;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+      cache: state.ActiveCoin.cache,
+      activeAddress: state.ActiveCoin.activeAddress,
+      lastSendToResponse: state.ActiveCoin.lastSendToResponse,
+      addresses: state.ActiveCoin.addresses,
+    },
+    Dashboard: {
+      activeHandle: state.Dashboard.activeHandle,
+    }
+
+  };
+ 
+};
+
+export default connect(mapStateToProps)(SendCoin);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import Config from '../../../config';
 import {
@@ -42,8 +43,8 @@ let updateProgressBar = {
   4) batch export/import wallet addresses
 */
 class Settings extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       activeTab: 0,
       debugLinesCount: 10,
@@ -119,7 +120,7 @@ class Settings extends React.Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(props) {
     if (!this.props.disableWalletSpecificUI) {
       Store.dispatch(iguanaActiveHandle());
     }
@@ -846,4 +847,18 @@ class Settings extends React.Component {
   }
 }
 
-export default Settings;
+const mapStateToProps = (state) => {
+  return {
+    Main: {
+      coins: state.Main.coins,
+      activeHandle: state.Main.activeHandle,
+    },
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+    },
+    Settings: state.Settings,      
+  };
+
+};
+
+export default connect(mapStateToProps)(Settings);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { getCoinTitle } from '../../../util/coinHelper';
 import { translate } from '../../../translate/translate';
 import {
@@ -17,8 +18,8 @@ import {
 } from './syncOnly.render';
 
 class SyncOnly extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       autoRestartedForks: {},
     };
@@ -157,4 +158,20 @@ class SyncOnly extends React.Component {
   }
 }
 
-export default SyncOnly;
+const mapStateToProps = (state) => {
+  return {
+    SyncOnly: {
+      display: state.SyncOnly.display,
+      forks: state.SyncOnly.forks,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+    },
+    Interval: {
+      interval: state.Interval.interval,
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(SyncOnly);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import {
   fetchNewCacheData,
@@ -10,8 +11,8 @@ import Store from '../../../store';
 import WalletsBalanceRender from './walletsBalance.render';
 
 class WalletsBalance extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       currentAddress: null,
     };
@@ -187,5 +188,23 @@ class WalletsBalance extends React.Component {
     return null;
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+      cache: state.ActiveCoin.cache,
+      activeSection: state.ActiveCoin.activeSection,
+      activeAddress: state.ActiveCoin.activeAddress
+    },
+    Dashboard: {
+      progress: state.Dashboard.progress,
+    }
+  };
+ 
+};
 
-export default WalletsBalance;
+export default connect(mapStateToProps)(WalletsBalance);

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { basiliskConnection } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import WalletsBasiliskConnectionRender from './walletsBasiliskConnection.render';
 
 class WalletsBasiliskConnection extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.basiliskConnectionAction = this.basiliskConnectionAction.bind(this);
   }
 
@@ -33,4 +34,13 @@ class WalletsBasiliskConnection extends React.Component {
   }
 }
 
-export default WalletsBasiliskConnection;
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: {
+      basiliskConnection: state.Dashboard.basiliskConnection,
+      connectedNotaries: state.Dashboard.connectedNotaries,
+    }
+  };
+};
+
+export default connect(mapStateToProps)(WalletsBasiliskConnection);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import WalletsBasiliskRefreshRender from './walletsBasiliskRefresh.render';
 
 class WalletsBasiliskRefresh extends React.Component {
@@ -15,5 +16,11 @@ class WalletsBasiliskRefresh extends React.Component {
     return null;
   }
 }
-
+const mapStateToProps = (state) => {
-export default WalletsBasiliskRefresh;
+  return {
+    Dashboard: {
+      basiliskRefresh: state.Dashboard.basiliskRefresh,
+    }
+  };
+};
+export default connect(mapStateToProps)(WalletsBasiliskRefresh);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { secondsToString } from '../../../util/time';
 import { toggleViewCacheModal } from '../../../actions/actionCreators';
 import Store from '../../../store';
@@ -8,8 +9,8 @@ import WalletsCacheDataRender from './walletsCacheData.render';
 // TODO: refresh data render
 
 class WalletsCacheData extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.closeViewCacheModal = this.closeViewCacheModal.bind(this);
   }
 
@@ -183,5 +184,18 @@ class WalletsCacheData extends React.Component {
     }
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+      cache: state.ActiveCoin.cache,
+      notaries: state.ActiveCoin.notaries,
+    },
+    Dashboard: {
+      displayViewCacheModal: state.Dashboard.displayViewCacheModal,
+    }
+  };
+ 
+};
 
-export default WalletsCacheData;
+export default connect(mapStateToProps)(WalletsCacheData);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import { sortByDate } from '../../../util/sort';
 import { formatValue } from '../../../util/formatValue';
@@ -671,4 +672,34 @@ class WalletsData extends React.Component {
   }
 }
 
-export default WalletsData;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+      cache: state.ActiveCoin.cache,
+      activeSection: state.ActiveCoin.activeSection,
+      activeAddress: state.ActiveCoin.activeAddress,
+      lastSendToResponse: state.ActiveCoin.lastSendToResponse,
+      addresses: state.ActiveCoin.addresses,
+      txhistory: state.ActiveCoin.txhistory,
+      showTransactionInfo: state.ActiveCoin.showTransactionInfo,
+    },
+    Dashboard: {
+      activeHandle: state.Dashboard.activeHandle,
+      displayViewCacheModal: state.Dashboard.displayViewCacheModal,
+      basiliskConnection: state.Dashboard.basiliskConnection,
+      progress: state.Dashboard.progress,
+    },
+    Main: {
+      coins: state.Main.coins,
+    }
+
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsData);

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

@@ -192,10 +192,10 @@ export const WalletsDataRender = function() {
 
   return (
     <span>
-      <WalletsBasiliskRefresh {...this.props} />
+      <WalletsBasiliskRefresh />
-      <WalletsBasiliskConnection {...this.props} />
+      <WalletsBasiliskConnection />
-      <WalletsNotariesList {...this.props} />
+      <WalletsNotariesList />
-      <WalletsCacheData {...this.props} />
+      <WalletsCacheData />
       <div id="edexcoin_dashboardinfo">
         <div className="col-xs-12 margin-top-20 backround-gray">
           <div className="panel nav-tabs-horizontal">

react/src/components/dashboard/walletsInfo/walletsInfo.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import WalletsNativeInfoRender from './walletsInfo.render';
 import { toggleClaimInterestModal } from '../../../actions/actionCreators';
 import Store from '../../../store';
 
-class WalletsNativeInfo extends React.Component {
+class WalletsInfo extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.openClaimInterestModal = this.openClaimInterestModal.bind(this);
   }
 
@@ -25,4 +26,17 @@ class WalletsNativeInfo extends React.Component {
   }
 }
 
-export default WalletsNativeInfo;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      activeSection: state.ActiveCoin.activeSection,
+    },
+    Dashboard: {
+      progress: state.Dashboard.progress
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsInfo);

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

@@ -47,7 +47,7 @@ const WalletsInfoRender = function() {
               type="button"
               className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
               onClick={ () => this.openClaimInterestModal() }>{ translate('CLAIM_INTEREST.CLAIM_INTEREST') }</button>
-            <ClaimInterestModal {...this.props} />
+            <ClaimInterestModal />
           </div>
         }
       </div>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import WalletsNativeRender from './walletsNative.render';
 import { translate } from '../../../translate/translate';
 import { triggerToaster } from '../../../actions/actionCreators';
@@ -12,8 +13,8 @@ import io from 'socket.io-client';
 const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
 
 class WalletsNative extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       nativeOnly: Config.iguanaLessMode,
     };
@@ -73,4 +74,14 @@ class WalletsNative extends React.Component {
   }
 }
 
-export default WalletsNative;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsNative);

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

@@ -28,13 +28,13 @@ const WalletsNativeRender = function() {
           </ol>
         </div>
         <div className="page-content">
-          <WalletsProgress {...this.props} />
+          <WalletsProgress />
           <div className="row">
-            <WalletsBalance {...this.props} />
+            <WalletsBalance />
-            <ReceiveCoin {...this.props.ActiveCoin} />
+            <ReceiveCoin />
-            <WalletsData {...this.props} />
+            <WalletsData />
-            <WalletsNativeSend {...this.props} />
+            <WalletsNativeSend />
-            <WalletsInfo {...this.props} />
+            <WalletsInfo />
           </div>
         </div>
       </div>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import Config from '../../../config';
 import { translate } from '../../../translate/translate';
 import { secondsToString } from '../../../util/time';
@@ -444,4 +445,17 @@ class WalletsNativeSend extends React.Component {
   }
 }
 
-export default WalletsNativeSend;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      addresses: state.ActiveCoin.addresses,
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      opids: state.ActiveCoin.opids,
+      activeSection: state.ActiveCoin.activeSection,
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsNativeSend);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   copyCoinAddress,
   iguanaEdexBalance,
@@ -15,11 +16,8 @@ import {
 } from './walletsNav.render';
 
 class WalletsNav extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
-    this.state = {
-      nativeOnly: Config.iguanaLessMode,
-    };
     this.toggleSendReceiveCoinForms = this.toggleSendReceiveCoinForms.bind(this);
     this.toggleNativeWalletInfo = this.toggleNativeWalletInfo.bind(this);
     this.toggleNativeWalletTransactions = this.toggleNativeWalletTransactions.bind(this);
@@ -124,4 +122,22 @@ class WalletsNav extends React.Component {
   }
 }
 
-export default WalletsNav;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+      send: state.ActiveCoin.send,
+      receive: state.ActiveCoin.receive,
+      balance: state.ActiveCoin.balance,
+      cache: state.ActiveCoin.cache,
+      activeSection: state.ActiveCoin.activeSection,
+      activeAddress: state.ActiveCoin.activeAddress
+    },
+    ActiveHandle: state.Dashboard.activeHandle,
+    nativeOnly: Config.iguanaLessMode,
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsNav);

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

@@ -24,10 +24,10 @@ export const WalletsNavWithWalletRender = function() {
   return (
     <div>
       <div
-        className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40 page-header--native' : '20') }
+        className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.props.nativeOnly ? '40 page-header--native' : '20') }
         id="header-dashboard"
-        style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.state.nativeOnly ? '30px' : '0') }}>
+        style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.props.nativeOnly ? '30px' : '0') }}>
-        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : ' breadcrumb--native') }>
+        <ol className={ this.props.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : ' breadcrumb--native') }>
           <strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong>
           { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }
           <button

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import { displayNotariesModal } from '../../../actions/actionCreators';
 import Store from '../../../store';
@@ -9,8 +10,8 @@ import {
 } from './walletsNotariesList.render';
 
 class WalletsNotariesList extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.closeNotariesModal = this.closeNotariesModal.bind(this);
   }
 
@@ -58,5 +59,15 @@ class WalletsNotariesList extends React.Component {
     return null;
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+      displayNotariesModal: state.ActiveCoin.displayNotariesModal,
+      notaries: state.ActiveCoin.notaries,
+    }
+  };
+ 
+};
 
-export default WalletsNotariesList;
+export default connect(mapStateToProps)(WalletsNotariesList);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import {
   SyncErrorLongestChainRender,
@@ -12,8 +13,8 @@ import {
 } from './walletsProgress.render';
 
 class WalletsProgress extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.isFullySynced = this.isFullySynced.bind(this);
   }
 
@@ -229,5 +230,18 @@ class WalletsProgress extends React.Component {
     return null;
   }
 }
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: state.Dashboard,
+    Settings: {
+      debugLog: state.Settings.debugLog,
+    },
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+      coin: state.coin,
+    }
+  };
+ 
+};
 
-export default WalletsProgress;
+export default connect(mapStateToProps)(WalletsProgress);

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

@@ -1,12 +1,13 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { sortByDate } from '../../../util/sort';
 import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import WalletsTxInfoRender from './walletsTxInfo.render';
 
 class WalletsTxInfo extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       activeTab: 0,
     };
@@ -52,4 +53,18 @@ class WalletsTxInfo extends React.Component {
   }
 }
 
-export default WalletsTxInfo;
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+      txhistory: state.ActiveCoin.txhistory,
+      showTransactionInfo: state.ActiveCoin.showTransactionInfo,
+      activeSection: state.ActiveCoin.activeSection,
+      activeAddress: state.ActiveCoin.activeAddress,
+      showTransactionInfoTxIndex: state.ActiveCoin.showTransactionInfoTxIndex,
+    }
+  };
+ 
+};
+
+export default connect(mapStateToProps)(WalletsTxInfo);

react/src/components/login/login.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   toggleAddcoinModal,
   iguanaWalletPassphrase,
@@ -24,8 +25,8 @@ const IGUNA_ACTIVE_COINS_TIMEOUT = 10000;
 // TODO: remove duplicate activehandle and activecoins calls
 
 class Login extends React.Component {
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.state = {
       display: false,
       activeLoginSection: 'activateCoin',
@@ -386,4 +387,17 @@ class Login extends React.Component {
   }
 }
 
-export default Login;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    Dashboard: {
+      activeHandle: state.Dashboard.activeHandle,
+    },
+    Interval: {
+      interval: state.Interval.interval,
+    }
+  };
+
+};
+
+export default connect(mapStateToProps)(Login);

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

@@ -6,8 +6,7 @@ const LoginRender = function () {
   return (
     <div>
       <LoginSettingsModal
-        {...this.props}
+         section={ this.state.displayLoginSettingsDropdownSection } />
-        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">
@@ -61,14 +60,14 @@ const LoginRender = function () {
                 name="loginPassphrase"
                 onChange={ this.updateLoginPassPhraseInput }
                 onKeyDown={ (event) => this.handleKeydown(event) }
-                value={ this.state.loginPassphrase } />
+                value={ this.state.loginPassphrase || '' } />
               <textarea
                 className={ this.state.seedInputVisibility ? 'form-control' : 'hide' }
                 id="loginPassphrase"
                 name="loginPassphrase"
                 onChange={ this.updateLoginPassPhraseInput }
                 onKeyDown={ (event) => this.handleKeydown(event) }
-                value={ this.state.loginPassphrase }></textarea>
+                value={ this.state.loginPassphrase || '' }></textarea>
               <i
                 className={ 'seed-toggle fa fa-eye' +  (!this.state.seedInputVisibility ? '-slash' : '') }
                 onClick={ this.toggleSeedInputVisibility }></i>

react/src/components/main/main.js

@@ -69,7 +69,7 @@ class Main extends React.Component {
 
   isWalletUnlocked() {
     return (
-      <WalletMain {...this.props} />
+      <WalletMain />
     );
   }
 

react/src/components/main/walletMain.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import Toaster from '../toaster/toaster';
 import AddCoin from '../addcoin/addcoin';
 import Login from '../login/login';
@@ -11,15 +12,23 @@ class WalletMain extends React.Component {
     return (
       <div className="full-height">
         <input type="text" id="js-copytextarea" />
-        <SyncOnly {...this.props} />
+        <SyncOnly />
-        <Dashboard {...this.props} />
+        <Dashboard />
-        <AddCoin {...this.props} />
+        <AddCoin />
-        <Login {...this.props} />
+        <Login />
         <Toaster {...this.props.toaster} />
-        <Notifications {...this.props} />
+        <Notifications />
       </div>
     );
   }
 }
 
-export default WalletMain;
+const mapStateToProps = (state) => {
+  return {
+    toaster: state.toaster
+  };
+
+};
+
+export default connect(mapStateToProps)(WalletMain);
+