Merge branch 'v2-prototype' into refactor/check-revert-reasons

* v2-prototype: (48 commits)
  Fix typos in comments
  Add modifier and tests for removeAuthorizedAddressAtIndex
  Update and add tests
  Change removeAuthorizedAddress => removeAuthorizedAddressAtIndex
  Move isFunctionRemoveAuthorizedAddress to test
  Fix usage of `popLastByte`
  Fix LibBytes is a library
  Remove `areBytesEqual`
  Fix usage of `contentAddress()`
  Clean low bits in bytes4
  Clean high bits in address
  Refactor LibBytes.readBytes4 for consistency
  Fix LibBytes.equals
  Add trailing garbage testcase for LibBytes.equals
  Rename bytes.equals
  Add slice and sliceDestructive
  Rename bytes.rawAddress and add bytes.contentAddress
  Rename read/writeBytesWithLength
  Using LibBytes for bytes
  Make LibBytes a library
  ...

# Conflicts:
#	packages/contracts/src/contracts/current/utils/Ownable/Ownable.sol
#	packages/contracts/test/libraries/lib_bytes.ts

17 files changed, 193 insertions, 189 deletions

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index b43ac1f2e..b0dcf5678 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -9,6 +9,7 @@ import { TokenIcon } from 'ts/components/ui/token_icon';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { DialogConfigs, Token, TokenByAddress, TokenVisibility } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 const TOKEN_ICON_DIMENSION = 100;
 const TILE_DIMENSION = 146;
@@ -134,7 +135,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
             if (
                 (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
-                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)
+                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked) ||
+                token.symbol === constants.ZRX_TOKEN_SYMBOL ||
+                token.symbol === constants.ETHER_TOKEN_SYMBOL
             ) {
                 return null; // Skip
             }
@@ -232,12 +235,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         this.props.onTokenChosen(newToken.address);
     }
     private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean): Promise<void> {
+        const resetState: AssetPickerState = {
+            ...this.state,
+            isAddingTokenToTracked: false,
+            assetView: AssetViews.ASSET_PICKER,
+            chosenTrackTokenAddress: undefined,
+        };
         if (!didUserAcceptTracking) {
-            this.setState({
-                isAddingTokenToTracked: false,
-                assetView: AssetViews.ASSET_PICKER,
-                chosenTrackTokenAddress: undefined,
-            });
+            this.setState(resetState);
             this._onCloseDialog();
             return;
         }
@@ -246,6 +251,10 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         });
         const tokenAddress = this.state.chosenTrackTokenAddress;
         const token = this.props.tokenByAddress[tokenAddress];
+        if (_.isUndefined(tokenAddress)) {
+            this.setState(resetState);
+            return;
+        }
         const newTokenEntry = {
             ...token,
         };
@@ -254,11 +263,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
 
         this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
