Add confirmed/unconfirmed icon to physical addresses.

Render multiple physical addresses alongside their confirmation icon.

public/images/confirmed.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="9">
+    <path fill="#FFF" fill-rule="evenodd" d="M10.675 1.754l-.892.892c-.029.039-.044.084-.079.119L6.765 5.704c-.008.008-.019.011-.027.018L4.785 7.675a1.023 1.023 0 0 1-.394.237 1.033 1.033 0 0 1-1.156-.208L.296 4.765a1.038 1.038 0 1 1 1.469-1.469l2.24 2.239 1.273-1.273c.007-.008.01-.019.018-.027l.955-.955c.017-.02.024-.046.043-.065L9.214.294a1.034 1.034 0 0 1 1.461 1.46z"/>
+</svg>

public/images/unconfirmed.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+    <path fill="#8A8A8A" fill-rule="evenodd" d="M6 12A6 6 0 1 1 6 0a6 6 0 0 1 0 12zM6 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm2 5H6a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v1h1a1 1 0 0 1 0 2z"/>
+</svg>

src/Validator.js

@@ -47,13 +47,13 @@ class Validator extends Component {
       </div>
     )
 
-    let allPhysicalAddreses = physicalAddresses || []
-    allPhysicalAddreses.push({
+    let metadataUnconfirmedAddresss = {
       fullAddress: fullAddress,
       us_state: us_state,
       postal_code: postal_code,
       isConfirmed: false
-    })
+    }
+    let allPhysicalAddreses = physicalAddresses || [metadataUnconfirmedAddresss]
 
     return (
       <div className="validators-i">

src/ValidatorPhysicalAddresses.js

@@ -1,46 +1,38 @@
 import React from 'react'
 
-const CONFIRMED_ADDRESS_TITLE = 'Confirmed Address'
-const UNCONFIRMED_ADDRESS_TITLE = 'Unconfirmed Address'
+const ICON_CONFIRMED_CLASSNAME = 'data-icon--confirmed'
+const ICON_UNCONFIRMED_CLASSNAME = 'data-icon--unconfirmed'
 
 const ValidatorPhysicalAddress = ({ physicalAddresses }) => {
   const confirmedAddresses = physicalAddresses.filter(a => a.isConfirmed)
   const unconfirmedAddresses = physicalAddresses.filter(a => !a.isConfirmed)
   const hasConfirmedAddresses = confirmedAddresses.length > 0
 
-  const baseTitle = hasConfirmedAddresses ? CONFIRMED_ADDRESS_TITLE : UNCONFIRMED_ADDRESS_TITLE
   const addresses = hasConfirmedAddresses ? confirmedAddresses : unconfirmedAddresses
 
-  let renderedResult = null
-  if (addresses.length > 1) {
-    renderedResult = addresses.map((address, index) => {
-      return (
-        <div className="validators-table-i" key={index}>
-          <p>{`${baseTitle} #${index + 1}`}</p>
-          <PhysicalAddressValue address={address} />
-        </div>
-      )
-    })
-  } else {
-    renderedResult = (
-      <div className="validators-table-i">
-        <p>{baseTitle}</p>
-        <PhysicalAddressValue address={addresses[0]} />
-      </div>
-    )
-  }
-  return renderedResult
-}
+  let singleOrMultiple =
+    addresses.length > 1 ? 'validator-physical-address--multiple' : 'validator-physical-address--single'
+  let validatorPhysicalAddressClassName = `validators-table-i validator-physical-address ${singleOrMultiple}`
 
-const PhysicalAddressValue = ({ address }) => {
-  const { fullAddress, us_state, postal_code } = address
   return (
-    <p className="text-capitalized text-align-right">
-      {`${fullAddress},`}
-      <br />
-      {`${us_state.toUpperCase()}, ${postal_code}`}
-    </p>
+    <div className={validatorPhysicalAddressClassName}>
+      <p className="validator-physical-address__title">Address</p>
+      <PhysicalAddressValue addresses={addresses} />
+    </div>
   )
 }
 
+const PhysicalAddressValue = ({ addresses }) => {
+  let textAlign = addresses.length > 1 ? 'text-align-left' : 'text-align-right'
+  let physicalAddressValueClassName = `validator-physical-address__value text-capitalized ${textAlign}`
+
+  return addresses.map((address, index) => (
+    <p className={physicalAddressValueClassName} key={index}>
+      {`${address.fullAddress} `}
+      <span className="text-whitespace-nowrap">{`${address.us_state.toUpperCase()}, ${address.postal_code}`}</span>
+      <i className={address.isConfirmed ? ICON_CONFIRMED_CLASSNAME : ICON_UNCONFIRMED_CLASSNAME} />
+    </p>
+  ))
+}
+
 export default ValidatorPhysicalAddress

src/stylesheets/application.scss

@@ -13,3 +13,4 @@
 @import 'application/search';
 @import 'application/socials';
 @import 'application/validators';
+@import 'application/validatorPhysicalAddresses';

src/stylesheets/application/_base.scss

@@ -63,3 +63,7 @@ body {
 .text-align-right {
   text-align: right;
 }
+
+.text-whitespace-nowrap {
+  white-space: nowrap;
+}

src/stylesheets/application/_validatorPhysicalAddresses.scss

@@ -0,0 +1,31 @@
+.validator-physical-address {
+  display: flex;
+
+  &__title {
+    flex-shrink: 0;
+    padding-right: 10px;
+  }
+
+  &__value {
+    line-height: 20px;
+    margin-bottom: 21px;
+    padding-right: 35px;
+    position: relative;
+
+    .data-icon--confirmed,
+    .data-icon--unconfirmed {
+      position: absolute;
+      right: 0;
+      top: -3px;
+    }
+  }
+}
+
+.validator-physical-address--multiple {
+  display: block;
+
+  .validator-physical-address__title {
+    margin-bottom: 10px;
+    width: 100%;
+  }
+}

src/stylesheets/application/_validators.scss

@@ -131,3 +131,28 @@
     font-weight: 700;
   }
 }
+
+// Icon that represents unconfirmed/confirmed validator's data
+%data-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+}
+
+.data-icon {
+  &--unconfirmed {
+    @extend %data-icon;
+    background-color: #e5e5e5;
+    background-image: url('/images/unconfirmed.svg');
+  }
+
+  &--confirmed {
+    @extend %data-icon;
+    background-color: #60db97;
+    background-image: url('/images/confirmed.svg');
+  }
+}