From ed4ffd92a98445598eec3ec3bd232c63d5380428 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 30 Jan 2019 21:15:44 -0300
Subject: [PATCH 1/7] feat(error-modal): add ErrorModalComponent

---
 app/components/error-modal.js | 94 +++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 app/components/error-modal.js

diff --git a/app/components/error-modal.js b/app/components/error-modal.js
new file mode 100644
index 0000000..94f9ae0
--- /dev/null
+++ b/app/components/error-modal.js
@@ -0,0 +1,94 @@
+// @flow
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+import { Button } from './button';
+
+import ErrorIcon from '../assets/images/error_icon.png';
+
+const ModalWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const ChildrenWrapper = styled.div`
+  width: 350px;
+  background-color: ${props => props.theme.colors.background};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  box-shadow: 0px 0px 30px 0px black;
+  position: relative;
+  z-index: 90;
+  min-height: 400px;
+`;
+
+const Message = styled(TextComponent)`
+  margin: 15px 0;
+`;
+
+const ErrorImage = styled.img`
+  width: 35px;
+  height: 35px;
+  margin-bottom: 15px;
+`;
+
+type Props = {
+  isVisible: boolean,
+  message: string,
+  onRequestClose: () => void,
+};
+
+const modalRoot = document.getElementById('modal-root');
+
+export class ErrorModalComponent extends PureComponent<Props> {
+  element = document.createElement('div');
+
+  componentDidMount() {
+    const { isVisible } = this.props;
+
+    if (isVisible) {
+      if (modalRoot) modalRoot.appendChild(this.element);
+    }
+  }
+
+  componentDidUpdate = (prevProps: Props) => {
+    const { isVisible } = this.props;
+
+    if (!prevProps.isVisible && isVisible) {
+      if (modalRoot) modalRoot.appendChild(this.element);
+    }
+
+    if (prevProps.isVisible && !isVisible) {
+      if (modalRoot) modalRoot.removeChild(this.element);
+    }
+  };
+
+  render() {
+    const { isVisible, message, onRequestClose } = this.props;
+
+    return isVisible
+      ? createPortal(
+        <ModalWrapper id='error-modal-portal-wrapper'>
+          <ChildrenWrapper>
+            <ErrorImage src={ErrorIcon} alt='Error Icon' />
+            <Message value={message} />
+            <Button label='Ok!' onClick={onRequestClose} />
+          </ChildrenWrapper>
+        </ModalWrapper>,
+        this.element,
+      )
+      : null;
+  }
+}

From 1fcb29f6d23d475e805f21297bd2211e5bd513ac Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 30 Jan 2019 21:17:47 -0300
Subject: [PATCH 2/7] feat(error-handler): add error handler middleware POC

---
 app/redux/errorHandler.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 app/redux/errorHandler.js

diff --git a/app/redux/errorHandler.js b/app/redux/errorHandler.js
new file mode 100644
index 0000000..93218f7
--- /dev/null
+++ b/app/redux/errorHandler.js
@@ -0,0 +1,22 @@
+// @flow
+import { LOAD_ADDRESSES_ERROR } from './modules/receive';
+import { VALIDATE_ADDRESS_ERROR } from './modules/send';
+import { LOAD_TRANSACTIONS_ERROR } from './modules/transactions';
+import { LOAD_WALLET_SUMMARY_ERROR } from './modules/wallet';
+import { showErrorModal } from './modules/app';
+
+import type { Middleware } from '../types/redux';
+
+const ERRORS = [
+  LOAD_ADDRESSES_ERROR,
+  VALIDATE_ADDRESS_ERROR,
+  LOAD_TRANSACTIONS_ERROR,
+  LOAD_WALLET_SUMMARY_ERROR,
+];
+
+export const errorHandler: Middleware = ({ dispatch }) => next => (action) => {
+  // eslint-disable-next-line max-len
+  if (ERRORS.includes(action.type)) return dispatch(showErrorModal({ error: action.payload.error || 'Something went wrong!' }));
+
+  return next(action);
+};

