From 3b78188fec8654ff9338afb22708279bf2335c70 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 3 Jul 2018 13:51:58 -0700
Subject: Show different download links and icons when on mobile

---
 .../website/ts/components/wallet/body_overlay.tsx  | 61 +++++++++++++++-------
 1 file changed, 41 insertions(+), 20 deletions(-)

(limited to 'packages/website/ts/components/wallet')

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>
-- 
cgit v1.2.3


From 931e7e7d71be4ec18081a2501dee0254b511f388 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 3 Jul 2018 14:28:49 -0700
Subject: Prompt user to download Toshi or MetaMask in install wallet
 onboarding step

---
 .../website/ts/components/wallet/body_overlay.tsx  | 35 ++--------------------
 1 file changed, 2 insertions(+), 33 deletions(-)

(limited to 'packages/website/ts/components/wallet')

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
-- 
cgit v1.2.3


From 302b9deef3a7625caa6d49ccc497936d5e4f07e2 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 5 Jul 2018 10:54:13 -0700
Subject: Rename getBestDownloadLink to getBestWalletDownloadLinkAndIsMobile

---
 packages/website/ts/components/wallet/body_overlay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/wallet')

diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index d8fdade7d..26359d0d2 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -115,7 +115,7 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
 };
 
 const GetWalletCallToAction = () => {
-    const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLink();
+    const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile();
     const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC;
     const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet';
     return (
-- 
cgit v1.2.3