fix(lint): fix all lint errors except a few (will fix the rest after i finish the rest of the modals)

.eslintrc

@@ -40,7 +40,12 @@
     "max-len": ["error", 150],
     "import/no-extraneous-dependencies": 0,
     "no-new": 0,
-    "compat/compat": "error"
+    "compat/compat": "error",
+    "prefer-destructuring": ["error", {
+      "array": false,
+      "object": true
+    }],
+    "prefer-promise-reject-errors": 0
   },
   "plugins": [
     "flowtype",

app/components/Activity/ActivityModal.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
+import x from 'icons/x.svg'
 
 // import Transaction from './Transaction'
 import PaymentModal from './PaymentModal'
 import InvoiceModal from './InvoiceModal'
 
-import x from 'icons/x.svg'
 import styles from './ActivityModal.scss'
 
 const ActivityModal = ({
@@ -27,7 +27,6 @@ const ActivityModal = ({
   if (!modalType) { return null }
 
   const SpecificModal = MODAL_COMPONENTS[modalType]
-  console.log('toggleCurrencyProps: ', toggleCurrencyProps)
   return (
     <div className={styles.container}>
       <div className={styles.closeContainer}>
@@ -46,6 +45,10 @@ const ActivityModal = ({
 }
 
 ActivityModal.propTypes = {
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  toggleCurrencyProps: PropTypes.object.isRequired,
+
   modalType: PropTypes.string,
   modalProps: PropTypes.object.isRequired,
   hideActivityModal: PropTypes.func.isRequired

app/components/Activity/InvoiceModal.js

@@ -10,12 +10,10 @@ import { showNotification } from 'notifications'
 
 import { FaAngleDown } from 'react-icons/lib/fa'
 
-import { btc } from 'utils'
 import Value from 'components/Value'
 
 import styles from './InvoiceModal.scss'
 
-
 const InvoiceModal = ({
   invoice,
   ticker,
@@ -59,8 +57,7 @@ const InvoiceModal = ({
               <ul className={showCurrencyFilters && styles.active}>
                 {
                   currentCurrencyFilters.map(filter =>
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>
+                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
-                  )
                 }
               </ul>
             </section>
@@ -88,14 +85,17 @@ const InvoiceModal = ({
 
       <div className={styles.actions}>
         <div>Save as image</div>
-        <div>Copy Request</div>
+        <div onClick={copyPaymentRequest}>Copy Request</div>
       </div>
     </div>
   )
 }
 
 InvoiceModal.propTypes = {
-  invoice: PropTypes.object.isRequired
+  invoice: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  toggleCurrencyProps: PropTypes.object.isRequired
 }
 
 export default InvoiceModal

app/components/Activity/PaymentModal.js

@@ -6,12 +6,10 @@ import 'moment-timezone'
 
 import { FaAngleDown } from 'react-icons/lib/fa'
 
-import { btc } from 'utils'
 import Value from 'components/Value'
 
 import styles from './PaymentModal.scss'
 
-
 const PaymentModal = ({
   payment,
   ticker,
@@ -28,9 +26,7 @@ const PaymentModal = ({
   return (
     <div className={styles.container}>
       <div className={styles.content}>
-        <section className={styles.left}>
+        <section className={styles.left} />
-          
-        </section>
         <section className={styles.right}>
           <div className={styles.details}>
             <section className={styles.amount}>
@@ -43,8 +39,7 @@ const PaymentModal = ({
               <ul className={showCurrencyFilters && styles.active}>
                 {
                   currentCurrencyFilters.map(filter =>
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>
+                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
-                  )
                 }
               </ul>
             </section>

app/components/Form/Form.js

@@ -2,12 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Isvg from 'react-inlinesvg'
-import { MdClose } from 'react-icons/lib/md'
+import x from 'icons/x.svg'
 
 import Pay from './Pay'
 import Request from './Request'
 
-import x from 'icons/x.svg'
 import styles from './Form.scss'
 
 const FORM_TYPES = {

app/components/Form/Pay.js

@@ -9,7 +9,6 @@ import { FaAngleDown } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 import LoadingBolt from 'components/LoadingBolt'
-import CurrencyIcon from 'components/CurrencyIcon'
 
 import styles from './Pay.scss'
 
@@ -30,9 +29,12 @@ class Pay extends Component {
 
   render() {
     const {
-      payform: { amount, payInput, showErrors, invoice, showCurrencyFilters },
+      payform: {
-      currency,
+        payInput,
-      crypto,
+        showErrors,
+        invoice,
+        showCurrencyFilters
+      },
       nodes,
       ticker,
 
@@ -40,10 +42,8 @@ class Pay extends Component {
       isLn,
       currentAmount,
       usdAmount,
-      inputCaption,
       showPayLoadingScreen,
       payFormIsValid: { errors, isValid },
-      payInputMin,
       currentCurrencyFilters,
       currencyName,
 
@@ -122,7 +122,7 @@ class Pay extends Component {
           <section className={styles.amount}>
             <div className={styles.top}>
               <label htmlFor='amount'>Amount</label>
-              <span></span>
+              <span />
             </div>
             <div className={styles.bottom}>
               <input
@@ -144,8 +144,7 @@ class Pay extends Component {
                 <ul className={showCurrencyFilters && styles.active}>
                   {
                     currentCurrencyFilters.map(filter =>
-                      <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>
+                      <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
-                    )
                   }
                 </ul>
               </div>
@@ -175,8 +174,7 @@ Pay.propTypes = {
     payInput: PropTypes.string.isRequired,
     showErrors: PropTypes.object.isRequired
   }).isRequired,
-  currency: PropTypes.string.isRequired,
+  currencyName: PropTypes.string.isRequired,
-  crypto: PropTypes.string.isRequired,
 
   isOnchain: PropTypes.bool.isRequired,
   isLn: PropTypes.bool.isRequired,
@@ -184,7 +182,10 @@ Pay.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  inputCaption: PropTypes.string.isRequired,
+  usdAmount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   showPayLoadingScreen: PropTypes.bool.isRequired,
   payFormIsValid: PropTypes.shape({
     errors: PropTypes.object,
@@ -197,7 +198,14 @@ Pay.propTypes = {
   onPayInputBlur: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
 
-  onPaySubmit: PropTypes.func.isRequired
+  onPaySubmit: PropTypes.func.isRequired,
+  setCurrencyFilters: PropTypes.func.isRequired,
+  setCurrency: PropTypes.func.isRequired,
+
+  ticker: PropTypes.object.isRequired,
+
+  nodes: PropTypes.array.isRequired,
+  currentCurrencyFilters: PropTypes.array.isRequired
 }
 
 export default Pay

app/components/Form/Request.js

@@ -6,7 +6,6 @@ import hand from 'icons/hand.svg'
 import { FaAngleDown } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
-import CurrencyIcon from 'components/CurrencyIcon'
 import styles from './Request.scss'
 
 const Request = ({
@@ -24,7 +23,6 @@ const Request = ({
 
   onRequestSubmit
 }) => {
-  console.log('requestUsdAmount: ', requestUsdAmount)
   const onCurrencyFilterClick = (currency) => {
     // change the input amount
     setRequestAmount(btc.convert(ticker.currency, currency, amount))
@@ -59,7 +57,7 @@ const Request = ({
         <section className={styles.amount}>
           <div className={styles.top}>
             <label htmlFor='amount'>Amount</label>
-            <span></span>
+            <span />
           </div>
           <div className={styles.bottom}>
             <input
@@ -76,8 +74,7 @@ const Request = ({
               <ul className={showCurrencyFilters && styles.active}>
                 {
                   currentCurrencyFilters.map(filter =>
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>
+                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
-                  )
                 }
               </ul>
             </div>
@@ -100,14 +97,28 @@ const Request = ({
 
 Request.propTypes = {
   requestform: PropTypes.shape({
-    amount: PropTypes.string,
+    amount: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
     memo: PropTypes.string
   }).isRequired,
 
+  requestUsdAmount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  currencyName: PropTypes.string.isRequired,
+
+  currentCurrencyFilters: PropTypes.array.isRequired,
+
   setRequestAmount: PropTypes.func.isRequired,
   setRequestMemo: PropTypes.func.isRequired,
+  onRequestSubmit: PropTypes.func.isRequired,
+  setCurrency: PropTypes.func.isRequired,
+  setRequestCurrencyFilters: PropTypes.func.isRequired,
 
-  onRequestSubmit: PropTypes.func.isRequired
+  ticker: PropTypes.object.isRequired
 }
 
 export default Request

app/components/Onboarding/FormContainer.js

@@ -7,7 +7,13 @@ import { FaAngleLeft, FaAngleRight } from 'react-icons/lib/fa'
 import zapLogo from 'icons/zap_logo.svg'
 import styles from './FormContainer.scss'
 
-const FormContainer = ({ title, description, back, next, children }) => (
+const FormContainer = ({
+  title,
+  description,
+  back,
+  next,
+  children
+}) => (
   <div className={styles.container}>
     <div className={styles.titleBar} />
 

app/components/Onboarding/Onboarding.js

@@ -24,8 +24,8 @@ const Onboarding = ({
       case 1:
         return (
           <FormContainer
-            title={'1. What should we call you?'}
+            title='1. What should we call you?'
-            description={'Set your nickname to help others connect with you on the Lightning Network'}
+            description='Set your nickname to help others connect with you on the Lightning Network'
             back={null}
             next={() => changeStep(2)}
           >
@@ -35,8 +35,8 @@ const Onboarding = ({
       case 2:
         return (
           <FormContainer
-            title={'2. Autopilot'}
+            title='2. Autopilot'
-            description={'Autopilot is an automatic network manager. Instead of manually adding people to build your network to make payments, enable autopilot to automatically connect you to the Lightning Network using 60% of your balance.'} // eslint-disable-line
+            description='Autopilot is an automatic network manager. Instead of manually adding people to build your network to make payments, enable autopilot to automatically connect you to the Lightning Network using 60% of your balance.' // eslint-disable-line
             back={() => changeStep(1)}
             next={() => submit(alias, autopilot)}
           >

app/components/Onboarding/Syncing.js

@@ -24,9 +24,9 @@ class Syncing extends Component {
           <section className={styles.progressContainer}>
             <h1>Syncing to the blockchain...</h1>
             <div className={styles.progressBar}>
-              <div className={styles.progress} style={{ width: isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} />
+              <div className={styles.progress} style={{ width: Number.isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} />
             </div>
-            <h4>{isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4>
+            <h4>{Number.isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4>
           </section>
         </div>
       </div>

app/components/Value/Value.js

@@ -2,29 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { btc } from 'utils'
 
-const Value = ({ value, currency, currentTicker }) => {
+const Value = ({ value, currency, currentTicker }) => (<i>{btc.convert('sats', currency, value, currentTicker.price_usd)}</i>)
-  const renderValue = () => {
-    switch (currency) {
-      case 'btc':
-        return btc.satoshisToBtc(value)
-      case 'bits':
-        return btc.satoshisToBits(value)
-      case 'sats':
-        return value
-      case 'usd':
-        return btc.satoshisToUsd(value, currentTicker.price_usd) 
-      default: 
-        return value
-    }
-  }
-
-  return (
-    <i>{renderValue()}</i>
-  )
-}
 
 Value.propTypes = {
-  
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]).isRequired,
+  currency: PropTypes.string.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Value

app/components/Wallet/Wallet.js

@@ -23,7 +23,6 @@ class Wallet extends Component {
 
   render() {
     const {
-      setCurrency,
       balance,
       address,
       info,

app/lnd/methods/index.js

@@ -47,11 +47,8 @@ export default function (lnd, meta, event, msg, data) {
           networkController.queryRoutes(lnd, meta, {
             pubkey: invoiceData.destination,
             amount: invoiceData.num_satoshis
-          })
+          }))
-        )
+        .then(routes => event.sender.send('receiveInvoiceAndQueryRoutes', routes))
-        .then(routes =>
-          event.sender.send('receiveInvoiceAndQueryRoutes', routes)
-        )
         .catch(error => console.log('getInvoiceAndQueryRoutes invoice error: ', error))
       break
     case 'newaddress':

app/reducers/invoice.js

@@ -10,7 +10,7 @@ import { resetRequestForm } from './requestform'
 import { setError } from './error'
 
 import { showNotification } from '../notifications'
-import { btc, usd } from '../utils'
+import { btc } from '../utils'
 // ------------------------------------
 // Constants
 // ------------------------------------
@@ -96,7 +96,7 @@ export const fetchInvoices = () => (dispatch) => {
 export const receiveInvoices = (event, { invoices }) => dispatch => dispatch({ type: RECEIVE_INVOICES, invoices })
 
 // Send IPC event for creating an invoice
-export const createInvoice = (amount, memo, currency, rate) => (dispatch) => {
+export const createInvoice = (amount, memo, currency) => (dispatch) => {
   // backend needs value in satoshis no matter what currency we are using
   const value = btc.convert(currency, 'sats', amount)
 

app/reducers/payform.js

@@ -164,7 +164,6 @@ payFormSelectors.currentAmount = createSelector(
           return invoice.num_satoshis
         default:
           return invoice.num_satoshis
-          
       }
     }
 
@@ -185,17 +184,7 @@ payFormSelectors.usdAmount = createSelector(
       return btc.satoshisToUsd((invoice.num_satoshis || 0), ticker.price_usd)
     }
 
-    switch (currency) {
+    return btc.convert(currency, 'usd', amount, ticker.price_usd)
-      case 'btc':
-        return btc.btcToUsd(amount, ticker.price_usd)
-      case 'bits':
-        return btc.bitsToUsd(amount, ticker.price_usd)
-      case 'sats':
-        return btc.satoshisToUsd(amount, ticker.price_usd)
-      default:
-        return ''
-        
-    }
   }
 )
 

app/reducers/requestform.js

@@ -72,16 +72,7 @@ requestFormSelectors.usdAmount = createSelector(
   (amount, currency, ticker) => {
     if (!ticker || !ticker.price_usd) { return false }
 
-    switch (currency) {
+    return btc.convert(currency, 'usd', amount, ticker.price_usd)
-      case 'btc':
-        return btc.btcToUsd(amount, ticker.price_usd)
-      case 'bits':
-        return btc.bitsToUsd(amount, ticker.price_usd)
-      case 'sats':
-        return btc.satoshisToUsd(amount, ticker.price_usd)
-      default:
-        return ''
-    }    
   }
 )
 

app/reducers/transaction.js

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron'
 import { showNotification } from '../notifications'
-import { btc, usd } from '../utils'
+import { btc } from '../utils'
 import { newAddress } from './address'
 import { fetchBalance } from './balance'
 import { setFormType } from './form'
@@ -46,7 +46,7 @@ export const fetchTransactions = () => (dispatch) => {
 export const receiveTransactions = (event, { transactions }) => dispatch => dispatch({ type: RECEIVE_TRANSACTIONS, transactions })
 
 export const sendCoins = ({
-  value, addr, currency, rate
+  value, addr, currency
 }) => (dispatch) => {
   // backend needs amount in satoshis no matter what currency we are using
   const amount = btc.convert(currency, 'sats', value)

app/routes/activity/components/Activity.js

@@ -7,8 +7,6 @@ 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 {
@@ -44,18 +42,16 @@ class Activity extends Component {
 
   render() {
     const {
-      ticker,
       invoice: { invoiceLoading },
-      address: { address },
       balance,
-      info,
       payment: { paymentLoading },
-      currentTicker,
+      activity: {
-      activity: { modal, filters, filter, filterPulldown },
+        filters,
-      hideActivityModal,
+        filter,
+        filterPulldown
+      },
       changeFilter,
       currentActivity,
-      newAddress,
 
       walletProps
     } = this.props
@@ -66,14 +62,6 @@ class Activity extends Component {
 
     return (
       <div>
-        <Modal
-          modalType={modal.modalType}
-          modalProps={modal.modalProps}
-          hideActivityModal={hideActivityModal}
-          ticker={ticker}
-          currentTicker={currentTicker}
-        />
-
         <Wallet {...walletProps} />
 
         <div className={styles.activities}>
@@ -119,15 +107,12 @@ Activity.propTypes = {
   currentTicker: PropTypes.object.isRequired,
 
   showActivityModal: PropTypes.func.isRequired,
-  hideActivityModal: PropTypes.func.isRequired,
   changeFilter: PropTypes.func.isRequired,
-  newAddress: PropTypes.func.isRequired,
 
   activity: PropTypes.object.isRequired,
   currentActivity: PropTypes.array.isRequired,
-  address: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
-  info: PropTypes.object.isRequired
+  walletProps: PropTypes.object.isRequired
 }
 
 export default Activity

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

@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaBolt } from 'react-icons/lib/fa'
-import { btc } from 'utils'
 import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import clockIcon from 'icons/clock.svg'

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

@@ -1,74 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Moment from 'react-moment'
-import 'moment-timezone'
-
-import QRCode from 'qrcode.react'
-import copy from 'copy-to-clipboard'
-import { showNotification } from 'notifications'
-
-import { FaCircle, FaCopy } from 'react-icons/lib/fa'
-
-import { btc } from 'utils'
-
-import styles from './Invoice.scss'
-
-
-const Invoice = ({ invoice, ticker, currentTicker }) => {
-  const copyPaymentRequest = () => {
-    copy(invoice.payment_request)
-    showNotification('Noice', 'Successfully copied to clipboard')
-  }
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.settled}>
-        {
-          !invoice.settled &&
-          <p>
-            <FaCircle />
-            <span>Not Paid</span>
-          </p>
-        }
-      </div>
-      <header>
-        <h3>{invoice.memo}</h3>
-        <h1>
-          <span className={styles.value}>
-            {
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(invoice.value)
-            }
-          </span>
-          <i>BTC</i>
-        </h1>
-      </header>
-      <div className={styles.qrcode}>
-        <QRCode value={invoice.payment_request} size={150} />
-      </div>
-      <div className={styles.input}>
-        <p className={styles.invoiceAddress}>
-          <span>{invoice.payment_request}</span>
-          <span onClick={copyPaymentRequest} className='hint--left' data-hint='Copy Invoice'>
-            <FaCopy />
-          </span>
-        </p>
-      </div>
-      <p className={styles.date}>
-      Created on
-        <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>
-      </p>
-    </div>
-  )
-}
-
-Invoice.propTypes = {
-  invoice: PropTypes.object.isRequired,
-  ticker: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Invoice

app/routes/activity/components/components/Modal/Invoice/Invoice.scss

@@ -1,106 +0,0 @@
-@import '../../../../../../variables.scss';
-
-.container {
-  .settled {
-    position: absolute;
-    top: 0;
-    padding: 10px 0 10px 40px;
-    color: $darkestgrey;
-
-    svg {
-      line-height: 20px;
-      font-size: 10px;
-      vertical-align: middle;
-    }
-
-    span {
-      font-size: 12px;
-      margin-left: 5px;
-    }
-  }
-
-  header {
-    background: $lightgrey;
-    padding-bottom: 20px;
-  }
-
-  h3 {
-    font-size: 20px;
-    color: $black;
-    font-weight: bold;
-    padding: 10px 40px;
-  }
-
-  h1 {
-    color: $main;
-    padding: 10px 40px;
-
-    .value {
-      font-size: 30px;
-    }
-
-    i {
-      margin-left: 2px;
-      vertical-align: top;
-    }
-  }
-
-  .qrcode {
-    text-align: center;
-    margin-top: 40px;
-
-  }
-
-  .input {
-    padding: 10px 40px;
-    .paymentRequest {
-      text-align: center;
-      font-size: 12px;
-      padding: 15px;
-      background: $lightgrey;
-      border: 1px solid transparent;
-      display: block;
-      width: 90%;
-      margin: 20px auto 0 auto;
-    }
-  }
-
-  .date {
-    text-align: center;
-    padding-bottom: 40px;
-    margin-top: 20px;
-
-    time {
-      margin-left: 3px;
-    }
-  }
-
-  .invoiceAddress {
-      display: flex;
-      flex-direction: row;
-      font-family: 'Roboto';
-      font-size: 14px;
-      font-weight: 200;
-      background: $lightgrey;
-
-      span {
-        padding: 15px;
-      }
-
-      span:nth-child(1) {
-        flex: 9;
-        overflow-x: scroll;
-      }
-
-      span:nth-child(2) {
-        background: $darkgrey;
-        color: $black;
-        cursor: pointer;
-        transition: all 0.25s;
-
-        &:hover {
-          background: $darkestgrey;
-        }
-      }
-  }
-}

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

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

app/routes/activity/components/components/Modal/Modal.js

@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-import { MdClose } from 'react-icons/lib/md'
-import Isvg from 'react-inlinesvg'
-
-import Transaction from './Transaction'
-import Payment from './Payment'
-import Invoice from './Invoice'
-
-import x from 'icons/x.svg'
-import styles from './Modal.scss'
-
-const Modal = ({
-  modalType, modalProps, hideActivityModal, ticker, currentTicker
-}) => {
-  const MODAL_COMPONENTS = {
-    TRANSACTION: Transaction,
-    PAYMENT: Payment,
-    INVOICE: Invoice
-  }
-
-  const customStyles = {
-    overlay: {
-      cursor: 'pointer'
-    },
-    content: {
-      top: 'auto',
-      left: '0',
-      right: '0',
-      bottom: 'auto',
-      width: '40%',
-      margin: '50px auto',
-      borderRadius: 'none',
-      padding: '0'
-    }
-  }
-
-  if (!modalType) { return null }
-
-  const SpecificModal = MODAL_COMPONENTS[modalType]
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.closeContainer}>
-        <span onClick={() => hideActivityModal()}>
-          <Isvg src={x} />
-        </span>
-      </div>
-      <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />
-    </div>
-  )
-}
-
-Modal.propTypes = {
-  modalType: PropTypes.string,
-  modalProps: PropTypes.object.isRequired,
-  hideActivityModal: PropTypes.func.isRequired,
-  ticker: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Modal

app/routes/activity/components/components/Modal/Modal.scss

@@ -1,27 +0,0 @@
-@import '../../../../../variables.scss';
-
-.container {
-  position: relative;
-  height: 100vh;
-  background: $spaceblue;
-}
-
-.closeContainer {
-  text-align: right;
-  padding: 20px 40px 0px;
-
-  span {
-    cursor: pointer;
-    opacity: 1.0;
-    transition: 0.25s all;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  svg {
-    color: $white;
-  }
-}
-

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

@@ -1,52 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Moment from 'react-moment'
-import 'moment-timezone'
-
-import { btc } from 'utils'
-
-import styles from './Payment.scss'
-
-
-const Payment = ({ payment, ticker, currentTicker }) => (
-  <div className={styles.container}>
-    <header>
-      <div className={styles.title}>
-        <h2>Sent</h2>
-        <h1>
-          <span className={styles.value}>
-            {
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(payment.value)
-            }
-          </span>
-          <i>
-            BTC
-          </i>
-        </h1>
-      </div>
-      <h3>{payment.payment_hash}</h3>
-    </header>
-    <dl>
-      <dt>Fee</dt>
-      <dd>{payment.fee}</dd>
-      <dt>Hops</dt>
-      <dd>{payment.path.length}</dd>
-      <dt>Date</dt>
-      <dd>
-        <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
-      </dd>
-    </dl>
-  </div>
-)
-
-Payment.propTypes = {
-  payment: PropTypes.object.isRequired,
-  ticker: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Payment

app/routes/activity/components/components/Modal/Payment/Payment.scss

@@ -1,61 +0,0 @@
-@import '../../../../../../variables.scss';
-
-.container {
-  header {
-    padding: 5px 40px 20px 40px;
-    background: $lightgrey;
-
-    .title {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 30px;
-
-      h2 {
-        text-transform: uppercase;
-        font-size: 24px;
-        margin-right: 10px;
-      }
-    }
-  }
-
-  h1 {
-    color: $main;
-
-    .value {
-      font-size: 24px;
-    }
-
-    i {
-      margin-left: 2px;
-      vertical-align: top;
-    }
-  }
-
-  h3 {
-    font-size: 14px;
-    text-align: center;
-    color: $darkestgrey;
-  }
-
-  dl {
-    padding: 40px 40px 40px 40px;
-  }
-
-  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: 30px 0 10px 0;
-    margin-left: 0;
-    border-bottom: 1px solid $darkgrey;
-  }
-}

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

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

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Moment from 'react-moment'
-import 'moment-timezone'
-
-import { btc, blockExplorer } from 'utils'
-
-import styles from './Transaction.scss'
-
-
-const Transaction = ({ transaction, ticker, currentTicker }) => (
-  <div className={styles.container}>
-    <header>
-      <div className={styles.title}>
-        <h2>
-          {
-            transaction.amount < 0 ?
-              'Sent'
-              :
-              'Received'
-          }
-        </h2>
-        <h1>
-          <span className={styles.value}>
-            {
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(transaction.amount)
-            }
-          </span>
-          <i>BTC</i>
-        </h1>
-      </div>
-      <h3 onClick={() => blockExplorer.showTransaction(transaction.tx_hash)}>{transaction.tx_hash}</h3>
-    </header>
-    <dl>
-      <dt>Confirmations</dt>
-      <dd>{transaction.num_confirmations}</dd>
-      <dt>Fee</dt>
-      <dd>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(transaction.total_fees)
-            :
-            btc.satoshisToBtc(transaction.total_fees)
-        }
-      </dd>
-      <dt>Date</dt>
-      <dd>
-        <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
-      </dd>
-    </dl>
-  </div>
-)
-
-Transaction.propTypes = {
-  transaction: PropTypes.object.isRequired,
-  ticker: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Transaction

app/routes/activity/components/components/Modal/Transaction/Transaction.scss

@@ -1,72 +0,0 @@
-@import '../../../../../../variables.scss';
-
-.container {
-  header {
-    padding: 5px 40px 20px 40px;
-    background: $lightgrey;
-
-    .title {
-      display: flex;
-      flex-direction: row;
-
-      h2 {
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  h1 {
-    text-align: center;
-    color: $main;
-
-    .value {
-      font-size: 24px;
-    }
-
-    i {
-      margin-left: 2px;
-      vertical-align: top;
-    }
-  }
-
-  h3 {
-    font-size: 14px;
-    text-align: center;
-    color: $darkestgrey;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  h2 {
-    text-align: center;
-    margin-right: 10px;
-    margin-bottom: 30px;
-    text-transform: uppercase;
-    font-size: 24px;
-  }
-
-  dl {
-    padding: 40px 40px 40px 40px;
-  }
-
-  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: 30px 0 10px 0;
-    margin-left: 0;
-    border-bottom: 1px solid $darkgrey;
-  }
-}

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

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

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

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

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

@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaBolt } from 'react-icons/lib/fa'
-import { btc } from 'utils'
 import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'

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

@@ -4,7 +4,6 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaChain } from 'react-icons/lib/fa'
-import { btc } from 'utils'
 import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'

app/routes/app/components/App.js

@@ -11,13 +11,20 @@ import Network from 'components/Contacts/Network'
 import ContactModal from 'components/Contacts/ContactModal'
 import ContactsForm from 'components/Contacts/ContactsForm'
 
-import ActivityModal from 'components/activity/ActivityModal'
+import ActivityModal from 'components/Activity/ActivityModal'
 
 import styles from './App.scss'
 
 class App extends Component {
   componentWillMount() {
-    const { fetchTicker, fetchInfo, newAddress, fetchChannels, fetchBalance, fetchDescribeNetwork } = this.props
+    const {
+      fetchTicker,
+      fetchInfo,
+      newAddress,
+      fetchChannels,
+      fetchBalance,
+      fetchDescribeNetwork
+    } = this.props
 
     // fetch price ticker
     fetchTicker()
@@ -35,9 +42,6 @@ class App extends Component {
 
   render() {
     const {
-      activity,
-      hideActivityModal,
-      
       modal: { modalType, modalProps },
       hideModal,
       ticker,
@@ -100,6 +104,7 @@ App.propTypes = {
   contactModalProps: PropTypes.object,
   contactsFormProps: PropTypes.object,
   networkTabProps: PropTypes.object,
+  activityModalProps: PropTypes.object,
 
   newAddress: PropTypes.func.isRequired,
   fetchInfo: PropTypes.func.isRequired,

app/utils/btc.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import sb from 'satoshi-bitcoin'
 //////////////////////
 // BTC to things /////

test/components/Form.spec.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { shallow } from 'enzyme'
 
 import Form from '../../app/components/Form'
-import PayForm from '../../app/components/Form/PayForm'
+import Pay from '../../app/components/Form/Pay'
-import RequestForm from '../../app/components/Form/RequestForm'
+import Request from '../../app/components/Form/Request'
 
 const payFormProps = {
   payform: {
@@ -55,16 +55,16 @@ describe('Form', () => {
   describe('should show pay form when formType is PAY_FORM', () => {
     const props = { ...defaultProps, formType: 'PAY_FORM', formProps: payFormProps }
     const el = shallow(<Form {...props} />)
-    it('should contain PayForm', () => {
+    it('should contain Pay', () => {
-      expect(el.find(PayForm)).toHaveLength(1)
+      expect(el.find(Pay)).toHaveLength(1)
     })
   })
 
   describe('should show request form when formType is REQUEST_FORM', () => {
     const props = { ...defaultProps, formType: 'REQUEST_FORM', formProps: requestFormProps }
     const el = shallow(<Form {...props} />)
-    it('should contain RequestForm', () => {
+    it('should contain Request', () => {
-      expect(el.find(RequestForm)).toHaveLength(1)
+      expect(el.find(Request)).toHaveLength(1)
     })
   })
 })

test/components/Form/Payform.spec.js → test/components/Form/Pay.spec.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import PayForm from '../../../app/components/Form/PayForm'
+import Pay from '../../../app/components/Form/Pay'
 
 const defaultProps = {
   payform: {
@@ -30,9 +30,9 @@ const defaultProps = {
 
 describe('Form', () => {
   describe('should show the form without an input', () => {
-    const el = shallow(<PayForm {...defaultProps} />)
+    const el = shallow(<Pay {...defaultProps} />)
 
-    it('should contain PayForm', () => {
+    it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)
       expect(el.contains('lightning network')).toBe(false)
       expect(el.contains('on-chain')).toBe(false)
@@ -41,9 +41,9 @@ describe('Form', () => {
 
   describe('should show lightning with a lightning input', () => {
     const props = { ...defaultProps, isLn: true }
-    const el = shallow(<PayForm {...props} />)
+    const el = shallow(<Pay {...props} />)
 
-    it('should contain PayForm', () => {
+    it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)
       expect(el.contains('lightning network')).toBe(true)
       expect(el.contains('on-chain')).toBe(false)
@@ -52,9 +52,9 @@ describe('Form', () => {
 
   describe('should show on-chain with an on-chain input', () => {
     const props = { ...defaultProps, isOnchain: true }
-    const el = shallow(<PayForm {...props} />)
+    const el = shallow(<Pay {...props} />)
 
-    it('should contain PayForm', () => {
+    it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)
       expect(el.contains('lightning network')).toBe(false)
       expect(el.contains('on-chain')).toBe(true)

test/components/Form/RequestForm.spec.js → test/components/Form/Request.spec.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import RequestForm from '../../../app/components/Form/RequestForm'
+import Request from '../../../app/components/Form/Request'
 
 const defaultProps = {
   requestform: {
@@ -20,8 +20,8 @@ const defaultProps = {
 describe('Form', () => {
   describe('should show request form when formType is REQUEST_FORM', () => {
     const props = { ...defaultProps }
-    const el = shallow(<RequestForm {...props} />)
+    const el = shallow(<Request {...props} />)
-    it('should contain RequestForm', () => {
+    it('should contain Request', () => {
       expect(el.contains('Request')).toBe(true)
     })
   })

test/reducers/form.spec.js

@@ -1,13 +1,4 @@
-import formReducer, {
+import formReducer, { SET_FORM_TYPE } from '../../app/reducers/form'
-  SET_FORM_TYPE
-} from '../../app/reducers/form'
-
-// describe('reducers', () => {
-//   describe('formReducer', () => {
-
-
-//   }
-// }
 
 describe('reducers', () => {
   describe('formReducer', () => {