1 files changed, 25 insertions, 13 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ac2fe0d31..dc48d6619 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -29,6 +29,7 @@ import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 import {
     BlockchainErrs,
     ProviderType,
@@ -86,7 +87,6 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     root: {
         width: '100%',
-        position: 'relative',
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
@@ -139,6 +139,12 @@ const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
 const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 
+const ActionButton = styled(FloatingActionButton)`
+    button {
+        position: static !important;
+    }
+`;
+
 export class Wallet extends React.Component<WalletProps, WalletState> {
     public static defaultProps = {
         style: {},
@@ -245,17 +251,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <ListItem
                     primaryText={
                         <div className="flex">
-                            <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+                            <ActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
                                 <ContentAdd />
-                            </FloatingActionButton>
-                            <FloatingActionButton
-                                mini={true}
-                                zDepth={0}
-                                className="px1"
-                                onClick={this.props.onRemoveToken}
-                            >
+                            </ActionButton>
+                            <ActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
                                 <ContentRemove />
-                            </FloatingActionButton>
+                            </ActionButton>
                             <div
                                 style={{
                                     paddingLeft: 10,
@@ -310,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             wrappedEtherDirection: Side.Deposit,
         };
         const key = ETHER_ITEM_KEY;
-        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row');
     }
     private _renderTokenRows(): React.ReactNode {
         const trackedTokens = this.props.trackedTokens;
@@ -321,8 +322,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
-    private _renderTokenRow(token: Token, _index: number): React.ReactNode {
+    private _renderTokenRow(token: Token, index: number): React.ReactNode {
         const tokenState = this.props.trackedTokenStateByAddress[token.address];
+        if (_.isUndefined(tokenState)) {
+            return null;
+        }
         const tokenLink = sharedUtils.getEtherScanLinkIfExists(
             token.address,
             this.props.networkId,
@@ -346,12 +350,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             },
         };
         const key = token.address;
+        const isLastRow = index === this.props.trackedTokens.length - 1;
         return this._renderBalanceRow(
             key,
             icon,
             primaryText,
             secondaryText,
             accessoryItemConfig,
+            isLastRow,
             isWeth ? 'weth-row' : undefined,
         );
     }
@@ -361,13 +367,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         primaryText: React.ReactNode,
         secondaryText: React.ReactNode,
         accessoryItemConfig: AccessoryItemConfig,
+        isLastRow: boolean,
         className?: string,
     ): React.ReactNode {
         const shouldShowWrapEtherItem =
             !_.isUndefined(this.state.wrappedEtherDirection) &&
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
-        const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem;
+        let additionalStyle;
+        if (shouldShowWrapEtherItem) {
+            additionalStyle = walletItemStyles.focusedItem;
+        } else if (!isLastRow) {
+            additionalStyle = styles.borderedItem;
+        }
         const style = { ...styles.tokenItem, ...additionalStyle };
         const etherToken = this._getEthToken();
         return (