From 51948d7760a81cb10bbcfdc50c19eb1c7cddf37b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 19 Jun 2018 16:39:52 -0700
Subject: Show start onboarding flow button on top of wallet on mobile

---
 packages/website/ts/components/portal/portal.tsx | 54 +++++++++++++-----------
 1 file changed, 29 insertions(+), 25 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 67314678b..3d7bbfd0a 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -340,10 +340,14 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderWallet(): React.ReactNode {
+        const startOnboarding = this._renderStartOnboarding();
+        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
         return (
             <div>
+                {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
                 <Wallet
-                    style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
+                    // style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
+                    style={true ? { zIndex: zIndex.aboveOverlay } : undefined}
                     userAddress={this.props.userAddress}
                     networkId={this.props.networkId}
                     blockchain={this._blockchain}
@@ -364,33 +368,33 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     onRemoveToken={this._onRemoveToken.bind(this)}
                     refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
                 />
-                <Container marginTop="15px">
-                    <Island>
-                        <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>
+                {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
             </div>
         );
     }
+    private _renderStartOnboarding(): React.ReactNode {
+        return (
+            <Island>
+                <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>
+        );
+    }
 
     private _startOnboarding(): void {
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-- 
cgit v1.2.3


From e5fe6b915e760b38a22a8d314fb62364470160eb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 19 Jun 2018 17:32:01 -0700
Subject: Change Island to use styled-components

---
 packages/website/ts/components/ui/island.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index de90b664f..b88d5fc1b 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,28 +1,21 @@
 import * as React from 'react';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 
 export interface IslandProps {
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
 }
 
-const defaultStyle: React.CSSProperties = {
-    backgroundColor: colors.white,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderTopLeftRadius: 10,
-    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-    overflow: 'hidden',
-};
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, ...rest }) => <Component {...rest} />;
 
-export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
-    <props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
-        {props.children}
-    </props.Component>
-);
+export const Island = styled(PlainIsland)`
+    background-color: ${colors.white};
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
+    overflow: hidden;
+`;
 
 Island.defaultProps = {
     Component: 'div',
-- 
cgit v1.2.3


From 39ccb2df0b43d3915337259789c393e4603b964c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 20 Jun 2018 11:25:59 -0700
Subject: Scroll to wallet for mobile onboarding

---
 packages/website/ts/components/portal/portal.tsx | 51 +++++++++++++-----------
 1 file changed, 28 insertions(+), 23 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 3d7bbfd0a..b1860954c 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -345,29 +345,30 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         return (
             <div>
                 {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Wallet
-                    // style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
-                    style={true ? { zIndex: zIndex.aboveOverlay } : 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 marginBottom="15px">
+                    <Wallet
+                        style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : 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>}
             </div>
         );
@@ -400,6 +401,10 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep);
         this.props.dispatcher.updatePortalOnboardingShowing(true);
+        // On mobile, make sure the wallet is completely visible.
+        if (this.props.screenWidth === ScreenWidths.Sm) {
+            document.querySelector('.wallet').scrollIntoView();
+        }
     }
     private _renderWalletSection(): React.ReactNode {
         return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />;
-- 
cgit v1.2.3


From 1e51af1d4b68bad9363411167fd4eb959e7a32dd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 20 Jun 2018 15:51:17 -0700
Subject: Support mobile friendly onboarding flows

---
 .../ts/components/onboarding/onboarding_card.tsx   | 82 ++++++++++++++++++++++
 .../ts/components/onboarding/onboarding_flow.tsx   | 49 ++++++++++---
 .../components/onboarding/onboarding_tooltip.tsx   | 73 ++-----------------
 .../onboarding/portal_onboarding_flow.tsx          |  5 +-
 packages/website/ts/components/portal/portal.tsx   | 20 ++++--
 packages/website/ts/components/ui/animation.tsx    | 32 +++++++++
 packages/website/ts/components/ui/container.tsx    |  1 +
 packages/website/ts/components/wallet/wallet.tsx   |  1 -
 .../ts/containers/portal_onboarding_flow.ts        |  4 +-
 9 files changed, 180 insertions(+), 87 deletions(-)
 create mode 100644 packages/website/ts/components/onboarding/onboarding_card.tsx
 create mode 100644 packages/website/ts/components/ui/animation.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
new file mode 100644
index 000000000..795a017e9
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -0,0 +1,82 @@
+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 { Text, Title } from 'ts/components/ui/text';
+
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
+export interface OnboardingCardProps {
+    title?: string;
+    content: React.ReactNode;
+    isLastStep: boolean;
+    onClose: () => void;
+    onClickNext: () => void;
+    onClickBack: () => void;
+    continueButtonDisplay?: ContinueButtonDisplay;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
+    continueButtonText?: string;
+}
+
+export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+}) => (
+    <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>
+);
+
+OnboardingCard.defaultProps = {
+    continueButtonText: 'Continue',
+};
+
+OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 34aeace82..7360d26ae 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
+import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
 
