4 files changed, 88 insertions, 0 deletions
diff --git a/ui/app/components/error-message/error-message.component.js b/ui/app/components/error-message/error-message.component.js
new file mode 100644
index 000000000..b4464c33b
--- /dev/null
+++ b/ui/app/components/error-message/error-message.component.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ErrorMessage = (props, context) => {
+  const { errorMessage, errorKey } = props
+  const error = errorKey ? context.t(errorKey) : errorMessage
+
+  return (
+    <div className="error-message">
+      <img
+        src="/images/alert-red.svg"
+        className="error-message__icon"
+      />
+      <div className="error-message__text">
+        { `ALERT: ${error}` }
+      </div>
+    </div>
+  )
+}
+
+ErrorMessage.propTypes = {
+  errorMessage: PropTypes.string,
+  errorKey: PropTypes.string,
+}
+
+ErrorMessage.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default ErrorMessage
diff --git a/ui/app/components/error-message/index.js b/ui/app/components/error-message/index.js
new file mode 100644
index 000000000..1c97a9955
--- /dev/null
+++ b/ui/app/components/error-message/index.js
@@ -0,0 +1 @@
+export { default } from './error-message.component'
diff --git a/ui/app/components/error-message/index.scss b/ui/app/components/error-message/index.scss
new file mode 100644
index 000000000..5915e21cf
--- /dev/null
+++ b/ui/app/components/error-message/index.scss
@@ -0,0 +1,21 @@
+.error-message {
+  min-height: 32px;
+  border: 1px solid $monzo;
+  color: $monzo;
+  background: lighten($monzo, 56%);
+  border-radius: 4px;
+  font-size: .75rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8px 16px;
+
+  &__icon {
+    margin-right: 8px;
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    overflow: auto;
+  }
+}
diff --git a/ui/app/components/error-message/tests/error-message.component.test.js b/ui/app/components/error-message/tests/error-message.component.test.js
new file mode 100644
index 000000000..8c5347173
--- /dev/null
+++ b/ui/app/components/error-message/tests/error-message.component.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ErrorMessage from '../error-message.component'
+
+describe('ErrorMessage Component', () => {
+  const t = key => `translate ${key}`
+
+  it('should render a message from props.errorMessage', () => {
+    const wrapper = shallow(
+      <ErrorMessage
+        errorMessage="This is an error."
+      />,
+      { context: { t }}
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find('.error-message').length, 1)
+    assert.equal(wrapper.find('.error-message__icon').length, 1)
+    assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: This is an error.')
+  })
+
+  it('should render a message translated from props.errorKey', () => {
+    const wrapper = shallow(
+      <ErrorMessage
+        errorKey="testKey"
+      />,
+      { context: { t }}
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find('.error-message').length, 1)
+    assert.equal(wrapper.find('.error-message__icon').length, 1)
+    assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: translate testKey')
+  })
+})