Merge branch 'v2-prototype' into fixes/misc-small-fixes

* v2-prototype:
  Remove TranslatedText
  Fix prettier
  Add back UMD bundles for 0x.js
  Move portal disclaimer to the account management section
  Move prices into portal
  Use stricter check for subscribe input text
  Make buttons stack on mobile
  Do not show subscribe form if language is not english
  Address PR feedback
  Lint and cleanup
  Implement subscription form
  Add styled-components and polished
  Have basic newsletter subscribe form working

21 files changed, 365 insertions, 67 deletions

diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
new file mode 100644
index 000000000..04ef28e70
--- /dev/null
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -0,0 +1,124 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+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 {}
+
+export enum SubscribeFormStatus {
+    None,
+    Error,
+    Success,
+    Loading,
+    Other,
+}
+
+export interface SubscribeFormState {
+    emailText: string;
+    lastSubmittedEmail: string;
+    status: SubscribeFormStatus;
+}
+
+const FORM_FONT_SIZE = '15px';
+
+// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001
+export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
+    public state = {
+        emailText: '',
+        lastSubmittedEmail: '',
+        status: SubscribeFormStatus.None,
+    };
+    public render(): React.ReactNode {
+        return (
+            <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
+                <Container marginBottom="15px">
+                    <Text fontFamily="Roboto Mono" fontColor={colors.grey} center={true}>
+                        Subscribe to our newsletter for 0x relayer and dApp updates
+                    </Text>
+                </Container>
+                <form onSubmit={this._handleFormSubmitAsync.bind(this)}>
+                    <Container className="flex flex-wrap justify-center items-center">
+                        <Container marginTop="15px">
+                            <Input
+                                placeholder="you@email.com"
+                                value={this.state.emailText}
+                                fontColor={colors.white}
+                                fontSize={FORM_FONT_SIZE}
+                                backgroundColor={colors.projectsGrey}
+                                width="300px"
+                                onChange={this._handleEmailInputChange.bind(this)}
+                            />
+                        </Container>
+                        <Container marginLeft="15px" marginTop="15px">
+                            <Button
+                                type="submit"
+                                backgroundColor={colors.darkestGrey}
+                                fontColor={colors.white}
+                                fontSize={FORM_FONT_SIZE}
+                            >
+                                Subscribe
+                            </Button>
+                        </Container>
+                    </Container>
+                </form>
+                {this._renderMessage()}
+            </Container>
+        );
+    }
+    private _renderMessage(): React.ReactNode {
+        let message = null;
+        switch (this.state.status) {
+            case SubscribeFormStatus.Error:
+                message = 'Sorry, something went wrong. Try again later.';
+                break;
+            case SubscribeFormStatus.Loading:
+                message = 'One second...';
+                break;
+            case SubscribeFormStatus.Success:
+                message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`;
+                break;
+            case SubscribeFormStatus.None:
+                break;
+            default:
+                throw new Error(
+                    'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
+                );
+        }
+        return (
+            <Container isHidden={!message} marginTop="30px">
+                <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
+                    {message || 'spacer text (never shown to user)'}
+                </Text>
+            </Container>
+        );
+    }
+    private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+        this.setState({ emailText: event.target.value });
+    }
+    private async _handleFormSubmitAsync(event: React.FormEvent<HTMLInputElement>): Promise<void> {
+        event.preventDefault();
+        if (_.isUndefined(this.state.emailText) || _.isEmpty(this.state.emailText)) {
+            return;
+        }
+        this.setState({
+            status: SubscribeFormStatus.Loading,
+            lastSubmittedEmail: this.state.emailText,
+        });
+        try {
+            const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
+            const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
+            this.setState({ status, emailText: '' });
+        } catch (error) {
+            this._setStatus(SubscribeFormStatus.Error);
+        }
+    }
+    private _setStatus(status: SubscribeFormStatus): void {
+        this.setState({ status });
+    }
+}
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index d61dfa87d..a8df4935a 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -5,9 +5,9 @@ import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 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 { colors } from 'ts/utils/colors';
 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/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 4066babaf..158ac23ec 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -5,7 +5,7 @@ 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/utils/style';
+import { zIndex } from 'ts/style/z_index';
 
 export interface Step {
     target: string;
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index 48858613c..2d0bbefc3 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -2,7 +2,7 @@ import { Styles } from '@0xproject/react-shared';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { colors } from 'ts/utils/colors';
+import { colors } from 'ts/style/colors';
 
 export interface BackButtonProps {
     to: string;
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index ace11639a..8ac2b9091 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -4,8 +4,8 @@ import * as React from 'react';
 
 import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu';
 import { Identicon } from 'ts/components/ui/identicon';
+import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 const IDENTICON_DIAMETER = 45;
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 6e97ee37e..f98346101 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -2,8 +2,8 @@ import { Styles } from '@0xproject/react-shared';
 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 { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 
 export interface MenuTheme {
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 9aa83546a..9420395cf 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -34,6 +34,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import {
     BlockchainErrs,
     HashData,
+    ItemByAddress,
     Order,
     ProviderType,
     ScreenWidths,
@@ -43,6 +44,7 @@ import {
     TokenVisibility,
     WebsitePaths,
 } from 'ts/types';
+import { backendClient } from 'ts/utils/backend_client';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { orderParser } from 'ts/utils/order_parser';
@@ -266,10 +268,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
@@ -394,18 +392,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 {
@@ -587,6 +591,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 return this._blockchain.getTokenBalanceAndAllowanceAsync(userAddressIfExists, tokenAddress);
             }),
         );
+        const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses);
         for (let i = 0; i < tokenAddresses.length; i++) {
             // Order is preserved in Promise.all
             const [balance, allowance] = balancesAndAllowances[i];
@@ -595,6 +600,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 balance,
                 allowance,
                 isLoaded: true,
+                price: priceByAddress[tokenAddress],
             };
         }
         this.setState({
@@ -602,6 +608,34 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         });
     }
 
+    private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
+        if (_.isEmpty(tokenAddresses)) {
+            return {};
+        }
+        // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists
+        // create a mapping from existing symbols -> address
+        const tokenAddressBySymbol: { [symbol: string]: string } = {};
+        _.each(tokenAddresses, address => {
+            const tokenIfExists = _.get(this.props.tokenByAddress, address);
+            if (!_.isUndefined(tokenIfExists)) {
+                const symbol = tokenIfExists.symbol;
+                tokenAddressBySymbol[symbol] = address;
+            }
+        });
+        const tokenSymbols = _.keys(tokenAddressBySymbol);
+        try {
+            const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols);
+            const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol));
+            const result = _.mapValues(priceByAddress, price => {
+                const priceBigNumber = new BigNumber(price);
+                return priceBigNumber;
+            });
+            return result;
+        } catch (err) {
+            return {};
+        }
+    }
+
     private async _refetchTokenStateAsync(tokenAddress: string): Promise<void> {
         await this._fetchBalancesAndAllowancesAsync([tokenAddress]);
     }
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 ad6ab3de1..41febebe9 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -7,8 +7,8 @@ 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 { colors } from 'ts/utils/colors';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 9ef6eaf59..683f7084b 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -6,9 +6,9 @@ import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { colors } from 'ts/style/colors';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
-import { colors } from 'ts/utils/colors';
 
 export interface RelayerIndexProps {
     networkId: number;
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 7a0742bbe..2bc065b0f 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -77,11 +77,11 @@ interface TokenBalancesProps {
 
 interface TokenBalancesState {
     errorType: BalanceErrs;
+    trackedTokenStateByAddress: TokenStateByAddress;
     isBalanceSpinnerVisible: boolean;
     isZRXSpinnerVisible: boolean;
     isTokenPickerOpen: boolean;
     isAddingToken: boolean;
-    trackedTokenStateByAddress: TokenStateByAddress;
 }
 
 export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 8a337119a..dba08f85c 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -9,10 +9,10 @@ import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 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 { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
-import { zIndex } from 'ts/utils/style';
 import { utils } from 'ts/utils/utils';
 
 const ROOT_HEIGHT = 24;
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index e2d791ae3..606fd845a 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -16,9 +16,9 @@ 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';
 import { constants } from 'ts/utils/constants';
-import { zIndex } from 'ts/utils/style';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
new file mode 100644
index 000000000..4c7d59839
--- /dev/null
+++ b/packages/website/ts/components/ui/button.tsx
@@ -0,0 +1,79 @@
+import { colors } from '@0xproject/react-shared';
+import { darken } from 'polished';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+export interface ButtonProps {
+    className?: string;
+    fontSize?: string;
+    fontColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    width?: string;
+    type?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => (
+    <button type={type} className={className} onClick={onClick}>
+        {children}
+    </button>
+);
+
+export const Button = styled(PlainButton)`
+    cursor: pointer;
+    font-size: ${props => props.fontSize};
+    color: ${props => props.fontColor};
+    padding: 0.8em 2.2em;
+    border-radius: 6px;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    font-weight: 500;
+    font-family: 'Roboto';
+    width: ${props => props.width};
+    background-color: ${props => props.backgroundColor};
+    border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
+    &:hover {
+        background-color: ${props => darken(0.1, props.backgroundColor)};
+    }
+    &:active {
+        background-color: ${props => darken(0.2, props.backgroundColor)};
+    }
+`;
+
+Button.defaultProps = {
+    fontSize: '12px',
+    backgroundColor: colors.white,
+    width: 'auto',
+};
+
+Button.displayName = 'Button';
+
+type CallToActionType = 'light' | 'dark';
+
+export interface CallToActionProps {
+    type?: CallToActionType;
+    fontSize?: string;
+    width?: string;
+}
+
+export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
+    const isLight = type === 'light';
+    const backgroundColor = isLight ? colors.white : colors.heroGrey;
+    const fontColor = isLight ? colors.heroGrey : colors.white;
+    const borderColor = isLight ? undefined : colors.white;
+    return (
+        <Button
+            fontSize={fontSize}
+            backgroundColor={backgroundColor}
+            fontColor={fontColor}
+            width={width}
+            borderColor={borderColor}
+        >
+            {children}
+        </Button>
+    );
+};
+
+CallToAction.defaultProps = {
+    type: 'dark',
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index d577447b0..c6a78e181 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -11,13 +11,20 @@ export interface ContainerProps {
     paddingBottom?: StringOrNum;
     paddingRight?: StringOrNum;
     paddingLeft?: StringOrNum;
+    backgroundColor?: string;
+    borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
-    children?: React.ReactNode;
+    isHidden?: boolean;
+    className?: string;
 }
 
-export const Container: React.StatelessComponent<ContainerProps> = (props: ContainerProps) => {
-    const { children, ...style } = props;
-    return <div style={style}>{children}</div>;
+export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
+    const visibility = isHidden ? 'hidden' : undefined;
+    return (
+        <div style={{ ...style, visibility }} className={className}>
+            {children}
+        </div>
+    );
 };
 
 Container.displayName = 'Container';
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
new file mode 100644
index 000000000..e01a71a53
--- /dev/null
+++ b/packages/website/ts/components/ui/input.tsx
@@ -0,0 +1,43 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: string;
+    placeholderColor?: string;
+    placeholder?: string;
+    backgroundColor?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
+    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
+);
+
+export const Input = styled(PlainInput)`
+    font-size: ${props => props.fontSize};
+    width: ${props => props.width};
+    padding: 0.8em 1.2em;
+    border-radius: 3px;
+    font-family: 'Roboto Mono';
+    color: ${props => props.fontColor};
+    border: none;
+    background-color: ${props => props.backgroundColor};
+    &::placeholder {
+        color: ${props => props.placeholderColor};
+    }
+`;
+
+Input.defaultProps = {
+    width: 'auto',
+    backgroundColor: colors.white,
+    fontColor: colors.darkestGrey,
+    placeholderColor: colors.darkGrey,
+    fontSize: '12px',
+};
+
+Input.displayName = 'Input';
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index f5480c9c9..802a7830a 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { colors } from 'ts/style/colors';
 import { Styleable } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 export interface IslandProps {
     style?: React.CSSProperties;
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index bb2ed8e59..acca8194f 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -2,7 +2,7 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { zIndex } from 'ts/utils/style';
+import { zIndex } from 'ts/style/z_index';
 
 export interface OverlayProps {
     children?: React.ReactNode;
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
new file mode 100644
index 000000000..99bf89966
--- /dev/null
+++ b/packages/website/ts/components/ui/text.tsx
@@ -0,0 +1,41 @@
+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';
+
+export interface TextProps {
+    className?: string;
+    Tag?: TextTag;
+    fontSize?: string;
+    fontFamily?: string;
+    fontColor?: string;
+    lineHeight?: string;
+    center?: boolean;
+    fontWeight?: number;
+}
+
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => (
+    <Tag className={className}>{children}</Tag>
+);
+
+export const Text = styled(PlainText)`
+    font-family: ${props => props.fontFamily};
+    font-weight: ${props => props.fontWeight};
+    font-size: ${props => props.fontSize};
+    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+    ${props => (props.center ? 'text-align: center' : '')};
+    color: ${props => props.fontColor};
+`;
+
+Text.defaultProps = {
+    fontFamily: 'Roboto',
+    fontWeight: 400,
+    fontColor: colors.white,
+    fontSize: '14px',
+    Tag: 'div',
+};
+
+Text.displayName = 'Text';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 7059ca350..37233930e 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -32,10 +32,11 @@ import { TokenIcon } from 'ts/components/ui/token_icon';
 import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
 import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
+import { zIndex } from 'ts/style/z_index';
 import {
     BalanceErrs,
     BlockchainErrs,
-    ItemByAddress,
     ProviderType,
     ScreenWidths,
     Side,
@@ -45,10 +46,7 @@ import {
     TokenStateByAddress,
     WebsitePaths,
 } from 'ts/types';
-import { backendClient } from 'ts/utils/backend_client';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
-import { zIndex } from 'ts/utils/style';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
@@ -523,34 +521,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         });
         return trackedTokenStateByAddress;
     }
-
-    private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
-        if (_.isEmpty(tokenAddresses)) {
-            return {};
-        }
-        // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists
-        // create a mapping from existing symbols -> address
-        const tokenAddressBySymbol: { [symbol: string]: string } = {};
-        _.each(tokenAddresses, address => {
-            const tokenIfExists = _.get(this.props.tokenByAddress, address);
-            if (!_.isUndefined(tokenIfExists)) {
-                const symbol = tokenIfExists.symbol;
-                tokenAddressBySymbol[symbol] = address;
-            }
-        });
-        const tokenSymbols = _.keys(tokenAddressBySymbol);
-        try {
-            const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols);
-            const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol));
-            const result = _.mapValues(priceByAddress, price => {
-                const priceBigNumber = new BigNumber(price);
-                return priceBigNumber;
-            });
-            return result;
-        } catch (err) {
-            return {};
-        }
-    }
     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 17fd8a19e..e3b88dc54 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -3,8 +3,8 @@ 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';
 import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 1dfcffadf..50b64d05c 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -10,8 +10,8 @@ import { Blockchain } from 'ts/blockchain';
 import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
 import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
 import { BlockchainCallErrs, Side, Token } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';