@@ -22,26 +24,37 @@ export interface OnboardingFlowProps {
     isRunning: boolean;
     onClose: () => void;
     updateOnboardingStep: (stepIndex: number) => void;
+    disableOverlay?: boolean;
+    isMobile: boolean;
 }
 
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+    public static defaultProps = {
+        disableOverlay: false,
+        isMobile: false,
+    };
     public render(): React.ReactNode {
         if (!this.props.isRunning) {
             return null;
         }
-        return (
-            <Overlay>
+        let onboardingEl = null;
+        if (this.props.isMobile) {
+            onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
+        } else {
+            onboardingEl = (
                 <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
-            </Overlay>
-        );
+            );
+        }
+        if (this.props.disableOverlay) {
+            return onboardingEl;
+        }
+        return <Overlay>{onboardingEl}</Overlay>;
     }
-
     private _getElementForStep(): Element {
         return document.querySelector(this._getCurrentStep().target);
     }
-
     private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         return (
             <div ref={props.ref} style={props.style} data-placement={props.placement}>
@@ -49,7 +62,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-
     private _renderToolTip(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
@@ -72,10 +84,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
+    private _renderOnboardignCard(): React.ReactNode {
+        const { steps, stepIndex } = this.props;
+        const step = steps[stepIndex];
+        const isLastStep = steps.length - 1 === stepIndex;
+        return (
+            <Container position="relative" zIndex={1} maxWidth="100vw">
+                <OnboardingCard
+                    title={step.title}
+                    content={step.content}
+                    isLastStep={isLastStep}
+                    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>
+        );
+    }
     private _getCurrentStep(): Step {
         return this.props.steps[this.props.stepIndex];
     }
-
     private _goToNextStep(): void {
         const nextStep = this.props.stepIndex + 1;
         if (nextStep < this.props.steps.length) {
@@ -84,7 +116,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             this.props.onClose();
         }
     }
-
     private _goToPrevStep(): void {
         const nextStep = this.props.stepIndex - 1;
         if (nextStep >= 0) {
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 45851b4de..74fc6f715 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,90 +1,27 @@
-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 { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card';
 import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
-import { Text, Title } from 'ts/components/ui/text';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
-export interface OnboardingTooltipProps {
-    title?: string;
-    content: React.ReactNode;
-    isLastStep: boolean;
-    onClose: () => void;
-    onClickNext: () => void;
-    onClickBack: () => void;
-    continueButtonDisplay?: ContinueButtonDisplay;
-    shouldHideBackButton?: boolean;
-    shouldHideNextButton?: boolean;
-    pointerDirection?: PointerDirection;
-    continueButtonText?: string;
+export interface OnboardingTooltipProps extends OnboardingCardProps {
     className?: string;
+    pointerDirection?: PointerDirection;
 }
 
 export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
-    title,
-    content,
-    continueButtonDisplay,
-    continueButtonText,
-    onClickNext,
-    onClickBack,
-    onClose,
-    shouldHideBackButton,
-    shouldHideNextButton,
     pointerDirection,
     className,
+    ...cardProps,
 }) => (
     <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>
+        <OnboardingCard {...cardProps} />
     </Pointer>
 );
 
 OnboardingTooltip.defaultProps = {
     pointerDirection: 'left',
-    continueButtonText: 'Continue',
 };
 
 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 7e40192f6..10d4af30e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,7 @@ import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowa
 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 { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { utils } from 'ts/utils/utils';
 
@@ -34,6 +34,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
     updateIsRunning: (isRunning: boolean) => void;
     updateOnboardingStep: (stepIndex: number) => void;
     refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
+    screenWidth: ScreenWidths;
 }
 
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
@@ -57,6 +58,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 isRunning={this.props.isRunning}
                 onClose={this._closeOnboarding.bind(this)}
                 updateOnboardingStep={this._updateOnboardingStep.bind(this)}
+                disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
+                isMobile={this.props.screenWidth === ScreenWidths.Sm}
             />
         );
     }
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b1860954c..11b3b43f4 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -246,11 +246,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
-                <PortalOnboardingFlow
-                    blockchain={this._blockchain}
-                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -307,6 +302,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenVisibility={tokenVisibility}
                     />
                 </div>
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
             </div>
         );
     }
