aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json1
-rw-r--r--packages/website/public/images/relayer_fallback.pngbin0 -> 4707 bytes
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx8
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx47
-rw-r--r--packages/website/ts/types.ts7
-rw-r--r--packages/website/ts/utils/constants.ts3
-rw-r--r--packages/website/ts/utils/utils.ts13
8 files changed, 62 insertions, 19 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/public/images/relayer_fallback.png b/packages/website/public/images/relayer_fallback.png
new file mode 100644
index 000000000..587fc9ef7
--- /dev/null
+++ b/packages/website/public/images/relayer_fallback.png
Binary files differ
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index b0dcf5678..0f569e1ad 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -117,7 +117,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
private _renderAssetPicker(): React.ReactNode {
return (
<div
- className="clearfix flex flex-wrap"
+ className="flex flex-wrap"
style={{
overflowY: 'auto',
maxWidth: 720,
@@ -154,7 +154,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
height: TILE_DIMENSION,
...tileStyles,
}}
- className="p2 flex flex-column items-center"
+ className="p2 flex sm-col-6 md-col-3 lg-col-3 flex-column items-center mx-auto"
onClick={this._onChooseToken.bind(this, address)}
onMouseEnter={this._onToggleHover.bind(this, address, true)}
onMouseLeave={this._onToggleHover.bind(this, address, false)}
@@ -162,7 +162,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
<div className="p1">
<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
</div>
- <div className="center">{token.name}</div>
+ <div className="center">{token.symbol}</div>
</div>
);
});
@@ -181,7 +181,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
height: TILE_DIMENSION,
...tileStyles,
}}
- className="p2 mx-auto"
+ className="p2 flex sm-col-6 md-col-3 lg-col-3 flex-column items-center mx-auto"
onClick={this._onCustomAssetChosen.bind(this)}
onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
onMouseLeave={this._onToggleHover.bind(this, otherTokenKey, false)}
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 18b069ae2..b26bf512b 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -54,7 +54,7 @@ const styles: Styles = {
},
};
-const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+const FALLBACK_IMG_SRC = '/images/relayer_fallback.png';
const FALLBACK_PRIMARY_COLOR = colors.grey200;
const NO_CONTENT_MESSAGE = '--';
const RELAYER_ICON_HEIGHT = '110px';
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;
+ }
+ },
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-03 15:10:18 +0800