-        this.setState({
-            isAddingTokenToTracked: false,
-            assetView: AssetViews.ASSET_PICKER,
-            chosenTrackTokenAddress: undefined,
-        });
+        this.setState(resetState);
         this.props.onTokenChosen(tokenAddress);
     }
 }
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 331899469..ec8d96191 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -42,7 +42,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
         } else {
             onboardingElement = (
-                <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+                <Popper
+                    referenceElement={this._getElementForStep()}
+                    placement={this._getCurrentStep().placement}
+                    positionFixed={true}
+                >
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index 4bd07769f..205a60afc 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -65,7 +65,7 @@ interface HeaderProps {
 const Header = (props: HeaderProps) => {
     return (
         <div className="flex flex-center py4">
-            <div className="flex flex-column mx-auto">
+            <div className="flex flex-column mx-auto items-center">
                 <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} />
                 <Text className="pt2" fontColor={colors.white}>
                     {props.displayMessage}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 11b3b43f4..4166fde53 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -107,26 +107,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
 const LEFT_COLUMN_WIDTH = 346;
 const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
-
-const styles: Styles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: colors.lightestGrey,
-    },
-    body: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-    },
-    leftColumn: {
-        width: LEFT_COLUMN_WIDTH,
-        height: '100%',
-    },
-    scrollContainer: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-        overflow: 'auto',
-    },
-};
+const LARGE_LAYOUT_MARGIN = 30;
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -245,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <div style={styles.root}>
+            <Container>
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -259,10 +240,14 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     blockchain={this._blockchain}
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
-                    style={{ backgroundColor: colors.lightestGrey }}
+                    style={{
+                        backgroundColor: colors.lightestGrey,
+                        position: 'fixed',
+                        zIndex: zIndex.topBar,
+                    }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
-                <div id="portal" style={styles.body}>
+                <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
                         <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
                         <Route
@@ -301,13 +286,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenByAddress={this.props.tokenByAddress}
                         tokenVisibility={tokenVisibility}
                     />
-                </div>
-                <PortalOnboardingFlow
-                    blockchain={this._blockchain}
-                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                />
-            </div>
+                </Container>
+            </Container>
         );
     }
     private _renderMainRoute(): React.ReactNode {
@@ -341,41 +321,48 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
     private _renderWallet(): React.ReactNode {
         const startOnboarding = this._renderStartOnboarding();
-        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+        const isMobile = utils.isMobile(this.props.screenWidth);
         // We need room to scroll down for mobile onboarding
         const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
-                {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Container marginBottom={marginBottom}>
-                    <Wallet
-                        style={
-                            !isMobile && this.props.isPortalOnboardingShowing
-                                ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
-                                : undefined
-                        }
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this._blockchain}
-                        blockchainIsLoaded={this.props.blockchainIsLoaded}
-                        blockchainErr={this.props.blockchainErr}
-                        dispatcher={this.props.dispatcher}
-                        tokenByAddress={this.props.tokenByAddress}
-                        trackedTokens={this._getCurrentTrackedTokens()}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        injectedProviderName={this.props.injectedProviderName}
-                        providerType={this.props.providerType}
-                        screenWidth={this.props.screenWidth}
-                        location={this.props.location}
-                        trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                        onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
-                        onAddToken={this._onAddToken.bind(this)}
-                        onRemoveToken={this._onRemoveToken.bind(this)}
-                        refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                    />
+                <Container>
+                    {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
+                    <Container marginBottom={marginBottom}>
+                        <Wallet
+                            style={
+                                !isMobile && this.props.isPortalOnboardingShowing
+                                    ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+                                    : undefined
+                            }
+                            userAddress={this.props.userAddress}
+                            networkId={this.props.networkId}
+                            blockchain={this._blockchain}
+                            blockchainIsLoaded={this.props.blockchainIsLoaded}
+                            blockchainErr={this.props.blockchainErr}
+                            dispatcher={this.props.dispatcher}
+                            tokenByAddress={this.props.tokenByAddress}
+                            trackedTokens={this._getCurrentTrackedTokens()}
+                            userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                            lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                            injectedProviderName={this.props.injectedProviderName}
+                            providerType={this.props.providerType}
+                            screenWidth={this.props.screenWidth}
+                            location={this.props.location}
+                            trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                            onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                            onAddToken={this._onAddToken.bind(this)}
+                            onRemoveToken={this._onRemoveToken.bind(this)}
+                            refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                        />
+                    </Container>
+                    {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
                 </Container>
-                {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
             </div>
         );
     }
@@ -551,7 +538,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderRelayerIndexSection(): React.ReactNode {
         return (
             <Section
-                header={<TextHeader labelText="Explore 0x Relayers" />}
+                header={<TextHeader labelText="0x Relayers" />}
                 body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />}
             />
         );
@@ -708,14 +695,23 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
-            <div className="flex-last px2">
-                <div style={styles.leftColumn}>{props.left}</div>
-            </div>
-            <div className="flex-auto px2" style={styles.scrollContainer}>
-                {props.right}
+        <Container className="mx-auto flex flex-center" maxWidth={LARGE_LAYOUT_MAX_WIDTH}>
+            <div className="flex-last">
+                <Container
+                    width={LEFT_COLUMN_WIDTH}
+                    position="fixed"
+                    zIndex={zIndex.aboveTopBar}
+                    marginLeft={LARGE_LAYOUT_MARGIN}
+                >
+                    {props.left}
+                </Container>
             </div>
-        </div>
+            <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
+                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+                    {props.right}
+                </Container>
+            </Container>
+        </Container>
     );
 };
 
@@ -725,9 +721,7 @@ interface SmallLayoutProps {
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
         <div className="flex flex-center">
-            <div className="flex-auto px3" style={styles.scrollContainer}>
-                {props.content}
-            </div>
+            <div className="flex-auto px3">{props.content}</div>
         </div>
     );
 }; // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx
