Wire up NodeDropdownComponent to use Redux actions and remove local state.

common/components/Header/components/NodeDropdownComponent.jsx

@@ -1,128 +1,59 @@
 import React, {Component} from 'react';
+import {nodeList} from 'reducers/config'
+import PropTypes from 'prop-types';
 
-const nodeList = [
-    {
-        'name': 'ETH',
-        'blockExplorerTX': 'https://etherscan.io/tx/[[txHash]]',
-        'blockExplorerAddr': 'https://etherscan.io/address/[[address]]',
-        // 'type': nodes.nodeTypes.ETH,
-        'eip155': true,
-        'chainId': 1,
-        // 'tokenList': require('./tokens/ethTokens.json'),
-        // 'abiList': require('./abiDefinitions/ethAbi.json'),
-        'estimateGas': true,
-        'service': 'MyEtherWallet',
-        // 'lib': new nodes.customNode('https://api.myetherapi.com/eth', '')
-    },
-    {
-        'name': 'ETH',
-        'blockExplorerTX': 'https://etherscan.io/tx/[[txHash]]',
-        'blockExplorerAddr': 'https://etherscan.io/address/[[address]]',
-        // 'type': nodes.nodeTypes.ETH,
-        'eip155': true,
-        'chainId': 1,
-        // 'tokenList': require('./tokens/ethTokens.json'),
-        // 'abiList': require('./abiDefinitions/ethAbi.json'),
-        'estimateGas': false,
-        'service': 'Etherscan.io',
-        // 'lib': require('./nodeHelpers/etherscan')
-    },
-    {
-        'name': 'Ropsten',
-        // 'type': nodes.nodeTypes.Ropsten,
-        'blockExplorerTX': 'https://ropsten.etherscan.io/tx/[[txHash]]',
-        'blockExplorerAddr': 'https://ropsten.etherscan.io/address/[[address]]',
-        'eip155': true,
-        'chainId': 3,
-        // 'tokenList': require('./tokens/ropstenTokens.json'),
-        // 'abiList': require('./abiDefinitions/ropstenAbi.json'),
-        'estimateGas': false,
-        'service': 'MyEtherWallet',
-        // 'lib': new nodes.customNode('https://api.myetherapi.com/rop', '')
-    },
-    {
-        'name': 'Kovan',
-        // 'type': nodes.nodeTypes.Kovan,
-        'blockExplorerTX': 'https://kovan.etherscan.io/tx/[[txHash]]',
-        'blockExplorerAddr': 'https://kovan.etherscan.io/address/[[address]]',
-        'eip155': true,
-        'chainId': 42,
-        // 'tokenList': require('./tokens/kovanTokens.json'),
-        // 'abiList': require('./abiDefinitions/kovanAbi.json'),
-        'estimateGas': false,
-        'service': 'Etherscan.io',
-        // 'lib': require('./nodeHelpers/etherscanKov')
-    },
-    {
-        'name': 'ETC',
-        'blockExplorerTX': 'https://gastracker.io/tx/[[txHash]]',
-        'blockExplorerAddr': 'https://gastracker.io/addr/[[address]]',
-        // 'type': nodes.nodeTypes.ETC,
-        'eip155': true,
-        'chainId': 61,
-        // 'tokenList': require('./tokens/etcTokens.json'),
-        // 'abiList': require('./abiDefinitions/etcAbi.json'),
-        'estimateGas': false,
-        'service': 'Epool.io',
-        // 'lib': new nodes.customNode('https://mewapi.epool.io', '')
-    }
-]
 
 export default class NodeDropdownComponent extends Component {
     constructor(props) {
         super(props);
+    }
 
-        this.state = {
+    static propTypes = {
-            nodeToggle: false,
+        changeNode: PropTypes.func,
-            nodeSelection: 0
+        toggleNodeDropdown: PropTypes.func,
-        }
+        nodeSelection: PropTypes.number,
-    }
+        nodeToggle: PropTypes.bool
+    };
 
     customNodeModalOpen() {
 
     }
 
-    changeNode(i) {
-        let nextState = this.state;
-        nextState["nodeSelection"] = i;
-        nextState['nodeToggle'] = false;
-        this.setState(nextState);
-    }
-
-    nodeToggle() {
-        let nextState = this.state;
-        nextState['nodeToggle'] = !nextState['nodeToggle'];
-        this.setState(nextState)
-    }
-
     render() {
+        let {
+            changeNode,
+            toggleNodeDropdown,
+            nodeSelection,
+            nodeToggle
+        } = this.props;
+
         return (
             <span className="dropdown">
               <a tabIndex="0"
                  aria-haspopup="true"
                  aria-label="change node. current node ETH node by MyEtherWallet"
-                 className="dropdown-toggle" onClick={() => this.nodeToggle()}>
+                 className="dropdown-toggle" onClick={() => toggleNodeDropdown()}>
-                  {nodeList[this.state.nodeSelection].name}
+                  {nodeList[nodeSelection].name}
-                  <small>{' '} ({nodeList[this.state.nodeSelection].service})</small>
+                  <small>{' '} ({nodeList[nodeSelection].service})</small>
                   <i className="caret"/>
               </a>
                 {
-                    this.state.nodeToggle &&
+                    nodeToggle &&
                     <ul className="dropdown-menu">
                         {nodeList.map((object, i) => {
                             return (
-                                <li key={i} onClick={() => this.changeNode(i)}>
+                                <li key={i} onClick={() => changeNode(i)}>
                                     <a>
                                         {object.name}
-                                        <small className={i === this.state.nodeSelection ? 'active' : ''}>
+                                        <small className={i === nodeSelection ? 'active' : ''}>
-                                            ({object.service})
+                                            {' '}({object.service})
                                         </small>
                                     </a>
                                 </li>
                             )
                         })}
                         <li>
-                            <a onClick={this.customNodeModalOpen()}>
+                            <a onClick={() => this.customNodeModalOpen()}>
                                 Add Custom Node
                             </a>
                         </li>