diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index 7d0507f3f..d12da6006 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -16,7 +16,6 @@ import Tooltip from '../../ui/tooltip'
import TransactionListItemDetails from '../transaction-list-item-details/transaction-list-item-details.component'
import { useHistory } from 'react-router-dom'
import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes'
-import Identicon from '../../ui/identicon/identicon.component'
import {
TRANSACTION_CATEGORY_APPROVAL,
TRANSACTION_CATEGORY_SIGNATURE_REQUEST,
@@ -28,6 +27,7 @@ import {
CANCELLED_STATUS,
} from '../../../helpers/constants/transactions'
import { useShouldShowSpeedUp } from '../../../hooks/useShouldShowSpeedUp'
+import Sign from '../../ui/icon/sign-icon.component'
export default function TransactionListItem ({ transactionGroup, isEarliestNonce = false }) {
@@ -75,6 +75,8 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
Icon = Receive
} else if (isInteraction) {
Icon = Interaction
+ } else if (isSignatureReq) {
+ Icon = Sign
}
let subtitleStatus = {date} ยท
@@ -159,7 +161,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
color="#D73A49"
/>
)}
- icon={isSignatureReq ? : }
+ icon={}
subtitle={subtitle}
subtitleStatus={subtitleStatus}
rightContent={!isSignatureReq && (
diff --git a/ui/app/components/ui/icon/sign-icon.component.js b/ui/app/components/ui/icon/sign-icon.component.js
new file mode 100644
index 000000000..3552fb810
--- /dev/null
+++ b/ui/app/components/ui/icon/sign-icon.component.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function Sign ({
+ className,
+ size,
+ color,
+}) {
+ return (
+
+
+ )
+}
+
+Sign.propTypes = {
+ className: PropTypes.string,
+ size: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+}
+
diff --git a/ui/app/hooks/tests/useCancelTransaction.test.js b/ui/app/hooks/tests/useCancelTransaction.test.js
index 98686eacd..7154d0023 100644
--- a/ui/app/hooks/tests/useCancelTransaction.test.js
+++ b/ui/app/hooks/tests/useCancelTransaction.test.js
@@ -37,15 +37,25 @@ describe('useCancelTransaction', function () {
transactions.forEach((transactionGroup) => {
const originalGasPrice = transactionGroup.primaryTransaction.txParams?.gasPrice
const gasPrice = originalGasPrice && increaseLastGasPrice(originalGasPrice)
+ const transactionId = transactionGroup.initialTransaction.id
it(`should indicate account has insufficient funds to cover ${gasPrice} gas price`, function () {
const { result } = renderHook(() => useCancelTransaction(transactionGroup))
assert.equal(result.current[0], false)
})
- it(`should return a function that is a noop`, function () {
+ it(`should return a function that kicks off cancellation for id ${transactionId}`, function () {
const { result } = renderHook(() => useCancelTransaction(transactionGroup))
assert.equal(typeof result.current[1], 'function')
result.current[1]({ preventDefault: () => {}, stopPropagation: () => {} })
- assert.equal(dispatch.notCalled, true)
+ assert.equal(
+ dispatch.calledWith(
+ showModal({
+ name: 'CANCEL_TRANSACTION',
+ transactionId,
+ originalGasPrice,
+ })
+ ),
+ true
+ )
})
})
after(function () {
diff --git a/ui/app/hooks/useCancelTransaction.js b/ui/app/hooks/useCancelTransaction.js
index d3104dca2..4dd0cc916 100644
--- a/ui/app/hooks/useCancelTransaction.js
+++ b/ui/app/hooks/useCancelTransaction.js
@@ -5,6 +5,7 @@ import { isBalanceSufficient } from '../pages/send/send.utils'
import { getHexGasTotal, increaseLastGasPrice } from '../helpers/utils/confirm-tx.util'
import { getConversionRate, getSelectedAccount } from '../selectors'
+
/**
* Determine whether a transaction can be cancelled and provide a method to
* kick off the process of cancellation.
@@ -22,7 +23,9 @@ export function useCancelTransaction (transactionGroup) {
const dispatch = useDispatch()
const selectedAccount = useSelector(getSelectedAccount)
const conversionRate = useSelector(getConversionRate)
- const showCancelModal = useCallback(() => {
+ const cancelTransaction = useCallback((event) => {
+ event.stopPropagation()
+
return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId: id, originalGasPrice: gasPrice }))
}, [dispatch, id, gasPrice])
@@ -37,14 +40,5 @@ export function useCancelTransaction (transactionGroup) {
conversionRate,
})
- const cancelTransaction = useCallback((event) => {
- event.stopPropagation()
- if (!hasEnoughCancelGas) {
- return
- }
-
- showCancelModal()
- }, [showCancelModal, hasEnoughCancelGas])
-
return [hasEnoughCancelGas, cancelTransaction]
}