create components for each type of activity / fix modal not closing on successful payment

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())
+}
 
 
 // ------------------------------------

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>
     )

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

app/routes/activity/components/components/Invoice/index.js

@@ -0,0 +1,3 @@
+import Invoice from './Invoice'
+
+export default Invoice

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

app/routes/activity/components/components/Payment/index.js

@@ -0,0 +1,3 @@
+import Payment from './Payment'
+
+export default Payment

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

app/routes/activity/components/components/Transaction/index.js

@@ -0,0 +1,3 @@
+import Transaction from './Transaction'
+
+export default Transaction

app/routes/activity/containers/ActivityContainer.js

@@ -24,7 +24,6 @@ const mapDispatchToProps = {
   searchInvoices
 }
 
-console.log('activitySelectors: ', activitySelectors)
 const mapStateToProps = state => ({
   activity: state.activity,
 

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,