metamask-extension/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js

import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { getAddressBook } from '../../../selectors';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../shared/constants/app';
import { getEnvironmentType } from '../../../../../app/scripts/lib/util';

import {
  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';
import ContactListTab from './contact-list-tab.component';

const mapStateToProps = (state, ownProps) => {
  const { location } = ownProps;
  const { pathname } = location;

  const pathNameTail = pathname.match(/[^/]+$/u)[0];
  const pathNameTailIsAddress = pathNameTail.includes('0x');

  const viewingContact = Boolean(
    pathname.match(CONTACT_VIEW_ROUTE) ||
      pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE),
  );
  const editingContact = Boolean(
    pathname.match(CONTACT_EDIT_ROUTE) ||
      pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE),
  );
  const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE));
  const showingMyAccounts = Boolean(
    pathname.match(CONTACT_MY_ACCOUNTS_ROUTE) ||
      pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE) ||
      pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE),
  );
  const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;

  const hideAddressBook =
    envIsPopup && (viewingContact || editingContact || addingContact);

  return {
    viewingContact,
    editingContact,
    addingContact,
    showingMyAccounts,
    addressBook: getAddressBook(state),
    selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
    hideAddressBook,
    envIsPopup,
    showContactContent: !envIsPopup || hideAddressBook,
  };
};

export default compose(withRouter, connect(mapStateToProps))(ContactListTab);