diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/eth_wrappers.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/components/generate_order/asset_picker.tsx | 40 |
2 files changed, 33 insertions, 14 deletions
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 20b446155..0b282b2a1 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -20,6 +20,7 @@ import { } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const DATE_FORMAT = 'D/M/YY'; const ICON_DIMENSION = 40; @@ -95,7 +96,11 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt this.props.networkId, EtherscanLinkSuffixes.Address, ); - const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); + const tokenLabel = this._renderToken( + 'Wrapped Ether', + etherToken.address, + utils.getTokenIconUrl(etherToken.symbol), + ); const userEtherBalanceInEth = !_.isUndefined(this.props.userEtherBalanceInWei) ? Web3Wrapper.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH) : undefined; diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 3d53a9e7d..5eada37b6 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -3,6 +3,8 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as moment from 'moment'; import * as React from 'react'; +import firstBy = require('thenby'); + import { Blockchain } from 'ts/blockchain'; import { NewTokenForm } from 'ts/components/generate_order/new_token_form'; import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation'; @@ -87,10 +89,10 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt return ( <Dialog title={dialogConfigs.title} - titleStyle={{ fontWeight: 100 }} modal={dialogConfigs.isModal} open={this.props.isOpen} actions={dialogConfigs.actions} + autoScrollBodyContent={true} onRequestClose={this._onCloseDialog.bind(this)} > {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()} @@ -121,9 +123,8 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt <div className="flex flex-wrap" style={{ - overflowY: 'auto', - maxWidth: 720, - maxHeight: 356, + maxWidth: 1000, + maxHeight: 600, marginBottom: 10, }} > @@ -134,15 +135,28 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt private _renderGridTiles(): React.ReactNode { let isHovered; let tileStyles; - const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => { - if ( - (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 - ) { - return null; // Skip - } + const allTokens = _.values(this.props.tokenByAddress); + // filter tokens based on visibility specified in props, do not show ZRX or ETHER as tracked or untracked + const filteredTokens = + this.props.tokenVisibility === TokenVisibility.ALL + ? allTokens + : _.filter(allTokens, token => { + return ( + token.symbol !== constants.ZRX_TOKEN_SYMBOL && + token.symbol !== constants.ETHER_TOKEN_SYMBOL && + ((this.props.tokenVisibility === TokenVisibility.TRACKED && utils.isTokenTracked(token)) || + (this.props.tokenVisibility === TokenVisibility.UNTRACKED && + !utils.isTokenTracked(token))) + ); + }); + // if we are showing tracked tokens, sort by date added, otherwise sort by symbol + const sortKey = this.props.tokenVisibility === TokenVisibility.TRACKED ? 'trackedTimestamp' : 'symbol'; + const sortedTokens = filteredTokens.sort(firstBy(sortKey)); + if (_.isEmpty(sortedTokens)) { + return <div className="mx-auto p4 h2">No tokens to remove.</div>; + } + const gridTiles = _.map(sortedTokens, token => { + const address = token.address; isHovered = this.state.hoveredAddress === address; tileStyles = { cursor: 'pointer', |