Prompt user to download Toshi or MetaMask in install wallet onboarding step

3 files changed, 73 insertions, 46 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..d72290025 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.getBestWalletDownloadLink();
+    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/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 6995b5065..d8fdade7d 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -9,8 +9,7 @@ import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
-import { AccountState, BrowserType, ProviderType, OperatingSystemType } from 'ts/types';
-import { constants } from 'ts/utils/constants';
+import { AccountState, ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 const METAMASK_IMG_SRC = '/images/metamask_icon.png';
@@ -116,39 +115,9 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
 };
 
 const GetWalletCallToAction = () => {
-    const browserType = utils.getBrowserType();
-    const isOnMobile = utils.isMobileOperatingSystem();
-    const operatingSystem = utils.getOperatingSystem();
+    const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink();
     const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC;
     const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet';
-    let downloadLink;
-    if (isOnMobile) {
-        switch (operatingSystem) {
-            case OperatingSystemType.Android:
-                downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE;
-                break;
-            case OperatingSystemType.iOS:
-                downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
-                break;
-            default:
-                // Toshi is only supported on these mobile OSes - just default to iOS
-                downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
-        }
-    } else {
-        switch (browserType) {
-            case BrowserType.Chrome:
-                downloadLink = constants.URL_METAMASK_CHROME_STORE;
-                break;
-            case BrowserType.Firefox:
-                downloadLink = constants.URL_METAMASK_FIREFOX_STORE;
-                break;
-            case BrowserType.Opera:
-                downloadLink = constants.URL_METAMASK_OPERA_STORE;
-                break;
-            default:
-                downloadLink = constants.URL_METAMASK_HOMEPAGE;
-        }
-    }
     return (
         <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
             <Island
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index ffbf97f12..c47beb480 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -15,6 +15,7 @@ import {
     BlockchainCallErrs,
     BrowserType,
     Environments,
+    OperatingSystemType,
     Order,
     Providers,
     ProviderType,
@@ -24,7 +25,6 @@ import {
     Token,
     TokenByAddress,
     TokenState,
-    OperatingSystemType,
 } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
@@ -442,4 +442,39 @@ export const utils = {
     isTokenTracked(token: Token): boolean {
         return !_.isUndefined(token.trackedTimestamp);
     },
+    // Returns a [downloadLink, isOnMobile] tuple.
+    getBestWalletDownloadLink(): [string, boolean] {
+        const browserType = utils.getBrowserType();
+        const isOnMobile = utils.isMobileOperatingSystem();
+        const operatingSystem = utils.getOperatingSystem();
+        let downloadLink;
+        if (isOnMobile) {
+            switch (operatingSystem) {
+                case OperatingSystemType.Android:
+                    downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE;
+                    break;
+                case OperatingSystemType.iOS:
+                    downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
+                    break;
+                default:
+                    // Toshi is only supported on these mobile OSes - just default to iOS
+                    downloadLink = constants.URL_TOSHI_IOS_APP_STORE;
+            }
+        } else {
+            switch (browserType) {
+                case BrowserType.Chrome:
+                    downloadLink = constants.URL_METAMASK_CHROME_STORE;
+                    break;
+                case BrowserType.Firefox:
+                    downloadLink = constants.URL_METAMASK_FIREFOX_STORE;
+                    break;
+                case BrowserType.Opera:
+                    downloadLink = constants.URL_METAMASK_OPERA_STORE;
+                    break;
+                default:
+                    downloadLink = constants.URL_METAMASK_HOMEPAGE;
+            }
+        }
+        return [downloadLink, isOnMobile];
+    },
 };