Create blockchainWatcher class and refactor Portal such that Ether amounts are always passed around as baseUnits

11 files changed, 114 insertions, 94 deletions

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 4a9e16e88..e85c40e59 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -24,9 +24,11 @@ import {
     RedundantRPCSubprovider,
 } from '@0xproject/subproviders';
 import { BigNumber, intervalUtils, promisify } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import contract = require('truffle-contract');
+import { BlockchainWatcher } from 'ts/blockchain_watcher';
 import { TokenSendCompleted } from 'ts/components/flash_messages/token_send_completed';
 import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
@@ -47,7 +49,6 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
-import { Web3Wrapper } from 'ts/web3_wrapper';
 import Web3 = require('web3');
 import ProviderEngine = require('web3-provider-engine');
 import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
@@ -63,6 +64,7 @@ export class Blockchain {
     private _zeroEx: ZeroEx;
     private _dispatcher: Dispatcher;
     private _web3Wrapper?: Web3Wrapper;
+    private _blockchainWatcher?: BlockchainWatcher;
     private _userAddress: string;
     private _cachedProvider: Web3.Provider;
     private _cachedProviderNetworkId: number;
@@ -188,11 +190,11 @@ export class Blockchain {
 
         // Cache injected provider so that we can switch the user back to it easily
         if (_.isUndefined(this._cachedProvider)) {
-            this._cachedProvider = this._web3Wrapper.getProviderObj();
+            this._cachedProvider = this._web3Wrapper.getProvider();
             this._cachedProviderNetworkId = this.networkId;
         }
 
-        this._web3Wrapper.destroy();
+        this._blockchainWatcher.destroy();
 
         this._userAddress = '';
         this._dispatcher.updateUserAddress(''); // Clear old userAddress
@@ -210,9 +212,15 @@ export class Blockchain {
         this.networkId = networkId;
         this._dispatcher.updateNetworkId(this.networkId);
         const shouldPollUserAddress = false;
-        this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
+        this._web3Wrapper = new Web3Wrapper(provider);
+        this._blockchainWatcher = new BlockchainWatcher(
+            this._dispatcher,
+            this._web3Wrapper,
+            this.networkId,
+            shouldPollUserAddress,
+        );
         this._zeroEx.setProvider(provider, this.networkId);
-        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
+        this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
         this._dispatcher.updateProviderType(ProviderType.Ledger);
     }
     public async updateProviderToInjectedAsync() {
@@ -222,20 +230,26 @@ export class Blockchain {
             return; // Going from injected to injected, so we noop
         }
 
-        this._web3Wrapper.destroy();
+        this._blockchainWatcher.destroy();
 
         const provider = this._cachedProvider;
         this.networkId = this._cachedProviderNetworkId;
 
         const shouldPollUserAddress = true;
-        this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
+        this._web3Wrapper = new Web3Wrapper(provider);
+        this._blockchainWatcher = new BlockchainWatcher(
+            this._dispatcher,
+            this._web3Wrapper,
+            this.networkId,
+            shouldPollUserAddress,
+        );
 
-        this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
+        this._userAddress = await this.getFirstAccountIfExistsAsync();
 
         this._zeroEx.setProvider(provider, this.networkId);
 
         await this.fetchTokenInformationAsync();
-        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
+        this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
         this._dispatcher.updateProviderType(ProviderType.Injected);
         delete this._ledgerSubprovider;
         delete this._cachedProvider;
@@ -428,9 +442,9 @@ export class Blockchain {
             gasPrice: this._defaultGasPrice,
         });
     }
-    public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
-        const balance = await this._web3Wrapper.getBalanceInEthAsync(owner);
-        return balance;
+    public async getBalanceInWeiAsync(owner: string): Promise<BigNumber> {
+        const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(owner);
+        return balanceInWei;
     }
     public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
         utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
@@ -484,10 +498,10 @@ export class Blockchain {
     // by-passes the web3Wrapper logic for updating the prevUserAddress. We therefore need to
     // manually update it. This should only be called by the LedgerConfigDialog.
     public updateWeb3WrapperPrevUserAddress(newUserAddress: string) {
-        this._web3Wrapper.updatePrevUserAddress(newUserAddress);
+        this._blockchainWatcher.updatePrevUserAddress(newUserAddress);
     }
     public destroy() {
-        this._web3Wrapper.destroy();
+        this._blockchainWatcher.destroy();
         this._stopWatchingExchangeLogFillEvents();
     }
     public async fetchTokenInformationAsync() {
@@ -540,6 +554,13 @@ export class Blockchain {
 
         this._dispatcher.updateBlockchainIsLoaded(true);
     }
+    public async getFirstAccountIfExistsAsync() {
+        const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
+        if (_.isEmpty(addresses)) {
+            return '';
+        }
+        return addresses[0];
+    }
     private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
         txHash: string,
     ): Promise<TransactionReceiptWithDecodedLogs> {
@@ -736,11 +757,18 @@ export class Blockchain {
         this._zeroEx = new ZeroEx(provider, zeroExConfigs);
         this._updateProviderName(injectedWeb3);
         const shouldPollUserAddress = true;
-        this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
-        this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
+        this._web3Wrapper = new Web3Wrapper(provider);
+        this._blockchainWatcher = new BlockchainWatcher(
+            this._dispatcher,
+            this._web3Wrapper,
+            this.networkId,
+            shouldPollUserAddress,
+        );
+
+        this._userAddress = await this.getFirstAccountIfExistsAsync();
         this._dispatcher.updateUserAddress(this._userAddress);
         await this.fetchTokenInformationAsync();
-        this._web3Wrapper.startEmittingNetworkConnectionAndUserBalanceState();
+        this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
         await this._rehydrateStoreWithContractEvents();
     }
     private _updateProviderName(injectedWeb3: Web3) {
@@ -752,7 +780,7 @@ export class Blockchain {
     }
     private async _instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
         const c = await contract(artifact);
-        const providerObj = this._web3Wrapper.getProviderObj();
+        const providerObj = this._web3Wrapper.getProvider();
         c.setProvider(providerObj);
 
         const artifactNetworkConfigs = artifact.networks[this.networkId];
diff --git a/packages/website/ts/web3_wrapper.ts b/packages/website/ts/blockchain_watcher.ts
index fca98ac8f..af5bafc0c 100644
--- a/packages/website/ts/web3_wrapper.ts
+++ b/packages/website/ts/blockchain_watcher.ts
@@ -1,60 +1,32 @@
 import { BigNumber, intervalUtils, promisify } from '@0xproject/utils';
-import { Web3Wrapper as Web3WrapperBase } from '@0xproject/web3-wrapper';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { utils } from 'ts/utils/utils';
-import * as Web3 from 'web3';
 
-export class Web3Wrapper extends Web3WrapperBase {
+export class BlockchainWatcher {
     private _dispatcher: Dispatcher;
-    private _web3: Web3;
+    private _web3Wrapper: Web3Wrapper;
     private _prevNetworkId: number;
     private _shouldPollUserAddress: boolean;
     private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
-    private _prevUserEtherBalanceInEth: BigNumber;
+    private _prevUserEtherBalanceInWei: BigNumber;
     private _prevUserAddress: string;
     constructor(
         dispatcher: Dispatcher,
-        provider: Web3.Provider,
+        web3Wrapper: Web3Wrapper,
         networkIdIfExists: number,
         shouldPollUserAddress: boolean,
     ) {
-        super(provider);
         this._dispatcher = dispatcher;
         this._prevNetworkId = networkIdIfExists;
         this._shouldPollUserAddress = shouldPollUserAddress;
-
-        this._web3 = new Web3();
-        this._web3.setProvider(provider);
-    }
-    public async getFirstAccountIfExistsAsync() {
-        const addresses = await this.getAvailableAddressesAsync();
-        if (_.isEmpty(addresses)) {
-            return '';
-        }
-        return addresses[0];
-    }
-    public getProviderObj() {
-        return this._web3.currentProvider;
-    }
-    public async getNetworkIdIfExistsAsync(): Promise<number | undefined> {
-        try {
-            const networkId = await this.getNetworkIdAsync();
-            return Number(networkId);
-        } catch (err) {
-            return undefined;
-        }
-    }
-    public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
-        const balanceInWei = await this.getBalanceInWeiAsync(owner);
-        const balanceEthOldBigNumber = this._web3.fromWei(balanceInWei, 'ether');
-        const balanceEth = new BigNumber(balanceEthOldBigNumber);
-        return balanceEth;
+        this._web3Wrapper = web3Wrapper;
     }
     public destroy() {
         this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
         // HACK: stop() is only available on providerEngine instances
-        const provider = this._web3.currentProvider;
+        const provider = this._web3Wrapper.getProvider();
         if (!_.isUndefined((provider as any).stop)) {
             (provider as any).stop();
         }
@@ -69,26 +41,32 @@ export class Web3Wrapper extends Web3WrapperBase {
         }
 
         let prevNodeVersion: string;
-        this._prevUserEtherBalanceInEth = new BigNumber(0);
+        this._prevUserEtherBalanceInWei = new BigNumber(0);
         this._dispatcher.updateNetworkId(this._prevNetworkId);
         this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
             async () => {
                 // Check for network state changes
-                const currentNetworkId = await this.getNetworkIdIfExistsAsync();
+                let currentNetworkId;
+                try {
+                    currentNetworkId = await this._web3Wrapper.getNetworkIdAsync();
+                } catch (err) {
+                    // Noop
+                }
                 if (currentNetworkId !== this._prevNetworkId) {
                     this._prevNetworkId = currentNetworkId;
                     this._dispatcher.updateNetworkId(currentNetworkId);
                 }
 
                 // Check for node version changes
-                const currentNodeVersion = await this.getNodeVersionAsync();
+                const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
                 if (currentNodeVersion !== prevNodeVersion) {
                     prevNodeVersion = currentNodeVersion;
                     this._dispatcher.updateNodeVersion(currentNodeVersion);
                 }
 
                 if (this._shouldPollUserAddress) {
-                    const userAddressIfExists = await this.getFirstAccountIfExistsAsync();
+                    const addresses = await this._web3Wrapper.getAvailableAddressesAsync();
+                    const userAddressIfExists = addresses[0] || '';
                     // Update makerAddress on network change
                     if (this._prevUserAddress !== userAddressIfExists) {
                         this._prevUserAddress = userAddressIfExists;
@@ -97,13 +75,13 @@ export class Web3Wrapper extends Web3WrapperBase {
 
                     // Check for user ether balance changes
                     if (!_.isEmpty(userAddressIfExists)) {
-                        await this._updateUserEtherBalanceAsync(userAddressIfExists);
+                        await this._updateUserWeiBalanceAsync(userAddressIfExists);
                     }
                 } else {
                     // This logic is primarily for the Ledger, since we don't regularly poll for the address
                     // we simply update the balance for the last fetched address.
                     if (!_.isEmpty(this._prevUserAddress)) {
-                        await this._updateUserEtherBalanceAsync(this._prevUserAddress);
+                        await this._updateUserWeiBalanceAsync(this._prevUserAddress);
                     }
                 }
             },
@@ -114,11 +92,11 @@ export class Web3Wrapper extends Web3WrapperBase {
             },
         );
     }
-    private async _updateUserEtherBalanceAsync(userAddress: string) {
-        const balance = await this.getBalanceInEthAsync(userAddress);
-        if (!balance.eq(this._prevUserEtherBalanceInEth)) {
-            this._prevUserEtherBalanceInEth = balance;
-            this._dispatcher.updateUserEtherBalance(balance);
+    private async _updateUserWeiBalanceAsync(userAddress: string) {
+        const balanceInWei = await this._web3Wrapper.getBalanceInWeiAsync(userAddress);
+        if (!balanceInWei.eq(this._prevUserEtherBalanceInWei)) {
+            this._prevUserEtherBalanceInWei = balanceInWei;
+            this._dispatcher.updateUserWeiBalance(balanceInWei);
         }
     }
     private _stopEmittingNetworkConnectionAndUserBalanceStateAsync() {
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 5c61f0d57..72ebe1f67 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,3 +1,4 @@
+import { ZeroEx } from '0x.js';
 import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import Dialog from 'material-ui/Dialog';
@@ -7,6 +8,7 @@ import { Blockchain } from 'ts/blockchain';
 import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
 import { Side, Token } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 interface EthWethConversionDialogProps {
     blockchain: Blockchain;
@@ -17,7 +19,7 @@ interface EthWethConversionDialogProps {
     onCancelled: () => void;
     isOpen: boolean;
     token: Token;
-    etherBalance: BigNumber;
+    etherBalanceInWei: BigNumber;
     lastForceTokenStateRefetch: number;
 }
 
@@ -75,6 +77,7 @@ export class EthWethConversionDialog extends React.Component<
                 ? 'Convert your Ether into a tokenized, tradable form.'
                 : "Convert your Wrapped Ether back into it's native form.";
         const isWrappedVersion = this.props.direction === Side.Receive;
+        const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH);
         return (
             <div>
                 <div className="pb2">{explanation}</div>
@@ -103,7 +106,7 @@ export class EthWethConversionDialog extends React.Component<
                             />
                         ) : (
                             <EthAmountInput
-                                balance={this.props.etherBalance}
+                                balance={etherBalanceInEth}
                                 amount={this.state.value}
                                 onChange={this._onValueChange.bind(this)}
                                 shouldCheckBalance={true}
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 8a242cd33..87b75ed95 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,3 +1,4 @@
+import { ZeroEx } from '0x.js';
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
@@ -160,14 +161,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     }
     private _renderAddressTableRows() {
         const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
-            const balance = this.state.addressBalances[i];
+            const balanceInWei = this.state.addressBalances[i];
             const addressTooltipId = `address-${userAddress}`;
             const balanceTooltipId = `balance-${userAddress}`;
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
             // We specifically prefix kovan ETH.
             // TODO: We should probably add prefixes for all networks
             const isKovanNetwork = networkName === 'Kovan';
-            const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
+            const balanceInEth = ZeroEx.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH);
+            const balanceString = `${balanceInEth.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
             return (
                 <TableRow key={userAddress} style={{ height: 40 }}>
                     <TableRowColumn colSpan={2}>
@@ -204,7 +206,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress);
         // tslint:disable-next-line:no-floating-promises
         this.props.blockchain.fetchTokenInformationAsync();
-        this.props.dispatcher.updateUserEtherBalance(selectAddressBalance);
+        this.props.dispatcher.updateUserWeiBalance(selectAddressBalance);
         this.setState({
             stepIndex: LedgerSteps.CONNECT,
         });
@@ -233,8 +235,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         try {
             userAddresses = await this._getUserAddressesAsync();
             for (const address of userAddresses) {
-                const balance = await this.props.blockchain.getBalanceInEthAsync(address);
-                addressBalances.push(balance);
+                const balanceInWei = await this.props.blockchain.getBalanceInWeiAsync(address);
+                addressBalances.push(balanceInWei);
             }
         } catch (err) {
             utils.consoleLog(`Ledger error: ${JSON.stringify(err)}`);
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index 62bafdba7..8e13d0aae 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -18,7 +18,7 @@ interface EthWethConversionButtonProps {
     ethToken: Token;
     dispatcher: Dispatcher;
     blockchain: Blockchain;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     isOutdatedWrappedEther: boolean;
     onConversionSuccessful?: () => void;
     isDisabled?: boolean;
@@ -74,7 +74,7 @@ export class EthWethConversionButton extends React.Component<
                     isOpen={this.state.isEthConversionDialogVisible}
                     onComplete={this._onConversionAmountSelectedAsync.bind(this)}
                     onCancelled={this._toggleConversionDialog.bind(this)}
-                    etherBalance={this.props.userEtherBalance}
+                    etherBalanceInWei={this.props.userEtherBalanceInWei}
                     token={this.props.ethToken}
                     lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                 />
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 7ac5d5c9c..8aac31917 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -34,7 +34,7 @@ interface EthWrappersProps {
     dispatcher: Dispatcher;
     tokenByAddress: TokenByAddress;
     userAddress: string;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     lastForceTokenStateRefetch: number;
 }
 
@@ -98,6 +98,10 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             EtherscanLinkSuffixes.Address,
         );
         const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
+        const userEtherBalanceInEth = ZeroEx.toUnitAmount(
+            this.props.userEtherBalanceInWei,
+            constants.DECIMAL_PLACES_ETH,
+        );
         return (
             <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
                 <div className="relative">
@@ -143,9 +147,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                             </div>
                                         </div>
                                     </TableRowColumn>
-                                    <TableRowColumn>
-                                        {this.props.userEtherBalance.toFixed(PRECISION)} ETH
-                                    </TableRowColumn>
+                                    <TableRowColumn>{userEtherBalanceInEth.toFixed(PRECISION)} ETH</TableRowColumn>
                                     <TableRowColumn>
                                         <EthWethConversionButton
                                             refetchEthTokenStateAsync={this._refetchEthTokenStateAsync.bind(this)}
@@ -157,7 +159,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                             ethToken={etherToken}
                                             dispatcher={this.props.dispatcher}
                                             blockchain={this.props.blockchain}
-                                            userEtherBalance={this.props.userEtherBalance}
+                                            userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                                         />
                                     </TableRowColumn>
                                 </TableRow>
@@ -184,7 +186,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                             ethToken={etherToken}
                                             dispatcher={this.props.dispatcher}
                                             blockchain={this.props.blockchain}
-                                            userEtherBalance={this.props.userEtherBalance}
+                                            userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                                         />
                                     </TableRowColumn>
                                 </TableRow>
@@ -304,7 +306,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                 ethToken={outdatedEtherToken}
                                 dispatcher={this.props.dispatcher}
                                 blockchain={this.props.blockchain}
-                                userEtherBalance={this.props.userEtherBalance}
+                                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                                 onConversionSuccessful={onConversionSuccessful}
                             />
                         </TableRowColumn>
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index d71e821c6..ad437acdb 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -46,7 +46,7 @@ export interface PortalAllProps {
     providerType: ProviderType;
     screenWidth: ScreenWidths;
     tokenByAddress: TokenByAddress;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     userAddress: string;
     shouldBlockchainErrDialogBeOpen: boolean;
     userSuppliedOrderCache: Order;
@@ -279,7 +279,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                 dispatcher={this.props.dispatcher}
                 tokenByAddress={this.props.tokenByAddress}
                 userAddress={this.props.userAddress}
-                userEtherBalance={this.props.userEtherBalance}
+                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                 lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
             />
         );
@@ -306,7 +306,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                 tokenByAddress={this.props.tokenByAddress}
                 trackedTokens={trackedTokens}
                 userAddress={this.props.userAddress}
-                userEtherBalance={this.props.userEtherBalance}
+                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                 networkId={this.props.networkId}
                 lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
             />
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 7e7596fd7..3c285803b 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -79,7 +79,7 @@ interface TokenBalancesProps {
     tokenByAddress: TokenByAddress;
     trackedTokens: Token[];
     userAddress: string;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     networkId: number;
     lastForceTokenStateRefetch: number;
 }
@@ -119,11 +119,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         this._isUnmounted = true;
     }
     public componentWillReceiveProps(nextProps: TokenBalancesProps) {
-        if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
+        if (nextProps.userEtherBalanceInWei !== this.props.userEtherBalanceInWei) {
             if (this.state.isBalanceSpinnerVisible) {
-                const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
+                const receivedAmountInWei = nextProps.userEtherBalanceInWei.minus(this.props.userEtherBalanceInWei);
+                const receivedAmountInEth = ZeroEx.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH);
                 const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-                this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} ${networkName} Ether`);
+                this.props.dispatcher.showFlashMessage(
+                    `Received ${receivedAmountInEth.toString(10)} ${networkName} Ether`,
+                );
             }
             this.setState({
                 isBalanceSpinnerVisible: false,
@@ -205,6 +208,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                   token balances in order to execute trades.<br> \
                                   Toggling sets an allowance for the<br> \
                                   smart contract so you can start trading that token.';
+        const userEtherBalanceInEth = ZeroEx.toUnitAmount(
+            this.props.userEtherBalanceInWei,
+            constants.DECIMAL_PLACES_ETH,
+        );
         return (
             <div className="lg-px4 md-px4 sm-px1 pb2">
                 <h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3>
@@ -241,7 +248,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                 <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />
                             </TableRowColumn>
                             <TableRowColumn>
-                                {this.props.userEtherBalance.toFixed(PRECISION)} ETH
+                                {userEtherBalanceInEth.toFixed(PRECISION)} ETH
                                 {this.state.isBalanceSpinnerVisible && (
                                     <span className="pl1">
                                         <i className="zmdi zmdi-spinner zmdi-hc-spin" />
diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts
index befa16bdb..725564ead 100644
--- a/packages/website/ts/containers/portal.ts
+++ b/packages/website/ts/containers/portal.ts
@@ -21,7 +21,7 @@ interface ConnectedState {
     providerType: ProviderType;
     tokenByAddress: TokenByAddress;
     lastForceTokenStateRefetch: number;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     screenWidth: ScreenWidths;
     shouldBlockchainErrDialogBeOpen: boolean;
     userAddress: string;
@@ -72,7 +72,7 @@ const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): Conne
         tokenByAddress: state.tokenByAddress,
         lastForceTokenStateRefetch: state.lastForceTokenStateRefetch,
         userAddress: state.userAddress,
-        userEtherBalance: state.userEtherBalance,
+        userEtherBalanceInWei: state.userEtherBalanceInWei,
         userSuppliedOrderCache: state.userSuppliedOrderCache,
         flashMessage: state.flashMessage,
         translate: state.translate,
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 5c40ded2c..e40d435e0 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -155,7 +155,7 @@ export class Dispatcher {
             type: ActionTypes.UpdateOrderECSignature,
         });
     }
-    public updateUserEtherBalance(balance: BigNumber) {
+    public updateUserWeiBalance(balance: BigNumber) {
         this._dispatch({
             data: balance,
             type: ActionTypes.UpdateUserEtherBalance,
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index 1f489db85..1d43e4ffb 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -38,7 +38,7 @@ export interface State {
     tokenByAddress: TokenByAddress;
     lastForceTokenStateRefetch: number;
     userAddress: string;
-    userEtherBalance: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
     userSuppliedOrderCache: Order;
 
@@ -77,7 +77,7 @@ const INITIAL_STATE: State = {
     tokenByAddress: {},
     lastForceTokenStateRefetch: moment().unix(),
     userAddress: '',
-    userEtherBalance: new BigNumber(0),
+    userEtherBalanceInWei: new BigNumber(0),
     userSuppliedOrderCache: undefined,
 
     // Docs
@@ -138,7 +138,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action) {
         case ActionTypes.UpdateUserEtherBalance: {
             return {
                 ...state,
-                userEtherBalance: action.data,
+                userEtherBalanceInWei: action.data,
             };
         }