diff options
Diffstat (limited to 'packages/website/ts/components/ui')
19 files changed, 173 insertions, 200 deletions
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index bc65d0f0f..54881b499 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {AlertTypes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { AlertTypes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface AlertProps { type: AlertTypes; - message: string|React.ReactNode; + message: string | React.ReactNode; } export function Alert(props: AlertProps) { diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx index fae51860e..7f7ea006e 100644 --- a/packages/website/ts/components/ui/badge.tsx +++ b/packages/website/ts/components/ui/badge.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Styles} from 'ts/types'; +import { Styles } from 'ts/types'; const styles: Styles = { badge: { diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 754f5d456..df55e0922 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; import ReactTooltip = require('react-tooltip'); -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; interface CopyIconProps { data: string; @@ -33,26 +33,24 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { public render() { return ( <div className="inline-block"> - <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> - <div - className="inline flex" - style={{cursor: 'pointer', color: colors.amber600}} - ref={this._setRefToProperty.bind(this)} - data-tip={true} - data-for="copy" - data-event="click" - data-iscapture={true} // This let's the click event continue to propogate - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - > - <div> - <i style={{fontSize: 15}} className="zmdi zmdi-copy" /> - </div> - {this.props.callToAction && - <div className="pl1">{this.props.callToAction}</div> - } + <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> + <div + className="inline flex" + style={{ cursor: 'pointer', color: colors.amber600 }} + ref={this._setRefToProperty.bind(this)} + data-tip={true} + data-for="copy" + data-event="click" + data-iscapture={true} // This let's the click event continue to propogate + onMouseOver={this._setHoverState.bind(this, true)} + onMouseOut={this._setHoverState.bind(this, false)} + > + <div> + <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" /> </div> - </CopyToClipboard> + {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>} + </div> + </CopyToClipboard> <ReactTooltip id="copy">Copied!</ReactTooltip> </div> ); diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx index ee26e004e..a578fb4f9 100644 --- a/packages/website/ts/components/ui/drop_down_menu_item.tsx +++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import Menu from 'material-ui/Menu'; import Popover from 'material-ui/Popover'; import * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300; const DEFAULT_STYLE = { @@ -48,33 +48,26 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color; return ( <div - style={{...this.props.style, color: colorStyle}} + style={{ ...this.props.style, color: colorStyle }} onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)} > <div className="flex relative"> - <div style={{paddingRight: 10}}> - {this.props.title} - </div> - <div className="absolute" style={{paddingLeft: 3, right: 3, top: -2}}> - <i className="zmdi zmdi-caret-right" style={{fontSize: 22}} /> + <div style={{ paddingRight: 10 }}>{this.props.title}</div> + <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> + <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} /> </div> </div> <Popover open={this.state.isDropDownOpen} anchorEl={this.state.anchorEl} - anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}} - targetOrigin={{horizontal: 'middle', vertical: 'top'}} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} onRequestClose={this._closePopover.bind(this)} useLayerForClickAway={false} > - <div - onMouseEnter={this._onHover.bind(this)} - onMouseLeave={this._onHoverOff.bind(this)} - > - <Menu style={{color: colors.grey}}> - {this.props.subMenuItems} - </Menu> + <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}> + <Menu style={{ color: colors.grey }}>{this.props.subMenuItems}</Menu> </div> </Popover> </div> @@ -90,8 +83,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro } this.setState({ - isDropDownOpen: true, - anchorEl: event.currentTarget, + isDropDownOpen: true, + anchorEl: event.currentTarget, }); } private _onHoverOff(event: React.FormEvent<HTMLInputElement>) { diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx index d56840689..b75d97e39 100644 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ b/packages/website/ts/components/ui/ethereum_address.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import ReactTooltip = require('react-tooltip'); -import {EtherScanIcon} from 'ts/components/ui/etherscan_icon'; -import {EtherscanLinkSuffixes} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; +import { EtherscanLinkSuffixes } from 'ts/types'; +import { utils } from 'ts/utils/utils'; interface EthereumAddressProps { address: string; @@ -14,12 +14,7 @@ export const EthereumAddress = (props: EthereumAddressProps) => { const truncatedAddress = utils.getAddressBeginAndEnd(props.address); return ( <div> - <div - className="inline" - style={{fontSize: 13}} - data-tip={true} - data-for={tooltipId} - > + <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}> {truncatedAddress} </div> <div className="pl1 inline"> diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 111d5d478..3b17bd0fa 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); -import {EtherscanLinkSuffixes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { EtherscanLinkSuffixes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; interface EtherScanIconProps { addressOrTxHash: string; @@ -13,38 +13,29 @@ interface EtherScanIconProps { export const EtherScanIcon = (props: EtherScanIconProps) => { const etherscanLinkIfExists = utils.getEtherScanLinkIfExists( - props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.Address, + props.addressOrTxHash, + props.networkId, + EtherscanLinkSuffixes.Address, ); const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`; return ( <div className="inline"> - {!_.isUndefined(etherscanLinkIfExists) ? - <a - href={etherscanLinkIfExists} - target="_blank" - > + {!_.isUndefined(etherscanLinkIfExists) ? ( + <a href={etherscanLinkIfExists} target="_blank"> {renderIcon()} - </a> : - <div - className="inline" - data-tip={true} - data-for={transactionTooltipId} - > + </a> + ) : ( + <div className="inline" data-tip={true} data-for={transactionTooltipId}> {renderIcon()} <ReactTooltip id={transactionTooltipId}> Your network (id: {props.networkId}) is not supported by Etherscan </ReactTooltip> </div> - } + )} </div> ); }; function renderIcon() { - return ( - <i - style={{color: colors.amber600}} - className="zmdi zmdi-open-in-new" - /> - ); + return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />; } diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx index 8ee4349a2..f3d9410f6 100644 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ b/packages/website/ts/components/ui/fake_text_field.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {InputLabel} from 'ts/components/ui/input_label'; -import {Styles} from 'ts/types'; +import { InputLabel } from 'ts/components/ui/input_label'; +import { Styles } from 'ts/types'; const styles: Styles = { hr: { @@ -25,7 +25,7 @@ export function FakeTextField(props: FakeTextFieldProps) { return ( <div className="relative"> {props.label !== '' && <InputLabel text={props.label} />} - <div className="pb2" style={{height: 23}}> + <div className="pb2" style={{ height: 23 }}> {props.children} </div> <hr style={styles.hr} /> diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx index c0c00463e..2cb1fc764 100644 --- a/packages/website/ts/components/ui/flash_message.tsx +++ b/packages/website/ts/components/ui/flash_message.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import Snackbar from 'material-ui/Snackbar'; import * as React from 'react'; -import {Dispatcher} from 'ts/redux/dispatcher'; +import { Dispatcher } from 'ts/redux/dispatcher'; const SHOW_DURATION_MS = 4000; interface FlashMessageProps { dispatcher: Dispatcher; - flashMessage?: string|React.ReactNode; + flashMessage?: string | React.ReactNode; showDurationMs?: number; bodyStyle?: React.CSSProperties; } diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx index 003b795ef..d827eebb9 100644 --- a/packages/website/ts/components/ui/help_tooltip.tsx +++ b/packages/website/ts/components/ui/help_tooltip.tsx @@ -9,13 +9,13 @@ interface HelpTooltipProps { export const HelpTooltip = (props: HelpTooltipProps) => { return ( <div - style={{...props.style}} + style={{ ...props.style }} className="inline-block" data-tip={props.explanation} data-for="helpTooltip" data-multiline={true} > - <i style={{fontSize: 16}} className="zmdi zmdi-help" /> + <i style={{ fontSize: 16 }} className="zmdi zmdi-help" /> <ReactTooltip id="helpTooltip" /> </div> ); diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index a741ae43b..bad6c2a78 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -1,7 +1,7 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; -import {constants} from 'ts/utils/constants'; +import { constants } from 'ts/utils/constants'; interface IdenticonProps { address: string; @@ -27,9 +27,21 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { return ( <div className="circle mx-auto relative transitionFix" - style={{width: diameter, height: diameter, overflow: 'hidden', ...this.props.style}} + style={{ + width: diameter, + height: diameter, + overflow: 'hidden', + ...this.props.style, + }} > - <img src={icon.toDataURL()} style={{width: diameter, height: diameter, imageRendering: 'pixelated'}}/> + <img + src={icon.toDataURL()} + style={{ + width: diameter, + height: diameter, + imageRendering: 'pixelated', + }} + /> </div> ); } diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index bfa1da280..e2009ad20 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; export interface InputLabelProps { text: string | Element | React.ReactNode; @@ -21,7 +21,5 @@ const styles = { }; export const InputLabel = (props: InputLabelProps) => { - return ( - <label style={styles.label}>{props.text}</label> - ); + return <label style={styles.label}>{props.text}</label>; }; diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 852975ef6..8ff856a75 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,24 +1,24 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; enum ButtonState { - READY, - LOADING, - COMPLETE, + READY, + LOADING, + COMPLETE, } interface LifeCycleRaisedButtonProps { isHidden?: boolean; isDisabled?: boolean; isPrimary?: boolean; - labelReady: React.ReactNode|string; - labelLoading: React.ReactNode|string; - labelComplete: React.ReactNode|string; + labelReady: React.ReactNode | string; + labelLoading: React.ReactNode | string; + labelComplete: React.ReactNode | string; onClickAsyncFn: () => Promise<boolean>; backgroundColor?: string; labelColor?: string; @@ -28,8 +28,7 @@ interface LifeCycleRaisedButtonState { buttonState: ButtonState; } -export class LifeCycleRaisedButton extends - React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> { +export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> { public static defaultProps: Partial<LifeCycleRaisedButtonProps> = { isDisabled: false, backgroundColor: colors.white, @@ -70,7 +69,7 @@ export class LifeCycleRaisedButton extends <RaisedButton primary={this.props.isPrimary} label={label} - style={{width: '100%'}} + style={{ width: '100%' }} backgroundColor={this.props.backgroundColor} labelColor={this.props.labelColor} onTouchTap={this.onClickAsync.bind(this)} diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx index 83636b5ff..aa319e9e9 100644 --- a/packages/website/ts/components/ui/loading.tsx +++ b/packages/website/ts/components/ui/loading.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as React from 'react'; -import {DefaultPlayer as Video} from 'react-html5video'; +import { DefaultPlayer as Video } from 'react-html5video'; import 'react-html5video/dist/styles.css'; -import {utils} from 'ts/utils/utils'; +import { utils } from 'ts/utils/utils'; interface LoadingProps {} @@ -12,11 +12,12 @@ interface LoadingState {} export class Loading extends React.Component<LoadingProps, LoadingState> { public render() { return ( - <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{height: 500}}> - <Paper className="mx-auto" style={{maxWidth: 400}}> - {utils.isUserOnMobile() ? - <img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> : - <div style={{pointerEvents: 'none'}}> + <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}> + <Paper className="mx-auto" style={{ maxWidth: 400 }}> + {utils.isUserOnMobile() ? ( + <img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> + ) : ( + <div style={{ pointerEvents: 'none' }}> <Video autoPlay={true} loop={true} @@ -27,8 +28,10 @@ export class Loading extends React.Component<LoadingProps, LoadingState> { <source src="/videos/0xAnimation.mp4" type="video/mp4" /> </Video> </div> - } - <div className="center pt2" style={{paddingBottom: 11}}>Connecting to the blockchain...</div> + )} + <div className="center pt2" style={{ paddingBottom: 11 }}> + Connecting to the blockchain... + </div> </Paper> </div> ); diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx index 3ec993476..3482f436c 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/menu_item.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; interface MenuItemProps { to: string; @@ -30,7 +30,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { opacity: this.state.isHovering ? 0.5 : 1, }; return ( - <Link to={this.props.to} style={{textDecoration: 'none', ...this.props.style}}> + <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}> <div onClick={this.props.onClick.bind(this)} className={`mx-auto ${this.props.className}`} diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index 918d42a3b..ca2577b61 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,11 +1,11 @@ import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); -import {EthereumAddress} from 'ts/components/ui/ethereum_address'; -import {Identicon} from 'ts/components/ui/identicon'; -import {EtherscanLinkSuffixes} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {utils} from 'ts/utils/utils'; +import { EthereumAddress } from 'ts/components/ui/ethereum_address'; +import { Identicon } from 'ts/components/ui/identicon'; +import { EtherscanLinkSuffixes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { utils } from 'ts/utils/utils'; const IMAGE_DIMENSION = 100; const IDENTICON_DIAMETER = 95; @@ -44,100 +44,94 @@ export class Party extends React.Component<PartyProps, PartyState> { height: IMAGE_DIMENSION, }; const etherscanLinkIfExists = utils.getEtherScanLinkIfExists( - this.props.address, this.props.networkId, EtherscanLinkSuffixes.Address, + this.props.address, + this.props.networkId, + EtherscanLinkSuffixes.Address, ); const isRegistered = this.props.isInTokenRegistry; const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`; const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`; return ( - <div style={{overflow: 'hidden'}}> + <div style={{ overflow: 'hidden' }}> <div className="pb1 center">{label}</div> - {_.isEmpty(address) ? - <div - className="circle mx-auto" - style={emptyIdenticonStyles} - /> : - <a - href={etherscanLinkIfExists} - target="_blank" - > - {isRegistered && !_.isUndefined(this.props.alternativeImage) ? - <img - style={tokenImageStyle} - src={this.props.alternativeImage} - /> : - <div - className="mx-auto" - style={{height: identiconDiameter, width: identiconDiameter}} - > - <Identicon - address={this.props.address} - diameter={identiconDiameter} - style={this.props.identiconStyle} - /> - </div> - } - </a> - } - <div - className="mx-auto center pt1" - > - <div style={{height: 25}}> + {_.isEmpty(address) ? ( + <div className="circle mx-auto" style={emptyIdenticonStyles} /> + ) : ( + <a href={etherscanLinkIfExists} target="_blank"> + {isRegistered && !_.isUndefined(this.props.alternativeImage) ? ( + <img style={tokenImageStyle} src={this.props.alternativeImage} /> + ) : ( + <div className="mx-auto" style={{ height: identiconDiameter, width: identiconDiameter }}> + <Identicon + address={this.props.address} + diameter={identiconDiameter} + style={this.props.identiconStyle} + /> + </div> + )} + </a> + )} + <div className="mx-auto center pt1"> + <div style={{ height: 25 }}> <EthereumAddress address={address} networkId={this.props.networkId} /> </div> - {!_.isUndefined(this.props.isInTokenRegistry) && + {!_.isUndefined(this.props.isInTokenRegistry) && ( <div> <div data-tip={true} data-for={registeredTooltipId} className="mx-auto" - style={{fontSize: 13, width: 127}} + style={{ fontSize: 13, width: 127 }} > - <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}> + <span + style={{ + color: isRegistered ? colors.brightGreen : colors.red500, + }} + > <i className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`} /> </span>{' '} <span>{isRegistered ? 'Registered' : 'Unregistered'} token</span> <ReactTooltip id={registeredTooltipId}> - {isRegistered ? + {isRegistered ? ( <div> This token address was found in the token registry<br /> smart contract and is therefore believed to be a<br /> legitimate token. - </div> : + </div> + ) : ( <div> This token is not included in the token registry<br /> smart contract. We cannot guarantee the legitimacy<br /> of this token. Make sure to verify its address on Etherscan. </div> - } + )} </ReactTooltip> </div> </div> - } - {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol && - <div> - <div - data-tip={true} - data-for={uniqueNameAndSymbolTooltipId} - className="mx-auto" - style={{fontSize: 13, width: 127}} - > - <span style={{color: colors.red500}}> - <i - className="zmdi zmdi-alert-octagon" - /> - </span>{' '} - <span>Suspicious token</span> - <ReactTooltip id={uniqueNameAndSymbolTooltipId}> - This token shares it's name, symbol or both with<br /> - a token in the 0x Token Registry but it has a different<br /> - smart contract address. This is most likely a scam token! - </ReactTooltip> + )} + {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && + !this.props.hasUniqueNameAndSymbol && ( + <div> + <div + data-tip={true} + data-for={uniqueNameAndSymbolTooltipId} + className="mx-auto" + style={{ fontSize: 13, width: 127 }} + > + <span style={{ color: colors.red500 }}> + <i className="zmdi zmdi-alert-octagon" /> + </span>{' '} + <span>Suspicious token</span> + <ReactTooltip id={uniqueNameAndSymbolTooltipId}> + This token shares it's name, symbol or both with<br /> + a token in the 0x Token Registry but it has a different<br /> + smart contract address. This is most likely a scam token! + </ReactTooltip> + </div> </div> - </div> - } + )} </div> </div> ); diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index 979b06d66..a5e7a22ce 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; export interface RequiredLabelProps { - label: string|React.ReactNode; + label: string | React.ReactNode; } export const RequiredLabel = (props: RequiredLabelProps) => { return ( <span> {props.label} - <span style={{color: colors.red600}}>*</span> + <span style={{ color: colors.red600 }}>*</span> </span> ); }; diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx index fa548f996..81744196d 100644 --- a/packages/website/ts/components/ui/simple_loading.tsx +++ b/packages/website/ts/components/ui/simple_loading.tsx @@ -7,15 +7,10 @@ export interface SimpleLoadingProps { export const SimpleLoading = (props: SimpleLoadingProps) => { return ( - <div className="mx-auto pt3" style={{maxWidth: 400, height: 409}}> - <div - className="relative" - style={{top: '50%', transform: 'translateY(-50%)', height: 95}} - > + <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}> + <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}> <CircularProgress /> - <div className="pt3 pb3"> - {props.message} - </div> + <div className="pt3 pb3">{props.message}</div> </div> </div> ); diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index 2adefbda3..c41592287 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {colors} from 'ts/utils/colors'; +import { colors } from 'ts/utils/colors'; interface SwapIconProps { swapTokensFn: () => void; @@ -25,15 +25,12 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { return ( <div className="mx-auto pt4" - style={{cursor: 'pointer', height: 50, width: 37.5}} + style={{ cursor: 'pointer', height: 50, width: 37.5 }} onClick={this.props.swapTokensFn} onMouseEnter={this._onToggleHover.bind(this, true)} onMouseLeave={this._onToggleHover.bind(this, false)} > - <i - style={swapStyles} - className="zmdi zmdi-swap" - /> + <i style={swapStyles} className="zmdi zmdi-swap" /> </div> ); } diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx index d3a7c9a8c..ff57a96de 100644 --- a/packages/website/ts/components/ui/token_icon.tsx +++ b/packages/website/ts/components/ui/token_icon.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Identicon} from 'ts/components/ui/identicon'; -import {Token} from 'ts/types'; +import { Identicon } from 'ts/components/ui/identicon'; +import { Token } from 'ts/types'; interface TokenIconProps { token: Token; @@ -16,13 +16,11 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> { const diameter = this.props.diameter; return ( <div> - {(token.isRegistered && !_.isUndefined(token.iconUrl)) ? - <img - style={{width: diameter, height: diameter}} - src={token.iconUrl} - /> : + {token.isRegistered && !_.isUndefined(token.iconUrl) ? ( + <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> + ) : ( <Identicon address={token.address} diameter={diameter} /> - } + )} </div> ); } |