From 40d4ac9ae1ed9557d066c184abd90e51a380cf06 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Jul 2018 11:53:54 -0700 Subject: Add TransactionStatus component --- ui/app/components/transaction-status/index.js | 1 + ui/app/components/transaction-status/index.scss | 22 +++++++++++ .../transaction-status.component.js | 44 ++++++++++++++++++++++ 3 files changed, 67 insertions(+) create mode 100644 ui/app/components/transaction-status/index.js create mode 100644 ui/app/components/transaction-status/index.scss create mode 100644 ui/app/components/transaction-status/transaction-status.component.js (limited to 'ui/app/components/transaction-status') 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 ( +
+ { statusToTextHash[status] || status } +
+ ) + } +} -- cgit From 5ee40675b9f986a9ff2e5d15a271d7de2145d0e9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Jul 2018 22:03:20 -0700 Subject: Refactor transactions list views. Add redesign components --- ui/app/components/transaction-status/index.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app/components/transaction-status') diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss index dd9bf5877..03a378b4e 100644 --- a/ui/app/components/transaction-status/index.scss +++ b/ui/app/components/transaction-status/index.scss @@ -10,6 +10,12 @@ justify-content: center; align-items: center; + @media screen and (max-width: $break-small) { + height: 24px; + width: 74px; + font-size: .5rem; + } + &--confirmed { background-color: #eafad7; color: #609a1c; -- cgit From 5de48c67a080f2681a005e364eefb9ea1d6b1e12 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 31 Jul 2018 19:37:38 -0700 Subject: Use css grid for TransactionListItem for responsive layout --- ui/app/components/transaction-status/index.scss | 4 ++-- ui/app/components/transaction-status/transaction-status.component.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) (limited to 'ui/app/components/transaction-status') diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss index 03a378b4e..95d29f6d3 100644 --- a/ui/app/components/transaction-status/index.scss +++ b/ui/app/components/transaction-status/index.scss @@ -11,8 +11,8 @@ align-items: center; @media screen and (max-width: $break-small) { - height: 24px; - width: 74px; + height: 16px; + width: 70px; font-size: .5rem; } diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js index cf688558f..1b05d61b2 100644 --- a/ui/app/components/transaction-status/transaction-status.component.js +++ b/ui/app/components/transaction-status/transaction-status.component.js @@ -30,13 +30,14 @@ const statusToTextHash = { export default class TransactionStatus extends PureComponent { static propTypes = { status: PropTypes.string, + className: PropTypes.string, } render () { - const { status } = this.props + const { className, status } = this.props return ( -
+
{ statusToTextHash[status] || status }
) -- cgit From 9adf0c4b60c863a820af7b20ff66a8b29f7bdbe7 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 6 Aug 2018 22:39:54 -0700 Subject: Fix integration tests --- ui/app/components/transaction-status/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/transaction-status') diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss index 95d29f6d3..35be550f7 100644 --- a/ui/app/components/transaction-status/index.scss +++ b/ui/app/components/transaction-status/index.scss @@ -21,7 +21,7 @@ color: #609a1c; } - &--approved { + &--approved, &--submitted { background-color: #FFF2DB; color: #CA810A; } -- cgit From 342522c6cf23670f931e69ba822eedfd2d6ee252 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 23 Aug 2018 16:44:38 -0700 Subject: Fix naming, add eth.getCode check for actions, fix translations for statuses --- .../transaction-status.component.js | 32 +++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) (limited to 'ui/app/components/transaction-status') diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js index 1b05d61b2..a4c827ae8 100644 --- a/ui/app/components/transaction-status/transaction-status.component.js +++ b/ui/app/components/transaction-status/transaction-status.component.js @@ -1,15 +1,16 @@ 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' +import { + UNAPPROVED_STATUS, + REJECTED_STATUS, + APPROVED_STATUS, + SIGNED_STATUS, + SUBMITTED_STATUS, + CONFIRMED_STATUS, + FAILED_STATUS, + DROPPED_STATUS, +} from '../../constants/transactions' const statusToClassNameHash = { [UNAPPROVED_STATUS]: 'transaction-status--unapproved', @@ -28,17 +29,22 @@ const statusToTextHash = { } export default class TransactionStatus extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { - status: PropTypes.string, + statusKey: PropTypes.string, className: PropTypes.string, } render () { - const { className, status } = this.props + const { className, statusKey } = this.props + const statusText = this.context.t(statusToTextHash[statusKey] || statusKey) return ( -
- { statusToTextHash[status] || status } +
+ { statusText }
) } -- cgit