diff --git a/.changelog/1998.feature.md b/.changelog/1998.feature.md new file mode 100644 index 0000000000..9a26096a2b --- /dev/null +++ b/.changelog/1998.feature.md @@ -0,0 +1,7 @@ +Pending transactions + +Introduces a section for pending transactions within the transaction history +interface. It is designed to display transactions currently in a pending +state that are made within the wallet. The section will also show up in case +there is a discrepancy between transaction history nonce and wallet nonce, +indicating that some transactions are currently in pending state. diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx index 6a33c09217..7fa21a0d12 100644 --- a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx +++ b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx @@ -6,7 +6,7 @@ import { Transaction } from 'app/components/Transaction' import { Box } from 'grommet/es6/components/Box' import { Heading } from 'grommet/es6/components/Heading' -import * as React from 'react' +import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' @@ -39,6 +39,14 @@ export function TransactionHistory() { const pendingTransactions = useSelector(selectPendingTransactionForAccount) const hasUnknownPendingTransactions = useSelector(hasAccountUnknownPendingTransactions) const network = useSelector(selectSelectedNetwork) + + const [isInitialLoading, setInitialLoading] = useState(true) + useEffect(() => { + if (!!address && !accountIsLoading) { + setInitialLoading(false) + } + }, [address, accountIsLoading]) + const backendLinks = config[network][backend()] const transactionComponents = allTransactions.map(t => ( @@ -47,8 +55,6 @@ export function TransactionHistory() { .filter(({ hash: pendingTxHash }) => !allTransactions.some(({ hash }) => hash === pendingTxHash)) .map(t => ) - const showPendingSection = !accountIsLoading && !!address - return ( {transactionsError && ( @@ -58,7 +64,7 @@ export function TransactionHistory() {

)} {/* eslint-disable no-restricted-syntax */} - {showPendingSection && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && ( + {!isInitialLoading && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && ( <> {t('account.summary.pendingTransactions', 'Pending transactions')}