Merge pull request #816 from 0xProject/feature/website/portal-mobile-improvements

Make onboarding and wallet copy dynamic based on OS

2 files changed, 40 insertions, 18 deletions

diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index a95c464af..d618c8318 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -1,19 +1,42 @@
 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 { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
+import { utils } from 'ts/utils/utils';
 
 export interface InstallWalletOnboardingStepProps {}
 
-export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
-        <Text>
-            Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
-        </Text>
-        <Container marginTop="15px" marginBottom="15px">
-            <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} />
-        </Container>
-        <Text>Please refresh the page once you've done this to continue!</Text>
-    </div>
-);
+export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => {
+    const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile();
+    const followupText = isOnMobile
+        ? `Please revisit this site in your mobile dApp browser to continue!`
+        : `Please refresh the page once you've done this to continue!`;
+    const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension';
+    return (
+        <div className="flex items-center flex-column">
+            <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text>
+            <Container className="flex items-center" marginTop="15px" marginBottom="15px">
+                <Image
+                    height="50px"
+                    width="50px"
+                    borderRadius="22%"
+                    src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'}
+                />
+                <Container marginLeft="10px">
+                    <a href={downloadLink} target="_blank">
+                        <Text
+                            fontWeight={700}
+                            fontSize="18px"
+                            fontColor={colors.mediumBlue}
+                            textDecorationLine="underline"
+                        >
+                            {downloadText}
+                        </Text>
+                    </a>
+                </Container>
+            </Container>
+            <Text>{followupText}</Text>
+        </div>
+    );
+};
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index b7c5a9f64..1c2c92fd1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -57,13 +57,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
-        this._adjustStepIfShould();
-        if (!prevProps.isRunning && this.props.isRunning) {
+        // Any one of steps 0-3 could be the starting step, and we only want to reset the scroll on the starting step.
+        if (this.props.isRunning && utils.isMobileWidth(this.props.screenWidth) && this.props.stepIndex < 3) {
             // On mobile, make sure the wallet is completely visible.
-            if (this.props.screenWidth === ScreenWidths.Sm) {
-                document.querySelector('.wallet').scrollIntoView();
-            }
+            document.querySelector('.wallet').scrollIntoView();
         }
+        this._adjustStepIfShould();
         if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
             this._autoStartOnboardingIfShould();
         }
@@ -275,7 +274,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         );
     }
     private _handleFinalStepContinueClick(): void {
-        if (utils.isMobile(this.props.screenWidth)) {
+        if (utils.isMobileWidth(this.props.screenWidth)) {
             window.scrollTo(0, 0);
             this.props.history.push('/portal');
         }