1 files changed, 56 insertions, 10 deletions
diff --git a/ui/app/components/error_panel.js b/ui/app/components/error_panel.js
index 7b360448..f5d33e8f 100644
--- a/ui/app/components/error_panel.js
+++ b/ui/app/components/error_panel.js
@@ -1,6 +1,37 @@
 import React from 'react'
 import Center from './center'
 import Area from './area'
+import { Modal } from 'react-bootstrap'
+
+import App from 'app'
+
+class ErrorMessage extends React.Component {
+  static get defaultProps() {return{
+    message: null,
+    stack: null
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let stack = null
+    if (this.props.stack) {
+      stack = <ul>
+        {this.props.stack.split("\n").slice(0,10).map(i =>
+          <li>{i}</li>
+        )}
+      </ul>
+    }
+    return(
+      <div>
+        <p>{this.props.message}</p>
+        {stack}
+      </div>
+    )
+  }
+}
 
 export default class ErrorPanel extends React.Component {
 
@@ -8,24 +39,39 @@ export default class ErrorPanel extends React.Component {
     super(props)
   }
 
+  hide() {
+    App.hideError()
+  }
+
   render () {
     var error_msg = null
     var error = this.props.error
+
     console.log(error)
-    if (error instanceof Error && error.stack) {
-      error_msg = error.stack
-    } else if (error instanceof PromiseRejectionEvent) {
-      error_msg = "Error connecting to bitmaskd"
+
+    if (error.error) {
+      error = error
+    } else if (error.reason) {
+      error = error.reason
+    }
+
+    if (error.stack && error.message) {
+      error_msg = <ErrorMessage message={error.message} stack={error.stack} />
+    } else if (error.message) {
+      error_msg = <ErrorMessage message={error.message} />
     } else {
-      error_msg = error.toString()
+      error_msg = <ErrorMessage message={error.toString()} />
     }
+
     return (
-      <Center width="600">
-        <Area>
-          <h1>Error</h1>
+      <Modal show={true} onHide={this.hide.bind(this)}>
+        <Modal.Header closeButton>
+          <Modal.Title>Error</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           {error_msg}
-        </Area>
-      </Center>
+        </Modal.Body>
+      </Modal>
     )
   }
 }