Show different download links and icons when on mobile

3 files changed, 47 insertions, 20 deletions

diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
index 369dc8b7e..c4ff93531 100644
--- a/packages/website/ts/components/ui/image.tsx
+++ b/packages/website/ts/components/ui/image.tsx
@@ -6,6 +6,7 @@ export interface ImageProps {
     src?: string;
     fallbackSrc?: string;
     height?: string | number;
+    borderRadius?: string;
     width?: string | number;
 }
 interface ImageState {
@@ -26,6 +27,9 @@ export class Image extends React.Component<ImageProps, ImageState> {
                 className={this.props.className}
                 onError={this._onError.bind(this)}
                 src={src}
+                style={{
+                    borderRadius: this.props.borderRadius,
+                }}
                 height={this.props.height}
                 width={this.props.width}
             />
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 5ced704f9..6995b5065 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -9,11 +9,12 @@ 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 } from 'ts/types';
+import { AccountState, BrowserType, ProviderType, OperatingSystemType } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
 const METAMASK_IMG_SRC = '/images/metamask_icon.png';
+const TOSHI_IMG_SRC = '/images/toshi_logo.jpg';
 
 export interface BodyOverlayProps {
     dispatcher: Dispatcher;
@@ -92,8 +93,10 @@ interface DisconnectedOverlayProps {
 const DisconnectedOverlay = (props: DisconnectedOverlayProps) => {
     return (
         <div className="flex flex-column items-center">
-            <GetMetaMask />
-            <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+            <GetWalletCallToAction />
+            {!utils.isMobileOperatingSystem() && (
+                <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+            )}
         </div>
     );
 };
@@ -112,32 +115,50 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
     );
 };
 
-const GetMetaMask = () => {
+const GetWalletCallToAction = () => {
     const browserType = utils.getBrowserType();
-    let extensionLink;
-    switch (browserType) {
-        case BrowserType.Chrome:
-            extensionLink = constants.URL_METAMASK_CHROME_STORE;
-            break;
-        case BrowserType.Firefox:
-            extensionLink = constants.URL_METAMASK_FIREFOX_STORE;
-            break;
-        case BrowserType.Opera:
-            extensionLink = constants.URL_METAMASK_OPERA_STORE;
-            break;
-        default:
-            extensionLink = constants.URL_METAMASK_HOMEPAGE;
+    const isOnMobile = utils.isMobileOperatingSystem();
+    const operatingSystem = utils.getOperatingSystem();
+    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={extensionLink} target="_blank" style={{ textDecoration: 'none' }}>
+        <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
             <Island
                 className="flex items-center py1 px2"
                 style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }}
             >
-                <Image src={METAMASK_IMG_SRC} width="28px" />
+                <Image src={imageUrl} width="28px" borderRadius="22%" />
                 <Container marginLeft="8px" marginRight="12px">
                     <Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
-                        Get MetaMask Wallet
+                        {text}
                     </Text>
                 </Container>
             </Island>
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 0c4b88780..4b3443d21 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -74,6 +74,8 @@ export const constants = {
     URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
     URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
     URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
+    URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8',
+    URL_TOSHI_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en_US',
     URL_METAMASK_HOMEPAGE: 'https://metamask.io/',
     URL_METAMASK_OPERA_STORE: 'https://addons.opera.com/en/extensions/details/metamask/',
     URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases',