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

Make onboarding and wallet copy dynamic based on OS

2 files changed, 59 insertions, 1 deletions

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',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 2cda41545..623819fc9 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,
@@ -401,9 +402,12 @@ export const utils = {
     openUrl(url: string): void {
         window.open(url, '_blank');
     },
-    isMobile(screenWidth: ScreenWidths): boolean {
+    isMobileWidth(screenWidth: ScreenWidths): boolean {
         return screenWidth === ScreenWidths.Sm;
     },
+    isMobileOperatingSystem(): boolean {
+        return bowser.mobile;
+    },
     getBrowserType(): BrowserType {
         if (bowser.chrome) {
             return BrowserType.Chrome;
@@ -415,7 +419,59 @@ export const utils = {
             return BrowserType.Other;
         }
     },
+    getOperatingSystem(): OperatingSystemType {
+        if (bowser.android) {
+            return OperatingSystemType.Android;
+        } else if (bowser.ios) {
+            return OperatingSystemType.iOS;
+        } else if (bowser.mac) {
+            return OperatingSystemType.Mac;
+        } else if (bowser.windows) {
+            return OperatingSystemType.Windows;
+        } else if (bowser.windowsphone) {
+            return OperatingSystemType.WindowsPhone;
+        } else if (bowser.linux) {
+            return OperatingSystemType.Linux;
+        } else {
+            return OperatingSystemType.Other;
+        }
+    },
     isTokenTracked(token: Token): boolean {
         return !_.isUndefined(token.trackedTimestamp);
     },
+    // Returns a [downloadLink, isOnMobile] tuple.
+    getBestWalletDownloadLinkAndIsMobile(): [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];
+    },
 };