3 files changed, 67 insertions, 0 deletions
diff --git a/ui/app/components/transaction-status/index.js b/ui/app/components/transaction-status/index.js
new file mode 100644
index 000000000..dece41e9c
--- /dev/null
+++ b/ui/app/components/transaction-status/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-status.component'
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
new file mode 100644
index 000000000..dd9bf5877
--- /dev/null
+++ b/ui/app/components/transaction-status/index.scss
@@ -0,0 +1,22 @@
+.transaction-status {
+  height: 26px;
+  width: 81px;
+  border-radius: 4px;
+  background-color: #f0f0f0;
+  color: #5e6064;
+  font-size: .625rem;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &--confirmed {
+    background-color: #eafad7;
+    color: #609a1c;
+  }
+
+  &--approved {
+    background-color: #FFF2DB;
+    color: #CA810A;
+  }
+}
+\ No newline at end of file
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
new file mode 100644
index 000000000..cf688558f
--- /dev/null
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const UNAPPROVED_STATUS = 'unapproved'
+const REJECTED_STATUS = 'rejected'
+const APPROVED_STATUS = 'approved'
+const SIGNED_STATUS = 'signed'
+const SUBMITTED_STATUS = 'submitted'
+const CONFIRMED_STATUS = 'confirmed'
+const FAILED_STATUS = 'failed'
+const DROPPED_STATUS = 'dropped'
+
+const statusToClassNameHash = {
+  [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
+  [REJECTED_STATUS]: 'transaction-status--rejected',
+  [APPROVED_STATUS]: 'transaction-status--approved',
+  [SIGNED_STATUS]: 'transaction-status--signed',
+  [SUBMITTED_STATUS]: 'transaction-status--submitted',
+  [CONFIRMED_STATUS]: 'transaction-status--confirmed',
+  [FAILED_STATUS]: 'transaction-status--failed',
+  [DROPPED_STATUS]: 'transaction-status--dropped',
+}
+
+const statusToTextHash = {
+  [APPROVED_STATUS]: 'pending',
+  [SUBMITTED_STATUS]: 'pending',
+}
+
+export default class TransactionStatus extends PureComponent {
+  static propTypes = {
+    status: PropTypes.string,
+  }
+
+  render () {
+    const { status } = this.props
+
+    return (
+      <div className={classnames('transaction-status', statusToClassNameHash[status])}>
+        { statusToTextHash[status] || status }
+      </div>
+    )
+  }
+}