Change metamask install link based on browser

5 files changed, 57 insertions, 14 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index a2ac617eb..c7b689356 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -29,6 +29,7 @@
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
+        "bowser": "^1.9.3",
         "deep-equal": "^1.0.1",
         "ethereumjs-util": "^5.1.1",
         "find-versions": "^2.0.0",
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index 1015dce29..024b28544 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -3,7 +3,7 @@ import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
 import { colors } from 'ts/style/colors';
-import { ProviderType } from 'ts/types';
+import { BrowserType, ProviderType } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
@@ -66,16 +66,35 @@ interface ProviderButtonProps {
     isExternallyInjectedProvider: boolean;
 }
 
-const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => (
-    <FlatButton
-        label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
-        labelStyle={{ color: colors.black }}
-        labelPosition="after"
-        primary={true}
-        icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
-        style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
-        href={props.isExternallyInjectedProvider ? undefined : constants.URL_METAMASK_CHROME_STORE}
-        target={props.isExternallyInjectedProvider ? undefined : '_blank'}
-        disabled={props.isExternallyInjectedProvider}
-    />
-);
+const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => {
+    const browserType = utils.getBrowserType();
+    let extensionLink;
+    if (!props.isExternallyInjectedProvider) {
+        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;
+        }
+    }
+    return (
+        <FlatButton
+            label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
+            labelStyle={{ color: colors.black }}
+            labelPosition="after"
+            primary={true}
+            icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
+            style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
+            href={extensionLink}
+            target={props.isExternallyInjectedProvider ? undefined : '_blank'}
+            disabled={props.isExternallyInjectedProvider}
+        />
+    );
+};
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index d00154652..8a88c31b2 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -546,4 +546,11 @@ export interface WebsiteBackendJobInfo {
     office: string;
     url: string;
 }
+
+export enum BrowserType {
+    Chrome = 'Chrome',
+    Firefox = 'Firefox',
+    Opera = 'Opera',
+    Other = 'Other',
+}
 // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 25670ef27..a3f8eacb0 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -70,6 +70,9 @@ export const constants = {
     URL_GITHUB_ORG: 'https://github.com/0xProject',
     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_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',
     URL_PARITY_CHROME_STORE:
         'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 0cb965f05..ff06d923d 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,11 +4,13 @@ import { constants as sharedConstants, Networks } from '@0xproject/react-shared'
 import { ECSignature, Provider } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as bowser from 'bowser';
 import deepEqual = require('deep-equal');
 import * as _ from 'lodash';
 import * as moment from 'moment';
 import {
     BlockchainCallErrs,
+    BrowserType,
     Environments,
     Order,
     Providers,
@@ -368,4 +370,15 @@ export const utils = {
     isMobile(screenWidth: ScreenWidths): boolean {
         return screenWidth === ScreenWidths.Sm;
     },
+    getBrowserType(): BrowserType {
+        if (bowser.chrome) {
+            return BrowserType.Chrome;
+        } else if (bowser.firefox) {
+            return BrowserType.Firefox;
+        } else if (bowser.opera) {
+            return BrowserType.Opera;
+        } else {
+            return BrowserType.Other;
+        }
+    },
 };