Merge pull request #5111 from MetaMask/sender-to-recipient2

Add new variant for SenderToRecipient component

app/_locales/cs/messages.json

@@ -796,7 +796,7 @@
     "message": "Testovací faucet"
   },
   "to": {
-    "message": "Komu: "
+    "message": "Komu"
   },
   "toETHviaShapeShift": {
     "message": "$1 na ETH přes ShapeShift",

app/_locales/de/messages.json

@@ -775,7 +775,7 @@
     "message": "Testfaucet"
   },
   "to": {
-    "message": "An:"
+    "message": "An"
   },
   "toETHviaShapeShift": {
     "message": "$1 an ETH via ShapeShift",

app/_locales/en/messages.json

@@ -1025,7 +1025,7 @@
     "message": "Test Faucet"
   },
   "to": {
-    "message": "To: "
+    "message": "To"
   },
   "toETHviaShapeShift": {
     "message": "$1 to ETH via ShapeShift",

app/_locales/es/messages.json

@@ -772,7 +772,7 @@
     "message": "Probar Faucet"
   },
   "to": {
-    "message": "Para:"
+    "message": "Para"
   },
   "toETHviaShapeShift": {
     "message": "$1 a ETH via ShapeShift",

app/_locales/ru/messages.json

@@ -784,7 +784,7 @@
     "message": "Тестовый кран"
   },
   "to": {
-    "message": "Получатель: "
+    "message": "Получатель"
   },
   "toETHviaShapeShift": {
     "message": "$1 в ETH через ShapeShift",

app/_locales/tml/messages.json

@@ -796,7 +796,7 @@
     "message": "சோதனை குழாய்"
   },
   "to": {
-    "message": "பெறுநர்: "
+    "message": "பெறுநர்"
   },
   "toETHviaShapeShift": {
     "message": "$ 1 முதல் ETH வரை வடிவம்",

app/_locales/tr/messages.json

@@ -796,7 +796,7 @@
       "message": "Test Musluğu"
     },
     "to": {
-      "message": "Kime: "
+      "message": "Kime"
     },
     "toETHviaShapeShift": {
       "message": "ShapeShift üstünden $1'dan ETH'e",

test/integration/lib/send-new-ui.js

@@ -124,10 +124,10 @@ async function runSendFlowTest (assert, done) {
   selectState.val('send edit')
   reactTriggerChange(selectState[0])
 
-  const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first()
+  const confirmFromName = (await queryAsync($, '.sender-to-recipient__name')).first()
   assert.equal(confirmFromName[0].textContent, 'Send Account 4', 'confirm screen should show correct from name')
 
-  const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last()
+  const confirmToName = (await queryAsync($, '.sender-to-recipient__name')).last()
   assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
 
   const confirmScreenRowFiats = await queryAsync($, '.confirm-detail-row__fiat')

ui/app/components/send/send-content/send-to-row/send-to-row.component.js

@@ -48,7 +48,7 @@ export default class SendToRow extends Component {
     return (
       <SendRowWrapper
         errorType={'to'}
-        label={`${this.context.t('to')}`}
+        label={`${this.context.t('to')}: `}
         showError={inError}
       >
         <EnsInput

ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js

@@ -102,7 +102,7 @@ describe('SendToRow Component', function () {
 
       assert.equal(errorType, 'to')
 
-      assert.equal(label, 'to_t')
+      assert.equal(label, 'to_t: ')
 
       assert.equal(showError, false)
     })

ui/app/components/sender-to-recipient/index.scss

@@ -1,5 +1,5 @@
 .sender-to-recipient {
-  &__container {
+  &--default {
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -8,67 +8,114 @@
     position: relative;
     flex: 0 0 auto;
     height: 42px;
-  }
 
-  &__tooltip-wrapper {
-    min-width: 0;
-  }
+    .sender-to-recipient {
+      &__tooltip-wrapper {
+        min-width: 0;
+      }
 
-  &__tooltip-container {
-    max-width: 100%;
-  }
+      &__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;
-  }
+      &__party {
+        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;
-  }
+        &--sender {
+          padding-right: 30px;
+          cursor: pointer;
+        }
+
+        &--recipient {
+          padding-left: 30px;
+          border-left: 1px solid $geyser;
+
+          &-with-address {
+            cursor: pointer;
+          }
+        }
+      }
 
-  &__recipient {
-    padding-left: 30px;
-    border-left: 1px solid $geyser;
+      &__arrow-container {
+        position: absolute;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-    &--with-address {
-      cursor: pointer;
+      &__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;
+      }
     }
   }
 
-  &__arrow-container {
-    position: absolute;
-    height: 100%;
+  &--cards {
+    width: 100%;
     display: flex;
-    align-items: center;
+    flex-direction: row;
     justify-content: center;
-  }
+    position: relative;
+    flex: 0 0 auto;
+    padding: 8px;
 
-  &__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;
-  }
+    .sender-to-recipient {
+      &__party {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex: 1;
+        border-radius: 4px;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+        padding: 6px;
+        background: $white;
+        cursor: pointer;
+        min-width: 0;
+        color: $dusty-gray;
+      }
+
+      &__tooltip-wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-  &__name {
-    padding-left: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: .875rem;
+      &__name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: .5rem;
+      }
+
+      &__arrow-container {
+        padding: 0 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
   }
 }

ui/app/components/sender-to-recipient/sender-to-recipient.component.js

@@ -1,16 +1,29 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Identicon from '../identicon'
 import Tooltip from '../tooltip-v2'
 import copyToClipboard from 'copy-to-clipboard'
+import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
 
-export default class SenderToRecipient extends Component {
+const variantHash = {
+  [DEFAULT_VARIANT]: 'sender-to-recipient--default',
+  [CARDS_VARIANT]: 'sender-to-recipient--cards',
+}
+
+export default class SenderToRecipient extends PureComponent {
   static propTypes = {
     senderName: PropTypes.string,
     senderAddress: PropTypes.string,
     recipientName: PropTypes.string,
     recipientAddress: PropTypes.string,
     t: PropTypes.func,
+    variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT]),
+    addressOnly: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    variant: DEFAULT_VARIANT,
   }
 
   static contextTypes = {
@@ -22,24 +35,62 @@ export default class SenderToRecipient extends Component {
     recipientAddressCopied: false,
   }
 
+  renderSenderIdenticon () {
+    return !this.props.addressOnly && (
+      <div className="sender-to-recipient__sender-icon">
+        <Identicon
+          address={this.props.senderAddress}
+          diameter={24}
+        />
+      </div>
+    )
+  }
+
+  renderSenderAddress () {
+    const { t } = this.context
+    const { senderName, senderAddress, addressOnly } = this.props
+
+    return (
+      <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">
+        { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+      </div>
+    </Tooltip>
+    )
+  }
+
+  renderRecipientIdenticon () {
+    const { recipientAddress } = this.props
+
+    return !this.props.addressOnly && (
+      <div className="sender-to-recipient__sender-icon">
+        <Identicon
+          address={recipientAddress}
+          diameter={24}
+        />
+      </div>
+    )
+  }
+
   renderRecipientWithAddress () {
     const { t } = this.context
-    const { recipientName, recipientAddress } = this.props
+    const { recipientName, recipientAddress, addressOnly } = this.props
 
     return (
       <div
-        className="sender-to-recipient__recipient sender-to-recipient__recipient--with-address"
+        className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
           this.setState({ recipientAddressCopied: true })
           copyToClipboard(recipientAddress)
         }}
       >
-        <div className="sender-to-recipient__sender-icon">
-          <Identicon
-            address={recipientAddress}
-            diameter={24}
-          />
-        </div>
+        { this.renderRecipientIdenticon() }
         <Tooltip
           position="bottom"
           title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
@@ -47,8 +98,12 @@ export default class SenderToRecipient extends Component {
           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 className="sender-to-recipient__name">
+            {
+              addressOnly
+                ? `${t('to')}: ${recipientAddress}`
+                : (recipientName || this.context.t('newContract'))
+            }
           </div>
         </Tooltip>
       </div>
@@ -57,46 +112,25 @@ export default class SenderToRecipient extends Component {
 
   renderRecipientWithoutAddress () {
     return (
-      <div className="sender-to-recipient__recipient">
+      <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
         <i className="fa fa-file-text-o" />
-        <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+        <div className="sender-to-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>
+  renderArrow () {
+    return this.props.variant === CARDS_VARIANT
+      ? (
+        <div className="sender-to-recipient__arrow-container">
+          <img
+            height={20}
+            src="./images/caret-right.svg"
+          />
         </div>
+      ) : (
         <div className="sender-to-recipient__arrow-container">
           <div className="sender-to-recipient__arrow-circle">
             <img
@@ -106,6 +140,25 @@ export default class SenderToRecipient extends Component {
             />
           </div>
         </div>
+      )
+  }
+
+  render () {
+    const { senderAddress, recipientAddress, variant } = this.props
+
+    return (
+      <div className={classnames(variantHash[variant])}>
+        <div
+          className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
+          onClick={() => {
+            this.setState({ senderAddressCopied: true })
+            copyToClipboard(senderAddress)
+          }}
+        >
+          { this.renderSenderIdenticon() }
+          { this.renderSenderAddress() }
+        </div>
+        { this.renderArrow() }
         {
           recipientAddress
             ? this.renderRecipientWithAddress()

ui/app/components/sender-to-recipient/sender-to-recipient.constants.js

@@ -0,0 +1,3 @@
+// Component design variants
+export const DEFAULT_VARIANT = 'DEFAULT_VARIANT'
+export const CARDS_VARIANT = 'CARDS_VARIANT'