aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/alert.tsx6
-rw-r--r--packages/website/ts/components/ui/badge.tsx2
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx38
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx29
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx13
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx35
-rw-r--r--packages/website/ts/components/ui/fake_text_field.tsx6
-rw-r--r--packages/website/ts/components/ui/flash_message.tsx4
-rw-r--r--packages/website/ts/components/ui/help_tooltip.tsx4
-rw-r--r--packages/website/ts/components/ui/identicon.tsx18
-rw-r--r--packages/website/ts/components/ui/input_label.tsx6
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx21
-rw-r--r--packages/website/ts/components/ui/loading.tsx21
-rw-r--r--packages/website/ts/components/ui/menu_item.tsx4
-rw-r--r--packages/website/ts/components/ui/party.tsx126
-rw-r--r--packages/website/ts/components/ui/required_label.tsx6
-rw-r--r--packages/website/ts/components/ui/simple_loading.tsx11
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx9
-rw-r--r--packages/website/ts/components/ui/token_icon.tsx14
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>
);
}