Add Voter Status to Network Configuration Tooltip (Popout) (#2471)

* update files and tests

* fix flow

* fix flow again

* update with WarningIcon

* update translations

* update Tooltip container size

* fix WarningIcon color

* update tests

* fix variable names and vertical alignment

* refactor and add tests

* cleanup

__tests__/components/NetworkConfigurationTooltip.test.js

@@ -1,22 +1,18 @@
 import React from 'react'
 import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux'
-import { shallow, mount } from 'enzyme'
+import { mount } from 'enzyme'
 import thunk from 'redux-thunk'
 import { progressValues } from 'spunky'
 import { MemoryRouter } from 'react-router-dom'
-import { cloneDeep } from 'lodash-es'
 
-import { createStore, provideStore, provideState } from '../testHelpers'
-import Sidebar from '../../app/containers/App/Sidebar'
 import {
   THEMES,
   EXPLORERS,
-  MAIN_NETWORK_DEPRECATED_LABEL,
   MAIN_NETWORK_LABEL,
   DEFAULT_LANGUAGE,
 } from '../../app/core/constants'
-import NetworkConfigurationTooltip from '../../app/components/NetworkConfigurationTooltip'
+import NetworkConfigurationTooltip, { renderNode } from '../../app/components/NetworkConfigurationTooltip'
 import IntlWrapper from '../../app/components/Root/IntlWrapper'
 
 const { LOADED, LOADING } = progressValues
@@ -79,6 +75,27 @@ const networkConfigTooltipSetup = (
   }
 }
 