index 4aabd47d0..853da3a29 100644
--- a/packages/website/ts/components/portal/text_header.tsx
+++ b/packages/website/ts/components/portal/text_header.tsx
@@ -1,21 +1,16 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import { Text } from 'ts/components/ui/text';
+
 export interface TextHeaderProps {
     labelText: string;
 }
 
-const styles: Styles = {
-    title: {
-        fontWeight: 'bold',
-        fontSize: 20,
-    },
-};
-
 export const TextHeader = (props: TextHeaderProps) => {
     return (
-        <div className="py3" style={styles.title}>
+        <Text className="pt3 pb2" fontWeight="bold" fontSize="16px" fontColor={colors.darkestGrey}>
             {props.labelText}
-        </div>
+        </Text>
     );
 };
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 23860856b..18b069ae2 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -1,6 +1,6 @@
 import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
-import { GridTile } from 'material-ui/GridList';
+import { GridTile as PlainGridTile } from 'material-ui/GridList';
 import * as React from 'react';
 import { analytics } from 'ts/utils/analytics';
 
@@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
@@ -19,29 +21,23 @@ export interface RelayerGridTileProps {
 const styles: Styles = {
     root: {
         boxSizing: 'border-box',
+        // All material UI components have position: relative
+        // which creates a new stacking context and makes z-index stuff impossible. So reset.
+        position: 'static',
     },
     innerDiv: {
-        padding: 6,
         height: '100%',
         boxSizing: 'border-box',
     },
     header: {
         height: '50%',
         width: '100%',
-        borderBottomRightRadius: 4,
-        borderBottomLeftRadius: 4,
-        borderTopRightRadius: 4,
-        borderTopLeftRadius: 4,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: colors.walletBorder,
     },
     body: {
-        paddingLeft: 6,
-        paddingRight: 6,
         height: '50%',
         width: '100%',
         boxSizing: 'border-box',
+        padding: 12,
     },
     weeklyTradeVolumeLabel: {
         fontSize: 14,
@@ -69,7 +65,10 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
     const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
     const eventLabel = `${props.relayerInfo.name}-${networkName}`;
-    const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+    const onClick = () => {
+        analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+        utils.openUrl(link);
+    };
     const headerImageUrl = props.relayerInfo.logoImgUrl;
     const headerBackgroundColor =
         !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
@@ -77,22 +76,17 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
             : FALLBACK_PRIMARY_COLOR;
     return (
         <Island style={styles.root} Component={GridTile}>
-            <div style={styles.innerDiv}>
-                <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
-                    <div
-                        className="flex items-center"
-                        style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
-                    >
-                        <Image
-                            className="mx-auto"
-                            src={props.relayerInfo.logoImgUrl}
-                            fallbackSrc={FALLBACK_IMG_SRC}
-                            height={RELAYER_ICON_HEIGHT}
-                        />
-                    </div>
-                </a>
+            <div style={styles.innerDiv} onClick={onClick}>
+                <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                    <Image
+                        className="mx-auto"
+                        src={props.relayerInfo.logoImgUrl}
+                        fallbackSrc={FALLBACK_IMG_SRC}
+                        height={RELAYER_ICON_HEIGHT}
+                    />
+                </div>
                 <div style={styles.body}>
-                    <div className="py1" style={styles.relayerNameLabel}>
+                    <div className="pb1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}
                     </div>
                     <Section titleText="Weekly Trade Volume">
@@ -111,6 +105,14 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     );
 };
 
+const GridTile = styled(PlainGridTile)`
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    &:hover {
+        transform: translate(0px, -3px);
+    }
+`;
+
 interface SectionProps {
     titleText: string;
     children?: React.ReactNode;
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d565eb608..4aea1bbbb 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,4 +1,3 @@
-import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import { GridList } from 'material-ui/GridList';
@@ -6,7 +5,6 @@ import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
 import { Retry } from 'ts/components/ui/retry';
-import { colors } from 'ts/style/colors';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 
@@ -20,22 +18,6 @@ interface RelayerIndexState {
     error?: Error;
 }
 
-const styles: Styles = {
-    root: {
-        width: '100%',
-    },
-    item: {
-        backgroundColor: colors.white,
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        overflow: 'hidden',
-        padding: 4,
-    },
-};
-
 const CELL_HEIGHT = 290;
 const NUMBER_OF_COLUMNS_LARGE = 3;
 const NUMBER_OF_COLUMNS_MEDIUM = 2;
@@ -76,18 +58,16 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         } else {
             const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
             return (
-                <div style={styles.root}>
-                    <GridList
-                        cellHeight={CELL_HEIGHT}
-                        cols={numberOfColumns}
-                        padding={GRID_PADDING}
-                        style={styles.gridList}
-                    >
-                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
-                            <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
-                        ))}
-                    </GridList>
-                </div>
+                <GridList
+                    cellHeight={CELL_HEIGHT}
+                    cols={numberOfColumns}
+                    padding={GRID_PADDING}
+                    style={{ marginTop: -10, marginBottom: 0 }}
+                >
+                    {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
+                        <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+                    ))}
+                </GridList>
             );
         }
     }
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 b599e7123..f544fc924 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -70,7 +70,10 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
         };
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`;
-        const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel);
+        const onClick = (event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            analytics.logEvent('Portal', 'Token Click', eventLabel);
+        };
         return (
             <a
                 href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)}
@@ -78,7 +81,7 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
                 style={style}
                 onMouseEnter={this._onToggleHover.bind(this, true)}
                 onMouseLeave={this._onToggleHover.bind(this, false)}
-                onClick={trackTokenClick}
+                onClick={onClick}
             >
                 {this.props.tokenInfo.symbol}
             </a>
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index cbda2993d..136f3d005 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -11,13 +11,15 @@ const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {
 
 const appearFromBottomFrames = keyframes`
     from {
-        position: absolute;
+        position: fixed;
         bottom: -500px;
+        left: 0px;
     }
 
     to {
-        position: absolute;
+        position: fixed;
         bottom: 0px;
+        left: 0px;
     }
 `;
 
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 90aec0e7c..a747ef01f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     width?: StringOrNum;
+    minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f88fd6c24..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,
@@ -138,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: {},
@@ -244,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,
@@ -309,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;
@@ -320,7 +322,7 @@ 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;
@@ -348,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,
         );
     }
@@ -363,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 (
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 6830b64ab..0259af36f 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -157,25 +157,25 @@ const teamRow5: ProfileInfo[] = [
         github: 'http://github.com/fragosti',
     },
     {
-        name: 'Chris Kalani',
-        title: 'Director of Design',
-        description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
-        image: 'images/team/chris.png',
-        linkedIn: 'https://www.linkedin.com/in/chriskalani/',
-        github: 'https://github.com/chriskalani',
-    },
-];
-
-const teamRow6: ProfileInfo[] = [
-    {
         name: 'Mel Oberto',
-        title: 'Office Operations / Executive Assistant',
+        title: 'Office Ops / Executive Assistant',
         description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`,
         image: 'images/team/mel.png',
         linkedIn: 'https://www.linkedin.com/in/melanieoberto',
     },
 ];
 
