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

Update token registry icons and asset picker flows

Browse Source
This commit is contained in:
Brandon Millman
2018-07-06 10:47:01 -07:00
parent 16dc4e9f66
commit 49c7365d93
149 changed files with 39 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/website/ts/components/generate_order/asset_picker.tsx
View File

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