feature/fix(tests + lint): write and fix tests and lint error

app/components/Form/Form.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { MdClose } from 'react-icons/lib/md'
@@ -10,7 +10,7 @@ import styles from './Form.scss'
 
 const FORM_TYPES = {
   PAY_FORM: PayForm,
-  REQUEST_FORM: RequestForm  
+  REQUEST_FORM: RequestForm
 }
 
 const Form = ({ formType, formProps, closeForm }) => {
@@ -23,7 +23,7 @@ const Form = ({ formType, formProps, closeForm }) => {
         <div className={styles.esc} onClick={closeForm}>
           <MdClose />
         </div>
-        
+
         <div className={styles.content}>
           <FormComponent {...formProps} />
         </div>

app/components/Form/PayForm.js

@@ -21,10 +21,10 @@ class PayForm extends Component {
 
   render() {
     const {
-      payform: { amount, payInput, invoice },
+      payform: { amount, payInput },
       currency,
       crypto,
-      
+
       isOnchain,
       isLn,
       currentAmount,
@@ -40,7 +40,7 @@ class PayForm extends Component {
     return (
       <div className={styles.container}>
         {showPayLoadingScreen && <LoadingBolt />}
-        
+
         <section className={`${styles.amountContainer} ${isLn ? styles.ln : ''}`}>
           <label htmlFor='amount'>
             <CurrencyIcon currency={currency} crypto={crypto} />
@@ -109,7 +109,7 @@ PayForm.propTypes = {
   payform: PropTypes.object.isRequired,
   currency: PropTypes.string.isRequired,
   crypto: PropTypes.string.isRequired,
-  
+
   isOnchain: PropTypes.bool.isRequired,
   isLn: PropTypes.bool.isRequired,
   currentAmount: PropTypes.oneOfType([
@@ -121,6 +121,7 @@ PayForm.propTypes = {
 
   setPayAmount: PropTypes.func.isRequired,
   setPayInput: PropTypes.func.isRequired,
+  fetchInvoice: PropTypes.func.isRequired,
 
   onPaySubmit: PropTypes.func.isRequired
 }

app/components/Form/RequestForm.js

@@ -12,43 +12,48 @@ const RequestForm = ({
   setRequestMemo,
 
   onRequestSubmit
-}) => {
+}) => (
-  return (
+  <div className={styles.container}>
-    <div className={styles.container}>
+    <section className={styles.amountContainer}>
-      <section className={styles.amountContainer}>
+      <label htmlFor='amount'>
-        <label htmlFor='amount'>
+        <CurrencyIcon currency={currency} crypto={crypto} />
-          <CurrencyIcon currency={currency} crypto={crypto} />
+      </label>
-        </label>
+      <input
-        <input
+        type='text'
-          type='text'
+        size=''
-          size=''
+        style={{ width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
-          style={{ width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
+        value={amount}
-          value={amount}
+        onChange={event => setRequestAmount(event.target.value)}
-          onChange={event => setRequestAmount(event.target.value)}
+        id='amount'
-          id='amount'
+      />
-        />
+    </section>
-      </section>
+    <section className={styles.inputContainer}>
-      <section className={styles.inputContainer}>
+      <label htmlFor='memo'>Request:</label>
-        <label htmlFor='memo'>Request:</label>
+      <input
-        <input
+        type='text'
-          type='text'
+        placeholder='Dinner, Rent, etc'
-          placeholder='Dinner, Rent, etc'
+        value={memo}
-          value={memo}
+        onChange={event => setRequestMemo(event.target.value)}
-          onChange={event => setRequestMemo(event.target.value)}
+        id='memo'
-          id='memo'
+      />
-        />
+    </section>
-      </section>
+    <section className={styles.buttonGroup}>
-      <section className={styles.buttonGroup}>
+      <div className={styles.button} onClick={onRequestSubmit}>
-        <div className={styles.button} onClick={onRequestSubmit}>
           Request
-        </div>
+      </div>
-      </section>
+    </section>
-    </div>
+  </div>
-  )
+)
-}
 
 RequestForm.propTypes = {
+  requestform: PropTypes.object.isRequired,
+  currency: PropTypes.string.isRequired,
+  crypto: PropTypes.string.isRequired,
+
+  setRequestAmount: PropTypes.func.isRequired,
+  setRequestMemo: PropTypes.func.isRequired,
 
+  onRequestSubmit: PropTypes.func.isRequired
 }
 
 export default RequestForm

app/components/Form/index.js

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

app/components/PayForm/PayForm.js

@@ -1,82 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import styles from './PayForm.scss'
-
-class PayForm extends Component {
-  render() {
-    const {
-      payform,
-      isOnchain,
-      isLn,
-      inputCaption,
-      setPayAmount,
-      setPayInput,
-      onPaySubmit
-    } = this.props
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <section className={`${styles.amountContainer} ${isLn ? styles.ln : ''}`}>
-            <input
-              type='text'
-              ref={input => this.amountInput = input} // eslint-disable-line
-              size=''
-              style={
-                isLn ?
-                  { width: '75%', fontSize: '85px' }
-                  :
-                  { width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }
-              }
-              value={payform.amount}
-              onChange={event => setPayAmount(event.target.value)}
-              id='amount'
-              readOnly={isLn}
-            />
-          </section>
-          <div className={styles.inputContainer}>
-            <aside className={styles.paymentIcon}>
-              {(() => {
-                if (isOnchain) {
-                  return (
-                    <i>
-                      <span>on-chain</span>
-                      <FaChain />
-                    </i>
-                  )
-                } else if (isLn) {
-                  return (
-                    <i>
-                      <span>lightning network</span>
-                      <FaBolt />
-                    </i>
-                  )
-                }
-                return null
-              })()}
-            </aside>
-            <section className={styles.input}>
-              <input
-                type='text'
-                placeholder='Payment request or bitcoin address'
-                value={payform.payInput}
-                onChange={event => setPayInput(event.target.value)}
-                id='paymentRequest'
-              />
-            </section>
-          </div>
-          <section className={styles.buttonGroup}>
-            <div className={styles.button} onClick={onPaySubmit}>Pay</div>
-          </section>
-        </div>
-      </div>
-    )
-  }
-}
-
-
-PayForm.propTypes = {
-  
-}
-
-export default PayForm

app/components/PayForm/PayForm.scss

@@ -1,152 +0,0 @@
-@import '../../variables.scss';
-
-.container {
-  width: 50%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  height: 75vh;
-  justify-content: center;
-  align-items: center;
-}
-
-.content {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  height: 75vh;
-  justify-content: center;
-  align-items: center;
-}
-
-.amountContainer {
-  color: $main;
-  display: flex;
-  justify-content: center;
-  min-height: 120px;
-  margin-bottom: 20px;
-  min-height: 175px;
-
-  &.ln {
-    opacity: 0.75;
-  }
-  
-  label, input[type=text] {
-    color: inherit;
-    display: inline-block;
-    vertical-align: top;
-    padding: 0;
-  }
-
-  label {
-    svg {
-      width: 85px;
-      height: 85px;
-    }
-
-    svg[data-icon='ltc'] {
-      margin-right: 10px;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-  }
-  
-  input[type=text] {
-    width: 100px;
-    font-size: 180px;
-    border: none;
-    outline: 0;
-    -webkit-appearance: none;
-  }
-}
-
-.inputContainer {
-  position: relative;
-  width: 100%;
-  padding: 40px 0;
-  cursor: pointer;
-
-  .info {
-    margin-bottom: 10px;
-    min-height: 19px;
-  }
-
-  .paymentIcon {
-    position: absolute;
-    width: 20%;
-    left: calc(-12.5% - 75px);
-    top: 42px;
-    color: $main;
-    font-size: 50px;
-    text-align: center;
-
-    span {
-      text-transform: uppercase;
-      display: block;
-      font-size: 12px;
-      font-weight: 200;
-    }
-  }
-}
-
-.input {
-  display: flex;
-  justify-content: center;
-  font-size: 18px;
-  height: auto;
-  min-height: 55px;
-  border: 1px solid $traditionalgrey;
-  border-radius: 6px;
-  position: relative;
-  padding: 0 20px;
-
-  label, input[type=text] {
-    font-size: inherit;
-  }
-
-  label {
-    padding-top: 19px;
-    padding-bottom: 12px;
-    color: $traditionalgrey;
-  }
-
-  input[type=text] {
-    width: 100%;
-    border: none;
-    outline: 0;
-    -webkit-appearance: none;
-    height: 55px;
-    padding: 0 10px;
-  }
-}
-
-.buttonGroup {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  border-radius: 6px;
-  overflow: hidden;
-
-  .button {
-    cursor: pointer;
-    height: 55px;
-    min-height: 55px;
-    text-transform: none;
-    font-size: 18px;
-    transition: opacity .2s ease-out;
-    background: $main;
-    color: $white;
-    border: none;
-    font-weight: 500;
-    padding: 0;
-    width: 100%;
-    text-align: center;
-    line-height: 55px;
-
-    &:first-child {
-      border-right: 1px solid lighten($main, 20%);
-    }
-  }
-}

app/components/PayForm/index.js

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

app/lnd/utils/index.js

@@ -19,8 +19,8 @@ export function decodeInvoice(payreq) {
       + bufferHexRotated.substr(0, bufferHexRotated.length - 1)
   const buffer = Buffer.from(bufferHex, 'hex')
 
-  var pubkeyBuffer = buffer.slice(0, 33);
+  const pubkeyBuffer = buffer.slice(0, 33);
-  var pubkey = pubkeyBuffer.toString('hex');
+  const pubkey = pubkeyBuffer.toString('hex');
 
   const paymentHashBuffer = buffer.slice(33, 65)
   const paymentHashHex = paymentHashBuffer.toString('hex')

app/reducers/form.js

@@ -1,6 +1,3 @@
-import { createSelector } from 'reselect'
-import bitcoin from 'bitcoinjs-lib'
-
 // Initial State
 const initialState = {
   formType: null

app/reducers/index.js

@@ -26,7 +26,7 @@ const rootReducer = combineReducers({
   payment,
   peers,
   channels,
-  
+
   form,
   payform,
   requestform,

app/reducers/invoice.js

@@ -83,7 +83,7 @@ export const fetchInvoice = payreq => (dispatch) => {
 }
 
 // Receive IPC event for form invoice
-export const receiveFormInvoice = (event, invoice) => dispatch => {
+export const receiveFormInvoice = (event, invoice) => (dispatch) => {
   dispatch(setPayInvoice(invoice))
   dispatch({ type: RECEIVE_FORM_INVOICE })
 }
@@ -105,7 +105,7 @@ export const createInvoice = (amount, memo, currency, rate) => (dispatch) => {
 }
 
 // Receive IPC event for newly created invoice
-export const createdInvoice = (event, invoice) => dispatch => {
+export const createdInvoice = (event, invoice) => (dispatch) => {
   // Close the form modal once the payment was succesful
   dispatch(setFormType(null))
 

app/reducers/payform.js

@@ -60,7 +60,7 @@ const ACTION_HANDLERS = {
   [SET_PAY_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
   [SET_PAY_INPUT]: (state, { payInput }) => ({ ...state, payInput }),
   [SET_PAY_INVOICE]: (state, { invoice }) => ({ ...state, invoice }),
-  
+
   [RESET_FORM]: () => (initialState)
 }
 
@@ -130,6 +130,8 @@ payFormSelectors.inputCaption = createSelector(
     if (isLn) {
       return `You're about to send ${amount} ${currency.toUpperCase()} over the Lightning Network which will be instant`
     }
+
+    return ''
   }
 )
 

app/reducers/requestform.js

@@ -1,6 +1,3 @@
-import { createSelector } from 'reselect'
-import bitcoin from 'bitcoinjs-lib'
-
 // Initial State
 const initialState = {
   amount: '0',
@@ -44,7 +41,7 @@ export function resetRequestForm() {
 const ACTION_HANDLERS = {
   [SET_REQUEST_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
   [SET_REQUEST_MEMO]: (state, { memo }) => ({ ...state, memo }),
-  
+
   [RESET_FORM]: () => (initialState)
 }
 

app/routes/app/components/App.js

@@ -55,7 +55,7 @@ class App extends Component {
           openPayForm={openPayForm}
           openRequestForm={openRequestForm}
         />
-        
+
         <div className={styles.content}>
           {children}
         </div>
@@ -69,17 +69,19 @@ App.propTypes = {
   ticker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   form: PropTypes.object.isRequired,
-  payform: PropTypes.object.isRequired,
+  formProps: PropTypes.object.isRequired,
-  requestform: PropTypes.object.isRequired,
+  closeForm: PropTypes.func.isRequired,
-  
+
   fetchInfo: PropTypes.func.isRequired,
   hideModal: PropTypes.func.isRequired,
   fetchTicker: PropTypes.func.isRequired,
   fetchBalance: PropTypes.func.isRequired,
   setCurrency: PropTypes.func.isRequired,
-  
+  openPayForm: PropTypes.func.isRequired,
+  openRequestForm: PropTypes.func.isRequired,
+
   currentTicker: PropTypes.object,
-  
+
   children: PropTypes.object.isRequired
 }
 

app/routes/app/components/components/Nav.js

@@ -86,7 +86,9 @@ Nav.propTypes = {
   ticker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   setCurrency: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  openPayForm: PropTypes.func.isRequired,
+  openRequestForm: PropTypes.func.isRequired
 }
 
 export default Nav

app/routes/app/containers/AppContainer.js

@@ -15,7 +15,6 @@ import { payInvoice } from 'reducers/payment'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
 
 
-
 import App from '../components/App'
 
 const mapDispatchToProps = {
@@ -27,9 +26,9 @@ const mapDispatchToProps = {
 
   showModal,
   hideModal,
-  
+
   setFormType,
-  
+
   setPayAmount,
   setPayInput,
   setRequestAmount,
@@ -47,7 +46,7 @@ const mapStateToProps = state => ({
   balance: state.balance,
   payment: state.payment,
   transaction: state.transaction,
-  
+
   form: state.form,
   payform: state.payform,
   requestform: state.requestform,
@@ -82,7 +81,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     onPaySubmit: () => {
       if (!stateProps.isOnchain && !stateProps.isLn) { return }
-      
+
       if (stateProps.isOnchain) {
         dispatchProps.sendCoins({
           value: stateProps.payform.amount,
@@ -121,8 +120,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     if (formType === 'PAY_FORM') { return payFormProps }
     if (formType === 'REQUEST_FORM') { return requestFormProps }
+
+    return {}
   }
-  
+
   return {
     ...stateProps,
     ...dispatchProps,

test/reducers/__snapshots__/form.spec.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`reducers formReducer should correctly setFormType 1`] = `
+Object {
+  "formType": "FOO",
+}
+`;
+
 exports[`reducers formReducer should handle initial state 1`] = `
 Object {
   "formType": null,

test/reducers/form.spec.js

@@ -5,13 +5,7 @@ import formReducer, {
 // describe('reducers', () => {
 //   describe('formReducer', () => {
 
-//     it('should have SET_FORM_TYPE', () => {
-//       expect(SET_FORM_TYPE).toEqual('SET_FORM_TYPE')
-//     })
 
-//     it('should correctly setFormType', () => {
-//       expect(formReducer(undefined, { type: SET_FORM_TYPE, formType: 'FOO' })).toMatchSnapshot()
-//     })
 //   }
 // }
 
@@ -21,5 +15,12 @@ describe('reducers', () => {
       expect(formReducer(undefined, {})).toMatchSnapshot()
     })
 
+    it('should have SET_FORM_TYPE', () => {
+      expect(SET_FORM_TYPE).toEqual('SET_FORM_TYPE')
+    })
+
+    it('should correctly setFormType', () => {
+      expect(formReducer(undefined, { type: SET_FORM_TYPE, formType: 'FOO' })).toMatchSnapshot()
+    })
   })
 })