Refactor and redesign confirm transaction views

3 files changed, 192 insertions, 0 deletions

diff --git a/ui/app/components/sender-to-recipient/index.js b/ui/app/components/sender-to-recipient/index.js
new file mode 100644
index 000000000..f515c4ac4
--- /dev/null
+++ b/ui/app/components/sender-to-recipient/index.js
@@ -0,0 +1 @@
+export { default } from './sender-to-recipient.component'
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
new file mode 100644
index 000000000..a97393b8f
--- /dev/null
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -0,0 +1,74 @@
+.sender-to-recipient {
+  &__container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    border-bottom: 1px solid $geyser;
+    position: relative;
+    flex: 0 0 auto;
+    height: 42px;
+  }
+
+  &__tooltip-wrapper {
+    min-width: 0;
+  }
+
+  &__tooltip-container {
+    max-width: 100%;
+  }
+
+  &__sender,
+  &__recipient {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    padding: 0 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__sender {
+    padding-right: 30px;
+    cursor: pointer;
+  }
+
+  &__recipient {
+    padding-left: 30px;
+    border-left: 1px solid $geyser;
+
+    &--with-address {
+      cursor: pointer;
+    }
+  }
+
+  &__arrow-container {
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__arrow-circle {
+    background: $white;
+    padding: 5px;
+    border: 1px solid $geyser;
+    border-radius: 20px;
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__name {
+    padding-left: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: .875rem;
+  }
+}
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
new file mode 100644
index 000000000..cae173b56
--- /dev/null
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -0,0 +1,117 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../identicon'
+import Tooltip from '../tooltip-v2'
+import copyToClipboard from 'copy-to-clipboard'
+
+export default class SenderToRecipient extends Component {
+  static propTypes = {
+    senderName: PropTypes.string,
+    senderAddress: PropTypes.string,
+    recipientName: PropTypes.string,
+    recipientAddress: PropTypes.string,
+    t: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  state = {
+    senderAddressCopied: false,
+    recipientAddressCopied: false,
+  }
+
+  renderRecipientWithAddress () {
+    const { t } = this.context
+    const { recipientName, recipientAddress } = this.props
+
+    return (
+      <div
+        className="sender-to-recipient__recipient sender-to-recipient__recipient--with-address"
+        onClick={() => {
+          this.setState({ recipientAddressCopied: true })
+          copyToClipboard(recipientAddress)
+        }}
+      >
+        <div className="sender-to-recipient__sender-icon">
+          <Identicon
+            address={recipientAddress}
+            diameter={24}
+          />
+        </div>
+        <Tooltip
+          position="bottom"
+          title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+          wrapperClassName="sender-to-recipient__tooltip-wrapper"
+          containerClassName="sender-to-recipient__tooltip-container"
+          onHidden={() => this.setState({ recipientAddressCopied: false })}
+        >
+          <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+            { recipientName || this.context.t('newContract') }
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+
+  renderRecipientWithoutAddress () {
+    return (
+      <div className="sender-to-recipient__recipient">
+        <i className="fa fa-file-text-o" />
+        <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+          { this.context.t('newContract') }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { senderName, senderAddress, recipientAddress } = this.props
+
+    return (
+      <div className="sender-to-recipient__container">
+        <div
+          className="sender-to-recipient__sender"
+          onClick={() => {
+            this.setState({ senderAddressCopied: true })
+            copyToClipboard(senderAddress)
+          }}
+        >
+          <div className="sender-to-recipient__sender-icon">
+            <Identicon
+              address={senderAddress}
+              diameter={24}
+            />
+          </div>
+          <Tooltip
+              position="bottom"
+              title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+              wrapperClassName="sender-to-recipient__tooltip-wrapper"
+              containerClassName="sender-to-recipient__tooltip-container"
+              onHidden={() => this.setState({ senderAddressCopied: false })}
+            >
+            <div className="sender-to-recipient__name sender-to-recipient__sender-name">
+              { senderName }
+            </div>
+          </Tooltip>
+        </div>
+        <div className="sender-to-recipient__arrow-container">
+          <div className="sender-to-recipient__arrow-circle">
+            <img
+              height={15}
+              width={15}
+              src="./images/arrow-right.svg"
+            />
+          </div>
+        </div>
+        {
+          recipientAddress
+            ? this.renderRecipientWithAddress()
+            : this.renderRecipientWithoutAddress()
+        }
+      </div>
+    )
+  }
+}