filter tx from metachain by searching for "metachain" instead of usin…

…g the 4294967293 id

src/components/Filters/SearchFilter.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useSearchParams } from 'react-router-dom';
 
-import { isHash, addressIsBech32 } from 'helpers';
+import { METACHAIN_SHARD_ID } from 'appConstants';
+import { isHash, addressIsBech32, isMetachain } from 'helpers';
 import { faSearch } from 'icons/regular';
 import { TransactionFiltersEnum } from 'types';
 
@@ -11,7 +12,7 @@ export interface SearchFilterType {
   filter: TransactionFiltersEnum;
   placeholder?: string;
   className?: string;
-  validation?: 'address' | 'hash';
+  validation?: 'address' | 'hash' | 'address-or-metachain';
 }
 
 export const SearchFilter = ({
@@ -61,9 +62,26 @@ export const SearchFilter = ({
           updateUrl(searchValue);
         }
       }
-    } else {
-      updateUrl(searchValue);
+      if (validation === 'address-or-metachain') {
+        const isValid =
+          isMetachain(searchValue) || addressIsBech32(searchValue);
+
+        setErrorText(isValid ? '' : 'Invalid Address');
+        if (isValid) {
+          if (isMetachain(searchValue)) {
+            updateUrl(String(METACHAIN_SHARD_ID));
+
+            return;
+          }
+
+          updateUrl(searchValue);
+        }
+      }
+
+      return;
     }
+
+    updateUrl(searchValue);
   };
 
   return (

src/components/Filters/TransactionsFilters/FromColumnFilters.tsx

@@ -38,7 +38,7 @@ export const FromColumnFilters = ({
                   name='sender-filter'
                   filter={TransactionFiltersEnum.sender}
                   placeholder='Address'
-                  validation='address'
+                  validation='address-or-metachain'
                 />
               </div>
             </div>

src/helpers/index.ts

@@ -13,6 +13,7 @@ export * from './isContract';
 export * from './isEgldToken';
 export * from './isEllipsisActive';
 export * from './isHash';
+export * from './isMetachain';
 export * from './isUtf8';
 export * from './parseAmount';
 export * from './parseJwt';

src/helpers/isMetachain.ts

@@ -0,0 +1,8 @@
+import { METACHAIN_SHARD_ID } from 'appConstants';
+
+export const isMetachain = (value?: string | number) => {
+  return (
+    METACHAIN_SHARD_ID.toString() === String(value) ||
+    String(value).toLowerCase() === 'metachain'
+  );
+};

src/hooks/useGetShardText.ts

@@ -1,10 +1,7 @@
 import { useSelector } from 'react-redux';
 
-import {
-  METACHAIN_SHARD_ID,
-  MAIN_SHARD_ID,
-  ALL_SHARDS_SHARD_ID
-} from 'appConstants';
+import { MAIN_SHARD_ID, ALL_SHARDS_SHARD_ID } from 'appConstants';
+import { isMetachain } from 'helpers';
 import { useIsSovereign } from 'hooks';
 import { activeNetworkSelector } from 'redux/selectors';
 
@@ -21,10 +18,7 @@ export const useGetShardText = () => {
       shard = shard.replace('Shard', '');
     }
 
-    const isMetachain =
-      METACHAIN_SHARD_ID.toString() === String(shard).toString() ||
-      String(shard) === 'metachain';
-
+    const isShardMetachain = isMetachain(shard);
     const isAllShards =
       ALL_SHARDS_SHARD_ID.toString() === String(shard).toString();
 
@@ -33,7 +27,7 @@ export const useGetShardText = () => {
     if (isMainShard) {
       return 'MultiversX';
     }
-    if (isMetachain) {
+    if (isShardMetachain) {
       if (isSovereign) {
         return '';
       }