diff options
Diffstat (limited to 'packages/website/ts/components')
35 files changed, 213 insertions, 315 deletions
diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx index a2fd9dd72..51c1a661e 100644 --- a/packages/website/ts/components/aboutPageLayout.tsx +++ b/packages/website/ts/components/aboutPageLayout.tsx @@ -38,18 +38,17 @@ export const AboutPageLayout = (props: Props) => ( {props.description} </AnimatedParagraph> - {props.linkLabel && - (props.href || props.to) && ( - <AnimatedLink - to={props.to} - href={props.href} - target={!_.isUndefined(props.href) ? '_blank' : undefined} - isWithArrow={true} - isAccentColor={true} - > - {props.linkLabel} - </AnimatedLink> - )} + {props.linkLabel && (props.href || props.to) && ( + <AnimatedLink + to={props.to} + href={props.href} + target={!_.isUndefined(props.href) ? '_blank' : undefined} + isWithArrow={true} + isAccentColor={true} + > + {props.linkLabel} + </AnimatedLink> + )} </Column> </Column> </Section> diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx index 9a86e244c..770536259 100644 --- a/packages/website/ts/components/animatedChatIcon.tsx +++ b/packages/website/ts/components/animatedChatIcon.tsx @@ -98,9 +98,6 @@ const Rays = styled.g` transform-origin: 50% 50%; `; -const Dot = - styled.circle < - { delay: number } > - ` +const Dot = styled.circle<{ delay: number }>` animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite; `; diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx index 76fc1d09e..ce3fd499a 100644 --- a/packages/website/ts/components/banner.tsx +++ b/packages/website/ts/components/banner.tsx @@ -123,10 +123,7 @@ const ButtonWrap = styled.div` // Note let's refactor this // is it absolutely necessary to have a stateless component // to pass props down into the styled icon? -const Border = - styled.div < - BorderProps > - ` +const Border = styled.div<BorderProps>` position: absolute; background-image: ${props => props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'}; diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index 569038ae0..31a74e599 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -58,10 +58,7 @@ Button.defaultProps = { borderColor: 'rgba(255, 255, 255, .4)', }; -const ButtonBase = - styled.button < - ButtonInterface > - ` +const ButtonBase = styled.button<ButtonInterface>` appearance: none; border: 1px solid transparent; display: inline-block; diff --git a/packages/website/ts/components/definition.tsx b/packages/website/ts/components/definition.tsx index 92fe54f38..bd7a40425 100644 --- a/packages/website/ts/components/definition.tsx +++ b/packages/website/ts/components/definition.tsx @@ -69,10 +69,7 @@ export const Definition = (props: Props) => ( </Wrap> ); -const Wrap = - styled.div < - Props > - ` +const Wrap = styled.div<Props>` max-width: ${props => props.isInline && '354px'}; & + & { @@ -97,10 +94,7 @@ const Wrap = } `; -const TextWrap = - styled.div < - Props > - ` +const TextWrap = styled.div<Props>` width: 100%; max-width: 560px; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index a0114d898..1c47903db 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -148,15 +148,17 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp If you are using{' '} <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> Metamask - </a>, you can switch networks in the top left corner of the extension popover. + </a> + , you can switch networks in the top left corner of the extension popover. </div> <h4>Parity Signer</h4> <div> If using the{' '} <a href={constants.URL_PARITY_CHROME_STORE} target="_blank"> Parity Signer Chrome extension - </a>, make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in - order to connect to mainnet \ or Kovan respectively. + </a> + , make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in order + to connect to mainnet \ or Kovan respectively. </div> </div> ); diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 9b9421f1a..5ca272b1a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -111,20 +111,19 @@ export class EthWethConversionDialog extends React.Component< )} <div className="pt1" style={{ fontSize: 12 }}> <div className="left">1 ETH = 1 WETH</div> - {this.props.direction === Side.Receive && - this.state.isEthTokenBalanceLoaded && ( - <div - className="right" - onClick={this._onMaxClick.bind(this)} - style={{ - color: colors.darkBlue, - textDecoration: 'underline', - cursor: 'pointer', - }} - > - Max - </div> - )} + {this.props.direction === Side.Receive && this.state.isEthTokenBalanceLoaded && ( + <div + className="right" + onClick={this._onMaxClick.bind(this)} + style={{ + color: colors.darkBlue, + textDecoration: 'underline', + cursor: 'pointer', + }} + > + Max + </div> + )} </div> </div> </div> diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index e15a2dd94..527353aa0 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -20,8 +20,8 @@ import { utils } from 'ts/utils/utils'; const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`; enum LedgerSteps { - CONNECT, - SELECT_ADDRESS, + Connect, + SelectAddress, } interface LedgerConfigDialogProps { @@ -52,7 +52,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const derivationPathIfExists = props.blockchain.getLedgerDerivationPathIfExists(); this.state = { connectionErrMsg: '', - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, userAddresses: [], addressBalances: [], derivationPath: _.isUndefined(derivationPathIfExists) @@ -67,7 +67,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />, ]; const dialogTitle = - this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; + this.state.stepIndex === LedgerSteps.Connect ? 'Connect to your Ledger' : 'Select desired address'; return ( <Dialog title={dialogTitle} @@ -79,8 +79,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, bodyStyle={{ paddingBottom: 0 }} > <div style={{ color: colors.grey700, paddingTop: 1 }}> - {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()} - {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()} + {this.state.stepIndex === LedgerSteps.Connect && this._renderConnectStep()} + {this.state.stepIndex === LedgerSteps.SelectAddress && this._renderSelectAddressStep()} </div> </Dialog> ); @@ -195,7 +195,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, private _onClose(): void { this.setState({ connectionErrMsg: '', - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, }); const isOpen = false; this.props.toggleDialogFn(isOpen); @@ -210,7 +210,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, this.props.blockchain.fetchTokenInformationAsync(); this.props.dispatcher.updateUserWeiBalance(selectAddressBalance); this.setState({ - stepIndex: LedgerSteps.CONNECT, + stepIndex: LedgerSteps.Connect, }); const isOpen = false; this.props.toggleDialogFn(isOpen); @@ -284,7 +284,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, const didSucceed = await this._fetchAddressesAndBalancesAsync(); if (didSucceed) { this.setState({ - stepIndex: LedgerSteps.SELECT_ADDRESS, + stepIndex: LedgerSteps.SelectAddress, connectionErrMsg: '', }); } diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 3d0203573..7fee8c4df 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -173,17 +173,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { private _renderOrderJsonNotices(): React.ReactNode { return ( <div> - {!_.isUndefined(this.props.initialOrder) && - !this.state.didOrderValidationRun && ( - <div className="pt2"> - <span className="pr1"> - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - </span> - <span>Validating order...</span> - </div> - )} + {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun && ( + <div className="pt2"> + <span className="pr1"> + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + </span> + <span>Validating order...</span> + </div> + )} {!_.isEmpty(this.state.orderJSONErrMsg) && ( - <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.orderJSONErrMsg} /> )} </div> ); @@ -299,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)} /> {this.state.didCancelOrderSucceed && ( - <Alert type={AlertTypes.SUCCESS} message={this._renderCancelSuccessMsg()} /> + <Alert type={AlertTypes.Success} message={this._renderCancelSuccessMsg()} /> )} </div> ) : ( @@ -311,10 +310,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { onClick={this._onFillOrderClick.bind(this)} /> {!_.isEmpty(this.state.globalErrMsg) && ( - <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} /> )} {this.state.didFillOrderSucceed && ( - <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} /> + <Alert type={AlertTypes.Success} message={this._renderFillSuccessMsg()} /> )} </div> )} diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index feb72c2ee..5be09e6c2 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -37,7 +37,8 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => { be counterfeit. It is your responsibility to verify the token addresses on Etherscan ( <a href="https://0x.org/wiki#Verifying-Custom-Tokens" target="_blank"> See this how-to guide - </a>) before filling an order. <b>This action may result in the loss of funds</b>. + </a> + ) before filling an order. <b>This action may result in the loss of funds</b>. </div> </div> </Dialog> diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index e6ecd2ec8..d3f11f962 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -18,9 +18,9 @@ import { utils } from 'ts/utils/utils'; const TOKEN_ICON_DIMENSION = 100; const TILE_DIMENSION = 146; enum AssetViews { - ASSET_PICKER = 'ASSET_PICKER', - NEW_TOKEN_FORM = 'NEW_TOKEN_FORM', - CONFIRM_TRACK_TOKEN = 'CONFIRM_TRACK_TOKEN', + AssetPicker = 'ASSET_PICKER', + NewTokenForm = 'NEW_TOKEN_FORM', + ConfirmTrackToken = 'CONFIRM_TRACK_TOKEN', } interface AssetPickerProps { @@ -44,29 +44,29 @@ interface AssetPickerState { export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerState> { public static defaultProps: Partial<AssetPickerProps> = { - tokenVisibility: TokenVisibility.ALL, + tokenVisibility: TokenVisibility.All, }; private readonly _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs }; constructor(props: AssetPickerProps) { super(props); this.state = { - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, hoveredAddress: undefined, chosenTrackTokenAddress: undefined, isAddingTokenToTracked: false, }; this._dialogConfigsByAssetView = { - [AssetViews.ASSET_PICKER]: { + [AssetViews.AssetPicker]: { title: 'Select token', isModal: false, actions: [], }, - [AssetViews.NEW_TOKEN_FORM]: { + [AssetViews.NewTokenForm]: { title: 'Add an ERC20 token', isModal: false, actions: [], }, - [AssetViews.CONFIRM_TRACK_TOKEN]: { + [AssetViews.ConfirmTrackToken]: { title: 'Tracking confirmation', isModal: true, actions: [ @@ -95,15 +95,15 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt autoScrollBodyContent={true} onRequestClose={this._onCloseDialog.bind(this)} > - {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()} - {this.state.assetView === AssetViews.NEW_TOKEN_FORM && ( + {this.state.assetView === AssetViews.AssetPicker && this._renderAssetPicker()} + {this.state.assetView === AssetViews.NewTokenForm && ( <NewTokenForm blockchain={this.props.blockchain} onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)} tokenByAddress={this.props.tokenByAddress} /> )} - {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()} + {this.state.assetView === AssetViews.ConfirmTrackToken && this._renderConfirmTrackToken()} </Dialog> ); } @@ -138,19 +138,19 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt const allTokens = _.values(this.props.tokenByAddress); // filter tokens based on visibility specified in props, do not show ZRX or ETHER as tracked or untracked const filteredTokens = - this.props.tokenVisibility === TokenVisibility.ALL + this.props.tokenVisibility === TokenVisibility.All ? allTokens : _.filter(allTokens, token => { return ( token.symbol !== constants.ZRX_TOKEN_SYMBOL && token.symbol !== constants.ETHER_TOKEN_SYMBOL && - ((this.props.tokenVisibility === TokenVisibility.TRACKED && utils.isTokenTracked(token)) || - (this.props.tokenVisibility === TokenVisibility.UNTRACKED && + ((this.props.tokenVisibility === TokenVisibility.Tracked && utils.isTokenTracked(token)) || + (this.props.tokenVisibility === TokenVisibility.Untracked && !utils.isTokenTracked(token))) ); }); // if we are showing tracked tokens, sort by date added, otherwise sort by symbol - const sortKey = this.props.tokenVisibility === TokenVisibility.TRACKED ? 'trackedTimestamp' : 'symbol'; + const sortKey = this.props.tokenVisibility === TokenVisibility.Tracked ? 'trackedTimestamp' : 'symbol'; const sortedTokens = filteredTokens.sort(firstBy(sortKey)); if (_.isEmpty(sortedTokens)) { return <div className="mx-auto p4 h2">No tokens to remove.</div>; @@ -188,7 +188,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt cursor: 'pointer', opacity: isHovered ? 0.6 : 1, }; - if (this.props.tokenVisibility !== TokenVisibility.TRACKED) { + if (this.props.tokenVisibility !== TokenVisibility.Tracked) { gridTiles.push( <div key={otherTokenKey} @@ -222,7 +222,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt } private _onCloseDialog(): void { this.setState({ - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, }); this.props.onTokenChosen(this.props.currentTokenAddress); } @@ -232,21 +232,21 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt this.props.onTokenChosen(tokenAddress); } else { this.setState({ - assetView: AssetViews.CONFIRM_TRACK_TOKEN, + assetView: AssetViews.ConfirmTrackToken, chosenTrackTokenAddress: tokenAddress, }); } } private _onCustomAssetChosen(): void { this.setState({ - assetView: AssetViews.NEW_TOKEN_FORM, + assetView: AssetViews.NewTokenForm, }); } private _onNewTokenSubmitted(newToken: Token): void { trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken); this.props.dispatcher.addTokenToTokenByAddress(newToken); this.setState({ - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, }); this.props.onTokenChosen(newToken.address); } @@ -254,7 +254,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt const resetState: AssetPickerState = { ...this.state, isAddingTokenToTracked: false, - assetView: AssetViews.ASSET_PICKER, + assetView: AssetViews.AssetPicker, chosenTrackTokenAddress: undefined, }; if (!didUserAcceptTracking) { diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 8afbee977..0f70aa18f 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -36,9 +36,9 @@ import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; enum SigningState { - UNSIGNED, - SIGNING, - SIGNED, + Unsigned, + Signing, + Signed, } interface GenerateOrderFormProps { @@ -76,7 +76,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G this.state = { globalErrMsg: '', shouldShowIncompleteErrs: false, - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }; } public componentDidMount(): void { @@ -207,7 +207,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G /> </div> {this.state.globalErrMsg !== '' && ( - <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> + <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} /> )} </div> </div> @@ -215,7 +215,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G title="Order JSON" titleStyle={{ fontWeight: 100 }} modal={false} - open={this.state.signingState === SigningState.SIGNED} + open={this.state.signingState === SigningState.Signed} onRequestClose={this._onCloseOrderJSONDialog.bind(this)} > <OrderJSON @@ -247,7 +247,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G // orderHash will not collide with the previously generated orderHash. this.props.dispatcher.updateOrderSalt(generatePseudoRandomSalt()); this.setState({ - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }); } private async _onSignClickedAsync(): Promise<boolean> { @@ -305,13 +305,13 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } private async _signTransactionAsync(): Promise<PortalOrder | undefined> { this.setState({ - signingState: SigningState.SIGNING, + signingState: SigningState.Signing, }); const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); if (_.isUndefined(exchangeAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); this.setState({ - signingState: SigningState.UNSIGNED, + signingState: SigningState.Unsigned, }); return undefined; } @@ -371,7 +371,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } } this.setState({ - signingState: globalErrMsg === '' ? SigningState.SIGNED : SigningState.UNSIGNED, + signingState: globalErrMsg === '' ? SigningState.Signed : SigningState.Unsigned, globalErrMsg, }); return order; diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index b8cd88b18..ce684d177 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -93,7 +93,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)} /> </div> - {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />} + {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.Error} message={this.state.globalErrMsg} />} </div> ); } diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx index 435d206cd..34d4ccc46 100644 --- a/packages/website/ts/components/hamburger.tsx +++ b/packages/website/ts/components/hamburger.tsx @@ -16,10 +16,7 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => { ); }; -const StyledHamburger = - styled.button < - Props > - ` +const StyledHamburger = styled.button<Props>` background: none; border: 0; width: 22px; @@ -41,9 +38,8 @@ const StyledHamburger = height: 2px; margin-bottom: 5px; transform-origin: 4px 0px; - transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), - background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0), - opacity 0.55s ease; + transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), + background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; &:first-child { //transform-origin: 0% 0%; diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx index 90e097070..088f41048 100644 --- a/packages/website/ts/components/header.tsx +++ b/packages/website/ts/components/header.tsx @@ -87,7 +87,9 @@ class HeaderBase extends React.Component<HeaderProps> { </Link> <NavLinks> - {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)} + {_.map(navItems, (link, index) => ( + <NavItem key={`navlink-${index}`} link={link} /> + ))} </NavLinks> <MediaQuery minWidth={990}> @@ -130,10 +132,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => { ); }; -const StyledHeader = - styled.header < - HeaderProps > - ` +const StyledHeader = styled.header<HeaderProps>` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -200,10 +199,7 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = - styled.div < - DropdownWrapInterface > - ` +const DropdownWrap = styled.div<DropdownWrapInterface>` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; @@ -219,27 +215,28 @@ const DropdownWrap = transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; z-index: 20; - &:after, &:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; + &:after, + &:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } &:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: ${props => props.theme.dropdownBg}; - border-width: 10px; - margin-left: -10px; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: ${props => props.theme.dropdownBg}; + border-width: 10px; + margin-left: -10px; } &:before { - border-color: rgba(255, 0, 0, 0); - border-bottom-color: ${props => props.theme.dropdownBorderColor}; - border-width: 11px; - margin-left: -11px; + border-color: rgba(255, 0, 0, 0); + border-bottom-color: ${props => props.theme.dropdownBorderColor}; + border-width: 11px; + margin-left: -11px; } @media (max-width: 768px) { diff --git a/packages/website/ts/components/hero.tsx b/packages/website/ts/components/hero.tsx index a662ee3a5..c326e0292 100644 --- a/packages/website/ts/components/hero.tsx +++ b/packages/website/ts/components/hero.tsx @@ -28,10 +28,7 @@ interface WrapProps { isFullWidth?: boolean; isCenteredMobile?: boolean; } -const Wrap = - styled.div < - WrapProps > - ` +const Wrap = styled.div<WrapProps>` width: calc(100% - 60px); margin: 0 auto; @@ -53,10 +50,7 @@ interface TitleProps { isLarge?: any; maxWidth?: string; } -const Title = - styled.h1 < - TitleProps > - ` +const Title = styled.h1<TitleProps>` font-size: ${props => (props.isLarge ? '80px' : '50px')}; font-weight: 300; line-height: 1.1; @@ -87,10 +81,7 @@ const Description = styled.p` } `; -const Content = - styled.div < - { width: string } > - ` +const Content = styled.div<{ width: string }>` width: 100%; @media (min-width: 768px) { diff --git a/packages/website/ts/components/icon.tsx b/packages/website/ts/components/icon.tsx index 165e999b9..60e4d04ee 100644 --- a/packages/website/ts/components/icon.tsx +++ b/packages/website/ts/components/icon.tsx @@ -32,10 +32,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => { return null; }; -export const InlineIconWrap = - styled.div < - PaddingInterface > - ` +export const InlineIconWrap = styled.div<PaddingInterface>` margin: ${props => getCSSPadding(props.margin)}; display: flex; align-items: center; @@ -54,10 +51,7 @@ const _getSize = (size: string | number = 'small'): string => { return `${size}px`; }; -const StyledIcon = - styled.figure < - IconProps > - ` +const StyledIcon = styled.figure<IconProps>` width: ${props => _getSize(props.size)}; height: ${props => _getSize(props.size)}; margin: ${props => getCSSPadding(props.margin)}; diff --git a/packages/website/ts/components/image.tsx b/packages/website/ts/components/image.tsx index 65b2a9705..0137cfc97 100644 --- a/packages/website/ts/components/image.tsx +++ b/packages/website/ts/components/image.tsx @@ -12,9 +12,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => { return <img {...props} />; }; -export const Image = - styled(ImageClass) < - Props > - ` +export const Image = styled(ImageClass)<Props>` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 5396295d2..3a78d32f3 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -150,7 +150,7 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr } logUtils.log(`Unexpected error encountered: ${err}`); logUtils.log(err.stack); - this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed); + this.props.onErrorOccurred(BalanceErrs.AllowanceSettingFailed); errorReporter.report(err); } } diff --git a/packages/website/ts/components/link.tsx b/packages/website/ts/components/link.tsx index 080a0abcc..a66985acc 100644 --- a/packages/website/ts/components/link.tsx +++ b/packages/website/ts/components/link.tsx @@ -44,10 +44,7 @@ export const LinkWrap = styled.div` } `; -const StyledLink = - styled(SmartLink) < - LinkInterface > - ` +const StyledLink = styled(SmartLink)<LinkInterface>` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx index 19aeb901e..f89be0711 100644 --- a/packages/website/ts/components/logo.tsx +++ b/packages/website/ts/components/logo.tsx @@ -23,10 +23,7 @@ const StyledLogo = styled.div` } `; -const Icon = - styled(LogoIcon) < - LogoInterface > - ` +const Icon = styled(LogoIcon)<LogoInterface>` flex-shrink: 0; path { diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx index 573d21596..d43bbe50e 100644 --- a/packages/website/ts/components/mobileNav.tsx +++ b/packages/website/ts/components/mobileNav.tsx @@ -55,10 +55,7 @@ export class MobileNav extends React.PureComponent<Props> { } } -const Wrap = - styled.nav < - { isToggled: boolean } > - ` +const Wrap = styled.nav<{ isToggled: boolean }>` width: 100%; height: 357px; background-color: ${props => props.theme.mobileNavBgUpper}; @@ -99,19 +96,13 @@ const Overlay = styled.div` interface SectionProps { isDark?: boolean; } -const Section = - styled.div < - SectionProps > - ` +const Section = styled.div<SectionProps>` width: 100%; padding: 15px 30px; background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')}; `; -const Grid = - styled(WrapGrid) < - WrapProps > - ` +const Grid = styled(WrapGrid)<WrapProps>` justify-content: flex-start; li { diff --git a/packages/website/ts/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx index 8cfcc9763..c72e53aa0 100644 --- a/packages/website/ts/components/modals/input.tsx +++ b/packages/website/ts/components/modals/input.tsx @@ -60,10 +60,7 @@ const StyledInput = styled.input` } `; -const InputWrapper = - styled.div < - InputProps > - ` +const InputWrapper = styled.div<InputProps>` position: relative; flex-grow: ${props => props.width === InputWidth.Full && 1}; width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`}; diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx index 7414df7d9..62c1062a3 100644 --- a/packages/website/ts/components/modals/modal_contact.tsx +++ b/packages/website/ts/components/modals/modal_contact.tsx @@ -361,28 +361,22 @@ const StyledDialogContent = styled(DialogContent)` } `; -const Form = - styled.form < - FormProps > - ` +const Form = styled.form<FormProps>` position: relative; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; opacity: ${props => props.isSuccessful && `0`}; visibility: ${props => props.isSuccessful && `hidden`}; `; -const Confirmation = - styled.div < - FormProps > - ` +const Confirmation = styled.div<FormProps>` position: absolute; top: 50%; text-align: center; width: 100%; left: 0; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; - transition-delay: 0.40s; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; + transition-delay: 0.4s; padding: 60px 60px; transform: translateY(-50%); opacity: ${props => (props.isSuccessful ? `1` : `0`)}; diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 4d4bc4617..56df880f3 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -77,8 +77,8 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { isActive ? colors.lightLinkBlue : this.props.screenWidth === ScreenWidths.Sm - ? 'white' - : colors.grey100 + ? 'white' + : colors.grey100 } fontSize="14px" textAlign="left" diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx index 28e7653c5..07691a02a 100644 --- a/packages/website/ts/components/newLayout.tsx +++ b/packages/website/ts/components/newLayout.tsx @@ -54,10 +54,7 @@ export const Section: React.FunctionComponent<SectionProps> = (props: SectionPro ); }; -export const Column = - styled.div < - ColumnProps > - ` +export const Column = styled.div<ColumnProps>` width: ${props => props.width}; max-width: ${props => props.maxWidth}; padding: ${props => props.padding}; @@ -71,10 +68,7 @@ export const Column = } `; -export const FlexWrap = - styled.div < - FlexProps > - ` +export const FlexWrap = styled.div<FlexProps>` max-width: 1500px; margin: 0 auto; padding: ${props => props.padding}; @@ -85,18 +79,12 @@ export const FlexWrap = } `; -export const WrapSticky = - styled.div < - WrapProps > - ` +export const WrapSticky = styled.div<WrapProps>` position: sticky; top: ${props => props.offsetTop || '60px'}; `; -const SectionBase = - styled.section < - SectionProps > - ` +const SectionBase = styled.section<SectionProps>` width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; max-width: 1500px; margin: 0 auto; @@ -110,10 +98,7 @@ const SectionBase = } `; -const Wrap = - styled(FlexWrap) < - WrapProps > - ` +const Wrap = styled(FlexWrap)<WrapProps>` width: ${props => props.wrapWidth || 'calc(100% - 60px)'}; width: ${props => props.bgColor && 'calc(100% - 60px)'}; max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; @@ -121,10 +106,7 @@ const Wrap = margin: 0 auto; `; -export const WrapGrid = - styled(Wrap) < - WrapProps > - ` +export const WrapGrid = styled(Wrap)<WrapProps>` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; justify-content: ${props => (props.isCentered ? `center` : 'space-between')}; diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx index bd61e3f4d..e5fd95646 100644 --- a/packages/website/ts/components/newsletter_form.tsx +++ b/packages/website/ts/components/newsletter_form.tsx @@ -117,10 +117,7 @@ const StyledForm = styled.form` margin-top: 27px; `; -const StyledInput = - styled.input < - InputProps > - ` +const StyledInput = styled.input<InputProps>` appearance: none; background-color: transparent; border: 0; @@ -132,7 +129,7 @@ const StyledInput = width: 100%; &::placeholder { - color: #B1B1B1; // #9D9D9D on light theme + color: #b1b1b1; // #9D9D9D on light theme } `; @@ -140,14 +137,11 @@ const InputWrapper = styled.div` position: relative; `; -const InnerInputWrapper = - styled.div < - ArrowProps > - ` +const InnerInputWrapper = styled.div<ArrowProps>` opacity: ${props => props.isSubmitted && 0}; visibility: ${props => props.isSubmitted && 'hidden'}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; - transition-delay: 0.30s; + transition-delay: 0.3s; `; const SubmitButton = styled.button` @@ -174,11 +168,8 @@ const Text = styled.p` margin-top: 15px; `; -const SuccessText = - styled.p < - ArrowProps > - ` - color: #B1B1B1; +const SuccessText = styled.p<ArrowProps>` + color: #b1b1b1; font-size: 1rem; font-weight: 300; line-height: 1.2em; @@ -194,10 +185,7 @@ const SuccessText = transition-delay: 0.55s; `; -const Arrow = - styled.svg < - ArrowProps > - ` +const Arrow = styled.svg<ArrowProps>` transform: ${props => props.isSubmitted && `translateX(44px)`}; transition: transform 0.25s ease-in-out; `; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 94ab63ac6..59cf2db71 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -229,8 +229,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None; const tokenVisibility = this.state.tokenManagementState === TokenManagementState.Add - ? TokenVisibility.UNTRACKED - : TokenVisibility.TRACKED; + ? TokenVisibility.Untracked + : TokenVisibility.Tracked; return ( <Container> <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> @@ -447,7 +447,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { render={this._renderAccountManagementItem.bind(this, item)} /> ); - })}} + })} + } <Route render={this._renderNotFoundMessage.bind(this)} /> </Switch> <PortalDisclaimerDialog diff --git a/packages/website/ts/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx index 9a68fbf4c..4d83a1d2f 100644 --- a/packages/website/ts/components/sections/landing/clients.tsx +++ b/packages/website/ts/components/sections/landing/clients.tsx @@ -86,10 +86,7 @@ export const SectionLandingClients = () => ( </Section> ); -const StyledProject = - styled.div < - StyledProjectInterface > - ` +const StyledProject = styled.div<StyledProjectInterface>` flex-shrink: 0; img { @@ -99,7 +96,7 @@ const StyledProject = } @media (min-width: 768px) { - width: auto; + width: auto; height: 50px; margin: 30px; } diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx index 316896dbb..1f0902105 100644 --- a/packages/website/ts/components/siteWrap.tsx +++ b/packages/website/ts/components/siteWrap.tsx @@ -140,10 +140,7 @@ export class SiteWrap extends React.Component<Props, State> { } } -const Main = - styled.main < - MainProps > - ` +const Main = styled.main<MainProps>` transition: transform 0.5s, opacity 0.5s; opacity: ${props => props.isNavToggled && '0.5'}; `; diff --git a/packages/website/ts/components/text.tsx b/packages/website/ts/components/text.tsx index 10f272e73..a47e61ef3 100644 --- a/packages/website/ts/components/text.tsx +++ b/packages/website/ts/components/text.tsx @@ -27,10 +27,7 @@ interface ParagraphProps extends BaseTextInterface { fontWeight?: string | number; } -const StyledHeading = - styled.h1 < - HeadingProps > - ` +const StyledHeading = styled.h1<HeadingProps>` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; display: ${props => props.isFlex && `inline-flex`}; @@ -64,10 +61,7 @@ Heading.defaultProps = { // Note: this would be useful to be implemented the same way was "Heading" // and be more generic. e.g. <Text /> with a props asElement so we can use it // for literally anything = -export const Paragraph = - styled.p < - ParagraphProps > - ` +export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; font-weight: ${props => props.fontWeight || 300}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 92aecf046..e8f2a6461 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -303,7 +303,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala currentTokenAddress={''} onTokenChosen={this._onAssetTokenPicked.bind(this)} tokenByAddress={this.props.tokenByAddress} - tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED} + tokenVisibility={this.state.isAddingToken ? TokenVisibility.Untracked : TokenVisibility.Tracked} /> </div> ); @@ -354,12 +354,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala {tokenState.isLoaded ? ( <span> {this._renderAmount(tokenState.balance, token.decimals)} {token.symbol} - {this.state.isZRXSpinnerVisible && - token.symbol === ZRX_TOKEN_SYMBOL && ( - <span className="pl1"> - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - </span> - )} + {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && ( + <span className="pl1"> + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + </span> + )} </span> ) : ( <i className="zmdi zmdi-spinner zmdi-hc-spin" /> @@ -440,7 +439,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } private _onSendFailed(): void { this.setState({ - errorType: BalanceErrs.sendFailed, + errorType: BalanceErrs.SendFailed, }); } private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode { @@ -461,7 +460,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala } private _renderErrorDialogBody(): React.ReactNode { switch (this.state.errorType) { - case BalanceErrs.incorrectNetworkForFaucet: + case BalanceErrs.IncorrectNetworkForFaucet: return ( <div> Our faucet can only send test Ether to addresses on testnets. Please make sure you are connected @@ -469,7 +468,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); - case BalanceErrs.faucetRequestFailed: + case BalanceErrs.FaucetRequestFailed: return ( <div> An unexpected error occurred while trying to request test Ether from our faucet. Please refresh @@ -477,13 +476,13 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala </div> ); - case BalanceErrs.faucetQueueIsFull: + case BalanceErrs.FaucetQueueIsFull: return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>; - case BalanceErrs.mintingFailed: + case BalanceErrs.MintingFailed: return <div>Minting your test tokens failed unexpectedly. Please refresh the page and try again.</div>; - case BalanceErrs.allowanceSettingFailed: + case BalanceErrs.AllowanceSettingFailed: return ( <div> An unexpected error occurred while trying to set your test token allowance. Please refresh the @@ -522,7 +521,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala logUtils.log(`Unexpected error encountered: ${err}`); logUtils.log(err.stack); this.setState({ - errorType: BalanceErrs.mintingFailed, + errorType: BalanceErrs.MintingFailed, }); errorReporter.report(err); return false; @@ -538,7 +537,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala // from, we must show user an error message if (!utils.isTestNetwork(this.props.blockchain.networkId)) { this.setState({ - errorType: BalanceErrs.incorrectNetworkForFaucet, + errorType: BalanceErrs.IncorrectNetworkForFaucet, }); return false; } @@ -554,8 +553,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala logUtils.log(`Unexpected status code: ${response.status} -> ${responseBody}`); const errorType = response.status === constants.UNAVAILABLE_STATUS - ? BalanceErrs.faucetQueueIsFull - : BalanceErrs.faucetRequestFailed; + ? BalanceErrs.FaucetQueueIsFull + : BalanceErrs.FaucetRequestFailed; this.setState({ errorType, }); diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index 32e0f1be8..c7a5b9030 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -8,7 +8,7 @@ interface AlertProps { } export const Alert = (props: AlertProps) => { - const isAlert = props.type === AlertTypes.ERROR; + const isAlert = props.type === AlertTypes.Error; const errMsgStyles = { background: isAlert ? colors.red200 : colors.lightestGreen, color: colors.white, diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index a8daf4102..f004dd47f 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -6,9 +6,9 @@ import * as React from 'react'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; enum ButtonState { - READY, - LOADING, - COMPLETE, + Ready, + Loading, + Complete, } interface LifeCycleRaisedButtonProps { @@ -38,7 +38,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton constructor(props: LifeCycleRaisedButtonProps) { super(props); this.state = { - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }; } public componentWillUnmount(): void { @@ -52,13 +52,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton let label; switch (this.state.buttonState) { - case ButtonState.READY: + case ButtonState.Ready: label = this.props.labelReady; break; - case ButtonState.LOADING: + case ButtonState.Loading: label = this.props.labelLoading; break; - case ButtonState.COMPLETE: + case ButtonState.Complete: label = this.props.labelComplete; break; default: @@ -72,13 +72,13 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton backgroundColor={this.props.backgroundColor} labelColor={this.props.labelColor} onClick={this.onClickAsync.bind(this)} - disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY} + disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.Ready} /> ); } public async onClickAsync(): Promise<void> { this.setState({ - buttonState: ButtonState.LOADING, + buttonState: ButtonState.Loading, }); const didSucceed = await this.props.onClickAsyncFn(); if (this._didUnmount) { @@ -86,16 +86,16 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton } if (didSucceed) { this.setState({ - buttonState: ButtonState.COMPLETE, + buttonState: ButtonState.Complete, }); this._buttonTimeoutId = window.setTimeout(() => { this.setState({ - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }); }, COMPLETE_STATE_SHOW_LENGTH_MS); } else { this.setState({ - buttonState: ButtonState.READY, + buttonState: ButtonState.Ready, }); } } diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index f9e0967d4..a14b94d8a 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -94,14 +94,17 @@ export class Party extends React.Component<PartyProps, PartyState> { <ReactTooltip id={registeredTooltipId}> {isRegistered ? ( <div> - This token address was found in the token registry<br /> + This token address was found in the token registry + <br /> smart contract and is therefore believed to be a<br /> legitimate token. </div> ) : ( <div> - This token is not included in the token registry<br /> - smart contract. We cannot guarantee the legitimacy<br /> + 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> )} @@ -109,27 +112,28 @@ export class Party extends React.Component<PartyProps, PartyState> { </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> - </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> </div> - )} + </div> + )} </div> </div> ); |