more generic component

app/components/EthAddress.css

@@ -1,12 +1,12 @@
 .eth-address {
     padding: 3px;
-    border-radius: 8px;
-    position: relative;
     display: inline-grid;
+    min-width: 170px;
+    border-radius: 8px;
     box-shadow: 1px 1px 1px 1px #CCC;
     border-top: solid 1px #FFF;
     border-left: solid 1px #FFF;
-    margin: -2px 0 0 0;
+    margin: auto;
   }
   
   .eth-address .blocky .identicon {
@@ -14,63 +14,63 @@
     margin-right: 10px;
   }
   
-  .eth-address .address-err, 
+  .eth-address .err, 
-  .eth-address .address-bg {
+  .eth-address .bg {
     border-radius: 8px;
     display: flex;
     overflow: hidden;
   }
   
-  .eth-address .address-bg {
+  .eth-address .bg {
     background-color:#FFF;
   }
   
-  .eth-address .address-err {
+  .eth-address .err {
     background-color:#f8d7da;
   }
   
-  .eth-address .address-text {
+  .eth-address .text {
     color: #808080;
   }
   
-  .eth-address .address-indicator,
+  .eth-address .indicator,
-  .eth-address .address-control
+  .eth-address .control
   {
     color: #000;
     padding-right: 8px;
   }
   
-  .eth-address .address-indicator,
+  .eth-address .indicator,
-  .eth-address .address-control,
+  .eth-address .control,
-  .eth-address .address-text {
+  .eth-address .text {
     overflow: hidden;
     margin: auto;
   }
   
-  .eth-address .address-indicator,
+  .eth-address .indicator,
-  .eth-address .address-text {
+  .eth-address .text {
     display: flex;
   }
   
-  .eth-address .address-control {
+  .eth-address .control {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     display: none;
   }
   
-  .eth-address:focus-within .address-control,
+  .eth-address:focus-within .control,
-  .eth-address:hover .address-control {
+  .eth-address:hover .control {
     display: flow-root;
   }
   
-  .eth-address:focus-within .address-indicator,
+  .eth-address:focus-within .indicator,
-  .eth-address:hover .address-indicator {
+  .eth-address:hover .indicator {
     display: none;
   }
   
-  .eth-address .address-indicator small, 
+  .eth-address .indicator small, 
-  .eth-address .address-text small {
+  .eth-address .text small {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

app/components/EthAddress.jsx

@@ -6,8 +6,8 @@ import './EthAddress.css';
 class EthAddress extends React.Component {
 	static propTypes = {
 		className: PropTypes.string,
-		defaultValue: PropTypes.string,
 		value: PropTypes.string,
+		defaultValue: PropTypes.string,
 		colors: PropTypes.bool,
 		blocky: PropTypes.bool,
 		blockySize: PropTypes.number,
@@ -18,7 +18,7 @@ class EthAddress extends React.Component {
 	};
 
 	static defaultProps = {
-		className: 'text-monospace',
+		className: 'text-monospace eth-address',
 		defaultValue: "0x0000000000000000000000000000000000000000",
 		colors: true,
 		control: false,
@@ -34,19 +34,18 @@ class EthAddress extends React.Component {
 		this.controlRef = React.createRef();
 		this.state = {
 			value: props.value != undefined ? props.value : props.defaultValue,
-
 		};
 	}
 
 
 	componentDidMount() {
 		if(this.props.control)
-        	this.controlRef.current.textContent = this.props.value;
+        	this.controlRef.current.textContent = this.state.value;
     }
 
 	componentDidUpdate(prevProps, prevState) {
-        if (prevProps.value != this.props.value && this.props.value != this.state.address) {
+        if (prevProps.value != this.props.value && this.props.value != this.state.value) {
-            this.setState({address: this.props.value});
+            this.setState({value: this.props.value});
         }
     }
 
@@ -61,7 +60,7 @@ class EthAddress extends React.Component {
 		if(text.length == 0){
 			text = "0x0000000000000000000000000000000000000000";
 		}
-		this.setState({ address: text });
+		this.setState({ value: text });
 		this.notifyListeners(text);
 	}
 	
@@ -81,9 +80,9 @@ class EthAddress extends React.Component {
             event.stopPropagation();
             event.preventDefault();
             this.controlRef.current.textContent = pastedData;
-            this.setState({ address: pastedData });
+            this.setState({ value: pastedData });
 		} else {
-			this.setState({ address: this.controlRef.current.textContent });
+			this.setState({ value: this.controlRef.current.textContent });
 		}
 		this.notifyListeners(this.controlRef.current.textContent);
     }
@@ -102,24 +101,24 @@ class EthAddress extends React.Component {
 			blockyScale,
 			control
 		} = this.props;
-		const { address } = this.state;
+		const { value } = this.state;
-		let valid = /^(0x)?[0-9a-f]{40}$/i.test(address);
+		let valid = /^(0x)?[0-9a-f]{40}$/i.test(value);
 		const colorStyle = colors && valid ? {
-			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%)`
+			backgroundImage: `linear-gradient(90deg, #${value.substr(6, 6)} 0% 15%, #${value.substr(12, 6)} 17% 32%, #${value.substr(18, 6)} 34% 49%, #${value.substr(24, 6)} 51% 66%, #${value.substr(30, 6)} 68% 83%, #${value.substr(36, 6)} 85% 100%)`
 		} : {}
 		return (
-			<span style={colorStyle} className={`${className} eth-address`} >
+			<span style={colorStyle} className={`${className}`} >
-				<span className={valid ? "address-bg" : "address-err"}>
+				<span className={valid ? "bg" : "err"}>
 					{blocky && 
 						<span className="blocky">
-							<Blockies seed={address.toLowerCase()} size={blockySize} scale={blockyScale} />
+							<Blockies seed={value.toLowerCase()} size={blockySize} scale={blockyScale} />
 						</span>}
-					<span className={control ? "address-indicator" : "address-text" } >
+					<span className={control ? "indicator" : "text" } >
-						<strong>{address.substr(0, 6)}</strong><small>{address.substr(6, 36)}</small><strong>{address.substr(36, 6)}</strong>
+						<strong>{value.substr(0, 6)}</strong><small>{value.substr(6, 36)}</small><strong>{value.substr(36, 6)}</strong>
 					</span>
 					{ control ? 
 					<span 
-						className="address-control"
+						className="control"
 						ref={this.controlRef} 
 						placeholder="0x0000000000000000000000000000000000000000"
 						onKeyPress={(event) => this.onKeyPress(event)}