Add Estimated time to pending tx

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

@@ -39,8 +39,8 @@ export default class TransactionListItem extends PureComponent {
     data: PropTypes.string,
     getContractMethodData: PropTypes.func,
     isDeposit: PropTypes.bool,
-    currentTimeEstimate: PropTypes.string,
     transactionTimeFeatureActive: PropTypes.bool,
+    firstPendingTransactionId: PropTypes.number,
   }
 
   static defaultProps = {
@@ -186,6 +186,7 @@ export default class TransactionListItem extends PureComponent {
       transactionGroup,
       rpcPrefs,
       isEarliestNonce,
+      firstPendingTransactionId,
       transactionTimeFeatureActive,
     } = this.props
     const { txParams = {} } = transaction
@@ -226,11 +227,10 @@ export default class TransactionListItem extends PureComponent {
                 : primaryTransaction.err && primaryTransaction.err.message
             )}
           />
-          { transactionTimeFeatureActive
+          { transactionTimeFeatureActive && (transaction.id === firstPendingTransactionId)
             ? <TransactionTimeRemaining
               className="transaction-list-item__estimated-time"
-              statusKey={getStatusKey(primaryTransaction) }
-              currentTimeEstimate={this.props.currentTimeEstimate}
+              transaction={ primaryTransaction }
             />
             : null
           }

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

@@ -24,8 +24,8 @@ export default class TransactionList extends PureComponent {
     assetImages: PropTypes.object,
     fetchBasicGasAndTimeEstimates: PropTypes.func,
     fetchGasEstimates: PropTypes.func,
-    currentTimeEstimate: PropTypes.string,
     transactionTimeFeatureActive: PropTypes.bool,
+    firstPendingTransactionId: PropTypes.number,
   }
 
   componentDidMount () {
@@ -118,7 +118,7 @@ export default class TransactionList extends PureComponent {
   }
 
   renderTransaction (transactionGroup, index, isPendingTx = false) {
-    const { selectedToken, assetImages } = this.props
+    const { selectedToken, assetImages, firstPendingTransactionId } = this.props
     const { transactions = [] } = transactionGroup
 
     return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT
@@ -136,7 +136,7 @@ export default class TransactionList extends PureComponent {
           isEarliestNonce={isPendingTx && index === 0}
           token={selectedToken}
           assetImages={assetImages}
-          currentTimeEstimate={this.props.currentTimeEstimate}
+          firstPendingTransactionId={firstPendingTransactionId}
         />
       )
   }

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

@@ -5,41 +5,23 @@ import TransactionList from './transaction-list.component'
 import {
   nonceSortedCompletedTransactionsSelector,
   nonceSortedPendingTransactionsSelector,
-  getTxParams,
 } from '../../../selectors/transactions'
 import { getSelectedAddress, getAssetImages, getFeatureFlags } from '../../../selectors/selectors'
 import { selectedTokenSelector } from '../../../selectors/tokens'
 import { updateNetworkNonce } from '../../../store/actions'
 import { fetchBasicGasAndTimeEstimates, fetchGasEstimates } from '../../../ducks/gas/gas.duck'
-import {
-  getCustomGasPrice,
-  getEstimatedGasPrices,
-  getEstimatedGasTimes,
-} from '../../../selectors/custom-gas'
-import { getRenderableTimeEstimate } from '../../../helpers/utils/gas-time-estimates.util'
-import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'
-
-const mapStateToProps = (state, ownProps) => {
-  const { selectedAddressTxList } = state.metamask
-  const { modalState: { props: modalProps } = {} } = state.appState.modal || {}
-  const { transaction = {} } = ownProps
-  const { txData = {} } = modalProps || {}
-  const selectedTransaction = selectedAddressTxList.find(({ id }) => id === (transaction.id || txData.id))
-  const { gasPrice: currentGasPrice } = getTxParams(state, selectedTransaction)
-  const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
-  const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
-  const gasPrices = getEstimatedGasPrices(state)
-  const estimatedTimes = getEstimatedGasTimes(state)
-  const transactionTimeFeatureActive = getFeatureFlags(state).transactionTime
 
+const mapStateToProps = (state) => {
+  const pendingTransactions = nonceSortedPendingTransactionsSelector(state)
+  const firstPendingTransactionId = pendingTransactions[0] && pendingTransactions[0].primaryTransaction.id
   return {
     completedTransactions: nonceSortedCompletedTransactionsSelector(state),
-    pendingTransactions: nonceSortedPendingTransactionsSelector(state),
+    pendingTransactions,
+    firstPendingTransactionId,
     selectedToken: selectedTokenSelector(state),
     selectedAddress: getSelectedAddress(state),
     assetImages: getAssetImages(state),
-    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
-    transactionTimeFeatureActive,
+    transactionTimeFeatureActive: getFeatureFlags(state).transactionTime,
   }
 }
 
@@ -67,7 +49,3 @@ export default compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(TransactionList)
-
-function calcCustomGasPrice (customGasPriceInHex) {
-  return Number(hexWEIToDecGWEI(customGasPriceInHex))
-}

ui/app/components/app/transaction-time-remaining/index.js

@@ -1 +1 @@
-export { default } from './transaction-time-remaining.component'
+export { default } from './transaction-time-remaining.container'

ui/app/components/app/transaction-time-remaining/transaction-time-remaining.component.js

@@ -1,26 +1,50 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import {
-  SUBMITTED_STATUS,
-} from '../../../helpers/constants/transactions'
-
-const statusToTextHash = {
-  [SUBMITTED_STATUS]: 'pending',
-}
+import { calcTransactionTimeRemaining } from './transaction-time-remaining.util'
 
 export default class TransactionTimeRemaining extends PureComponent {
   static propTypes = {
-    statusKey: PropTypes.string,
     className: PropTypes.string,
-    currentTimeEstimate: PropTypes.string,
+    initialTimeEstimate: PropTypes.number,
+    submittedTime: PropTypes.number,
+  }
+
+  constructor (props) {
+    super(props)
+    const { initialTimeEstimate, submittedTime } = props
+    this.state = {
+      timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime),
+    }
+    this.interval = setInterval(
+      () => this.setState({ timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime) }),
+      1000
+    )
+  }
+
+  componentDidUpdate (prevProps) {
+    const { initialTimeEstimate, submittedTime } = this.props
+    if (initialTimeEstimate !== prevProps.initialTimeEstimate) {
+      clearInterval(this.interval)
+      const calcedTimeRemaining = calcTransactionTimeRemaining(initialTimeEstimate, submittedTime)
+      this.setState({ timeRemaining: calcedTimeRemaining })
+      this.interval = setInterval(
+        () => this.setState({ timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime) }),
+        1000
+      )
+    }
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.interval)
   }
 
   render () {
-    const { className, statusKey } = this.props
+    const { className } = this.props
+    const { timeRemaining } = this.state
 
     return (
       <div className={className}>
-        {statusToTextHash[statusKey] === 'pending' ? this.props.currentTimeEstimate : null}
+        { timeRemaining }
       </div>
 
     )

ui/app/components/app/transaction-time-remaining/transaction-time-remaining.container.js

@@ -0,0 +1,41 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionTimeRemaining from './transaction-time-remaining.component'
+import {
+  getTxParams,
+} from '../../../selectors/transactions'
+import {
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+} from '../../../selectors/custom-gas'
+import { getRawTimeEstimateData } from '../../../helpers/utils/gas-time-estimates.util'
+import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'
+
+const mapStateToProps = (state, ownProps) => {
+  const { transaction } = ownProps
+  const { gasPrice: currentGasPrice } = getTxParams(state, transaction)
+  const customGasPrice = calcCustomGasPrice(currentGasPrice)
+  const gasPrices = getEstimatedGasPrices(state)
+  const estimatedTimes = getEstimatedGasTimes(state)
+  console.log('customGasPrice, gasPrices, estimatedTimes', customGasPrice, gasPrices, estimatedTimes)
+  const {
+    newTimeEstimate: initialTimeEstimate,
+  } = getRawTimeEstimateData(customGasPrice, gasPrices, estimatedTimes)
+
+  const submittedTime = transaction.submittedTime
+
+  return {
+    initialTimeEstimate,
+    submittedTime,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(TransactionTimeRemaining)
+
+function calcCustomGasPrice (customGasPriceInHex) {
+  return Number(hexWEIToDecGWEI(customGasPriceInHex))
+}

ui/app/components/app/transaction-time-remaining/transaction-time-remaining.util.js

@@ -0,0 +1,13 @@
+import { formatTimeEstimate } from '../../../helpers/utils/gas-time-estimates.util'
+
+export function calcTransactionTimeRemaining (initialTimeEstimate, submittedTime) {
+  const currentTime = (new Date()).getTime()
+  const timeElapsedSinceSubmission = (currentTime - submittedTime) / 1000
+  const timeRemainingOnEstimate = initialTimeEstimate - timeElapsedSinceSubmission
+  console.log('timeRemainingOnEstimate', timeRemainingOnEstimate)
+  const renderingTimeRemainingEstimate = timeRemainingOnEstimate < 30
+    ? '< 30 s'
+    : formatTimeEstimate(timeRemainingOnEstimate)
+
+  return renderingTimeRemainingEstimate
+}

ui/app/helpers/utils/gas-time-estimates.util.js

@@ -56,7 +56,7 @@ export function formatTimeEstimate (totalSeconds, greaterThanMax, lessThanMin) {
   return formattedCombined
 }
 
-export function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
+export function getRawTimeEstimateData (currentGasPrice, gasPrices, estimatedTimes) {
   const minGasPrice = gasPrices[0]
   const maxGasPrice = gasPrices[gasPrices.length - 1]
   let priceForEstimation = currentGasPrice
@@ -81,5 +81,19 @@ export function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimated
     xForExtrapolation: priceForEstimation,
   })
 
+  return {
+    newTimeEstimate,
+    minGasPrice,
+    maxGasPrice,
+  }
+}
+
+export function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
+  const {
+    newTimeEstimate,
+    minGasPrice,
+    maxGasPrice,
+  } = getRawTimeEstimateData(currentGasPrice, gasPrices, estimatedTimes)
+
   return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice)
 }