1 files changed, 118 insertions, 0 deletions
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
new file mode 100644
index 000000000..c864fea3b
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -0,0 +1,118 @@
+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 '../../constants/transactions'
+
+export default class TransactionList extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    pendingTransactions: [],
+    completedTransactions: [],
+    transactionToRetry: {},
+  }
+
+  static propTypes = {
+    pendingTransactions: PropTypes.array,
+    completedTransactions: PropTypes.array,
+    transactionToRetry: PropTypes.object,
+    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 = transaction => {
+    const { transactionToRetry } = this.props
+    const { id, submittedTime } = transaction
+    return id === transactionToRetry.id && Date.now() - submittedTime > 30000
+  }
+
+  renderTransactions () {
+    const { t } = this.context
+    const { pendingTransactions = [], completedTransactions = [] } = this.props
+    return (
+      <div className="transaction-list__transactions">
+        {
+          pendingTransactions.length > 0 && (
+            <div className="transaction-list__pending-transactions">
+              <div className="transaction-list__header">
+                { `${t('queue')} (${pendingTransactions.length})` }
+              </div>
+              {
+                pendingTransactions.map((transaction, index) => (
+                  this.renderTransaction(transaction, index)
+                ))
+              }
+            </div>
+          )
+        }
+        <div className="transaction-list__completed-transactions">
+          <div className="transaction-list__header">
+            { t('history') }
+          </div>
+          {
+            completedTransactions.length > 0
+              ? completedTransactions.map((transaction, index) => (
+                  this.renderTransaction(transaction, index)
+                ))
+              : this.renderEmpty()
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderTransaction (transaction, index) {
+    const { selectedToken, assetImages } = this.props
+
+    return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
+      ? (
+        <ShapeShiftTransactionListItem
+          { ...transaction }
+          key={`shapeshift${index}`}
+        />
+      ) : (
+        <TransactionListItem
+          transaction={transaction}
+          key={transaction.id}
+          showRetry={this.shouldShowRetry(transaction)}
+          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>
+    )
+  }
+}