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 073ef4ab..e15ceaa4 100644 --- a/app/lnd/methods/index.js +++ b/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 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 86eda032..08da873c 100644 --- a/app/reducers/index.js +++ b/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 diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js index 949df4ca..5785aafd 100644 --- a/app/reducers/transaction.js +++ b/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 diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 5c8e5299..8162dde3 100644 --- a/app/routes/app/components/App.js +++ b/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 (
- + ({ invoice: state.invoice, modal: state.modal, + error: state.error, + currentTicker: tickerSelectors.currentTicker(state), isOnchain: payFormSelectors.isOnchain(state), isLn: payFormSelectors.isLn(state),