diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-07-07 04:24:55 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-07-07 04:24:55 +0800 |
commit | 80da9cd31fa1f996e879e4d95401a97b7024b4a1 (patch) | |
tree | ba093e443601b8edfa36dca2c0c899534dfb3678 /packages/website/ts/components/generate_order/asset_picker.tsx | |
parent | 4cc33d270ee62584710659b16671575ce9955e5e (diff) | |
parent | 49c7365d93b397d1d63fb7b155e5915c43988314 (diff) | |
download | dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar.gz dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar.bz2 dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar.lz dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar.xz dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.tar.zst dexon-sol-tools-80da9cd31fa1f996e879e4d95401a97b7024b4a1.zip |
Merge pull request #835 from 0xProject/feature/website/token-updates
Update token registry icons and asset picker flows
Diffstat (limited to 'packages/website/ts/components/generate_order/asset_picker.tsx')
-rw-r--r-- | packages/website/ts/components/generate_order/asset_picker.tsx | 40 |
1 files changed, 27 insertions, 13 deletions
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', |