metamask-extension/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import ContactList from '../../../../components/app/contact-list'
import { CONTACT_MY_ACCOUNTS_VIEW_ROUTE } from '../../../../helpers/constants/routes'

export default class ViewContact extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
  }

  static propTypes = {
    myAccounts: PropTypes.array,
    history: PropTypes.object,
  }

  renderMyAccounts() {
    const { myAccounts, history } = this.props

    return (
      <div>
        <ContactList
          searchForMyAccounts={() => myAccounts}
          selectRecipient={(address) => {
            history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`)
          }}
        />
      </div>
    )
  }

  render() {
    return <div className="address-book">{this.renderMyAccounts()}</div>
  }
}