+const renderNodeSetup = (
+  node: Array<any>,
+  state = initialState,
+  shallowRender = true,
+) => {
+  const store = configureStore([thunk])(state)
+  const wrapper = mount(
+    <Provider store={store}>
+      <IntlWrapper lang="en">
+        <MemoryRouter initialEntries={['/']} keyLength={0}>
+          <div>{renderNode(node)}</div>
+        </MemoryRouter>
+      </IntlWrapper>
+    </Provider>,
+  )
+  return {
+    store,
+    wrapper,
+  }
+}
+
 describe('Sidebar', () => {
   test('renders without crashing', () => {
     const { wrapper } = networkConfigTooltipSetup()
@@ -91,3 +108,30 @@ describe('Sidebar', () => {
     expect(wrapper.text().includes(TEST_ADDRESS)).toBe(true)
   })
 })
+
+describe('renderNode with no vote', () => {
+  test('renders warningicon with no vote', () => {
+    const node = []
+    const { wrapper } = renderNodeSetup(node)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
+
+describe('renderNode with a vote', () => {
+  test('renders warningicon with no vote', () => {
+    const node = ['test node', 1]
+    const { wrapper } = renderNodeSetup(node)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.text().includes('test node #1')).toBe(true)
+  })
+})
+
+describe('renderNode with a node that has fallen out of top 21', () => {
+  test('renders warningicon with no vote', () => {
+    const node = ['test node', 22]
+    const { wrapper } = renderNodeSetup(node)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.text().includes('test node')).toBe(true)
+    expect(wrapper.text().includes('#22')).toBe(false)
+  })
+})

__tests__/components/__snapshots__/NetworkSwitch.test.js.snap

@@ -142,6 +142,7 @@ exports[`NetworkSwitch renders without crashing 1`] = `
       "networkConfigTooltipAddress": "ADDRESS:",
       "networkConfigTooltipPublicKey": "PUBLIC KEY:",
       "networkConfigTooltipUpdateSettings": "Update Settings",
+      "networkConfigTooltipVotedNode": "VOTE CAST FOR:",
       "networkSettingsAutomatic": "AUTOMATIC",
       "networkSettingsCurrentLabel": "CURRENT NETWORK",
       "networkSettingsExplorerLabel": "BLOCK EXPLORER",

__tests__/components/__snapshots__/News.test.js.snap

@@ -160,6 +160,7 @@ exports[`News renders without crashing 1`] = `
             "networkConfigTooltipAddress": "ADDRESS:",
             "networkConfigTooltipPublicKey": "PUBLIC KEY:",
             "networkConfigTooltipUpdateSettings": "Update Settings",
+            "networkConfigTooltipVotedNode": "VOTE CAST FOR:",
             "networkSettingsAutomatic": "AUTOMATIC",
             "networkSettingsCurrentLabel": "CURRENT NETWORK",
             "networkSettingsExplorerLabel": "BLOCK EXPLORER",

__tests__/components/__snapshots__/Sidebar.test.js.snap

@@ -160,6 +160,7 @@ exports[`Sidebar renders without crashing 1`] = `
             "networkConfigTooltipAddress": "ADDRESS:",
             "networkConfigTooltipPublicKey": "PUBLIC KEY:",
             "networkConfigTooltipUpdateSettings": "Update Settings",
+            "networkConfigTooltipVotedNode": "VOTE CAST FOR:",
             "networkSettingsAutomatic": "AUTOMATIC",
             "networkSettingsCurrentLabel": "CURRENT NETWORK",
             "networkSettingsExplorerLabel": "BLOCK EXPLORER",

app/components/NetworkConfigurationTooltip/NetworkConfigurationTooltip.jsx

@@ -1,8 +1,9 @@
 // @flow
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import classNames from 'classnames'
 import { HashRouter, Link } from 'react-router-dom'
 import { IntlShape } from 'react-intl'
+import { NeoRest } from '@cityofzion/dora-ts/dist/api'
 
 import { ROUTES } from '../../core/constants'
 import SettingsItem from '../Settings/SettingsItem'
@@ -17,6 +18,7 @@ import CogIcon from '../../assets/icons/cog-icon.svg'
 import networkConfigStyles from '../../containers/NetworkConfiguration/NetworkConfiguration.scss'
 import settingsStyles from '../../containers/Settings/Settings.scss'
 import styles from './NetworkConfigurationTooltip.scss'
+import WarningIcon from '../../assets/icons/warning.svg'
 
 type Props = {
   address: string,
@@ -29,101 +31,153 @@ type Props = {
   chain: string,
 }
 
-export default class NetworkConfigurationTooltip extends React.Component<
-  Props,
-> {
-  render() {
-    const { address, publicKey, theme, intl } = this.props
+export function renderNode(node: Array<any>) {
+  if (node.length === 2) {
+    if (node[1] > 21) {
+      return (
+        <div className={styles.votedNode}>
+          {node[0]} <WarningIcon className={styles.warningIcon} />
+        </div>
+      )
+    }
     return (
-      <section
-        id="network-config-tooltip"
-        style={themes[theme]}
-        className={classNames(
-          settingsStyles.settingsItemsContainer,
-          networkConfigStyles.networkItemsContainer,
-          styles.tooltipContainer,
-        )}
-      >
-        <HashRouter>
-          <div className={settingsStyles.innerContainer}>
-            <div className={styles.addressInfo}>
+      <div className={styles.votedNode}>
+        {node[0]} #{node[1]}
+      </div>
+    )
+  }
+  return (
+    <div className={styles.votedNode}>
+      <WarningIcon className={styles.warningIcon} />
+    </div>
+  )
+}
+
+export default function NetworkConfigurationTooltip({
+  net,
+  address,
+  theme,
+  intl,
+  publicKey,
+  selectedNode,
+  explorer,
+  chain,
+}: Props = {}) {
+  const [node, setNode] = useState([])
+
+  useEffect(() => {
+    const getVotedNode = async () => {
+      const votedNode = []
+      const network = net === 'MainNet' ? 'mainnet' : 'testnet'
+      const candidateResponse = await NeoRest.voter(address, network)
+      const selectednode = candidateResponse.candidate
+      votedNode.push(selectednode)
+
+      const comitteeResponse = await NeoRest.committee(network)
+      for (const item of comitteeResponse) {
+        if (item.name === selectednode) {
+          votedNode.push(comitteeResponse.indexOf(item) + 1)
+          break
+        }
+      }
+      setNode(votedNode)
+    }
+
+    getVotedNode().catch(console.error)
+  }, [])
+
+  return (
+    <section
+      id="network-config-tooltip"
+      style={themes[theme]}
+      className={classNames(
+        settingsStyles.settingsItemsContainer,
+        networkConfigStyles.networkItemsContainer,
+        styles.tooltipContainer,
+      )}
+    >
+      <HashRouter>
+        <div className={settingsStyles.innerContainer}>
+          <div className={styles.addressInfo}>
+            <span>
+              {intl.formatMessage({
+                id: 'networkConfigTooltipAddress',
+              })}
+            </span>
+            <div className={styles.addressLink}> {address}</div>
+          </div>
+          <div className={styles.votedNodeInfo}>
+            <span>
+              {intl.formatMessage({
+                id: 'networkConfigTooltipVotedNode',
+              })}
+            </span>
+            {renderNode(node)}
+          </div>
+          {publicKey && (
+            <div className={styles.publicKeyInfo}>
               <span>
                 {intl.formatMessage({
-                  id: 'networkConfigTooltipAddress',
+                  id: 'networkConfigTooltipPublicKey',
                 })}
               </span>
-              <div className={styles.addressLink}> {address}</div>
+              <div className={styles.publicKey}> {publicKey}</div>
             </div>
-            {publicKey && (
-              <div className={styles.publicKeyInfo}>
-                <span>
-                  {intl.formatMessage({
-                    id: 'networkConfigTooltipPublicKey',
-                  })}
-                </span>
-                <div className={styles.publicKey}> {publicKey}</div>
-              </div>
-            )}
+          )}
 
-            <SettingsLink
-              to={ROUTES.NODE_SELECT}
-              label={this.props.selectedNode || 'AUTOMATIC'}
-              renderIcon={() => <NodeSelectIcon />}
-              title={intl.formatMessage({
-                id: 'networkSettingsNodeSelectLabel',
-              })}
-              tooltip
-              noBorderBottom
-              onClick={() => undefined}
-            />
-            <div className={styles.tooltipItemBorder} />
-            <SettingsItem
-              renderIcon={() => <BlockExplorerIcon />}
-              title={intl.formatMessage({ id: 'networkSettingsExplorerLabel' })}
-              tooltip
-              noBorderBottom
-            >
-              <div className={settingsStyles.settingsSelectContainer}>
-                <div className={styles.configLabel}>
-                  {this.props.explorer.toUpperCase()}
-                </div>
-              </div>
-            </SettingsItem>
+          <SettingsLink
+            to={ROUTES.NODE_SELECT}
+            label={selectedNode || 'AUTOMATIC'}
+            renderIcon={() => <NodeSelectIcon />}
+            title={intl.formatMessage({
+              id: 'networkSettingsNodeSelectLabel',
+            })}
+            tooltip
+            noBorderBottom
+            onClick={() => undefined}
+          />
+          <div className={styles.tooltipItemBorder} />
+          <SettingsItem
+            renderIcon={() => <BlockExplorerIcon />}
+            title={intl.formatMessage({ id: 'networkSettingsExplorerLabel' })}
+            tooltip
+            noBorderBottom
+          >
+            <div className={settingsStyles.settingsSelectContainer}>
+              <div className={styles.configLabel}>{explorer.toUpperCase()}</div>
+            </div>
+          </SettingsItem>
 
-            <div className={styles.tooltipItemBorder} />
+          <div className={styles.tooltipItemBorder} />
 
-            <SettingsItem
-              renderIcon={() => <NeoLogo />}
-              title={intl.formatMessage({ id: 'networkSettingsCurrentLabel' })}
-              tooltip
-              noBorderBottom
-            >
-              <div className={networkConfigStyles.settingsSelectContainer}>
-                <div className={styles.configLabel}>
-                  {findNetworkByDeprecatedLabel(
-                    this.props.net,
-                    this.props.chain,
-                  ).label.toUpperCase()}
-                </div>
+          <SettingsItem
+            renderIcon={() => <NeoLogo />}
+            title={intl.formatMessage({ id: 'networkSettingsCurrentLabel' })}
+            tooltip
+            noBorderBottom
+          >
+            <div className={networkConfigStyles.settingsSelectContainer}>
+              <div className={styles.configLabel}>
+                {findNetworkByDeprecatedLabel(net, chain).label.toUpperCase()}
               </div>
-            </SettingsItem>
-            <div className={styles.tooltipItemBorder} />
-            <div className={styles.buttonContainer}>
-              <Link to={ROUTES.NETWORK_CONFIGURATION}>
-                <Button
-                  shouldCenterButtonLabelText
-                  elevated
-                  renderIcon={() => <CogIcon />}
-                >
-                  {intl.formatMessage({
-                    id: 'networkConfigTooltipUpdateSettings',
-                  })}
-                </Button>
-              </Link>
             </div>
+          </SettingsItem>
+          <div className={styles.tooltipItemBorder} />
+          <div className={styles.buttonContainer}>
+            <Link to={ROUTES.NETWORK_CONFIGURATION}>
+              <Button
+                shouldCenterButtonLabelText
+                elevated
+                renderIcon={() => <CogIcon />}
+              >
+                {intl.formatMessage({
+                  id: 'networkConfigTooltipUpdateSettings',
+                })}
+              </Button>
+            </Link>
           </div>
-        </HashRouter>
-      </section>
-    )
-  }
+        </div>
+      </HashRouter>
+    </section>
+  )
 }