m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Refactor transaction list token filtering (#8669)

Browse Source 
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.
This commit is contained in:
Mark Stacey 2020-05-28 00:11:15 -03:00 committed by GitHub
parent e89540fd94
commit 95a95ee4bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ui/app/components/app/transaction-list/transaction-list.component.js
View File

@ -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,
}

2
ui/app/pages/home/home.component.js
View File

@ -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>

51
ui/app/selectors/tests/transactions.test.js
View File

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

16
ui/app/selectors/transactions.js
View File

@ -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)
}
)