1 files changed, 26 insertions, 18 deletions
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index 953b07217..c1e1885f3 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -1,6 +1,8 @@
 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 = {
@@ -28,11 +30,7 @@ export default class TransactionList extends PureComponent {
 
   renderTransactions () {
     const { t } = this.context
-    const {
-      pendingTransactions = [],
-      completedTransactions = [],
-      selectedToken,
-    } = this.props
+    const { pendingTransactions = [], completedTransactions = [] } = this.props
 
     return (
       <div className="transaction-list__transactions">
@@ -43,13 +41,8 @@ export default class TransactionList extends PureComponent {
                 { `${t('queue')} (${pendingTransactions.length})` }
               </div>
               {
-                pendingTransactions.map(transaction => (
-                  <TransactionListItem
-                    transaction={transaction}
-                    key={transaction.id}
-                    showRetry={this.shouldShowRetry(transaction)}
-                    token={selectedToken}
-                  />
+                pendingTransactions.map((transaction, index) => (
+                  this.renderTransaction(transaction, index)
                 ))
               }
             </div>
@@ -61,12 +54,8 @@ export default class TransactionList extends PureComponent {
           </div>
           {
             completedTransactions.length > 0
-              ? completedTransactions.map(transaction => (
-                  <TransactionListItem
-                    transaction={transaction}
-                    key={transaction.id}
-                    token={selectedToken}
-                  />
+              ? completedTransactions.map((transaction, index) => (
+                  this.renderTransaction(transaction, index)
                 ))
               : this.renderEmpty()
           }
@@ -75,6 +64,25 @@ export default class TransactionList extends PureComponent {
     )
   }
 
+  renderTransaction (transaction, index) {
+    const { selectedToken } = 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}
+        />
+      )
+  }
+
   renderEmpty () {
     return (
       <div className="transaction-list__empty">