diff options
Diffstat (limited to 'ui/app/components/sender-to-recipient')
4 files changed, 0 insertions, 340 deletions
diff --git a/ui/app/components/sender-to-recipient/index.js b/ui/app/components/sender-to-recipient/index.js deleted file mode 100644 index f515c4ac4..000000000 --- a/ui/app/components/sender-to-recipient/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sender-to-recipient.component' diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss deleted file mode 100644 index b21e4e1bb..000000000 --- a/ui/app/components/sender-to-recipient/index.scss +++ /dev/null @@ -1,149 +0,0 @@ -.sender-to-recipient { - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - position: relative; - flex: 0 0 auto; - - &--default { - border-bottom: 1px solid $geyser; - height: 42px; - - .sender-to-recipient { - &__tooltip-wrapper { - min-width: 0; - } - - &__tooltip-container { - max-width: 100%; - } - - &__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; - } - - &--recipient { - padding-left: 30px; - border-left: 1px solid $geyser; - - &-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; - } - } - } - - &--cards { - .sender-to-recipient { - &__party { - display: flex; - flex-direction: row; - align-items: center; - justify-content: 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 { - display: flex; - justify-content: center; - align-items: center; - } - } - } - - &--flat { - .sender-to-recipient { - &__party { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - flex: 1; - padding: 6px; - 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: .6875rem; - } - - &__arrow-container { - 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 deleted file mode 100644 index 7d3436dc3..000000000 --- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js +++ /dev/null @@ -1,186 +0,0 @@ -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, FLAT_VARIANT } from './sender-to-recipient.constants' -import { checksumAddress } from '../../util' - -const variantHash = { - [DEFAULT_VARIANT]: 'sender-to-recipient--default', - [CARDS_VARIANT]: 'sender-to-recipient--cards', - [FLAT_VARIANT]: 'sender-to-recipient--flat', -} - -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, FLAT_VARIANT]), - addressOnly: PropTypes.bool, - assetImage: PropTypes.string, - onRecipientClick: PropTypes.func, - onSenderClick: PropTypes.func, - } - - static defaultProps = { - variant: DEFAULT_VARIANT, - } - - static contextTypes = { - t: PropTypes.func, - } - - state = { - senderAddressCopied: false, - recipientAddressCopied: false, - } - - renderSenderIdenticon () { - return !this.props.addressOnly && ( - <div className="sender-to-recipient__sender-icon"> - <Identicon - address={checksumAddress(this.props.senderAddress)} - diameter={24} - /> - </div> - ) - } - - renderSenderAddress () { - const { t } = this.context - const { senderName, senderAddress, addressOnly } = this.props - const checksummedSenderAddress = checksumAddress(senderAddress) - - 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')}: ${checksummedSenderAddress}` : senderName } - </div> - </Tooltip> - ) - } - - renderRecipientIdenticon () { - const { recipientAddress, assetImage } = this.props - const checksummedRecipientAddress = checksumAddress(recipientAddress) - - return !this.props.addressOnly && ( - <div className="sender-to-recipient__sender-icon"> - <Identicon - address={checksummedRecipientAddress} - diameter={24} - image={assetImage} - /> - </div> - ) - } - - renderRecipientWithAddress () { - const { t } = this.context - const { recipientName, recipientAddress, addressOnly, onRecipientClick } = this.props - const checksummedRecipientAddress = checksumAddress(recipientAddress) - - return ( - <div - className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address" - onClick={() => { - this.setState({ recipientAddressCopied: true }) - copyToClipboard(checksummedRecipientAddress) - if (onRecipientClick) { - onRecipientClick() - } - }} - > - { this.renderRecipientIdenticon() } - <Tooltip - position="bottom" - title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')} - wrapperClassName="sender-to-recipient__tooltip-wrapper" - containerClassName="sender-to-recipient__tooltip-container" - onHidden={() => this.setState({ recipientAddressCopied: false })} - > - <div className="sender-to-recipient__name"> - { - addressOnly - ? `${t('to')}: ${checksummedRecipientAddress}` - : (recipientName || this.context.t('newContract')) - } - </div> - </Tooltip> - </div> - ) - } - - renderRecipientWithoutAddress () { - return ( - <div className="sender-to-recipient__party sender-to-recipient__party--recipient"> - { !this.props.addressOnly && <i className="fa fa-file-text-o" /> } - <div className="sender-to-recipient__name"> - { this.context.t('newContract') } - </div> - </div> - ) - } - - renderArrow () { - return this.props.variant === DEFAULT_VARIANT - ? ( - <div className="sender-to-recipient__arrow-container"> - <div className="sender-to-recipient__arrow-circle"> - <img - height={15} - width={15} - src="./images/arrow-right.svg" - /> - </div> - </div> - ) : ( - <div className="sender-to-recipient__arrow-container"> - <img - height={20} - src="./images/caret-right.svg" - /> - </div> - ) - } - - render () { - const { senderAddress, recipientAddress, variant, onSenderClick } = this.props - const checksummedSenderAddress = checksumAddress(senderAddress) - - return ( - <div className={classnames('sender-to-recipient', variantHash[variant])}> - <div - className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')} - onClick={() => { - this.setState({ senderAddressCopied: true }) - copyToClipboard(checksummedSenderAddress) - if (onSenderClick) { - onSenderClick() - } - }} - > - { this.renderSenderIdenticon() } - { this.renderSenderAddress() } - </div> - { this.renderArrow() } - { - recipientAddress - ? this.renderRecipientWithAddress() - : this.renderRecipientWithoutAddress() - } - </div> - ) - } -} 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 deleted file mode 100644 index f53a5115d..000000000 --- a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js +++ /dev/null @@ -1,4 +0,0 @@ -// Component design variants -export const DEFAULT_VARIANT = 'DEFAULT_VARIANT' -export const CARDS_VARIANT = 'CARDS_VARIANT' -export const FLAT_VARIANT = 'FLAT_VARIANT' |