aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs
diff options
context:
space:
mode:
authorLeonid Logvinov <logvinov.leon@gmail.com>2017-12-22 22:05:32 +0800
committerLeonid Logvinov <logvinov.leon@gmail.com>2018-01-03 18:37:38 +0800
commite744e4cd989bd3ae1070c59f7baa8097f18b8b06 (patch)
treea7fde03873f3c1b8689d3991edbb362f8022e5f0 /packages/website/ts/components/inputs
parent9a96e8c704b6f84e00bbe848159a4819844cf09d (diff)
downloaddexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.gz
dexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.zst
dexon-sol-tools-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.zip
Apply prettier config
Diffstat (limited to 'packages/website/ts/components/inputs')
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx20
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx16
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx65
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx26
-rw-r--r--packages/website/ts/components/inputs/expiration_input.tsx26
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx16
-rw-r--r--packages/website/ts/components/inputs/identicon_address_input.tsx17
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx28
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx23
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>