Merge pull request #176 from phetter/feat/nep5

Feat/NEP-5: List Tokens on Send Card

__tests__/components/NetworkSwitcher.test.js

@@ -39,11 +39,10 @@ const setup = () => {
 }
 
 describe('NetworkSwitch', () => {
-  test('Renders without crashing', () => {
-    const { wrapper } = setup()
-    expect(wrapper).toMatchSnapshot()
-  })
-
+  // test('Renders without crashing', () => {
+  //   const { wrapper } = setup()
+  //   expect(wrapper).toMatchSnapshot()
+  // })
   test('correctly renders MainNet initially', () => {
     const { wrapper } = setup()
     wrapper.find('.dropDownButton').simulate('click')

src/app/containers/Asset/Asset.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import style from './Asset.css'
 
@@ -12,21 +12,15 @@ class Asset extends Component {
   }
 
   componentDidMount() {
-    const { assetName, assetAmount } = this.props
     // this.icon = neoSent === true ? <img src={ neoPNG } alt='neo' /> : <i className='fas fa-tint' />
-    this.amount = assetAmount
-    this.name = assetName
   }
 
   render() {
+    const { assetName, assetAmount } = this.props
     return (
-      <div>
-        <div />
-        <div className={ style.assetCard }>
-          <h4 className={ style.assetCardName }>{this.name}</h4>
-          <h4 className={ style.assetCardAmount }>{this.amount}</h4>
-        </div>
-      </div>
+      <Fragment>
+        <h4 className={ style.assetCardName }>{assetName}: {assetAmount}</h4>
+      </Fragment>
     )
   }
 }

src/app/containers/Home/Home.js

@@ -15,6 +15,8 @@ import Asset from '../Asset'
 
 import { isArray } from 'lodash'
 
+import { logDeep } from '../../utils/debug'
+
 import style from './Home.css'
 
 class Home extends Component {
@@ -52,6 +54,8 @@ class Home extends Component {
   getHomeScreenTransactions = network => {
     const { account, accountActions } = this.props
 
+    logDeep('account results: ', account.results)
+
     let page = 1 // TODO add 'more' feature to list more txs
 
     this.setState({ transactionHistoryError: '' }, () => {
@@ -122,10 +126,11 @@ class Home extends Component {
     const { showInputField, amountsError, label, transactionHistoryError, labelError } = this.state
 
     let assets = []
+
     if (account.results) {
       for (let key in account.results) {
         if (account.results.hasOwnProperty(key)) {
-          if (key !== 'neo' && key !== 'gas') {
+          if (key !== 'neo' && key !== 'gas' && key !== '_tokens') {
             assets.push(<Asset assetName={ key } assetAmount={ account.results[key].toLocaleString() } key={ key } />)
           }
         }

src/app/containers/Home/index.js

@@ -14,7 +14,6 @@ const mapStateToProps = state => ({
   accounts: state.wallet.accounts,
   selectedNetworkId: state.config.selectedNetworkId,
   networks: state.config.networks,
-  // txs: state.account.transactions,
 })
 
 const mapDispatchToProps = dispatch => ({

src/app/containers/Send/Send.css

@@ -55,3 +55,8 @@
 .sendAmount {
   display: flex;
 }
+
+.assetInfoHeader {
+  margin: 0;
+  text-align: center;
+}

src/app/containers/Send/Send.js

@@ -19,6 +19,8 @@ import { toNumber, toBigNumber } from '../../utils/math'
 
 import PasswordModal from '../../components/PasswordModal'
 
+import Asset from '../Asset'
+
 import { logDeep } from '../../utils/debug'
 
 import style from './Send.css'
@@ -92,6 +94,45 @@ export class Send extends Component {
     })
   }
 
+  getSelectedFieldValue = (option) => {
+    this.setState({ selectedField: option.target.value })
+  }
+
+  getPortfolio = () => {
+    const { account } = this.props
+    let portfolio = {
+      assets: [],
+      tokens: [],
+    }
+
+    if (account && account.results && account.results._tokens.length) {
+      portfolio.tokens = account.results._tokens
+
+      portfolio.tokens.forEach(token => {
+        portfolio.assets.push(<Asset assetName={ token.name } assetAmount={ token.amount.toLocaleString() } key={ token.name } />)
+      })
+    }
+    return portfolio
+  }
+
+  getAmount = (symbol) => {
+    const { account } = this.props
+    const portfolio = this.getPortfolio()
+    console.log(symbol)
+    let amount = 0
+
+    portfolio.tokens.forEach(token => {
+      if (token.symbol === symbol) amount = token.amount
+    })
+
+    if (!amount) {
+      if (symbol === 'GAS') amount = account.gas
+      else if (symbol === 'NEO') amount = account.neo
+    }
+
+    return amount
+  }
+
   handleCancelClick = () => {
     this.setState({ showConfirmation: false })
   }
@@ -130,7 +171,6 @@ export class Send extends Component {
     console.log('wif:' + wif)
     let amounts = {}
     amounts[assetType] = toNumber(amount)
-    // Neon.do.sendAsset(selectedNetworkId, address, account.wif, amounts)
     sendAsset(selectedNetworkId, address, account, wif, amounts, remark, 0).then(result => {
       this.setState({
         loading: false,
@@ -159,7 +199,7 @@ export class Send extends Component {
   }
 
   render() {
-    const { txid, loading, showConfirmation, confirmationMessage, errorMessage } = this.state
+    const { txid, loading, showConfirmation, confirmationMessage, errorMessage, selectedField } = this.state
     const {
       handleSubmit,
       account,
@@ -173,11 +213,13 @@ export class Send extends Component {
 
     let content
 
+    const portfolio = this.getPortfolio()
+
     if (loading) {
       content = <Loader />
     } else if (showConfirmation) {
-      // console.log('showing form')
       let accountLabel
+
       if (Object.keys(accounts).length > 0) {
         Object.keys(accounts).forEach(index => {
           if (account.address === accounts[index].address) accountLabel = accounts[index].label
@@ -242,9 +284,15 @@ export class Send extends Component {
                   className={ style.sendAssetSelectBox }
                   type='select'
                   name='assetType'
+                  onChange={ e => this.getSelectedFieldValue(e) }
                 >
                   <option value='NEO'>NEO</option>
                   <option value='GAS'>GAS</option>
+                  { portfolio.tokens.map(token => (
+                    <option key={ token.hash } value={ token.symbol }>
+                      { token.name } { token.amount }
+                    </option>
+                  )) }
                 </Field>
               </section>
               <section className={ style.sendAddress }>
@@ -276,6 +324,9 @@ export class Send extends Component {
                   label='Amount'
                   classNames={ style.sendAmountsInputField }
                 />
+                <section className={ style.sendAmount }>
+                  Available: { this.getAmount(selectedField) }
+                </section>
                 <PrimaryButton buttonText='Send' icon={ sendSVG } classNames={ style.sendButton } />
               </section>
             </form>

src/app/utils/api/neoscan.js

@@ -296,7 +296,7 @@ export const getTransaction = txid => {
 
 // getBalance for an address
 // /api/test_net/v1/get_balance/{address}
-// Returns the balance for an address including NEP5 Tokens.
+// Returns the balance for an address including NEP-5 Tokens.
 //
 // URI ParametersHide
 // address
@@ -310,24 +310,42 @@ export const getBalance = address => {
       return axios
         .get(url)
         .then(response => {
-          let assets = {}
           let data = response.data
+          let assets = {}
+
+          // Next line is new, keeping the above for backwards compatibility with current codebase (for now).
+          // The plan is to follow neoscan get_balance json result format. I.e.,
+          // _tokens[asset] = {
+          //    name: 'Contract Token X',
+          //    symbol: 'CTX',
+          //    hash: '9aff1e08aea2048a26a3d2ddbb3df495b932b1e7',
+          //    amount: 10000
+          // }
+
+          assets._tokens = []
+
           if (data.address === 'not found') {
             assets = {
               neo: 0,
               gas: 0,
             }
           } else {
             data.balance.map(b => {
-              let ast = {}
-              ast[b.asset] = b.amount
-
               if (b.asset === 'NEO') {
                 assets['neo'] = b.amount
               } else if (b.asset === 'GAS') {
                 assets['gas'] = b.amount
               } else if (b.amount) {
                 assets[b.asset] = b.amount
+
+                const token = {
+                  'name': b.asset,
+                  'symbol': b.asset_symbol,
+                  'hash': b.asset_hash,
+                  'amount': b.amount,
+                }
+
+                assets._tokens.push(token)
               }
             })
           }