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

Add new variant for SenderToRecipient component
2018-08-22 11:57:19 -07:00 · 2018-08-22 11:57:19 -07:00 · 21a6fdc174
parent babd59a2dc 7294aede4f
commit 21a6fdc174
13 changed files with 210 additions and 107 deletions
--- a/app/_locales/cs/messages.json
+++ b/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",
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -384,7 +384,7 @@
  "infoHelp": {
    "message": "Info & Hilfe"
  },
-  "insufficientFunds": { 
+  "insufficientFunds": {
    "message": "Nicht genügend Guthaben."
  },
  "insufficientTokens": {
@ -572,7 +572,7 @@
    "description": "Wähle diesen Dateityp um damit einen Account zu importieren"
  },
  "privateKeyWarning": {
-    "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."  
+    "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."
  },
  "privateNetwork": {
    "message": "Privates Netzwerk"
@ -775,7 +775,7 @@
    "message": "Testfaucet"
  },
  "to": {
-    "message": "An:"
+    "message": "An"
  },
  "toETHviaShapeShift": {
    "message": "$1 an ETH via ShapeShift",
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -1025,7 +1025,7 @@
    "message": "Test Faucet"
  },
  "to": {
-    "message": "To: "
+    "message": "To"
  },
  "toETHviaShapeShift": {
    "message": "$1 to ETH via ShapeShift",
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -772,7 +772,7 @@
    "message": "Probar Faucet"
  },
  "to": {
-    "message": "Para:"
+    "message": "Para"
  },
  "toETHviaShapeShift": {
    "message": "$1 a ETH via ShapeShift",
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -784,7 +784,7 @@
    "message": "Тестовый кран"
  },
  "to": {
-    "message": "Получатель: "
+    "message": "Получатель"
  },
  "toETHviaShapeShift": {
    "message": "$1 в ETH через ShapeShift",
--- a/app/_locales/tml/messages.json
+++ b/app/_locales/tml/messages.json
@ -796,7 +796,7 @@
    "message": "சோதனை குழாய்"
  },
  "to": {
-    "message": "பெறுநர்: "
+    "message": "பெறுநர்"
  },
  "toETHviaShapeShift": {
    "message": "$ 1 முதல் ETH வரை வடிவம்",
--- a/app/_locales/tr/messages.json
+++ b/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",
--- a/test/integration/lib/send-new-ui.js
+++ b/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')
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/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
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
+++ b/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)
    })
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/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;
+        &--recipient {
+          padding-left: 30px;
+          border-left: 1px solid $geyser;

-    &--with-address {
-      cursor: pointer;
+          &-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;
+      }
    }
  }

-  &__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;
+      }

-  &__name {
-    padding-left: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: .875rem;
+      &__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;
+      }
+    }
  }
 }
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/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()
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
+++ b/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'