diff options
-rw-r--r-- | packages/website/package.json | 1 | ||||
-rw-r--r-- | packages/website/ts/components/wallet/wallet_disconnected_item.tsx | 47 | ||||
-rw-r--r-- | packages/website/ts/types.ts | 7 | ||||
-rw-r--r-- | packages/website/ts/utils/constants.ts | 3 | ||||
-rw-r--r-- | packages/website/ts/utils/utils.ts | 13 | ||||
-rw-r--r-- | yarn.lock | 8 |
6 files changed, 61 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<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; + } + }, }; @@ -1831,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" @@ -4194,9 +4194,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" |