From a6111c3dd5934007f26ae8bf408c738ca9925c84 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 14:17:36 -0500
Subject: [PATCH 01/21] feature(txs): setup getTransactions and hook up to new
 reducer

---
 app/lnd/methods/index.js                      |  5 +
 app/reducers/index.js                         |  4 +-
 app/reducers/ipc.js                           |  5 +-
 app/reducers/transaction.js                   | 93 +++++++++++++++++++
 app/routes/activity/components/Activity.js    |  3 +-
 .../activity/containers/ActivityContainer.js  |  2 +
 6 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 app/reducers/transaction.js

diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index a891a453..9b69ec2f 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -49,6 +49,11 @@ export default function (lnd, event, msg, data) {
         )
         .catch(error => console.log('channels error: ', error))
       break
+    case 'transactions':
+    // Data looks like { transactions: [] }
+      walletController.getTransactions(lnd)
+        .then(transactionsData => event.sender.send('receiveTransactions', transactionsData))
+        .catch(error => console.log('transactions error: ', error))
     case 'payments':
     // Data looks like { payments: [] }
       paymentsController.listPayments(lnd)
diff --git a/app/reducers/index.js b/app/reducers/index.js
index c736b6e3..75b0597e 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -11,6 +11,7 @@ import form from './form'
 import invoice from './invoice'
 import modal from './modal'
 import address from './address'
