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

21 files changed, 522 insertions, 130 deletions

diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
new file mode 100644
index 000000000..31ce99d31
--- /dev/null
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface AddEthOnboardingStepProps {}
+
+export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
+        <Container marginTop="15px" marginBottom="15px">
+            <img src="/images/ether_alt.svg" height="50px" width="50px" />
+        </Container>
+        <Text>
+            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your
+            browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+        </Text>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
new file mode 100644
index 000000000..3a8db8c36
--- /dev/null
+++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface CongratsOnboardingStepProps {}
+
+export const CongratsOnboardingStep: React.StatelessComponent<CongratsOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Text>Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.</Text>
+        <Container marginTop="25px" marginBottom="15px" className="flex justify-center">
+            <img src="/images/zrx_ecosystem.svg" height="150px" />
+        </Container>
+        <Text>No need to log in. Each relayer automatically detects and connects to your metamask wallet.</Text>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
new file mode 100644
index 000000000..a54496186
--- /dev/null
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -0,0 +1,18 @@
+import { colors } from '@0xproject/react-shared';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface InstallWalletOnboardingStepProps {}
+
+export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Container marginTop="15px" marginBottom="15px">
+            <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
+        </Container>
+        <Text>
+            Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
+        </Text>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
new file mode 100644
index 000000000..548839218
--- /dev/null
+++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface IntroOnboardingStepProps {}
+
+export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Text>
+            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps.
+        </Text>
+        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+            <div className="flex flex-column items-center">
+                <img src="/images/eth_token.svg" height="50px" width="50x" />
+                <Text> Wrap ETH </Text>
+            </div>
+            <div className="flex flex-column items-center">
+                <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+                <Text> Unlock tokens </Text>
+            </div>
+        </Container>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 9879cd387..34aeace82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -10,9 +10,10 @@ export interface Step {
     title?: string;
     content: React.ReactNode;
     placement?: Placement;
-    hideBackButton?: boolean;
-    hideNextButton?: boolean;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
+    continueButtonText?: string;
 }
 
 export interface OnboardingFlowProps {
@@ -54,17 +55,18 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container marginLeft="15px">
+            <Container marginLeft="30px">
                 <OnboardingTooltip
                     title={step.title}
                     content={step.content}
                     isLastStep={isLastStep}
-                    hideBackButton={step.hideBackButton}
-                    hideNextButton={step.hideNextButton}
+                    shouldHideBackButton={step.shouldHideBackButton}
+                    shouldHideNextButton={step.shouldHideNextButton}
                     onClose={this.props.onClose}
                     onClickNext={this._goToNextStep.bind(this)}
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
+                    continueButtonText={step.continueButtonText}
                 />
             </Container>
         );
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 155c70c5f..45851b4de 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,7 +1,12 @@
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
 import { Island } from 'ts/components/ui/island';
+import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
+import { Text, Title } from 'ts/components/ui/text';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
@@ -13,43 +18,73 @@ export interface OnboardingTooltipProps {
     onClickNext: () => void;
     onClickBack: () => void;
     continueButtonDisplay?: ContinueButtonDisplay;
-    hideBackButton?: boolean;
-    hideNextButton?: boolean;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
+    pointerDirection?: PointerDirection;
+    continueButtonText?: string;
+    className?: string;
 }
 
-// TODO: Make this more general button.
-export interface ContinueButtonProps {
-    display: ContinueButtonDisplay;
-    children?: string;
-    onClick: () => void;
-}
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+    pointerDirection,
+    className,
+}) => (
+    <Pointer className={className} direction={pointerDirection}>
+        <Island>
+            <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+                <div className="flex flex-column">
+                    <div className="flex justify-between">
+                        <Title>{title}</Title>
+                        <Container position="relative" bottom="20px" left="15px">
+                            <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+                                Close
+                            </IconButton>
+                        </Container>
+                    </div>
+                    <Container marginBottom="15px">
+                        <Text>{content}</Text>
+                    </Container>
+                    {continueButtonDisplay && (
+                        <Button
+                            isDisabled={continueButtonDisplay === 'disabled'}
+                            onClick={onClickNext}
+                            fontColor={colors.white}
+                            fontSize="15px"
+                            backgroundColor={colors.mediumBlue}
+                        >
+                            {continueButtonText}
+                        </Button>
+                    )}
+                    <Container className="flex justify-between" marginTop="15px">
+                        {!shouldHideBackButton && (
+                            <Text fontColor={colors.grey} onClick={onClickBack}>
+                                Back
+                            </Text>
+                        )}
+                        {!shouldHideNextButton && (
+                            <Text fontColor={colors.grey} onClick={onClickNext}>
+                                Skip
+                            </Text>
+                        )}
+                    </Container>
+                </div>
+            </Container>
+        </Island>
+    </Pointer>
+);
 
