Merge pull request #15544 from brave/fix-hide-rejected-transactions

fix: hide rejected transactions in UI
brave · Oct 21, 2022 · 1b0c595 · 1b0c595
2 parents ef7c2bf + 5e8bcff
commit 1b0c595
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 40 deletions.
diff --git a/..._ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx b/..._ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx
@@ -1,18 +1,22 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
 import * as React from 'react'
-import { useSelector } from 'react-redux'
 
 // Types
 import {
   BraveWallet,
-  WalletAccountType,
-  AddAccountNavTypes,
-  WalletState
+  AddAccountNavTypes
 } from '../../../../../../constants/types'
 
 // Utils
 import { getLocale } from '../../../../../../../common/locale'
 import Amount from '../../../../../../utils/amount'
 import { getTokensCoinType, getTokensNetwork } from '../../../../../../utils/network-utils'
+import { findAccountByAddress } from '../../../../../../utils/account-utils'
+import { WalletSelectors } from '../../../../../../common/selectors'
 
 // Components
 import {
@@ -24,6 +28,7 @@ import {
 
 // Hooks
 import { useBalance } from '../../../../../../common/hooks'
+import { useUnsafeWalletSelector } from '../../../../../../common/hooks/use-safe-selector'
 
 // Styled Components
 import {
@@ -35,7 +40,11 @@ import {
   AssetBalanceDisplay,
   DividerRow
 } from '../../style'
-import { HorizontalSpace, Row, ToggleVisibilityButton } from '../../../../../shared/style'
+import {
+  HorizontalSpace,
+  Row,
+  ToggleVisibilityButton
+} from '../../../../../shared/style'
 
 export interface Props {
   selectedAsset: BraveWallet.BlockchainToken | undefined
@@ -46,23 +55,20 @@ export interface Props {
   onClickAddAccount: (tabId: AddAccountNavTypes) => () => void
 }
 
-const AccountsAndTransactionsList = (props: Props) => {
-  const {
-    selectedAsset,
-    fullAssetFiatBalance,
-    formattedFullAssetBalance,
-    selectedAssetTransactions,
-    networkList,
-    onClickAddAccount
-  } = props
-
+export const AccountsAndTransactionsList = ({
+  selectedAsset,
+  fullAssetFiatBalance,
+  formattedFullAssetBalance,
+  selectedAssetTransactions,
+  networkList,
+  onClickAddAccount
+}: Props) => {
   // redux
-  const {
-    transactionSpotPrices,
-    accounts,
-    defaultCurrencies,
-    selectedNetwork
-  } = useSelector(({ wallet }: { wallet: WalletState }) => wallet)
+  // unsafe selectors
+  const transactionSpotPrices = useUnsafeWalletSelector(WalletSelectors.transactionSpotPrices)
+  const accounts = useUnsafeWalletSelector(WalletSelectors.accounts)
+  const defaultCurrencies = useUnsafeWalletSelector(WalletSelectors.defaultCurrencies)
+  const selectedNetwork = useUnsafeWalletSelector(WalletSelectors.selectedNetwork)
 
   // state
   const [hideBalances, setHideBalances] = React.useState<boolean>(false)
@@ -84,17 +90,18 @@ const AccountsAndTransactionsList = (props: Props) => {
 
   const getBalance = useBalance(networkList)
 
-  const findAccount = React.useCallback((address: string): WalletAccountType | undefined => {
-    return filteredAccountsByCoinType.find((account) => address === account.address)
-  }, [filteredAccountsByCoinType])
-
   const accountsList = React.useMemo(() => {
     if (selectedAsset?.isErc721) {
       return filteredAccountsByCoinType.filter((account) => Number(account.nativeBalanceRegistry[selectedAssetsNetwork.chainId] ?? 0) !== 0)
     }
     return filteredAccountsByCoinType
   }, [selectedAsset, filteredAccountsByCoinType])
 
+  const nonRejectedTransactions = React.useMemo(() => {
+    return selectedAssetTransactions
+      .filter(t => t.txStatus !== BraveWallet.TransactionStatus.Rejected)
+  }, [selectedAssetTransactions])
+
   return (
     <>
       {selectedAsset &&
@@ -143,14 +150,17 @@ const AccountsAndTransactionsList = (props: Props) => {
           </ButtonRow>
           <DividerText>{getLocale('braveWalletTransactions')}</DividerText>
           <SubDivider />
-          {selectedAssetTransactions.length !== 0 ? (
+          {nonRejectedTransactions.length !== 0 ? (
             <>
-              {selectedAssetTransactions.map((transaction: BraveWallet.TransactionInfo) =>
+              {nonRejectedTransactions.map((transaction) =>
                 <PortfolioTransactionItem
                   key={transaction.id}
                   accounts={filteredAccountsByCoinType}
                   transaction={transaction}
-                  account={findAccount(transaction.fromAddress)}
+                  account={findAccountByAddress(
+                    filteredAccountsByCoinType,
+                    transaction.fromAddress
+                  )}
                   displayAccountName={true}
                 />
               )}

diff --git a/components/brave_wallet_ui/components/extension/transactions-panel/index.tsx b/components/brave_wallet_ui/components/extension/transactions-panel/index.tsx
@@ -9,6 +9,7 @@ import * as React from 'react'
 import { BraveWallet } from '../../../constants/types'
 
 // Utils
+import { getLocale } from '../../../../common/locale'
 import { sortTransactionByDate } from '../../../utils/tx-utils'
 import { WalletSelectors } from '../../../common/selectors'
 
@@ -19,10 +20,16 @@ import { useUnsafeWalletSelector } from '../../../common/hooks/use-safe-selector
 import { TransactionsListItem } from '../'
 
 // Styled Components
-import { CircleIconWrapper, Column, Row, VerticalSpace } from '../../shared/style'
-import { FillerDescriptionText, FillerTitleText, FloatAboveBottomRightCorner, InfoCircleIcon, StyledWrapper, TransactionsIcon } from './style'
 import { ScrollContainer } from '../../../stories/style'
-import { getLocale } from '../../../../common/locale'
+import { CircleIconWrapper, Column, Row, VerticalSpace } from '../../shared/style'
+import {
+  FillerDescriptionText,
+  FillerTitleText,
+  FloatAboveBottomRightCorner,
+  InfoCircleIcon,
+  StyledWrapper,
+  TransactionsIcon
+} from './style'
 
 export interface Props {
   selectedNetwork: BraveWallet.NetworkInfo
@@ -38,14 +45,15 @@ export const TransactionsPanel = ({
   // redux
   const transactions = useUnsafeWalletSelector(WalletSelectors.transactions)
 
-  // memos
-  const transactionList = React.useMemo(() => {
-    if (selectedAccountAddress && transactions[selectedAccountAddress]) {
-      return sortTransactionByDate(transactions[selectedAccountAddress], 'descending')
-    } else {
-      return []
-    }
-  }, [selectedAccountAddress, transactions])
+  // memos / computed
+  const transactionList = transactions?.[selectedAccountAddress] || []
+
+  const sortedNonRejectedTransactionList = React.useMemo(() => {
+    return sortTransactionByDate(
+      transactionList.filter(t => t.txStatus !== BraveWallet.TransactionStatus.Rejected),
+      'descending'
+    )
+  }, [transactionList])
 
   // render
   if (transactionList.length === 0) {
@@ -89,10 +97,11 @@ export const TransactionsPanel = ({
     )
   }
 
+  // render
   return (
     <ScrollContainer>
       <StyledWrapper>
-        {transactionList.map((transaction: BraveWallet.TransactionInfo) =>
+        {sortedNonRejectedTransactionList.map((transaction) =>
           <TransactionsListItem
             key={transaction.id}
             onSelectTransaction={onSelectTransaction}

diff --git a/components/brave_wallet_ui/utils/account-utils.ts b/components/brave_wallet_ui/utils/account-utils.ts
@@ -26,6 +26,10 @@ export const groupAccountsById = (accounts: WalletAccountType[], key: string) =>
   }, {})
 }
 
+export const findAccountByAddress = (accounts: WalletAccountType[], address: string): WalletAccountType | undefined => {
+  return accounts.find((account) => address === account.address)
+}
+
 export const findAccountName = (accounts: WalletAccountType[], address: string) => {
   return accounts.find((account) => account.address.toLowerCase() === address.toLowerCase())?.name
 }