Development

src/components/BlocksTable/BlocksTable.tsx

@@ -4,7 +4,8 @@ import {
   Trim,
   BlockGasUsed,
   IdentityBlock,
-  ShardLink
+  ShardLink,
+  ShardFilter
 } from 'components';
 import { formatSize } from 'helpers';
 import { useIsSovereign } from 'hooks';
@@ -27,7 +28,9 @@ export const BlocksTable = ({
             <th>Block</th>
             <th>Age</th>
             <th>Txns</th>
-            <th>{isSovereign ? 'Chain' : 'Shard'}</th>
+            <th>
+              <ShardFilter text={isSovereign ? 'Chain' : 'Shard'} />
+            </th>
             <th className='text-end'>Size</th>
             <th className='text-end'>Gas Used</th>
             <th className={showProposerIdentity ? '' : 'text-end'}>

src/hooks/urlFilters/useGetBlockFilters.ts

@@ -8,6 +8,6 @@ export const useGetBlockFilters = () => {
   const getParam = getUrlParam(searchParams);
 
   return {
-    shard: getParam(BlockFiltersEnum.shard)
+    shard: getParam(BlockFiltersEnum.shard, true)
   };
 };

src/hooks/useGetNativeTokenDetails.ts

@@ -25,7 +25,7 @@ export interface NativeTokenType {
   marketCap?: number;
   valueUsd?: number;
   assets?: TokenAssetType;
-  transfersCount?: number;
+  transfers?: number;
 }
 
 export const useGetNativeTokenDetails = () => {

src/hooks/useIsNativeTokenSearched.ts

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 
-import { BRAND_NAME } from 'appConstants';
+import { BRAND_NAME, NATIVE_TOKEN_IDENTIFIER } from 'appConstants';
 import { useGetSearch } from 'hooks';
 import { activeNetworkSelector } from 'redux/selectors';
 
@@ -15,7 +15,8 @@ export const useIsNativeTokenSearched = () => {
         'elrond',
         'multiversx',
         BRAND_NAME.toLowerCase(),
-        (egldLabel ?? '').toLowerCase()
+        (egldLabel ?? '').toLowerCase(),
+        NATIVE_TOKEN_IDENTIFIER.toLowerCase()
       ].includes(search.toLowerCase().trim())
   );
 

src/layouts/TokenLayout/TokenDetailsCard.tsx

@@ -27,7 +27,7 @@ export const TokenDetailsCard = () => {
     circulatingSupply,
     accounts,
     transactions,
-    transfersCount,
+    transfers,
     price,
     marketCap,
     isLowLiquidity
@@ -104,7 +104,7 @@ export const TokenDetailsCard = () => {
     { title: 'Holders', value: new BigNumber(accounts).toFormat() },
     {
       title: 'Transactions',
-      value: new BigNumber(transfersCount || transactions || 0).toFormat()
+      value: new BigNumber(transfers || transactions || 0).toFormat()
     }
   ];
 

src/pages/Blocks/Blocks.tsx

@@ -26,20 +26,20 @@ interface StateType {
 export const Blocks = () => {
   const ref = useRef(null);
   const [searchParams] = useSearchParams();
+
+  const networkRoute = useNetworkRoute();
   const hasGrowthWidgets = useHasGrowthWidgets();
-  const { shard } = useGetBlockFilters();
+  const { shard: filterShard } = useGetBlockFilters();
   const { page, size, firstPageRefreshTrigger } = useGetPage();
+  const { getBlocks, getBlocksCount } = useAdapter();
+  const { id: activeNetworkId } = useSelector(activeNetworkSelector);
   const pageHeadersBlocks = useSelector(pageHeadersBlocksStatsSelector);
 
-  const networkRoute = useNetworkRoute();
-
   const [state, setState] = useState<StateType>();
   const [dataReady, setDataReady] = useState<boolean | undefined>();
   const [totalBlocks, setTotalBlocks] = useState<number | '...'>('...');
 
-  const { id: activeNetworkId } = useSelector(activeNetworkSelector);
-
-  const { getBlocks, getBlocksCount } = useAdapter();
+  const shard = filterShard !== undefined ? Number(filterShard) : undefined;
 
   useEffect(() => {
     if (shard !== undefined) {

src/pages/Tokens/Tokens.tsx

@@ -41,12 +41,14 @@ export const Tokens = () => {
   const [dataReady, setDataReady] = useState<boolean | undefined>();
   const [totalTokens, setTotalTokens] = useState<number | undefined>();
 
-  const displayTotalTokens = new BigNumber(totalTokens ?? 0).plus(1).toFormat();
+  const { totalTokens: growthTotalTokens } = pageHeadersTokens;
+  const displayTotalTokens =
+    growthTotalTokens ?? new BigNumber(totalTokens || 1).toFormat();
 
   const fetchTokens = () => {
     Promise.all([
-      getTokens({ search, page, size, sort, order }),
-      getTokensCount({ search })
+      getTokens({ search, page, size, sort, order, includeMetaESDT: false }),
+      getTokensCount({ search, includeMetaESDT: false })
     ]).then(([tokensData, count]) => {
       if (ref.current !== null) {
         if (tokensData.success) {

src/pages/Tokens/components/TokensTable/TokensTable.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import BigNumber from 'bignumber.js';
 
-import { ELLIPSIS } from 'appConstants';
+import { ELLIPSIS, NATIVE_TOKEN_IDENTIFIER } from 'appConstants';
 import {
   NetworkLink,
   FormatAmount,
@@ -74,93 +74,101 @@ export const TokensTable = ({
                     totalTokens={totalTokens}
                   />
                 )}
-              <tr>
-                <td>
-                  <div className='token-identity d-flex flex-row'>
-                    <div className='d-flex align-items-center me-3'>
-                      <NetworkLink
-                        to={urlBuilder.tokenDetails(token.identifier)}
-                        data-testid={`tokensLink${i}`}
-                        className='side-link'
-                      >
-                        {token.assets && token.assets.svgUrl ? (
-                          <img
-                            src={token.assets.svgUrl}
-                            alt={token.name}
-                            className='side-icon side-icon-md-large'
-                          />
-                        ) : (
-                          <div className='side-icon side-icon-md-large d-flex align-items-center justify-content-center'>
-                            <FontAwesomeIcon icon={faDiamond} />
-                          </div>
-                        )}
-                      </NetworkLink>
-                    </div>
-                    <div className='d-flex flex-column justify-content-center'>
-                      <span className='d-flex align-items-center gap-2'>
+              {token.identifier !== NATIVE_TOKEN_IDENTIFIER && (
+                <tr>
+                  <td>
+                    <div className='token-identity d-flex flex-row'>
+                      <div className='d-flex align-items-center me-3'>
                         <NetworkLink
                           to={urlBuilder.tokenDetails(token.identifier)}
                           data-testid={`tokensLink${i}`}
-                          className='d-block token-ticker'
+                          className='side-link'
                         >
-                          {token.ticker}
+                          {token.assets && token.assets.svgUrl ? (
+                            <img
+                              src={token.assets.svgUrl}
+                              alt={token.name}
+                              className='side-icon side-icon-md-large'
+                            />
+                          ) : (
+                            <div className='side-icon side-icon-md-large d-flex align-items-center justify-content-center'>
+                              <FontAwesomeIcon icon={faDiamond} />
+                            </div>
+                          )}
                         </NetworkLink>
-                        <LowLiquidityTooltip token={token} />
-                      </span>
-                      {token.assets && token.assets.description && (
-                        <div
-                          className='token-description text-wrap text-neutral-400 small d-none d-md-block'
-                          title={token.assets.description}
-                        >
-                          {token.assets.description}
-                        </div>
-                      )}
+                      </div>
+                      <div className='d-flex flex-column justify-content-center'>
+                        <span className='d-flex align-items-center gap-2'>
+                          <NetworkLink
+                            to={urlBuilder.tokenDetails(token.identifier)}
+                            data-testid={`tokensLink${i}`}
+                            className='d-block token-ticker'
+                          >
+                            {token.ticker}
+                          </NetworkLink>
+                          <LowLiquidityTooltip token={token} />
+                        </span>
+                        {token.assets && token.assets.description && (
+                          <div
+                            className='token-description text-wrap text-neutral-400 small d-none d-md-block'
+                            title={token.assets.description}
+                          >
+                            {token.assets.description}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td>{token.name}</td>
-                <td>
-                  {token.price && (
-                    <FormatUSD value={token.price} usd={1} showPrefix={false} />
-                  )}
-                </td>
-                <td>
-                  {token.circulatingSupply && (
-                    <FormatAmount
-                      showLabel={false}
-                      showSymbol={false}
-                      value={
-                        token.circulatingSupply
-                          ? String(token.circulatingSupply)
-                          : '0'
-                      }
-                      decimals={token.decimals}
-                      showUsdValue={false}
-                      digits={0}
-                    />
-                  )}
-                </td>
-                <td>
-                  {token.price && token.marketCap && !token.isLowLiquidity && (
-                    <FormatUSD
-                      value={token.marketCap}
-                      usd={1}
-                      digits={0}
-                      showPrefix={false}
-                    />
-                  )}
-                </td>
-                <td>
-                  {token.accounts
-                    ? new BigNumber(token.accounts).toFormat()
-                    : 0}
-                </td>
-                <td>
-                  {new BigNumber(
-                    token.transfersCount || token.transactions || 0
-                  ).toFormat()}
-                </td>
-              </tr>
+                  </td>
+                  <td>{token.name}</td>
+                  <td>
+                    {token.price && (
+                      <FormatUSD
+                        value={token.price}
+                        usd={1}
+                        showPrefix={false}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    {token.circulatingSupply && (
+                      <FormatAmount
+                        showLabel={false}
+                        showSymbol={false}
+                        value={
+                          token.circulatingSupply
+                            ? String(token.circulatingSupply)
+                            : '0'
+                        }
+                        decimals={token.decimals}
+                        showUsdValue={false}
+                        digits={0}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    {token.price &&
+                      token.marketCap &&
+                      !token.isLowLiquidity && (
+                        <FormatUSD
+                          value={token.marketCap}
+                          usd={1}
+                          digits={0}
+                          showPrefix={false}
+                        />
+                      )}
+                  </td>
+                  <td>
+                    {token.accounts
+                      ? new BigNumber(token.accounts).toFormat()
+                      : 0}
+                  </td>
+                  <td>
+                    {new BigNumber(
+                      token.transfers || token.transactions || 0
+                    ).toFormat()}
+                  </td>
+                </tr>
+              )}
               {typeof totalTokens === 'number' &&
                 order === SortOrderEnum.asc &&
                 i !== 0 && (

src/types/token.types.ts

@@ -1,7 +1,8 @@
-import { RolesType, SliceType, AccountAssetType } from 'types';
+import { RolesType, SliceType, AccountAssetType, NftSubtypeEnum } from 'types';
 
 export interface TokenType {
   type: TokenTypeEnum;
+  subType?: NftSubtypeEnum;
   identifier: string;
   ticker?: string;
   name: string;
@@ -22,14 +23,14 @@ export interface TokenType {
   isPaused?: boolean;
   transactions: number;
   accounts: number;
+  transfers?: number;
   price?: number;
   marketCap?: number;
   valueUsd?: number;
   assets?: TokenAssetType;
   totalLiquidity?: number;
   isLowLiquidity?: boolean;
   lowLiquidityThresholdPercent?: number;
-  transfersCount?: number;
   roles?: TokenRolesType[];
 }
 

src/widgets/BlockHeightStatsCard/BlockHeightStatsCard.tsx

@@ -1,12 +1,32 @@
+import BigNumber from 'bignumber.js';
 import { useSelector } from 'react-redux';
 
+import { ELLIPSIS } from 'appConstants';
 import { statsSelector } from 'redux/selectors';
+import { pageHeadersBlocksStatsSelector } from 'redux/selectors/pageHeadersBlocksStats';
 import { StatsCard } from 'widgets';
 
 export const BlockHeightStatsCard = () => {
-  const { blocks } = useSelector(statsSelector);
+  const { unprocessed } = useSelector(statsSelector);
+  const { blockHeight } = useSelector(pageHeadersBlocksStatsSelector);
+  const bNBlocks = new BigNumber(unprocessed?.blocks);
+
+  const displayStatsHeight =
+    bNBlocks.isInteger() && bNBlocks.isGreaterThan(0)
+      ? bNBlocks.toFormat(0)
+      : undefined;
+  const displayGrowthHeight =
+    blockHeight && !isNaN(Number(blockHeight)) && Number(blockHeight) > 0
+      ? blockHeight
+      : undefined;
+
+  const displayValue = displayStatsHeight || displayGrowthHeight || ELLIPSIS;
 
   return (
-    <StatsCard title='Block Height' value={blocks} className='card-solitary' />
+    <StatsCard
+      title='Block Height'
+      value={displayValue}
+      className='card-solitary'
+    />
   );
 };