Merge branch 'development' of github.com:multiversx/mx-explorer-dapp …

…into next
multiversx · Nov 13, 2024 · eb58e65 · eb58e65
2 parents b85b2ad + 6cd2419
commit eb58e65
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 64 deletions.
diff --git 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
@@ -106,44 +106,42 @@ export const SearchFilter = ({
           data-testid={name}
         />
         <>
-          {inputValue && (
-            <>
-              <button
-                type='reset'
-                className='input-group-text'
-                onClick={() => {
-                  if (existingValue) {
-                    updateSearchValue('');
-                    setInputValue('');
-                  }
+          {inputValue ? (
+            <button
+              type='reset'
+              className='input-group-text search-icon'
+              onClick={() => {
+                if (existingValue) {
+                  updateSearchValue('');
                   setInputValue('');
-                  return true;
-                }}
-                data-testid='resetSearch'
+                }
+                setInputValue('');
+                return true;
+              }}
+              data-testid='resetSearch'
+            >
+              <svg
+                height='20'
+                width='20'
+                viewBox='0 0 20 20'
+                aria-hidden='true'
+                focusable='false'
+                className='clear'
               >
-                <svg
-                  height='20'
-                  width='20'
-                  viewBox='0 0 20 20'
-                  aria-hidden='true'
-                  focusable='false'
-                  className='clear'
-                >
-                  <path d='M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z'></path>
-                </svg>
-              </button>
-              <span className='group-separator'></span>
-            </>
+                <path d='M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z'></path>
+              </svg>
+            </button>
+          ) : (
+            <button
+              type='submit'
+              className='input-group-text search-icon'
+              onClick={() => {
+                updateSearchValue(inputValue);
+              }}
+            >
+              <FontAwesomeIcon icon={faSearch} />
+            </button>
           )}
-          <button
-            type='submit'
-            className='input-group-text'
-            onClick={() => {
-              updateSearchValue(inputValue);
-            }}
-          >
-            <FontAwesomeIcon icon={faSearch} />
-          </button>
         </>
         {errorText && (
           <div className='invalid-feedback d-block'>{errorText}</div>

diff --git 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
@@ -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/...ansactionDetails/components/TransactionInfo/TransactionLogsPanel/TransactionLogsPanel.tsx b/...ansactionDetails/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 && (
         <div className='row'>
-          {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 && (
                   <AddressDetailItem address={result.logs.address} />
                 )}
-                {result.logs.events && result.logs.events?.length > 0 && (
+                {result.logs.events.length > 0 && (
                   <DetailItem title={<div className='item-title'>Events</div>}>
                     <EventsList
                       events={result.logs.events}
                       txHash={transaction.txHash}
-                      id={result.logs?.id ?? 'result-events'}
+                      id={result.logs.id ?? 'result-events'}
                     />
                   </DetailItem>
                 )}

diff --git 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)}
                     </>
                   )}
-                  <PulsatingLed className='mx-2' />
-                  {isMainnet && (
-                    <div className='d-flex align-items-center flex-wrap gap-2'>
-                      <NetworkLink
-                        to={transactionsRoutes.transactionsInPool}
-                        className='btn btn-sm btn-dark-gradient'
-                      >
-                        Transaction Pool
-                      </NetworkLink>
-                      <MethodList />
-                    </div>
-                  )}
+                  <PulsatingLed className='mx-2 mt-1' />
+                  <div className='d-flex align-items-center flex-wrap gap-2'>
+                    {/* <NetworkLink
+                      to={transactionsRoutes.transactionsInPool}
+                      className='btn btn-sm btn-dark-gradient'
+                    >
+                      Transaction Pool
+                    </NetworkLink> */}
+                    <MethodList />
+                  </div>
                 </h5>
               }
             />