diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2018-12-10 04:48:06 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-10 04:48:06 +0800 |
commit | d8ab9cc002c10757b7382a174dafff7a0247e307 (patch) | |
tree | d0a46ac3ca2334ddec2ee240214d67a8122e81b7 /ui/app/components/transaction-status | |
parent | 575fb607c3b8deea831aa28293303991b3f6be29 (diff) | |
download | tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.tar.gz tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.tar.zst tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.zip |
Group transactions by nonce (#5886)
Diffstat (limited to 'ui/app/components/transaction-status')
3 files changed, 23 insertions, 8 deletions
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss index 26a1f5d38..e7daafeef 100644 --- a/ui/app/components/transaction-status/index.scss +++ b/ui/app/components/transaction-status/index.scss @@ -1,6 +1,6 @@ .transaction-status { height: 26px; - width: 81px; + width: 84px; border-radius: 4px; background-color: #f0f0f0; color: #5e6064; @@ -12,22 +12,34 @@ @media screen and (max-width: $break-small) { height: 16px; - width: 70px; + width: 72px; font-size: .5rem; } &--confirmed { background-color: #eafad7; color: #609a1c; + + .transaction-status__transaction-count { + border: 1px solid #609a1c; + } } &--approved, &--submitted { background-color: #FFF2DB; color: #CA810A; + + .transaction-status__transaction-count { + border: 1px solid #CA810A; + } } &--failed { background: lighten($monzo, 56%); color: $monzo; + + .transaction-status__transaction-count { + border: 1px solid $monzo; + } } } diff --git a/ui/app/components/transaction-status/tests/transaction-status.component.test.js b/ui/app/components/transaction-status/tests/transaction-status.component.test.js index 9e3bffe4f..f4ddc9206 100644 --- a/ui/app/components/transaction-status/tests/transaction-status.component.test.js +++ b/ui/app/components/transaction-status/tests/transaction-status.component.test.js @@ -15,9 +15,8 @@ describe('TransactionStatus Component', () => { ) assert.ok(wrapper) - const tooltipProps = wrapper.find(Tooltip).props() - assert.equal(tooltipProps.children, 'APPROVED') - assert.equal(tooltipProps.title, 'test-title') + assert.equal(wrapper.text(), 'APPROVED') + assert.equal(wrapper.find(Tooltip).props().title, 'test-title') }) it('should render SUBMITTED properly', () => { @@ -29,7 +28,6 @@ describe('TransactionStatus Component', () => { ) assert.ok(wrapper) - const tooltipProps = wrapper.find(Tooltip).props() - assert.equal(tooltipProps.children, 'PENDING') + assert.equal(wrapper.text(), 'PENDING') }) }) diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js index 0d47d7868..28544d2cd 100644 --- a/ui/app/components/transaction-status/transaction-status.component.js +++ b/ui/app/components/transaction-status/transaction-status.component.js @@ -11,6 +11,7 @@ import { CONFIRMED_STATUS, FAILED_STATUS, DROPPED_STATUS, + CANCELLED_STATUS, } from '../../constants/transactions' const statusToClassNameHash = { @@ -22,6 +23,7 @@ const statusToClassNameHash = { [CONFIRMED_STATUS]: 'transaction-status--confirmed', [FAILED_STATUS]: 'transaction-status--failed', [DROPPED_STATUS]: 'transaction-status--dropped', + [CANCELLED_STATUS]: 'transaction-status--failed', } const statusToTextHash = { @@ -49,7 +51,10 @@ export default class TransactionStatus extends PureComponent { return ( <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}> - <Tooltip position="top" title={title}> + <Tooltip + position="top" + title={title} + > { statusText } </Tooltip> </div> |