Bugfix: asset overview balance

app/components/UI/AssetOverview/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AssetOverview should render correctly 1`] = `
-<AssetOverview
+<Connect(AssetOverview)
   asset={
     Object {
       "balance": 4,
@@ -11,8 +11,5 @@ exports[`AssetOverview should render correctly 1`] = `
       "symbol": "ETH",
     }
   }
-  primaryCurrency="ETH"
-  setTokensTransaction={[Function]}
-  toggleReceiveModal={[Function]}
 />
 `;

app/components/UI/AssetOverview/index.js

@@ -9,6 +9,8 @@ import AssetActionButtons from '../AssetActionButtons';
 import { setTokensTransaction } from '../../../actions/transaction';
 import { toggleReceiveModal } from '../../../actions/modals';
 import { connect } from 'react-redux';
+import { toChecksumAddress } from 'ethereumjs-util';
+import { renderFromTokenMinimalUnit, balanceToFiat, renderFromWei, weiToFiat, hexToBN } from '../../../util/number';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -56,6 +58,10 @@ const ethLogo = require('../../../images/eth-logo.png'); // eslint-disable-line
  */
 class AssetOverview extends Component {
 	static propTypes = {
+		/**
+		 * Map of accounts to information objects including balances
+		 */
+		accounts: PropTypes.object,
 		/**
 		/* navigation object required to access the props
 		/* passed by the parent component
@@ -65,10 +71,30 @@ class AssetOverview extends Component {
 		 * Object that represents the asset to be displayed
 		 */
 		asset: PropTypes.object,
+		/**
+		 * ETH to current currency conversion rate
+		 */
+		conversionRate: PropTypes.number,
+		/**
+		 * Currency code of the currently-active currency
+		 */
+		currentCurrency: PropTypes.string,
+		/**
+		 * A string that represents the selected address
+		 */
+		selectedAddress: PropTypes.string,
 		/**
 		 * Action that sets a tokens type transaction
 		 */
 		setTokensTransaction: PropTypes.func.isRequired,
+		/**
+		 * An object containing token balances for current account and network in the format address => balance
+		 */
+		tokenBalances: PropTypes.object,
+		/**
+		 * An object containing token exchange rates in the format address => exchangeRate
+		 */
+		tokenExchangeRates: PropTypes.object,
 		/**
 		 * Action that toggles the receive modal
 		 */
@@ -111,18 +137,40 @@ class AssetOverview extends Component {
 
 	render() {
 		const {
-			asset: { symbol, balance, balanceFiat },
-			primaryCurrency
+			accounts,
+			asset,
+			primaryCurrency,
+			selectedAddress,
+			tokenExchangeRates,
+			tokenBalances,
+			conversionRate,
+			currentCurrency
 		} = this.props;
 		let mainBalance, secondaryBalance;
-
+		const itemAddress = (asset.address && toChecksumAddress(asset.address)) || undefined;
+		let balance, balanceFiat;
+		if (asset.symbol === 'ETH') {
+			balance = renderFromWei(accounts[selectedAddress] && accounts[selectedAddress].balance);
+			balanceFiat = weiToFiat(
+				hexToBN(accounts[selectedAddress].balance),
+				conversionRate,
+				currentCurrency.toUpperCase()
+			);
+		} else {
+			const exchangeRate = itemAddress in tokenExchangeRates ? tokenExchangeRates[itemAddress] : undefined;
+			balance =
+				itemAddress in tokenBalances
+					? renderFromTokenMinimalUnit(tokenBalances[itemAddress], asset.decimals)
+					: 0;
+			balanceFiat = balanceToFiat(balance, conversionRate, exchangeRate, currentCurrency);
+		}
 		// choose balances depending on 'primaryCurrency'
 		if (primaryCurrency === 'ETH') {
-			mainBalance = balance + ' ' + symbol;
+			mainBalance = balance + ' ' + asset.symbol;
 			secondaryBalance = balanceFiat;
 		} else {
-			mainBalance = !balanceFiat ? balance + ' ' + symbol : balanceFiat;
-			secondaryBalance = !balanceFiat ? balanceFiat : balance + ' ' + symbol;
+			mainBalance = !balanceFiat ? balance + ' ' + asset.symbol : balanceFiat;
+			secondaryBalance = !balanceFiat ? balanceFiat : balance + ' ' + asset.symbol;
 		}
 
 		return (
@@ -145,7 +193,13 @@ class AssetOverview extends Component {
 }
 
 const mapStateToProps = state => ({
-	primaryCurrency: state.settings.primaryCurrency
+	accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+	conversionRate: state.engine.backgroundState.CurrencyRateController.conversionRate,
+	currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency,
+	primaryCurrency: state.settings.primaryCurrency,
+	selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress,
+	tokenBalances: state.engine.backgroundState.TokenBalancesController.contractBalances,
+	tokenExchangeRates: state.engine.backgroundState.TokenRatesController.contractExchangeRates
 });
 
 const mapDispatchToProps = dispatch => ({

app/components/UI/AssetOverview/index.test.js

@@ -2,7 +2,10 @@ import React from 'react';
 import AssetOverview from './';
 import configureMockStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+
 const mockStore = configureMockStore();
+const store = mockStore({});
 
 describe('AssetOverview', () => {
 	it('should render correctly', () => {
@@ -19,9 +22,14 @@ describe('AssetOverview', () => {
 			name: 'Ethereum'
 		};
 
-		const wrapper = shallow(<AssetOverview asset={asset} />, {
-			context: { store: mockStore(initialState) }
-		});
+		const wrapper = shallow(
+			<Provider store={store}>
+				<AssetOverview asset={asset} />
+			</Provider>,
+			{
+				context: { store: mockStore(initialState) }
+			}
+		);
 		expect(wrapper).toMatchSnapshot();
 	});
 });

app/components/UI/Tokens/index.js

@@ -132,17 +132,17 @@ export default class Tokens extends PureComponent {
 		</View>
 	);
 
-	renderItem = item => {
+	renderItem = asset => {
 		const { conversionRate, currentCurrency, tokenBalances, tokenExchangeRates, primaryCurrency } = this.props;
-		const itemAddress = (item.address && toChecksumAddress(item.address)) || undefined;
-		const logo = item.logo || ((contractMap[itemAddress] && contractMap[itemAddress].logo) || undefined);
+		const itemAddress = (asset.address && toChecksumAddress(asset.address)) || undefined;
+		const logo = asset.logo || ((contractMap[itemAddress] && contractMap[itemAddress].logo) || undefined);
 		const exchangeRate = itemAddress in tokenExchangeRates ? tokenExchangeRates[itemAddress] : undefined;
 		const balance =
-			item.balance ||
-			(itemAddress in tokenBalances ? renderFromTokenMinimalUnit(tokenBalances[itemAddress], item.decimals) : 0);
+			asset.balance ||
+			(itemAddress in tokenBalances ? renderFromTokenMinimalUnit(tokenBalances[itemAddress], asset.decimals) : 0);
+		const balanceFiat = asset.balanceFiat || balanceToFiat(balance, conversionRate, exchangeRate, currentCurrency);
+		const balanceValue = balance + ' ' + asset.symbol;
 
-		const balanceFiat = item.balanceFiat || balanceToFiat(balance, conversionRate, exchangeRate, currentCurrency);
-		const balanceValue = balance + ' ' + item.symbol;
 		// render balances according to primary currency
 		let mainBalance, secondaryBalance;
 		if (primaryCurrency === 'ETH') {
@@ -153,20 +153,20 @@ export default class Tokens extends PureComponent {
 			secondaryBalance = !balanceFiat ? balanceFiat : balanceValue;
 		}
 
-		item = { ...item, ...{ logo, balance, balanceFiat } };
+		asset = { ...asset, ...{ logo, balance, balanceFiat } };
 		return (
 			<AssetElement
 				key={itemAddress || '0x'}
 				onPress={this.onItemPress}
 				onLongPress={this.showRemoveMenu}
-				asset={item}
+				asset={asset}
 			>
-				{item.symbol === 'ETH' ? (
+				{asset.symbol === 'ETH' ? (
 					<FadeIn placeholderStyle={{ backgroundColor: colors.white }}>
 						<Image source={ethLogo} style={styles.ethLogo} />
 					</FadeIn>
 				) : (
-					<TokenImage asset={item} containerStyle={styles.ethLogo} />
+					<TokenImage asset={asset} containerStyle={styles.ethLogo} />
 				)}
 
 				<View style={styles.balances}>

app/components/Views/Asset/index.js

@@ -69,6 +69,7 @@ class Asset extends Component {
 	txs = [];
 	txsPending = [];
 	isNormalizing = false;
+	networkType = '';
 
 	static navigationOptions = ({ navigation }) =>
 		getNetworkNavbarOptions(navigation.getParam('symbol', ''), false, navigation);
@@ -136,6 +137,7 @@ class Asset extends Component {
 			if (
 				(this.txs.length === 0 && !this.state.transactionsUpdated) ||
 				this.txs.length !== txs.length ||
+				this.networkType !== networkType ||
 				this.didTxStatusesChange(newPendingTxs)
 			) {
 				this.txs = txs;
@@ -146,6 +148,7 @@ class Asset extends Component {
 			this.setState({ transactionsUpdated: true, loading: false });
 		}
 		this.isNormalizing = false;
+		this.networkType = networkType;
 	}
 
 	renderLoader = () => (