aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/transaction-status/index.js1
-rw-r--r--ui/app/components/transaction-status/index.scss22
-rw-r--r--ui/app/components/transaction-status/transaction-status.component.js44
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>
+ )
+ }
+}