diff options
Diffstat (limited to 'ui/app/components/transaction-activity-log')
11 files changed, 0 insertions, 1017 deletions
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/transaction-activity-log/index.js deleted file mode 100644 index a33da15a3..000000000 --- a/ui/app/components/transaction-activity-log/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './transaction-activity-log.container' diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss deleted file mode 100644 index 00c17e6aa..000000000 --- a/ui/app/components/transaction-activity-log/index.scss +++ /dev/null @@ -1,84 +0,0 @@ -.transaction-activity-log { - &__title { - border-bottom: 1px solid #d8d8d8; - padding-bottom: 4px; - text-transform: capitalize; - } - - &__activities-container { - padding-top: 8px; - } - - &__activity { - padding: 4px 0; - display: flex; - flex-direction: row; - align-items: center; - position: relative; - - &::after { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 7px; - border-right: 1px solid #909090; - } - - &:first-child::after { - height: 50%; - top: 50%; - } - - &:last-child::after { - height: 50%; - } - - &:first-child:last-child::after { - display: none; - } - } - - &__activity-icon { - width: 15px; - height: 15px; - margin-right: 6px; - border-radius: 50%; - background: #909090; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; - } - - &__activity-text { - color: $dusty-gray; - font-size: .75rem; - cursor: pointer; - - &:hover { - color: $black; - } - } - - &__value { - display: inline; - font-weight: 500; - } - - &__entry-container { - min-width: 0; - } - - &__action-link { - font-size: .75rem; - cursor: pointer; - color: $curious-blue; - } - - b { - font-weight: 500; - } -} diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js deleted file mode 100644 index a2946e53d..000000000 --- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import TransactionActivityLog from '../transaction-activity-log.component' - -describe('TransactionActivityLog Component', () => { - it('should render properly', () => { - const activities = [ - { - eventKey: 'transactionCreated', - hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', - id: 2005383477493174, - timestamp: 1543957986150, - value: '0x2386f26fc10000', - }, { - eventKey: 'transactionSubmitted', - hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', - id: 2005383477493174, - timestamp: 1543957987853, - value: '0x1319718a5000', - }, { - eventKey: 'transactionResubmitted', - hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', - id: 2005383477493175, - timestamp: 1543957991563, - value: '0x1502634b5800', - }, { - eventKey: 'transactionConfirmed', - hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', - id: 2005383477493175, - timestamp: 1543958029960, - value: '0x1502634b5800', - }, - ] - - const wrapper = shallow( - <TransactionActivityLog - activities={activities} - className="test-class" - inlineRetryIndex={-1} - inlineCancelIndex={-1} - nativeCurrency="ETH" - onCancel={() => {}} - onRetry={() => {}} - primaryTransactionStatus="confirmed" - />, - { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } - ) - - assert.ok(wrapper.hasClass('transaction-activity-log')) - assert.ok(wrapper.hasClass('test-class')) - }) - - it('should render inline retry and cancel buttons', () => { - const activities = [ - { - eventKey: 'transactionCreated', - hash: '0xa', - id: 1, - timestamp: 1, - value: '0x1', - }, { - eventKey: 'transactionSubmitted', - hash: '0xa', - id: 1, - timestamp: 2, - value: '0x1', - }, { - eventKey: 'transactionResubmitted', - hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', - id: 2, - timestamp: 3, - value: '0x1', - }, { - eventKey: 'transactionCancelAttempted', - hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', - id: 3, - timestamp: 4, - value: '0x1', - }, - ] - - const wrapper = shallow( - <TransactionActivityLog - activities={activities} - className="test-class" - inlineRetryIndex={2} - inlineCancelIndex={3} - nativeCurrency="ETH" - onCancel={() => {}} - onRetry={() => {}} - primaryTransactionStatus="pending" - />, - { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } - ) - - assert.ok(wrapper.hasClass('transaction-activity-log')) - assert.ok(wrapper.hasClass('test-class')) - assert.equal(wrapper.find('.transaction-activity-log__action-link').length, 2) - }) -}) diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js deleted file mode 100644 index a7c35f51e..000000000 --- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js +++ /dev/null @@ -1,28 +0,0 @@ -import assert from 'assert' -import proxyquire from 'proxyquire' - -let mapStateToProps - -proxyquire('../transaction-activity-log.container.js', { - 'react-redux': { - connect: ms => { - mapStateToProps = ms - return () => ({}) - }, - }, -}) - -describe('TransactionActivityLog container', () => { - describe('mapStateToProps()', () => { - it('should return the correct props', () => { - const mockState = { - metamask: { - conversionRate: 280.45, - nativeCurrency: 'ETH', - }, - } - - assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45, nativeCurrency: 'ETH' }) - }) - }) -}) diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js deleted file mode 100644 index d014b8886..000000000 --- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js +++ /dev/null @@ -1,335 +0,0 @@ -import assert from 'assert' -import { combineTransactionHistories, getActivities } from '../transaction-activity-log.util' - -describe('combineTransactionHistories', () => { - it('should return no activites for an empty list of transactions', () => { - assert.deepEqual(combineTransactionHistories([]), []) - }) - - it('should return activities for an array of transactions', () => { - const transactions = [ - { - estimatedGas: '0x5208', - hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3', - history: [ - { - 'id': 6400627574331058, - 'time': 1543958845581, - 'status': 'unapproved', - 'metamaskNetworkId': '3', - 'loadingDefaults': true, - 'txParams': { - 'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706', - 'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', - 'value': '0x2386f26fc10000', - 'gas': '0x5208', - 'gasPrice': '0x3b9aca00', - }, - 'type': 'standard', - }, - [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958847813 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958848147 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'dropped', 'note': 'txStateManager: setting status to dropped', 'timestamp': 1543958897181 }, { 'op': 'add', 'path': '/replacedBy', 'value': '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33' }], - ], - id: 6400627574331058, - loadingDefaults: false, - metamaskNetworkId: '3', - status: 'dropped', - submittedTime: 1543958848135, - time: 1543958845581, - txParams: { - from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0x32', - to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', - value: '0x2386f26fc10000', - }, - type: 'standard', - }, { - hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33', - history: [ - { - 'id': 6400627574331060, - 'time': 1543958857697, - 'status': 'unapproved', - 'metamaskNetworkId': '3', - 'loadingDefaults': false, - 'txParams': { - 'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706', - 'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', - 'value': '0x2386f26fc10000', - 'gas': '0x5208', - 'gasPrice': '0x3b9aca00', - 'nonce': '0x32', - }, - 'lastGasPrice': '0x4190ab00', - 'type': 'retry', - }, - [{ 'op': 'replace', 'path': '/txParams/gasPrice', 'value': '0x481f2280', 'note': 'confTx: user approved transaction', 'timestamp': 1543958859470 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958859485 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'signed', 'note': 'transactions#publishTransaction', 'timestamp': 1543958859889 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958860061 }], [{ 'op': 'add', 'path': '/firstRetryBlockNumber', 'value': '0x45a0fd', 'note': 'transactions/pending-tx-tracker#event: tx:block-update', 'timestamp': 1543958896466 }], - [{ 'op': 'replace', 'path': '/status', 'value': 'confirmed', 'timestamp': 1543958897165 }], - ], - id: 6400627574331060, - lastGasPrice: '0x4190ab00', - loadingDefaults: false, - metamaskNetworkId: '3', - status: 'confirmed', - submittedTime: 1543958860054, - time: 1543958857697, - txParams: { - from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706', - gas: '0x5208', - gasPrice: '0x481f2280', - nonce: '0x32', - to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', - value: '0x2386f26fc10000', - }, - txReceipt: { - status: '0x1', - }, - type: 'retry', - }, - ] - - const expected = [ - { - id: 6400627574331058, - hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3', - eventKey: 'transactionCreated', - timestamp: 1543958845581, - value: '0x2386f26fc10000', - }, { - id: 6400627574331058, - hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3', - eventKey: 'transactionSubmitted', - timestamp: 1543958848147, - value: '0x1319718a5000', - }, { - id: 6400627574331060, - hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33', - eventKey: 'transactionResubmitted', - timestamp: 1543958860061, - value: '0x171c3a061400', - }, { - id: 6400627574331060, - hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33', - eventKey: 'transactionConfirmed', - timestamp: 1543958897165, - value: '0x171c3a061400', - }, - ] - - assert.deepEqual(combineTransactionHistories(transactions), expected) - }) -}) - -describe('getActivities', () => { - it('should return no activities for an empty history', () => { - const transaction = { - history: [], - id: 1, - status: 'confirmed', - txParams: { - from: '0x1', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0xa4', - to: '0x2', - value: '0x2386f26fc10000', - }, - } - - assert.deepEqual(getActivities(transaction), []) - }) - - it('should return activities for a transaction\'s history', () => { - const transaction = { - history: [ - { - id: 5559712943815343, - loadingDefaults: true, - metamaskNetworkId: '3', - status: 'unapproved', - time: 1535507561452, - txParams: { - from: '0x1', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0xa4', - to: '0x2', - value: '0x2386f26fc10000', - }, - }, - [ - { - op: 'replace', - path: '/loadingDefaults', - timestamp: 1535507561515, - value: false, - }, - { - op: 'add', - path: '/gasPriceSpecified', - value: true, - }, - { - op: 'add', - path: '/gasLimitSpecified', - value: true, - }, - { - op: 'add', - path: '/estimatedGas', - value: '0x5208', - }, - ], - [ - { - note: '#newUnapprovedTransaction - adding the origin', - op: 'add', - path: '/origin', - timestamp: 1535507561516, - value: 'MetaMask', - }, - [], - ], - [ - { - note: 'confTx: user approved transaction', - op: 'replace', - path: '/txParams/gasPrice', - timestamp: 1535664571504, - value: '0x77359400', - }, - ], - [ - { - note: 'txStateManager: setting status to approved', - op: 'replace', - path: '/status', - timestamp: 1535507564302, - value: 'approved', - }, - ], - [ - { - note: 'transactions#approveTransaction', - op: 'add', - path: '/txParams/nonce', - timestamp: 1535507564439, - value: '0xa4', - }, - { - op: 'add', - path: '/nonceDetails', - value: { - local: {}, - network: {}, - params: {}, - }, - }, - ], - [ - { - note: 'transactions#publishTransaction', - op: 'replace', - path: '/status', - timestamp: 1535507564518, - value: 'signed', - }, - { - op: 'add', - path: '/rawTx', - value: '0xf86b81a4843b9aca008252089450a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706872386f26fc10000802aa007b30119fc4fc5954fad727895b7e3ba80a78d197e95703cc603bcf017879151a01c50beda40ffaee541da9c05b9616247074f25f392800e0ad6c7a835d5366edf', - }, - ], - [], - [ - { - note: 'transactions#setTxHash', - op: 'add', - path: '/hash', - timestamp: 1535507564658, - value: '0x7acc4987b5c0dfa8d423798a8c561138259de1f98a62e3d52e7e83c0e0dd9fb7', - }, - ], - [ - { - note: 'txStateManager - add submitted time stamp', - op: 'add', - path: '/submittedTime', - timestamp: 1535507564660, - value: 1535507564660, - }, - ], - [ - { - note: 'txStateManager: setting status to submitted', - op: 'replace', - path: '/status', - timestamp: 1535507564665, - value: 'submitted', - }, - ], - [ - { - note: 'transactions/pending-tx-tracker#event: tx:block-update', - op: 'add', - path: '/firstRetryBlockNumber', - timestamp: 1535507575476, - value: '0x3bf624', - }, - ], - [ - { - note: 'txStateManager: setting status to confirmed', - op: 'replace', - path: '/status', - timestamp: 1535507615993, - value: 'confirmed', - }, - ], - ], - id: 1, - status: 'confirmed', - txParams: { - from: '0x1', - gas: '0x5208', - gasPrice: '0x3b9aca00', - nonce: '0xa4', - to: '0x2', - value: '0x2386f26fc10000', - }, - hash: '0xabc', - } - - const expectedResult = [ - { - 'eventKey': 'transactionCreated', - 'timestamp': 1535507561452, - 'value': '0x2386f26fc10000', - 'id': 1, - 'hash': '0xabc', - }, - { - 'eventKey': 'transactionSubmitted', - 'timestamp': 1535507564665, - 'value': '0x2632e314a000', - 'id': 1, - 'hash': '0xabc', - }, - { - 'eventKey': 'transactionConfirmed', - 'timestamp': 1535507615993, - 'value': '0x2632e314a000', - 'id': 1, - 'hash': '0xabc', - }, - ] - - assert.deepEqual(getActivities(transaction, true), expectedResult) - }) -}) diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js deleted file mode 100644 index 86b12360a..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './transaction-activity-log-icon.component' diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js deleted file mode 100644 index 871716002..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' - -import { - TRANSACTION_CREATED_EVENT, - TRANSACTION_SUBMITTED_EVENT, - TRANSACTION_RESUBMITTED_EVENT, - TRANSACTION_CONFIRMED_EVENT, - TRANSACTION_DROPPED_EVENT, - TRANSACTION_ERRORED_EVENT, - TRANSACTION_CANCEL_ATTEMPTED_EVENT, - TRANSACTION_CANCEL_SUCCESS_EVENT, -} from '../transaction-activity-log.constants' - -const imageHash = { - [TRANSACTION_CREATED_EVENT]: '/images/icons/new.svg', - [TRANSACTION_SUBMITTED_EVENT]: '/images/icons/submitted.svg', - [TRANSACTION_RESUBMITTED_EVENT]: '/images/icons/retry.svg', - [TRANSACTION_CONFIRMED_EVENT]: '/images/icons/confirm.svg', - [TRANSACTION_DROPPED_EVENT]: '/images/icons/cancelled.svg', - [TRANSACTION_ERRORED_EVENT]: '/images/icons/error.svg', - [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: '/images/icons/cancelled.svg', - [TRANSACTION_CANCEL_SUCCESS_EVENT]: '/images/icons/cancelled.svg', -} - -export default class TransactionActivityLogIcon extends PureComponent { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - className: PropTypes.string, - eventKey: PropTypes.oneOf(Object.keys(imageHash)), - } - - render () { - const { className, eventKey } = this.props - const imagePath = imageHash[eventKey] - - return ( - <div className={classnames('transaction-activity-log-icon', className)}> - { - imagePath && ( - <img - src={imagePath} - height={9} - width={9} - /> - ) - } - </div> - ) - } -} diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js deleted file mode 100644 index ca46d7830..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js +++ /dev/null @@ -1,131 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util' -import { formatDate } from '../../util' -import TransactionActivityLogIcon from './transaction-activity-log-icon' -import { CONFIRMED_STATUS } from './transaction-activity-log.constants' -import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' - -export default class TransactionActivityLog extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricEvent: PropTypes.func, - } - - static propTypes = { - activities: PropTypes.array, - className: PropTypes.string, - conversionRate: PropTypes.number, - inlineRetryIndex: PropTypes.number, - inlineCancelIndex: PropTypes.number, - nativeCurrency: PropTypes.string, - onCancel: PropTypes.func, - onRetry: PropTypes.func, - primaryTransaction: PropTypes.object, - } - - handleActivityClick = hash => { - const { primaryTransaction } = this.props - const { metamaskNetworkId } = primaryTransaction - - const prefix = prefixForNetwork(metamaskNetworkId) - const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` - - global.platform.openWindow({ url: etherscanUrl }) - } - - renderInlineRetry (index, activity) { - const { t } = this.context - const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props - const { status } = primaryTransaction - const { id } = activity - - return status !== CONFIRMED_STATUS && index === inlineRetryIndex - ? ( - <div - className="transaction-activity-log__action-link" - onClick={() => onRetry(id)} - > - { t('speedUpTransaction') } - </div> - ) : null - } - - renderInlineCancel (index, activity) { - const { t } = this.context - const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props - const { status } = primaryTransaction - const { id } = activity - - return status !== CONFIRMED_STATUS && index === inlineCancelIndex - ? ( - <div - className="transaction-activity-log__action-link" - onClick={() => onCancel(id)} - > - { t('speedUpCancellation') } - </div> - ) : null - } - - renderActivity (activity, index) { - const { conversionRate, nativeCurrency } = this.props - const { eventKey, value, timestamp, hash } = activity - const ethValue = index === 0 - ? `${getValueFromWeiHex({ - value, - fromCurrency: nativeCurrency, - toCurrency: nativeCurrency, - conversionRate, - numberOfDecimals: 6, - })} ${nativeCurrency}` - : getEthConversionFromWeiHex({ - value, - fromCurrency: nativeCurrency, - conversionRate, - numberOfDecimals: 3, - }) - const formattedTimestamp = formatDate(timestamp, 'T \'on\' M/d/y') - const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp]) - - return ( - <div - key={index} - className="transaction-activity-log__activity" - > - <TransactionActivityLogIcon - className="transaction-activity-log__activity-icon" - eventKey={eventKey} - /> - <div className="transaction-activity-log__entry-container"> - <div - className="transaction-activity-log__activity-text" - title={activityText} - onClick={() => this.handleActivityClick(hash)} - > - { activityText } - </div> - { this.renderInlineRetry(index, activity) } - { this.renderInlineCancel(index, activity) } - </div> - </div> - ) - } - - render () { - const { t } = this.context - const { className, activities } = this.props - - return ( - <div className={classnames('transaction-activity-log', className)}> - <div className="transaction-activity-log__title"> - { t('activityLog') } - </div> - <div className="transaction-activity-log__activities-container"> - { activities.map((activity, index) => this.renderActivity(activity, index)) } - </div> - </div> - ) - } -} diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js b/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js deleted file mode 100644 index 72e63d85c..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js +++ /dev/null @@ -1,13 +0,0 @@ -export const TRANSACTION_CREATED_EVENT = 'transactionCreated' -export const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted' -export const TRANSACTION_RESUBMITTED_EVENT = 'transactionResubmitted' -export const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed' -export const TRANSACTION_DROPPED_EVENT = 'transactionDropped' -export const TRANSACTION_UPDATED_EVENT = 'transactionUpdated' -export const TRANSACTION_ERRORED_EVENT = 'transactionErrored' -export const TRANSACTION_CANCEL_ATTEMPTED_EVENT = 'transactionCancelAttempted' -export const TRANSACTION_CANCEL_SUCCESS_EVENT = 'transactionCancelSuccess' - -export const SUBMITTED_STATUS = 'submitted' -export const CONFIRMED_STATUS = 'confirmed' -export const DROPPED_STATUS = 'dropped' diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js deleted file mode 100644 index e43229708..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js +++ /dev/null @@ -1,44 +0,0 @@ -import { connect } from 'react-redux' -import R from 'ramda' -import TransactionActivityLog from './transaction-activity-log.component' -import { conversionRateSelector, getNativeCurrency } from '../../selectors' -import { combineTransactionHistories } from './transaction-activity-log.util' -import { - TRANSACTION_RESUBMITTED_EVENT, - TRANSACTION_CANCEL_ATTEMPTED_EVENT, -} from './transaction-activity-log.constants' - -const matchesEventKey = matchEventKey => ({ eventKey }) => eventKey === matchEventKey - -const mapStateToProps = state => { - return { - conversionRate: conversionRateSelector(state), - nativeCurrency: getNativeCurrency(state), - } -} - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { - transactionGroup: { - transactions = [], - primaryTransaction, - } = {}, - ...restOwnProps - } = ownProps - - const activities = combineTransactionHistories(transactions) - const inlineRetryIndex = R.findLastIndex(matchesEventKey(TRANSACTION_RESUBMITTED_EVENT))(activities) - const inlineCancelIndex = R.findLastIndex(matchesEventKey(TRANSACTION_CANCEL_ATTEMPTED_EVENT))(activities) - - return { - ...stateProps, - ...dispatchProps, - ...restOwnProps, - activities, - inlineRetryIndex, - inlineCancelIndex, - primaryTransaction, - } -} - -export default connect(mapStateToProps, null, mergeProps)(TransactionActivityLog) diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js deleted file mode 100644 index 6206a4678..000000000 --- a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js +++ /dev/null @@ -1,224 +0,0 @@ -import { getHexGasTotal } from '../../helpers/confirm-transaction/util' - -// path constants -const STATUS_PATH = '/status' -const GAS_PRICE_PATH = '/txParams/gasPrice' -const GAS_LIMIT_PATH = '/txParams/gas' - -// op constants -const REPLACE_OP = 'replace' - -import { - // event constants - TRANSACTION_CREATED_EVENT, - TRANSACTION_SUBMITTED_EVENT, - TRANSACTION_RESUBMITTED_EVENT, - TRANSACTION_CONFIRMED_EVENT, - TRANSACTION_DROPPED_EVENT, - TRANSACTION_UPDATED_EVENT, - TRANSACTION_ERRORED_EVENT, - TRANSACTION_CANCEL_ATTEMPTED_EVENT, - TRANSACTION_CANCEL_SUCCESS_EVENT, - // status constants - SUBMITTED_STATUS, - CONFIRMED_STATUS, - DROPPED_STATUS, -} from './transaction-activity-log.constants' - -import { - TRANSACTION_TYPE_CANCEL, - TRANSACTION_TYPE_RETRY, -} from '../../../../app/scripts/controllers/transactions/enums' - -const eventPathsHash = { - [STATUS_PATH]: true, - [GAS_PRICE_PATH]: true, - [GAS_LIMIT_PATH]: true, -} - -const statusHash = { - [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT, - [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT, - [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT, -} - -/** - * @name getActivities - * @param {Object} transaction - txMeta object - * @param {boolean} isFirstTransaction - True if the transaction is the first created transaction - * in the list of transactions with the same nonce. If so, we use this transaction to create the - * transactionCreated activity. - * @returns {Array} - */ -export function getActivities (transaction, isFirstTransaction = false) { - const { id, hash, history = [], txReceipt: { status } = {}, type } = transaction - - let cachedGasLimit = '0x0' - let cachedGasPrice = '0x0' - - const historyActivities = history.reduce((acc, base, index) => { - // First history item should be transaction creation - if (index === 0 && !Array.isArray(base) && base.txParams) { - const { time: timestamp, txParams: { value, gas = '0x0', gasPrice = '0x0' } = {} } = base - // The cached gas limit and gas price are used to display the gas fee in the activity log. We - // need to cache these values because the status update history events don't provide us with - // the latest gas limit and gas price. - cachedGasLimit = gas - cachedGasPrice = gasPrice - - if (isFirstTransaction) { - return acc.concat({ - id, - hash, - eventKey: TRANSACTION_CREATED_EVENT, - timestamp, - value, - }) - } - // An entry in the history may be an array of more sub-entries. - } else if (Array.isArray(base)) { - const events = [] - - base.forEach(entry => { - const { op, path, value, timestamp: entryTimestamp } = entry - // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a - // timestamp, the first sub-entry in a history entry should. - const timestamp = entryTimestamp || base[0] && base[0].timestamp - - if (path in eventPathsHash && op === REPLACE_OP) { - switch (path) { - case STATUS_PATH: { - const gasFee = getHexGasTotal({ gasLimit: cachedGasLimit, gasPrice: cachedGasPrice }) - - if (value in statusHash) { - let eventKey = statusHash[value] - - // If the status is 'submitted', we need to determine whether the event is a - // transaction retry or a cancellation attempt. - if (value === SUBMITTED_STATUS) { - if (type === TRANSACTION_TYPE_RETRY) { - eventKey = TRANSACTION_RESUBMITTED_EVENT - } else if (type === TRANSACTION_TYPE_CANCEL) { - eventKey = TRANSACTION_CANCEL_ATTEMPTED_EVENT - } - } else if (value === CONFIRMED_STATUS) { - if (type === TRANSACTION_TYPE_CANCEL) { - eventKey = TRANSACTION_CANCEL_SUCCESS_EVENT - } - } - - events.push({ - id, - hash, - eventKey, - timestamp, - value: gasFee, - }) - } - - break - } - - // If the gas price or gas limit has been changed, we update the gasFee of the - // previously submitted event. These events happen when the gas limit and gas price is - // changed at the confirm screen. - case GAS_PRICE_PATH: - case GAS_LIMIT_PATH: { - const lastEvent = events[events.length - 1] || {} - const { lastEventKey } = lastEvent - - if (path === GAS_LIMIT_PATH) { - cachedGasLimit = value - } else if (path === GAS_PRICE_PATH) { - cachedGasPrice = value - } - - if (lastEventKey === TRANSACTION_SUBMITTED_EVENT || - lastEventKey === TRANSACTION_RESUBMITTED_EVENT) { - lastEvent.value = getHexGasTotal({ - gasLimit: cachedGasLimit, - gasPrice: cachedGasPrice, - }) - } - - break - } - - default: { - events.push({ - id, - hash, - eventKey: TRANSACTION_UPDATED_EVENT, - timestamp, - }) - } - } - } - }) - - return acc.concat(events) - } - - return acc - }, []) - - // If txReceipt.status is '0x0', that means that an on-chain error occured for the transaction, - // so we add an error entry to the Activity Log. - return status === '0x0' - ? historyActivities.concat({ id, hash, eventKey: TRANSACTION_ERRORED_EVENT }) - : historyActivities -} - -/** - * @description Removes "Transaction dropped" activities from a list of sorted activities if one of - * the transactions has been confirmed. Typically, if multiple transactions have the same nonce, - * once one transaction is confirmed, the rest are dropped. In this case, we don't want to show - * multiple "Transaction dropped" activities, and instead want to show a single "Transaction - * confirmed". - * @param {Array} activities - List of sorted activities generated from the getActivities function. - * @returns {Array} - */ -function filterSortedActivities (activities) { - const filteredActivities = [] - const hasConfirmedActivity = Boolean(activities.find(({ eventKey }) => ( - eventKey === TRANSACTION_CONFIRMED_EVENT || eventKey === TRANSACTION_CANCEL_SUCCESS_EVENT - ))) - let addedDroppedActivity = false - - activities.forEach(activity => { - if (activity.eventKey === TRANSACTION_DROPPED_EVENT) { - if (!hasConfirmedActivity && !addedDroppedActivity) { - filteredActivities.push(activity) - addedDroppedActivity = true - } - } else { - filteredActivities.push(activity) - } - }) - - return filteredActivities -} - -/** - * Combines the histories of an array of transactions into a single array. - * @param {Array} transactions - Array of txMeta transaction objects. - * @returns {Array} - */ -export function combineTransactionHistories (transactions = []) { - if (!transactions.length) { - return [] - } - - const activities = [] - - transactions.forEach((transaction, index) => { - // The first transaction should be the transaction with the earliest submittedTime. We show the - // 'created' and 'submitted' activities here. All subsequent transactions will use 'resubmitted' - // instead. - const transactionActivities = getActivities(transaction, index === 0) - activities.push(...transactionActivities) - }) - - const sortedActivities = activities.sort((a, b) => a.timestamp - b.timestamp) - return filterSortedActivities(sortedActivities) -} |