Skip to content

Fix initial load for pending txs on account page #1998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lubej merged 1 commit into from
Jul 10, 2024
Merged

Fix initial load for pending txs on account page #1998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changelog/1998.feature.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
14 changes: 10 additions & 4 deletions src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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 => (
<Transaction key={t.hash} transaction={t} referenceAddress={address} network={network} />
Expand All @@ -47,8 +55,6 @@ export function TransactionHistory() {
.filter(({ hash: pendingTxHash }) => !allTransactions.some(({ hash }) => hash === pendingTxHash))
.map(t => <Transaction key={t.hash} transaction={t} referenceAddress={address} network={network} />)

const showPendingSection = !accountIsLoading && !!address

return (
<Box margin="none">
{transactionsError && (
Expand All @@ -58,7 +64,7 @@ export function TransactionHistory() {
</p>
)}
{/* eslint-disable no-restricted-syntax */}
{showPendingSection && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && (
{!isInitialLoading && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && (
<>
<Heading level="3">{t('account.summary.pendingTransactions', 'Pending transactions')}</Heading>
<AlertBox
Expand Down