@@ -342,12 +342,18 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderWallet(): React.ReactNode {
         const startOnboarding = this._renderStartOnboarding();
         const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+        // We need room to scroll down for mobile onboarding
+        const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
                 {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Container marginBottom="15px">
+                <Container marginBottom={marginBottom}>
                     <Wallet
-                        style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
+                        style={
+                            !isMobile && this.props.isPortalOnboardingShowing
+                                ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+                                : undefined
+                        }
                         userAddress={this.props.userAddress}
                         networkId={this.props.networkId}
                         blockchain={this._blockchain}
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
new file mode 100644
index 000000000..cbda2993d
--- /dev/null
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { keyframes, styled } from 'ts/style/theme';
+
+export type AnimationType = 'easeUpFromBottom';
+
+export interface AnimationProps {
+    type: AnimationType;
+}
+
+const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />;
+
+const appearFromBottomFrames = keyframes`
+    from {
+        position: absolute;
+        bottom: -500px;
+    }
+
+    to {
+        position: absolute;
+        bottom: 0px;
+    }
+`;
+
+const animations: { [K in AnimationType]: string } = {
+    easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
+};
+
+export const Animation = styled(PlainAnimation)`
+    animation: ${props => animations[props.type]};
+`;
+
+Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 1776345da..90aec0e7c 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -23,6 +23,7 @@ export interface ContainerProps {
     left?: string;
     right?: string;
     bottom?: string;
+    zIndex?: number;
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ac2fe0d31..a1789c103 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -86,7 +86,6 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     root: {
         width: '100%',
-        position: 'relative',
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index ba2b8f512..12daad021 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { Blockchain } from 'ts/blockchain';
-import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ActionTypes, ProviderType, ScreenWidths, TokenByAddress, TokenStateByAddress } from 'ts/types';
 
 import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
 import { State } from 'ts/redux/reducer';
@@ -25,6 +25,7 @@ interface ConnectedState {
     blockchainIsLoaded: boolean;
     userEtherBalanceInWei?: BigNumber;
     tokenByAddress: TokenByAddress;
+    screenWidth: ScreenWidths;
 }
 
 interface ConnectedDispatch {
@@ -43,6 +44,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
     userEtherBalanceInWei: state.userEtherBalanceInWei,
     tokenByAddress: state.tokenByAddress,
     hasBeenSeen: state.hasPortalOnboardingBeenSeen,
+    screenWidth: state.screenWidth,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-- 
cgit v1.2.3


From c34897036e8cf896e6d0b3c7733ed9c739921f74 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 20 Jun 2018 16:05:19 -0700
Subject: Prevent prettier issue

---
 .../ts/components/onboarding/onboarding_tooltip.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 74fc6f715..d8065625d 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -10,16 +10,14 @@ export interface OnboardingTooltipProps extends OnboardingCardProps {
     pointerDirection?: PointerDirection;
 }
 
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
-    pointerDirection,
-    className,
-    ...cardProps,
-}) => (
-    <Pointer className={className} direction={pointerDirection}>
-        <OnboardingCard {...cardProps} />
-    </Pointer>
-);
-
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
+    const { pointerDirection, className, ...cardProps } = props;
+    return (
+        <Pointer className={className} direction={pointerDirection}>
+            <OnboardingCard {...cardProps} />
+        </Pointer>
+    );
+};
 OnboardingTooltip.defaultProps = {
     pointerDirection: 'left',
 };
-- 
cgit v1.2.3


From d963941be03596d9030dca8788ad26c09b98822d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 11:33:47 -0700
Subject: Remove border radius, fix width issue for unlock step

---
 packages/website/ts/components/onboarding/onboarding_card.tsx     | 4 +++-
 packages/website/ts/components/onboarding/onboarding_flow.tsx     | 3 ++-
 .../ts/components/onboarding/unlock_wallet_onboarding_step.tsx    | 2 +-
 packages/website/ts/components/ui/island.tsx                      | 8 ++++++--
 4 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 795a017e9..bc83b8034 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -20,6 +20,7 @@ export interface OnboardingCardProps {
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonText?: string;
+    borderRadius?: string;
 }
 
 export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
@@ -32,8 +33,9 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     onClose,
     shouldHideBackButton,
     shouldHideNextButton,
+    borderRadius,
 }) => (
-    <Island>
+    <Island borderRadius={borderRadius}>
         <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
             <div className="flex flex-column">
                 <div className="flex justify-between">
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 7360d26ae..cfce70b84 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -67,7 +67,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container marginLeft="30px">
+            <Container marginLeft="30px" maxWidth={350}>
                 <OnboardingTooltip
                     title={step.title}
                     content={step.content}
@@ -101,6 +101,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
+                    borderRadius="10px 10px 0px 0px"
                 />
             </Container>
         );
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 6e6a74a06..0039aa545 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/metamask_icon.png" height="50px" width="50px" />
             </Container>
