Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into feature/website/onboarding-flow-allowances

39 files changed, 156 insertions, 167 deletions

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 7156e700b..b968a3147 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,5 +1,4 @@
 import { colors, Networks } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
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 d647bba80..9ac78e80e 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -20,7 +20,7 @@ interface EthWethConversionDialogProps {
     onCancelled: () => void;
     isOpen: boolean;
     token: Token;
-    etherBalanceInWei: BigNumber;
+    etherBalanceInWei?: BigNumber;
     lastForceTokenStateRefetch: number;
 }
 
@@ -60,7 +60,7 @@ export class EthWethConversionDialog extends React.Component<
             <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
         ];
         const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
-        return (
+        return !_.isUndefined(this.props.etherBalanceInWei) ? (
             <Dialog
                 title={title}
                 titleStyle={{ fontWeight: 100 }}
@@ -70,7 +70,7 @@ export class EthWethConversionDialog extends React.Component<
             >
                 {this._renderConversionDialogBody()}
             </Dialog>
-        );
+        ) : null;
     }
     private _renderConversionDialogBody(): React.ReactNode {
         const explanation =
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index ac0b27cdc..f6594b9d5 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index 2fb35cc1c..4b91a2ebd 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;
-    userEtherBalanceInWei?: BigNumber;
+    userEtherBalanceInWei: BigNumber;
     isOutdatedWrappedEther: boolean;
     onConversionSuccessful?: () => void;
     isDisabled?: boolean;
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 1db5ff77f..ca8634693 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -20,7 +20,6 @@ import {
 } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
 
 const DATE_FORMAT = 'D/M/YY';
 const ICON_DIMENSION = 40;
@@ -35,6 +34,7 @@ interface EthWrappersProps {
     userAddress: string;
     userEtherBalanceInWei?: BigNumber;
     lastForceTokenStateRefetch: number;
+    isFullWidth?: boolean;
 }
 
 interface EthWrappersState {
@@ -43,6 +43,9 @@ interface EthWrappersState {
 }
 
 export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
+    public static defaultProps: Partial<EthWrappersProps> = {
+        isFullWidth: false,
+    };
     private _isUnmounted: boolean;
     constructor(props: EthWrappersProps) {
         super(props);
@@ -93,12 +96,12 @@ 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 = Web3Wrapper.toUnitAmount(
-            this.props.userEtherBalanceInWei,
-            constants.DECIMAL_PLACES_ETH,
-        );
+        const userEtherBalanceInEth = !_.isUndefined(this.props.userEtherBalanceInWei)
+            ? Web3Wrapper.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH)
+            : undefined;
+        const rootClassName = this.props.isFullWidth ? 'clearfix' : 'clearfix lg-px4 md-px4 sm-px2';
         return (
-            <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
+            <div className={rootClassName} style={{ minHeight: 600 }}>
                 <div className="relative">
                     <h3>ETH Wrapper</h3>
                     <div className="absolute" style={{ top: 0, right: 0 }}>
@@ -116,7 +119,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                 <div>
                     <div className="py2">Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.</div>
                     <div>
-                        <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
+                        <Table selectable={false} style={{ backgroundColor: 'transparent' }}>
                             <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                                 <TableRow>
                                     <TableHeaderColumn>ETH Token</TableHeaderColumn>
@@ -143,7 +146,11 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                         </div>
                                     </TableRowColumn>
                                     <TableRowColumn>
-                                        {userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH
+                                        {!_.isUndefined(userEtherBalanceInEth) ? (
+                                            `${userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH`
+                                        ) : (
+                                            <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+                                        )}
                                     </TableRowColumn>
                                     <TableRowColumn>
                                         <EthWethConversionButton
@@ -157,6 +164,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                             dispatcher={this.props.dispatcher}
                                             blockchain={this.props.blockchain}
                                             userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                                            isDisabled={_.isUndefined(userEtherBalanceInEth)}
                                         />
                                     </TableRowColumn>
                                 </TableRow>
@@ -203,7 +211,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                         it to the updated WETH token.
                     </div>
                     <div>
-                        <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
+                        <Table selectable={false} style={{ backgroundColor: 'transparent' }}>
                             <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                                 <TableRow>
                                     <TableHeaderColumn>WETH Version</TableHeaderColumn>
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 0168ec8f6..b6b52993e 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -39,6 +39,8 @@ interface FillOrderProps {
     initialOrder: Order;
     dispatcher: Dispatcher;
     lastForceTokenStateRefetch: number;
+    isFullWidth?: boolean;
+    shouldHideHeader?: boolean;
 }
 
 interface FillOrderState {
@@ -61,6 +63,10 @@ interface FillOrderState {
 }
 
 export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
+    public static defaultProps: Partial<FillOrderProps> = {
+        isFullWidth: false,
+        shouldHideHeader: false,
+    };
     private _isUnmounted: boolean;
     constructor(props: FillOrderProps) {
         super(props);
@@ -97,10 +103,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         this._isUnmounted = true;
     }
     public render(): React.ReactNode {
+        const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2';
         return (
-            <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
-                <h3>Fill an order</h3>
-                <Divider />
+            <div className={rootClassName} style={{ minHeight: 600 }}>
+                {!this.props.shouldHideHeader && (
+                    <div>
+                        <h3>Fill an order</h3>
+                        <Divider />
+                    </div>
+                )}
                 <div>
                     {!this.props.isOrderInUrl && (
                         <div>
diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
index 04ef28e70..8ef58328e 100644
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -6,7 +6,6 @@ import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Input } from 'ts/components/ui/input';
 import { Text } from 'ts/components/ui/text';
-import { styled } from 'ts/style/theme';
 import { backendClient } from 'ts/utils/backend_client';
 
 export interface SubscribeFormProps {}
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 5f968a5e4..52e3b73cd 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -47,6 +47,8 @@ interface GenerateOrderFormProps {
     sideToAssetToken: SideToAssetToken;
     tokenByAddress: TokenByAddress;
     lastForceTokenStateRefetch: number;
+    isFullWidth?: boolean;
+    shouldHideHeader?: boolean;
 }
 
 interface GenerateOrderFormState {
@@ -56,6 +58,10 @@ interface GenerateOrderFormState {
 }
 
 export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> {
+    public static defaultProps: Partial<GenerateOrderFormProps> = {
+        isFullWidth: false,
+        shouldHideHeader: false,
+    };
     constructor(props: GenerateOrderFormProps) {
         super(props);
         this.state = {
@@ -80,10 +86,15 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
         const initialTakerAddress =
             this.props.orderTakerAddress === constants.NULL_ADDRESS ? '' : this.props.orderTakerAddress;
+        const rootClassName = this.props.isFullWidth ? 'clearfix mb2' : 'clearfix mb2 lg-px4 md-px4 sm-px2';
         return (
-            <div className="clearfix mb2 lg-px4 md-px4 sm-px2">
-                <h3>Generate an order</h3>
-                <Divider />
+            <div className={rootClassName}>
+                {!this.props.shouldHideHeader && (
+                    <div>
+                        <h3>Generate an order</h3>
+                        <Divider />
+                    </div>
+                )}
                 <div className="mx-auto" style={{ maxWidth: 580 }}>
                     <div className="pt3">
                         <div className="mx-auto clearfix">
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index ca4b89f77..3e61e1b8b 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,6 +1,5 @@
 import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
-import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
@@ -8,7 +7,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { BalanceErrs, Token, TokenState } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
-import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index a4dc01ba8..6ba7584a7 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import { AddressInput } from 'ts/components/inputs/address_input';
 import { Identicon } from 'ts/components/ui/identicon';
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index c2c4dd63b..0bd36781e 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,5 +1,4 @@
 import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
index e5d152e3e..35e917eec 100644
--- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
@@ -1,5 +1,5 @@
 import { colors } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import Paper from 'material-ui/Paper';
@@ -15,27 +15,14 @@ import { EthWrappers } from 'ts/components/eth_wrappers';
 import { FillOrder } from 'ts/components/fill_order';
 import { Footer } from 'ts/components/footer';
 import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
-import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
 import { FlashMessage } from 'ts/components/ui/flash_message';
-import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
 import { localStorage } from 'ts/local_storage/local_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
-import { validator } from 'ts/schemas/validator';
-import {
-    BlockchainErrs,
-    Environments,
-    HashData,
-    Order,
-    ProviderType,
-    ScreenWidths,
-    TokenByAddress,
-    WebsitePaths,
-} from 'ts/types';
+import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { orderParser } from 'ts/utils/order_parser';
diff --git a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
index 7469ca14e..1dd164f8b 100644
--- a/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
@@ -1,8 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import { MenuItem } from 'ts/components/ui/menu_item';
-import { Environments, WebsitePaths } from 'ts/types';
-import { configs } from 'ts/utils/configs';
+import { WebsitePaths } from 'ts/types';
 
 export interface LegacyPortalMenuProps {
     menuItemStyle: React.CSSProperties;
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 158ac23ec..9879cd387 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,11 +1,9 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
-import { zIndex } from 'ts/style/z_index';
 
 export interface Step {
     target: string;
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index eb34a87f2..155c70c5f 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { colors } from '@0xproject/react-shared';
 import { Container } from 'ts/components/ui/container';
 import { Island } from 'ts/components/ui/island';
 
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index f98346101..39dab77f5 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -3,8 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { MenuItem } from 'ts/components/ui/menu_item';
 import { colors } from 'ts/style/colors';
-import { Environments, WebsitePaths } from 'ts/types';
-import { configs } from 'ts/utils/configs';
+import { WebsitePaths } from 'ts/types';
 
 export interface MenuTheme {
     paddingLeft: number;
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 02a58cbf3..a21ea0f0d 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -3,7 +3,7 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
 import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -272,10 +272,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
                         networkId={this.props.networkId}
                     />
-                    <PortalDisclaimerDialog
-                        isOpen={this.state.isDisclaimerDialogOpen}
-                        onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
-                    />
                     <FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
                     {this.props.blockchainIsLoaded && (
                         <LedgerConfigDialog
@@ -400,18 +396,24 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             },
         ];
         return (
-            <Switch>
-                {_.map(accountManagementItems, item => {
-                    return (
-                        <Route
-                            key={item.pathName}
-                            path={item.pathName}
-                            render={this._renderAccountManagementItem.bind(this, item)}
-                        />
-                    );
-                })}}
-                <Route render={this._renderNotFoundMessage.bind(this)} />
-            </Switch>
+            <div>
+                <Switch>
+                    {_.map(accountManagementItems, item => {
+                        return (
+                            <Route
+                                key={item.pathName}
+                                path={item.pathName}
+                                render={this._renderAccountManagementItem.bind(this, item)}
+                            />
+                        );
+                    })}}
+                    <Route render={this._renderNotFoundMessage.bind(this)} />
+                </Switch>
+                <PortalDisclaimerDialog
+                    isOpen={this.state.isDisclaimerDialogOpen}
+                    onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
+                />
+            </div>
         );
     }
     private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode {
@@ -432,6 +434,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 userAddress={this.props.userAddress}
                 userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                 lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                isFullWidth={true}
             />
         );
     }
@@ -441,6 +444,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 tokenByAddress={this.props.tokenByAddress}
                 userAddress={this.props.userAddress}
                 networkId={this.props.networkId}
+                isFullWidth={true}
+                shouldHideHeader={true}
+                isScrollable={false}
             />
         );
     }
@@ -450,6 +456,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 blockchain={this._blockchain}
                 hashData={this.props.hashData}
                 dispatcher={this.props.dispatcher}
+                isFullWidth={true}
+                shouldHideHeader={true}
             />
         );
     }
@@ -469,6 +477,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 tokenByAddress={this.props.tokenByAddress}
                 dispatcher={this.props.dispatcher}
                 lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                isFullWidth={true}
+                shouldHideHeader={true}
             />
         );
     }
@@ -486,6 +496,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                 networkId={this.props.networkId}
                 lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                isFullWidth={true}
             />
         );
     }
diff --git a/packages/website/ts/components/portal/section.tsx b/packages/website/ts/components/portal/section.tsx
index 9b172aae0..455ed07c9 100644
--- a/packages/website/ts/components/portal/section.tsx
+++ b/packages/website/ts/components/portal/section.tsx
@@ -1,4 +1,3 @@
-import { Styles } from '@0xproject/react-shared';
 import * as React from 'react';
 
 export interface SectionProps {
diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx
index 629522bbb..07432a926 100644
--- a/packages/website/ts/components/redirecter.tsx
+++ b/packages/website/ts/components/redirecter.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { constants } from 'ts/utils/constants';
 
 interface RedirecterProps {
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 41febebe9..fbb634164 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -6,9 +6,8 @@ import * as React from 'react';
 import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
 import { Container } from 'ts/components/ui/container';
 import { Island } from 'ts/components/ui/island';
-import { TokenIcon } from 'ts/components/ui/token_icon';
 import { colors } from 'ts/style/colors';
-import { Token, WebsiteBackendRelayerInfo } from 'ts/types';
+import { WebsiteBackendRelayerInfo } from 'ts/types';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index e42f8a81a..a5754180b 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -2,7 +2,6 @@ import { colors, EtherscanLinkSuffixes, Styles, utils as sharedUtils } from '@0x
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { TokenIcon } from 'ts/components/ui/token_icon';
 import { WebsiteBackendTokenInfo } from 'ts/types';
 
 export interface TopTokensProps {
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
index bf46caad9..a14ab54f5 100644
--- a/packages/website/ts/components/sidebar_header.tsx
+++ b/packages/website/ts/components/sidebar_header.tsx
@@ -1,9 +1,6 @@
 import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import * as React from 'react';
 
-const SHOW_DURATION_MS = 4000;
-
 interface SidebarHeaderProps {
     title: string;
     iconUrl: string;
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index f95bfb39d..86de71175 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,5 +1,4 @@
 import {
-    colors,
     constants as sharedConstants,
     EtherscanLinkSuffixes,
     Networks,
@@ -13,7 +12,6 @@ import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
-import RaisedButton from 'material-ui/RaisedButton';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
@@ -57,7 +55,7 @@ const TOKEN_COL_SPAN_SM = 1;
 
 const styles: Styles = {
     bgColor: {
-        backgroundColor: colors.grey50,
+        backgroundColor: 'transparent',
     },
 };
 
@@ -73,6 +71,7 @@ interface TokenBalancesProps {
     userEtherBalanceInWei: BigNumber;
     networkId: number;
     lastForceTokenStateRefetch: number;
+    isFullWidth?: boolean;
 }
 
 interface TokenBalancesState {
@@ -87,6 +86,7 @@ interface TokenBalancesState {
 export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
     public static defaultProps: Partial<TokenBalancesProps> = {
         userEtherBalanceInWei: new BigNumber(0),
+        isFullWidth: false,
     };
     private _isUnmounted: boolean;
     public constructor(props: TokenBalancesProps) {
@@ -169,7 +169,6 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             />,
         ];
         const isTestNetwork = utils.isTestNetwork(this.props.networkId);
-        const isKovanTestNetwork = this.props.networkId === constants.NETWORK_ID_KOVAN;
         const stubColumnStyle = {
             display: isTestNetwork ? 'none' : 'table-cell',
         };
@@ -187,8 +186,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             this.props.userEtherBalanceInWei,
             constants.DECIMAL_PLACES_ETH,
         );
+        const rootClassName = this.props.isFullWidth ? 'pb2' : 'lg-px4 md-px4 sm-px1 pb2';
         return (
-            <div className="lg-px4 md-px4 sm-px1 pb2">
+            <div className={rootClassName}>
                 <h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3>
                 <Divider />
                 <div className="pt2 pb2">
@@ -268,7 +268,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                 <div className="inline-block">Allowance</div>
                                 <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} />
                             </TableHeaderColumn>
-                            <TableHeaderColumn>Action</TableHeaderColumn>
+                            {isTestNetwork && <TableHeaderColumn>Action</TableHeaderColumn>}
                             {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>}
                         </TableRow>
                     </TableHeader>
@@ -370,17 +370,17 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                         refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)}
                     />
                 </TableRowColumn>
-                <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}>
-                    {isMintable && (
-                        <LifeCycleRaisedButton
-                            labelReady="Mint"
-                            labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>}
-                            labelComplete="Minted!"
-                            onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
-                        />
-                    )}
-                    {token.symbol === ZRX_TOKEN_SYMBOL &&
-                        utils.isTestNetwork(this.props.networkId) && (
+                {utils.isTestNetwork(this.props.networkId) && (
+                    <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}>
+                        {isMintable && (
+                            <LifeCycleRaisedButton
+                                labelReady="Mint"
+                                labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>}
+                                labelComplete="Minted!"
+                                onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
+                            />
+                        )}
+                        {token.symbol === ZRX_TOKEN_SYMBOL && (
                             <LifeCycleRaisedButton
                                 labelReady="Request"
                                 labelLoading="Sending..."
@@ -388,7 +388,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                 onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
                             />
                         )}
-                </TableRowColumn>
+                    </TableRowColumn>
+                )}
                 {this.props.screenWidth !== ScreenWidths.Sm && (
                     <TableRowColumn
                         style={{
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index dba08f85c..cb7c9b483 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -10,7 +10,6 @@ import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
-import { zIndex } from 'ts/style/z_index';
 import { ProviderType } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index 1ecb8389c..7937f2e9d 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/packages/website/ts/components/top_bar/provider_picker.tsx
@@ -1,11 +1,9 @@
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 
 interface ProviderPickerProps {
     networkId: number;
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 606fd845a..05cc6e3ad 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -6,15 +6,12 @@ import Menu from 'material-ui/Menu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import ReactTooltip = require('react-tooltip');
 import { Blockchain } from 'ts/blockchain';
 import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
 import { DrawerMenu } from 'ts/components/portal/drawer_menu';
-import { SidebarHeader } from 'ts/components/sidebar_header';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { DropDown } from 'ts/components/ui/drop_down';
-import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { zIndex } from 'ts/style/z_index';
 import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
@@ -165,6 +162,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)}
                 />
             </Link>,
+            <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none">
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)}
+                />
+            </Link>,
             <a
                 key="subMenuItem-whitePaper"
                 target="_blank"
@@ -379,6 +382,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                             </MenuItem>
                         </Link>
                     )}
+                    {!this._isViewingEthereumTypesDocs() && (
+                        <Link to={WebsitePaths.EthereumTypes} className="text-decoration-none">
+                            <MenuItem className="py2">
+                                {this.props.translate.get(Key.EthereumTypes, Deco.Cap)}{' '}
+                                {this.props.translate.get(Key.Docs, Deco.Cap)}
+                            </MenuItem>
+                        </Link>
+                    )}
                     {!this._isViewingPortal() && (
                         <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
                             <MenuItem className="py2">
@@ -418,8 +429,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         ) {
             return undefined;
         }
-
-        const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
         return (
             <div className="lg-hide md-hide">
                 <NestedSidebarMenu
@@ -507,6 +516,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     private _isViewingSubprovidersDocs(): boolean {
         return _.includes(this.props.location.pathname, WebsitePaths.Subproviders);
     }
+    private _isViewingEthereumTypesDocs(): boolean {
+        return _.includes(this.props.location.pathname, WebsitePaths.EthereumTypes);
+    }
     private _isViewingWiki(): boolean {
         return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
     }
diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx
index 1ca9d866f..84c0f70a8 100644
--- a/packages/website/ts/components/trade_history/trade_history.tsx
+++ b/packages/website/ts/components/trade_history/trade_history.tsx
@@ -13,6 +13,9 @@ interface TradeHistoryProps {
     tokenByAddress: TokenByAddress;
     userAddress: string;
     networkId: number;
+    isFullWidth?: boolean;
+    shouldHideHeader?: boolean;
+    isScrollable?: boolean;
 }
 
 interface TradeHistoryState {
@@ -20,6 +23,11 @@ interface TradeHistoryState {
 }
 
 export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> {
+    public static defaultProps: Partial<TradeHistoryProps> = {
+        isFullWidth: false,
+        shouldHideHeader: false,
+        isScrollable: true,
+    };
     private _fillPollingIntervalId: number;
     public constructor(props: TradeHistoryProps) {
         super(props);
@@ -38,13 +46,22 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
         window.scrollTo(0, 0);
     }
     public render(): React.ReactNode {
+        const rootClassName = !this.props.isFullWidth ? 'lg-px4 md-px4 sm-px2' : undefined;
         return (
-            <div className="lg-px4 md-px4 sm-px2">
-                <h3>Trade history</h3>
-                <Divider />
-                <div className="pt2" style={{ height: 608, overflow: 'scroll' }}>
-                    {this._renderTrades()}
-                </div>
+            <div className={rootClassName}>
+                {!this.props.shouldHideHeader && (
+                    <div>
+                        <h3>Trade history</h3>
+                        <Divider />
+                    </div>
+                )}
+                {this.props.isScrollable ? (
+                    <div className="pt2" style={{ height: 608, overflow: 'scroll' }}>
+                        {this._renderTrades()}
+                    </div>
+                ) : (
+                    this._renderTrades()
+                )}
             </div>
         );
     }
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 2c2941067..0330d1843 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,5 +1,4 @@
 import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 98a495581..db79ca1df 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
 import * as React from 'react';
 import { MaterialUIPosition } from 'ts/types';
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 1b032c112..0beb69123 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -2,7 +2,6 @@ import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import { utils } from 'ts/utils/utils';
 
 interface EtherScanIconProps {
     addressOrTxHash: string;
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index 802a7830a..de90b664f 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { colors } from 'ts/style/colors';
-import { Styleable } from 'ts/types';
 
 export interface IslandProps {
     style?: React.CSSProperties;
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index b06978f16..0c3ebcc0c 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,5 +1,4 @@
 import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index acca8194f..8b126a6d5 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -1,4 +1,3 @@
-import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index 0d86a6db5..a25550475 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { EthereumAddress } from 'ts/components/ui/ethereum_address';
 import { Identicon } from 'ts/components/ui/identicon';
-import { utils } from 'ts/utils/utils';
 
 const IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index 4a6000d1b..f1d1ae7d4 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,5 +1,4 @@
 import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
 import * as React from 'react';
 
 interface SwapIconProps {
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index d3e205d12..e90c1707d 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -1,8 +1,6 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
-import { Deco, Key } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
 
 export type TextTag = 'p' | 'div' | 'span' | 'label';
 
@@ -39,18 +37,3 @@ Text.defaultProps = {
 };
 
 Text.displayName = 'Text';
-
-interface TranslatedProps {
-    children: Key;
-    translate: Translate;
-    deco?: Deco;
-}
-
-export type TranslatedTextProps = TextProps & TranslatedProps;
-
-export const TranslatedText: React.StatelessComponent<TranslatedTextProps> = ({
-    translate,
-    children,
-    deco,
-    ...textProps,
-}) => <Text {...textProps}>{translate.get(children, deco)}</Text>;
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f8ec05790..cb1460ebf 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,25 +1,15 @@
-import {
-    constants as sharedConstants,
-    EtherscanLinkSuffixes,
-    Styles,
-    utils as sharedUtils,
-} from '@0xproject/react-shared';
+import { EtherscanLinkSuffixes, Styles, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import { ListItem } from 'material-ui/List';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
-import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward';
-import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
-import Close from 'material-ui/svg-icons/navigation/close';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
@@ -35,7 +25,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { zIndex } from 'ts/style/z_index';
 import {
-    BalanceErrs,
     BlockchainErrs,
     ProviderType,
     ScreenWidths,
@@ -135,7 +124,7 @@ const styles: Styles = {
 
 const ETHER_ICON_PATH = '/images/ether.png';
 const ICON_DIMENSION = 28;
-const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+const TOKEN_AMOUNT_DISPLAY_PRECISION = 5;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
@@ -146,10 +135,8 @@ const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
 const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 
 export class Wallet extends React.Component<WalletProps, WalletState> {
-    private _isUnmounted: boolean;
     constructor(props: WalletProps) {
         super(props);
-        this._isUnmounted = false;
         this.state = {
             wrappedEtherDirection: undefined,
             isHoveringSidebar: false,
@@ -183,7 +170,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderDisconnectedHeaderRows(): React.ReactElement<{}> {
-        const userAddress = this.props.userAddress;
         const primaryText = 'wallet';
         return (
             <StandardIconRow
@@ -445,14 +431,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         symbol: string,
         isLoading: boolean = false,
     ): React.ReactNode {
-        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-        const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION);
-        const result = `${formattedAmount} ${symbol}`;
-        return (
-            <PlaceHolder hideChildren={isLoading}>
-                <div style={styles.amountLabel}>{result}</div>
-            </PlaceHolder>
-        );
+        if (isLoading) {
+            return (
+                <PlaceHolder hideChildren={isLoading}>
+                    <div style={styles.amountLabel}>0.00 XXX</div>
+                </PlaceHolder>
+            );
+        } else {
+            const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+            const precision = Math.min(TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
+            const formattedAmount = unitAmount.toFixed(precision);
+            const result = `${formattedAmount} ${symbol}`;
+            return <div style={styles.amountLabel}>{result}</div>;
+        }
     }
     private _renderValue(
         amount: BigNumber,
@@ -507,17 +498,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             <IconButton iconName={buttonIconName} labelText={buttonLabel} onClick={onClick} color={colors.mediumBlue} />
         );
     }
-    private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]): TokenStateByAddress {
-        const trackedTokenStateByAddress: TokenStateByAddress = {};
-        _.each(tokenAddresses, tokenAddress => {
-            trackedTokenStateByAddress[tokenAddress] = {
-                balance: new BigNumber(0),
-                allowance: new BigNumber(0),
-                isLoaded: false,
-            };
-        });
-        return trackedTokenStateByAddress;
-    }
     private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void {
         this.setState({
             wrappedEtherDirection,
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index e3b88dc54..1015dce29 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -1,6 +1,5 @@
 import { Styles } from '@0xproject/react-shared';
 import FlatButton from 'material-ui/FlatButton';
-import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 50b64d05c..a5052735b 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -3,7 +3,6 @@ import { BigNumber, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
-import { ListItem } from 'material-ui/List';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';