Add Activity Log entry for onchain failures for a transaction. Change scrolling of the transaction list. Remove Transaction Details modal. (#5581)

app/_locales/en/messages.json

@@ -1169,6 +1169,9 @@
   "transactionUpdatedGas": {
     "message": "Transaction updated with a gas price of $1 on $2."
   },
+  "transactionErrored": {
+    "message": "Transaction encountered an error."
+  },
   "transactions": {
     "message": "transactions"
   },

ui/app/components/modals/modal.js

@@ -27,7 +27,6 @@ import TransactionConfirmed from './transaction-confirmed'
 import ConfirmCustomizeGasModal from './customize-gas'
 import CancelTransaction from './cancel-transaction'
 import WelcomeBeta from './welcome-beta'
-import TransactionDetails from './transaction-details'
 import RejectTransactions from './reject-transactions'
 
 const modalContainerBaseStyle = {
@@ -366,19 +365,6 @@ const MODALS = {
     },
   },
 
-  TRANSACTION_DETAILS: {
-    contents: h(TransactionDetails),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
   REJECT_TRANSACTIONS: {
     contents: h(RejectTransactions),
     mobileModalStyle: {

ui/app/components/modals/transaction-details/index.js

@@ -1 +0,0 @@
-export { default } from './transaction-details.container'

ui/app/components/modals/transaction-details/transaction-details.component.js

@@ -1,54 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Modal from '../../modal'
-import TransactionListItemDetails from '../../transaction-list-item-details'
-import { hexToDecimal } from '../../../helpers/conversions.util'
-
-export default class TransactionConfirmed extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    hideModal: PropTypes.func,
-    transaction: PropTypes.object,
-    onRetry: PropTypes.func,
-    showRetry: PropTypes.bool,
-    onCancel: PropTypes.func,
-    showCancel: PropTypes.bool,
-  }
-
-  handleSubmit = () => {
-    this.props.hideModal()
-  }
-
-  handleRetry = () => {
-    const { onRetry, hideModal } = this.props
-
-    Promise.resolve(onRetry()).then(() => hideModal())
-  }
-
-  render () {
-    const { t } = this.context
-    const { transaction, showRetry, onCancel, showCancel } = this.props
-    const { txParams: { nonce } = {} } = transaction
-    const decimalNonce = nonce && hexToDecimal(nonce)
-
-    return (
-      <Modal
-        onSubmit={this.handleSubmit}
-        onClose={this.handleSubmit}
-        submitText={t('ok')}
-        headerText={t('transactionWithNonce', [`#${decimalNonce}`])}
-      >
-        <TransactionListItemDetails
-          transaction={transaction}
-          onRetry={this.handleRetry}
-          showRetry={showRetry}
-          onCancel={() => onCancel()}
-          showCancel={showCancel}
-        />
-      </Modal>
-    )
-  }
-}

ui/app/components/modals/transaction-details/transaction-details.container.js

@@ -1,4 +0,0 @@
-import TransactionDetails from './transaction-details.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-
-export default withModalProps(TransactionDetails)

ui/app/components/send/send-content/send-amount-row/tests/send-amount-row-component.test.js

@@ -151,7 +151,6 @@ describe('SendAmountRow Component', function () {
     })
 
     it('should render a UserPreferencedTokenInput as the second child of the SendRowWrapper', () => {
-      console.log('HI', wrapper.find(SendRowWrapper).childAt(1))
       assert(wrapper.find(SendRowWrapper).childAt(1).is(UserPreferencedTokenInput))
     })
 

ui/app/components/transaction-activity-log/transaction-activity-log.component.js

@@ -27,10 +27,14 @@ export default class TransactionActivityLog extends PureComponent {
   }
 
   componentDidUpdate (prevProps) {
-    const { transaction: { history: prevHistory = [] } = {} } = prevProps
-    const { transaction: { history = [] } = {} } = this.props
+    const {
+      transaction: { history: prevHistory = [], txReceipt: { status: prevStatus } = {} } = {},
+    } = prevProps
+    const {
+      transaction: { history = [], txReceipt: { status } = {} } = {},
+    } = this.props
 
-    if (prevHistory.length !== history.length) {
+    if (prevHistory.length !== history.length || prevStatus !== status) {
       this.setActivites()
     }
   }

ui/app/components/transaction-activity-log/transaction-activity-log.util.js

@@ -18,6 +18,7 @@ const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
 const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
 const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
 const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
+const TRANSACTION_ERRORED_EVENT = 'transactionErrored'
 
 const eventPathsHash = {
   [STATUS_PATH]: true,
@@ -39,9 +40,9 @@ function eventCreator (eventKey, timestamp, value) {
 }
 
 export function getActivities (transaction) {
-  const { history = [] } = transaction
+  const { history = [], txReceipt: { status } = {} } = transaction
 
-  return history.reduce((acc, base) => {
+  const historyActivities = history.reduce((acc, base) => {
     // First history item should be transaction creation
     if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
       const { time, txParams: { value } = {} } = base
@@ -83,4 +84,10 @@ export function getActivities (transaction) {
 
     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(eventCreator(TRANSACTION_ERRORED_EVENT))
+    : historyActivities
 }

ui/app/components/transaction-list-item/index.scss

@@ -85,6 +85,7 @@
       text-align: end;
       grid-area: primary-amount;
       align-self: end;
+      justify-self: end;
 
       @media screen and (max-width: $break-small) {
         padding-bottom: 2px;
@@ -97,6 +98,7 @@
       color: #5e6064;
       grid-area: secondary-amount;
       align-self: start;
+      justify-self: end;
     }
   }
 

ui/app/components/transaction-list-item/transaction-list-item.component.js

@@ -10,7 +10,6 @@ import TransactionListItemDetails from '../transaction-list-item-details'
 import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
 import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 import { PRIMARY, SECONDARY } from '../../constants/common'
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../app/scripts/lib/enums'
 import { getStatusKey } from '../../helpers/transactions.util'
 
 export default class TransactionListItem extends PureComponent {
@@ -24,7 +23,6 @@ export default class TransactionListItem extends PureComponent {
     showCancelModal: PropTypes.func,
     showCancel: PropTypes.bool,
     showRetry: PropTypes.bool,
-    showTransactionDetailsModal: PropTypes.func,
     token: PropTypes.object,
     tokenData: PropTypes.object,
     transaction: PropTypes.object,
@@ -39,31 +37,16 @@ export default class TransactionListItem extends PureComponent {
     const {
       transaction,
       history,
-      showTransactionDetailsModal,
-      methodData,
-      showCancel,
-      showRetry,
     } = this.props
     const { id, status } = transaction
     const { showTransactionDetails } = this.state
-    const windowType = window.METAMASK_UI_TYPE
 
     if (status === UNAPPROVED_STATUS) {
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
       return
     }
 
-    if (windowType === ENVIRONMENT_TYPE_FULLSCREEN) {
-      this.setState({ showTransactionDetails: !showTransactionDetails })
-    } else {
-      showTransactionDetailsModal({
-        transaction,
-        onRetry: this.handleRetry,
-        showRetry: showRetry && methodData.done,
-        onCancel: this.handleCancel,
-        showCancel,
-      })
-    }
+    this.setState({ showTransactionDetails: !showTransactionDetails })
   }
 
   handleCancel = () => {

ui/app/components/transaction-list-item/transaction-list-item.container.js

@@ -28,16 +28,6 @@ const mapDispatchToProps = dispatch => {
     showCancelModal: (transactionId, originalGasPrice) => {
       return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
     },
-    showTransactionDetailsModal: ({ transaction, onRetry, showRetry, onCancel, showCancel }) => {
-      return dispatch(showModal({
-        name: 'TRANSACTION_DETAILS',
-        transaction,
-        onRetry,
-        showRetry,
-        onCancel,
-        showCancel,
-      }))
-    },
   }
 }
 

ui/app/components/transaction-list/index.scss

@@ -2,9 +2,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow-y: hidden;
   margin-top: 8px;
-  border-top: 1px solid $geyser;
 
   &__completed-transactions {
     display: flex;
@@ -26,7 +24,6 @@
 
   &__transactions {
     flex: 1;
-    overflow-y: auto;
   }
 
   &__pending-transactions {

ui/app/components/transaction-view/index.scss

@@ -4,6 +4,7 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
 
   &__balance-wrapper {
     @media screen and (max-width: $break-small) {

ui/app/components/wallet-view.js

@@ -127,7 +127,6 @@ WalletView.prototype.render = function () {
     identities,
   } = this.props
   // temporary logs + fake extra wallets
-  // console.log('walletview, selectedAccount:', selectedAccount)
 
   const checksummedAddress = checksumAddress(selectedAddress)
 

ui/app/ducks/confirm-transaction.duck.js

@@ -329,7 +329,6 @@ export function updateTxDataAndCalculate (txData) {
 
     const fiatTransactionTotal = addFiat(fiatTransactionFee, fiatTransactionAmount)
     const ethTransactionTotal = addEth(ethTransactionFee, ethTransactionAmount)
-    console.log('HIHIH', value, hexTransactionFee)
     const hexTransactionTotal = sumHexes(value, hexTransactionFee)
 
     dispatch(updateTransactionTotals({