Refactor transactions list views. Add redesign components

4 files changed, 151 insertions, 0 deletions

diff --git a/ui/app/components/transaction-list/index.js b/ui/app/components/transaction-list/index.js
new file mode 100644
index 000000000..688994367
--- /dev/null
+++ b/ui/app/components/transaction-list/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list.container'
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
new file mode 100644
index 000000000..f6f209831
--- /dev/null
+++ b/ui/app/components/transaction-list/index.scss
@@ -0,0 +1,40 @@
+.transaction-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: hidden;
+
+  &__header {
+    flex: 0 0 auto;
+    font-size: .875rem;
+    color: $dusty-gray;
+    border-bottom: 1px solid $geyser;
+    padding: 16px 0 8px 20px;
+
+    @media screen and (max-width: $break-small) {
+      padding: 8px 0 8px 16px;
+    }
+  }
+
+  &__transactions {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__pending-transactions {
+    margin-bottom: 16px;
+  }
+
+  &__empty {
+    flex: 1;
+    display: grid;
+    grid-template-rows: 35% 1fr;
+  }
+
+  &__empty-text {
+    grid-row-start: 2;
+    display: flex;
+    justify-content: center;
+    color: $silver;
+  }
+}
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..63d171127
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -0,0 +1,90 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TransactionListItem from '../transaction-list-item'
+
+export default class TransactionList extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    pendingTransactions: [],
+    completedTransactions: [],
+  }
+
+  static propTypes = {
+    pendingTransactions: PropTypes.array,
+    completedTransactions: PropTypes.array,
+  }
+
+  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('pending')} (${pendingTransactions.length})` }
+              </div>
+              {
+                pendingTransactions.map(transaction => {
+                  return (
+                    <TransactionListItem
+                      transaction={transaction}
+                      key={transaction.id}
+                    />
+                  )
+                })
+              }
+            </div>
+          )
+        }
+        <div className="transaction-list__completed-transactions">
+          <div className="transaction-list__header">
+            { t('history') }
+          </div>
+          {
+            completedTransactions.length > 0
+              ? (
+                completedTransactions.map(transaction => {
+                  return (
+                    <TransactionListItem
+                      transaction={transaction}
+                      key={transaction.id}
+                    />
+                  )
+                })
+              )
+              : this.renderEmpty()
+          }
+        </div>
+      </div>
+    )
+  }
+
+  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()
+          // pendingTransactions.length + completedTransactions.length > 0
+          //   ? this.renderTransactions()
+          //   : this.renderEmpty()
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
new file mode 100644
index 000000000..b1c2c04c9
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionList from './transaction-list.component'
+import {
+  pendingTransactionsSelector,
+  completedTransactionsSelector,
+} from '../../selectors/transactions'
+
+const mapStateToProps = state => {
+  return {
+    pendingTransactions: pendingTransactionsSelector(state),
+    completedTransactions: completedTransactionsSelector(state),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(TransactionList)