+// const teamRow6: ProfileInfo[] = [
+//     {
+//         name: 'Chris Kalani',
+//         title: 'Director of Design',
+//         description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
+//         image: 'images/team/chris.png',
+//         linkedIn: 'https://www.linkedin.com/in/chriskalani/',
+//         github: 'https://github.com/chriskalani',
+//     },
+// ];
+
 const advisors: ProfileInfo[] = [
     {
         name: 'Fred Ehrsam',
@@ -259,9 +259,9 @@ export class About extends React.Component<AboutProps, AboutState> {
                                 lineHeight: 1.5,
                             }}
                         >
-                            Our team is a diverse and globally distributed group with backgrounds in engineering,
-                            research, business and design. We are passionate about decentralized technology and its
-                            potential to act as an equalizing force in the world.
+                            Our team is a globally distributed group with backgrounds in engineering, research, business
+                            and design. We are passionate about decentralized technology and its potential to act as an
+                            equalizing force in the world.
                         </div>
                     </div>
                     <div className="pt3 md-px4 lg-px0">
@@ -270,7 +270,6 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index e73b1f193..bcbeb0272 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -39,6 +39,7 @@ export const Profile = (props: ProfileProps) => {
                             fontSize: 14,
                             fontFamily: 'Roboto Mono',
                             color: colors.darkGrey,
+                            whiteSpace: 'nowrap',
                         }}
                     >
                         {props.profileInfo.title.toUpperCase()}
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f3d980315..e789795c1 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -11,6 +11,7 @@ import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { utils } from 'ts/utils/utils';
 
 const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
 const HEADER_TEXT = 'Open Positions';
