feature(global-errors): hook up global errors reducer to component and set error on transaction fail

app/components/GlobalError/GlobalError.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './GlobalError'
+import styles from './GlobalError.scss'
 
 const GlobalError = ({ error }) => {
   console.log('error: ', error)
+  if (!error) { return null }
   return (
-    <div>
-      yo global error mf
+    <div className={styles.container}>
+      <h2>{error}</h2>
     </div>
   )
 }

app/components/GlobalError/GlobalError.scss

@@ -0,0 +1,24 @@
+@import '../../variables.scss';
+
+.container {
+  position: absolute;
+  z-index: 1001;
+  background: $red;
+  color: $white;
+  width: 100%;
+  text-align: center;
+  padding: 20px;
+  // height: 0;
+  transition: all 0.25s ease;
+
+  &.active {
+    height: 100%;
+    padding: 20px;
+  }
+
+  h2 {
+    font-size: 20px;
+    letter-spacing: 1.5px;
+    font-weight: bold;
+  }
+}

app/lnd/methods/index.js

@@ -114,7 +114,10 @@ export default function (lnd, event, msg, data) {
     // { amount, addr } = data
       walletController.sendCoins(lnd, data)
         .then(({ txid }) => event.sender.send('transactionSuccessful', { amount: data.amount, addr: data.addr, txid }))
-        .catch(error => event.sender.send('transactionError', { error }))
+        .catch(error => {
+          console.log('error: ', error)
+          event.sender.send('transactionError', { error: error.toString() })
+        })
       break
     case 'openChannel':
     // Response is empty. Streaming updates on channel status and updates

app/reducers/error.js

@@ -0,0 +1,45 @@
+// ------------------------------------
+// Initial State
+// ------------------------------------
+const initialState = {
+  error: null
+}
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const SET_ERROR = 'SET_ERROR'
+export const CLEAR_ERROR = 'CLEAR_ERROR'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function setError(error) {
+  return {
+    type: SET_ERROR,
+    error
+  }
+}
+
+export function clearError() {
+  return {
+    type: CLEAR_ERROR
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [SET_ERROR]: (state, { error }) => ({ ...state, error }),
+  [CLEAR_ERROR]: () => (initialState)
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function errorReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/reducers/index.js

@@ -17,6 +17,7 @@ import modal from './modal'
 import address from './address'
 import transaction from './transaction'
 import activity from './activity'
+import error from './error'
 
 const rootReducer = combineReducers({
   router,
@@ -35,7 +36,8 @@ const rootReducer = combineReducers({
   modal,
   address,
   transaction,
-  activity
+  activity,
+  error
 })
 
 export default rootReducer

app/reducers/transaction.js

@@ -4,6 +4,7 @@ import { btc, usd } from '../utils'
 import { setFormType } from './form'
 import { resetPayForm } from './payform'
 import { showModal } from './modal'
+import { setError } from './error'
 
 // ------------------------------------
 // Constants
@@ -64,8 +65,9 @@ export const transactionSuccessful = (event, { amount, addr, txid }) => (dispatc
   dispatch(resetPayForm())
 }
 
-export const transactionError = () => (dispatch) => {
+export const transactionError = (event, { error }) => (dispatch) => {
   dispatch({ type: TRANSACTION_FAILED })
+  dispatch(setError(error))
 }
 
 // Listener for when a new transaction is pushed from the subscriber

app/routes/app/components/App.js

@@ -31,6 +31,8 @@ class App extends Component {
       formProps,
       closeForm,
 
+      error: { error },
+
       children
     } = this.props
 
@@ -38,7 +40,7 @@ class App extends Component {
 
     return (
       <div>
-        <GlobalError />
+        <GlobalError error={error} />
         <ModalRoot
           modalType={modalType}
           modalProps={modalProps}

app/routes/app/containers/AppContainer.js

@@ -56,6 +56,8 @@ const mapStateToProps = state => ({
   invoice: state.invoice,
   modal: state.modal,
 
+  error: state.error,
+
   currentTicker: tickerSelectors.currentTicker(state),
   isOnchain: payFormSelectors.isOnchain(state),
   isLn: payFormSelectors.isLn(state),