Merge pull request #6969 from MetaMask/developv7.0.0

Master Version Bump

3 files changed, 122 insertions, 0 deletions

diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/index.js b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
new file mode 100644
index 000000000..78bf19d18
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
@@ -0,0 +1 @@
+export { default } from './view-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
new file mode 100644
index 000000000..d4fe045eb
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+
+import Button from '../../../../components/ui/button/button.component'
+import copyToClipboard from 'copy-to-clipboard'
+
+function quadSplit (address) {
+  return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ')
+}
+
+export default class ViewContact extends PureComponent {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    removeFromAddressBook: PropTypes.func,
+    name: PropTypes.string,
+    address: PropTypes.string,
+    history: PropTypes.object,
+    checkSummedAddress: PropTypes.string,
+    memo: PropTypes.string,
+    editRoute: PropTypes.string,
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, name, address, checkSummedAddress, memo, editRoute } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <div className="settings-page__header address-book__header">
+            <Identicon address={address} diameter={60} />
+            <div className="address-book__header__name">{ name }</div>
+          </div>
+          <div className="address-book__view-contact__group">
+            <Button
+              type="secondary"
+              onClick={() => {
+                history.push(`${editRoute}/${address}`)
+              }}
+            >
+              {t('edit')}
+            </Button>
+          </div>
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('ethereumPublicAddress') }
+            </div>
+            <div className="address-book__view-contact__group__value">
+              <div
+                className="address-book__view-contact__group__static-address"
+              >
+                { quadSplit(checkSummedAddress) }
+              </div>
+              <img
+                className="address-book__view-contact__group__static-address--copy-icon"
+                onClick={() => copyToClipboard(checkSummedAddress)}
+                src="/images/copy-to-clipboard.svg"
+              />
+            </div>
+          </div>
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label--capitalized">
+              { t('memo') }
+            </div>
+            <div className="address-book__view-contact__group__static-address">
+              { memo }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
new file mode 100644
index 000000000..b1196d936
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
@@ -0,0 +1,43 @@
+import ViewContact from './view-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntry } from '../../../../selectors/selectors'
+import { removeFromAddressBook } from '../../../../store/actions'
+import { checksumAddress } from '../../../../helpers/utils/util'
+import {
+  CONTACT_EDIT_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+} from '../../../../helpers/constants/routes'
+
+const mapStateToProps = (state, ownProps) => {
+  const { location } = ownProps
+  const { pathname } = location
+  const pathNameTail = pathname.match(/[^/]+$/)[0]
+  const pathNameTailIsAddress = pathNameTail.includes('0x')
+  const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id
+
+  const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address]
+
+  const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE))
+
+  return {
+    name,
+    address,
+    checkSummedAddress: checksumAddress(address),
+    memo,
+    editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ViewContact)