Update token registry icons and asset picker flows

packages/website/ts/blockchain.ts

@@ -769,7 +769,7 @@ export class Blockchain {
         _.each(tokenRegistryTokens, (t: ZeroExToken) => {
             // HACK: For now we have a hard-coded list of iconUrls for the dummyTokens
             // TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry
-            const iconUrl = configs.ICON_URL_BY_SYMBOL[t.symbol];
+            const iconUrl = utils.getTokenIconUrl(t.symbol);
             const token: Token = {
                 iconUrl,
                 address: t.address,

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;

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

packages/website/ts/utils/configs.ts

@@ -22,50 +22,9 @@ export const configs = {
     DOMAIN_DEVELOPMENT: '0xproject.localhost:3572',
     DOMAIN_PRODUCTION: '0xproject.com',
     ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION,
-    ICON_URL_BY_SYMBOL: {
-        REP: '/images/token_icons/augur.png',
-        DGD: '/images/token_icons/digixdao.png',
-        WETH: '/images/token_icons/ether_erc20.png',
-        MLN: '/images/token_icons/melon.png',
-        GNT: '/images/token_icons/golem.png',
-        MKR: '/images/token_icons/makerdao.png',
-        ZRX: '/images/token_icons/zero_ex.png',
-        ANT: '/images/token_icons/aragon.png',
-        BNT: '/images/token_icons/bancor.png',
-        BAT: '/images/token_icons/basicattentiontoken.png',
-        CVC: '/images/token_icons/civic.png',
-        EOS: '/images/token_icons/eos.png',
-        FUN: '/images/token_icons/funfair.png',
-        GNO: '/images/token_icons/gnosis.png',
-        ICN: '/images/token_icons/iconomi.png',
-        OMG: '/images/token_icons/omisego.png',
-        SNT: '/images/token_icons/status.png',
-        STORJ: '/images/token_icons/storjcoinx.png',
-        PAY: '/images/token_icons/tenx.png',
-        QTUM: '/images/token_icons/qtum.png',
-        DNT: '/images/token_icons/district0x.png',
-        SNGLS: '/images/token_icons/singularity.png',
-        EDG: '/images/token_icons/edgeless.png',
-        '1ST': '/images/token_icons/firstblood.jpg',
-        WINGS: '/images/token_icons/wings.png',
-        BQX: '/images/token_icons/bitquence.png',
-        LUN: '/images/token_icons/lunyr.png',
-        RLC: '/images/token_icons/iexec.png',
-        MCO: '/images/token_icons/monaco.png',
-        ADT: '/images/token_icons/adtoken.png',
-        CFI: '/images/token_icons/cofound-it.png',
-        ROL: '/images/token_icons/etheroll.png',
-        WGNT: '/images/token_icons/golem.png',
-        MTL: '/images/token_icons/metal.png',
-        NMR: '/images/token_icons/numeraire.png',
-        SAN: '/images/token_icons/santiment.png',
-        TAAS: '/images/token_icons/taas.png',
-        TKN: '/images/token_icons/tokencard.png',
-        TRST: '/images/token_icons/trust.png',
-    } 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: '2018-6-25',
+    LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5',
     OUTDATED_WRAPPED_ETHERS: [
         {
             42: {

packages/website/ts/utils/utils.ts

@@ -474,4 +474,8 @@ export const utils = {
         }
         return [downloadLink, isOnMobile];
     },
+    getTokenIconUrl(symbol: string): string {
+        const result = `/images/token_icons/${symbol}.png`;
+        return result;
+    },
 };