From ef1c43162c2c8a193dae3f552281720b01423577 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 30 Jan 2019 21:19:34 -0300
Subject: [PATCH 3/7] chore(status-pill): add check for error in status-pill
 rpc call

---
 app/components/status-pill.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/status-pill.js b/app/components/status-pill.js
index 7e47cca..1628b46 100644
--- a/app/components/status-pill.js
+++ b/app/components/status-pill.js
@@ -81,6 +81,8 @@ export class StatusPill extends Component<Props, State> {
   getBlockchainStatus = async () => {
     const [blockchainErr, blockchaininfo] = await eres(rpc.getblockchaininfo());
 
+    if (blockchainErr || !blockchaininfo) return;
+
     const newProgress = blockchaininfo.verificationprogress * 100;
 
     this.setState({

From eaa0ca3f6aaec545b8a904bbd101394b40f2d397 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 30 Jan 2019 21:21:22 -0300
Subject: [PATCH 4/7] feat(redux): add App redux module

---
 app/containers/app.js        | 23 +++++++++++++++++++++
 app/redux/modules/app.js     | 40 ++++++++++++++++++++++++++++++++++++
 app/redux/modules/reducer.js |  2 ++
 app/types/app-state.js       |  2 ++
 app/types/redux.js           |  7 +++++--
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 app/containers/app.js
 create mode 100644 app/redux/modules/app.js

diff --git a/app/containers/app.js b/app/containers/app.js
new file mode 100644
index 0000000..0196de7
--- /dev/null
+++ b/app/containers/app.js
@@ -0,0 +1,23 @@
+// @flow
+import { connect } from 'react-redux';
+import { closeErrorModal } from '../redux/modules/app';
+
+import { LayoutComponent } from '../components/layout';
+
+import type { Dispatch } from '../types/redux';
+import type { AppState } from '../types/app-state';
+
+const mapStateToProps = ({ app }: AppState) => ({
+  isErrorModalVisible: app.isErrorModalVisible,
+  error: app.error,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  closeErrorModal: () => dispatch(closeErrorModal()),
+});
+
+// $FlowFixMe
+export const AppContainer = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(LayoutComponent);
diff --git a/app/redux/modules/app.js b/app/redux/modules/app.js
new file mode 100644
index 0000000..83dc814
--- /dev/null
+++ b/app/redux/modules/app.js
@@ -0,0 +1,40 @@
+// @flow
+import type { Action } from '../../types/redux';
+
+// Actions
+export const SHOW_ERROR_MODAL = 'SHOW_ERROR_MODAL';
+export const HIDE_ERROR_MODAL = 'HIDE_ERROR_MODAL';
+
+export const showErrorModal = ({ error }: { error: string }) => ({
+  type: SHOW_ERROR_MODAL,
+  payload: {
+    error,
+  },
+});
+
+export const closeErrorModal = () => ({
+  type: HIDE_ERROR_MODAL,
+  payload: {},
+});
+
+export type State = {
+  isErrorModalVisible: boolean,
+  error: string | null,
+};
+
+const initialState: State = {
+  isErrorModalVisible: false,
+  error: null,
+};
+
+// eslint-disable-next-line
+export default (state: State = initialState, action: Action) => {
+  switch (action.type) {
+    case SHOW_ERROR_MODAL:
+      return { isErrorModalVisible: true, error: action.payload.error };
+    case HIDE_ERROR_MODAL:
+      return { isErrorModalVisible: false, error: null };
+    default:
+      return state;
+  }
+};
diff --git a/app/redux/modules/reducer.js b/app/redux/modules/reducer.js
index 812f5d9..1630d0d 100644
--- a/app/redux/modules/reducer.js
+++ b/app/redux/modules/reducer.js
@@ -4,6 +4,7 @@ import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
 import type { RouterHistory } from 'react-router-dom';
 
+import app from './app';
 import wallet from './wallet';
 import transactions from './transactions';
 import send from './send';
@@ -11,6 +12,7 @@ import receive from './receive';
 
 // $FlowFixMe
 export const createRootReducer = (history: RouterHistory) => combineReducers({
+  app,
   walletSummary: wallet,
   transactions,
   sendStatus: send,
diff --git a/app/types/app-state.js b/app/types/app-state.js
index b6fe8e9..5663495 100644
--- a/app/types/app-state.js
+++ b/app/types/app-state.js
@@ -4,10 +4,12 @@ import type { State as WalletSummaryState } from '../redux/modules/wallet';
 import type { State as TransactionsState } from '../redux/modules/transactions';
 import type { State as SendState } from '../redux/modules/send';
 import type { State as ReceiveState } from '../redux/modules/receive';
+import type { State as App } from '../redux/modules/app';
 
 export type AppState = {
   walletSummary: WalletSummaryState,
   transactions: TransactionsState,
   sendStatus: SendState,
   receive: ReceiveState,
+  app: App,
 };
diff --git a/app/types/redux.js b/app/types/redux.js
index 47e2357..79d2f12 100644
--- a/app/types/redux.js
+++ b/app/types/redux.js
@@ -1,7 +1,10 @@
 // @flow
 
-type State = {||};
+import type { AppState } from './app-state';
 
 export type Action = { type: $Subtype<string>, payload: Object };
-export type GetState = () => State;
+export type GetState = () => AppState;
 export type Dispatch = (action: Action) => void;
+export type Middleware = ({ dispatch: Dispatch, getState: GetState }) => (
+  (Action) => void,
+) => Action => void;

From ead5a878582c41a30a365901f1f37be0a97d1d9c Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Wed, 30 Jan 2019 21:22:24 -0300
Subject: [PATCH 5/7] feat(error-modal): hookup ErrorModal in app layout

---
 app/components/layout.js | 25 ++++++++++++++++++++-----
 app/redux/create.js      |  4 +++-
 app/router/router.js     |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/components/layout.js b/app/components/layout.js
index 8841e65..695dec7 100644
--- a/app/components/layout.js
+++ b/app/components/layout.js
@@ -1,7 +1,9 @@
 // @flow
-import React from 'react';
+import React, { type Element } from 'react';
 import styled from 'styled-components';
 
+import { ErrorModalComponent } from './error-modal';
+
 const Layout = styled.div`
   display: flex;
   flex-direction: column;
@@ -14,12 +16,25 @@ const Layout = styled.div`
 `;
 
 type Props = {
-  chidren: any, // eslint-disable-line
+  children: Element<*>,
+  closeErrorModal: () => void,
+  isErrorModalVisible: boolean,
+  error: string,
 };
 
 export const LayoutComponent = (props: Props) => {
-  // $FlowFixMe
-  const { children } = props; // eslint-disable-line
+  const {
+    children, error, isErrorModalVisible, closeErrorModal,
+  } = props;
 
-  return <Layout id='layout'>{children}</Layout>;
+  return (
+    <Layout id='layout'>
+      {children}
+      <ErrorModalComponent
+        message={error}
+        isVisible={isErrorModalVisible}
+        onRequestClose={closeErrorModal}
+      />
+    </Layout>
+  );
 };
diff --git a/app/redux/create.js b/app/redux/create.js
index 1c5749b..fe65d9e 100644
--- a/app/redux/create.js
+++ b/app/redux/create.js
@@ -7,6 +7,7 @@ import thunk from 'redux-thunk';
 import type { RouterHistory } from 'react-router-dom';
 
 import { createRootReducer } from './modules/reducer';
+import { errorHandler } from './errorHandler';
 
 export const history: RouterHistory = createHashHistory();
 
@@ -14,7 +15,8 @@ const shouldEnableDevTools = (process.env.NODE_ENV !== 'production' || process.e
   && window.devToolsExtension;
 
 export const configureStore = (initialState: Object) => {
-  const middleware = applyMiddleware(thunk, routerMiddleware(history));
+  // $FlowFixMe
+  const middleware = applyMiddleware(thunk, routerMiddleware(history), errorHandler);
 
   const enhancer = compose(
     middleware,
diff --git a/app/router/router.js b/app/router/router.js
index dfa5be6..fb801ad 100644
--- a/app/router/router.js
+++ b/app/router/router.js
@@ -15,7 +15,7 @@ import { ReceiveContainer } from '../containers/receive';
 import { SettingsContainer } from '../containers/settings';
 import { NotFoundView } from '../views/not-found';
 import { ConsoleView } from '../views/console';
-import { LayoutComponent } from '../components/layout';
+import { AppContainer as LayoutComponent } from '../containers/app';
 import { HeaderComponent } from '../components/header';
 
 import {

From cdc88abbca6d1c150e6d75abc7a50490f084b77a Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 4 Feb 2019 11:51:59 -0300
Subject: [PATCH 6/7] lint(eslint): remove useless eslint-disable

---
 app/constants/sidebar.js       | 6 ++----
 public/flow-coverage-badge.svg | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/constants/sidebar.js b/app/constants/sidebar.js
index 0684fa0..ea23fb1 100644
--- a/app/constants/sidebar.js
+++ b/app/constants/sidebar.js
@@ -25,8 +25,7 @@ export const MENU_OPTIONS = [
   {
     label: 'Dashboard',
     route: DASHBOARD_ROUTE,
-    // eslint-disable-next-line
-    icon: (isActive: boolean) => isActive ? DashboardIconActive : DashboardIcon,
+    icon: (isActive: boolean) => (isActive ? DashboardIconActive : DashboardIcon),
   },
   {
     label: 'Send',
@@ -41,8 +40,7 @@ export const MENU_OPTIONS = [
   {
     label: 'Transactions',
     route: TRANSACTIONS_ROUTE,
-    // eslint-disable-next-line
-    icon: (isActive: boolean) => isActive ? TransactionsIconActive : TransactionsIcon,
+    icon: (isActive: boolean) => (isActive ? TransactionsIconActive : TransactionsIcon),
   },
   {
     label: 'Settings',
diff --git a/public/flow-coverage-badge.svg b/public/flow-coverage-badge.svg
index d61c9ff..665ba93 100644
--- a/public/flow-coverage-badge.svg
+++ b/public/flow-coverage-badge.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">81%</text><text x="107" y="14">81%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">82%</text><text x="107" y="14">82%</text></g></svg>
\ No newline at end of file

From 61c845329f8afba643d66289d4739f623c845006 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 4 Feb 2019 11:54:02 -0300
Subject: [PATCH 7/7] chore(error-handler): remove VALIDATE_ADDRESS_ERROR from
 middleware

---
 app/redux/errorHandler.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/redux/errorHandler.js b/app/redux/errorHandler.js
index 93218f7..41cffe9 100644
--- a/app/redux/errorHandler.js
+++ b/app/redux/errorHandler.js
@@ -1,18 +1,12 @@
 // @flow
 import { LOAD_ADDRESSES_ERROR } from './modules/receive';
-import { VALIDATE_ADDRESS_ERROR } from './modules/send';
 import { LOAD_TRANSACTIONS_ERROR } from './modules/transactions';
 import { LOAD_WALLET_SUMMARY_ERROR } from './modules/wallet';
 import { showErrorModal } from './modules/app';
 
 import type { Middleware } from '../types/redux';
 
-const ERRORS = [
-  LOAD_ADDRESSES_ERROR,
-  VALIDATE_ADDRESS_ERROR,
-  LOAD_TRANSACTIONS_ERROR,
-  LOAD_WALLET_SUMMARY_ERROR,
-];
+const ERRORS = [LOAD_ADDRESSES_ERROR, LOAD_TRANSACTIONS_ERROR, LOAD_WALLET_SUMMARY_ERROR];
 
 export const errorHandler: Middleware = ({ dispatch }) => next => (action) => {
   // eslint-disable-next-line max-len