diff options
Diffstat (limited to 'packages/website/ts/components/ui/party.tsx')
| -rw-r--r-- | packages/website/ts/components/ui/party.tsx | 126 |
1 files changed, 60 insertions, 66 deletions
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> ); |