diff options
Diffstat (limited to 'ui/app/components/sender-to-recipient')
3 files changed, 199 insertions, 94 deletions
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss index a97393b8f..656e30ddf 100644 --- 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; + + &-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; + } + } } } 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 index cae173b56..445a11d8a 100644 --- 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,30 @@ -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, + assetImage: PropTypes.string, + } + + static defaultProps = { + variant: DEFAULT_VARIANT, } static contextTypes = { @@ -22,24 +36,63 @@ 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, assetImage } = this.props + + return !this.props.addressOnly && ( + <div className="sender-to-recipient__sender-icon"> + <Identicon + address={recipientAddress} + diameter={24} + image={assetImage} + /> + </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 +100,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 +114,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 +142,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() diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js new file mode 100644 index 000000000..166228932 --- /dev/null +++ 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' |