Merge branch 'development' into fix/mutatedInput

* development:
  Changes to abi-gen after code review
  Added constructor ABIs to abi-gen
  Describe #295 in a CHANGELOG
  Add #302 description to changelog
  Fix formatting
  Apply prettier config
  Install prettier
  Remove formatting esilnt rules
  sendTransactionAsync should return txHash string
  Added Event generation to abi-gen
  Publish
  Add dates to CHANGELOG entries
  Update subproviders CHANGELOG
  Support both personal_sign and eth_sign
  Fix Ledger tests given change from `personal_sign` to `eth_sign`
  Update subprovider to catch correct RPC method
  Rename guide
  Update contribution guide
  Fix broken links in the abi-gen README
  Fix typing generation for arrays in which types separated by |s

9 files changed, 103 insertions, 134 deletions

diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index 343eecc42..dd4131140 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
-import {addressUtils} from '@0xproject/utils';
+import { addressUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {colors} from 'ts/utils/colors';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { colors } from 'ts/utils/colors';
 
 interface AddressInputProps {
     disabled?: boolean;
@@ -30,16 +30,14 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
         };
     }
     public componentWillReceiveProps(nextProps: AddressInputProps) {
-        if (nextProps.shouldShowIncompleteErrs && this.props.isRequired &&
-            this.state.address === '') {
-                this.setState({
-                    errMsg: 'Address is required',
-                });
+        if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') {
+            this.setState({
+                errMsg: 'Address is required',
+            });
         }
     }
     public render() {
-        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
-                      this.props.label;
+        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
         const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
         const hintText = this.props.hintText ? this.props.hintText : '';
         return (
@@ -50,7 +48,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
                     fullWidth={true}
                     hintText={hintText}
                     floatingLabelFixed={true}
-                    floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
+                    floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
                     floatingLabelText={label}
                     errorText={this.state.errMsg}
                     value={this.state.address}
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 2404a1e31..05da03f86 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {BalanceErrs, Token, TokenState} from 'ts/types';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
 
 const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
 
@@ -50,11 +50,11 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
                         onToggle={this._onToggleAllowanceAsync.bind(this, this.props.token)}
                     />
                 </div>
-                {this.state.isSpinnerVisible &&
-                    <div className="pl1" style={{paddingTop: 3}}>
+                {this.state.isSpinnerVisible && (
+                    <div className="pl1" style={{ paddingTop: 3 }}>
                         <i className="zmdi zmdi-spinner zmdi-hc-spin" />
                     </div>
-                }
+                )}
             </div>
         );
     }
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 91cc36e0c..8a9fcc1c5 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
     label?: string;
@@ -25,8 +25,7 @@ interface BalanceBoundedInputState {
     amountString: string;
 }
 
-export class BalanceBoundedInput extends
-    React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
+export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
     public static defaultProps: Partial<BalanceBoundedInputProps> = {
         shouldShowIncompleteErrs: false,
         shouldHideVisitBalancesLink: false,
@@ -74,37 +73,40 @@ export class BalanceBoundedInput extends
         if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
             errorText = 'This field is required';
         }
