resolve remaining issues with transaction list (#8659)

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 = <span><span className="transaction-list-item__date">{date}</span> · </span>
@@ -159,7 +161,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
             color="#D73A49"
           />
         )}
-        icon={isSignatureReq ? <Identicon diameter={25} /> : <Icon color={color} size={28} />}
+        icon={<Icon color={color} size={28} />}
         subtitle={subtitle}
         subtitleStatus={subtitleStatus}
         rightContent={!isSignatureReq && (

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 (
+    <svg className={className} width={size} height={size} viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M17 33C25.8366 33 33 25.8366 33 17C33 8.16344 25.8366 1 17 1C8.16344 1 1 8.16344 1 17C1 25.8366 8.16344 33 17 33Z" stroke={color} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M21.2073 9.65858C21.2854 9.58047 21.4121 9.58047 21.4902 9.65858L23.8722 12.0406C23.9503 12.1187 23.9503 12.2453 23.8722 12.3234L22.3941 13.8015L19.7293 11.1367L21.2073 9.65858ZM18.5979 12.268L10.7361 20.1299C10.7086 20.1573 10.6898 20.1921 10.6818 20.2301L10.0466 23.2473C10.0168 23.3886 10.1421 23.5139 10.2835 23.4842L13.3007 22.849C13.3386 22.841 13.3734 22.8221 13.4009 22.7947L21.2627 14.9328L18.5979 12.268ZM22.6215 8.52721C21.9186 7.82426 20.7789 7.82427 20.076 8.52721L9.60469 18.9985C9.35778 19.2454 9.18802 19.5588 9.11609 19.9005L8.48089 22.9176C8.21306 24.1898 9.34091 25.3177 10.6131 25.0498L13.6303 24.4146C13.972 24.3427 14.2853 24.173 14.5323 23.9261L25.0035 13.4548C25.7065 12.7518 25.7065 11.6121 25.0035 10.9092L22.6215 8.52721Z" fill={color} />
+    </svg>
+
+  )
+}
+
+Sign.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+

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 () {

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]
 }