1 files changed, 126 insertions, 0 deletions
diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js
new file mode 100644
index 000000000..fc5488884
--- /dev/null
+++ b/ui/app/components/app/transaction-list/transaction-list.component.js
@@ -0,0 +1,126 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TransactionListItem from '../transaction-list-item'
+import ShapeShiftTransactionListItem from '../shift-list-item'
+import { TRANSACTION_TYPE_SHAPESHIFT } from '../../../helpers/constants/transactions'
+
+export default class TransactionList extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    pendingTransactions: [],
+    completedTransactions: [],
+  }
+
+  static propTypes = {
+    pendingTransactions: PropTypes.array,
+    completedTransactions: PropTypes.array,
+    selectedToken: PropTypes.object,
+    updateNetworkNonce: PropTypes.func,
+    assetImages: PropTypes.object,
+  }
+
+  componentDidMount () {
+    this.props.updateNetworkNonce()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { pendingTransactions: prevPendingTransactions = [] } = prevProps
+    const { pendingTransactions = [], updateNetworkNonce } = this.props
+
+    if (pendingTransactions.length > prevPendingTransactions.length) {
+      updateNetworkNonce()
+    }
+  }
+
+  shouldShowRetry = (transactionGroup, isEarliestNonce) => {
+    const { transactions = [], hasRetried } = transactionGroup
+    const [earliestTransaction = {}] = transactions
+    const { submittedTime } = earliestTransaction
+    return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
+  }
+
+  shouldShowCancel (transactionGroup) {
+    const { hasCancelled } = transactionGroup
+    return !hasCancelled
+  }
+
+  renderTransactions () {
+    const { t } = this.context
+    const { pendingTransactions = [], completedTransactions = [] } = this.props
+    const pendingLength = pendingTransactions.length
+
+    return (
+      <div className="transaction-list__transactions">
+        {
+          pendingLength > 0 && (
+            <div className="transaction-list__pending-transactions">
+              <div className="transaction-list__header">
+                { `${t('queue')} (${pendingTransactions.length})` }
+              </div>
+              {
+                pendingTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index, true)
+                ))
+              }
+            </div>
+          )
+        }
+        <div className="transaction-list__completed-transactions">
+          <div className="transaction-list__header">
+            { t('history') }
+          </div>
+          {
+            completedTransactions.length > 0
+              ? completedTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index)
+                ))
+              : this.renderEmpty()
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderTransaction (transactionGroup, index, isPendingTx = false) {
+    const { selectedToken, assetImages } = this.props
+    const { transactions = [] } = transactionGroup
+
+    return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT
+      ? (
+        <ShapeShiftTransactionListItem
+          { ...transactions[0] }
+          key={`shapeshift${index}`}
+        />
+      ) : (
+        <TransactionListItem
+          transactionGroup={transactionGroup}
+          key={`${transactionGroup.nonce}:${index}`}
+          showRetry={isPendingTx && this.shouldShowRetry(transactionGroup, index === 0)}
+          showCancel={isPendingTx && this.shouldShowCancel(transactionGroup)}
+          token={selectedToken}
+          assetImages={assetImages}
+        />
+      )
+  }
+
+  renderEmpty () {
+    return (
+      <div className="transaction-list__empty">
+        <div className="transaction-list__empty-text">
+          { this.context.t('noTransactions') }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <div className="transaction-list">
+        { this.renderTransactions() }
+      </div>
+    )
+  }
+}