diff options
author | brunobar79 <brunobar79@gmail.com> | 2018-11-07 09:21:19 +0800 |
---|---|---|
committer | brunobar79 <brunobar79@gmail.com> | 2018-11-07 09:21:19 +0800 |
commit | c651212025ab7cd0309d96be6687c1eba35ab9fa (patch) | |
tree | fa5a6020daae332c5df47bdee3492e8a079375e3 /ui/app/components/identicon/identicon.component.js | |
parent | 9c1b2108f69334884473eb95758e2d1c02c984d6 (diff) | |
parent | 7f944923d170d6e7e04f6e238d2fd5f80abe3161 (diff) | |
download | tangerine-wallet-browser-c651212025ab7cd0309d96be6687c1eba35ab9fa.tar.gz tangerine-wallet-browser-c651212025ab7cd0309d96be6687c1eba35ab9fa.tar.zst tangerine-wallet-browser-c651212025ab7cd0309d96be6687c1eba35ab9fa.zip |
fix merge conflicts
Diffstat (limited to 'ui/app/components/identicon/identicon.component.js')
-rw-r--r-- | ui/app/components/identicon/identicon.component.js | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/ui/app/components/identicon/identicon.component.js b/ui/app/components/identicon/identicon.component.js new file mode 100644 index 000000000..b892e5ae5 --- /dev/null +++ b/ui/app/components/identicon/identicon.component.js @@ -0,0 +1,99 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import { toDataUrl } from '../../../lib/blockies' +import contractMap from 'eth-contract-metadata' +import { checksumAddress } from '../../../app/util' +import Jazzicon from '../jazzicon' + +const getStyles = diameter => ( + { + height: diameter, + width: diameter, + borderRadius: diameter / 2, + } +) + +export default class Identicon extends PureComponent { + static propTypes = { + address: PropTypes.string, + className: PropTypes.string, + diameter: PropTypes.number, + image: PropTypes.string, + useBlockie: PropTypes.bool, + } + + static defaultProps = { + diameter: 46, + } + + renderImage () { + const { className, diameter, image } = this.props + + return ( + <img + className={classnames('identicon', className)} + src={image} + style={getStyles(diameter)} + /> + ) + } + + renderJazzicon () { + const { address, className, diameter } = this.props + + return ( + <Jazzicon + address={address} + diameter={diameter} + className={classnames('identicon', className)} + style={getStyles(diameter)} + /> + ) + } + + renderBlockie () { + const { address, className, diameter } = this.props + + return ( + <div + className={classnames('identicon', className)} + style={getStyles(diameter)} + > + <img + src={toDataUrl(address)} + height={diameter} + width={diameter} + /> + </div> + ) + } + + render () { + const { className, address, image, diameter, useBlockie } = this.props + + if (image) { + return this.renderImage() + } + + if (address) { + const checksummedAddress = checksumAddress(address) + + if (contractMap[checksummedAddress] && contractMap[checksummedAddress].logo) { + return this.renderJazzicon() + } + + return useBlockie + ? this.renderBlockie() + : this.renderJazzicon() + } + + return ( + <img + className={classnames('balance-icon', className)} + src="./images/eth_logo.svg" + style={getStyles(diameter)} + /> + ) + } +} |