Refactor transaction list token filtering (#8669)

The transaction list now filters by token in the `TransactionList`
component instead of in the transaction selector. This was done in
preparation for the asset page work.

Technically this approach is slightly less efficient than before, as
we're now filtering the transactions after they've been grouped
together rather than beforehand. The difference is minimal though, and
this method is more correct.

The old filtering was broken because it inappropriately filtered out
cancel transactions. Cancel transactions always have the `to` address
set to the same as the `from` address, and the token filter only
returned transactions where the `to` address was set to the token
address.

Now that we're only filtering by the `to` address of the initial
transaction, token transaction groups will be included in their
entirety, including any cancel transactions.

ui/app/components/app/transaction-list/transaction-list.component.js

@@ -1,4 +1,5 @@
 import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   nonceSortedCompletedTransactionsSelector,
@@ -14,15 +15,38 @@ import Button from '../../ui/button'
 
 const PAGE_INCREMENT = 10
 
-export default function TransactionList () {
+const getTransactionGroupRecipientAddressFilter = (recipientAddress) => {
+  return ({ initialTransaction: { txParams } }) => txParams && txParams.to === recipientAddress
+}
+
+export default function TransactionList ({ tokenAddress }) {
   const [limit, setLimit] = useState(PAGE_INCREMENT)
   const t = useI18nContext()
 
   const dispatch = useDispatch()
-  const pendingTransactions = useSelector(nonceSortedPendingTransactionsSelector)
-  const completedTransactions = useSelector(nonceSortedCompletedTransactionsSelector)
+  const unfilteredPendingTransactions = useSelector(nonceSortedPendingTransactionsSelector)
+  const unfilteredCompletedTransactions = useSelector(nonceSortedCompletedTransactionsSelector)
   const { transactionTime: transactionTimeFeatureActive } = useSelector(getFeatureFlags)
 
+  const pendingTransactions = useMemo(
+    () => (
+      tokenAddress && tokenAddress.startsWith('0x')
+        ? unfilteredPendingTransactions
+          .filter(getTransactionGroupRecipientAddressFilter(tokenAddress))
+        : unfilteredPendingTransactions
+    ),
+    [unfilteredPendingTransactions, tokenAddress]
+  )
+  const completedTransactions = useMemo(
+    () => (
+      tokenAddress && tokenAddress.startsWith('0x')
+        ? unfilteredCompletedTransactions
+          .filter(getTransactionGroupRecipientAddressFilter(tokenAddress))
+        : unfilteredCompletedTransactions
+    ),
+    [unfilteredCompletedTransactions, tokenAddress]
+  )
+
   const { fetchGasEstimates, fetchBasicGasAndTimeEstimates } = useMemo(() => ({
     fetchGasEstimates: (blockTime) => dispatch(actions.fetchGasEstimates(blockTime)),
     fetchBasicGasAndTimeEstimates: () => dispatch(actions.fetchBasicGasAndTimeEstimates()),
@@ -96,3 +120,11 @@ export default function TransactionList () {
     </div>
   )
 }
+
+TransactionList.propTypes = {
+  tokenAddress: PropTypes.string,
+}
+
+TransactionList.defaultProps = {
+  tokenAddress: undefined,
+}

ui/app/pages/home/home.component.js

@@ -256,7 +256,7 @@ export default class Home extends PureComponent {
                 data-testid="home__history-tab"
                 name="History"
               >
-                <TransactionList />
+                <TransactionList tokenAddress={selectedToken?.address} />
               </Tab>
             </Tabs>
           </div>

ui/app/selectors/tests/transactions.test.js

@@ -139,57 +139,6 @@ describe('Transaction Selectors', function () {
       assert(Array.isArray(selectedTx))
       assert.deepEqual(selectedTx, orderedTxList)
     })
-
-    it('returns token transactions from currentNetworkTxList when selectedTokenAddress is valid', function () {
-
-      const state = {
-        metamask: {
-          provider: {
-            nickname: 'mainnet',
-          },
-          featureFlags: {
-            showIncomingTransactions: false,
-          },
-          selectedAddress: '0xAddress',
-          selectedTokenAddress: '0xToken',
-          currentNetworkTxList: [
-            {
-              id: 0,
-              time: 0,
-              txParams: {
-                from: '0xAddress',
-                to: '0xToken',
-              },
-            },
-            {
-              id: 1,
-              time: 1,
-              txParams: {
-                from: '0xAddress',
-                to: '0xRecipient',
-              },
-            },
-            {
-              id: 2,
-              time: 2,
-              txParams: {
-                from: '0xAddress',
-                to: '0xToken',
-              },
-            },
-          ],
-        },
-      }
-
-      const orderedTxList = state.metamask.currentNetworkTxList
-        .filter((tx) => tx.txParams.to === '0xToken')
-        .sort((a, b) => b.time - a.time)
-
-      const selectedTx = transactionsSelector(state)
-
-      assert(Array.isArray(selectedTx))
-      assert.deepEqual(selectedTx, orderedTxList)
-    })
   })
 
   describe('nonceSortedTransactionsSelector', function () {

ui/app/selectors/transactions.js

@@ -10,7 +10,6 @@ import {
   TRANSACTION_TYPE_RETRY,
 } from '../../../app/scripts/controllers/transactions/enums'
 import { hexToDecimal } from '../helpers/utils/conversions.util'
-import { selectedTokenAddressSelector } from './tokens'
 import { getFastPriceEstimateInHexWEI } from './custom-gas'
 import {
   getSelectedToken,
@@ -80,23 +79,14 @@ export const transactionSubSelector = createSelector(
   }
 )
 
-const transactionSelectorReturnHelper = (selectedTokenAddress, transactions) => {
-  return selectedTokenAddress
-    ? transactions
-      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-      .sort((a, b) => b.time - a.time)
-    : transactions
-      .sort((a, b) => b.time - a.time)
-}
-
 export const transactionsSelector = createSelector(
-  selectedTokenAddressSelector,
   transactionSubSelector,
   selectedAddressTxListSelector,
-  (selectedTokenAddress, subSelectorTxList = [], selectedAddressTxList = []) => {
+  (subSelectorTxList = [], selectedAddressTxList = []) => {
     const txsToRender = selectedAddressTxList.concat(subSelectorTxList)
 
-    return transactionSelectorReturnHelper(selectedTokenAddress, txsToRender)
+    return txsToRender
+      .sort((a, b) => b.time - a.time)
   }
 )