From 2fc8cf4116bf8022a4424e5b2367a2483c0f00ea Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Thu, 13 Apr 2017 20:25:28 -0500
Subject: [PATCH] Create NodeDropdownComponent with working, adjustable local
 state.

---
 .../components/NodeDropdownComponent.jsx      | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 common/components/Header/components/NodeDropdownComponent.jsx

diff --git a/common/components/Header/components/NodeDropdownComponent.jsx b/common/components/Header/components/NodeDropdownComponent.jsx
new file mode 100644
index 00000000..6c9f3c86
--- /dev/null
+++ b/common/components/Header/components/NodeDropdownComponent.jsx
@@ -0,0 +1,134 @@
+import React, {Component} from 'react';
+
+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 = {
+            nodeToggle: false,
+            nodeSelection: 0
+        }
+    }
+
+    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() {
+        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()}>
+                  {nodeList[this.state.nodeSelection].name}
+                  <small>{' '} ({nodeList[this.state.nodeSelection].service})</small>
+                  <i className="caret"/>
+              </a>
+                {
+                    this.state.nodeToggle &&
+                    <ul className="dropdown-menu">
+                        {nodeList.map((object, i) => {
+                            return (
+                                <li key={i} onClick={() => this.changeNode(i)}>
+                                    <a>
+                                        {object.name}
+                                        <small className={i === this.state.nodeSelection ? 'active' : ''}>
+                                            ({object.service})
+                                        </small>
+                                    </a>
+                                </li>
+                            )
+                        })}
+                        <li>
+                            <a onClick={this.customNodeModalOpen()}>
+                                Add Custom Node
+                            </a>
+                        </li>
+                    </ul>
+                }
+            </span>
+        )
+    }
+}