diff options
author | kumavis <aaron@kumavis.me> | 2018-10-26 10:24:30 +0800 |
---|---|---|
committer | kumavis <aaron@kumavis.me> | 2018-10-26 10:24:30 +0800 |
commit | 9b42416fc0d92662d1a21759db357e7f439d7a7b (patch) | |
tree | 4fb658d739a7127d4c18a22b4abe556bfc3a194e /ui/app/components/identicon/identicon.component.js | |
parent | 9b501b7c42ebebb61ac3130d1e84d36efcac9b7e (diff) | |
parent | 55c66b0d988fac6b2ed5948cf4dcd20fd486070e (diff) | |
download | tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.tar.gz tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.tar.zst tangerine-wallet-browser-9b42416fc0d92662d1a21759db357e7f439d7a7b.zip |
Merge branch 'develop' of github.com:MetaMask/metamask-extension into HowardBraham-develop
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)} + /> + ) + } +} |