-            <Text>Unlock your metamask extension to begin.</Text>
+            <Text center={true}>Unlock your metamask extension to get started.</Text>
         </div>
     </div>
 );
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index b88d5fc1b..f157e3052 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -6,19 +6,23 @@ export interface IslandProps {
     style?: React.CSSProperties;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+    borderRadius?: string;
 }
 
-const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, ...rest }) => <Component {...rest} />;
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, borderRadius, ...rest }) => (
+    <Component {...rest} />
+);
 
 export const Island = styled(PlainIsland)`
     background-color: ${colors.white};
-    border-radius: 10px;
+    border-radius: ${props => props.borderRadius};
     box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
     overflow: hidden;
 `;
 
 Island.defaultProps = {
     Component: 'div',
+    borderRadius: '10px',
     style: {},
 };
 
-- 
cgit v1.2.3


From eb494f78fa04bb4e6eece27a810e17e665d3a31e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 12:09:38 -0700
Subject: Buttons look hella disabled now

---
 .../website/ts/components/onboarding/onboarding_flow.tsx | 10 +++++-----
 packages/website/ts/components/ui/button.tsx             | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index cfce70b84..331899469 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -37,20 +37,20 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         if (!this.props.isRunning) {
             return null;
         }
-        let onboardingEl = null;
+        let onboardingElement = null;
         if (this.props.isMobile) {
-            onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
+            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
         } else {
-            onboardingEl = (
+            onboardingElement = (
                 <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
         }
         if (this.props.disableOverlay) {
-            return onboardingEl;
+            return onboardingElement;
         }
-        return <Overlay>{onboardingEl}</Overlay>;
+        return <Overlay>{onboardingElement}</Overlay>;
     }
     private _getElementForStep(): Element {
         return document.querySelector(this._getCurrentStep().target);
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index cb542a386..02fa47480 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, grayscale } from 'polished';
+import { darken, saturate } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
@@ -17,7 +17,7 @@ export interface ButtonProps {
 }
 
 const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
         {children}
     </button>
 );
@@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
     cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
-    transition: background-color 0.5s ease;
+    transition: background-color, opacity 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;
+    outline: none;
     font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
+    background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
         background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
@@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
     &:active {
         background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
     }
+    &:disabled {
+        opacity: 0.5;
+        box-shadow: none;
+    }
+    &:focus {
+        background-color: ${props => saturate(0.2, props.backgroundColor)};
+    }
 `;
 
 Button.defaultProps = {
-- 
cgit v1.2.3


From 5edfec68cf19f50977cfb8390528b5601a920936 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 12:12:44 -0700
Subject: Fix linting

---
 packages/website/ts/components/ui/island.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index f157e3052..4bb4741b3 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -9,8 +9,8 @@ export interface IslandProps {
     borderRadius?: string;
 }
 
-const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, borderRadius, ...rest }) => (
-    <Component {...rest} />
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, style, className }) => (
+    <Component style={style} className={className} />
 );
 
 export const Island = styled(PlainIsland)`
-- 
cgit v1.2.3