mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
a4e5fc934d
initially set out to add the failed tooltip back to the transaction list, but in the process rediscovered the transaction-status component which illuminated a fair number of statuses that were not properly handled by the refactor of the list. These statuses were discussed with UX and engineering team members to come up with a definitive list of statuses that should be reflected in the UI Changes: 1. normalized the color of status labels to use Red-500 and Orange-500 where applicable 2. added a new color of icon for pending transactions -- grey 3. added support for dropped and rejected labels 4. failed, dropped, rejected and cancelled all have red icons now. 5. cancelled transactions will reflect a change in the user's balance 6. tooltip displayed for failed transactions 7. Icon logic isolated to a new component.
59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Approve from '../../ui/icon/approve-icon.component'
|
|
import Interaction from '../../ui/icon/interaction-icon.component'
|
|
import Receive from '../../ui/icon/receive-icon.component'
|
|
import Send from '../../ui/icon/send-icon.component'
|
|
import Sign from '../../ui/icon/sign-icon.component'
|
|
import {
|
|
TRANSACTION_CATEGORY_APPROVAL,
|
|
TRANSACTION_CATEGORY_SIGNATURE_REQUEST,
|
|
TRANSACTION_CATEGORY_INTERACTION,
|
|
TRANSACTION_CATEGORY_SEND,
|
|
TRANSACTION_CATEGORY_RECEIVE,
|
|
UNAPPROVED_STATUS,
|
|
FAILED_STATUS,
|
|
REJECTED_STATUS,
|
|
CANCELLED_STATUS,
|
|
DROPPED_STATUS,
|
|
SUBMITTED_STATUS,
|
|
APPROVED_STATUS,
|
|
} from '../../../helpers/constants/transactions'
|
|
|
|
|
|
const ICON_MAP = {
|
|
[TRANSACTION_CATEGORY_APPROVAL]: Approve,
|
|
[TRANSACTION_CATEGORY_INTERACTION]: Interaction,
|
|
[TRANSACTION_CATEGORY_SEND]: Send,
|
|
[TRANSACTION_CATEGORY_SIGNATURE_REQUEST]: Sign,
|
|
[TRANSACTION_CATEGORY_RECEIVE]: Receive,
|
|
}
|
|
|
|
const FAIL_COLOR = '#D73A49'
|
|
const PENDING_COLOR = '#6A737D'
|
|
const OK_COLOR = '#2F80ED'
|
|
|
|
const COLOR_MAP = {
|
|
[SUBMITTED_STATUS]: PENDING_COLOR,
|
|
[UNAPPROVED_STATUS]: PENDING_COLOR,
|
|
[APPROVED_STATUS]: PENDING_COLOR,
|
|
[FAILED_STATUS]: FAIL_COLOR,
|
|
[REJECTED_STATUS]: FAIL_COLOR,
|
|
[CANCELLED_STATUS]: FAIL_COLOR,
|
|
[DROPPED_STATUS]: FAIL_COLOR,
|
|
}
|
|
|
|
export default function TransactionIcon ({ status, category }) {
|
|
|
|
const color = COLOR_MAP[status] || OK_COLOR
|
|
|
|
const Icon = ICON_MAP[category]
|
|
|
|
return <Icon color={color} size={28} />
|
|
}
|
|
|
|
TransactionIcon.propTypes = {
|
|
status: PropTypes.string.isRequired,
|
|
category: PropTypes.string.isRequired,
|
|
}
|