aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-29 02:13:19 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-29 02:17:30 +0800
commite4188f5d4c38e53bf6966a364da41a3aa164b567 (patch)
treeac24b29f975be088a9d3d391f8a73acc7ad14aba /packages/website
parent360927ec77d5ea50848f4c1b2c66566542a28d1c (diff)
parent0fcbd02d50bd564a9c888f247a4b0a565d928cc6 (diff)
downloaddexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar.gz
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar.bz2
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar.lz
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar.xz
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.tar.zst
dexon-sol-tools-e4188f5d4c38e53bf6966a364da41a3aa164b567.zip
Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into feature/website/support-new-metamask
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/blockchain.ts12
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx1
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx4
-rw-r--r--packages/website/ts/components/fill_order.tsx8
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx19
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx3
-rw-r--r--packages/website/ts/components/legacy_portal/legacy_portal.tsx3
-rw-r--r--packages/website/ts/components/portal/portal.tsx14
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx2
-rw-r--r--packages/website/ts/components/token_balances.tsx6
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx18
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx47
-rw-r--r--packages/website/ts/types.ts9
-rw-r--r--packages/website/ts/utils/configs.ts2
-rw-r--r--packages/website/ts/utils/constants.ts3
-rw-r--r--packages/website/ts/utils/utils.ts21
18 files changed, 118 insertions, 55 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/blockchain.ts b/packages/website/ts/blockchain.ts
index 18363a4c7..d18c34c32 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -30,6 +30,7 @@ import {
import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
+import * as moment from 'moment';
import * as React from 'react';
import contract = require('truffle-contract');
import { BlockchainWatcher } from 'ts/blockchain_watcher';
@@ -543,6 +544,7 @@ export class Blockchain {
tokenRegistryTokenSymbols,
configs.DEFAULT_TRACKED_TOKEN_SYMBOLS,
);
+ const currentTimestamp = moment().unix();
if (defaultTrackedTokensInRegistry.length !== configs.DEFAULT_TRACKED_TOKEN_SYMBOLS.length) {
this._dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
this._dispatcher.encounteredBlockchainError(BlockchainErrs.DefaultTokensNotInTokenRegistry);
@@ -557,7 +559,7 @@ export class Blockchain {
if (_.isEmpty(trackedTokensByAddress)) {
_.each(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
const token = _.find(tokenRegistryTokens, t => t.symbol === symbol);
- token.isTracked = true;
+ token.trackedTimestamp = currentTimestamp;
trackedTokensByAddress[token.address] = token;
});
if (!_.isUndefined(this._userAddressIfExists)) {
@@ -566,10 +568,10 @@ export class Blockchain {
});
}
} else {
- // Properly set all tokenRegistry tokens `isTracked` to true if they are in the existing trackedTokens array
- _.each(trackedTokensByAddress, (_trackedToken: Token, address: string) => {
+ // Properly set all tokenRegistry tokens `trackedTimestamp` if they are in the existing trackedTokens array
+ _.each(trackedTokensByAddress, (trackedToken: Token, address: string) => {
if (!_.isUndefined(tokenRegistryTokensByAddress[address])) {
- tokenRegistryTokensByAddress[address].isTracked = true;
+ tokenRegistryTokensByAddress[address].trackedTimestamp = trackedToken.trackedTimestamp;
}
});
}
@@ -761,7 +763,7 @@ export class Blockchain {
name: t.name,
symbol: t.symbol,
decimals: t.decimals,
- isTracked: false,
+ trackedTimestamp: undefined,
isRegistered: true,
};
tokenByAddress[token.address] = token;
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index d3d53d30c..c8e10303f 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -4,7 +4,6 @@ import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrs } from 'ts/types';
-import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
interface BlockchainErrDialogProps {
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index f6594b9d5..3751ce06f 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -1,5 +1,6 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
+import * as moment from 'moment';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
@@ -73,12 +74,13 @@ export class TrackTokenConfirmationDialog extends React.Component<
this.setState({
isAddingTokenToTracked: true,
});
+ const currentTimestamp = moment().unix();
for (const token of this.props.tokens) {
const newTokenEntry = {
...token,
+ trackedTimestamp: currentTimestamp,
};
- newTokenEntry.isTracked = true;
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
}
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f3ea44286..03ba1183d 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -373,26 +373,26 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
const tokensToTrack: Token[] = [];
const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
- const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
+ const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && utils.isTokenTracked(makerTokenIfExists);
if (isUnseenMakerToken) {
tokensToTrack.push({
...this.state.parsedOrder.metadata.makerToken,
address: this.state.parsedOrder.signedOrder.makerTokenAddress,
iconUrl: undefined,
- isTracked: false,
+ trackedTimestamp: undefined,
isRegistered: false,
});
} else if (!isMakerTokenTracked) {
tokensToTrack.push(makerTokenIfExists);
}
const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
- const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
+ const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && utils.isTokenTracked(takerTokenIfExists);
if (isUnseenTakerToken) {
tokensToTrack.push({
...this.state.parsedOrder.metadata.takerToken,
address: this.state.parsedOrder.signedOrder.takerTokenAddress,
iconUrl: undefined,
- isTracked: false,
+ trackedTimestamp: undefined,
isRegistered: false,
});
} else if (!isTakerTokenTracked) {
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index b0dcf5678..3d53a9e7d 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
+import * as moment from 'moment';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { NewTokenForm } from 'ts/components/generate_order/new_token_form';
@@ -10,6 +11,7 @@ import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
import { Dispatcher } from 'ts/redux/dispatcher';
import { DialogConfigs, Token, TokenByAddress, TokenVisibility } from 'ts/types';
import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const TOKEN_ICON_DIMENSION = 100;
const TILE_DIMENSION = 146;
@@ -117,7 +119,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,
@@ -134,8 +136,8 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
let tileStyles;
const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
if (
- (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
- (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked) ||
+ (this.props.tokenVisibility === TokenVisibility.TRACKED && !utils.isTokenTracked(token)) ||
+ (this.props.tokenVisibility === TokenVisibility.UNTRACKED && utils.isTokenTracked(token)) ||
token.symbol === constants.ZRX_TOKEN_SYMBOL ||
token.symbol === constants.ETHER_TOKEN_SYMBOL
) {
@@ -154,7 +156,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 +164,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 +183,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)}
@@ -212,7 +214,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
}
private _onChooseToken(tokenAddress: string): void {
const token = this.props.tokenByAddress[tokenAddress];
- if (token.isTracked) {
+ if (utils.isTokenTracked(token)) {
this.props.onTokenChosen(tokenAddress);
} else {
this.setState({
@@ -257,9 +259,8 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
}
const newTokenEntry = {
...token,
+ trackedTimestamp: moment().unix(),
};
-
- newTokenEntry.isTracked = true;
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 176a0807b..3d7eda84c 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,7 @@
import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
+import * as moment from 'moment';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { AddressInput } from 'ts/components/inputs/address_input';
@@ -147,7 +148,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
iconUrl: undefined,
name: this.state.name,
symbol: this.state.symbol.toUpperCase(),
- isTracked: true,
+ trackedTimestamp: moment().unix(),
isRegistered: false,
};
this.props.onNewTokenSubmitted(newToken);
diff --git a/packages/website/ts/components/legacy_portal/legacy_portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
index 79de68cc6..c85d97207 100644
--- a/packages/website/ts/components/legacy_portal/legacy_portal.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
@@ -275,8 +275,7 @@ export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPorta
);
}
private _renderTokenBalances(): React.ReactNode {
- const allTokens = _.values(this.props.tokenByAddress);
- const trackedTokens = _.filter(allTokens, t => t.isTracked);
+ const trackedTokens = utils.getTrackedTokens(this.props.tokenByAddress);
return (
<TokenBalances
blockchain={this._blockchain}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index f06035f3f..438c7b52f 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -191,7 +191,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
this._fetchBalancesAndAllowancesAsync(this._getCurrentTrackedTokensAddresses());
}
- const nextTrackedTokens = this._getTrackedTokens(nextProps.tokenByAddress);
+ const nextTrackedTokens = utils.getTrackedTokens(nextProps.tokenByAddress);
const trackedTokens = this._getCurrentTrackedTokens();
if (!_.isEqual(nextTrackedTokens, trackedTokens)) {
@@ -562,9 +562,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
if (this.state.tokenManagementState === TokenManagementState.Remove && !isDefaultTrackedToken) {
if (token.isRegistered) {
// Remove the token from tracked tokens
- const newToken = {
+ const newToken: Token = {
...token,
- isTracked: false,
+ trackedTimestamp: undefined,
};
this.props.dispatcher.updateTokenByAddress([newToken]);
} else {
@@ -608,17 +608,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
return isSmallScreen;
}
private _getCurrentTrackedTokens(): Token[] {
- return this._getTrackedTokens(this.props.tokenByAddress);
+ return utils.getTrackedTokens(this.props.tokenByAddress);
}
private _getCurrentTrackedTokensAddresses(): string[] {
return _.map(this._getCurrentTrackedTokens(), token => token.address);
}
- private _getTrackedTokens(tokenByAddress: TokenByAddress): Token[] {
- const allTokens = _.values(tokenByAddress);
- const trackedTokens = _.filter(allTokens, t => t.isTracked);
- return trackedTokens;
- }
-
private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]): TokenStateByAddress {
const trackedTokenStateByAddress: TokenStateByAddress = {};
_.each(trackedTokens, token => {
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/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 7af80745c..3fae83c00 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -308,7 +308,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const trackedTokensStartingWithEtherToken = trackedTokens.sort(
firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
.thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
- .thenBy('address'),
+ .thenBy('trackedTimestamp'),
);
const tableRows = _.map(
trackedTokensStartingWithEtherToken,
@@ -424,9 +424,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
if (!this.state.isAddingToken && !isDefaultTrackedToken) {
if (token.isRegistered) {
// Remove the token from tracked tokens
- const newToken = {
+ const newToken: Token = {
...token,
- isTracked: false,
+ trackedTimestamp: undefined,
};
this.props.dispatcher.updateTokenByAddress([newToken]);
} else {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index dc48d6619..785b2da88 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -156,6 +156,20 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
isHoveringSidebar: false,
};
}
+ public componentDidUpdate(prevProps: WalletProps): void {
+ const currentTrackedTokens = this.props.trackedTokens;
+ const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens);
+ const firstDifferentTrackedToken = _.head(differentTrackedTokens);
+ // check if there is only one different token, and if that token is a member of the current tracked tokens
+ // this means that the token was added, not removed
+ if (
+ !_.isUndefined(firstDifferentTrackedToken) &&
+ _.size(differentTrackedTokens) === 1 &&
+ _.includes(currentTrackedTokens, firstDifferentTrackedToken)
+ ) {
+ document.getElementById(firstDifferentTrackedToken.address).scrollIntoView();
+ }
+ }
public render(): React.ReactNode {
const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
return (
@@ -318,7 +332,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const trackedTokensStartingWithEtherToken = trackedTokens.sort(
firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
.thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
- .thenBy('address'),
+ .thenBy('trackedTimestamp'),
);
return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
}
@@ -383,7 +397,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const style = { ...styles.tokenItem, ...additionalStyle };
const etherToken = this._getEthToken();
return (
- <div key={key} className={`flex flex-column ${className || ''}`}>
+ <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
<StandardIconRow
icon={icon}
main={
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 411fc2233..2db947ba3 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -13,8 +13,8 @@ export interface Token {
address: string;
symbol: string;
decimals: number;
- isTracked: boolean;
isRegistered: boolean;
+ trackedTimestamp?: number;
}
export interface TokenByAddress {
@@ -556,4 +556,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/configs.ts b/packages/website/ts/utils/configs.ts
index 4cb60a4ef..2f89f8ccb 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -65,7 +65,7 @@ export const configs = {
} as { [symbol: string]: string },
GOOGLE_ANALYTICS_ID: 'UA-98720122-1',
LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
- LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
+ LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-6-25',
OUTDATED_WRAPPED_ETHERS: [
{
42: {
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..d12ae6a98 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,
@@ -353,6 +355,11 @@ export const utils = {
const token = _.find(tokens, { symbol });
return token;
},
+ getTrackedTokens(tokenByAddress: TokenByAddress): Token[] {
+ const allTokens = _.values(tokenByAddress);
+ const trackedTokens = _.filter(allTokens, t => this.isTokenTracked(t));
+ return trackedTokens;
+ },
getFormattedAmountFromToken(token: Token, tokenState: TokenState): string {
return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol);
},
@@ -368,4 +375,18 @@ 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;
+ }
+ },
+ isTokenTracked(token: Token): boolean {
+ return !_.isUndefined(token.trackedTimestamp);
+ },
};