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,8 +8,8 @@
     position: relative;
     flex: 0 0 auto;
     height: 42px;
-  }
 
+    .sender-to-recipient {
       &__tooltip-wrapper {
         min-width: 0;
       }
@@ -18,8 +18,7 @@
         max-width: 100%;
       }
 
-  &__sender,
+      &__party {
-  &__recipient {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -28,21 +27,21 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-  }
 
-  &__sender {
+        &--sender {
           padding-right: 30px;
           cursor: pointer;
         }
 
-  &__recipient {
+        &--recipient {
           padding-left: 30px;
           border-left: 1px solid $geyser;
 
-    &--with-address {
+          &-with-address {
             cursor: pointer;
           }
         }
+      }
 
       &__arrow-container {
         position: absolute;
@@ -71,4 +70,52 @@
         white-space: nowrap;
         font-size: .875rem;
       }
+    }
+  }
+
+  &--cards {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: relative;
+    flex: 0 0 auto;
+    padding: 8px;
+
+    .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 {
+        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,81 +35,102 @@ export default class SenderToRecipient extends Component {
     recipientAddressCopied: false,
   }
 
-  renderRecipientWithAddress () {
+  renderSenderIdenticon () {
-    const { t } = this.context
+    return !this.props.addressOnly && (
-    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}
+          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.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+        title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
         wrapperClassName="sender-to-recipient__tooltip-wrapper"
         containerClassName="sender-to-recipient__tooltip-container"
-          onHidden={() => this.setState({ recipientAddressCopied: false })}
+        onHidden={() => this.setState({ senderAddressCopied: false })}
       >
-          <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+      <div className="sender-to-recipient__name">
-            { recipientName || this.context.t('newContract') }
+        { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
       </div>
     </Tooltip>
-      </div>
     )
   }
 
-  renderRecipientWithoutAddress () {
+  renderRecipientIdenticon () {
-    return (
+    const { recipientAddress } = this.props
-      <div className="sender-to-recipient__recipient">
+
-        <i className="fa fa-file-text-o" />
+    return !this.props.addressOnly && (
-        <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+      <div className="sender-to-recipient__sender-icon">
-          { this.context.t('newContract') }
+        <Identicon
-        </div>
+          address={recipientAddress}
+          diameter={24}
+        />
       </div>
     )
   }
 
-  render () {
+  renderRecipientWithAddress () {
     const { t } = this.context
-    const { senderName, senderAddress, recipientAddress } = this.props
+    const { recipientName, recipientAddress, addressOnly } = this.props
 
     return (
-      <div className="sender-to-recipient__container">
       <div
-          className="sender-to-recipient__sender"
+        className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
-            this.setState({ senderAddressCopied: true })
+          this.setState({ recipientAddressCopied: true })
-            copyToClipboard(senderAddress)
+          copyToClipboard(recipientAddress)
         }}
       >
-          <div className="sender-to-recipient__sender-icon">
+        { this.renderRecipientIdenticon() }
-            <Identicon
-              address={senderAddress}
-              diameter={24}
-            />
-          </div>
         <Tooltip
           position="bottom"
-              title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+          title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
           wrapperClassName="sender-to-recipient__tooltip-wrapper"
           containerClassName="sender-to-recipient__tooltip-container"
-              onHidden={() => this.setState({ senderAddressCopied: false })}
+          onHidden={() => this.setState({ recipientAddressCopied: false })}
         >
-            <div className="sender-to-recipient__name sender-to-recipient__sender-name">
+          <div className="sender-to-recipient__name">
-              { senderName }
+            {
+              addressOnly
+                ? `${t('to')}: ${recipientAddress}`
+                : (recipientName || this.context.t('newContract'))
+            }
           </div>
         </Tooltip>
       </div>
+    )
+  }
+
+  renderRecipientWithoutAddress () {
+    return (
+      <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
+        <i className="fa fa-file-text-o" />
+        <div className="sender-to-recipient__name">
+          { this.context.t('newContract') }
+        </div>
+      </div>
+    )
+  }
+
+  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'