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

Refactor wallestnav to use connect & mapstatetoprops
8 years ago · 3dc514a1f4
40 changed files with 539 additions and 152 deletions
--- a/react/src/components/addcoin/addcoin.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/addcoin/addcoinOptionsCrypto.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/atomic/atomic.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/claimInterestModal/claimInterestModal.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/coinTile/coinTile.js
+++ b/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) {
-    super(props);
-    this.state = {
-    };
+  constructor() {
+    super();
    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 &&
-        allCoins) {
+    if (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;
--- a/react/src/components/dashboard/coinTile/coinTileItem.js
+++ b/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) {
-    super(props);
-    this.state = {
-    };
+  constructor() {
+    super();
  }

  // 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);
--- a/react/src/components/dashboard/coindDownModal/coindDownModal.js
+++ b/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) {
-    super(props);
+  constructor() {
+    super();
    this.state = {
      display: false,
      debugLogCrash: null,
@ -18,20 +19,11 @@ class CoindDownModal extends React.Component {
    Store.dispatch(toggleCoindDownModal(false));
  }

-  componentWillReceiveProps(props) {
-    const coindDownModalProps = props ? props.Dashboard : null;
-
-    if (coindDownModalProps &&
-        coindDownModalProps.displayCoindDownModal !== this.state.display) {
+  componentWillReceiveProps(nextProps) {
+    if (this.props.displayCoindDownModal !== nextProps.displayCoindDownModal) {
      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;
  }
 }
-
-export default CoindDownModal;
+const mapStateToProps = (state) => {
+  return {
+    displayCoindDownModal: state.Dashboard.displayCoindDownModal,
+    debugLog: state.Settings.debugLog
+  };
+ 
+};
+
+export default connect(mapStateToProps)(CoindDownModal);
--- a/react/src/components/dashboard/coindDownModal/coindDownModal.render.js
+++ b/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"
--- a/react/src/components/dashboard/jumblr/jumblr.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/jumblr/jumblr.render.js
+++ b/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>
--- a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js
+++ b/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);
--- a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js
+++ b/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' &&
--- a/react/src/components/dashboard/main/dashboard.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/main/dashboard.render.js
+++ b/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} />
-        <CoindDownModal {...this.props} />
+        <Navbar />
+        <CoindDownModal />
        <div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
-          <CoinTile {...this.props} />
-          <WalletsNav {...this.props} />
-          { !this.isNativeMode() && <WalletsProgress {...this.props} /> }
-          { !this.isNativeMode() && <WalletsBalance {...this.props} />}
-          <SendCoin {...this.props} />
-          { !this.isNativeMode() && <ReceiveCoin {...this.props.ActiveCoin} /> }
-          { !this.isNativeMode() && <WalletsData {...this.props} /> }
-          <WalletsTxInfo {...this.props} />
-          <WalletsNative {...this.props} />
+          <CoinTile />
+          <WalletsNav />
+          { !this.isNativeMode() && <WalletsProgress /> }
+          { !this.isNativeMode() && <WalletsBalance />}
+          <SendCoin />
+          { !this.isNativeMode() && <ReceiveCoin /> }
+          { !this.isNativeMode() && <WalletsData /> }
+          <WalletsTxInfo />
+          <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>
--- a/react/src/components/dashboard/navbar/navbar.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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;
--- a/react/src/components/dashboard/notifications/notifications.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
+
--- a/react/src/components/dashboard/receiveCoin/receiveCoin.js
+++ b/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) {
-    super(props);
+  constructor() {
+    super();

    this.state = {
      openDropMenu: false,
@ -216,5 +217,18 @@ class ReceiveCoin extends React.Component {
    return null;
  }
 }
-
-export default ReceiveCoin;
+const mapStateToProps = (state) => {
+  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);
--- a/react/src/components/dashboard/sendCoin/sendCoin.js
+++ b/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);
--- a/react/src/components/dashboard/settings/settings.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/syncOnly/syncOnly.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsBalance/walletsBalance.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsBasiliskConnection/walletsBasiliskConnection.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsBasiliskRefresh/walletsBasiliskRefresh.js
+++ b/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;
  }
 }
-
-export default WalletsBasiliskRefresh;
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: {
+      basiliskRefresh: state.Dashboard.basiliskRefresh,
+    }
+  };
+};
+export default connect(mapStateToProps)(WalletsBasiliskRefresh);
--- a/react/src/components/dashboard/walletsCacheData/walletsCacheData.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/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);
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@ -192,10 +192,10 @@ export const WalletsDataRender = function() {

  return (
    <span>
-      <WalletsBasiliskRefresh {...this.props} />
-      <WalletsBasiliskConnection {...this.props} />
-      <WalletsNotariesList {...this.props} />
-      <WalletsCacheData {...this.props} />
+      <WalletsBasiliskRefresh />
+      <WalletsBasiliskConnection />
+      <WalletsNotariesList />
+      <WalletsCacheData />
      <div id="edexcoin_dashboardinfo">
        <div className="col-xs-12 margin-top-20 backround-gray">
          <div className="panel nav-tabs-horizontal">
--- a/react/src/components/dashboard/walletsInfo/walletsInfo.js
+++ b/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 {
-  constructor(props) {
-    super(props);
+class WalletsInfo extends React.Component {
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsInfo/walletsInfo.render.js
+++ b/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>
--- a/react/src/components/dashboard/walletsNative/walletsNative.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsNative/walletsNative.render.js
+++ b/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} />
-            <ReceiveCoin {...this.props.ActiveCoin} />
-            <WalletsData {...this.props} />
-            <WalletsNativeSend {...this.props} />
-            <WalletsInfo {...this.props} />
+            <WalletsBalance />
+            <ReceiveCoin />
+            <WalletsData />
+            <WalletsNativeSend />
+            <WalletsInfo />
          </div>
        </div>
      </div>
--- a/react/src/components/dashboard/walletsNativeSend/walletsNativeSend.js
+++ b/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);
--- a/react/src/components/dashboard/walletsNav/walletsNav.js
+++ b/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) {
-    super(props);
-    this.state = {
-      nativeOnly: Config.iguanaLessMode,
-    };
+  constructor() {
+    super();
    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);
--- a/react/src/components/dashboard/walletsNav/walletsNav.render.js
+++ b/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') }}>
-        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : ' breadcrumb--native') }>
+        style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.props.nativeOnly ? '30px' : '0') }}>
+        <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
--- a/react/src/components/dashboard/walletsNotariesList/walletsNotariesList.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsProgress/walletsProgress.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/login/login.js
+++ b/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) {
-    super(props);
+  constructor() {
+    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);
--- a/react/src/components/login/login.render.js
+++ b/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>
--- a/react/src/components/main/main.js
+++ b/react/src/components/main/main.js
@ -69,7 +69,7 @@ class Main extends React.Component {

  isWalletUnlocked() {
    return (
-      <WalletMain {...this.props} />
+      <WalletMain />
    );
  }

--- a/react/src/components/main/walletMain.js
+++ b/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} />
-        <Dashboard {...this.props} />
-        <AddCoin {...this.props} />
-        <Login {...this.props} />
+        <SyncOnly />
+        <Dashboard />
+        <AddCoin />
+        <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);
+