aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/sender-to-recipient
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/sender-to-recipient')
-rw-r--r--ui/app/components/sender-to-recipient/index.scss147
-rw-r--r--ui/app/components/sender-to-recipient/sender-to-recipient.component.js143
-rw-r--r--ui/app/components/sender-to-recipient/sender-to-recipient.constants.js3
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'