diff --git a/src/components/Filters/SearchFilter.tsx b/src/components/Filters/SearchFilter.tsx index d30c1774..ee4242a2 100644 --- a/src/components/Filters/SearchFilter.tsx +++ b/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 ( diff --git a/src/components/Filters/TransactionsFilters/FromColumnFilters.tsx b/src/components/Filters/TransactionsFilters/FromColumnFilters.tsx index 33dc6d67..3c1a1976 100644 --- a/src/components/Filters/TransactionsFilters/FromColumnFilters.tsx +++ b/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' /> diff --git a/src/helpers/index.ts b/src/helpers/index.ts index 975d9554..0a8f12dc 100644 --- a/src/helpers/index.ts +++ b/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'; diff --git a/src/helpers/isMetachain.ts b/src/helpers/isMetachain.ts new file mode 100644 index 00000000..70b007ee --- /dev/null +++ b/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' + ); +}; diff --git a/src/hooks/useGetShardText.ts b/src/hooks/useGetShardText.ts index 63cd35db..ec49337f 100644 --- a/src/hooks/useGetShardText.ts +++ b/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 ''; }