-        let label: React.ReactNode|string = '';
+        let label: React.ReactNode | string = '';
         if (!_.isUndefined(this.props.label)) {
-            label = <RequiredLabel label={this.props.label}/>;
+            label = <RequiredLabel label={this.props.label} />;
         }
         return (
             <TextField
                 fullWidth={true}
                 floatingLabelText={label}
                 floatingLabelFixed={true}
-                floatingLabelStyle={{color: colors.grey, width: 206}}
+                floatingLabelStyle={{ color: colors.grey, width: 206 }}
                 errorText={errorText}
                 value={this.state.amountString}
-                hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
+                hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
                 onChange={this._onValueChange.bind(this)}
-                underlineStyle={{width: 'calc(100% + 50px)'}}
+                underlineStyle={{ width: 'calc(100% + 50px)' }}
             />
         );
     }
     private _onValueChange(e: any, amountString: string) {
         const errMsg = this._validate(amountString, this.props.balance);
-        this.setState({
-            amountString,
-            errMsg,
-        }, () => {
-            const isValid = _.isUndefined(errMsg);
-            if (utils.isNumeric(amountString)) {
-                this.props.onChange(isValid, new BigNumber(amountString));
-            } else {
-                this.props.onChange(isValid);
-            }
-        });
+        this.setState(
+            {
+                amountString,
+                errMsg,
+            },
+            () => {
+                const isValid = _.isUndefined(errMsg);
+                if (utils.isNumeric(amountString)) {
+                    this.props.onChange(isValid, new BigNumber(amountString));
+                } else {
+                    this.props.onChange(isValid);
+                }
+            },
+        );
     }
     private _validate(amountString: string, balance: BigNumber): InputErrMsg {
         if (!utils.isNumeric(amountString)) {
@@ -115,12 +117,7 @@ export class BalanceBoundedInput extends
             return 'Cannot be zero';
         }
         if (this.props.shouldCheckBalance && amount.gt(balance)) {
-            return (
-                <span>
-                    Insufficient balance.{' '}
-                    {this._renderIncreaseBalanceLink()}
-                </span>
-            );
+            return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
         }
         const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
         return errMsg;
@@ -139,19 +136,13 @@ export class BalanceBoundedInput extends
         };
         if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
             return (
-                <Link
-                    to={`${WebsitePaths.Portal}/balances`}
-                    style={linkStyle}
-                >
+                <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
                     {increaseBalanceText}
                 </Link>
             );
         } else {
             return (
-                <div
-                    onClick={this.props.onVisitBalancesPageClick}
-                    style={linkStyle}
-                >
+                <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
                     {increaseBalanceText}
                 </div>
             );
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index da5bc9805..855892e28 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -1,10 +1,10 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import * as React from 'react';
-import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
-import {ValidatedBigNumberCallback} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { ValidatedBigNumberCallback } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 interface EthAmountInputProps {
     label?: string;
@@ -21,11 +21,11 @@ interface EthAmountInputState {}
 
 export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
     public render() {
-        const amount = this.props.amount ?
-            ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) :
-            undefined;
+        const amount = this.props.amount
+            ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+            : undefined;
         return (
-            <div className="flex overflow-hidden" style={{height: 63}}>
+            <div className="flex overflow-hidden" style={{ height: 63 }}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     balance={this.props.balance}
@@ -36,16 +36,14 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                     shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
                 />
-                <div style={{paddingTop: _.isUndefined(this.props.label) ? 15 : 40}}>
-                    ETH
-                </div>
+                <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
             </div>
         );
     }
     private _onChange(isValid: boolean, amount?: BigNumber) {
-        const baseUnitAmountIfExists = _.isUndefined(amount) ?
-            undefined :
-            ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
+        const baseUnitAmountIfExists = _.isUndefined(amount)
+            ? undefined
+            : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
         this.props.onChange(isValid, baseUnitAmountIfExists);
     }
 }
diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx
index fe471e39b..16aa5aa09 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -4,7 +4,7 @@ import DatePicker from 'material-ui/DatePicker';
 import TimePicker from 'material-ui/TimePicker';
 import * as moment from 'moment';
 import * as React from 'react';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
 
 interface ExpirationInputProps {
     orderExpiryTimestamp: BigNumber;
@@ -45,10 +45,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
                         onChange={this._onDateChanged.bind(this)}
                         shouldDisableDate={this._shouldDisableDate.bind(this)}
                     />
-                    <div
-                        className="absolute"
-                        style={{fontSize: 20, right: 40, top: 13, pointerEvents: 'none'}}
-                    >
+                    <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
                         <i className="zmdi zmdi-calendar" />
                     </div>
                 </div>
@@ -60,25 +57,20 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
                         value={time}
                         onChange={this._onTimeChanged.bind(this)}
                     />
-                    <div
-                        className="absolute"
-                        style={{fontSize: 20, right: 9, top: 13, pointerEvents: 'none'}}
-                    >
+                    <div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}>
                         <i className="zmdi zmdi-time" />
                     </div>
                 </div>
