From a314c2faedc19b8727950f4ce7c5dfa5e1093600 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 13 Aug 2018 14:52:43 +0200
Subject: [PATCH] ErrorBoundary added

---
 .../wallet/account/receive/Receive.js         |  5 +++-
 .../wallet/account/send/SendForm.js           |  7 +++--
 src/js/index.js                               |  5 +---
 src/js/router/index.js                        | 30 +++++++++++--------
 src/js/support/ErrorBoundary.js               | 25 ++++++++++++++++
 src/js/utils/ethUtils.js                      |  1 -
 6 files changed, 52 insertions(+), 21 deletions(-)
 create mode 100644 src/js/support/ErrorBoundary.js

diff --git a/src/js/components/wallet/account/receive/Receive.js b/src/js/components/wallet/account/receive/Receive.js
index 2dc4e007..bd92bc10 100644
--- a/src/js/components/wallet/account/receive/Receive.js
+++ b/src/js/components/wallet/account/receive/Receive.js
@@ -12,6 +12,9 @@ import { Notification } from '~/js/components/common/Notification';
 import type { Props } from './index';
 
 const Wrapper = styled.div``;
+const StyledH2 = styled(H2)`
+    padding: 20px 48px;
+`;
 
 const Receive = (props: Props) => {
     const device = props.wallet.selectedDevice;
@@ -78,7 +81,7 @@ const Receive = (props: Props) => {
 
     return (
         <Wrapper>
-            <H2>Receive Ethereum or tokens</H2>
+            <StyledH2>Receive Ethereum or tokens</StyledH2>
             <div className={className}>
                 { ver }
                 <div className="value">
diff --git a/src/js/components/wallet/account/send/SendForm.js b/src/js/components/wallet/account/send/SendForm.js
index b78b49a5..7af77fa7 100644
--- a/src/js/components/wallet/account/send/SendForm.js
+++ b/src/js/components/wallet/account/send/SendForm.js
@@ -1,6 +1,7 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import styled from 'styled-components';
 import Select from 'react-select';
 import { H2 } from '~/js/components/common/Heading';
 import AdvancedForm from './AdvancedForm';
@@ -15,7 +16,6 @@ import { findToken } from '~/js/reducers/TokensReducer';
 import type { Props } from './index';
 import type { Token } from '~/flowtype';
 
-
 export default class SendContainer extends Component<Props> {
     componentWillReceiveProps(newProps: Props) {
         calculate(this.props, newProps);
@@ -33,6 +33,9 @@ export default class SendContainer extends Component<Props> {
     }
 }
 
+const StyledH2 = styled(H2)`
+    padding: 20px 48px;
+`;
 
 const Send = (props: Props) => {
     const device = props.wallet.selectedDevice;
@@ -117,7 +120,7 @@ const Send = (props: Props) => {
 
     return (
         <section className="send-form">
-            <H2>Send Ethereum or tokens</H2>
+            <StyledH2>Send Ethereum or tokens</StyledH2>
             <div className="row address-input">
                 <label>Address</label>
                 <input
diff --git a/src/js/index.js b/src/js/index.js
index 4979d9bc..3779d71a 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -10,10 +10,7 @@ import styles from '~/styles/index.less';
 const root: ?HTMLElement = document.getElementById('root');
 if (root) {
     baseStyles();
-    render(
-        <App />,
-        root,
-    );
+    render(<App />, root);
 }
 
 window.onbeforeunload = () => {
diff --git a/src/js/router/index.js b/src/js/router/index.js
index 68ad389c..3d684345 100644
--- a/src/js/router/index.js
+++ b/src/js/router/index.js
@@ -5,6 +5,8 @@ import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
 import store, { history } from '../store';
 
+import ErrorBoundary from '~/js/support/ErrorBoundary';
+
 import LandingPageContainer from '../components/landing';
 import WalletContainer from '../components/wallet';
 import BootloaderContainer from '../components/wallet/pages/Bootloader';
@@ -29,19 +31,21 @@ const App = () => (
                 <Route exact path="/import" component={LandingPageContainer} />
                 <Route>
                     <WalletContainer>
-                        <Route exact path="/settings" component={WalletSettingsContainer} />
-                        <Route exact path="/device/:device/" component={DashboardContainer} />
-                        <Route exact path="/device/:device/network/:network" component={DashboardContainer} />
-                        <Route exact path="/device/:device/acquire" component={AcquireContainer} />
-                        <Route exact path="/device/:device/unreadable" component={UnreadableDeviceContainer} />
-                        <Route exact path="/device/:device/bootloader" component={BootloaderContainer} />
-                        <Route exact path="/device/:device/initialize" component={InitializeContainer} />
-                        <Route exact path="/device/:device/settings" component={DeviceSettingsContainer} />
-                        <Route exact path="/device/:device/network/:network/account/:account" component={SummaryContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/send" component={SendFormContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/send/override" component={SendFormContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/receive" component={ReceiveContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/signverify" component={SignVerifyContainer} />
+                        <ErrorBoundary>
+                            <Route exact path="/settings" component={WalletSettingsContainer} />
+                            <Route exact path="/device/:device/" component={DashboardContainer} />
+                            <Route exact path="/device/:device/network/:network" component={DashboardContainer} />
+                            <Route exact path="/device/:device/acquire" component={AcquireContainer} />
+                            <Route exact path="/device/:device/unreadable" component={UnreadableDeviceContainer} />
+                            <Route exact path="/device/:device/bootloader" component={BootloaderContainer} />
+                            <Route exact path="/device/:device/initialize" component={InitializeContainer} />
+                            <Route exact path="/device/:device/settings" component={DeviceSettingsContainer} />
+                            <Route exact path="/device/:device/network/:network/account/:account" component={SummaryContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send" component={SendFormContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send/override" component={SendFormContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/receive" component={ReceiveContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/signverify" component={SignVerifyContainer} />
+                        </ErrorBoundary>
                     </WalletContainer>
                 </Route>
             </Switch>
diff --git a/src/js/support/ErrorBoundary.js b/src/js/support/ErrorBoundary.js
new file mode 100644
index 00000000..f47d2581
--- /dev/null
+++ b/src/js/support/ErrorBoundary.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    componentDidCatch(error, info) {
+        // Display fallback UI
+        this.setState({ hasError: true });
+        // You can also log the error to an error reporting service
+        // logErrorToMyService(error, info);
+    }
+
+    render() {
+        if (this.state.hasError) {
+        // You can render any custom fallback UI
+            return <div>Something went wrong.</div>;
+        }
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/js/utils/ethUtils.js b/src/js/utils/ethUtils.js
index 53f248e8..be1c889a 100644
--- a/src/js/utils/ethUtils.js
+++ b/src/js/utils/ethUtils.js
@@ -1,6 +1,5 @@
 /* @flow */
 
-
 import BigNumber from 'bignumber.js';
 
 export const decimalToHex = (dec: number): string => new BigNumber(dec).toString(16);