Refactor wallestnav to use connect & mapstatetoprops

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

@@ -27,7 +27,7 @@ const DashboardRender = function() {
         <CoindDownModal {...this.props} />
         <div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
           <CoinTile {...this.props} />
-          <WalletsNav {...this.props} />
+          <WalletsNav />
           { !this.isNativeMode() && <WalletsProgress {...this.props} /> }
           { !this.isNativeMode() && <WalletsBalance {...this.props} />}
           <SendCoin {...this.props} />

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

@@ -13,18 +13,17 @@ import {
   WalletsNavNoWalletRender,
   WalletsNavWithWalletRender
 } from './walletsNav.render';
+import { connect } from 'react-redux';
 
 class WalletsNav extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      nativeOnly: Config.iguanaLessMode,
-    };
+  constructor() {
+    super();
     this.toggleSendReceiveCoinForms = this.toggleSendReceiveCoinForms.bind(this);
+
   }
 
   componentWillMount() {
-    Store.dispatch(iguanaEdexBalance(this.props.ActiveCoin.coin));
+    Store.dispatch(iguanaEdexBalance(this.props.activeCoin.coin));
   }
 
   copyMyAddress(address) {
@@ -32,10 +31,10 @@ class WalletsNav extends React.Component {
   }
 
   toggleSendReceiveCoinForms() {
-    if (this.props.ActiveCoin.mode === 'native') {
+    if (this.props.activeCoin.mode === 'native') {
       Store.dispatch(
         toggleDashboardActiveSection(
-          this.props.ActiveCoin.nativeActiveSection === 'settings' ? 'default' : 'settings'
+          this.props.activeCoin.nativeActiveSection === 'settings' ? 'default' : 'settings'
         )
       );
     } else {
@@ -44,10 +43,10 @@ class WalletsNav extends React.Component {
   }
 
   toggleSendCoinForm(display) {
-    if (this.props.ActiveCoin.mode === 'native') {
+    if (this.props.activeCoin.mode === 'native') {
       Store.dispatch(
         toggleDashboardActiveSection(
-          this.props.ActiveCoin.nativeActiveSection === 'send' ? 'default' : 'send'
+          this.props.activeCoin.nativeActiveSection === 'send' ? 'default' : 'send'
         )
       );
     } else {
@@ -56,10 +55,10 @@ class WalletsNav extends React.Component {
   }
 
   toggleReceiveCoinForm(display) {
-    if (this.props.ActiveCoin.mode === 'native') {
+    if (this.props.activeCoin.mode === 'native') {
       Store.dispatch(
         toggleDashboardActiveSection(
-          this.props.ActiveCoin.nativeActiveSection === 'receive' ? 'default' : 'receive'
+          this.props.activeCoin.nativeActiveSection === 'receive' ? 'default' : 'receive'
         )
       );
     } else {
@@ -69,8 +68,8 @@ class WalletsNav extends React.Component {
 
   render() {
     if (this.props &&
-        this.props.ActiveCoin &&
-        !this.props.ActiveCoin.coin) {
+        this.props.activeCoin &&
+        !this.props.activeCoin.coin) {
       return WalletsNavNoWalletRender.call(this);
     }
 
@@ -78,4 +77,14 @@ class WalletsNav extends React.Component {
   }
 }
 
-export default WalletsNav;
+const mapStateToProps = (state) => {
+  return {
+    activeCoin: state.ActiveCoin,
+    activeHandle: state.Dashboard.activeHandle,
+    activeSection: state.Dashboard.activeSection,
+    appSettings: state.Settings.appSettings
+  };
+};
+
+export default connect(mapStateToProps)(WalletsNav);
+

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

@@ -24,15 +24,15 @@ export const WalletsNavWithWalletRender = function() {
   return (
     <div>
       <div
-        className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40' : '20') }
+        className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.props.appSettings.iguanaLess ? '40' : '20') }
         id="header-dashboard"
-        style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}>
-        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' }>
-          <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] : '-' } 
+        style={{ marginBottom: this.props.activeCoin.mode === 'basilisk' ? '30px' : '0' }}>
+        <ol className={ this.props.appSettings.iguanaLess ? 'hide' : 'breadcrumb' }>
+          <strong>{ translate('INDEX.MY') } { this.props.activeCoin ? this.props.activeCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong> 
+          { this.props.activeHandle ? this.props.activeHandle[this.props.activeCoin.coin] : '-' } 
           <button
             className="btn btn-default btn-xs clipboard-edexaddr"
-            onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }>
+            onClick={ () => this.copyMyAddress(this.props.activeHandle[this.props.activeCoin.coin]) }>
             <i className="icon wb-copy"></i> { translate('INDEX.COPY') }
           </button>
         </ol>
@@ -42,18 +42,18 @@ export const WalletsNavWithWalletRender = function() {
               type="button"
               className="btn btn-dark waves-effect waves-light"
               onClick={ this.toggleSendReceiveCoinForms }>
-              <i className="icon md-view-dashboard"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : translate('INDEX.WALLET_INFO') }
+              <i className="icon md-view-dashboard"></i> { this.props.activeCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : translate('INDEX.WALLET_INFO') }
             </button>
             <button
               type="button"
               className="btn btn-primary waves-effect waves-light"
-              onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }>
+              onClick={ () => this.toggleSendCoinForm(!this.props.activeCoin.send) }>
               <i className="icon fa-send"></i> { translate('INDEX.SEND') }
             </button>
             <button
               type="button"
               className="btn btn-info waves-effect waves-light"
-              onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
+              onClick={ () => this.toggleReceiveCoinForm(!this.props.activeCoin.receive) }>
               <i className="icon fa-inbox"></i> { translate('INDEX.RECEIVE') }
             </button>
           </div>