diff --git a/src/assets/scss/plugins/_react-select.scss b/src/assets/scss/plugins/_react-select.scss index 1169e34a3..e6ed39c11 100644 --- a/src/assets/scss/plugins/_react-select.scss +++ b/src/assets/scss/plugins/_react-select.scss @@ -48,6 +48,7 @@ &__clear-indicator, &__dropdown-indicator { padding: 0.125rem 0.65rem; + width: 2.375rem; svg { fill: var(--neutral-500); width: 1rem; diff --git a/src/components/Filters/SearchFilter.tsx b/src/components/Filters/SearchFilter.tsx index ee4242a2b..bda35d503 100644 --- a/src/components/Filters/SearchFilter.tsx +++ b/src/components/Filters/SearchFilter.tsx @@ -106,44 +106,42 @@ export const SearchFilter = ({ data-testid={name} /> <> - {inputValue && ( - <> - - - + + + + ) : ( + )} - {errorText && (
{errorText}
diff --git a/src/components/Filters/TransactionsFilters/StatusColumnFilters.tsx b/src/components/Filters/TransactionsFilters/StatusColumnFilters.tsx index b70b64467..e6d64d1df 100644 --- a/src/components/Filters/TransactionsFilters/StatusColumnFilters.tsx +++ b/src/components/Filters/TransactionsFilters/StatusColumnFilters.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { OverlayTrigger, Popover } from 'react-bootstrap'; import { useSearchParams } from 'react-router-dom'; @@ -17,10 +18,14 @@ export const StatusColumnFilters = ({ const { status, hashes, miniBlockHash, relayer, isRelayed } = Object.fromEntries(searchParams); - const existingHashesValues: SelectFilterType['options'] = - hashes?.split(',').map((hash) => { + const existingHashesValues: SelectFilterType['options'] = useMemo(() => { + if (!hashes) { + return []; + } + return hashes.split(',').map((hash) => { return { value: hash, label: truncateMiddle(hash, 9) }; - }) ?? []; + }); + }, [hashes]); const searchStatuses = ( Object.keys( diff --git a/src/components/TransactionsTable/transactionsTable.styles.scss b/src/components/TransactionsTable/transactionsTable.styles.scss index eb16d10a3..9f51289b3 100644 --- a/src/components/TransactionsTable/transactionsTable.styles.scss +++ b/src/components/TransactionsTable/transactionsTable.styles.scss @@ -63,13 +63,15 @@ margin-bottom: 1rem; .search-filter-block { max-width: auto !important; - .clear { - fill: var(--neutral-500); - width: 1rem; - height: 1rem; - margin-right: -3px; - &:hover { - fill: var(--primary); + .search-icon { + width: 2.375rem; + .clear { + fill: var(--neutral-500); + width: 1rem; + height: 1rem; + &:hover { + fill: var(--primary); + } } } } diff --git a/src/pages/TransactionDetails/components/TransactionInfo/TransactionLogsPanel/TransactionLogsPanel.tsx b/src/pages/TransactionDetails/components/TransactionInfo/TransactionLogsPanel/TransactionLogsPanel.tsx index bc2e315cb..7dff5c18f 100644 --- a/src/pages/TransactionDetails/components/TransactionInfo/TransactionLogsPanel/TransactionLogsPanel.tsx +++ b/src/pages/TransactionDetails/components/TransactionInfo/TransactionLogsPanel/TransactionLogsPanel.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import { DetailItem } from 'components'; import { AddressDetailItem, @@ -11,6 +12,11 @@ export const TransactionLogsPanel = ({ }: { transaction: TransactionType; }) => { + const transactionResults = useMemo( + () => (transaction.results ?? []).filter((result) => result.logs), + [transaction.results] + ); + return ( <> {transaction.logs && ( @@ -29,9 +35,9 @@ export const TransactionLogsPanel = ({ )} )} - {transaction.results && transaction.results.length > 0 && ( + {transactionResults.length > 0 && (
- {transaction.results.map((result, resultIndex) => { + {transactionResults.map((result, resultIndex) => { if (!result.logs) { return null; } @@ -45,12 +51,12 @@ export const TransactionLogsPanel = ({ {result.logs.address !== undefined && ( )} - {result.logs.events && result.logs.events?.length > 0 && ( + {result.logs.events.length > 0 && ( Events
}> )} diff --git a/src/pages/Transactions/Transactions.tsx b/src/pages/Transactions/Transactions.tsx index 9b65cff3d..e9436d155 100644 --- a/src/pages/Transactions/Transactions.tsx +++ b/src/pages/Transactions/Transactions.tsx @@ -9,8 +9,7 @@ import { useGetPage, useGetTransactionFilters, useFetchTransactions, - useGetShardText, - useIsMainnet + useGetShardText } from 'hooks'; import { activeNetworkSelector } from 'redux/selectors'; import { transactionsRoutes } from 'routes'; @@ -21,7 +20,6 @@ export const Transactions = () => { const [searchParams] = useSearchParams(); const getShardText = useGetShardText(); const urlParams = useGetTransactionFilters(); - const isMainnet = useIsMainnet(); const { senderShard, receiverShard } = urlParams; const { firstPageRefreshTrigger } = useGetPage(); @@ -83,18 +81,16 @@ export const Transactions = () => { {getShardText(receiverShard)} )} - - {isMainnet && ( -
- - Transaction Pool - - -
- )} + +
+ {/* + Transaction Pool + */} + +
} />