3 files changed, 58 insertions, 0 deletions
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/index.js b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
new file mode 100644
index 000000000..13a7a9cbf
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
@@ -0,0 +1 @@
+export { default } from './my-accounts.container'
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
new file mode 100644
index 000000000..f43b59e07
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
@@ -0,0 +1,39 @@
+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>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
new file mode 100644
index 000000000..6380c9d4c
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
@@ -0,0 +1,18 @@
+import ViewContact from './my-accounts.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { accountsWithSendEtherInfoSelector } from '../../../../selectors/selectors'
+
+const mapStateToProps = (state,) => {
+  const myAccounts = accountsWithSendEtherInfoSelector(state)
+
+  return {
+    myAccounts,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(ViewContact)