Color(ful) Eth Address React Component

color-eth-address.css

.eth-address {
  padding: 3px;
  border-radius: 8px;
  position: relative;
  display: inline-grid;
  box-shadow: 1px 1px 1px 1px #CCCC;
  border-top: solid 1px #FFFC;
  border-left: solid 1px #FFFC;
}

.eth-address .blocky .identicon {
  border-radius: 0 8px 8px 0;
  margin-right: 10px;
}

.eth-address .address-text {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  display: flex;
}

.eth-address .address-text small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: flow-root;
  margin: auto;
}

.eth-address .address-bg {
  border-radius: 8px;
  background-color: white;
  display: flex;
  overflow: hidden;
}


.eth-address .clip-icon {
  visibility: hidden;
  float: right;
  margin: auto 3px;
}

.eth-address.clipboard-button:hover {
  background-color: #eee;
  cursor: pointer;
}


.eth-address:hover .clip-icon {
  visibility: visible;
}

.eth-address.showing-copied .clip-icon {
  display: inline-block;
}

.eth-address.error {
  color: #d63d26;
}

a.eth-address {
  padding: 0;
}

a.eth-address.clipboard-button:hover {
  background: none;
}

.eth-address .tooltip {
  background-color: black;
  color: white;
  padding: 4px;
  border-radius: 3px;
  position: absolute;
  right: 0;
  bottom: -24px;
  font-size: 11px;
}

color-eth-address.jsx

import React from 'react';
import copy from 'copy-to-clipboard';
import PropTypes from 'prop-types';
import Blockies from 'react-blockies';
import { Overlay, Tooltip } from 'react-bootstrap';
import './color-eth-address.css';

class ColorEthAddress extends React.Component {
	static propTypes = {
		className: PropTypes.string,
		address: PropTypes.string,
		colors: PropTypes.bool,
		blocky: PropTypes.bool,
		blockySize: PropTypes.number,
		blockyScale: PropTypes.number,
		editable: PropTypes.bool,
		onChange: PropTypes.func,
		clipboardButton: PropTypes.bool
	};

	static defaultProps = {
		className: 'text-monospace',
		colors: true,
		blocky: true,
		blockySize: 8,
		blockyScale: 3,
		editable: false,
		clipboardButton: true,
		onChange: () => { },
	};

	constructor(props) {
		super(props);
		this.attachRef = target => this.setState({ target });
		this.state = { tooltipVisible: false };
	}

	componentWillUnmount() {
		clearTimeout(this.timeout);
	}

	onClick = () => {
		if (this.props.clipboardButton) {
			copy(this.props.address);
			this.setState({ tooltipVisible: true });
			clearTimeout(this.timeout);
			this.timeout = setTimeout(() => { this.setState({ tooltipVisible: false }) }, 1000)
		}
	}

	render() {
		const {
			clipboardButton,
			className,
			colors,
			blocky,
			blockySize,
			blockyScale
		} = this.props;
		const { target, tooltipVisible } = this.state;
		const address = !this.props.address ? "" : this.props.address.startsWith('0x') ? this.props.address : `0x${this.props.address}`;
		const colorStyle = colors ? {
			backgroundImage: `linear-gradient(90deg, #${address.substr(6, 6)} 0% 15%, #${address.substr(12, 6)} 17% 32%, #${address.substr(18, 6)} 34% 49%, #${address.substr(24, 6)} 51% 66%, #${address.substr(30, 6)} 68% 83%, #${address.substr(36, 6)} 85% 100%)`
		} : {}
		return (
			<span ref={this.attachRef} onClick={this.onClick} style={colorStyle} className={`${className} eth-address ${clipboardButton ? 'clipboard-button' : ''} ${tooltipVisible ? 'tooltip-visible' : ''}`} >
				<span className="address-bg">
					{blocky &&
						<span className="blocky">
							<Blockies seed={address.toLowerCase()} size={blockySize} scale={blockyScale} />
						</span>}
					<span contentEditable={this.props.editable} className="address-text">
						<strong>{address.substr(0, 6)}</strong><small>{address.substr(6, 36)}</small><strong>{address.substr(36, 6)}</strong>
					</span>
					{clipboardButton &&
						<span className="clip-icon">
							<svg id='copy_icon' xmlns='http://www.w3.org/2000/svg' viewBox="0 0 20 20" width="15" height="15">
								<path d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411"></path>
							</svg>
						</span>}
					<Overlay target={target} show={tooltipVisible} placement="bottom">
						{(props) => {
							delete props['show'];
							return (
								<Tooltip id="address-tooltip" {...props} >Copied</Tooltip>
							)
						}}
					</Overlay>
				</span>
			</span>
		)
	}
}

export default ColorEthAddress;