Merge pull request #1423 from CityOfZion/feature/no-assets-design

feature/implements-no-assets-designs

.eslintignore

@@ -1,2 +1,3 @@
 app/flow-typed/*
 dist/*
+__tests__/*

.flowconfig

@@ -7,6 +7,7 @@
 
 [libs]
 ./flow-typed/declarations.js
+./flow-typed
 
 [lints]
 

__tests__/components/Dashboard/AssetBalancesPanel.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import nock from 'nock'
-import { merge } from 'lodash'
+import { merge } from 'lodash-es'
 import { mount, shallow } from 'enzyme'
 import { progressValues } from 'spunky'
 
@@ -118,9 +118,9 @@ describe('AssetBalancesPanel', () => {
   test.only('correctly renders data from state', () => {
     const wrapper = mount(provideState(<AssetBalancesPanel />, initialState))
 
-    expect(wrapper.find('#neoWalletValue').text()).toEqual(`$2,548,025.48`)
-    expect(wrapper.find('#gasWalletValue').text()).toEqual(`$18,100.00`)
-    expect(wrapper.find('#walletTotal').text()).toEqual(`$2,566,125.48`)
+    expect(wrapper.find('#neoWalletValue').text()).toEqual('$2,548,025.48')
+    expect(wrapper.find('#gasWalletValue').text()).toEqual('$18,100.00')
+    expect(wrapper.find('#walletTotal').text()).toEqual('$2,566,125.48')
     expect(wrapper.find('#amountNeo').text()).toEqual('100,001')
     expect(wrapper.find('#amountGas').text()).toEqual('1,000.0002')
     expect(wrapper.find('#priceChangeNeo').text()).toEqual('+100.00%')
@@ -153,8 +153,8 @@ describe('AssetBalancesPanel', () => {
     })
     const wrapper = mount(provideState(<AssetBalancesPanel />, state))
 
-    expect(wrapper.find('#neoWalletValue').text()).toEqual(`€111,001.11`)
-    expect(wrapper.find('#gasWalletValue').text()).toEqual(`€550.00`)
-    expect(wrapper.find('#walletTotal').text()).toEqual(`€111,551.11`)
+    expect(wrapper.find('#neoWalletValue').text()).toEqual('€111,001.11')
+    expect(wrapper.find('#gasWalletValue').text()).toEqual('€550.00')
+    expect(wrapper.find('#walletTotal').text()).toEqual('€111,551.11')
   })
 })

__tests__/components/Dashboard/PortfolioPanel.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import nock from 'nock'
-import { merge } from 'lodash'
+import { merge } from 'lodash-es'
 import { mount, shallow } from 'enzyme'
 import { progressValues } from 'spunky'
 import { expect } from 'chai'

__tests__/components/TransactionHistoryPanel.test.js

@@ -3,7 +3,7 @@ import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import { shallow, mount } from 'enzyme'
-import { merge } from 'lodash'
+import { merge } from 'lodash-es'
 import { progressValues } from 'spunky'
 
 import TransactionHistoryPanel from '../../app/components/TransactionHistory/TransactionHistoryPanel'

app/actions/accountsActions.js

@@ -1,6 +1,6 @@
 // @flow
 import { createActions } from 'spunky'
-import { isEmpty } from 'lodash'
+import { isEmpty } from 'lodash-es'
 
 import { getStorage, setStorage } from '../core/storage'
 import { DEFAULT_WALLET } from '../core/constants'

app/actions/authActions.js

@@ -1,6 +1,6 @@
 // @flow
 import { wallet } from 'neon-js'
-import { noop } from 'lodash'
+import { noop } from 'lodash-es'
 import { createActions } from 'spunky'
 
 import { upgradeNEP6AddAddresses } from '../core/account'

app/actions/balancesActions.js

@@ -1,6 +1,6 @@
 // @flow
 import { api } from 'neon-js'
-import { extend, isEmpty } from 'lodash'
+import { extend, isEmpty } from 'lodash-es'
 import { createActions } from 'spunky'
 
 import { ASSETS } from '../core/constants'

app/actions/contactsActions.js

@@ -1,7 +1,7 @@
 // @flow
 import { createActions } from 'spunky'
 import { wallet } from 'neon-js'
-import { has, isEmpty, keys, values, indexOf, zipObject, omit } from 'lodash'
+import { has, isEmpty, keys, values, indexOf, zipObject, omit } from 'lodash-es'
 
 import { getStorage, setStorage } from '../core/storage'
 

app/actions/priceHistoryActions.js

@@ -1,7 +1,7 @@
 // @flow
 import axios from 'axios'
 import { createActions } from 'spunky'
-import { toUpper } from 'lodash'
+import { toUpper } from 'lodash-es'
 
 import { ASSETS, DEFAULT_CURRENCY_CODE } from '../core/constants'
 

app/actions/settingsActions.js

@@ -1,5 +1,5 @@
 // @flow
-import { pick, keys, uniqBy } from 'lodash'
+import { pick, keys, uniqBy } from 'lodash-es'
 import { createActions } from 'spunky'
 
 import { getStorage, setStorage } from '../core/storage'

app/actions/transactionHistoryActions.js

@@ -2,11 +2,7 @@
 import axios from 'axios'
 import { api } from 'neon-js'
 import { createActions } from 'spunky'
-import { filter, reduce } from 'lodash'
 
-import { COIN_DECIMAL_LENGTH } from '../core/formatters'
-import { ASSETS } from '../core/constants'
-import { toBigNumber } from '../core/math'
 import { getDefaultTokens } from '../core/nep5'
 
 export const NEO_ID =
@@ -90,16 +86,14 @@ export default createActions(
     const tokens = await getDefaultTokens()
     const endpoint = api.neoscan.getAPIEndpoint(net)
     const { data } = await axios.get(
-      `${endpoint}/v1/get_address_abstracts/${address}/${
-        shouldIncrementPagination ? page : 1
-      }`
+      `${endpoint}/v1/get_address_abstracts/${address}/${page}`
     )
     totalPages = data.total_pages
 
     const parsedEntries = parseAbstractData(data.entries, address, tokens)
+    page += 1
     if (shouldIncrementPagination) {
       if (page === 1) entries = []
-      page += 1
       entries.push(...parsedEntries)
       return entries
     }

app/components/AmountsPanel/AmountsPanel.scss

@@ -7,7 +7,7 @@
   padding: 20px 0;
   min-height: 50px;
   overflow-x: auto;
-  margin: 20px 0;
+  margin: 0 0 20px;
   overflow-y: hidden;
   max-width: 100%;
   background-color: #f2f2f2;

app/components/Button/Button.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react'
 import classNames from 'classnames'
-import { omit } from 'lodash'
+import { omit } from 'lodash-es'
 
 import styles from './Button.scss'
 

app/components/Contacts/AddContactPanel/AddContactPanel.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from 'lodash-es'
 
 import FullHeightPanel from '../../Panel/FullHeightPanel'
 import ContactForm from '../ContactForm'

app/components/Contacts/AddContactPanel/index.js

@@ -1,7 +1,7 @@
 // @flow
 import { compose, withProps } from 'recompose'
 import { withActions, progressValues } from 'spunky'
-import { trim } from 'lodash'
+import { trim } from 'lodash-es'
 
 import AddContactPanel from './AddContactPanel'
 import { addContactActions } from '../../../actions/contactsActions'

app/components/Contacts/ContactForm/ContactForm.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from 'lodash-es'
 
 import { wallet } from 'neon-js'
 

app/components/Contacts/ContactsPanel/ContactsPanel.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { map } from 'lodash'
+import { map } from 'lodash-es'
 
 import Panel from '../../Panel'
 import Button from '../../Button'

app/components/Contacts/EditContactPanel/EditContactPanel.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
-import { noop } from 'lodash'
+import { noop } from 'lodash-es'
 
 import Panel from '../../Panel'
 import ContactForm from '../ContactForm'

app/components/Contacts/EditContactPanel/index.js

@@ -1,7 +1,7 @@
 // @flow
 import { compose, withProps } from 'recompose'
 import { withActions, progressValues } from 'spunky'
-import { trim } from 'lodash'
+import { trim } from 'lodash-es'
 
 import EditContactPanel from './EditContactPanel'
 import { updateContactActions } from '../../../actions/contactsActions'

app/components/Dashboard/AssetBalancesPanel/AssetBalancesPanel.jsx

@@ -10,6 +10,7 @@ import { formatGAS, formatFiat, formatNEO } from '../../../core/formatters'
 import { toNumber, toBigNumber } from '../../../core/math'
 import { ASSETS, CURRENCIES } from '../../../core/constants'
 import RefreshIcon from '../../../assets/icons/refresh.svg'
+import LogoWithStrikethrough from '../../LogoWithStrikethrough'
 import styles from './AssetBalancesPanel.scss'
 
 type PriceDirection = 'increase' | 'decrease'
@@ -33,6 +34,8 @@ export default class AssetBalancesPanel extends React.Component<Props> {
   render = () => {
     const { NEO, GAS, className } = this.props
 
+    const hasAssets = NEO !== '0' && GAS !== '0'
+
     return (
       <Panel
         className={classNames(styles.assetBalancesPanel, className)}
@@ -45,46 +48,56 @@ export default class AssetBalancesPanel extends React.Component<Props> {
             {this.getFormattedFiatBalance(this.getTotalValue())}
           </div>
         </div>
-        <div id="balance" className={styles.assets}>
-          <div className={styles.asset}>
-            <div className={styles.label}>{ASSETS.NEO}</div>
-            <div className={styles.quantity} id="amountNeo">
-              {formatNEO(NEO)}
+
+        {hasAssets ? (
+          <div id="balance" className={styles.assets}>
+            <div className={styles.asset}>
+              <div className={styles.label}>{ASSETS.NEO}</div>
+              <div className={styles.quantity} id="amountNeo">
+                {formatNEO(NEO)}
+              </div>
+              <span className={styles.value} id="neoWalletValue">
+                {this.getFormattedFiatBalance(this.getNEOValue())}
+              </span>
+              <span
+                className={classNames(
+                  styles.change,
+                  styles[this.getNEOPriceChangeDirection()]
+                )}
+                id="priceChangeNeo"
+              >
+                {this.getNEOFormattedPriceChange()}
+              </span>
             </div>
-            <span className={styles.value} id="neoWalletValue">
-              {this.getFormattedFiatBalance(this.getNEOValue())}
-            </span>
-            <span
-              className={classNames(
-                styles.change,
-                styles[this.getNEOPriceChangeDirection()]
-              )}
-              id="priceChangeNeo"
-            >
-              {this.getNEOFormattedPriceChange()}
-            </span>
-          </div>
-          <div className={styles.asset}>
-            <div className={styles.label}>{ASSETS.GAS}</div>
-            <div className={styles.quantity} id="amountGas">
-              <Tooltip title={formatGAS(GAS)} disabled={toBigNumber(GAS).eq(0)}>
-                {formatGAS(GAS, true)}
-              </Tooltip>
+            <div className={styles.asset}>
+              <div className={styles.label}>{ASSETS.GAS}</div>
+              <div className={styles.quantity} id="amountGas">
+                <Tooltip
+                  title={formatGAS(GAS)}
+                  disabled={toBigNumber(GAS).eq(0)}
+                >
+                  {formatGAS(GAS, true)}
+                </Tooltip>
+              </div>
+              <span className={styles.value} id="gasWalletValue">
+                {this.getFormattedFiatBalance(this.getGASValue())}
+              </span>
+              <span
+                className={classNames(
+                  styles.change,
+                  styles[this.getGASPriceChangeDirection()]
+                )}
+                id="priceChangeGas"
+              >
+                {this.getGASFormattedPriceChange()}
+              </span>
             </div>
-            <span className={styles.value} id="gasWalletValue">
-              {this.getFormattedFiatBalance(this.getGASValue())}
-            </span>
-            <span
-              className={classNames(
-                styles.change,
-                styles[this.getGASPriceChangeDirection()]
-              )}
-              id="priceChangeGas"
-            >
-              {this.getGASFormattedPriceChange()}
-            </span>
           </div>
-        </div>
+        ) : (
+          <div className={styles.emptyBalanceContainer}>
+            <LogoWithStrikethrough />
+          </div>
+        )}
         <div className={styles.claim}>
           <Claim className={styles.claimButton} />
         </div>

app/components/Dashboard/AssetBalancesPanel/index.js

@@ -1,6 +1,6 @@
 // @flow
 import { compose } from 'recompose'
-import { values, omit } from 'lodash'
+import { values, omit } from 'lodash-es'
 import { withActions, withData } from 'spunky'
 
 import AssetBalancesPanel from './AssetBalancesPanel'

app/components/Dashboard/PortfolioPanel/PortfolioBreakdownChart.jsx

@@ -10,7 +10,7 @@ import {
   Label
 } from 'recharts'
 // $FlowFixMe
-import { map, times } from 'lodash'
+import { map, times } from 'lodash-es'
 
 import COLORS from './colors'
 import { formatThousands } from '../../../core/formatters'