@@ -161,7 +162,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
 
     private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
         const url = jobInfo.url;
-        window.open(url, '_blank');
+        utils.openUrl(url);
     }
 }
 
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index 9d3d8f7d9..ed6a4868e 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -156,7 +156,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.AddTokenToTokenByAddress: {
-            const newTokenByAddress = state.tokenByAddress;
+            const newTokenByAddress = { ...state.tokenByAddress };
             newTokenByAddress[action.data.address] = action.data;
             return {
                 ...state,
@@ -165,7 +165,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.RemoveTokenFromTokenByAddress: {
-            const newTokenByAddress = state.tokenByAddress;
+            const newTokenByAddress = { ...state.tokenByAddress };
             delete newTokenByAddress[action.data.address];
             return {
                 ...state,
@@ -174,7 +174,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.UpdateTokenByAddress: {
-            const tokenByAddress = state.tokenByAddress;
+            const tokenByAddress = { ...state.tokenByAddress };
             const tokens = action.data;
             _.each(tokens, token => {
                 const updatedToken = {
@@ -253,7 +253,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.UpdateChosenAssetTokenAddress: {
-            const newAssetToken = state.sideToAssetToken[action.data.side];
+            const newAssetToken = { ...state.sideToAssetToken[action.data.side] };
             newAssetToken.address = action.data.address;
             const newSideToAssetToken = {
                 ...state.sideToAssetToken,
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index 0411cdd91..a3998f59b 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,5 +1,6 @@
 export const zIndex = {
     topBar: 1100,
+    aboveTopBar: 1101,
     overlay: 1105,
     aboveOverlay: 1106,
 };
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 0bd3dbcfa..0cb965f05 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -362,4 +362,10 @@ export const utils = {
         const formattedAmount = unitAmount.toFixed(precision);
         return `${formattedAmount} ${symbol}`;
     },
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    },
+    isMobile(screenWidth: ScreenWidths): boolean {
+        return screenWidth === ScreenWidths.Sm;
+    },
 };