-export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
-    const isDisabled = props.display === 'disabled';
-    return (
-        <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
-            {props.children}
-        </button>
-    );
+OnboardingTooltip.defaultProps = {
+    pointerDirection: 'left',
+    continueButtonText: 'Continue',
 };
 
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
-    <Island>
-        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
-            <div className="flex flex-column">
-                {props.title}
-                {props.content}
-                {props.continueButtonDisplay && (
-                    <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
-                        Continue
-                    </ContinueButton>
-                )}
-                {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
-                {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
-                <button onClick={props.onClose}>Close</button>
-            </div>
-        </Container>
-    </Island>
-);
-
 OnboardingTooltip.displayName = 'OnboardingTooltip';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index ec2365c11..3880e018a 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,7 +4,14 @@ import * as React from 'react';
 
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
+import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step';
+import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step';
+import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step';
+import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step';
+import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
+import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
@@ -50,56 +57,68 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         const steps: Step[] = [
             {
                 target: '.wallet',
-                content:
-                    'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+                title: '0x Ecosystem Setup',
+                content: <InstallWalletOnboardingStep />,
                 placement: 'right',
-                hideBackButton: true,
-                hideNextButton: true,
+                shouldHideBackButton: true,
+                shouldHideNextButton: true,
             },
             {
                 target: '.wallet',
-                content: 'Unlock your metamask extension to begin',
+                title: '0x Ecosystem Setup',
+                content: <UnlockWalletOnboardingStep />,
                 placement: 'right',
-                hideBackButton: true,
-                hideNextButton: true,
+                shouldHideBackButton: true,
+                shouldHideNextButton: true,
             },
             {
                 target: '.wallet',
-                content:
-                    'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+                title: '0x Ecosystem Account Setup',
+                content: <IntroOnboardingStep />,
                 placement: 'right',
-                hideBackButton: true,
+                shouldHideBackButton: true,
                 continueButtonDisplay: 'enabled',
             },
             {
                 target: '.eth-row',
-                content: 'Before you begin you will need to send some ETH to your metamask wallet',
+                title: 'Add ETH',
+                content: <AddEthOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
             {
                 target: '.weth-row',
-                content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)',
+                title: 'Step 1/2',
+                content: (
+                    <WrapEthOnboardingStep
+                        formattedEthBalanceIfExists={
+                            this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
+                        }
+                    />
+                ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
             },
             {
                 target: '.weth-row',
+                title: 'Step 2/2',
                 content: (
-                    <div>
-                        Unlock your tokens for trading. You only need to do this once for each token.
-                        <div> ETH: {this._renderEthAllowanceToggle()}</div>
-                        <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
-                    </div>
+                    <SetAllowancesOnboardingStep
+                        zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
+                        ethAllowanceToggle={this._renderEthAllowanceToggle()}
+                    />
                 ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
-                content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
+                title: '🎉 Congrats! The ecosystem awaits.',
+                content: <CongratsOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
+                shouldHideNextButton: true,
+                continueButtonText: 'Enter the 0x Ecosystem',
             },
         ];
         return steps;
@@ -110,13 +129,21 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
     private _userHasVisibleEth(): boolean {
         return this.props.userEtherBalanceInWei > new BigNumber(0);
     }
-    private _userHasVisibleWeth(): boolean {
+    private _getWethBalance(): BigNumber {
         const ethToken = utils.getEthToken(this.props.tokenByAddress);
         if (!ethToken) {
-            return false;
+            return new BigNumber(0);
         }
-        const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
-        return wethTokenState.balance > new BigNumber(0);
+        const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
+        return ethTokenState.balance;
+    }
+    private _getFormattedWethBalance(): string {
+        const ethToken = utils.getEthToken(this.props.tokenByAddress);
+        const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
+        return utils.getFormattedAmountFromToken(ethToken, ethTokenState);
+    }
+    private _userHasVisibleWeth(): boolean {
+        return this._getWethBalance() > new BigNumber(0);
     }
     private _userHasAllowancesForWethAndZrx(): boolean {
         const ethToken = utils.getEthToken(this.props.tokenByAddress);
diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
new file mode 100644
index 000000000..1ff248c40
--- /dev/null
+++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface SetAllowancesOnboardingStepProps {
+    zrxAllowanceToggle: React.ReactNode;
+    ethAllowanceToggle: React.ReactNode;
+}
+
+export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
+    ethAllowanceToggle,
+    zrxAllowanceToggle,
+}) => (
+    <div className="flex items-center flex-column">
+        <Text>Unlock your tokens for trading. You only need to do this once for each token.</Text>
+        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> Enable WETH </Text>
+                <Container marginTop="10px">{ethAllowanceToggle}</Container>
+            </div>
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> Enable ZRX </Text>
+                <Container marginTop="10px">{zrxAllowanceToggle}</Container>
+            </div>
+        </Container>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
new file mode 100644
index 000000000..6e6a74a06
--- /dev/null
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+
+export interface UnlockWalletOnboardingStepProps {}
+
+export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <div className="flex items-center flex-column">
+            <Container marginTop="15px" marginBottom="15px">
+                <img src="/images/metamask_icon.png" height="50px" width="50px" />
+            </Container>
+            <Text>Unlock your metamask extension to begin.</Text>
+        </div>
+    </div>
+);
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
new file mode 100644
index 000000000..b21b39341
--- /dev/null
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -0,0 +1,73 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
+import { Text } from 'ts/components/ui/text';
+
+export interface WrapEthOnboardingStepProps {
+    formattedEthBalanceIfExists?: string;
+}
+
+export const WrapEthOnboardingStep: React.StatelessComponent<WrapEthOnboardingStepProps> = ({
+    formattedEthBalanceIfExists,
+}) => {
+    if (formattedEthBalanceIfExists) {
+        return (
+            <div className="flex items-center flex-column">
+                <Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</Text>
+                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 ETH </Text>
+                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+                    </div>
+                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                        <Text fontSize="25px">
+                            <i className="zmdi zmdi-long-arrow-right" />
+                        </Text>
+                    </Container>
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 WETH </Text>
+                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+                    </div>
+                </Container>
+            </div>
+        );
+    } else {
+        return (
+            <div className="flex items-center flex-column">
+                <Text>
+                    You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
+                </Text>
+                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 ETH </Text>
+                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+                    </div>
+                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                        <Text fontSize="36px">=</Text>
+                    </Container>
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 WETH </Text>
+                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+                    </div>
+                </Container>
+                <Text>
+                    Think of it like the coin version of a paper note. It has the same value, but some machines only
+                    take coins.
+                </Text>
+                <Text>
+                    Click
+                    <Container display="inline-block" marginLeft="10px" marginRight="10px">
+                        <IconButton
+                            iconName="zmdi-long-arrow-down"
+                            color={colors.mediumBlue}
+                            labelText="wrap"
+                            display="inline-flex"
+                        />
+                    </Container>
+                    to wrap your ETH.
+                </Text>
+            </div>
+        );
+    }
+};
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 5170bf1e1..debebb47c 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,6 +1,7 @@
 import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
@@ -24,6 +25,7 @@ import { TradeHistory } from 'ts/components/trade_history/trade_history';
 import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Island } from 'ts/components/ui/island';
+import { Text } from 'ts/components/ui/text';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
 import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
@@ -102,6 +104,7 @@ const THROTTLE_TIMEOUT = 100;
 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: {
@@ -256,6 +259,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
                     style={{ backgroundColor: colors.lightestGrey }}
+                    maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <div id="portal" style={styles.body}>
                     <Switch>
@@ -355,8 +359,26 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 />
                 <Container marginTop="15px">
                     <Island>
-                        {/** TODO: Implement real styles. */}
-                        <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p>
+                        <Container
+                            marginTop="30px"
+                            marginBottom="30px"
+                            marginLeft="30px"
+                            marginRight="30px"
+                            className="flex justify-around items-center"
+                        >
+                            <ActionAccountBalanceWallet
+                                style={{ width: '30px', height: '30px' }}
+                                color={colors.orange}
+                            />
+                            <Text
+                                fontColor={colors.grey}
+                                fontSize="16px"
+                                center={true}
+                                onClick={this._startOnboarding.bind(this)}
+                            >
+                                Learn how to set up your account
+                            </Text>
+                        </Container>
                     </Island>
                 </Container>
             </div>
@@ -664,11 +686,11 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <div className="sm-flex flex-center">
-            <div className="flex-last px3">
+        <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 px3" style={styles.scrollContainer}>
+            <div className="flex-auto px2" style={styles.scrollContainer}>
                 {props.right}
             </div>
         </div>
@@ -680,7 +702,7 @@ interface SmallLayoutProps {
 }
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
-        <div className="sm-flex flex-center">
+        <div className="flex flex-center">
             <div className="flex-auto px3" style={styles.scrollContainer}>
                 {props.content}
             </div>
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 7ff8208b0..23860856b 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -6,6 +6,7 @@ import { analytics } from 'ts/utils/analytics';
 
 import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
 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 { WebsiteBackendRelayerInfo } from 'ts/types';
@@ -27,7 +28,6 @@ const styles: Styles = {
     header: {
         height: '50%',
         width: '100%',
-        objectFit: 'cover',
         borderBottomRightRadius: 4,
         borderBottomLeftRadius: 4,
         borderTopRightRadius: 4,
@@ -59,25 +59,37 @@ const styles: Styles = {
 };
 
 const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+const FALLBACK_PRIMARY_COLOR = colors.grey200;
 const NO_CONTENT_MESSAGE = '--';
+const RELAYER_ICON_HEIGHT = '110px';
 
 export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
     const link = props.relayerInfo.appUrl || props.relayerInfo.url;
     const topTokens = props.relayerInfo.topTokens;
     const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
-    let trackRelayerClick = (): void => undefined;
     const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
     const eventLabel = `${props.relayerInfo.name}-${networkName}`;
-    trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+    const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+    const headerImageUrl = props.relayerInfo.logoImgUrl;
+    const headerBackgroundColor =
+        !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
+            ? props.relayerInfo.primaryColor
+            : FALLBACK_PRIMARY_COLOR;
     return (
         <Island style={styles.root} Component={GridTile}>
             <div style={styles.innerDiv}>
                 <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
-                    <ImgWithFallback
-                        src={props.relayerInfo.headerImgUrl}
-                        fallbackSrc={FALLBACK_IMG_SRC}
-                        style={styles.header}
-                    />
+                    <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.body}>
                     <div className="py1" style={styles.relayerNameLabel}>
@@ -113,32 +125,3 @@ const Section = (props: SectionProps) => {
 };
 
 const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
-
-interface ImgWithFallbackProps {
-    src?: string;
-    fallbackSrc: string;
-    style: React.CSSProperties;
-}
-interface ImgWithFallbackState {
-    imageLoadFailed: boolean;
-}
-class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
-    constructor(props: ImgWithFallbackProps) {
-        super(props);
-        this.state = {
-            imageLoadFailed: false,
-        };
-    }
-    public render(): React.ReactNode {
-        if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) {
-            return <img src={this.props.fallbackSrc} style={this.props.style} />;
-        } else {
-            return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />;
-        }
-    }
-    private _onError(): void {
-        this.setState({
-            imageLoadFailed: true,
-        });
-    }
-}
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 3c5761bcd..d565eb608 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -37,9 +37,9 @@ const styles: Styles = {
 };
 
 const CELL_HEIGHT = 290;
-const NUMBER_OF_COLUMNS_LARGE = 4;
-const NUMBER_OF_COLUMNS_MEDIUM = 3;
-const NUMBER_OF_COLUMNS_SMALL = 1;
+const NUMBER_OF_COLUMNS_LARGE = 3;
+const NUMBER_OF_COLUMNS_MEDIUM = 2;
+const NUMBER_OF_COLUMNS_SMALL = 2;
 const GRID_PADDING = 20;
 
 export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 05cc6e3ad..1a69827a4 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -45,6 +45,7 @@ export interface TopBarProps {
     isNightVersion?: boolean;
     onVersionSelected?: (semver: string) => void;
     sidebarHeader?: React.ReactNode;
+    maxWidth?: number;
 }
 
 interface TopBarState {
@@ -213,7 +214,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2();
         return (
             <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
-                <div className={parentClassNames}>
+                <div className={parentClassNames} style={{ maxWidth: this.props.maxWidth }}>
                     <div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
                         <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
                             <img src={logoUrl} height="30" />
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1f88297de..cb542a386 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,5 +1,5 @@
 import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
+import { darken, grayscale } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
@@ -12,32 +12,34 @@ export interface ButtonProps {
     borderColor?: string;
     width?: string;
     type?: string;
+    isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => (
-    <button type={type} className={className} onClick={onClick}>
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
         {children}
     </button>
 );
 
 export const Button = styled(PlainButton)`
-    cursor: pointer;
+    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
+    transition: background-color 0.5s ease;
     padding: 0.8em 2.2em;
     border-radius: 6px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
     font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => props.backgroundColor};
+    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
-        background-color: ${props => darken(0.1, props.backgroundColor)};
+        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
     }
     &:active {
-        background-color: ${props => darken(0.2, props.backgroundColor)};
+        background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
     }
 `;
 
@@ -46,6 +48,7 @@ Button.defaultProps = {
     backgroundColor: colors.white,
     width: 'auto',
     fontFamily: 'Roboto',
+    isDisabled: false,
 };
 
 Button.displayName = 'Button';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index c6a78e181..1776345da 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,8 +14,15 @@ export interface ContainerProps {
     backgroundColor?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
+    width?: StringOrNum;
     isHidden?: boolean;
     className?: string;
+    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx
index 2f5172f05..13cd239da 100644
--- a/packages/website/ts/components/ui/icon_button.tsx
+++ b/packages/website/ts/components/ui/icon_button.tsx
@@ -5,15 +5,15 @@ import * as React from 'react';
 export interface IconButtonProps {
     iconName: string;
     labelText?: string;
-    onClick: () => void;
+    onClick?: () => void;
     color?: string;
+    display?: string;
 }
 interface IconButtonState {
     isHovering: boolean;
 }
 export class IconButton extends React.Component<IconButtonProps, IconButtonState> {
     public static defaultProps: Partial<IconButtonProps> = {
-        onClick: _.noop,
         labelText: '',
         color: colors.mediumBlue,
     };
@@ -26,8 +26,9 @@ export class IconButton extends React.Component<IconButtonProps, IconButtonState
     public render(): React.ReactNode {
         const styles: Styles = {
             root: {
-                cursor: 'pointer',
-                opacity: this.state.isHovering ? 0.5 : 1,
+                cursor: this.props.onClick ? 'pointer' : 'undefined',
+                opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1,
+                display: this.props.display,
             },
             icon: {
                 color: this.props.color,
diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
new file mode 100644
index 000000000..0958d2e5e
--- /dev/null
+++ b/packages/website/ts/components/ui/image.tsx
@@ -0,0 +1,37 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+export interface ImageProps {
+    className?: string;
+    src?: string;
+    fallbackSrc?: string;
+    height?: string;
+}
+interface ImageState {
+    imageLoadFailed: boolean;
+}
+export class Image extends React.Component<ImageProps, ImageState> {
+    constructor(props: ImageProps) {
+        super(props);
+        this.state = {
+            imageLoadFailed: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const src =
+            this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
+        return (
+            <img
+                className={this.props.className}
+                onError={this._onError.bind(this)}
+                src={src}
+                height={this.props.height}
+            />
+        );
+    }
+    private _onError(): void {
+        this.setState({
+            imageLoadFailed: true,
+        });
+    }
+}
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
new file mode 100644
index 000000000..448786bb4
--- /dev/null
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -0,0 +1,67 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+export type PointerDirection = 'top' | 'right' | 'bottom' | 'left';
+
+export interface PointerProps {
+    className?: string;
+    color?: string;
+    size?: number;
+    direction: PointerDirection;
+}
+
+const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props} />;
+
+const positionToCss = (props: PointerProps) => {
+    const position = {
+        top: `bottom: 100%; left: 50%;`,
+        right: `left: 100%; top: 50%;`,
+        bottom: `top: 100%; left: 50%;`,
+        left: `right: 100%; top: 50%;`,
+    }[props.direction];
+
+    const borderColorSide = {
+        top: 'border-bottom-color',
+        right: 'border-left-color',
+        bottom: 'border-top-color',
+        left: 'border-right-color',
+    }[props.direction];
+    const border = `${borderColorSide}: ${props.color};`;
+    const marginSide = {
+        top: 'margin-left',
+        right: 'margin-top',
+        bottom: 'margin-left',
+        left: 'margin-top',
+    }[props.direction];
+    const margin = `${marginSide}: -${props.size}px`;
+    return {
+        position,
+        border,
+        margin,
+    };
+};
+
+export const Pointer = styled(PlainPointer)`
+    position: relative;
+    &:after {
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: rgba(136, 183, 213, 0);
+        border-width: ${props => `${props.size}px`};
+        ${props => positionToCss(props).position}
+        ${props => positionToCss(props).border}
+        ${props => positionToCss(props).margin}
+    }
+`;
+
+Pointer.defaultProps = {
+    color: colors.white,
+    size: 16,
+};
+
+Pointer.displayName = 'Pointer';
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 7e47f1d09..1e2a123b7 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -1,8 +1,9 @@
 import { colors } from '@0xproject/react-shared';
+import { darken } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
-export type TextTag = 'p' | 'div' | 'span' | 'label';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
 
 export interface TextProps {
     className?: string;
@@ -14,10 +15,13 @@ export interface TextProps {
     minHeight?: string;
     center?: boolean;
     fontWeight?: number | string;
+    onClick?: () => void;
 }
 
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => (
-    <Tag className={className}>{children}</Tag>
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+    <Tag className={className} onClick={onClick}>
+        {children}
+    </Tag>
 );
 
 export const Text = styled(PlainText)`
@@ -28,14 +32,31 @@ export const Text = styled(PlainText)`
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
     ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+    ${props => (props.onClick ? 'cursor: pointer' : '')};
+    transition: color 0.5s ease;
+    &:hover {
+        ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')};
+    }
 `;
 
 Text.defaultProps = {
     fontFamily: 'Roboto',
     fontWeight: 400,
-    fontColor: colors.white,
-    fontSize: '14px',
+    fontColor: colors.black,
+    fontSize: '15px',
+    lineHeight: '1.5em',
     Tag: 'div',
 };
 
 Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+    Tag: 'h2',
+    fontSize: '20px',
+    fontWeight: 600,
+    fontColor: colors.black,
+};
+
+Title.displayName = 'Title';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index fc5e45248..8c8d74e58 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -131,7 +131,6 @@ const styles: Styles = {
 
 const ETHER_ICON_PATH = '/images/ether.png';
 const ICON_DIMENSION = 28;
-const TOKEN_AMOUNT_DISPLAY_PRECISION = 5;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
@@ -445,10 +444,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 </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}`;
+            const result = utils.getFormattedAmount(amount, decimals, symbol);
             return <div style={styles.amountLabel}>{result}</div>;
         }
     }