+import transaction from './transaction'
 
 const rootReducer = combineReducers({
   router,
@@ -23,7 +24,8 @@ const rootReducer = combineReducers({
   form,
   invoice,
   modal,
-  address
+  address,
+  transaction
 })
 
 export default rootReducer
diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js
index 78988e07..2f035923 100644
--- a/app/reducers/ipc.js
+++ b/app/reducers/ipc.js
@@ -22,6 +22,7 @@ import {
 import { receivePayments, paymentSuccessful, sendSuccessful, sendCoinsError } from './payment'
 import { receiveInvoices, createdInvoice, receiveFormInvoice } from './invoice'
 import { receiveBalance } from './balance'
+import { receiveTransactions } from './transaction'
 
 // Import all receiving IPC event handlers and pass them into createIpc
 const ipc = createIpc({
@@ -58,7 +59,9 @@ const ipc = createIpc({
   disconnectSuccess,
 
   receiveAddress,
-  receiveCryptocurrency
+  receiveCryptocurrency,
+
+  receiveTransactions
 })
 
 export default ipc
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
new file mode 100644
index 00000000..e671e324
--- /dev/null
+++ b/app/reducers/transaction.js
@@ -0,0 +1,93 @@
+import { createSelector } from 'reselect'
+import { ipcRenderer } from 'electron'
+import { btc, usd } from '../utils'
+import { setForm, resetForm } from './form'
+import { showModal } from './modal'
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const GET_TRANSACTIONS = 'GET_TRANSACTIONS'
+export const RECEIVE_TRANSACTIONS = 'RECEIVE_TRANSACTIONS'
+
+export const SEND_TRANSACTION = 'SEND_TRANSACTION'
+
+export const TRANSACTION_SUCCESSFULL = 'TRANSACTION_SUCCESSFULL'
+export const TRANSACTION_FAILED = 'TRANSACTION_FAILED'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function getTransactions() {
+  return {
+    type: GET_TRANSACTIONS
+  }
+}
+
+export function sendTransaction() {
+  return {
+    type: SEND_TRANSACTION
+  }
+}
+
+// Send IPC event for payments
+export const fetchTransactions = () => (dispatch) => {
+  dispatch(getTransactions())
+  ipcRenderer.send('lnd', { msg: 'transactions' })
+}
+
+// Receive IPC event for payments
+export const receiveTransactions = (event, { transactions }) => dispatch => dispatch({ type: RECEIVE_TRANSACTIONS, transactions })
+
+export const sendCoins = ({ value, addr, currency, rate }) => (dispatch) => {
+  const amount = currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(value, rate)) : btc.btcToSatoshis(value)
+  dispatch(sendPayment())
+  ipcRenderer.send('lnd', { msg: 'sendCoins', data: { amount, addr } })
+}
+
+// Receive IPC event for successful payment
+// TODO: Add payment to state, not a total re-fetch
+export const transactionSuccessful = (event, { amount, addr, txid }) => (dispatch) => {
+  // Get the new list of transactions (TODO dont do an entire new fetch)
+  fetchTransactions()
+  // Close the form modal once the payment was succesful
+  dispatch(setForm({ modalOpen: false }))
+  // Show successful payment state
+  dispatch(showModal('SUCCESSFUL_SEND_COINS', { txid, amount, addr }))
+  // TODO: Add successful on-chain payment to payments list once payments list supports on-chain and LN
+  // dispatch({ type: PAYMENT_SUCCESSFULL, payment: { amount, addr, txid, pending: true } })
+  dispatch({ type: TRANSACTION_SUCCESSFULL })
+  // Reset the payment form
+  dispatch(resetForm())
+}
+
+export const transactionError = () => (dispatch) => {
+  dispatch({ type: PAYMENT_FAILED })
+}
+
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [GET_TRANSACTIONS]: state => ({ ...state, transactionLoading: true }),
+  [SEND_TRANSACTION]: state => ({ ...state, sendingTransaction: true }),
+  [RECEIVE_TRANSACTIONS]: (state, { transactions }) => ({ ...state, transactionLoading: false, transactions }),
+  [TRANSACTION_SUCCESSFULL]: state => ({ ...state, sendingTransaction: false }),
+  [TRANSACTION_FAILED]: state => ({ ...state, sendingTransaction: false })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = {
+  sendingtransaction: false,
+  transactionLoading: false,
+  transactions: []
+}
+
+export default function transactionReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 85692c8e..be61ab6a 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -14,10 +14,11 @@ class Activity extends Component {
   }
 
   componentWillMount() {
-    const { fetchPayments, fetchInvoices } = this.props
+    const { fetchPayments, fetchInvoices, fetchTransactions } = this.props
 
     fetchPayments()
     fetchInvoices()
+    fetchTransactions()
   }
 
   render() {
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index 1b3cba45..25f0652e 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -11,6 +11,7 @@ import {
   fetchPayments,
   paymentSelectors
 } from '../../../reducers/payment'
+import { fetchTransactions } from '../../../reducers/transaction'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -18,6 +19,7 @@ const mapDispatchToProps = {
   setInvoice,
   fetchPayments,
   fetchInvoices,
+  fetchTransactions,
   searchInvoices
 }
 

From e7a819c3867c11f37b00ce449845bbc0aac44c8c Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 14:30:52 -0500
Subject: [PATCH 02/21] fix(sendcoins): move sendcoins to new transaction
 reducer, remove unused code from payments

---
 app/lnd/methods/index.js                      |  4 ++--
 app/reducers/ipc.js                           | 10 ++++-----
 app/reducers/payment.js                       | 22 -------------------
 app/reducers/transaction.js                   |  4 ++--
 app/routes/app/components/App.js              |  3 +++
 .../app/components/components/Form/Form.js    |  8 ++++---
 .../components/Form/components/Pay/Pay.js     |  6 ++---
 app/routes/app/containers/AppContainer.js     |  4 +++-
 8 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index 9b69ec2f..eca3b570 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -101,8 +101,8 @@ export default function (lnd, event, msg, data) {
     // Transaction looks like { txid: String }
     // { amount, addr } = data
       walletController.sendCoins(lnd, data)
-        .then(({ txid }) => event.sender.send('sendSuccessful', { amount: data.amount, addr: data.addr, txid }))
-        .catch(error => event.sender.send('sendCoinsError', { error }))
+        .then(({ txid }) => event.sender.send('transactionSuccessful', { amount: data.amount, addr: data.addr, txid }))
+        .catch(error => event.sender.send('transactionError', { error }))
       break
     case 'openChannel':
     // Response is empty. Streaming updates on channel status and updates
diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js
index 2f035923..c61ccd20 100644
--- a/app/reducers/ipc.js
+++ b/app/reducers/ipc.js
@@ -19,10 +19,10 @@ import {
   pushclosechannelstatus
 
 } from './channels'
-import { receivePayments, paymentSuccessful, sendSuccessful, sendCoinsError } from './payment'
+import { receivePayments, paymentSuccessful } from './payment'
 import { receiveInvoices, createdInvoice, receiveFormInvoice } from './invoice'
 import { receiveBalance } from './balance'
-import { receiveTransactions } from './transaction'
+import { receiveTransactions, transactionSuccessful, transactionError } from './transaction'
 
 // Import all receiving IPC event handlers and pass them into createIpc
 const ipc = createIpc({
@@ -41,8 +41,6 @@ const ipc = createIpc({
   receiveBalance,
 
   paymentSuccessful,
-  sendSuccessful,
-  sendCoinsError,
 
   channelSuccessful,
   pushchannelupdated,
@@ -61,7 +59,9 @@ const ipc = createIpc({
   receiveAddress,
   receiveCryptocurrency,
 
-  receiveTransactions
+  receiveTransactions,
+  transactionSuccessful,
+  transactionError
 })
 
 export default ipc
diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index 4bfdf453..7a04bd7b 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -66,32 +66,10 @@ export const payInvoice = paymentRequest => (dispatch) => {
   ipcRenderer.send('lnd', { msg: 'sendPayment', data: { paymentRequest } })
 }
 
-export const sendCoins = ({ value, addr, currency, rate }) => (dispatch) => {
-  const amount = currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(value, rate)) : btc.btcToSatoshis(value)
-  dispatch(sendPayment())
-  ipcRenderer.send('lnd', { msg: 'sendCoins', data: { amount, addr } })
-}
-
 // Receive IPC event for successful payment
 // TODO: Add payment to state, not a total re-fetch
 export const paymentSuccessful = () => fetchPayments()
 
-export const sendSuccessful = (event, { amount, addr, txid }) => (dispatch) => {
-  // Close the form modal once the payment was succesful
-  dispatch(setForm({ modalOpen: false }))
-  // Show successful payment state
-  dispatch(showModal('SUCCESSFUL_SEND_COINS', { txid, amount, addr }))
-  // TODO: Add successful on-chain payment to payments list once payments list supports on-chain and LN
-  // dispatch({ type: PAYMENT_SUCCESSFULL, payment: { amount, addr, txid, pending: true } })
-  dispatch({ type: PAYMENT_SUCCESSFULL })
-  // Reset the payment form
-  dispatch(resetForm())
-}
-
-export const sendCoinsError = () => (dispatch) => {
-  dispatch({ type: PAYMENT_FAILED })
-}
-
 
 // ------------------------------------
 // Action Handlers
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index e671e324..c551ff24 100644
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@@ -41,7 +41,7 @@ export const receiveTransactions = (event, { transactions }) => dispatch => disp
 
 export const sendCoins = ({ value, addr, currency, rate }) => (dispatch) => {
   const amount = currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(value, rate)) : btc.btcToSatoshis(value)
-  dispatch(sendPayment())
+  dispatch(sendTransaction())
   ipcRenderer.send('lnd', { msg: 'sendCoins', data: { amount, addr } })
 }
 
@@ -81,7 +81,7 @@ const ACTION_HANDLERS = {
 // Reducer
 // ------------------------------------
 const initialState = {
-  sendingtransaction: false,
+  sendingTransaction: false,
   transactionLoading: false,
   transactions: []
 }
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index 421be3fc..d2a01579 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -28,6 +28,7 @@ class App extends Component {
       setPubkey,
       setPaymentRequest,
       payment,
+      transaction: { sendingTransaction },
       peers,
       setCurrency,
       setForm,
@@ -64,6 +65,7 @@ class App extends Component {
           peers={peers}
           ticker={ticker}
           form={form}
+          sendingTransaction={sendingTransaction}
           createInvoice={createInvoice}
           payInvoice={payInvoice}
           sendCoins={sendCoins}
@@ -103,6 +105,7 @@ App.propTypes = {
   setPubkey: PropTypes.func.isRequired,
   setPaymentRequest: PropTypes.func.isRequired,
   payment: PropTypes.object.isRequired,
+  transaction: PropTypes.object.isRequired,
   peers: PropTypes.array,
   setCurrency: PropTypes.func.isRequired,
   setForm: PropTypes.func.isRequired,
diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js
index a57dafe9..e753d61a 100644
--- a/app/routes/app/components/components/Form/Form.js
+++ b/app/routes/app/components/components/Form/Form.js
@@ -22,7 +22,8 @@ const Form = ({
   formInvoice,
   currentTicker,
   isOnchain,
-  isLn
+  isLn,
+  sendingTransaction
 }) => (
   <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
     <div className={styles.container}>
@@ -33,7 +34,7 @@ const Form = ({
         {
           formType === 'pay' ?
             <Pay
-              sendingPayment={sendingPayment}
+              sendingTransaction={sendingTransaction}
               invoiceAmount={formInvoice.amount}
               onchainAmount={onchainAmount}
               setOnchainAmount={setOnchainAmount}
@@ -87,7 +88,8 @@ Form.propTypes = {
   formInvoice: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
   isOnchain: PropTypes.bool.isRequired,
-  isLn: PropTypes.bool.isRequired
+  isLn: PropTypes.bool.isRequired,
+  sendingTransaction: PropTypes.bool.isRequired
 }
 
 export default Form
diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.js b/app/routes/app/components/components/Form/components/Pay/Pay.js
index a94fae17..38c33f12 100644
--- a/app/routes/app/components/components/Form/components/Pay/Pay.js
+++ b/app/routes/app/components/components/Form/components/Pay/Pay.js
@@ -16,7 +16,7 @@ class Pay extends Component {
 
   render() {
     const {
-      sendingPayment,
+      sendingTransaction,
       invoiceAmount,
       onchainAmount,
       setOnchainAmount,
@@ -43,7 +43,7 @@ class Pay extends Component {
     return (
       <div>
         {
-          sendingPayment ?
+          sendingTransaction ?
             <LoadingBolt />
             :
             null
@@ -127,7 +127,7 @@ class Pay extends Component {
 }
 
 Pay.propTypes = {
-  sendingPayment: PropTypes.bool.isRequired,
+  sendingTransaction: PropTypes.bool.isRequired,
   invoiceAmount: PropTypes.string.isRequired,
   onchainAmount: PropTypes.string.isRequired,
   setOnchainAmount: PropTypes.func.isRequired,
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index 3f2e8153..27961910 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@@ -5,7 +5,8 @@ import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { createInvoice, fetchInvoice } from '../../../reducers/invoice'
 import { hideModal } from '../../../reducers/modal'
-import { payInvoice, sendCoins } from '../../../reducers/payment'
+import { payInvoice } from '../../../reducers/payment'
+import { sendCoins } from '../../../reducers/transaction'
 import { fetchChannels } from '../../../reducers/channels'
 import {
   setForm,
@@ -42,6 +43,7 @@ const mapStateToProps = state => ({
   ticker: state.ticker,
   balance: state.balance,
   payment: state.payment,
+  transaction: state.transaction,
   form: state.form,
   invoice: state.invoice,
   modal: state.modal,

From c1853cc5f810693e9a80fab90a09b891646d2de7 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 14:49:45 -0500
Subject: [PATCH 03/21] feature(activity): create selectors folder for specific
 selectors. sortedActivity for all payments, invoices, txs sorted by timestamp

---
 app/routes/activity/components/Activity.js    |  5 +++--
 .../activity/containers/ActivityContainer.js  |  6 ++++-
 app/selectors/activity.js                     | 22 +++++++++++++++++++
 app/selectors/index.js                        |  5 +++++
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 app/selectors/activity.js
 create mode 100644 app/selectors/index.js

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index be61ab6a..064ac5f1 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -33,9 +33,10 @@ class Activity extends Component {
       setInvoice,
       paymentModalOpen,
       invoiceModalOpen,
-      currentTicker
+      currentTicker,
+      sortedActivity
     } = this.props
-
+    console.log('sortedActivity: ', sortedActivity)
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
     return (
       <div>
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index 25f0652e..35658ed7 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -12,6 +12,7 @@ import {
   paymentSelectors
 } from '../../../reducers/payment'
 import { fetchTransactions } from '../../../reducers/transaction'
+import { activitySelectors } from '../../../selectors'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -23,6 +24,7 @@ const mapDispatchToProps = {
   searchInvoices
 }
 
+console.log('activitySelectors: ', activitySelectors)
 const mapStateToProps = state => ({
   activity: state.activity,
 
@@ -36,7 +38,9 @@ const mapStateToProps = state => ({
   paymentModalOpen: paymentSelectors.paymentModalOpen(state),
   invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state),
 
-  currentTicker: tickerSelectors.currentTicker(state)
+  currentTicker: tickerSelectors.currentTicker(state),
+
+  sortedActivity: activitySelectors.sortedActivity(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)
diff --git a/app/selectors/activity.js b/app/selectors/activity.js
new file mode 100644
index 00000000..7d89239c
--- /dev/null
+++ b/app/selectors/activity.js
@@ -0,0 +1,22 @@
+import { createSelector } from 'reselect'
+
+const activitySelectors = {}
+const paymentsSelector = state => state.payment.payments
+const invoicesSelector = state => state.invoice.invoices
+const transactionsSelector = state => state.transaction.transactions
+
+activitySelectors.sortedActivity = createSelector(
+  paymentsSelector,
+  invoicesSelector,
+  transactionsSelector,
+  (payments, invoices, transactions) => {
+    return [...payments, ...invoices, ...transactions].sort((a, b) => {
+      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
+      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
+
+      return bTimestamp - aTimestamp
+    })
+  }
+)
+
+export default activitySelectors
\ No newline at end of file
diff --git a/app/selectors/index.js b/app/selectors/index.js
new file mode 100644
index 00000000..f28a76aa
--- /dev/null
+++ b/app/selectors/index.js
@@ -0,0 +1,5 @@
+import activitySelectors from './activity'
+
+export default {
+  activitySelectors
+}
\ No newline at end of file

From 0a04874e52b9c2fda80aa6f1b8ec23e3ee2a9fa2 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 19:19:33 -0500
Subject: [PATCH 04/21] create components for each type of activity / fix modal
 not closing on successful payment

---
 app/reducers/payment.js                       | 11 ++++-
 app/routes/activity/components/Activity.js    | 41 +++++++++----------
 .../components/components/Invoice/Invoice.js  | 15 +++++++
 .../components/Invoice/Invoice.scss           |  0
 .../components/components/Invoice/index.js    |  3 ++
 .../components/components/Payment/Payment.js  | 15 +++++++
 .../components/Payment/Payment.scss           |  0
 .../components/components/Payment/index.js    |  3 ++
 .../components/Transaction/Transaction.js     | 15 +++++++
 .../components/Transaction/Transaction.scss   |  0
 .../components/Transaction/index.js           |  3 ++
 .../activity/containers/ActivityContainer.js  |  1 -
 .../components/Form/components/Pay/Pay.js     |  5 ++-
 13 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 app/routes/activity/components/components/Invoice/Invoice.js
 create mode 100644 app/routes/activity/components/components/Invoice/Invoice.scss
 create mode 100644 app/routes/activity/components/components/Invoice/index.js
 create mode 100644 app/routes/activity/components/components/Payment/Payment.js
 create mode 100644 app/routes/activity/components/components/Payment/Payment.scss
 create mode 100644 app/routes/activity/components/components/Payment/index.js
 create mode 100644 app/routes/activity/components/components/Transaction/Transaction.js
 create mode 100644 app/routes/activity/components/components/Transaction/Transaction.scss
 create mode 100644 app/routes/activity/components/components/Transaction/index.js

diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index 7a04bd7b..b8dbc445 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -68,7 +68,16 @@ export const payInvoice = paymentRequest => (dispatch) => {
 
 // Receive IPC event for successful payment
 // TODO: Add payment to state, not a total re-fetch
-export const paymentSuccessful = () => fetchPayments()
+export const paymentSuccessful = () => dispatch => {
+  // Close the form modal once the payment was succesful
+  dispatch(setForm({ modalOpen: false }))
+
+  // Refetch payments (TODO: dont do a full refetch, rather append new tx to list)
+  fetchPayments()
+
+  // Reset the payment form
+  dispatch(resetForm())
+}
 
 
 // ------------------------------------
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 064ac5f1..cd52d7b0 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -1,8 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
+import { FaChain, FaBolt } from 'react-icons/lib/fa'
 import Payments from './components/Payments'
 import Invoices from './components/Invoices'
+
+import Invoice from './components/Invoice'
+import Payment from './components/Payment'
+import Transaction from './components/Transaction'
+
 import styles from './Activity.scss'
 
 class Activity extends Component {
@@ -36,7 +42,6 @@ class Activity extends Component {
       currentTicker,
       sortedActivity
     } = this.props
-    console.log('sortedActivity: ', sortedActivity)
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
     return (
       <div>
@@ -69,28 +74,22 @@ class Activity extends Component {
               Requests
             </span>
           </header>
-          <div className={styles.activityContainer}>
+          <ul className={styles.activityContainer}>
             {
-              tab === 1 ?
-                <Payments
-                  payment={payment}
-                  payments={payments}
-                  ticker={ticker}
-                  setPayment={setPayment}
-                  paymentModalOpen={paymentModalOpen}
-                  currentTicker={currentTicker}
-                />
-                :
-                <Invoices
-                  invoice={invoice}
-                  invoices={invoices}
-                  ticker={ticker}
-                  setInvoice={setInvoice}
-                  invoiceModalOpen={invoiceModalOpen}
-                  currentTicker={currentTicker}
-                />
+              sortedActivity.map((activity, index) => {
+                if (activity.hasOwnProperty('block_hash')) {
+                  // activity is an on-chain tx
+                  return <Transaction transaction={activity} key={index} />
+                } else if (activity.hasOwnProperty('payment_request')) {
+                  // activity is an LN invoice
+                  return <Invoice invoice={activity} key={index} />
+                } else {
+                  // activity is an LN payment
+                  return <Payment payment={activity} key={index} />
+                }
+              })
             }
-          </div>
+          </ul>
         </div>
       </div>
     )
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
new file mode 100644
index 00000000..89db79aa
--- /dev/null
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Invoice.scss'
+
+const Invoice = () => (
+  <div>
+    Invoice
+  </div>
+)
+
+Invoice.propTypes = {
+  
+}
+
+export default Invoice
diff --git a/app/routes/activity/components/components/Invoice/Invoice.scss b/app/routes/activity/components/components/Invoice/Invoice.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Invoice/index.js b/app/routes/activity/components/components/Invoice/index.js
new file mode 100644
index 00000000..a72db95c
--- /dev/null
+++ b/app/routes/activity/components/components/Invoice/index.js
@@ -0,0 +1,3 @@
+import Invoice from './Invoice'
+
+export default Invoice
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
new file mode 100644
index 00000000..833b51f6
--- /dev/null
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Payment.scss'
+
+const Payment = () => (
+  <div>
+    Payment
+  </div>
+)
+
+Payment.propTypes = {
+  
+}
+
+export default Payment
diff --git a/app/routes/activity/components/components/Payment/Payment.scss b/app/routes/activity/components/components/Payment/Payment.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Payment/index.js b/app/routes/activity/components/components/Payment/index.js
new file mode 100644
index 00000000..3f7e6951
--- /dev/null
+++ b/app/routes/activity/components/components/Payment/index.js
@@ -0,0 +1,3 @@
+import Payment from './Payment'
+
+export default Payment
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
new file mode 100644
index 00000000..5e1fb5eb
--- /dev/null
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Transaction.scss'
+
+const Transaction = () => (
+  <div>
+    transaction
+  </div>
+)
+
+Transaction.propTypes = {
+  
+}
+
+export default Transaction
diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/routes/activity/components/components/Transaction/Transaction.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Transaction/index.js b/app/routes/activity/components/components/Transaction/index.js
new file mode 100644
index 00000000..7fc5e311
--- /dev/null
+++ b/app/routes/activity/components/components/Transaction/index.js
@@ -0,0 +1,3 @@
+import Transaction from './Transaction'
+
+export default Transaction
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index 35658ed7..c860ea0c 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -24,7 +24,6 @@ const mapDispatchToProps = {
   searchInvoices
 }
 
-console.log('activitySelectors: ', activitySelectors)
 const mapStateToProps = state => ({
   activity: state.activity,
 
diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.js b/app/routes/app/components/components/Form/components/Pay/Pay.js
index 38c33f12..dbf9da89 100644
--- a/app/routes/app/components/components/Form/components/Pay/Pay.js
+++ b/app/routes/app/components/components/Form/components/Pay/Pay.js
@@ -128,7 +128,10 @@ class Pay extends Component {
 
 Pay.propTypes = {
   sendingTransaction: PropTypes.bool.isRequired,
-  invoiceAmount: PropTypes.string.isRequired,
+  invoiceAmount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]).isRequired,
   onchainAmount: PropTypes.string.isRequired,
   setOnchainAmount: PropTypes.func.isRequired,
   payment_request: PropTypes.string.isRequired,

From 350ce99a5830f700ee62ad8e48ada16e4f5181c7 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 23:19:44 -0500
Subject: [PATCH 05/21] feature(transaction): style transaction activity in
 activities list

---
 app/routes/activity/components/Activity.js    |  32 +++--
 app/routes/activity/components/Activity.scss  |   4 +-
 .../components/Transaction/Transaction.js     |  54 ++++++++-
 .../components/Transaction/Transaction.scss   | 111 ++++++++++++++++++
 app/tooltip.scss                              |   2 +-
 5 files changed, 186 insertions(+), 17 deletions(-)

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index cd52d7b0..0ce06382 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -17,6 +17,8 @@ class Activity extends Component {
     this.state = {
       tab: 1
     }
+
+    this.renderActivity = this.renderActivity.bind(this)
   }
 
   componentWillMount() {
@@ -27,6 +29,21 @@ class Activity extends Component {
     fetchTransactions()
   }
 
+  renderActivity(activity) {
+    const { ticker, currentTicker } = this.props
+
+    if (activity.hasOwnProperty('block_hash')) {
+      // activity is an on-chain tx
+      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} />
+    } else if (activity.hasOwnProperty('payment_request')) {
+      // activity is an LN invoice
+      return <Invoice invoice={activity} />
+    } else {
+      // activity is an LN payment
+      return <Payment payment={activity} />
+    }
+  }
+
   render() {
     const { tab } = this.state
     const {
@@ -77,16 +94,11 @@ class Activity extends Component {
           <ul className={styles.activityContainer}>
             {
               sortedActivity.map((activity, index) => {
-                if (activity.hasOwnProperty('block_hash')) {
-                  // activity is an on-chain tx
-                  return <Transaction transaction={activity} key={index} />
-                } else if (activity.hasOwnProperty('payment_request')) {
-                  // activity is an LN invoice
-                  return <Invoice invoice={activity} key={index} />
-                } else {
-                  // activity is an LN payment
-                  return <Payment payment={activity} key={index} />
-                }
+                return (
+                  <li className={styles.activity} key={index}>
+                    {this.renderActivity(activity)}
+                  </li>
+                )
               })
             }
           </ul>
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 8846d58f..53eddf9e 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -76,9 +76,7 @@
 }
 
 .activity {
-	padding: 35px 10px;
-	border-bottom: 1px solid $grey;
-	font-size: 14px;
+	padding: 0 100px;
 
 	.left, .center, .right {
 		display: inline-block;
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 5e1fb5eb..2a16f2dc 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -1,10 +1,58 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Moment from 'react-moment'
+import 'moment-timezone'
+import { FaChain } from 'react-icons/lib/fa'
+import { btc } from '../../../../../utils'
+import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from './Transaction.scss'
 
-const Transaction = () => (
-  <div>
-    transaction
+const Transaction = ({ transaction, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+      <FaChain />
+    </i>
+    <div className={styles.data}>
+      <div className={styles.title}>
+        {transaction.tx_hash}
+      </div>
+      <div className={styles.subtitle}>
+        {transaction.num_confirmations} confirmations
+      </div>
+    </div>
+    <div className={styles.date}>
+      <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
+    </div>
+    <div className={`${styles.amount} ${transaction.amount < 0 ? styles.negative : styles.positive}`}>
+      <section>
+        <CurrencyIcon
+          currency={ticker.currency}
+          crypto={ticker.crypto}
+          styles={{ verticalAlign: 'top', width: '24px' }}
+        />
+      </section>
+      <section>
+        <span className='hint--top' data-hint='Transaction amount'>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(transaction.amount)
+          }
+        </span>
+        <span className='hint--bottom' data-hint='Transaction fee'>
+          {
+            transaction.amount < 0 ?
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(transaction.total_fees)
+              :
+              null
+          }
+        </span>
+      </section>
+    </div>
   </div>
 )
 
diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/routes/activity/components/components/Transaction/Transaction.scss
index e69de29b..5bf06196 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.scss
+++ b/app/routes/activity/components/components/Transaction/Transaction.scss
@@ -0,0 +1,111 @@
+@import '../../../../../variables.scss';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  max-width: 960px;
+  margin: 0 auto;
+  height: 76px;
+  align-items: center;
+  border-bottom: 1px solid $grey;
+  font-size: 14px;
+  transition: background-color .1s linear;
+  transition-delay: .1s;
+  color: $darkestgrey;
+  position: relative;
+}
+
+.icon {
+  display: block;
+  margin-right: 20px;
+  flex: none;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border: 1px solid $darkestgrey;
+  border-radius: 50%;
+
+  svg {
+    color: $main;
+    font-size: 16px;
+    vertical-align: middle;
+    display: flex;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    margin: 0 auto;
+  }
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  flex: 6 0;
+
+  .title {
+    flex: 8 0;
+  }
+
+  .subtitle {
+    padding-left: 20px;
+    flex: 2 0;
+  }
+}
+
+.subtitle, .date {
+  text-align: center;
+}
+
+.date {
+  padding-left: 20px;
+  flex: 1 0;
+}
+
+.amount {
+  flex: 1 0;
+  padding-left: 20px;
+
+  &.negative {
+    font-weight: 200;
+  }
+
+  &.positive {
+    color: $main;
+    font-weight: 500;
+  }
+
+  section {
+    display: inline-block;
+    vertical-align: top;
+    text-align: right;
+    font-size: 0;
+    margin: 0;
+    padding: 0;
+
+    &:nth-child(1) {
+      width: 20%;
+    }
+
+    &:nth-child(2) {
+      width: 80%;
+    }
+  }
+
+  svg {
+    font-size: 20px;
+  }
+
+  span {
+    display: block;
+
+    &:nth-child(1) {
+      font-size: 14px;
+    }
+
+    &:nth-child(2) {
+      font-size: 10px;
+    }
+  }
+}
+
diff --git a/app/tooltip.scss b/app/tooltip.scss
index 65eb544c..6ca18e7a 100644
--- a/app/tooltip.scss
+++ b/app/tooltip.scss
@@ -130,4 +130,4 @@
 .hint--left:hover:before {
   -webkit-transform: translateX(-8px);
   transform: translateX(-8px);
-}
\ No newline at end of file
+}

From b77c1f5b7375b0ce3400352a07038d488e666738 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 13:05:51 -0500
Subject: [PATCH 06/21] feature(activity): style LN payment and request
 components

---
 app/routes/activity/components/Activity.js    |   5 +-
 .../components/components/Activity.scss       | 117 ++++++++++++++++++
 .../components/components/Invoice/Invoice.js  |  60 ++++++++-
 .../components/components/Payment/Payment.js  |  59 ++++++++-
 .../components/Transaction/Transaction.js     |  12 +-
 5 files changed, 242 insertions(+), 11 deletions(-)
 create mode 100644 app/routes/activity/components/components/Activity.scss

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 0ce06382..37a061b6 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -37,10 +37,11 @@ class Activity extends Component {
       return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} />
     } else if (activity.hasOwnProperty('payment_request')) {
       // activity is an LN invoice
-      return <Invoice invoice={activity} />
+      console.log('activity: ', activity)
+      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} />
     } else {
       // activity is an LN payment
-      return <Payment payment={activity} />
+      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} />
     }
   }
 
diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss
new file mode 100644
index 00000000..de728313
--- /dev/null
+++ b/app/routes/activity/components/components/Activity.scss
@@ -0,0 +1,117 @@
+@import '../../../../variables.scss';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  max-width: 960px;
+  margin: 0 auto;
+  height: 76px;
+  align-items: center;
+  border-bottom: 1px solid $grey;
+  font-size: 14px;
+  transition: background-color .1s linear;
+  transition-delay: .1s;
+  color: $darkestgrey;
+  position: relative;
+}
+
+.label {
+  position: absolute;
+  top: 0;
+  left: -25%;
+}
+
+.icon {
+  display: block;
+  margin-right: 20px;
+  flex: none;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border: 1px solid $darkestgrey;
+  border-radius: 50%;
+
+  svg {
+    color: $main;
+    font-size: 16px;
+    vertical-align: middle;
+    display: flex;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    margin: 0 auto;
+  }
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  flex: 6 0;
+
+  .title {
+    flex: 8 0;
+  }
+
+  .subtitle {
+    padding-left: 20px;
+    flex: 2 0;
+  }
+}
+
+.subtitle, .date {
+  text-align: center;
+}
+
+.date {
+  padding-left: 20px;
+  flex: 1 0;
+}
+
+.amount {
+  flex: 1 0;
+  padding-left: 20px;
+
+  &.negative {
+    font-weight: 200;
+  }
+
+  &.positive {
+    color: $main;
+    font-weight: 500;
+  }
+
+  section {
+    display: inline-block;
+    vertical-align: top;
+    text-align: right;
+    font-size: 0;
+    margin: 0;
+    padding: 0;
+
+    &:nth-child(1) {
+      width: 20%;
+    }
+
+    &:nth-child(2) {
+      width: 80%;
+    }
+  }
+
+  svg {
+    font-size: 20px;
+  }
+
+  span {
+    display: block;
+
+    &:nth-child(1) {
+      font-size: 14px;
+    }
+
+    &:nth-child(2) {
+      font-size: 10px;
+    }
+  }
+}
+
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 89db79aa..ac1b2000 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -1,10 +1,62 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './Invoice.scss'
+import Moment from 'react-moment'
+import 'moment-timezone'
+import { FaBolt } from 'react-icons/lib/fa'
+import { btc } from '../../../../../utils'
+import CurrencyIcon from '../../../../../components/CurrencyIcon'
+import styles from '../Activity.scss'
 
-const Invoice = () => (
-  <div>
-    Invoice
+const Invoice = ({ invoice, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+      <FaBolt />
+    </i>
+    <div className={styles.data}>
+      <div className={styles.title}>
+        {invoice.r_hash.toString('hex')}
+      </div>
+      <div className={styles.subtitle}>
+        {invoice.memo}
+      </div>
+    </div>
+    <div className={styles.date}>
+      <Moment format='MMM Do'>
+        {
+          invoice.settled ?
+            invoice.settle_date * 1000
+            :
+            invoice.creation_date * 1000
+        }
+      </Moment>
+    </div>
+    <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
+      <section>
+        <CurrencyIcon
+          currency={ticker.currency}
+          crypto={ticker.crypto}
+          styles={{ verticalAlign: 'top', width: '24px' }}
+        />
+      </section>
+      <section>
+        <span className='hint--top' data-hint='Invoice amount'>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(invoice.value)
+          }
+        </span>
+        <span className='hint--bottom' data-hint='Invoice fee'>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(invoice.fee)
+          }
+        </span>
+      </section>
+    </div>
   </div>
 )
 
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 833b51f6..e131b91e 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -1,10 +1,61 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './Payment.scss'
+import Moment from 'react-moment'
+import 'moment-timezone'
+import { FaBolt } from 'react-icons/lib/fa'
+import { btc } from '../../../../../utils'
+import CurrencyIcon from '../../../../../components/CurrencyIcon'
+import styles from '../Activity.scss'
 
-const Payment = () => (
-  <div>
-    Payment
+const Payment = ({ payment, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+      <FaBolt />
+    </i>
+    <div className={styles.data}>
+      <div className={styles.title}>
+        {payment.payment_hash}
+      </div>
+      <div className={styles.subtitle}>
+        {
+          payment.path.length > 1 ? 
+          `${payment.path.length} hops`
+          :
+          'Directly routed'
+        }
+      </div>
+    </div>
+    <div className={styles.date}>
+      <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
+    </div>
+    <div className={styles.amount}>
+      <section>
+        <CurrencyIcon
+          currency={ticker.currency}
+          crypto={ticker.crypto}
+          styles={{ verticalAlign: 'top', width: '24px' }}
+        />
+      </section>
+      <section>
+        <span className='hint--top' data-hint='Payment amount'>
+          -
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(payment.value)
+          }
+        </span>
+        <span className='hint--bottom' data-hint='Payment fee'>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(payment.fee)
+          }
+        </span>
+      </section>
+    </div>
   </div>
 )
 
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 2a16f2dc..f8f42f3e 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -5,10 +5,20 @@ import 'moment-timezone'
 import { FaChain } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
-import styles from './Transaction.scss'
+import styles from '../Activity.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker }) => (
   <div className={styles.container}>
+    <div className={styles.label}>
+      <h3>
+        {
+          transaction.amount < 0 ?
+            'Sent'
+            :
+            'Received'
+        }
+      </h3>
+    </div>
     <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
       <FaChain />
     </i>

From 91eec1d1630730ad089f0bd18e6ca15f426e5d4d Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 14:03:50 -0500
Subject: [PATCH 07/21] fix(label): redesign activity label

---
 .../components/components/Activity.scss       | 23 +++++++++++--------
 .../components/components/Invoice/Invoice.js  | 19 ++++++++++-----
 .../components/components/Payment/Payment.js  | 19 +++++++--------
 .../components/Transaction/Transaction.js     |  9 +++-----
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss
index de728313..e558c94a 100644
--- a/app/routes/activity/components/components/Activity.scss
+++ b/app/routes/activity/components/components/Activity.scss
@@ -17,14 +17,24 @@
 }
 
 .label {
-  position: absolute;
-  top: 0;
-  left: -25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-right: 20px;
+  width: 65px;
+
+  h3 {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 10px;
+    font-weight: 500;
+    margin-top: 10px;
+  }
 }
 
 .icon {
   display: block;
-  margin-right: 20px;
   flex: none;
   position: relative;
   width: 36px;
@@ -52,11 +62,6 @@
   .title {
     flex: 8 0;
   }
-
-  .subtitle {
-    padding-left: 20px;
-    flex: 2 0;
-  }
 }
 
 .subtitle, .date {
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index ac1b2000..fc03e83b 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -9,16 +9,23 @@ import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-      <FaBolt />
-    </i>
+    <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+        <FaBolt />
+      </i>
+      <h3>
+        {
+          invoice.settled ?
+            'Received'
+            :
+            'Requested'
+        }
+      </h3>
+    </div>
     <div className={styles.data}>
       <div className={styles.title}>
         {invoice.r_hash.toString('hex')}
       </div>
-      <div className={styles.subtitle}>
-        {invoice.memo}
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index e131b91e..37da8145 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -9,21 +9,18 @@ import styles from '../Activity.scss'
 
 const Payment = ({ payment, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-      <FaBolt />
-    </i>
+    <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+        <FaBolt />
+      </i>
+      <h3>
+        Sent
+      </h3>
+    </div>
     <div className={styles.data}>
       <div className={styles.title}>
         {payment.payment_hash}
       </div>
-      <div className={styles.subtitle}>
-        {
-          payment.path.length > 1 ? 
-          `${payment.path.length} hops`
-          :
-          'Directly routed'
-        }
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index f8f42f3e..8b3bb08f 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -10,6 +10,9 @@ import styles from '../Activity.scss'
 const Transaction = ({ transaction, ticker, currentTicker }) => (
   <div className={styles.container}>
     <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+        <FaChain />
+      </i>
       <h3>
         {
           transaction.amount < 0 ?
@@ -19,16 +22,10 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
         }
       </h3>
     </div>
-    <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
-      <FaChain />
-    </i>
     <div className={styles.data}>
       <div className={styles.title}>
         {transaction.tx_hash}
       </div>
-      <div className={styles.subtitle}>
-        {transaction.num_confirmations} confirmations
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>

From 6c1eb42d3638767bbb73f84be74918ed27cc223c Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 14:21:01 -0500
Subject: [PATCH 08/21] fix(header): redesign activity header

---
 app/routes/activity/components/Activity.js    | 15 ++--------
 app/routes/activity/components/Activity.scss  | 30 ++++++-------------
 .../components/components/Invoice/Invoice.js  |  7 +----
 3 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 37a061b6..3ff58af9 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -71,7 +71,7 @@ class Activity extends Component {
             value={tab === 1 ? '' : invoicesSearchText}
             onChange={event => (tab === 1 ? null : searchInvoices(event.target.value))}
             className={`${styles.text} ${styles.input}`}
-            placeholder={tab === 1 ? 'Search transactions by amount, public key, channel' : 'Search requests by memo'}
+            placeholder={tab === 1 ? 'Search by amount, hash, memo, etc' : 'Search requests by memo'}
             type='text'
             id='invoiceSearch'
           />
@@ -79,18 +79,7 @@ class Activity extends Component {
 
         <div className={styles.activities}>
           <header className={styles.header}>
-            <span
-              className={`${styles.title} ${tab === 1 ? styles.active : null}`}
-              onClick={() => this.setState({ tab: 1 })}
-            >
-              Payments
-            </span>
-            <span
-              className={`${styles.title} ${tab === 2 ? styles.active : null}`}
-              onClick={() => this.setState({ tab: 2 })}
-            >
-              Requests
-            </span>
+            <h2>Activity</h2>
           </header>
           <ul className={styles.activityContainer}>
             {
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 53eddf9e..569b95fc 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -34,31 +34,19 @@
 	background: $lightgrey;
 
 	.header {
-	  width: 75%;
+		padding: 60px 0 20px 0;
 	  margin: 0 auto;
 		
-		.title {
-			display: inline-block;
-		  margin: 60px 0 20px 0;
-		  padding: 5px 10px;
-			background: $lightgrey;
-			color: $darkestgrey;
+		h2 {
+			margin-left: auto;
+			margin-right: auto;
+			padding-left: 100px;
+			padding-right: 100px;
 			text-transform: uppercase;
+			letter-spacing: 1.5px;
+			color: $darkestgrey;
 			font-size: 14px;
-		  font-weight: 400;
-		  letter-spacing: 1.6px;
-		  cursor: pointer;
-		  transition: all 0.5s;
-		  
-		  &:first-child {
-		  	border-right: 1px solid $darkestgrey;
-		  }
-
-
-		  &.active {
-				color: $main;
-				font-weight: bold;
-		  }
+			font-weight: 400;
 		}
 	}
 }
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index fc03e83b..e634ac90 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -29,12 +29,7 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>
-        {
-          invoice.settled ?
-            invoice.settle_date * 1000
-            :
-            invoice.creation_date * 1000
-        }
+        {invoice.creation_date * 1000}
       </Moment>
     </div>
     <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>

From 430d016e785f1d8c9e1f385795c2cba87ed66dd9 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 15:19:11 -0500
Subject: [PATCH 09/21] fix(styles): remove unneeded padding

---
 app/routes/activity/components/Activity.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 569b95fc..6b28b1dd 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -53,8 +53,6 @@
 
 .activityContainer {
 	background: $white;
-	padding: 20px 0;
-	
 }
 
 .activityList {
@@ -66,6 +64,12 @@
 .activity {
 	padding: 0 100px;
 
+	&:hover {
+		background-color: #f0f0f0;
+    transition-delay: 0s;
+    outline: $grey solid 1px;
+	}
+
 	.left, .center, .right {
 		display: inline-block;
 		vertical-align: top;

From dd5ef86dc93d8a20cc2b9b86c30c818ea1af0ead Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 16:13:30 -0500
Subject: [PATCH 10/21] feature(activity modal): add activity reducer and basic
 activity modal functionality

---
 app/reducers/activity.js                      | 50 +++++++++++++++++++
 app/reducers/index.js                         |  4 +-
 app/routes/activity/components/Activity.js    | 19 ++++---
 .../components/components/Invoice/Invoice.js  |  4 +-
 .../components/{ => Modal}/Modal.js           | 16 +++---
 .../components/components/Modal/index.js      |  3 ++
 .../components/components/Payment/Payment.js  |  4 +-
 .../components/Transaction/Transaction.js     |  4 +-
 .../activity/containers/ActivityContainer.js  |  5 +-
 9 files changed, 87 insertions(+), 22 deletions(-)
 create mode 100644 app/reducers/activity.js
 rename app/routes/activity/components/components/{ => Modal}/Modal.js (70%)
 create mode 100644 app/routes/activity/components/components/Modal/index.js

diff --git a/app/reducers/activity.js b/app/reducers/activity.js
new file mode 100644
index 00000000..e1af749c
--- /dev/null
+++ b/app/reducers/activity.js
@@ -0,0 +1,50 @@
+// ------------------------------------
+// Initial State
+// ------------------------------------
+const initialState = {
+  filter: 'ALL_ACTIVITY',
+  modal: {
+    modalType: null,
+    modalProps: {}
+  }
+}
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const SHOW_ACTIVITY_MODAL = 'SHOW_ACTIVITY_MODAL'
+export const HIDE_ACTIVITY_MODAL = 'HIDE_ACTIVITY_MODAL'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function showActivityModal(modalType, modalProps) {
+  return {
+    type: SHOW_ACTIVITY_MODAL,
+    modalType,
+    modalProps
+  }
+}
+
+export function hideActivityModal() {
+  return {
+    type: HIDE_ACTIVITY_MODAL
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
+  [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function activityReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 75b0597e..4c906733 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -12,6 +12,7 @@ import invoice from './invoice'
 import modal from './modal'
 import address from './address'
 import transaction from './transaction'
+import activity from './activity'
 
 const rootReducer = combineReducers({
   router,
@@ -25,7 +26,8 @@ const rootReducer = combineReducers({
   invoice,
   modal,
   address,
-  transaction
+  transaction,
+  activity
 })
 
 export default rootReducer
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 3ff58af9..11602edc 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -9,6 +9,8 @@ import Invoice from './components/Invoice'
 import Payment from './components/Payment'
 import Transaction from './components/Transaction'
 
+import Modal from './components/Modal'
+
 import styles from './Activity.scss'
 
 class Activity extends Component {
@@ -30,18 +32,17 @@ class Activity extends Component {
   }
 
   renderActivity(activity) {
-    const { ticker, currentTicker } = this.props
+    const { ticker, currentTicker, showActivityModal } = this.props
 
     if (activity.hasOwnProperty('block_hash')) {
       // activity is an on-chain tx
-      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     } else if (activity.hasOwnProperty('payment_request')) {
       // activity is an LN invoice
-      console.log('activity: ', activity)
-      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     } else {
       // activity is an LN payment
-      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     }
   }
 
@@ -58,11 +59,17 @@ class Activity extends Component {
       paymentModalOpen,
       invoiceModalOpen,
       currentTicker,
-      sortedActivity
+      sortedActivity,
+      activity: { modal },
+      hideActivityModal
     } = this.props
+    
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
+
     return (
       <div>
+        <Modal modalType={modal.modalType} modalProps={modal.modalProps} hideActivityModal={hideActivityModal} />
+        
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
             <MdSearch />
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index e634ac90..c644fc91 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Invoice = ({ invoice, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('INVOICE', { invoice })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
         <FaBolt />
diff --git a/app/routes/activity/components/components/Modal.js b/app/routes/activity/components/components/Modal/Modal.js
similarity index 70%
rename from app/routes/activity/components/components/Modal.js
rename to app/routes/activity/components/components/Modal/Modal.js
index 145ed1bf..b126e0c6 100644
--- a/app/routes/activity/components/components/Modal.js
+++ b/app/routes/activity/components/components/Modal/Modal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
-const Modal = ({ isOpen, resetObject, children }) => {
+const Modal = ({ modalType, modalProps, hideActivityModal }) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer'
@@ -16,26 +16,26 @@ const Modal = ({ isOpen, resetObject, children }) => {
       margin: '50px auto'
     }
   }
+  
+  if (!modalType) { return null }
 
   return (
     <ReactModal
-      isOpen={isOpen}
-      contentLabel='No Overlay Click Modal'
+      isOpen
       ariaHideApp
       shouldCloseOnOverlayClick
-      onRequestClose={() => resetObject(null)}
+      contentLabel='No Overlay Click Modal'
+      onRequestClose={() => hideActivityModal()}
       parentSelector={() => document.body}
       style={customStyles}
     >
-      {children}
+      <h1>hi!</h1>
     </ReactModal>
   )
 }
 
 Modal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  resetObject: PropTypes.func.isRequired,
-  children: PropTypes.object
+  modalType: PropTypes.string
 }
 
 export default Modal
diff --git a/app/routes/activity/components/components/Modal/index.js b/app/routes/activity/components/components/Modal/index.js
new file mode 100644
index 00000000..1e9e3808
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/index.js
@@ -0,0 +1,3 @@
+import Modal from './Modal'
+
+export default Modal
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 37da8145..9aec7c42 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Payment = ({ payment, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
         <FaBolt />
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 8b3bb08f..b43af1e6 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Transaction = ({ transaction, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
         <FaChain />
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index c860ea0c..ed1197ba 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -12,6 +12,7 @@ import {
   paymentSelectors
 } from '../../../reducers/payment'
 import { fetchTransactions } from '../../../reducers/transaction'
+import { showActivityModal, hideActivityModal } from '../../../reducers/activity'
 import { activitySelectors } from '../../../selectors'
 import Activity from '../components/Activity'
 
@@ -21,7 +22,9 @@ const mapDispatchToProps = {
   fetchPayments,
   fetchInvoices,
   fetchTransactions,
-  searchInvoices
+  searchInvoices,
+  showActivityModal,
+  hideActivityModal
 }
 
 const mapStateToProps = state => ({

From e2a3da4281315c23aeeaf381e3a7f8c6a75211b8 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 16:40:46 -0500
Subject: [PATCH 11/21] feature(invoice): design invoice modal

---
 app/routes/activity/components/Activity.js    |  8 +-
 .../components/Modal/Invoice/Invoice.js       | 58 ++++++++++++++
 .../components/Modal/Invoice/Invoice.scss     | 75 +++++++++++++++++++
 .../components/Modal/Invoice/index.js         |  3 +
 .../components/components/Modal/Modal.js      | 16 +++-
 .../components/Modal/Payment/Payment.js       |  0
 .../components/Modal/Payment/Payment.scss     |  0
 .../components/Modal/Payment/index.js         |  3 +
 .../Modal/Transaction/Transaction.js          |  0
 .../Modal/Transaction/Transaction.scss        |  0
 .../components/Modal/Transaction/index.js     |  3 +
 11 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 app/routes/activity/components/components/Modal/Invoice/Invoice.js
 create mode 100644 app/routes/activity/components/components/Modal/Invoice/Invoice.scss
 create mode 100644 app/routes/activity/components/components/Modal/Invoice/index.js
 create mode 100644 app/routes/activity/components/components/Modal/Payment/Payment.js
 create mode 100644 app/routes/activity/components/components/Modal/Payment/Payment.scss
 create mode 100644 app/routes/activity/components/components/Modal/Payment/index.js
 create mode 100644 app/routes/activity/components/components/Modal/Transaction/Transaction.js
 create mode 100644 app/routes/activity/components/components/Modal/Transaction/Transaction.scss
 create mode 100644 app/routes/activity/components/components/Modal/Transaction/index.js

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 11602edc..d962325f 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -68,7 +68,13 @@ class Activity extends Component {
 
     return (
       <div>
-        <Modal modalType={modal.modalType} modalProps={modal.modalProps} hideActivityModal={hideActivityModal} />
+        <Modal
+          modalType={modal.modalType}
+          modalProps={modal.modalProps}
+          hideActivityModal={hideActivityModal}
+          ticker={ticker}
+          currentTicker={currentTicker}
+        />
         
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
new file mode 100644
index 00000000..a1ea8c86
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Moment from 'react-moment'
+import 'moment-timezone'
+
+import QRCode from 'qrcode.react'
+
+import { MdCheck } from 'react-icons/lib/md'
+
+import CurrencyIcon from '../../../../../../components/CurrencyIcon'
+import { btc } from '../../../../../../utils'
+
+import styles from './Invoice.scss'
+
+
+const Invoice = ({ invoice, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <h3>{invoice.memo}</h3>
+    <h1>
+      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
+      <span className={styles.value}>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(invoice.value)
+        }
+      </span>
+    </h1>
+    <div className={styles.qrcode}>
+      <QRCode value={invoice.payment_request} size={200} />
+      <input
+        readOnly
+        className={styles.paymentRequest}
+        onClick={event => event.target.select()}
+        defaultValue={invoice.payment_request}
+      />
+    </div>
+    <div className={styles.settled}>
+      {
+        invoice.settled ?
+          <p><MdCheck style={{ verticalAlign: 'top' }} /> Paid</p>
+          :
+          <p>Not Paid</p>
+      }
+    </div>
+    <p className={styles.date}>
+      Created on
+      <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>
+    </p>
+  </div>
+)
+
+Invoice.propTypes = {
+}
+
+export default Invoice
diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
new file mode 100644
index 00000000..6a55e812
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss
@@ -0,0 +1,75 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h3 {
+    font-size: 24px;
+    color: $black;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 20px 20px 60px 0;
+
+    svg {
+      font-size: 30px;
+      vertical-align: top;
+    }
+
+    span svg[data-icon='ltc'] {
+      width: 30px;
+      height: 30px;
+      vertical-align: top;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+
+    .value {
+      font-size: 60px;
+    }
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .paymentRequest {
+      text-align: center;
+      font-size: 0.5vw;
+      margin-top: 20px;
+      padding: 5px;
+      border-radius: 5px;
+      background: $lightgrey;
+      border: 1px solid $darkgrey;
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .settled {
+    text-align: center;
+    color: $main;
+    text-transform: uppercase;
+    font-size: 20px;
+    margin: 30px 0;
+    font-weight: bold;
+
+    svg {
+      line-height: 20px;
+    }
+  }
+
+  .date {
+    text-align: center;
+
+    time {
+      margin-left: 3px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Modal/Invoice/index.js b/app/routes/activity/components/components/Modal/Invoice/index.js
new file mode 100644
index 00000000..a72db95c
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/Invoice/index.js
@@ -0,0 +1,3 @@
+import Invoice from './Invoice'
+
+export default Invoice
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js
index b126e0c6..244a6307 100644
--- a/app/routes/activity/components/components/Modal/Modal.js
+++ b/app/routes/activity/components/components/Modal/Modal.js
@@ -2,7 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
-const Modal = ({ modalType, modalProps, hideActivityModal }) => {
+import Transaction from './Transaction'
+import Payment from './Payment'
+import Invoice from './Invoice'
+
+const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => {
+  const MODAL_COMPONENTS = {
+    TRANSACTION: Transaction,
+    PAYMENT: Payment,
+    INVOICE: Invoice
+  
+  }
   const customStyles = {
     overlay: {
       cursor: 'pointer'
@@ -19,6 +29,8 @@ const Modal = ({ modalType, modalProps, hideActivityModal }) => {
   
   if (!modalType) { return null }
 
+  const SpecificModal = MODAL_COMPONENTS[modalType]
+
   return (
     <ReactModal
       isOpen
@@ -29,7 +41,7 @@ const Modal = ({ modalType, modalProps, hideActivityModal }) => {
       parentSelector={() => document.body}
       style={customStyles}
     >
-      <h1>hi!</h1>
+      <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />
     </ReactModal>
   )
 }
diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.js b/app/routes/activity/components/components/Modal/Payment/Payment.js
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.scss b/app/routes/activity/components/components/Modal/Payment/Payment.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Modal/Payment/index.js b/app/routes/activity/components/components/Modal/Payment/index.js
new file mode 100644
index 00000000..ba6d6e16
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/Payment/index.js
@@ -0,0 +1,3 @@
+import Payment from './Payment'
+
+export default Payment
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.js b/app/routes/activity/components/components/Modal/Transaction/Transaction.js
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.scss b/app/routes/activity/components/components/Modal/Transaction/Transaction.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Modal/Transaction/index.js b/app/routes/activity/components/components/Modal/Transaction/index.js
new file mode 100644
index 00000000..a5e79192
--- /dev/null
+++ b/app/routes/activity/components/components/Modal/Transaction/index.js
@@ -0,0 +1,3 @@
+import Transaction from './Transaction'
+
+export default Transaction
\ No newline at end of file

From beb23448db3e9c35c51f7afc0e6d76d8925d0ca3 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 18:47:50 -0500
Subject: [PATCH 12/21] feature(payment, transaction): style payment and
 transaction modals

---
 .../components/Modal/Payment/Payment.js       | 45 +++++++++++++
 .../components/Modal/Payment/Payment.scss     | 55 ++++++++++++++++
 .../Modal/Transaction/Transaction.js          | 55 ++++++++++++++++
 .../Modal/Transaction/Transaction.scss        | 63 +++++++++++++++++++
 4 files changed, 218 insertions(+)

diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.js b/app/routes/activity/components/components/Modal/Payment/Payment.js
index e69de29b..d9515da8 100644
--- a/app/routes/activity/components/components/Modal/Payment/Payment.js
+++ b/app/routes/activity/components/components/Modal/Payment/Payment.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Moment from 'react-moment'
+import 'moment-timezone'
+
+import QRCode from 'qrcode.react'
+
+import { MdCheck } from 'react-icons/lib/md'
+
+import CurrencyIcon from '../../../../../../components/CurrencyIcon'
+import { btc } from '../../../../../../utils'
+
+import styles from './Payment.scss'
+
+
+const Payment = ({ payment, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <h3>{payment.payment_hash}</h3>
+    <h1>
+      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
+      <span className={styles.value}>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(payment.value)
+        }
+      </span>
+    </h1>
+    <dl>
+      <dt>Fee</dt>
+      <dd>{payment.fee}</dd>
+      <dt>Date</dt>
+      <dd>
+        <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
+      </dd>
+    </dl>
+  </div>
+)
+
+Payment.propTypes = {
+}
+
+export default Payment
diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.scss b/app/routes/activity/components/components/Modal/Payment/Payment.scss
index e69de29b..304fce58 100644
--- a/app/routes/activity/components/components/Modal/Payment/Payment.scss
+++ b/app/routes/activity/components/components/Modal/Payment/Payment.scss
@@ -0,0 +1,55 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 60px 30px 60px 0;
+
+    svg {
+      font-size: 30px;
+      vertical-align: top;
+    }
+
+    span svg[data-icon='ltc'] {
+      width: 30px;
+      height: 30px;
+      vertical-align: top;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+
+    .value {
+      font-size: 80px;
+    }
+  }
+
+  h3 {
+    font-size: 14px;
+    text-align: center;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dt {
+    text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dd {
+    text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+  }
+}
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.js b/app/routes/activity/components/components/Modal/Transaction/Transaction.js
index e69de29b..a886d8ff 100644
--- a/app/routes/activity/components/components/Modal/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Modal/Transaction/Transaction.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Moment from 'react-moment'
+import 'moment-timezone'
+
+import QRCode from 'qrcode.react'
+
+import { MdCheck } from 'react-icons/lib/md'
+
+import CurrencyIcon from '../../../../../../components/CurrencyIcon'
+import { btc } from '../../../../../../utils'
+
+import styles from './Transaction.scss'
+
+
+const Transaction = ({ transaction, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <h2>
+      {
+        transaction.amount < 0 ?
+          'Sent'
+          :
+          'Received'
+      }
+    </h2>
+    <h3>{transaction.tx_hash}</h3>
+    <h1>
+      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
+      <span className={styles.value}>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(transaction.amount)
+        }
+      </span>
+    </h1>
+    <dl>
+      <dt>Confirmations</dt>
+      <dd>{transaction.num_confirmations}</dd>
+      <dt>Fee</dt>
+      <dd>{transaction.total_fees}</dd>
+      <dt>Date</dt>
+      <dd>
+        <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
+      </dd>
+    </dl>
+  </div>
+)
+
+Transaction.propTypes = {
+}
+
+export default Transaction
diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.scss b/app/routes/activity/components/components/Modal/Transaction/Transaction.scss
index e69de29b..283de75b 100644
--- a/app/routes/activity/components/components/Modal/Transaction/Transaction.scss
+++ b/app/routes/activity/components/components/Modal/Transaction/Transaction.scss
@@ -0,0 +1,63 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 60px 30px 60px 0;
+
+    svg {
+      font-size: 30px;
+      vertical-align: top;
+    }
+
+    span svg[data-icon='ltc'] {
+      width: 30px;
+      height: 30px;
+      vertical-align: top;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+
+    .value {
+      font-size: 75px;
+    }
+  }
+
+  h3 {
+    font-size: 14px;
+    text-align: center;
+    color: $black;
+    font-weight: bold;
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-size: 24px;
+  }
+
+  dt {
+    text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dd {
+    text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+  }
+}
\ No newline at end of file

From 27a6f3c803e3416a8d2f0a6c15a1df52a82fa229 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 19:03:20 -0500
Subject: [PATCH 13/21] fix(old code): remove old code

---
 .../components/components/Invoices.js         | 110 ---------------
 .../components/components/Invoices.scss       | 125 ------------------
 .../components/components/Payments.js         | 112 ----------------
 .../components/components/Payments.scss       | 102 --------------
 4 files changed, 449 deletions(-)
 delete mode 100644 app/routes/activity/components/components/Invoices.js
 delete mode 100644 app/routes/activity/components/components/Invoices.scss
 delete mode 100644 app/routes/activity/components/components/Payments.js
 delete mode 100644 app/routes/activity/components/components/Payments.scss

diff --git a/app/routes/activity/components/components/Invoices.js b/app/routes/activity/components/components/Invoices.js
deleted file mode 100644
index 6be86f51..00000000
--- a/app/routes/activity/components/components/Invoices.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Moment from 'react-moment'
-import 'moment-timezone'
-import { MdCheck } from 'react-icons/lib/md'
-import QRCode from 'qrcode.react'
-import Modal from './Modal'
-import CurrencyIcon from '../../../../components/CurrencyIcon'
-import { btc } from '../../../../utils'
-import styles from './Invoices.scss'
-
-const Invoices = ({
-  invoice,
-  invoices,
-  ticker,
-  setInvoice,
-  invoiceModalOpen,
-  currentTicker
-}) => (
-  <div>
-    <Modal isOpen={invoiceModalOpen} resetObject={setInvoice}>
-      {
-        invoice ?
-          <div className={styles.invoiceModal}>
-            <h3>{invoice.memo}</h3>
-            <h1>
-              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-              <span className={styles.value}>
-                {
-                  ticker.currency === 'usd' ?
-                    btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-                    :
-                    btc.satoshisToBtc(invoice.value)
-                }
-              </span>
-            </h1>
-            <div className={styles.qrcode}>
-              <QRCode value={invoice.payment_request} size={200} />
-              <input
-                readOnly
-                className={styles.paymentRequest}
-                onClick={event => event.target.select()}
-                defaultValue={invoice.payment_request}
-              />
-            </div>
-            <div className={styles.settled}>
-              {
-                invoice.settled ?
-                  <p><MdCheck style={{ verticalAlign: 'top' }} /> Paid</p>
-                  :
-                  <p>Not Paid</p>
-              }
-            </div>
-            <p className={styles.date}>
-              Created on
-              <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>
-            </p>
-          </div>
-          :
-          null
-      }
-    </Modal>
-    <ul className={styles.invoices}>
-      <li className={styles.invoiceTitles}>
-        <div className={styles.left}>
-          <div>Payment Request</div>
-        </div>
-        <div className={styles.center}>
-          <div>Memo</div>
-        </div>
-        <div className={styles.right}>
-          <div>Amount</div>
-        </div>
-      </li>
-      {
-        invoices.map((invoiceItem, index) => (
-          <li key={index} className={styles.invoice} onClick={() => setInvoice(invoiceItem)}>
-            <div className={styles.left}>
-              <div className={styles.path}>{`${invoiceItem.payment_request.substring(0, 75)}...`}</div>
-            </div>
-            <div className={styles.center}>
-              <div>{invoiceItem.memo}</div>
-            </div>
-            <div className={styles.right}>
-              <div className={invoiceItem.settled ? styles.settled : null}>
-                {
-                  ticker.currency === 'usd' ?
-                    btc.satoshisToUsd(invoiceItem.value, currentTicker.price_usd)
-                    :
-                    btc.satoshisToBtc(invoiceItem.value)
-                }
-              </div>
-            </div>
-          </li>
-        ))
-      }
-    </ul>
-  </div>
-)
-
-Invoices.propTypes = {
-  invoice: PropTypes.object,
-  invoices: PropTypes.array.isRequired,
-  ticker: PropTypes.object.isRequired,
-  setInvoice: PropTypes.func.isRequired,
-  invoiceModalOpen: PropTypes.bool.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Invoices
diff --git a/app/routes/activity/components/components/Invoices.scss b/app/routes/activity/components/components/Invoices.scss
deleted file mode 100644
index 0a30b26b..00000000
--- a/app/routes/activity/components/components/Invoices.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import '../../../../variables.scss';
-
-.invoiceModal {
-	padding: 40px;
-
-	h3 {
-		font-size: 24px;
-		color: $black;
-		font-weight: bold;
-		text-align: center;
-		margin-bottom: 10px;
-	}
-
-	h1 {
-		text-align: center;
-		color: $main;
-		margin: 20px 20px 60px 0;
-
-		svg {
-			font-size: 30px;
-			vertical-align: top;
-		}
-
-		span svg[data-icon='ltc'] {
-			width: 30px;
-			height: 30px;
-			vertical-align: top;
-
-			g {
-				transform: scale(1.75) translate(-5px, -5px);
-			}
-		}
-
-		.value {
-			font-size: 60px;
-		}
-	}
-
-	.qrcode {
-		text-align: center;
-
-		.paymentRequest {
-			text-align: center;
-			font-size: 0.5vw;
-			margin-top: 20px;
-			padding: 5px;
-			border-radius: 5px;
-			background: $lightgrey;
-			border: 1px solid $darkgrey;
-			display: block;
-			width: 100%;
-		}
-	}
-
-	.settled {
-		text-align: center;
-		color: $main;
-		text-transform: uppercase;
-		font-size: 20px;
-		margin: 30px 0;
-		font-weight: bold;
-
-		svg {
-			line-height: 20px;
-		}
-	}
-
-	.date {
-		text-align: center;
-
-		time {
-			margin-left: 3px;
-		}
-	}
-}
-
-.invoices {
-	width: 75%;
-	margin: 0 auto;
-	background: $white;
-}
-
-.invoice, .invoiceTitles {
-	display: flex;
-	flex-direction: 'row';
-	padding: 35px 10px;
-	border-bottom: 1px solid $grey;
-	font-size: 14px;
-
-	.left {
-		flex: 7;
-	}
-
-	.center {
-		flex: 2;
-	}
-
-	.right {
-		flex: 1;
-	}
-
-	.settled {
-		color: $main;
-		font-weight: bold;
-	}
-}
-
-.invoiceTitles {
-	border: none;
-
-	.left, .center, .right {
-		color: $black;
-		text-transform: uppercase;
-		font-size: 16px;
-		font-weight: bold;
-	}
-}
-
-.invoice {
-	cursor: pointer;
-
-	&:hover {
-		background: #f0f0f0;
-	}
-}
diff --git a/app/routes/activity/components/components/Payments.js b/app/routes/activity/components/components/Payments.js
deleted file mode 100644
index b65875e4..00000000
--- a/app/routes/activity/components/components/Payments.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Moment from 'react-moment'
-import 'moment-timezone'
-import Modal from './Modal'
-import CurrencyIcon from '../../../../components/CurrencyIcon'
-import { btc } from '../../../../utils'
-import styles from './Payments.scss'
-
-const Payments = ({
-  payment,
-  payments,
-  ticker,
-  setPayment,
-  paymentModalOpen,
-  currentTicker
-}) => (
-  <div>
-    <Modal isOpen={paymentModalOpen} resetObject={setPayment}>
-      {
-        payment ?
-          <div className={styles.paymentModal}>
-            <h3>{payment.payment_hash}</h3>
-            <h1>
-              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-              <span className={styles.value}>
-                {
-                  ticker.currency === 'usd' ?
-                    btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-                    :
-                    btc.satoshisToBtc(payment.value)
-                }
-              </span>
-            </h1>
-            <dl>
-              <dt>Fee</dt>
-              <dd>{payment.fee}</dd>
-              <dt>Date</dt>
-              <dd>
-                <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
-              </dd>
-            </dl>
-          </div>
-          :
-          null
-      }
-    </Modal>
-    <ul className={styles.payments}>
-      <li className={styles.paymentTitles}>
-        <div className={styles.left}>
-          <div>Public Key</div>
-        </div>
-        <div className={styles.center}>
-          <div>Date</div>
-        </div>
-        <div className={styles.center}>
-          <div>Fee</div>
-        </div>
-        <div className={styles.right}>
-          <div>Amount</div>
-        </div>
-      </li>
-      {
-        payments.map((paymentItem, index) =>
-          (
-            <li key={index} className={styles.payment} onClick={() => setPayment(paymentItem)}>
-              <div className={styles.left}>
-                <div className={styles.path}>{paymentItem.path[0]}</div>
-              </div>
-              <div className={styles.center}>
-                <div className={styles.date}>
-                  <Moment format='MMM Do'>{paymentItem.creation_date * 1000}</Moment>
-                </div>
-              </div>
-              <div className={styles.right}>
-                <span className={styles.fee}>
-                  {
-                    ticker.currency === 'usd' ?
-                      btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd)
-                      :
-                      btc.satoshisToBtc(paymentItem.fee)
-                  }
-                </span>
-              </div>
-              <div className={styles.right}>
-                <span className={styles.value}>
-                  {
-                    ticker.currency === 'usd' ?
-                      btc.satoshisToUsd(paymentItem.value, currentTicker.price_usd)
-                      :
-                      btc.satoshisToBtc(paymentItem.value)
-                  }
-                </span>
-              </div>
-            </li>
-          )
-        )
-      }
-    </ul>
-  </div>
-)
-
-Payments.propTypes = {
-  payment: PropTypes.object,
-  payments: PropTypes.array.isRequired,
-  ticker: PropTypes.object.isRequired,
-  setPayment: PropTypes.func.isRequired,
-  paymentModalOpen: PropTypes.bool.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Payments
diff --git a/app/routes/activity/components/components/Payments.scss b/app/routes/activity/components/components/Payments.scss
deleted file mode 100644
index c7a697cb..00000000
--- a/app/routes/activity/components/components/Payments.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '../../../../variables.scss';
-
-.paymentModal {
-	padding: 40px;
-
-	h1 {
-		text-align: center;
-		color: $main;
-		margin: 60px 30px 60px 0;
-
-		svg {
-			font-size: 30px;
-			vertical-align: top;
-		}
-
-		span svg[data-icon='ltc'] {
-			width: 30px;
-			height: 30px;
-			vertical-align: top;
-
-			g {
-				transform: scale(1.75) translate(-5px, -5px);
-			}
-		}
-
-		.value {
-			font-size: 80px;
-		}
-	}
-
-	h3 {
-		font-size: 14px;
-		text-align: center;
-		color: $black;
-		font-weight: bold;
-	}
-
-	dt {
-		text-align: left;
-    float: left;
-    clear: left;
-    font-weight: 500;
-    padding: 20px 35px 19px 0;
-    color: $black;
-    font-weight: bold;
-	}
-
-	dd {
-		text-align: right;
-    font-weight: 400;
-    padding: 19px 0;
-    margin-left: 0;
-    border-top: 1px solid $darkgrey;
-	}
-}
-
-.payments {
-	width: 75%;
-	margin: 0 auto;
-	background: $white;
-}
-
-.payment, .paymentTitles {
-	display: flex;
-	flex-direction: 'row';
-	padding: 35px 10px;
-	border-bottom: 1px solid $grey;
-	font-size: 14px;
-
-	.left, .center, .right {
-		display: inline-block;
-		vertical-align: top;
-	}
-
-	.center, .right {
-		flex: 1;
-	}
-
-	.left {
-		flex: 7;
-	}
-}
-
-.paymentTitles {
-	border: none;
-
-	.left, .center, .right {
-		color: $black;
-		text-transform: uppercase;
-		font-size: 16px;
-		font-weight: bold;
-	}
-}
-
-
-.payment {
-	cursor: pointer;
-
-	&:hover {
-		background: #f0f0f0;
-	}
-}

From 72e0c28e4325e46bd129aad7de7717dffc41842e Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 20:11:43 -0500
Subject: [PATCH 14/21] fix(design): redesign activities based on brandons
 screenshot

---
 app/routes/activity/components/Activity.js    |   2 -
 app/routes/activity/components/Activity.scss  |   1 +
 .../components/components/Activity.scss       | 153 +++++++++---------
 .../components/components/Invoice/Invoice.js  |  89 +++++-----
 .../components/components/Payment/Payment.js  |  73 +++++----
 .../components/Transaction/Transaction.js     |  80 +++++----
 6 files changed, 200 insertions(+), 198 deletions(-)

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index d962325f..6aa82ad2 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -2,8 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
 import { FaChain, FaBolt } from 'react-icons/lib/fa'
-import Payments from './components/Payments'
-import Invoices from './components/Invoices'
 
 import Invoice from './components/Invoice'
 import Payment from './components/Payment'
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 6b28b1dd..94470bbd 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -47,6 +47,7 @@
 			color: $darkestgrey;
 			font-size: 14px;
 			font-weight: 400;
+			max-width: 964px;
 		}
 	}
 }
diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss
index e558c94a..993f309b 100644
--- a/app/routes/activity/components/components/Activity.scss
+++ b/app/routes/activity/components/components/Activity.scss
@@ -16,107 +16,116 @@
   position: relative;
 }
 
-.label {
+.clock {
   display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: center;
   align-items: center;
-  margin-right: 20px;
-  width: 65px;
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 10px;
-    font-weight: 500;
-    margin-top: 10px;
-  }
-}
-
-.icon {
-  display: block;
-  flex: none;
-  position: relative;
-  width: 36px;
-  height: 36px;
-  border: 1px solid $darkestgrey;
-  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: -100px;
+  width: 100px;
+  height: 77px;
 
   svg {
-    color: $main;
-    font-size: 16px;
-    vertical-align: middle;
-    display: flex;
-    top: 0;
-    left: 50%;
-    height: 100%;
-    margin: 0 auto;
+    font-size: 18px;
   }
 }
 
-.data {
+.date {
   display: flex;
-  flex-direction: row;
-  flex: 6 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-right: 50px;
 
-  .title {
-    flex: 8 0;
-  }
-}
+  time {
+    text-transform: uppercase;
 
-.subtitle, .date {
-  text-align: center;
-}
+    &:nth-child(1) {
+      display: flex;
+      align-items: center;
+      height: 38px;
+      font-size: 18px;
+      margin-bottom: 5px;
+    }
 
-.date {
-  padding-left: 20px;
-  flex: 1 0;
+    &:nth-child(2) {
+      font-size: 12px;
+    }
+   }
 }
 
-.amount {
-  flex: 1 0;
-  padding-left: 20px;
+.data {
+  display: flex;
+  flex-direction: column;
+  flex: 6;
+  justify-content: space-evenly;
 
-  &.negative {
-    font-weight: 200;
+  .title {
+    margin-bottom: 5px;
   }
 
-  &.positive {
-    color: $main;
-    font-weight: 500;
+  .icon, h3, span {
+    vertical-align: middle;
   }
 
-  section {
+  h3, span {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .icon {
     display: inline-block;
-    vertical-align: top;
-    text-align: right;
-    font-size: 0;
-    margin: 0;
-    padding: 0;
-
-    &:nth-child(1) {
-      width: 20%;
+    flex: none;
+    position: relative;
+    width: 36px;
+    height: 36px;
+    border: 1px solid $darkestgrey;
+    border-radius: 50%;
+    margin-right: 15px;
+
+    svg {
+      color: $main;
+      font-size: 16px;
+      vertical-align: middle;
+      display: flex;
+      top: 0;
+      left: 50%;
+      height: 100%;
+      margin: 0 auto;
     }
+  }
 
-    &:nth-child(2) {
-      width: 80%;
+  h3 {
+    display: inline-block;
+
+    &:after {
+      content: " ";
+      display: inline-block;
+      width: 3px;
     }
   }
 
-  svg {
-    font-size: 20px;
+  span {
+    text-transform: uppercase;
   }
+}
 
-  span {
-    display: block;
+.amount {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  text-align: right;
+  font-size: 16px;
 
-    &:nth-child(1) {
-      font-size: 14px;
-    }
+  &.positive span:nth-child(1) {
+    font-weight: bold;
+    color: $main;
+  }
 
+  span {
     &:nth-child(2) {
-      font-size: 10px;
+      font-size: 12px;
     }
   }
 }
-
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index c644fc91..9fedc08b 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -2,62 +2,65 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { FaBolt } from 'react-icons/lib/fa'
+import { FaBolt, FaClockO } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('INVOICE', { invoice })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-        <FaBolt />
-      </i>
-      <h3>
-        {
-          invoice.settled ?
-            'Received'
-            :
-            'Requested'
-        }
-      </h3>
+    {
+      !invoice.settled ?
+        <div className={styles.clock}>
+          <i className='hint--top' data-hint='Request has not been paid'>
+            <FaClockO />
+          </i>
+        </div>
+        :
+        null
+    }
+    <div className={styles.date}>
+      <Moment format='D'>
+        {invoice.creation_date * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {invoice.creation_date * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
+        <i className={`${styles.icon} hint--top`} data-hint='Lightning Network request'>
+          <FaBolt />
+        </i>
+        <h3>
+          { invoice.settled ? 'Received' : 'Requested' }
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
         {invoice.r_hash.toString('hex')}
       </div>
     </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>
-        {invoice.creation_date * 1000}
-      </Moment>
-    </div>
     <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Invoice amount'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(invoice.value)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Invoice fee'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(invoice.fee)
-          }
-        </span>
-      </section>
+      <span className='hint--top' data-hint='Invoice amount'>
+        + 
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(invoice.value)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Invoice fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(invoice.fee)
+        }
+      </span>
     </div>
   </div>
 )
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 9aec7c42..d7948ef6 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -9,49 +9,48 @@ import styles from '../Activity.scss'
 
 const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-        <FaBolt />
-      </i>
-      <h3>
-        Sent
-      </h3>
+    <div className={styles.date}>
+      <Moment format='D'>
+        {payment.creation_date * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {payment.creation_date * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
-        {payment.payment_hash}
+        <i className={`${styles.icon} hint--top`} data-hint='Lightning Network payment'>
+          <FaBolt />
+        </i>
+        <h3>
+          Sent
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
+        {payment.payment_hash.toString('hex')}
       </div>
-    </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
     </div>
     <div className={styles.amount}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Payment amount'>
-          -
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(payment.value)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Payment fee'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(payment.fee)
-          }
-        </span>
-      </section>
+      <span className='hint--top' data-hint='Payment amount'>
+        - 
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(payment.value)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Payment fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(payment.fee)
+        }
+      </span>
     </div>
   </div>
 )
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index b43af1e6..924a8b73 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -9,56 +9,48 @@ import styles from '../Activity.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
-        <FaChain />
-      </i>
-      <h3>
-        {
-          transaction.amount < 0 ?
-            'Sent'
-            :
-            'Received'
-        }
-      </h3>
+    <div className={styles.date}>
+      <Moment format='D'>
+        {transaction.time_stamp * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {transaction.time_stamp * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
+        <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+          <FaChain />
+        </i>
+        <h3>
+          { transaction.amount > 0 ? 'Received' : 'Sent' }
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
         {transaction.tx_hash}
       </div>
     </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
-    </div>
-    <div className={`${styles.amount} ${transaction.amount < 0 ? styles.negative : styles.positive}`}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Transaction amount'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(transaction.amount)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Transaction fee'>
-          {
-            transaction.amount < 0 ?
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(transaction.total_fees)
-              :
-              null
-          }
-        </span>
-      </section>
+    <div className={`${styles.amount} ${transaction.amount > 0 ? styles.positive : styles.negative}`}>
+      <span className='hint--top' data-hint='Transaction amount'>
+        { transaction.amount > 0 ? '+' : '' }
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(transaction.amount)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Transaction fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(transaction.total_fees)
+        }
+      </span>
     </div>
   </div>
 )

From 46c384151de846a7580b93c2c16a383e3df428fa Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 20:15:34 -0500
Subject: [PATCH 15/21] feature(filter): add filter constant and methods to
 reducer

---
 app/reducers/activity.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index e1af749c..209e7730 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -15,6 +15,8 @@ const initialState = {
 export const SHOW_ACTIVITY_MODAL = 'SHOW_ACTIVITY_MODAL'
 export const HIDE_ACTIVITY_MODAL = 'HIDE_ACTIVITY_MODAL'
 
+export const CHANGE_FILTER = 'CHANGE_FILTER'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -32,12 +34,18 @@ export function hideActivityModal() {
   }
 }
 
+export function changeFilter(filter) {
+  type: CHANGE_FILTER,
+  filter
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
   [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
-  [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } })
+  [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } }),
+  [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter })
 }
 
 // ------------------------------------

From ba7071d8dcb0b2b76e023acf3be7f8bf1581ccbe Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 20:30:51 -0500
Subject: [PATCH 16/21] feature(filter selectors): add selectors for each
 filter

---
 app/reducers/activity.js                      | 69 +++++++++++++++++++
 app/routes/activity/components/Activity.js    |  6 +-
 .../activity/containers/ActivityContainer.js  |  5 +-
 app/selectors/activity.js                     | 22 ------
 app/selectors/index.js                        |  5 --
 5 files changed, 74 insertions(+), 33 deletions(-)
 delete mode 100644 app/selectors/activity.js
 delete mode 100644 app/selectors/index.js

diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index 209e7730..9c747bcf 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -1,3 +1,5 @@
+import { createSelector } from 'reselect'
+
 // ------------------------------------
 // Initial State
 // ------------------------------------
@@ -48,6 +50,73 @@ const ACTION_HANDLERS = {
   [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter })
 }
 
+// ------------------------------------
+// Selectors
+// ------------------------------------
+const activitySelectors = {}
+const filterSelector = state => state.activity.filter
+const paymentsSelector = state => state.payment.payments
+const invoicesSelector = state => state.invoice.invoices
+const transactionsSelector = state => state.transaction.transactions
+
+const allActivity = createSelector(
+  paymentsSelector,
+  invoicesSelector,
+  transactionsSelector,
+  (payments, invoices, transactions) => {
+    return [...payments, ...invoices, ...transactions].sort((a, b) => {
+      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
+      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
+
+      return bTimestamp - aTimestamp
+    })
+  }
+)
+
+const lnActivity = createSelector(
+  paymentsSelector,
+  invoicesSelector,
+  (payments, invoices) => {
+    return [...payments, ...invoices].sort((a, b) => {
+      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
+      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
+
+      return bTimestamp - aTimestamp
+    })
+  }
+)
+
+const paymentActivity = createSelector(
+  paymentsSelector,
+  payments => payments
+)
+
+const invoiceActivity = createSelector(
+  invoicesSelector,
+  invoices => invoices
+)
+
+const transactionActivity = createSelector(
+  transactionsSelector,
+  transactions => transactions
+)
+
+activitySelectors.currentActivity = createSelector(
+  filterSelector,
+  filter => FILTERS[filter]
+)
+
+const FILTERS = {
+  ALL_ACTIVITY: allActivity,
+  LN_ACTIVITY: lnActivity,
+  PAYMENT_ACTIVITY: paymentActivity,
+  INVOICE_ACTIVITY: invoiceActivity,
+  TRANSACTION_ACTIVITY: transactionActivity
+}
+
+export { activitySelectors }
+
+
 // ------------------------------------
 // Reducer
 // ------------------------------------
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 6aa82ad2..5dbf1961 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -57,9 +57,9 @@ class Activity extends Component {
       paymentModalOpen,
       invoiceModalOpen,
       currentTicker,
-      sortedActivity,
       activity: { modal },
-      hideActivityModal
+      hideActivityModal,
+      currentActivity
     } = this.props
     
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
@@ -94,7 +94,7 @@ class Activity extends Component {
           </header>
           <ul className={styles.activityContainer}>
             {
-              sortedActivity.map((activity, index) => {
+              currentActivity.map((activity, index) => {
                 return (
                   <li className={styles.activity} key={index}>
                     {this.renderActivity(activity)}
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index ed1197ba..af20d445 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -12,8 +12,7 @@ import {
   paymentSelectors
 } from '../../../reducers/payment'
 import { fetchTransactions } from '../../../reducers/transaction'
-import { showActivityModal, hideActivityModal } from '../../../reducers/activity'
-import { activitySelectors } from '../../../selectors'
+import { showActivityModal, hideActivityModal, activitySelectors } from '../../../reducers/activity'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -42,7 +41,7 @@ const mapStateToProps = state => ({
 
   currentTicker: tickerSelectors.currentTicker(state),
 
-  sortedActivity: activitySelectors.sortedActivity(state)
+  currentActivity: activitySelectors.currentActivity(state)(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)
diff --git a/app/selectors/activity.js b/app/selectors/activity.js
deleted file mode 100644
index 7d89239c..00000000
--- a/app/selectors/activity.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createSelector } from 'reselect'
-
-const activitySelectors = {}
-const paymentsSelector = state => state.payment.payments
-const invoicesSelector = state => state.invoice.invoices
-const transactionsSelector = state => state.transaction.transactions
-
-activitySelectors.sortedActivity = createSelector(
-  paymentsSelector,
-  invoicesSelector,
-  transactionsSelector,
-  (payments, invoices, transactions) => {
-    return [...payments, ...invoices, ...transactions].sort((a, b) => {
-      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
-      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
-
-      return bTimestamp - aTimestamp
-    })
-  }
-)
-
-export default activitySelectors
\ No newline at end of file
diff --git a/app/selectors/index.js b/app/selectors/index.js
deleted file mode 100644
index f28a76aa..00000000
--- a/app/selectors/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import activitySelectors from './activity'
-
-export default {
-  activitySelectors
-}
\ No newline at end of file

From 3aa9cfe034dcf55962a0e8215bf045b98bfa82ed Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 20:44:18 -0500
Subject: [PATCH 17/21] feature(filters): add filters to reducer and add
 selector to get the non-active one

---
 app/reducers/activity.js                      | 14 ++++++++++
 app/routes/activity/components/Activity.js    | 28 +++++++++++++------
 .../activity/containers/ActivityContainer.js  |  3 +-
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index 9c747bcf..1d8bacbe 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -5,6 +5,13 @@ import { createSelector } from 'reselect'
 // ------------------------------------
 const initialState = {
   filter: 'ALL_ACTIVITY',
+  filters: [
+    { key: 'ALL_ACTIVITY', name: 'Activity'},
+    { key: 'LN_ACTIVITY', name: 'Lightning Network'},
+    { key: 'PAYMENT_ACTIVITY', name: 'Payments'},
+    { key: 'INVOICE_ACTIVITY', name: 'Invoices'},
+    { key: 'TRANSACTION_ACTIVITY', name: 'Transactions'}
+  ],
   modal: {
     modalType: null,
     modalProps: {}
@@ -54,6 +61,7 @@ const ACTION_HANDLERS = {
 // Selectors
 // ------------------------------------
 const activitySelectors = {}
+const filtersSelector = state => state.activity.filters
 const filterSelector = state => state.activity.filter
 const paymentsSelector = state => state.payment.payments
 const invoicesSelector = state => state.invoice.invoices
@@ -106,6 +114,12 @@ activitySelectors.currentActivity = createSelector(
   filter => FILTERS[filter]
 )
 
+activitySelectors.nonActiveFilters = createSelector(
+  filtersSelector,
+  filterSelector,
+  (filters, filter) => filters.filter(f => f.key !== filter)
+)
+
 const FILTERS = {
   ALL_ACTIVITY: allActivity,
   LN_ACTIVITY: lnActivity,
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 5dbf1961..4db80acb 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -15,7 +15,7 @@ class Activity extends Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
-      tab: 1
+      pulldown: false
     }
 
     this.renderActivity = this.renderActivity.bind(this)
@@ -45,7 +45,6 @@ class Activity extends Component {
   }
 
   render() {
-    const { tab } = this.state
     const {
       ticker,
       searchInvoices,
@@ -59,9 +58,10 @@ class Activity extends Component {
       currentTicker,
       activity: { modal },
       hideActivityModal,
-      currentActivity
+      currentActivity,
+      nonActiveFilters
     } = this.props
-    
+
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
 
     return (
@@ -79,10 +79,10 @@ class Activity extends Component {
             <MdSearch />
           </label>
           <input
-            value={tab === 1 ? '' : invoicesSearchText}
-            onChange={event => (tab === 1 ? null : searchInvoices(event.target.value))}
+            value={invoicesSearchText}
+            onChange={event => searchInvoices(event.target.value)}
             className={`${styles.text} ${styles.input}`}
-            placeholder={tab === 1 ? 'Search by amount, hash, memo, etc' : 'Search requests by memo'}
+            placeholder='Search by amount, hash, memo, etc'
             type='text'
             id='invoiceSearch'
           />
@@ -90,7 +90,19 @@ class Activity extends Component {
 
         <div className={styles.activities}>
           <header className={styles.header}>
-            <h2>Activity</h2>
+            <h2 onClick={() => this.setState({ pulldown: true })}>Activity</h2>
+            <ul className={styles.filters}>
+              {
+                nonActiveFilters.map(filter => {
+                  console.log('filter: ', filter)
+                  return (
+                    <li key={filter.key}>
+                      {filter.name}
+                    </li>
+                  )
+                })
+              }
+            </ul>
           </header>
           <ul className={styles.activityContainer}>
             {
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index af20d445..e94b4798 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -41,7 +41,8 @@ const mapStateToProps = state => ({
 
   currentTicker: tickerSelectors.currentTicker(state),
 
-  currentActivity: activitySelectors.currentActivity(state)(state)
+  currentActivity: activitySelectors.currentActivity(state)(state),
+  nonActiveFilters: activitySelectors.nonActiveFilters(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)

From d0bd604e4e53756031e6fc82a8e64199c29bcd64 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 22:59:54 -0500
Subject: [PATCH 18/21] feature(filters/bitcoin-js): update bitcoin-js and get
 filters to work

---
 app/reducers/activity.js                      | 34 ++++++++-----
 app/routes/activity/components/Activity.js    | 31 +++++++-----
 app/routes/activity/components/Activity.scss  | 48 +++++++++++++++++--
 .../activity/containers/ActivityContainer.js  | 12 ++++-
 package.json                                  |  2 +-
 yarn.lock                                     | 15 ++++--
 6 files changed, 107 insertions(+), 35 deletions(-)

diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index 1d8bacbe..60fecadc 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -4,13 +4,14 @@ import { createSelector } from 'reselect'
 // Initial State
 // ------------------------------------
 const initialState = {
-  filter: 'ALL_ACTIVITY',
+  filterPulldown: false,
+  filter: { key: 'ALL_ACTIVITY', name: 'Activity' },
   filters: [
-    { key: 'ALL_ACTIVITY', name: 'Activity'},
-    { key: 'LN_ACTIVITY', name: 'Lightning Network'},
-    { key: 'PAYMENT_ACTIVITY', name: 'Payments'},
-    { key: 'INVOICE_ACTIVITY', name: 'Invoices'},
-    { key: 'TRANSACTION_ACTIVITY', name: 'Transactions'}
+    { key: 'ALL_ACTIVITY', name: 'All Activity'},
+    { key: 'LN_ACTIVITY', name: 'LN Activity'},
+    { key: 'PAYMENT_ACTIVITY', name: 'LN Payments'},
+    { key: 'INVOICE_ACTIVITY', name: 'LN Invoices'},
+    { key: 'TRANSACTION_ACTIVITY', name: 'On-chain Activity'}
   ],
   modal: {
     modalType: null,
@@ -26,6 +27,8 @@ export const HIDE_ACTIVITY_MODAL = 'HIDE_ACTIVITY_MODAL'
 
 export const CHANGE_FILTER = 'CHANGE_FILTER'
 
+export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -44,8 +47,16 @@ export function hideActivityModal() {
 }
 
 export function changeFilter(filter) {
-  type: CHANGE_FILTER,
-  filter
+  return {
+    type: CHANGE_FILTER,
+    filter
+  }
+}
+
+export function toggleFilterPulldown() {
+  return {
+    type: TOGGLE_PULLDOWN
+  }
 }
 
 // ------------------------------------
@@ -54,7 +65,8 @@ export function changeFilter(filter) {
 const ACTION_HANDLERS = {
   [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
   [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } }),
-  [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter })
+  [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter, filterPulldown: false }),
+  [TOGGLE_PULLDOWN]: (state) => ({ ...state, filterPulldown: !state.filterPulldown })
 }
 
 // ------------------------------------
@@ -111,13 +123,13 @@ const transactionActivity = createSelector(
 
 activitySelectors.currentActivity = createSelector(
   filterSelector,
-  filter => FILTERS[filter]
+  filter => FILTERS[filter.key]
 )
 
 activitySelectors.nonActiveFilters = createSelector(
   filtersSelector,
   filterSelector,
-  (filters, filter) => filters.filter(f => f.key !== filter)
+  (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
 const FILTERS = {
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 4db80acb..896d18e4 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
-import { FaChain, FaBolt } from 'react-icons/lib/fa'
+import { FaChain, FaBolt, FaAngleDown } from 'react-icons/lib/fa'
 
 import Invoice from './components/Invoice'
 import Payment from './components/Payment'
@@ -56,12 +56,16 @@ class Activity extends Component {
       paymentModalOpen,
       invoiceModalOpen,
       currentTicker,
-      activity: { modal },
+      activity: { modal, filter, filterPulldown },
       hideActivityModal,
+      changeFilter,
+      toggleFilterPulldown,
       currentActivity,
       nonActiveFilters
     } = this.props
 
+    const { pulldown } = this.state
+
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
 
     return (
@@ -90,21 +94,22 @@ class Activity extends Component {
 
         <div className={styles.activities}>
           <header className={styles.header}>
-            <h2 onClick={() => this.setState({ pulldown: true })}>Activity</h2>
-            <ul className={styles.filters}>
-              {
-                nonActiveFilters.map(filter => {
-                  console.log('filter: ', filter)
-                  return (
-                    <li key={filter.key}>
+            <section>
+              <h2 onClick={toggleFilterPulldown}>
+                {filter.name} <span className={filterPulldown ? styles.pulldown : ''}><FaAngleDown /></span>
+              </h2>
+              <ul className={`${styles.filters} ${filterPulldown ? styles.active : ''}`}>
+                {
+                  nonActiveFilters.map(filter => 
+                    <li key={filter.key} onClick={() => changeFilter(filter)}>
                       {filter.name}
                     </li>
                   )
-                })
-              }
-            </ul>
+                }
+              </ul>
+            </section>
           </header>
-          <ul className={styles.activityContainer}>
+          <ul className={`${styles.activityContainer} ${filterPulldown ? styles.pulldown : ''}`}>
             {
               currentActivity.map((activity, index) => {
                 return (
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 94470bbd..241e00c4 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -36,24 +36,66 @@
 	.header {
 		padding: 60px 0 20px 0;
 	  margin: 0 auto;
-		
-		h2 {
+
+	  section {
+		  position: relative;
 			margin-left: auto;
 			margin-right: auto;
 			padding-left: 100px;
 			padding-right: 100px;
+			max-width: 964px;
+	  }
+
+	  h2, h2 span {
+	  	cursor: pointer;
+			transition: color 0.25s;
+
+	  	&:hover {
+	  		color: lighten($darkestgrey, 10%);
+	  	}
+	  }
+		
+		h2, .filters li {
 			text-transform: uppercase;
 			letter-spacing: 1.5px;
 			color: $darkestgrey;
 			font-size: 14px;
 			font-weight: 400;
-			max-width: 964px;
+		}
+
+		h2 span.pulldown {
+			color: $main;
+		}
+
+		.filters {
+			display: none;
+			
+			&.active {
+				display: block;
+				position: absolute;
+				bottom: -100px;
+				z-index: 10;
+
+				li {
+					margin: 5px 0;
+					cursor: pointer;
+
+					&:hover {
+						color: $main;
+					}
+				}
+			}
 		}
 	}
 }
 
 .activityContainer {
 	background: $white;
+	transition: opacity 0.25s;
+
+	&.pulldown {
+		opacity: 0.15;
+	}
 }
 
 .activityList {
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index e94b4798..219ad1a0 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -12,7 +12,13 @@ import {
   paymentSelectors
 } from '../../../reducers/payment'
 import { fetchTransactions } from '../../../reducers/transaction'
-import { showActivityModal, hideActivityModal, activitySelectors } from '../../../reducers/activity'
+import {
+  showActivityModal,
+  hideActivityModal,
+  changeFilter,
+  toggleFilterPulldown,
+  activitySelectors
+} from '../../../reducers/activity'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -23,7 +29,9 @@ const mapDispatchToProps = {
   fetchTransactions,
   searchInvoices,
   showActivityModal,
-  hideActivityModal
+  hideActivityModal,
+  changeFilter,
+  toggleFilterPulldown
 }
 
 const mapStateToProps = state => ({
diff --git a/package.json b/package.json
index 88ee631d..fb7da571 100644
--- a/package.json
+++ b/package.json
@@ -185,7 +185,7 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
-    "bitcoinjs-lib": "^3.1.1",
+    "bitcoinjs-lib": "^3.2.0",
     "bitcore-lib": "^0.14.0",
     "devtron": "^1.4.0",
     "electron-debug": "^1.2.0",
diff --git a/yarn.lock b/yarn.lock
index da74513f..0a74c2aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1472,6 +1472,10 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bech32@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-0.0.3.tgz#736747c4a6531c5d8937d0400498de30e93b2f9c"
+
 beeper@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
@@ -1505,10 +1509,11 @@ bitcoin-ops@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/bitcoin-ops/-/bitcoin-ops-1.3.0.tgz#6b126b585537bc679b02ed499f14450cffc37e13"
 
-bitcoinjs-lib@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-3.1.1.tgz#c2b1efe455992be88f6be70b5f6fe1a93b9abd90"
+bitcoinjs-lib@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-3.2.0.tgz#23d435523b26b15ce58d539172c1c2cbc83141a1"
   dependencies:
+    bech32 "0.0.3"
     bigi "^1.4.0"
     bip66 "^1.1.0"
     bitcoin-ops "^1.3.0"
@@ -1520,7 +1525,7 @@ bitcoinjs-lib@^3.1.1:
     pushdata-bitcoin "^1.0.1"
     randombytes "^2.0.1"
     safe-buffer "^5.0.1"
-    typeforce "^1.8.7"
+    typeforce "^1.11.3"
     varuint-bitcoin "^1.0.4"
     wif "^2.0.1"
 
@@ -8705,7 +8710,7 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typeforce@^1.8.7:
+typeforce@^1.11.3:
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/typeforce/-/typeforce-1.11.4.tgz#07ce3abcce836761243ae483dce5bc609786205c"
   dependencies:

From 704e803f40e7995fcfd321eed24cbb28f1aa90ca Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 23:29:37 -0500
Subject: [PATCH 19/21] fix(lint): fix linting errors

---
 app/lnd/methods/index.js                      |  1 +
 app/reducers/activity.js                      | 50 +++++++--------
 app/reducers/payment.js                       |  4 +-
 app/reducers/transaction.js                   |  3 +-
 app/routes/activity/components/Activity.js    | 63 ++++++++-----------
 .../components/components/Invoice/Invoice.js  |  8 ++-
 .../components/components/Invoice/index.js    |  2 +-
 .../components/Modal/Invoice/Invoice.js       |  3 +
 .../components/Modal/Invoice/index.js         |  2 +-
 .../components/components/Modal/Modal.js      | 10 ++-
 .../components/Modal/Payment/Payment.js       |  7 +--
 .../components/Modal/Payment/index.js         |  2 +-
 .../Modal/Transaction/Transaction.js          |  7 +--
 .../components/Modal/Transaction/index.js     |  2 +-
 .../components/components/Modal/index.js      |  2 +-
 .../components/components/Payment/Payment.js  |  8 ++-
 .../components/Transaction/Transaction.js     |  6 +-
 app/routes/app/components/App.js              |  3 -
 .../app/components/components/Form/Form.js    |  2 -
 19 files changed, 85 insertions(+), 100 deletions(-)

diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index eca3b570..6f8b9b05 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -54,6 +54,7 @@ export default function (lnd, event, msg, data) {
       walletController.getTransactions(lnd)
         .then(transactionsData => event.sender.send('receiveTransactions', transactionsData))
         .catch(error => console.log('transactions error: ', error))
+      break
     case 'payments':
     // Data looks like { payments: [] }
       paymentsController.listPayments(lnd)
diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index 60fecadc..77913b68 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -7,11 +7,11 @@ const initialState = {
   filterPulldown: false,
   filter: { key: 'ALL_ACTIVITY', name: 'Activity' },
   filters: [
-    { key: 'ALL_ACTIVITY', name: 'All Activity'},
-    { key: 'LN_ACTIVITY', name: 'LN Activity'},
-    { key: 'PAYMENT_ACTIVITY', name: 'LN Payments'},
-    { key: 'INVOICE_ACTIVITY', name: 'LN Invoices'},
-    { key: 'TRANSACTION_ACTIVITY', name: 'On-chain Activity'}
+    { key: 'ALL_ACTIVITY', name: 'All Activity' },
+    { key: 'LN_ACTIVITY', name: 'LN Activity' },
+    { key: 'PAYMENT_ACTIVITY', name: 'LN Payments' },
+    { key: 'INVOICE_ACTIVITY', name: 'LN Invoices' },
+    { key: 'TRANSACTION_ACTIVITY', name: 'On-chain Activity' }
   ],
   modal: {
     modalType: null,
@@ -64,9 +64,9 @@ export function toggleFilterPulldown() {
 // ------------------------------------
 const ACTION_HANDLERS = {
   [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
-  [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } }),
+  [HIDE_ACTIVITY_MODAL]: state => ({ ...state, modal: { modalType: null, modalProps: {} } }),
   [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter, filterPulldown: false }),
-  [TOGGLE_PULLDOWN]: (state) => ({ ...state, filterPulldown: !state.filterPulldown })
+  [TOGGLE_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown })
 }
 
 // ------------------------------------
@@ -83,27 +83,18 @@ const allActivity = createSelector(
   paymentsSelector,
   invoicesSelector,
   transactionsSelector,
-  (payments, invoices, transactions) => {
-    return [...payments, ...invoices, ...transactions].sort((a, b) => {
-      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
-      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
+  (payments, invoices, transactions) => [...payments, ...invoices, ...transactions].sort((a, b) => {
+    const aTimestamp = Object.prototype.hasOwnProperty.call(a, 'time_stamp') ? a.time_stamp : a.creation_date
+    const bTimestamp = Object.prototype.hasOwnProperty.call(b, 'time_stamp') ? b.time_stamp : b.creation_date
 
-      return bTimestamp - aTimestamp
-    })
-  }
+    return bTimestamp - aTimestamp
+  })
 )
 
 const lnActivity = createSelector(
   paymentsSelector,
   invoicesSelector,
-  (payments, invoices) => {
-    return [...payments, ...invoices].sort((a, b) => {
-      let aTimestamp = a.hasOwnProperty('time_stamp') ? a.time_stamp : a.creation_date
-      let bTimestamp = b.hasOwnProperty('time_stamp') ? b.time_stamp : b.creation_date
-
-      return bTimestamp - aTimestamp
-    })
-  }
+  (payments, invoices) => [...payments, ...invoices].sort((a, b) => b.creation_date - a.creation_date)
 )
 
 const paymentActivity = createSelector(
@@ -121,6 +112,14 @@ const transactionActivity = createSelector(
   transactions => transactions
 )
 
+const FILTERS = {
+  ALL_ACTIVITY: allActivity,
+  LN_ACTIVITY: lnActivity,
+  PAYMENT_ACTIVITY: paymentActivity,
+  INVOICE_ACTIVITY: invoiceActivity,
+  TRANSACTION_ACTIVITY: transactionActivity
+}
+
 activitySelectors.currentActivity = createSelector(
   filterSelector,
   filter => FILTERS[filter.key]
@@ -132,13 +131,6 @@ activitySelectors.nonActiveFilters = createSelector(
   (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
-const FILTERS = {
-  ALL_ACTIVITY: allActivity,
-  LN_ACTIVITY: lnActivity,
-  PAYMENT_ACTIVITY: paymentActivity,
-  INVOICE_ACTIVITY: invoiceActivity,
-  TRANSACTION_ACTIVITY: transactionActivity
-}
 
 export { activitySelectors }
 
diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index b8dbc445..d8e44775 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -1,8 +1,6 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
-import { btc, usd } from '../utils'
 import { setForm, resetForm } from './form'
-import { showModal } from './modal'
 
 // ------------------------------------
 // Constants
@@ -68,7 +66,7 @@ export const payInvoice = paymentRequest => (dispatch) => {
 
 // Receive IPC event for successful payment
 // TODO: Add payment to state, not a total re-fetch
-export const paymentSuccessful = () => dispatch => {
+export const paymentSuccessful = () => (dispatch) => {
   // Close the form modal once the payment was succesful
   dispatch(setForm({ modalOpen: false }))
 
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index c551ff24..f3dc7ca5 100644
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@@ -1,4 +1,3 @@
-import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
 import { btc, usd } from '../utils'
 import { setForm, resetForm } from './form'
@@ -62,7 +61,7 @@ export const transactionSuccessful = (event, { amount, addr, txid }) => (dispatc
 }
 
 export const transactionError = () => (dispatch) => {
-  dispatch({ type: PAYMENT_FAILED })
+  dispatch({ type: TRANSACTION_FAILED })
 }
 
 
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 896d18e4..e1651291 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
-import { FaChain, FaBolt, FaAngleDown } from 'react-icons/lib/fa'
+import { FaAngleDown } from 'react-icons/lib/fa'
 
 import Invoice from './components/Invoice'
 import Payment from './components/Payment'
@@ -14,10 +14,6 @@ import styles from './Activity.scss'
 class Activity extends Component {
   constructor(props, context) {
     super(props, context)
-    this.state = {
-      pulldown: false
-    }
-
     this.renderActivity = this.renderActivity.bind(this)
   }
 
@@ -32,29 +28,23 @@ class Activity extends Component {
   renderActivity(activity) {
     const { ticker, currentTicker, showActivityModal } = this.props
 
-    if (activity.hasOwnProperty('block_hash')) {
+    if (Object.prototype.hasOwnProperty.call(activity, 'block_hash')) {
       // activity is an on-chain tx
       return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
-    } else if (activity.hasOwnProperty('payment_request')) {
+    } else if (Object.prototype.hasOwnProperty.call(activity, 'payment_request')) {
       // activity is an LN invoice
       return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
-    } else {
-      // activity is an LN payment
-      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     }
+    // activity is an LN payment
+    return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
   }
 
   render() {
     const {
       ticker,
       searchInvoices,
-      invoices,
-      invoice: { invoicesSearchText, invoice, invoiceLoading },
-      payment: { payment, payments, paymentLoading },
-      setPayment,
-      setInvoice,
-      paymentModalOpen,
-      invoiceModalOpen,
+      invoice: { invoicesSearchText, invoiceLoading },
+      payment: { paymentLoading },
       currentTicker,
       activity: { modal, filter, filterPulldown },
       hideActivityModal,
@@ -64,8 +54,6 @@ class Activity extends Component {
       nonActiveFilters
     } = this.props
 
-    const { pulldown } = this.state
-
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
 
     return (
@@ -77,7 +65,7 @@ class Activity extends Component {
           ticker={ticker}
           currentTicker={currentTicker}
         />
-        
+
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
             <MdSearch />
@@ -100,10 +88,10 @@ class Activity extends Component {
               </h2>
               <ul className={`${styles.filters} ${filterPulldown ? styles.active : ''}`}>
                 {
-                  nonActiveFilters.map(filter => 
-                    <li key={filter.key} onClick={() => changeFilter(filter)}>
-                      {filter.name}
-                    </li>
+                  nonActiveFilters.map(f =>
+                    (<li key={f.key} onClick={() => changeFilter(f)}>
+                      {f.name}
+                    </li>)
                   )
                 }
               </ul>
@@ -111,13 +99,11 @@ class Activity extends Component {
           </header>
           <ul className={`${styles.activityContainer} ${filterPulldown ? styles.pulldown : ''}`}>
             {
-              currentActivity.map((activity, index) => {
-                return (
-                  <li className={styles.activity} key={index}>
-                    {this.renderActivity(activity)}
-                  </li>
-                )
-              })
+              currentActivity.map((activity, index) => (
+                <li className={styles.activity} key={index}>
+                  {this.renderActivity(activity)}
+                </li>
+              ))
             }
           </ul>
         </div>
@@ -129,16 +115,19 @@ class Activity extends Component {
 Activity.propTypes = {
   fetchPayments: PropTypes.func.isRequired,
   fetchInvoices: PropTypes.func.isRequired,
+  fetchTransactions: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
   searchInvoices: PropTypes.func.isRequired,
-  invoices: PropTypes.array.isRequired,
   invoice: PropTypes.object.isRequired,
   payment: PropTypes.object.isRequired,
-  setPayment: PropTypes.func.isRequired,
-  setInvoice: PropTypes.func.isRequired,
-  paymentModalOpen: PropTypes.bool.isRequired,
-  invoiceModalOpen: PropTypes.bool.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  showActivityModal: PropTypes.func.isRequired,
+  hideActivityModal: PropTypes.func.isRequired,
+  changeFilter: PropTypes.func.isRequired,
+  toggleFilterPulldown: PropTypes.func.isRequired,
+  activity: PropTypes.object.isRequired,
+  currentActivity: PropTypes.array.isRequired,
+  nonActiveFilters: PropTypes.array.isRequired
 }
 
 export default Activity
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 9fedc08b..bdf617bf 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import { FaBolt, FaClockO } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
-import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
@@ -45,7 +44,7 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
     </div>
     <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
       <span className='hint--top' data-hint='Invoice amount'>
-        + 
+        +
         {
           ticker.currency === 'usd' ?
             btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
@@ -66,7 +65,10 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
 )
 
 Invoice.propTypes = {
-  
+  invoice: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  showActivityModal: PropTypes.func.isRequired
 }
 
 export default Invoice
diff --git a/app/routes/activity/components/components/Invoice/index.js b/app/routes/activity/components/components/Invoice/index.js
index a72db95c..31b99355 100644
--- a/app/routes/activity/components/components/Invoice/index.js
+++ b/app/routes/activity/components/components/Invoice/index.js
@@ -1,3 +1,3 @@
 import Invoice from './Invoice'
 
-export default Invoice
\ No newline at end of file
+export default Invoice
diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
index a1ea8c86..7e605377 100644
--- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js
@@ -53,6 +53,9 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
 )
 
 Invoice.propTypes = {
+  invoice: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Invoice
diff --git a/app/routes/activity/components/components/Modal/Invoice/index.js b/app/routes/activity/components/components/Modal/Invoice/index.js
index a72db95c..31b99355 100644
--- a/app/routes/activity/components/components/Modal/Invoice/index.js
+++ b/app/routes/activity/components/components/Modal/Invoice/index.js
@@ -1,3 +1,3 @@
 import Invoice from './Invoice'
 
-export default Invoice
\ No newline at end of file
+export default Invoice
diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js
index 244a6307..58722e21 100644
--- a/app/routes/activity/components/components/Modal/Modal.js
+++ b/app/routes/activity/components/components/Modal/Modal.js
@@ -11,7 +11,7 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
     TRANSACTION: Transaction,
     PAYMENT: Payment,
     INVOICE: Invoice
-  
+
   }
   const customStyles = {
     overlay: {
@@ -26,7 +26,7 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
       margin: '50px auto'
     }
   }
-  
+
   if (!modalType) { return null }
 
   const SpecificModal = MODAL_COMPONENTS[modalType]
@@ -47,7 +47,11 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
 }
 
 Modal.propTypes = {
-  modalType: PropTypes.string
+  modalType: PropTypes.string,
+  modalProps: PropTypes.object.isRequired,
+  hideActivityModal: PropTypes.func.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Modal
diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.js b/app/routes/activity/components/components/Modal/Payment/Payment.js
index d9515da8..fec8218d 100644
--- a/app/routes/activity/components/components/Modal/Payment/Payment.js
+++ b/app/routes/activity/components/components/Modal/Payment/Payment.js
@@ -4,10 +4,6 @@ import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-import QRCode from 'qrcode.react'
-
-import { MdCheck } from 'react-icons/lib/md'
-
 import CurrencyIcon from '../../../../../../components/CurrencyIcon'
 import { btc } from '../../../../../../utils'
 
@@ -40,6 +36,9 @@ const Payment = ({ payment, ticker, currentTicker }) => (
 )
 
 Payment.propTypes = {
+  payment: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Payment
diff --git a/app/routes/activity/components/components/Modal/Payment/index.js b/app/routes/activity/components/components/Modal/Payment/index.js
index ba6d6e16..3f7e6951 100644
--- a/app/routes/activity/components/components/Modal/Payment/index.js
+++ b/app/routes/activity/components/components/Modal/Payment/index.js
@@ -1,3 +1,3 @@
 import Payment from './Payment'
 
-export default Payment
\ No newline at end of file
+export default Payment
diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.js b/app/routes/activity/components/components/Modal/Transaction/Transaction.js
index a886d8ff..9b38dc96 100644
--- a/app/routes/activity/components/components/Modal/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Modal/Transaction/Transaction.js
@@ -4,10 +4,6 @@ import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-import QRCode from 'qrcode.react'
-
-import { MdCheck } from 'react-icons/lib/md'
-
 import CurrencyIcon from '../../../../../../components/CurrencyIcon'
 import { btc } from '../../../../../../utils'
 
@@ -50,6 +46,9 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
 )
 
 Transaction.propTypes = {
+  transaction: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Transaction
diff --git a/app/routes/activity/components/components/Modal/Transaction/index.js b/app/routes/activity/components/components/Modal/Transaction/index.js
index a5e79192..7fc5e311 100644
--- a/app/routes/activity/components/components/Modal/Transaction/index.js
+++ b/app/routes/activity/components/components/Modal/Transaction/index.js
@@ -1,3 +1,3 @@
 import Transaction from './Transaction'
 
-export default Transaction
\ No newline at end of file
+export default Transaction
diff --git a/app/routes/activity/components/components/Modal/index.js b/app/routes/activity/components/components/Modal/index.js
index 1e9e3808..498702f4 100644
--- a/app/routes/activity/components/components/Modal/index.js
+++ b/app/routes/activity/components/components/Modal/index.js
@@ -1,3 +1,3 @@
 import Modal from './Modal'
 
-export default Modal
\ No newline at end of file
+export default Modal
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index d7948ef6..4b855678 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import { FaBolt } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
-import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
 const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
@@ -35,7 +34,7 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
     </div>
     <div className={styles.amount}>
       <span className='hint--top' data-hint='Payment amount'>
-        - 
+        -
         {
           ticker.currency === 'usd' ?
             btc.satoshisToUsd(payment.value, currentTicker.price_usd)
@@ -56,7 +55,10 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
 )
 
 Payment.propTypes = {
-  
+  payment: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  showActivityModal: PropTypes.func.isRequired
 }
 
 export default Payment
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 924a8b73..eba080f5 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import { FaChain } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
-import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
@@ -56,7 +55,10 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal })
 )
 
 Transaction.propTypes = {
-  
+  transaction: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  showActivityModal: PropTypes.func.isRequired
 }
 
 export default Transaction
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index d2a01579..a46f155a 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -27,7 +27,6 @@ class App extends Component {
       setMessage,
       setPubkey,
       setPaymentRequest,
-      payment,
       transaction: { sendingTransaction },
       peers,
       setCurrency,
@@ -61,7 +60,6 @@ class App extends Component {
           setMessage={setMessage}
           setPubkey={setPubkey}
           setPaymentRequest={setPaymentRequest}
-          payment={payment}
           peers={peers}
           ticker={ticker}
           form={form}
@@ -104,7 +102,6 @@ App.propTypes = {
   setMessage: PropTypes.func.isRequired,
   setPubkey: PropTypes.func.isRequired,
   setPaymentRequest: PropTypes.func.isRequired,
-  payment: PropTypes.object.isRequired,
   transaction: PropTypes.object.isRequired,
   peers: PropTypes.array,
   setCurrency: PropTypes.func.isRequired,
diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js
index e753d61a..0126daeb 100644
--- a/app/routes/app/components/components/Form/Form.js
+++ b/app/routes/app/components/components/Form/Form.js
@@ -7,7 +7,6 @@ import styles from './Form.scss'
 
 const Form = ({
   form: { formType, amount, onchainAmount, message, payment_request },
-  payment: { sendingPayment },
   setAmount,
   setOnchainAmount,
   setMessage,
@@ -72,7 +71,6 @@ const Form = ({
 )
 
 Form.propTypes = {
-  payment: PropTypes.object.isRequired,
   form: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   setAmount: PropTypes.func.isRequired,

From 35f8235b68d93894d773b72911aa5abefb6620e4 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 21 Sep 2017 21:37:46 -0500
Subject: [PATCH 20/21] fix(copy, live updates): fix copy change, add timestamp
 to new invoices, dispatch fetch payments after successful payment

---
 app/lnd/methods/index.js | 2 +-
 app/reducers/activity.js | 2 +-
 app/reducers/payment.js  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index 6f8b9b05..c3cf80fd 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -86,7 +86,7 @@ export default function (lnd, event, msg, data) {
         .then(newinvoice =>
           event.sender.send(
             'createdInvoice',
-            Object.assign(newinvoice, { memo: data.memo, value: data.value, r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex') })
+            Object.assign(newinvoice, { memo: data.memo, value: data.value, r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex'), creation_date: (Date.now() / 1000) })
           )
         )
         .catch(error => console.log('addInvoice error: ', error))
diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index 77913b68..d7c1d06b 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect'
 // ------------------------------------
 const initialState = {
   filterPulldown: false,
-  filter: { key: 'ALL_ACTIVITY', name: 'Activity' },
+  filter: { key: 'ALL_ACTIVITY', name: 'All Activity' },
   filters: [
     { key: 'ALL_ACTIVITY', name: 'All Activity' },
     { key: 'LN_ACTIVITY', name: 'LN Activity' },
diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index d8e44775..710a4a94 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -71,7 +71,7 @@ export const paymentSuccessful = () => (dispatch) => {
   dispatch(setForm({ modalOpen: false }))
 
   // Refetch payments (TODO: dont do a full refetch, rather append new tx to list)
-  fetchPayments()
+  dispatch(fetchPayments())
 
   // Reset the payment form
   dispatch(resetForm())

From c6a26b2c0762985150dfee272282d7e37d2fa882 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 21 Sep 2017 21:45:10 -0500
Subject: [PATCH 21/21] fix(lint): fix linting error

---
 app/lnd/methods/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index c3cf80fd..d6038aaf 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -86,7 +86,12 @@ export default function (lnd, event, msg, data) {
         .then(newinvoice =>
           event.sender.send(
             'createdInvoice',
-            Object.assign(newinvoice, { memo: data.memo, value: data.value, r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex'), creation_date: (Date.now() / 1000) })
+            Object.assign(newinvoice, {
+              memo: data.memo,
+              value: data.value,
+              r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex'),
+              creation_date: Date.now() / 1000
+            })
           )
         )
         .catch(error => console.log('addInvoice error: ', error))