diff --git a/app/components/GlobalError/GlobalError.js b/app/components/GlobalError/GlobalError.js index a5cb0fec..63a4f0a7 100644 --- a/app/components/GlobalError/GlobalError.js +++ b/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 ( -
- yo global error mf +
+

{error}

) } diff --git a/app/components/GlobalError/GlobalError.scss b/app/components/GlobalError/GlobalError.scss index e69de29b..4e0dad23 100644 --- a/app/components/GlobalError/GlobalError.scss +++ b/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; + } +} \ No newline at end of file diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js index ff26b1a7..2b51fa71 100644 --- a/app/lnd/methods/index.js +++ b/app/lnd/methods/index.js @@ -119,7 +119,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 diff --git a/app/reducers/error.js b/app/reducers/error.js new file mode 100644 index 00000000..8f3404fd --- /dev/null +++ b/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 +} diff --git a/app/reducers/index.js b/app/reducers/index.js index 7761bece..20e0893b 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -18,6 +18,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, @@ -37,7 +38,8 @@ const rootReducer = combineReducers({ modal, address, transaction, - activity + activity, + error }) export default rootReducer diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js index 33821551..62b446e4 100644 --- a/app/reducers/transaction.js +++ b/app/reducers/transaction.js @@ -5,6 +5,7 @@ import { fetchBalance } from './balance' import { setFormType } from './form' import { resetPayForm } from './payform' import { showModal } from './modal' +import { setError } from './error' // ------------------------------------ // Constants @@ -67,8 +68,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 diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index e48d0736..ed38a3a6 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -41,6 +41,8 @@ class App extends Component { formProps, closeForm, + error: { error }, + children } = this.props @@ -58,7 +60,7 @@ class App extends Component { return (
- + ({ invoice: state.invoice, modal: state.modal, + error: state.error, + currentTicker: tickerSelectors.currentTicker(state), isOnchain: payFormSelectors.isOnchain(state), isLn: payFormSelectors.isLn(state),