Connected status indicator (#8270)

Co-authored-by: Whymarrh Whitby <whymarrh.whitby@gmail.com>

app/_locales/en/messages.json

@@ -1324,6 +1324,12 @@
   "stateLogError": {
     "message": "Error in retrieving state logs."
   },
+  "statusConnected": {
+    "message": "Connected"
+  },
+  "statusNotConnected": {
+    "message": "Not connected"
+  },
   "step1HardwareWallet": {
     "message": "1. Connect Hardware Wallet"
   },

ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import {
+  STATUS_CONNECTED,
+  STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
+  STATUS_NOT_CONNECTED,
+} from '../../../helpers/constants/connected-sites'
+
+export default class ConnectedStatusIndicator extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    status: PropTypes.oneOf([ STATUS_CONNECTED, STATUS_CONNECTED_TO_ANOTHER_ACCOUNT, STATUS_NOT_CONNECTED ]),
+  }
+
+  static defaultProps = {
+    status: STATUS_NOT_CONNECTED,
+  }
+
+  renderStatusCircle = () => {
+    const { status } = this.props
+
+    return (
+      <div className={classnames({
+        'connected-status-indicator__green-circle': status === STATUS_CONNECTED,
+        'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
+        'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
+      })}
+      />
+    )
+  }
+
+  renderStatusText = () => {
+    const { t } = this.context
+    const { status } = this.props
+
+    const text = status === STATUS_CONNECTED
+      ? t('statusConnected')
+      : t('statusNotConnected')
+
+    return (
+      <div className="connected-status-indicator__text">{ text }</div>
+    )
+  }
+
+  render () {
+    return (
+      <div className={classnames('connected-status-indicator', {
+        invisible: getEnvironmentType() !== ENVIRONMENT_TYPE_POPUP,
+      })}
+      >
+        { this.renderStatusCircle() }
+        { this.renderStatusText() }
+      </div>
+    )
+  }
+}

ui/app/components/app/connected-status-indicator/connected-status-indicator.container.js

@@ -0,0 +1,38 @@
+import { findKey } from 'lodash'
+import { connect } from 'react-redux'
+import ConnectedStatusIndicator from './connected-status-indicator.component'
+import {
+  STATUS_CONNECTED,
+  STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
+  STATUS_NOT_CONNECTED,
+} from '../../../helpers/constants/connected-sites'
+import {
+  getAddressConnectedDomainMap,
+  getOriginOfCurrentTab,
+  getSelectedAddress,
+} from '../../../selectors/selectors'
+
+
+const mapStateToProps = (state) => {
+  const selectedAddress = getSelectedAddress(state)
+  const addressConnectedDomainMap = getAddressConnectedDomainMap(state)
+  const originOfCurrentTab = getOriginOfCurrentTab(state)
+
+  const selectedAddressDomainMap = addressConnectedDomainMap[selectedAddress]
+  const currentTabIsConnectedToSelectedAddress = Boolean(selectedAddressDomainMap && selectedAddressDomainMap[originOfCurrentTab])
+
+  let status
+  if (currentTabIsConnectedToSelectedAddress) {
+    status = STATUS_CONNECTED
+  } else if (findKey(addressConnectedDomainMap, originOfCurrentTab)) {
+    status = STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
+  } else {
+    status = STATUS_NOT_CONNECTED
+  }
+
+  return {
+    status,
+  }
+}
+
+export default connect(mapStateToProps)(ConnectedStatusIndicator)

ui/app/components/app/connected-status-indicator/index.js

@@ -0,0 +1 @@
+export { default } from './connected-status-indicator.container'

ui/app/components/app/connected-status-indicator/index.scss

@@ -0,0 +1,30 @@
+.connected-status-indicator {
+  display:flex;
+  align-items: center;
+  position: absolute;
+  left: 22px;
+
+  &__green-circle, &__yellow-circle, &__grey-circle {
+    border-radius: 4px;
+    height: 8px;
+    width: 8px;
+  }
+
+  &__green-circle {
+    background: #4CD964;
+  }
+
+  &__yellow-circle {
+    background: #FFD33D;
+  }
+
+  &__grey-circle {
+    background: $Grey-100;
+  }
+
+  &__text {
+    font-size: 10px;
+    color: $Grey-500;
+    margin-left: 8px;
+  }
+}

ui/app/components/app/index.scss

@@ -91,3 +91,5 @@
 @import '../ui/circle-icon/index';
 
 @import '../ui/alert-circle-icon/index';
+
+@import './connected-status-indicator/index'

ui/app/components/app/menu-bar/menu-bar.component.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Tooltip from '../../ui/tooltip'
 import SelectedAccount from '../selected-account'
+import ConnectedStatusIndicator from '../connected-status-indicator'
 import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
 
 export default class MenuBar extends PureComponent {
@@ -18,6 +19,8 @@ export default class MenuBar extends PureComponent {
 
     return (
       <div className="menu-bar">
+        <ConnectedStatusIndicator />
+
         <SelectedAccount />
 
         <Tooltip

ui/app/helpers/constants/connected-sites.js

@@ -0,0 +1,3 @@
+export const STATUS_CONNECTED = 'STATUS_CONNECTED'
+export const STATUS_CONNECTED_TO_ANOTHER_ACCOUNT = 'STATUS_CONNECTED_TO_ANOTHER_ACCOUNT'
+export const STATUS_NOT_CONNECTED = 'STATUS_NOT_CONNECTED'