Display current NEO and GAS prices (#331)

* Display current NEO and GAS prices

* Better testing

* Show NEO/GAS prices review updates

* Remove unused import

__tests__/components/PriceDisplay.test.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import PriceDisplay from '../../app/components/PriceDisplay'
+
+describe('PriceDisplay', () => {
+  test('renders and shows prices', (done) => {
+    // Full mount (not shallow) so the snapshot will contain the prices in the rendered html.
+    const wrapper = mount(<PriceDisplay neoPrice={25.48} gasPrice={18.10} />)
+    expect(wrapper).toMatchSnapshot()
+    done()
+  })
+})

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PriceDisplay renders and shows prices 1`] = `
+<PriceDisplay
+  gasPrice={18.1}
+  neoPrice={25.48}
+>
+  <div
+    className="container"
+  >
+    <span
+      className="neoPriceDisplay"
+      id="neoPrice"
+    >
+      <span
+        className="label"
+      >
+        NEO
+      </span>
+      <span
+        className="price price"
+      >
+        $
+        25.48
+      </span>
+    </span>
+    <span
+      id="gasPrice"
+    >
+      <span
+        className="label"
+      >
+        GAS
+      </span>
+      <span
+        className="price price"
+      >
+        $
+        18.10
+      </span>
+    </span>
+  </div>
+</PriceDisplay>
+`;

app/components/PriceDisplay/PriceDisplay.jsx

@@ -0,0 +1,38 @@
+// @flow
+import React from 'react'
+import { formatFiat } from '../../core/formatters'
+import styles from './PriceDisplay.scss'
+import classNames from 'classnames'
+
+type Props = {
+  neoPrice: number,
+  gasPrice: number
+}
+
+const PriceDisplay = ({ neoPrice, gasPrice }: Props) => {
+  let neoDisplayPrice = '-'
+  let gasDisplayPrice = '-'
+
+  if (neoPrice) {
+    neoDisplayPrice = formatFiat(neoPrice)
+  }
+
+  if (gasPrice) {
+    gasDisplayPrice = formatFiat(gasPrice)
+  }
+
+  return (
+    <div className={styles.container}>
+      <span id='neoPrice' className={styles.neoPriceDisplay}>
+        <span className={styles.label}>NEO</span>
+        <span className={classNames('price', styles.price)}>${neoDisplayPrice}</span>
+      </span>
+      <span id='gasPrice'>
+        <span className={styles.label}>GAS</span>
+        <span className={classNames('price', styles.price)}>${gasDisplayPrice}</span>
+      </span>
+    </div>
+  )
+}
+
+export default PriceDisplay

app/components/PriceDisplay/PriceDisplay.scss

@@ -0,0 +1,24 @@
+@import '../../styles/variables';
+
+.container {
+    position: absolute;
+    font-size: .8em;
+    opacity: 0.6;
+    right: 463px;
+    top: 13px;
+}
+
+.label {
+    opacity: .6;
+    margin-right: 4px;
+}
+
+.price {
+    color: $thin-text-color;
+    opacity: .8;
+    cursor: pointer;
+}
+
+.neoPriceDisplay {
+    padding-right: 38px
+}

app/components/PriceDisplay/index.js

@@ -0,0 +1 @@
+export { default } from './PriceDisplay'

app/containers/Dashboard/Dashboard.jsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import SplitPane from 'react-split-pane'
 import FaArrowUpward from 'react-icons/lib/fa/arrow-circle-up'
 import NetworkSwitch from '../NetworkSwitch'
+import PriceDisplay from '../../components/PriceDisplay'
 import WalletInfo from '../WalletInfo'
 import TransactionHistory from '../TransactionHistory'
 import Logout from '../../components/Logout'
@@ -19,6 +20,8 @@ type Props = {
   blockHeight: number,
   net: string,
   address: string,
+  neoPrice: number,
+  gasPrice: number,
   togglePane: Function,
   logout: Function,
 }
@@ -31,7 +34,7 @@ export default class Dashboard extends Component<Props> {
   }
 
   render () {
-    const { sendPane, confirmPane, blockHeight, togglePane, logout } = this.props
+    const { sendPane, confirmPane, blockHeight, togglePane, logout, neoPrice, gasPrice } = this.props
     let sendPaneClosed
     if (sendPane === true) {
       sendPaneClosed = '0%'
@@ -54,6 +57,7 @@ export default class Dashboard extends Component<Props> {
             <div className={styles.title}>
               <img src={logo} width='60px' />
             </div>
+            <PriceDisplay neoPrice={neoPrice} gasPrice={gasPrice} />
             <div className={styles.version}>
               <span className={styles.grey}>Version</span>
               <span className={styles.darker}>{version}</span>

app/containers/Dashboard/index.js

@@ -6,13 +6,16 @@ import { togglePane, getSendPane, getConfirmPane } from '../../modules/dashboard
 import { logout, getAddress } from '../../modules/account'
 import { getBlockHeight, getNetwork } from '../../modules/metadata'
 import { getNotifications } from '../../modules/notifications'
+import { getNeoPrice, getGasPrice } from '../../modules/wallet'
 
 const mapStateToProps = (state: Object) => ({
   sendPane: getSendPane(state),
   confirmPane: getConfirmPane(state),
   blockHeight: getBlockHeight(state),
   net: getNetwork(state),
   address: getAddress(state),
+  neoPrice: getNeoPrice(state),
+  gasPrice: getGasPrice(state),
   notification: getNotifications(state)
 })