NEP5

__tests__/modules/generateWallet.test.js

@@ -1,4 +1,9 @@
-import generateWalletReducer, { newWalletKeys, newWallet, generating, resetKey, NEW_WALLET_KEYS, NEW_WALLET, SET_GENERATING, RESET_KEY } from '../../app/modules/generateWallet'
+import generateWalletReducer, {
+  newWallet,
+  resetKey,
+  NEW_WALLET,
+  RESET_KEY
+} from '../../app/modules/generateWallet'
 
 describe('generateWallet module tests', () => {
   // TODO when looking into pulling axios mock adapter into helper file to stay DRY
@@ -12,8 +17,7 @@ describe('generateWallet module tests', () => {
     wif: null,
     address: null,
     passphrase: null,
-    encryptedWif: null,
-    generating: false
+    encryptedWif: null
   }
 
   const account = {
@@ -41,42 +45,6 @@ describe('generateWallet module tests', () => {
     })
   })
 
-  describe('newWalletKeys tests', () => {
-    const expectedAction = {
-      type: NEW_WALLET_KEYS,
-      payload: {
-        passphrase
-      }
-    }
-
-    test('newWalletKeys action works', () => {
-      expect(newWalletKeys(passphrase)).toEqual(expectedAction)
-    })
-
-    test('generateWallet reducer should handle NEW_WALLET_KEYS', () => {
-      const expectedState = Object.assign({}, initialState, account)
-      expect(generateWalletReducer(undefined, expectedAction)).toEqual(expectedState)
-    })
-  })
-
-  describe('generating tests', () => {
-    const expectedAction = {
-      type: SET_GENERATING,
-      payload: {
-        generating: true
-      }
-    }
-
-    test('generating action works', () => {
-      expect(generating(true)).toEqual(expectedAction)
-    })
-
-    test('generateWallet reducer should handle SET_GENERATING', () => {
-      const expectedState = Object.assign({}, initialState, { generating: true })
-      expect(generateWalletReducer(undefined, expectedAction)).toEqual(expectedState)
-    })
-  })
-
   describe('resetKey tests', () => {
     const expectedAction = { type: RESET_KEY }
 

app/components/DisplayWalletKeys/DisplayWalletKeys.jsx

@@ -64,17 +64,17 @@ class DisplayWalletKeys extends Component<Props, State> {
           <div className='keyListItem'>
             <span className='label'>Public Address:</span>
             <span className='key'>{address}</span>
-            <CopyToClipboard text={address} tooltip='Copy Public Key' />
+            <CopyToClipboard text={address} tooltip='Copy Public Address' />
           </div>
           <div className='keyListItem'>
             <span className='label'>Encrypted key:</span>
             <span className='key'>{passphraseKey}</span>
-            <CopyToClipboard text={passphraseKey} tooltip='Copy Passphrase Encrypted Key' />
+            <CopyToClipboard text={passphraseKey} tooltip='Copy Encrypted Key' />
           </div>
           <div className='keyListItem'>
             <span className='label'>Private Key:</span>
             <span className='key'>{wif}</span>
-            <CopyToClipboard text={passphraseKey} tooltip='Copy Private Key' />
+            <CopyToClipboard text={wif} tooltip='Copy Private Key' />
           </div>
         </div>
         <div className='saveKey'>

app/components/Modals/ReceiveModal/ReceiveModal.jsx

@@ -22,12 +22,12 @@ class ReceiveModal extends Component<Props> {
             if (err) console.log(err)
           })
         }}
-        title='NEO/GAS Wallet Address'
+        title='NEO Wallet Address'
         hideModal={hideModal}
         style={{
           content: {
             width: '420px',
-            height: '390px'
+            height: '420px'
           }
         }}
       >
@@ -38,8 +38,8 @@ class ReceiveModal extends Component<Props> {
             <CopyToClipboard text={address} tooltip='Copy Public Address' />
           </div>
           <div className={styles.canvas}><canvas ref={(node) => { this.canvas = node }} /></div>
-          <div>Only send NEO/GAS to this address</div>
-          <div>Sending any other digital asset will result in permanent loss.</div>
+          <div>Only send assets, such as NEO and GAS, and tokens, such as RPX, that are compatible with the NEO Blockchain.</div>
+          <div>Sending any other digital asset or token will result in permanent loss.</div>
         </div>
       </BaseModal>
     )

app/components/Modals/SendModal/SendDisplay.jsx

@@ -3,6 +3,8 @@ import React from 'react'
 import classNames from 'classnames'
 
 import { ASSETS } from '../../../core/constants'
+import { isToken } from '../../../core/wallet'
+import { formatBalance, formatGAS, formatNEO, truncateGAS, truncateTokenBalance } from '../../../core/formatters'
 
 import styles from './SendModal.scss'
 
@@ -49,11 +51,20 @@ const SendDisplay = ({
       </div>
       <div className={styles.percentRow}>
         {[25, 50, 75, 100].map((percent: number) => {
-          const value = percent * parseFloat(balance) / 100
-          return (<button
-            key={`percentButton${percent}`}
-            onClick={() => onChangeHandler('sendAmount', symbol === ASSETS.NEO ? Math.ceil(value) : value)}
-            className={styles.percentButton}>{percent}%</button>)
+          let value = percent * parseFloat(balance) / 100
+          if (symbol === ASSETS.NEO) {
+            value = Math.ceil(value)
+          } else if (symbol === ASSETS.GAS) {
+            value = truncateGAS(value)
+          } else {
+            value = truncateTokenBalance(value, tokens[symbol].info.decimals)
+          }
+          return (
+            <button
+              key={`percentButton${percent}`}
+              onClick={() => onChangeHandler('sendAmount', symbol === ASSETS.NEO ? Math.ceil(value) : value)}
+              className={styles.percentButton}>{percent}%</button>
+          )
         })}
       </div>
       <div id='sendAmount' className={styles.column}>
@@ -71,7 +82,9 @@ const SendDisplay = ({
       </div>
       <div id='sendAmount' className={styles.column}>
         <label className={styles.label}>Balance:</label>
-        {balance}
+        {symbol === ASSETS.NEO && formatNEO(balance)}
+        {symbol === ASSETS.GAS && formatGAS(balance)}
+        {isToken(symbol) && formatBalance(balance, tokens[symbol].info.decimals)}
       </div>
       <button className={classNames(styles.sendButton, {'disabled': sendButtonDisabled})} id='doSend' onClick={openAndValidate} disabled={sendButtonDisabled}>Send Asset</button>
     </div>

app/components/Modals/SendModal/SendModal.jsx

@@ -110,7 +110,7 @@ class SendModal extends Component<Props, State> {
         hideModal={hideModal}
         style={{
           content: {
-            width: '460px',
+            width: '480px',
             height: '410px'
           }
         }}

app/components/Modals/TokenInfoModal/TokenInfoModal.jsx

@@ -1,89 +1,56 @@
 // @flow
-import React, { Component } from 'react'
-import numeral from 'numeral'
+import React from 'react'
 
 import BaseModal from '../BaseModal'
 import Table from '../../Table'
-import Loader from '../../Loader'
+
+import { formatBalance } from '../../../core/formatters'
 
 import styles from './TokenInfoModal.scss'
 
 type Props = {
     hideModal: Function,
     token: TokenWithInfoType,
-    retrieveTokenInfo: Function
-}
-
-type State = {
-  token: TokenWithInfoType
 }
 
-class TokenInfoModal extends Component<Props, State> {
-  state = {
-    token: this.props.token
-  }
-
-  onAfterOpen = () => {
-    const { retrieveTokenInfo, token } = this.props
-    if (!token.info) {
-      retrieveTokenInfo(token.symbol).then((info) => {
-        this.setState({
-          token: {
-            ...token,
-            info
-          }
-        })
-      })
-    }
-  }
-
-  render () {
-    const { hideModal } = this.props
-    const { token } = this.state
-
-    return (
-      <BaseModal
-        onAfterOpen={this.onAfterOpen}
-        title='Token Info'
-        hideModal={hideModal}
-        style={{
-          content: {
-            width: '350px',
-            height: '250px'
-          }
-        }}
-      >
-        <div className={styles.container}>
-          {!token.info ? <Loader /> : (
-            <Table>
-              <tbody>
-                <tr>
-                  <td>Symbol:</td>
-                  <td>{token.symbol}</td>
-                </tr>
-                <tr>
-                  <td>Name:</td>
-                  <td>{token.info.name}</td>
-                </tr>
-                <tr>
-                  <td>Total Supply:</td>
-                  <td>{numeral(token.info.totalSupply).format('0,0')}</td>
-                </tr>
-                <tr>
-                  <td>Decimals</td>
-                  <td>{token.info.decimals}</td>
-                </tr>
-                <tr>
-                  <td>Balance</td>
-                  <td>{token.balance}</td>
-                </tr>
-              </tbody>
-            </Table>
-          )}
-        </div>
-      </BaseModal>
-    )
-  }
-}
+const TokenInfoModal = ({ hideModal, token }: Props) => (
+  <BaseModal
+    title='Token Info'
+    hideModal={hideModal}
+    style={{
+      content: {
+        width: '350px',
+        height: '250px'
+      }
+    }}
+  >
+    <div className={styles.container}>
+      <Table>
+        <tbody>
+          <tr>
+            <td>Symbol:</td>
+            <td>{token.symbol}</td>
+          </tr>
+          <tr>
+            <td>Name:</td>
+            <td>{token.info.name}</td>
+          </tr>
+          <tr>
+            <td>Total Supply:</td>
+            <td>{formatBalance(token.info.totalSupply)}</td>
+          </tr>
+          <tr>
+            <td>Decimals</td>
+            <td>{token.info.decimals}</td>
+          </tr>
+          <tr>
+            <td>Balance</td>
+            <td>{formatBalance(token.balance, token.info.decimals)}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  </BaseModal>
+)
 
 export default TokenInfoModal

app/containers/CreateWallet/index.js

@@ -9,8 +9,7 @@ import {
   getWif,
   getAddress,
   getEncryptedWif,
-  getPassphrase,
-  getGenerating
+  getPassphrase
 } from '../../modules/generateWallet'
 
 import CreateWallet from './CreateWallet'
@@ -19,8 +18,7 @@ const mapStateToProps = (state: Object) => ({
   wif: getWif(state),
   address: getAddress(state),
   encryptedWif: getEncryptedWif(state),
-  passphrase: getPassphrase(state),
-  generating: getGenerating(state)
+  passphrase: getPassphrase(state)
 })
 
 const actionCreators = {

app/containers/EncryptKey/index.js

@@ -9,8 +9,7 @@ import {
   getWif,
   getAddress,
   getEncryptedWif,
-  getPassphrase,
-  getGenerating
+  getPassphrase
 } from '../../modules/generateWallet'
 
 import EncryptKey from './EncryptKey'
@@ -19,8 +18,7 @@ const mapStateToProps = (state: Object) => ({
   wif: getWif(state),
   address: getAddress(state),
   encryptedWif: getEncryptedWif(state),
-  passphrase: getPassphrase(state),
-  generating: getGenerating(state)
+  passphrase: getPassphrase(state)
 })
 
 const actionCreators = {

app/containers/WalletInfo/TokensBalance.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Table from '../../components/Table'
 
 import { MODAL_TYPES } from '../../core/constants'
+import { formatBalance } from '../../core/formatters'
 
 import InfoOutline from 'react-icons/lib/md/info-outline'
 
@@ -26,15 +27,15 @@ const tokens = ({ tokens, showModal, retrieveTokenInfo }: Props) => (
     <tbody>
       {Object.keys(tokens).map((symbol) => {
         const token = tokens[symbol]
-        const { balance } = token
+        const { balance, info } = token
         return (
           <tr key={symbol}>
             <td
               className={styles.symbol}
               onClick={() => showModal(MODAL_TYPES.TOKEN_INFO, { token, retrieveTokenInfo })}>
               <InfoOutline className={styles.symbolIcon} />{symbol}
             </td>
-            <td>{balance}</td>
+            <td>{info ? formatBalance(balance, info.decimals) : balance}</td>
           </tr>
         )
       })}

app/core/formatters.js

@@ -2,15 +2,25 @@
 import { truncateNumber } from './math'
 import numeral from 'numeral'
 
+const DEFAULT_DECIMAL_LENGTH = 8
 const GAS_DECIMAL_LENGTH = 8
 const GAS_DECIMAL_SHORT_DISPLAY_LENGTH = 4
 
+export const formatBalance = (value: number | string, precision?: number) => {
+  return precision
+    ? numeral(value).format('0,0.' + Array(precision + 1).join('0'))
+    : numeral(value).format('0,0')
+}
+
+export const truncateTokenBalance = (value: number | string, precision?: number = DEFAULT_DECIMAL_LENGTH) => truncateNumber(parseFloat(value), precision).toFixed(precision)
+
+export const truncateGAS = (gas: number | string, precision?: number = GAS_DECIMAL_LENGTH) => truncateTokenBalance(gas, precision)
+
 export const formatGAS = (gas: number | string, shortDisplay: boolean = false): string => {
-  const decimalLength = shortDisplay ? GAS_DECIMAL_SHORT_DISPLAY_LENGTH : GAS_DECIMAL_LENGTH
-  const customTruncatedNumber = truncateNumber(parseFloat(gas), decimalLength).toFixed(decimalLength)
-  return numeral(customTruncatedNumber).format('0,0.' + Array(decimalLength + 1).join('0'))
+  const precision = shortDisplay ? GAS_DECIMAL_SHORT_DISPLAY_LENGTH : GAS_DECIMAL_LENGTH
+  return formatBalance(truncateGAS(gas, precision), precision)
 }
 
-export const formatNEO = (neo: number | string): string => numeral(neo).format('0,0')
+export const formatNEO = (neo: number | string): string => formatBalance(neo)
 
 export const formatFiat = (value: number | string): string => numeral(value).format('0,0.00')