+
diff --git a/src/layouts/Layout/components/Hero/Hero.tsx b/src/layouts/Layout/components/Hero/Hero.tsx
index c2ff64721..8c97ade8f 100644
--- a/src/layouts/Layout/components/Hero/Hero.tsx
+++ b/src/layouts/Layout/components/Hero/Hero.tsx
@@ -10,12 +10,12 @@ import {
useHasGrowthWidgets,
usePageStats
} from 'hooks';
-import { ChartContractsTransactions } from 'pages/Home/components/ChartContractsTransactions';
import { activeNetworkSelector, defaultNetworkSelector } from 'redux/selectors';
import { analyticsRoutes } from 'routes';
import {
AccountsStatsCard,
BlockHeightStatsCard,
+ ChartContractsTransactions,
TransactionsStatsCard,
ValidatorsStatusCard,
HeroPills,
diff --git a/src/layouts/NativeTokenLayout/NativeTokenDetailsCard.tsx b/src/layouts/NativeTokenLayout/NativeTokenDetailsCard.tsx
new file mode 100644
index 000000000..eddf55374
--- /dev/null
+++ b/src/layouts/NativeTokenLayout/NativeTokenDetailsCard.tsx
@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+import BigNumber from 'bignumber.js';
+import { useSelector } from 'react-redux';
+
+import {
+ SocialIcons,
+ SocialWebsite,
+ HeroDetailsCard,
+ FormatUSD,
+ NativeTokenLogo
+} from 'components';
+import { useGetNativeTokenDetails, useHasGrowthWidgets } from 'hooks';
+import { growthPriceSelector } from 'redux/selectors';
+
+export const NativeTokenDetailsCard = () => {
+ const hasGrowthWidgets = useHasGrowthWidgets();
+ const {
+ name,
+ ticker,
+ decimals,
+ assets,
+ price: economicsPrice,
+ marketCap: economicsMarketCap,
+ accounts,
+ transactions,
+ supply,
+ circulatingSupply
+ } = useGetNativeTokenDetails();
+
+ const { unprocessed: unprocessedGrowth, isFetched: isGrowthFetched } =
+ useSelector(growthPriceSelector);
+
+ const title = assets?.name ?? name;
+
+ // avoid differences between cached api calls
+ const price =
+ hasGrowthWidgets && isGrowthFetched
+ ? unprocessedGrowth.currentPrice
+ : economicsPrice;
+
+ const marketCap =
+ hasGrowthWidgets && isGrowthFetched
+ ? unprocessedGrowth.marketCap
+ : economicsMarketCap;
+
+ const detailItems = useMemo(
+ () => [
+ assets?.description
+ ? {
+ title: 'Description',
+ value: (
+
+ {assets.description}
+
+ )
+ }
+ : {},
+ assets?.website
+ ? {
+ title: 'Website',
+ value:
+ }
+ : {},
+ assets?.social && Object.keys(assets.social).length > 0
+ ? {
+ title: 'Other Links',
+ value:
+ }
+ : {},
+ !assets && ticker !== name ? { title: 'Name', value: name } : {},
+ { title: 'Decimals', value: decimals }
+ ],
+ [assets, ticker, name]
+ );
+
+ const statsCards = useMemo(
+ () => [
+ ...(price && marketCap
+ ? [
+ {
+ title: 'Price',
+ value: (
+
+ )
+ },
+ {
+ title: 'Market Cap',
+ value: (
+
+ )
+ }
+ ]
+ : []),
+ { title: 'Holders', value: new BigNumber(accounts).toFormat() },
+ {
+ title: 'Transactions',
+ value: new BigNumber(transactions || 0).toFormat()
+ }
+ ],
+ [price, marketCap, transactions, accounts]
+ );
+
+ const smallStatsCards = useMemo(
+ () => [
+ supply && new BigNumber(supply).isGreaterThanOrEqualTo(0)
+ ? {
+ title: 'Supply',
+ value: new BigNumber(supply).toFormat(0)
+ }
+ : {},
+ circulatingSupply &&
+ new BigNumber(circulatingSupply).isGreaterThanOrEqualTo(0)
+ ? {
+ title: 'Circulating',
+ value: new BigNumber(circulatingSupply).toFormat(0)
+ }
+ : {}
+ ],
+ [supply, circulatingSupply]
+ );
+
+ return (
+
+ }
+ seoDetails={{
+ title,
+ description: assets?.description,
+ completeDetails: Boolean(assets)
+ }}
+ className='native-token-details'
+ detailItems={detailItems}
+ statsCards={statsCards}
+ smallStatsCards={smallStatsCards}
+ />
+ );
+};
diff --git a/src/layouts/NativeTokenLayout/NativeTokenLayout.tsx b/src/layouts/NativeTokenLayout/NativeTokenLayout.tsx
new file mode 100644
index 000000000..273a5e684
--- /dev/null
+++ b/src/layouts/NativeTokenLayout/NativeTokenLayout.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { Outlet } from 'react-router-dom';
+
+import { Loader, PageState } from 'components';
+import { useHasGrowthWidgets } from 'hooks';
+import { faCoins } from 'icons/regular';
+import { activeNetworkSelector, economicsSelector } from 'redux/selectors';
+import { ChartPrice, ChartStake } from 'widgets';
+
+import { NativeTokenDetailsCard } from './NativeTokenDetailsCard';
+
+export const NativeTokenLayout = () => {
+ const hasGrowthWidgets = useHasGrowthWidgets();
+ const { egldLabel } = useSelector(activeNetworkSelector);
+ const { isFetched } = useSelector(economicsSelector);
+
+ const loading = isFetched === undefined;
+ const failed = isFetched === false;
+
+ useEffect(() => {
+ setTimeout(() => {
+ window.scrollTo(0, 0);
+ });
+ }, []);
+
+ if (loading) {
+ return
;
+ }
+
+ if (failed) {
+ return (
+
+ {egldLabel}
+