1 files changed, 111 insertions, 31 deletions

diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 7f2045244..79f383dc4 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route, matchPath, withRouter } from 'react-router-dom'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import TabBar from '../../components/app/tab-bar'
 import c from 'classnames'
 import SettingsTab from './settings-tab'
@@ -10,6 +8,7 @@ import NetworksTab from './networks-tab'
 import AdvancedTab from './advanced-tab'
 import InfoTab from './info-tab'
 import SecurityTab from './security-tab'
+import ContactListTab from './contact-list-tab'
 import {
   DEFAULT_ROUTE,
   ADVANCED_ROUTE,
@@ -18,19 +17,28 @@ import {
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
   NETWORKS_ROUTE,
+  CONTACT_LIST_ROUTE,
+  CONTACT_ADD_ROUTE,
+  CONTACT_EDIT_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
 } from '../../helpers/constants/routes'
 
-const ROUTES_TO_I18N_KEYS = {
-  [GENERAL_ROUTE]: 'general',
-  [ADVANCED_ROUTE]: 'advanced',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
-  [ABOUT_US_ROUTE]: 'about',
-}
-
 class SettingsPage extends PureComponent {
   static propTypes = {
-    location: PropTypes.object,
+    addressName: PropTypes.string,
+    backRoute: PropTypes.string,
+    currentPath: PropTypes.string,
     history: PropTypes.object,
+    isAddressEntryPage: PropTypes.bool,
+    isPopupView: PropTypes.bool,
+    location: PropTypes.object,
+    pathnameI18nKey: PropTypes.string,
+    initialBreadCrumbRoute: PropTypes.string,
+    breadCrumbTextKey: PropTypes.string,
+    initialBreadCrumbKey: PropTypes.string,
     t: PropTypes.func,
   }
 
@@ -38,35 +46,25 @@ class SettingsPage extends PureComponent {
     t: PropTypes.func,
   }
 
-  isCurrentPath (pathname) {
-    return this.props.location.pathname === pathname
-  }
-
   render () {
-    const { t } = this.context
-    const { history, location } = this.props
-
-    const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname]
-    const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
+    const { history, backRoute, currentPath } = this.props
 
     return (
       <div
         className={c('main-container settings-page', {
-          'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE),
+          'settings-page--selected': currentPath !== SETTINGS_ROUTE,
         })}
       >
         <div className="settings-page__header">
           {
-            !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && (
+            currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
               <div
                 className="settings-page__back-button"
-                onClick={() => history.push(SETTINGS_ROUTE)}
+                onClick={() => history.push(backRoute)}
               />
             )
           }
-          <div className="settings-page__header__title">
-            {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')}
-          </div>
+          { this.renderTitle() }
           <div
             className="settings-page__close-button"
             onClick={() => history.push(DEFAULT_ROUTE)}
@@ -85,19 +83,65 @@ class SettingsPage extends PureComponent {
     )
   }
 
+  renderTitle () {
+    const { t } = this.context
+    const { isPopupView, pathnameI18nKey, addressName } = this.props
+
+    let titleText
+
+    if (isPopupView && addressName) {
+      titleText = addressName
+    } else if (pathnameI18nKey && isPopupView) {
+      titleText = t(pathnameI18nKey)
+    } else {
+      titleText = t('settings')
+    }
+
+    return (
+      <div className="settings-page__header__title">
+        {titleText}
+      </div>
+    )
+  }
+
   renderSubHeader () {
     const { t } = this.context
-    const { location: { pathname } } = this.props
+    const {
+      currentPath,
+      isPopupView,
+      isAddressEntryPage,
+      pathnameI18nKey,
+      addressName,
+      initialBreadCrumbRoute,
+      breadCrumbTextKey,
+      history,
+      initialBreadCrumbKey,
+    } = this.props
+
+    let subheaderText
 
-    return pathname !== NETWORKS_ROUTE && (
+    if (isPopupView && isAddressEntryPage) {
+      subheaderText = t('settings')
+    } else if (initialBreadCrumbKey) {
+      subheaderText = t(initialBreadCrumbKey)
+    } else {
+      subheaderText = t(pathnameI18nKey || 'general')
+    }
+
+    return currentPath !== NETWORKS_ROUTE && (
       <div className="settings-page__subheader">
-        {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
+        <div
+          className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
+          onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
+        >{subheaderText}</div>
+        {breadCrumbTextKey && <div><span>{'> '}</span>{t(breadCrumbTextKey)}</div>}
+        {isAddressEntryPage && <div><span>{' > '}</span>{addressName}</div>}
       </div>
     )
   }
 
   renderTabs () {
-    const { history, location } = this.props
+    const { history, currentPath } = this.props
     const { t } = this.context
 
     return (
@@ -105,15 +149,16 @@ class SettingsPage extends PureComponent {
         tabs={[
           { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
           { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
+          { content: t('contactList'), description: t('contactListDescription'), key: CONTACT_LIST_ROUTE },
           { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
           { content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE },
           { content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
         ]}
         isActive={key => {
-          if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) {
+          if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
             return true
           }
-          return matchPath(location.pathname, { path: key, exact: true })
+          return matchPath(currentPath, { path: key, exact: true })
         }}
         onSelect={key => history.push(key)}
       />
@@ -149,6 +194,41 @@ class SettingsPage extends PureComponent {
           component={SecurityTab}
         />
         <Route
+          exact
+          path={CONTACT_LIST_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={CONTACT_ADD_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={CONTACT_MY_ACCOUNTS_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_EDIT_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_VIEW_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
           component={SettingsTab}
         />
       </Switch>