diff options
Diffstat (limited to 'ui/app/components/transaction-list-item-details')
4 files changed, 0 insertions, 326 deletions
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/transaction-list-item-details/index.js deleted file mode 100644 index 0e878d032..000000000 --- a/ui/app/components/transaction-list-item-details/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './transaction-list-item-details.component' diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss deleted file mode 100644 index 7cb253e4e..000000000 --- a/ui/app/components/transaction-list-item-details/index.scss +++ /dev/null @@ -1,63 +0,0 @@ -.transaction-list-item-details { - &__header { - margin: 8px 16px; - display: flex; - justify-content: space-between; - align-items: center; - } - - &__body { - background: #fafbfc; - padding: 8px 16px; - } - - &__header-buttons { - display: flex; - flex-direction: row; - } - - &__header-button { - font-size: .625rem; - - &:not(:last-child) { - margin-right: 8px; - } - - &__copy-icon { - width: 10px; - height: 10px; - } - } - - &__sender-to-recipient-container { - margin-bottom: 8px; - } - - &__cards-container { - display: flex; - flex-direction: row; - - @media screen and (max-width: $break-small) { - flex-direction: column; - } - } - - &__transaction-breakdown { - flex: 1; - margin-right: 8px; - min-width: 0; - - @media screen and (max-width: $break-small) { - margin: 0 0 8px 0; - } - } - - &__transaction-activity-log { - flex: 2; - min-width: 0; - - @media screen and (min-width: $break-large) { - padding-left: 12px; - } - } -} diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js deleted file mode 100644 index 5b55beeb4..000000000 --- a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import TransactionListItemDetails from '../transaction-list-item-details.component' -import Button from '../../button' -import SenderToRecipient from '../../sender-to-recipient' -import TransactionBreakdown from '../../transaction-breakdown' -import TransactionActivityLog from '../../transaction-activity-log' - -describe('TransactionListItemDetails Component', () => { - it('should render properly', () => { - const transaction = { - history: [], - id: 1, - status: 'confirmed', - txParams: { - from: '0x1', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0xa4', - to: '0x2', - value: '0x2386f26fc10000', - }, - } - - const transactionGroup = { - transactions: [transaction], - primaryTransaction: transaction, - initialTransaction: transaction, - } - - const wrapper = shallow( - <TransactionListItemDetails - transactionGroup={transactionGroup} - />, - { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } - ) - - assert.ok(wrapper.hasClass('transaction-list-item-details')) - assert.equal(wrapper.find(Button).length, 2) - assert.equal(wrapper.find(SenderToRecipient).length, 1) - assert.equal(wrapper.find(TransactionBreakdown).length, 1) - assert.equal(wrapper.find(TransactionActivityLog).length, 1) - }) - - it('should render a retry button', () => { - const transaction = { - history: [], - id: 1, - status: 'confirmed', - txParams: { - from: '0x1', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0xa4', - to: '0x2', - value: '0x2386f26fc10000', - }, - } - - const transactionGroup = { - transactions: [transaction], - primaryTransaction: transaction, - initialTransaction: transaction, - nonce: '0xa4', - hasRetried: false, - hasCancelled: false, - } - - const wrapper = shallow( - <TransactionListItemDetails - transactionGroup={transactionGroup} - showRetry={true} - />, - { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } - ) - - assert.ok(wrapper.hasClass('transaction-list-item-details')) - assert.equal(wrapper.find(Button).length, 3) - }) -}) diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js deleted file mode 100644 index 3e39212d3..000000000 --- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js +++ /dev/null @@ -1,181 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import copyToClipboard from 'copy-to-clipboard' -import SenderToRecipient from '../sender-to-recipient' -import { FLAT_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants' -import TransactionActivityLog from '../transaction-activity-log' -import TransactionBreakdown from '../transaction-breakdown' -import Button from '../button' -import Tooltip from '../tooltip' -import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' - -export default class TransactionListItemDetails extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - onCancel: PropTypes.func, - onRetry: PropTypes.func, - showCancel: PropTypes.bool, - showRetry: PropTypes.bool, - transactionGroup: PropTypes.object, - } - - state = { - justCopied: false, - } - - handleEtherscanClick = () => { - const { transactionGroup: { primaryTransaction } } = this.props - const { hash, metamaskNetworkId } = primaryTransaction - - const prefix = prefixForNetwork(metamaskNetworkId) - const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` - - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Clicked "View on Etherscan"', - }, - }) - - global.platform.openWindow({ url: etherscanUrl }) - } - - handleCancel = event => { - const { transactionGroup: { initialTransaction: { id } = {} } = {}, onCancel } = this.props - - event.stopPropagation() - onCancel(id) - } - - handleRetry = event => { - const { transactionGroup: { initialTransaction: { id } = {} } = {}, onRetry } = this.props - - event.stopPropagation() - onRetry(id) - } - - handleCopyTxId = () => { - const { transactionGroup} = this.props - const { primaryTransaction: transaction } = transactionGroup - const { hash } = transaction - - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Copied Transaction ID', - }, - }) - - this.setState({ justCopied: true }, () => { - copyToClipboard(hash) - setTimeout(() => this.setState({ justCopied: false }), 1000) - }) - } - - render () { - const { t } = this.context - const { justCopied } = this.state - const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props - const { primaryTransaction: transaction } = transactionGroup - const { txParams: { to, from } = {} } = transaction - - return ( - <div className="transaction-list-item-details"> - <div className="transaction-list-item-details__header"> - <div>{ t('details') }</div> - <div className="transaction-list-item-details__header-buttons"> - { - showRetry && ( - <Button - type="raised" - onClick={this.handleRetry} - className="transaction-list-item-details__header-button" - > - { t('speedUp') } - </Button> - ) - } - { - showCancel && ( - <Button - type="raised" - onClick={this.handleCancel} - className="transaction-list-item-details__header-button" - > - { t('cancel') } - </Button> - ) - } - <Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}> - <Button - type="raised" - onClick={this.handleCopyTxId} - className="transaction-list-item-details__header-button" - > - <img - className="transaction-list-item-details__header-button__copy-icon" - src="/images/copy-to-clipboard.svg" - /> - </Button> - </Tooltip> - <Tooltip title={t('viewOnEtherscan')}> - <Button - type="raised" - onClick={this.handleEtherscanClick} - className="transaction-list-item-details__header-button" - > - <img src="/images/arrow-popout.svg" /> - </Button> - </Tooltip> - </div> - </div> - <div className="transaction-list-item-details__body"> - <div className="transaction-list-item-details__sender-to-recipient-container"> - <SenderToRecipient - variant={FLAT_VARIANT} - addressOnly - recipientAddress={to} - senderAddress={from} - onRecipientClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Copied "To" Address', - }, - }) - }} - onSenderClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Copied "From" Address', - }, - }) - }} - /> - </div> - <div className="transaction-list-item-details__cards-container"> - <TransactionBreakdown - transaction={transaction} - className="transaction-list-item-details__transaction-breakdown" - /> - <TransactionActivityLog - transactionGroup={transactionGroup} - className="transaction-list-item-details__transaction-activity-log" - onCancel={onCancel} - onRetry={onRetry} - /> - </div> - </div> - </div> - ) - } -} |