NEP5 (#358)

* Fix for: Password is displayed as visible text when creating wallet #342 (#347)

* Fix for: Give warning when API is down or wallet lacks connectivity #265 (#346)

* Fix lint errors and refactor

* Remove RPX from reducers

* Move loading indicator to the top

* hide scrollbars

* finetune the buttons

* Move the refresh button code to Dashboard.scss

* Remove unused styles

* Split token balances into its own component

* Add info icon

* add tokens balance to initiateGetBalance

* Remove unused methods

* POC tokenInfo

* Use PasswordField for WIF key in secret token sale screen (#351)

* Add token info modal and refactor the tokens state

* Update snapshots

* Remove uneeded code

* Better formatting (#350)

* Better formatting for bigger numbers

* Formating formatters file

* Removing mime requirement. Not needed.

* Remove exclamation that's not needed in UI (#353)

* Enter in textfields submits alt (#354)

* Enter button submits forms, simple solution

* Code style fixes

* Use tight version

* Remove unused function

* Remove comment

* Remove ToggleAsset

* Rename Gas -> GAS / Neo -> NEO

* Add isToken method

* WIP

* Use tight versioning

* WIP

* Rename rpx to sale, and clean it up

* Rename reducers to index

* Fix paths

* Add flow

* Add flow

* cleanups

* Rename initiateGetBalance to LoadWalletData

* Add TokenInfo type

* Fix tests

* Refactor prices (to support in the future)

* Add Type suffix for types

* Cleanup

* Cleanup

* Cleanup

* Fix typo

* Use neon-js constants

* Add support for test tokens

* Add percent buttons

* Fix token sale

* Sort imports

* Fix typo

* Revert back to not using NeonJS for Network

* Remove unsued functions

* Fix lint errors

* Refactor explorer

* Fix typo

* Revert back to local consts for ASSETS

* Load info when modal loads

* Rename to openExplorerTx

* Pass retrieveTokenInfo to the token info modal

* WIP

* Change token to symbol

ISSUE_TEMPLATE.md

@@ -1,5 +1,5 @@
 ## PLEASE NOTE
 
-## For support using the software or concerns about the status of your funds, please go to the #support channel in the Neo Smart Economy Slack.
+## For support using the software or concerns about the status of your funds, please go to the #support channel in the NEO Smart Economy Slack.
 
 ## GitHub issues are intended for tracking development tasks, not troubleshooting general usage problems.

README.md

@@ -27,9 +27,9 @@
 
 ### What does it currently do
 
-- View Gas and Neo balances
+- View GAS and NEO balances
 - Login via Wif and encrypted private keys
-- Send Neo to other addresses
+- Send NEO to other addresses
 
 ## Installation
 

__tests__/components/Claim.test.js

@@ -25,7 +25,7 @@ const initialState = {
     network: 'network'
   },
   wallet: {
-    Neo: 1
+    NEO: 1
   }
 }
 
@@ -90,7 +90,7 @@ describe('Claim', () => {
       expect(actions[1]).toEqual({
         type: SHOW_NOTIFICATION,
         payload: expect.objectContaining({
-          message: 'Sending Neo to Yourself...',
+          message: 'Sending NEO to Yourself...',
           level: NOTIFICATION_LEVELS.INFO
         })
       })
@@ -133,7 +133,7 @@ describe('Claim', () => {
       expect(actions[1]).toEqual({
         type: SHOW_NOTIFICATION,
         payload: expect.objectContaining({
-          message: 'Sending Neo to Yourself...',
+          message: 'Sending NEO to Yourself...',
           level: NOTIFICATION_LEVELS.INFO
         })
       })

__tests__/components/Login.test.js

@@ -1,15 +1,29 @@
 import React from 'react'
 import configureStore from 'redux-mock-store'
-import { shallow } from 'enzyme'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import { shallow, mount } from 'enzyme'
 
 import Login from '../../app/containers/LoginPrivateKey/LoginPrivateKey'
 
-const setup = (state = { account: {
+const setup = (shallowRender = true, state = { account: {
   loggedIn: true,
   wif: undefined
 }}) => {
   const store = configureStore()(state)
-  const wrapper = shallow(<Login store={store} />)
+
+  let wrapper
+  if (shallowRender) {
+    wrapper = shallow(<Login store={store} />)
+  } else {
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Login store={store} />
+        </BrowserRouter>
+      </Provider>
+    )
+  }
 
   return {
     store,
@@ -24,15 +38,16 @@ describe('Login', () => {
   })
 
   test('clicking show key icon toggles private key visibility', () => {
-    const { wrapper } = setup()
+    const { wrapper } = setup(false)
 
-    expect(wrapper.state('showKey')).toEqual(false)
+    expect(wrapper.find('input').get(0).props.type).toEqual('password')
 
     wrapper
       .find('.viewKey')
+      .first()
       .simulate('click')
 
-    expect(wrapper.state('showKey')).toEqual(true)
+    expect(wrapper.find('input').get(0).props.type).toEqual('text')
   })
 
   // test('private key field input onChange dispatches LOGIN action', () => {

__tests__/components/LoginNep2.test.js

@@ -45,13 +45,18 @@ describe('LoginNep2', () => {
   test('renders correctly with initial state', (done) => {
     const { wrapper } = setup(false)
 
-    const passwordField = wrapper.find('input[type="password"]')
-    const keyField = wrapper.find('input[type="text"]')
+    const fields = wrapper.find('input[type="password"]')
+    expect(fields.length).toEqual(2)
 
-    expect(passwordField.text()).toEqual('')
-    expect(passwordField.html().includes('Enter your passphrase here')).toEqual(true)
-    expect(keyField.text()).toEqual('')
-    expect(keyField.html().includes('Enter your encrypted key here')).toEqual(true)
+    const passwordField = fields.get(0)
+    const keyField = fields.get(1)
+
+    expect(passwordField.props.value).toEqual('')
+    expect(passwordField.props.placeholder).toEqual('Enter your passphrase here')
+    expect(passwordField.props.type).toEqual('password')
+    expect(keyField.props.value).toEqual('')
+    expect(keyField.props.placeholder).toEqual(('Enter your encrypted key here'))
+    expect(keyField.props.type).toEqual('password')
     done()
   })
   test('the login button is working correctly with no passphrase or wif', (done) => {
@@ -103,7 +108,7 @@ describe('LoginNep2', () => {
     keyField.instance().value = '6PYUGtvXiT5TBetgWf77QyAFidQj61V8FJeFBFtYttmsSxcbmP4vCFRCWu'
     keyField.simulate('change')
 
-    wrapper.find('.loginButton').simulate('click')
+    wrapper.find('.loginButton').simulate('submit')
     jest.runAllTimers()
     const actions = store.getActions()
     expect(actions.length).toEqual(2)

__tests__/components/WalletInfo.test.js

@@ -9,6 +9,7 @@ import { LOADING_TRANSACTIONS } from '../../app/modules/transactions'
 import { SET_HEIGHT } from '../../app/modules/metadata'
 import { SET_CLAIM } from '../../app/modules/claim'
 import WalletInfo from '../../app/containers/WalletInfo'
+import * as neonjs from 'neon-js'
 
 // TODO research how to move the axios mock code which is repeated in NetworkSwitch to a helper or config file
 import axios from 'axios'
@@ -47,8 +48,8 @@ const initialState = {
     network: 'TestNet'
   },
   wallet: {
-    Neo: 10,
-    Gas: 1.0001001,
+    NEO: 100001,
+    GAS: 1.0001601,
     neoPrice: 25.48,
     gasPrice: 18.10
   },
@@ -89,16 +90,17 @@ describe('WalletInfo', () => {
     const neoWalletValue = wrapper.find('.neoWalletValue')
     const gasWalletValue = wrapper.find('.gasWalletValue')
     const walletValue = wrapper.find('.walletTotal')
-    const expectedNeoWalletValue = formatFiat(initialState.wallet.neoPrice * initialState.wallet.Neo)
-    const expectedGasWalletValue = formatFiat(initialState.wallet.gasPrice * initialState.wallet.Gas)
-    const expectedWalletValue = formatFiat(initialState.wallet.neoPrice * initialState.wallet.Neo + initialState.wallet.gasPrice * initialState.wallet.Gas)
+
+    const expectedNeoWalletValue = '2,548,025.48'
+    const expectedGasWalletValue = '18.10'
+    const expectedWalletValue = '2,548,043.58'
     const neoField = wrapper.find('.amountNeo')
     const gasField = wrapper.find('.amountGas')
 
     expect(neoWalletValue.text()).toEqual(`US $${expectedNeoWalletValue}`)
     expect(gasWalletValue.text()).toEqual(`US $${expectedGasWalletValue}`)
     expect(walletValue.text()).toEqual(`Total US $${expectedWalletValue}`)
-    expect(neoField.text()).toEqual(`${initialState.wallet.Neo}`)
+    expect(neoField.text()).toEqual(`${initialState.wallet.NEO}`)
     // TODO: Test the gas tooltip value, this is testing the display value, truncated to 4 decimals
     expect(gasField.text()).toEqual('1.0001')
     done()
@@ -122,7 +124,7 @@ describe('WalletInfo', () => {
     jest.runAllTimers()
     await Promise.resolve('Pause').then().then().then().then()
     const actions = store.getActions()
-    expect(actions.length).toEqual(16)
+    expect(actions.length).toEqual(20)
     // expect(actions.length).toEqual(12)
     actions.forEach(action => {
       expect(actionTypes.indexOf(action.type) > -1).toEqual(true)
@@ -131,6 +133,8 @@ describe('WalletInfo', () => {
   test('calls the correct number of actions after mounting', async () => {
     const { store } = setup(initialState, false)
     const actionTypes = [
+      HIDE_NOTIFICATIONS,
+      SHOW_NOTIFICATION,
       SET_TRANSACTION_HISTORY,
       SET_HEIGHT,
       SET_CLAIM,
@@ -141,9 +145,32 @@ describe('WalletInfo', () => {
     jest.runAllTimers()
     await Promise.resolve('Pause').then().then().then()
     const actions = store.getActions()
-    expect(actions.length).toEqual(6)
+    expect(actions.length).toEqual(10)
     actions.forEach(action => {
       expect(actionTypes.indexOf(action.type) > -1).toEqual(true)
     })
   })
+  test('network error is shown with connectivity error', async () => {
+    neonjs.getBalance = jest.fn(() => {
+      return new Promise((resolve, reject) => {
+        reject(new Error())
+      })
+    })
+    const { wrapper, store } = setup()
+    wrapper.dive()
+
+    jest.runAllTimers()
+    await Promise.resolve('Pause').then().then().then().then()
+
+    const actions = store.getActions()
+    let notifications = []
+    actions.forEach(action => {
+      if (action.type === SHOW_NOTIFICATION) {
+        notifications.push(action)
+      }
+    })
+
+    // let's make sure the last notification show was an error.
+    expect(notifications.pop().payload.level).toEqual('error')
+  })
 })

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

@@ -5,7 +5,7 @@ exports[`Claim should not render claim gas button when claim button is disabled
   id="claim"
 >
   <Tooltip
-    title="You can claim Gas once every 5 minutes"
+    title="You can claim GAS once every 5 minutes"
   >
     <button
       className="disabled"

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

@@ -10,29 +10,28 @@ exports[`Login renders without crashing 1`] = `
   >
     Login using a private key:
   </div>
-  <div
-    className="loginForm"
+  <form
+    onSubmit={[Function]}
   >
-    <input
-      autoFocus={true}
-      onChange={[Function]}
-      placeholder="Enter your private key here (WIF)"
-      type="password"
-    />
-    <FaEye
-      className="viewKey"
-      onClick={[Function]}
-    />
-  </div>
-  <div>
-    <button
-      className="disabled"
-      disabled={true}
-      onClick={[Function]}
+    <div
+      className="loginForm"
     >
-      Login
-    </button>
-    <HomeButtonLink />
-  </div>
+      <PasswordField
+        autoFocus={true}
+        onChange={[Function]}
+        placeholder="Enter your private key here (WIF)"
+      />
+    </div>
+    <div>
+      <button
+        className="disabled"
+        disabled={true}
+        type="submit"
+      >
+        Login
+      </button>
+      <HomeButtonLink />
+    </div>
+  </form>
 </Page>
 `;

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

@@ -11,6 +11,7 @@ exports[`Logout should render without crashing 1`] = `
     to=""
   >
     <Tooltip
+      position="right"
       title="Logout"
     >
       <MdPowerSettingsNew />

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

@@ -4,7 +4,7 @@ exports[`NetworkSwitch renders without crashing 1`] = `
 <NetworkSwitch
   address="AWy7RNBVr9vDadRMK9p7i7Z1tL7GrLAxoh"
   checkVersion={[Function]}
-  initiateGetBalance={[Function]}
+  loadWalletData={[Function]}
   net="MainNet"
   setNetwork={[Function]}
   store={

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

@@ -3,15 +3,15 @@
 exports[`WalletInfo renders without crashing 1`] = `
 <WalletInfo
   address="ANqUrhv99rwCiFTL6N1An9NH5UVkPYxTuw"
-  gas={1.0001001}
+  gas={1.0001601}
   gasPrice={18.1}
-  getTokensBalance={[Function]}
-  initiateGetBalance={[Function]}
-  neo={10}
+  loadWalletData={[Function]}
+  neo={100001}
   neoPrice={25.48}
   net="TestNet"
+  retrieveTokensInfo={[Function]}
   showErrorNotification={[Function]}
-  showInfoNotification={[Function]}
+  showModal={[Function]}
   showSuccessNotification={[Function]}
   store={
     Object {