ErrorBoundary added

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">

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

src/js/index.js

@@ -10,10 +10,7 @@ import styles from '~/styles/index.less';
 const root: ?HTMLElement = document.getElementById('root');
 if (root) {
     baseStyles();
-    render(
+    render(<App />, root);
-        <App />,
-        root,
-    );
 }
 
 window.onbeforeunload = () => {

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} />
+                        <ErrorBoundary>
-                        <Route exact path="/device/:device/" component={DashboardContainer} />
+                            <Route exact path="/settings" component={WalletSettingsContainer} />
-                        <Route exact path="/device/:device/network/:network" component={DashboardContainer} />
+                            <Route exact path="/device/:device/" component={DashboardContainer} />
-                        <Route exact path="/device/:device/acquire" component={AcquireContainer} />
+                            <Route exact path="/device/:device/network/:network" component={DashboardContainer} />
-                        <Route exact path="/device/:device/unreadable" component={UnreadableDeviceContainer} />
+                            <Route exact path="/device/:device/acquire" component={AcquireContainer} />
-                        <Route exact path="/device/:device/bootloader" component={BootloaderContainer} />
+                            <Route exact path="/device/:device/unreadable" component={UnreadableDeviceContainer} />
-                        <Route exact path="/device/:device/initialize" component={InitializeContainer} />
+                            <Route exact path="/device/:device/bootloader" component={BootloaderContainer} />
-                        <Route exact path="/device/:device/settings" component={DeviceSettingsContainer} />
+                            <Route exact path="/device/:device/initialize" component={InitializeContainer} />
-                        <Route exact path="/device/:device/network/:network/account/:account" component={SummaryContainer} />
+                            <Route exact path="/device/:device/settings" component={DeviceSettingsContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/send" component={SendFormContainer} />
+                            <Route exact path="/device/:device/network/:network/account/:account" component={SummaryContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/send/override" component={SendFormContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send" component={SendFormContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/receive" component={ReceiveContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send/override" component={SendFormContainer} />
-                        <Route path="/device/:device/network/:network/account/:account/signverify" component={SignVerifyContainer} />
+                            <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>

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;

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);