From e52d0a351265616d58d9126404db7a359a6648be Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 25 Jun 2018 16:14:04 -0700 Subject: Change metamask install link based on browser --- packages/website/package.json | 1 + .../components/wallet/wallet_disconnected_item.tsx | 47 ++++++++++++++------ packages/website/ts/types.ts | 7 +++ packages/website/ts/utils/constants.ts | 3 ++ packages/website/ts/utils/utils.ts | 13 ++++++ yarn.lock | 51 ++++++++++++++++++++-- 6 files changed, 104 insertions(+), 18 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 = (props: ProviderButtonProps) => ( - } - 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 = (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 ( + } + 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; + } + }, }; diff --git a/yarn.lock b/yarn.lock index ff8f4aaf8..352f13cfd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -310,6 +310,10 @@ version "2.2.48" resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-2.2.48.tgz#3523b126a0b049482e1c3c11877460f76622ffab" +"@types/mocha@^5.2.2": + version "5.2.3" + resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.3.tgz#11f3a5629d67cd444fa6c94536576244e6a52ea9" + "@types/nock@^9.1.2": version "9.1.3" resolved "https://registry.yarnpkg.com/@types/nock/-/nock-9.1.3.tgz#1d445679375b9e25afd449dc56585f81729454e8" @@ -1827,7 +1831,7 @@ boom@5.x.x: dependencies: hoek "4.x.x" -bowser@^1.7.3: +bowser@^1.7.3, bowser@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162" @@ -2875,6 +2879,17 @@ copyfiles@^1.2.0: noms "0.0.0" through2 "^2.0.1" +copyfiles@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.0.0.tgz#bbd78bb78e8fd6db5c67adf54249317b24560f2a" + dependencies: + glob "^7.0.5" + minimatch "^3.0.3" + mkdirp "^0.5.1" + noms "0.0.0" + through2 "^2.0.1" + yargs "^11.0.0" + core-js@^1.0.0: version "1.2.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" @@ -4038,6 +4053,13 @@ ethereum-common@^0.0.18: version "0.0.18" resolved "https://registry.yarnpkg.com/ethereum-common/-/ethereum-common-0.0.18.tgz#2fdc3576f232903358976eb39da783213ff9523f" +ethereum-types@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/ethereum-types/-/ethereum-types-0.0.2.tgz#6ef6faf46a24697cbf66b6c8a0ecf2095ce58c38" + dependencies: + "@types/node" "^8.0.53" + bignumber.js "~4.1.0" + ethereumjs-abi@0.6.5, ethereumjs-abi@^0.6.4, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git": version "0.6.5" resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#4ea2fdfed09e8f99117d9362d17c6b01b64a2bcf" @@ -4165,9 +4187,9 @@ ethereumjs-wallet@~0.6.0: utf8 "^2.1.1" uuid "^2.0.1" -ethers@0xproject/ethers.js#eip-838-reasons, ethers@3.0.22: - version "3.0.18" - resolved "https://codeload.github.com/0xproject/ethers.js/tar.gz/b91342bd200d142af0165d6befddf783c8ae8447" +ethers@3.0.22: + version "3.0.22" + resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436" dependencies: aes-js "3.0.0" bn.js "^4.4.0" @@ -10166,6 +10188,10 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" +run-s@^0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/run-s/-/run-s-0.0.0.tgz#599912be20c00ba7698655c9936d075d31b71754" + rustbn.js@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/rustbn.js/-/rustbn.js-0.1.2.tgz#979fa0f9562216dd667c9d2cd179ae5d13830eff" @@ -13115,6 +13141,23 @@ yargs@^10.0.3: y18n "^3.2.1" yargs-parser "^8.1.0" +yargs@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b" + dependencies: + cliui "^4.0.0" + decamelize "^1.1.1" + find-up "^2.1.0" + get-caller-file "^1.0.1" + os-locale "^2.0.0" + require-directory "^2.1.1" + require-main-filename "^1.0.1" + set-blocking "^2.0.0" + string-width "^2.0.0" + which-module "^2.0.0" + y18n "^3.2.1" + yargs-parser "^9.0.2" + yargs@^4.7.1: version "4.8.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0" -- cgit v1.2.3