crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change metamask install link based on browser

Browse Source
This commit is contained in:
Brandon Millman
2018-06-25 16:14:04 -07:00
parent cba92a01b6
commit e52d0a3512
6 changed files with 104 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/website/package.json
View File

@@ -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",

47
packages/website/ts/components/wallet/wallet_disconnected_item.tsx
View File

@@ -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}
/>
);
};

7
packages/website/ts/types.ts
View File

@@ -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

3
packages/website/ts/utils/constants.ts
View File

@@ -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',

13
packages/website/ts/utils/utils.ts
View File

@@ -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;
}
},
};

51
yarn.lock
View File

@@ -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"