feat(ui): implement activity item error dialog

resolves LN-Zap#2580

renderer/components/Activity/Activity.js

@@ -8,6 +8,7 @@ import { Box } from 'rebass'
 import { Bar, Heading, Panel } from 'components/UI'
 import ActivityActions from 'containers/Activity/ActivityActions'
 import ActivityListItem from './ActivityListItem'
+import ErrorDetailsDialog from './ErrorDetailsDialog'
 
 const StyledList = styled(List)`
   ${space}
@@ -82,19 +83,33 @@ class Activity extends Component {
   }
 
   render() {
+    const { isErrorDialogOpen, hideErrorDetailsDialog, errorDialogDetails } = this.props
+
     return (
       <Panel>
         <Panel.Header my={3} px={4}>
           <ActivityActions />
         </Panel.Header>
-        <Panel.Body>{this.renderActivityList()}</Panel.Body>
+        <Panel.Body>
+          <>
+            {this.renderActivityList()}
+            <ErrorDetailsDialog
+              error={errorDialogDetails}
+              isOpen={isErrorDialogOpen}
+              onOk={hideErrorDetailsDialog}
+            />
+          </>
+        </Panel.Body>
       </Panel>
     )
   }
 }
 
 Activity.propTypes = {
   currentActivity: PropTypes.array.isRequired,
+  errorDialogDetails: PropTypes.object,
+  hideErrorDetailsDialog: PropTypes.func.isRequired,
+  isErrorDialogOpen: PropTypes.bool,
 }
 
 export default Activity

renderer/components/Activity/Payment/Payment.js

@@ -27,7 +27,7 @@ const getDisplayNodeName = (payment, intl) => {
   return intl.formatMessage({ ...messages.unknown })
 }
 
-const Payment = ({ payment, showActivityModal, cryptoUnitName, intl }) => {
+const Payment = ({ payment, showActivityModal, cryptoUnitName, showErrorDetailsDialog, intl }) => {
   return (
     <Flex
       alignItems="center"
@@ -54,10 +54,11 @@ const Payment = ({ payment, showActivityModal, cryptoUnitName, intl }) => {
               </Message>
             )}
             {payment.status === 'failed' && (
-              <Message variant="error">
+              <Message
+                onClick={() => showErrorDetailsDialog({ details: payment.error })}
+                variant="error"
+              >
                 <FormattedMessage {...messages.status_error} />
-                {` `}
-                {payment.error}
               </Message>
             )}
           </>
@@ -93,6 +94,7 @@ Payment.propTypes = {
   intl: intlShape.isRequired,
   payment: PropTypes.object.isRequired,
   showActivityModal: PropTypes.func.isRequired,
+  showErrorDetailsDialog: PropTypes.func.isRequired,
 }
 
 export default injectIntl(Payment)

renderer/components/Activity/Transaction/Transaction.js

@@ -52,7 +52,7 @@ const Transaction = ({ transaction, showActivityModal, cryptoUnitName, intl }) =
             )}
             {transaction.status === 'failed' && (
               <Message variant="error">
-                <FormattedMessage {...messages.status_error} /> {transaction.error}
+                <FormattedMessage {...messages.status_error} />
               </Message>
             )}
           </>

renderer/containers/Activity/Activity.js

@@ -1,9 +1,18 @@
 import { connect } from 'react-redux'
-import { activitySelectors } from 'reducers/activity'
+import { activitySelectors, hideErrorDetailsDialog } from 'reducers/activity'
 import Activity from 'components/Activity'
 
 const mapStateToProps = state => ({
   currentActivity: activitySelectors.currentActivity(state)(state),
+  isErrorDialogOpen: activitySelectors.isErrorDialogOpen(state),
+  errorDialogDetails: activitySelectors.errorDialogDetailsSelector(state),
 })
 
-export default connect(mapStateToProps)(Activity)
+const mapDispatchToProps = {
+  hideErrorDetailsDialog,
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Activity)

renderer/containers/Activity/Invoice.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux'
 import { tickerSelectors } from 'reducers/ticker'
-import { showActivityModal } from 'reducers/activity'
+import { showErrorDetailsDialog, showActivityModal } from 'reducers/activity'
 
 import Invoice from 'components/Activity/Invoice'
 
 const mapDispatchToProps = {
   showActivityModal,
+  showErrorDetailsDialog,
 }
 
 const mapStateToProps = state => ({

renderer/containers/Activity/Payment.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux'
 import { tickerSelectors } from 'reducers/ticker'
-import { showActivityModal } from 'reducers/activity'
+import { showActivityModal, showErrorDetailsDialog } from 'reducers/activity'
 
 import Payment from 'components/Activity/Payment'
 
 const mapDispatchToProps = {
   showActivityModal,
+  showErrorDetailsDialog,
 }
 
 const mapStateToProps = state => ({

renderer/containers/Activity/Transaction.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux'
 import { tickerSelectors } from 'reducers/ticker'
-import { showActivityModal } from 'reducers/activity'
+import { showActivityModal, showErrorDetailsDialog } from 'reducers/activity'
 
 import Transaction from 'components/Activity/Transaction'
 
 const mapDispatchToProps = {
   showActivityModal,
+  showErrorDetailsDialog,
 }
 
 const mapStateToProps = state => ({

renderer/reducers/activity.js

@@ -26,6 +26,7 @@ const initialState = {
     itemType: null,
     itemId: null,
   },
+  errorDialogDetails: null,
   searchText: null,
   isActivityLoading: false,
   activityLoadingError: null,
@@ -42,6 +43,8 @@ export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
 export const FETCH_ACTIVITY_HISTORY = 'FETCH_ACTIVITY_HISTORY'
 export const FETCH_ACTIVITY_HISTORY_SUCCESS = 'FETCH_ACTIVITY_HISTORY_SUCCESS'
 export const FETCH_ACTIVITY_HISTORY_FAILURE = 'FETCH_ACTIVITY_HISTORY_FAILURE'
+export const OPEN_ERROR_DETAILS_DIALOG = 'OPEN_ERROR_DETAILS_DIALOG'
+export const CLOSE_ERROR_DETAILS_DIALOG = 'CLOSE_ERROR_DETAILS_DIALOG'
 
 // ------------------------------------
 // Helpers
@@ -162,6 +165,30 @@ const prepareData = (data, searchText) => {
 // Actions
 // ------------------------------------
 
+/**
+ * showErrorDetailsDialog - Show the activity error detail dialog.
+ *
+ * @param {object} error Error description
+ * @returns {object} Action
+ */
+export function showErrorDetailsDialog(error) {
+  return {
+    type: OPEN_ERROR_DETAILS_DIALOG,
+    error,
+  }
+}
+
+/**
+ * hideErrorDetailsDialog - Hide the activity error detail dialog.
+ *
+ * @returns {object} Action
+ */
+export function hideErrorDetailsDialog() {
+  return {
+    type: CLOSE_ERROR_DETAILS_DIALOG,
+  }
+}
+
 /**
  * showActivityModal - Show the activity modal with a given activity item.
  *
@@ -257,6 +284,12 @@ const ACTION_HANDLERS = {
     state.isActivityLoading = false
     state.activityLoadingError = error
   },
+  [OPEN_ERROR_DETAILS_DIALOG]: (state, { error }) => {
+    state.errorDialogDetails = error
+  },
+  [CLOSE_ERROR_DETAILS_DIALOG]: state => {
+    state.errorDialogDetails = null
+  },
 }
 
 // ------------------------------------
@@ -265,6 +298,7 @@ const ACTION_HANDLERS = {
 
 const activitySelectors = {}
 const filterSelector = state => state.activity.filter
+const errorDialogDetailsSelector = state => state.activity.errorDialogDetails
 const filtersSelector = state => state.activity.filters
 const searchTextSelector = state => state.activity.searchText
 const modalItemTypeSelector = state => state.activity.modal.itemType
@@ -474,6 +508,13 @@ const FILTERS = {
   INTERNAL_ACTIVITY: internalActivity,
 }
 
+activitySelectors.isErrorDialogOpen = createSelector(
+  errorDialogDetailsSelector,
+  error => Boolean(error)
+)
+
+activitySelectors.errorDialogDetailsSelector = errorDialogDetailsSelector
+
 activitySelectors.currentActivity = createSelector(
   filterSelector,
   filter => FILTERS[filter]