-                <div
-                    onClick={this._clearDates.bind(this)}
-                    className="col col-1 pt2"
-                    style={{textAlign: 'right'}}
-                >
-                    <i style={{fontSize: 16, cursor: 'pointer'}} className="zmdi zmdi-close" />
+                <div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}>
+                    <i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" />
                 </div>
             </div>
         );
     }
     private _shouldDisableDate(date: Date): boolean {
-        return moment(date).startOf('day').isBefore(this._earliestPickableMoment);
+        return moment(date)
+            .startOf('day')
+            .isBefore(this._earliestPickableMoment);
     }
     private _clearDates() {
         this.setState({
@@ -101,7 +93,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
         this.setState({
             timeMoment,
         });
-        const dateMoment =  _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
+        const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
         const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
         this.props.updateOrderExpiry(timestamp);
     }
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 4dc96a062..5a3d34fe6 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,11 +1,11 @@
-import {Order, ZeroEx} from '0x.js';
+import { Order, ZeroEx } from '0x.js';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {FakeTextField} from 'ts/components/ui/fake_text_field';
-import {HashData, Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { FakeTextField } from 'ts/components/ui/fake_text_field';
+import { HashData, Styles } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 const styles: Styles = {
     textField: {
@@ -31,11 +31,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
         return (
             <div>
                 <FakeTextField label={this.props.label}>
-                    <div
-                        style={styles.textField}
-                        data-tip={true}
-                        data-for="hashTooltip"
-                    >
+                    <div style={styles.textField} data-tip={true} data-for="hashTooltip">
                         {msgHashHex}
                     </div>
                 </FakeTextField>
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index 0f220f955..4cf9af64d 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {Identicon} from 'ts/components/ui/identicon';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {RequiredLabel} from 'ts/components/ui/required_label';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { Identicon } from 'ts/components/ui/identicon';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { RequiredLabel } from 'ts/components/ui/required_label';
 
 interface IdenticonAddressInputProps {
     initialAddress: string;
@@ -24,16 +24,15 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput
         };
     }
     public render() {
-        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
-                      this.props.label;
+        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
         return (
-            <div className="relative" style={{width: '100%'}}>
+            <div className="relative" style={{ width: '100%' }}>
                 <InputLabel text={label} />
                 <div className="flex">
-                    <div className="col col-1 pb1 pr1" style={{paddingTop: 13}}>
+                    <div className="col col-1 pb1 pr1" style={{ paddingTop: 13 }}>
                         <Identicon address={this.state.address} diameter={26} />
                     </div>
-                    <div className="col col-11 pb1 pl1" style={{height: 65}}>
+                    <div className="col col-11 pb1 pl1" style={{ height: 65 }}>
                         <AddressInput
                             hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
                             shouldHideLabel={true}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 84117e843..b3ded96c7 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,11 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
-import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Link } from 'react-router-dom';
+import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface TokenAmountInputProps {
     token: Token;
@@ -19,16 +19,16 @@ interface TokenAmountInputProps {
     onVisitBalancesPageClick?: () => void;
 }
 
-interface  TokenAmountInputState {}
+interface TokenAmountInputState {}
 
 export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> {
     public render() {
-        const amount = this.props.amount ?
-            ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) :
-            undefined;
+        const amount = this.props.amount
+            ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
+            : undefined;
         const hasLabel = !_.isUndefined(this.props.label);
         return (
-            <div className="flex overflow-hidden" style={{height: hasLabel ? 84 : 62}}>
+            <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     amount={amount}
@@ -39,9 +39,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                 />
-                <div style={{paddingTop: hasLabel ? 39 : 14}}>
-                    {this.props.token.symbol}
-                </div>
+                <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
             </div>
         );
     }
@@ -59,9 +57,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     Insufficient allowance.{' '}
                     <Link
                         to={`${WebsitePaths.Portal}/balances`}
-                        style={{cursor: 'pointer', color: colors.darkestGrey}}
+                        style={{ cursor: 'pointer', color: colors.darkestGrey }}
                     >
-                            Set allowance
+                        Set allowance
                     </Link>
                 </span>
             );
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index ba348dade..5df19b28c 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AssetPicker} from 'ts/components/generate_order/asset_picker';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Blockchain } from 'ts/blockchain';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 const TOKEN_ICON_DIMENSION = 80;
 
@@ -51,18 +51,15 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
                 </div>
                 <Paper
                     zDepth={1}
-                    style={{cursor: 'pointer'}}
+                    style={{ cursor: 'pointer' }}
                     onMouseEnter={this._onToggleHover.bind(this, true)}
                     onMouseLeave={this._onToggleHover.bind(this, false)}
                     onClick={this._onAssetClicked.bind(this)}
                 >
-                    <div
-                        className="mx-auto pt2"
-                        style={{width: TOKEN_ICON_DIMENSION, ...iconStyles}}
-                    >
+                    <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
                         <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
                     </div>
-                    <div className="py1 center" style={{color: colors.grey}}>
+                    <div className="py1 center" style={{ color: colors.grey }}>
                         {token.name}
                     </div>
                 </Paper>