Celo: support L2 epochs (#2784)

* epochs page

* epoch rewards distribution

* epoch election rewards

* address epoch rewards

* block epoch tag

* add some  tests

* adjust epoch details for L1 epochs

* support non-finalized epochs

* fixes after design review

* add truncation to block numbers on mobile

* update epochs table layout

* update timestamp hint

* fix bug with subheading of first epoch

* fixes of mobile view

* update screenshots

configs/app/features/celo.ts

@@ -4,14 +4,12 @@ import { getEnvValue } from '../utils';
 
 const title = 'Celo chain';
 
-const config: Feature<{ L2UpgradeBlock: number | undefined; BLOCKS_PER_EPOCH: number }> = (() => {
+const config: Feature<{ }> = (() => {
 
   if (getEnvValue('NEXT_PUBLIC_CELO_ENABLED') === 'true') {
     return Object.freeze({
       title,
       isEnabled: true,
-      L2UpgradeBlock: getEnvValue('NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK') ? Number(getEnvValue('NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK')) : undefined,
-      BLOCKS_PER_EPOCH: 17_280,
     });
   }
 

configs/envs/.env.celo_alfajores

@@ -15,7 +15,6 @@ NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_API_HOST=celo-alfajores.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CELO_ENABLED=true
-NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK=26369280
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/celo.json
@@ -24,6 +23,7 @@ NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x9767ce30754afad2a3279b9df2d13257f467c3dad4e0e601271e66d16dfd1641
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','current_epoch']
 NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(252, 255, 82, 1)'],'text_color':['rgba(0, 0, 0, 1)']}
 NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_MARKETPLACE_ENABLED=false

deploy/tools/envs-validator/schema.ts

@@ -448,16 +448,6 @@ const celoSchema = yup
   .object()
   .shape({
     NEXT_PUBLIC_CELO_ENABLED: yup.boolean(),
-    NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK: yup
-      .string()
-      .when('NEXT_PUBLIC_CELO_ENABLED', {
-        is: (value: boolean) => value,
-        then: (schema) => schema.min(0).optional(),
-        otherwise: (schema) => schema.max(
-          -1,
-          'NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK cannot not be used if NEXT_PUBLIC_CELO_ENABLED is not set to "true"',
-        ),
-      }),
   });
 
 const adButlerConfigSchema = yup

deploy/tools/envs-validator/test/.env.celo

-NEXT_PUBLIC_CELO_ENABLED=true
-NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK=420
+NEXT_PUBLIC_CELO_ENABLED=true
\ No newline at end of file
\ No newline at end of file

docs/DEPRECATED_ENVS.md

@@ -12,3 +12,4 @@
 | NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` | v1.12.0 | v1.29.0 | Replaced by NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL |
 | NEXT_PUBLIC_SWAP_BUTTON_URL | `string` | Application ID in the marketplace or website URL | - | - | `uniswap` | v1.24.0 | v1.31.0 | Replaced by NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` | v1.0.x+ | v1.35.0 | Replaced by NEXT_PUBLIC_HOMEPAGE_STATS |
+| NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK | `number` | Indicates the block number when the Celo-type chain transitioned to L2. This is used to display links to the Epoch block page from a regular block page. | - | - | `26369280` | v1.37.0+ | v2.2.0 | Removed; configuration done on the API side |

docs/ENVS.md

@@ -771,7 +771,6 @@ For blockchains that use the Celo platform. _Note_, that once the Celo mainnet b
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_CELO_ENABLED | `boolean` | Indicates that it is a Celo-based chain. | - | - | `true` | v1.37.0+ |
-| NEXT_PUBLIC_CELO_L2_UPGRADE_BLOCK | `number` | Indicates the block number when the Celo-type chain transitioned to L2. This is used to display links to the Epoch block page from a regular block page. | - | - | `26369280` | v1.37.0+ |
 
  
 

icons/clock-light.svg

 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.164.859a9.3 9.3 0 0 1 8.3 2.457l.047.046c.136.134.268.272.395.415l.03.033c.207.234.403.478.587.733l.039.055.15.214c.087.131.17.266.25.401.15.252.29.51.415.773.012.024.022.049.033.073.084.18.161.362.233.546l.03.08a9.3 9.3 0 0 1 .607 3.297l-.012.46a9.301 9.301 0 0 1-2.395 5.781l-.317.334a9.3 9.3 0 0 1-6.114 2.712l-.461.012A9.3 9.3 0 0 1 5.105 17.9l-.29-.187a9.303 9.303 0 0 1-.819-.615l-.055-.049a9.33 9.33 0 0 1-.438-.397l-.098-.098a8.814 8.814 0 0 1-.351-.371l-.078-.088a9.32 9.32 0 0 1-.16-.188l-.062-.075a9.397 9.397 0 0 1-.294-.383A9.297 9.297 0 0 1 8.164.859Zm1.817 1.509a7.617 7.617 0 0 0-3.994 1.13l-.237.153A7.616 7.616 0 0 0 3.06 6.81l-.113.259a7.615 7.615 0 0 0-.433 4.398l.06.277a7.613 7.613 0 0 0 2.024 3.622l.203.196a7.615 7.615 0 0 0 3.695 1.888l.278.05a7.614 7.614 0 0 0 4.12-.484l.26-.112a7.615 7.615 0 0 0 3.159-2.692l.152-.237a7.616 7.616 0 0 0 1.13-3.993l-.008-.378a7.614 7.614 0 0 0-1.962-4.732l-.26-.274a7.614 7.614 0 0 0-5.005-2.22l-.378-.01Zm.083 1.138c.192.02.374.104.512.242l.056.062c.123.15.191.339.191.534v5.29l3.631 3.626c.079.078.142.17.185.274l.027.078c.024.08.037.162.037.245l-.005.084a.84.84 0 0 1-.032.162l-.027.078a.852.852 0 0 1-.129.213l-.057.062a.837.837 0 0 1-.199.146l-.075.034a.841.841 0 0 1-.566.029l-.079-.029a.842.842 0 0 1-.274-.18l-3.877-3.877a.853.853 0 0 1-.146-.2l-.036-.075a.846.846 0 0 1-.063-.323V4.344c0-.223.09-.438.247-.596l.061-.055a.844.844 0 0 1 .535-.192l.083.005Z" fill="currentColor"/>
+  <path d="M8.164.859a9.3 9.3 0 0 1 8.3 2.457l.047.046c.136.134.268.272.395.415l.03.033c.207.234.403.478.587.733l.039.055.15.214c.087.131.17.266.25.401.15.252.29.51.415.773.012.024.022.049.033.073.084.18.161.362.233.546l.03.08a9.3 9.3 0 0 1 .607 3.297l-.012.46a9.301 9.301 0 0 1-2.395 5.781l-.317.334a9.3 9.3 0 0 1-6.114 2.712l-.461.012A9.3 9.3 0 0 1 5.105 17.9l-.29-.187a9.303 9.303 0 0 1-.819-.615l-.055-.049a9.33 9.33 0 0 1-.438-.397l-.098-.098a8.814 8.814 0 0 1-.351-.371l-.078-.088a9.32 9.32 0 0 1-.16-.188l-.062-.075a9.397 9.397 0 0 1-.294-.383A9.297 9.297 0 0 1 8.164.859Zm1.817 1.509a7.617 7.617 0 0 0-3.994 1.13l-.237.153A7.616 7.616 0 0 0 3.06 6.81l-.113.259a7.615 7.615 0 0 0-.433 4.398l.06.277a7.613 7.613 0 0 0 2.024 3.622l.203.196a7.615 7.615 0 0 0 3.695 1.888l.278.05a7.614 7.614 0 0 0 4.12-.484l.26-.112a7.615 7.615 0 0 0 3.159-2.692l.152-.237a7.616 7.616 0 0 0 1.13-3.993l-.008-.378a7.614 7.614 0 0 0-1.962-4.732l-.26-.274a7.614 7.614 0 0 0-5.005-2.22l-.378-.01Zm.083 1.138c.192.02.374.104.512.242l.056.062c.123.15.191.339.191.534v5.29l3.631 3.626a.83.83 0 0 1 .185.274l.027.078a.85.85 0 0 1 .037.245l-.005.084a.84.84 0 0 1-.032.162l-.027.078a.852.852 0 0 1-.129.213l-.057.062a.837.837 0 0 1-.199.146l-.075.034a.841.841 0 0 1-.566.029l-.079-.029a.842.842 0 0 1-.274-.18l-3.877-3.877a.853.853 0 0 1-.146-.2l-.036-.075a.846.846 0 0 1-.063-.323V4.344c0-.223.09-.438.247-.596l.061-.055a.844.844 0 0 1 .535-.192l.083.005Z" fill="currentColor"/>
 </svg>

icons/hourglass.svg

-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z" fill="currentColor"/>
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539c0-.526.233-1.004.604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z" fill="currentColor"/>
+  <path d="M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539c0-.526.233-1.004.604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z" fill="currentColor"/>
 </svg>

icons/hourglass_slim.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z" fill="currentColor"/>
+</svg>

lib/api/services/general/address.ts

@@ -116,7 +116,7 @@ export const GENERAL_API_ADDRESS_RESOURCES = {
     paginated: true,
   },
   address_epoch_rewards: {
-    path: '/api/v2/addresses/:hash/election-rewards',
+    path: '/api/v2/addresses/:hash/celo/election-rewards',
     pathParams: [ 'hash' as const ],
     filterFields: [],
     paginated: true,

lib/api/services/general/block.ts

@@ -6,8 +6,6 @@ import type {
   BlockFilters,
   BlockWithdrawalsResponse,
   BlockCountdownResponse,
-  BlockEpoch,
-  BlockEpochElectionRewardDetailsResponse,
   BlockInternalTransactionsResponse,
 } from 'types/api/block';
 import type { TTxsWithBlobsFilters } from 'types/api/txsFilters';
@@ -39,17 +37,6 @@ export const GENERAL_API_BLOCK_RESOURCES = {
     filterFields: [],
     paginated: true,
   },
-  block_epoch: {
-    path: '/api/v2/blocks/:height_or_hash/epoch',
-    pathParams: [ 'height_or_hash' as const ],
-    filterFields: [],
-  },
-  block_election_rewards: {
-    path: '/api/v2/blocks/:height_or_hash/election-rewards/:reward_type',
-    pathParams: [ 'height_or_hash' as const, 'reward_type' as const ],
-    filterFields: [],
-    paginated: true,
-  },
 } satisfies Record<string, ApiResource>;
 
 export type GeneralApiBlockResourceName = `general:${ keyof typeof GENERAL_API_BLOCK_RESOURCES }`;
@@ -62,8 +49,6 @@ R extends 'general:block_countdown' ? BlockCountdownResponse :
 R extends 'general:block_txs' ? BlockTransactionsResponse :
 R extends 'general:block_internal_txs' ? BlockInternalTransactionsResponse :
 R extends 'general:block_withdrawals' ? BlockWithdrawalsResponse :
-R extends 'general:block_epoch' ? BlockEpoch :
-R extends 'general:block_election_rewards' ? BlockEpochElectionRewardDetailsResponse :
 never;
 /* eslint-enable @stylistic/indent */
 

lib/api/services/general/misc.ts

@@ -7,7 +7,8 @@ import type {
 import type { Blob } from 'types/api/blobs';
 import type { Block } from 'types/api/block';
 import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
-import type { BackendVersionConfig, CsvExportConfig } from 'types/api/configs';
+import type { BackendVersionConfig, CeloConfig, CsvExportConfig } from 'types/api/configs';
+import type { CeloEpochDetails, CeloEpochElectionRewardDetailsResponse, CeloEpochListResponse } from 'types/api/epochs';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { NovesAccountHistoryResponse, NovesDescribeTxsResponse, NovesResponseData } from 'types/api/noves';
 import type {
@@ -181,6 +182,23 @@ export const GENERAL_API_MISC_RESOURCES = {
     pathParams: [ 'hash' as const ],
   },
 
+  // EPOCHS
+  epochs_celo: {
+    path: '/api/v2/celo/epochs',
+    filterFields: [],
+    paginated: true,
+  },
+  epoch_celo: {
+    path: '/api/v2/celo/epochs/:number',
+    pathParams: [ 'number' as const ],
+  },
+  epoch_celo_election_rewards: {
+    path: '/api/v2/celo/epochs/:number/election-rewards/:reward_type',
+    pathParams: [ 'number' as const, 'reward_type' as const ],
+    filterFields: [],
+    paginated: true,
+  },
+
   // ADVANCED FILTER
   advanced_filter: {
     path: '/api/v2/advanced-filters',
@@ -224,6 +242,9 @@ export const GENERAL_API_MISC_RESOURCES = {
   config_csv_export: {
     path: '/api/v2/config/csv-export',
   },
+  config_celo: {
+    path: '/api/v2/config/celo',
+  },
 
   // CSV EXPORT
   csv_export_token_holders: {
@@ -261,6 +282,7 @@ R extends 'general:search' ? SearchResult :
 R extends 'general:search_check_redirect' ? SearchRedirectResult :
 R extends 'general:config_backend_version' ? BackendVersionConfig :
 R extends 'general:config_csv_export' ? CsvExportConfig :
+R extends 'general:config_celo' ? CeloConfig :
 R extends 'general:blob' ? Blob :
 R extends 'general:validators_stability' ? ValidatorsStabilityResponse :
 R extends 'general:validators_stability_counters' ? ValidatorsStabilityCountersResponse :
@@ -268,6 +290,9 @@ R extends 'general:validators_blackfort' ? ValidatorsBlackfortResponse :
 R extends 'general:validators_blackfort_counters' ? ValidatorsBlackfortCountersResponse :
 R extends 'general:validators_zilliqa' ? ValidatorsZilliqaResponse :
 R extends 'general:validator_zilliqa' ? ValidatorZilliqa :
+R extends 'general:epochs_celo' ? CeloEpochListResponse :
+R extends 'general:epoch_celo' ? CeloEpochDetails :
+R extends 'general:epoch_celo_election_rewards' ? CeloEpochElectionRewardDetailsResponse :
 R extends 'general:user_ops' ? UserOpsResponse :
 R extends 'general:user_op' ? UserOp :
 R extends 'general:user_ops_account' ? UserOpsAccount :

lib/hooks/useNavItems.tsx

@@ -118,6 +118,12 @@ export default function useNavItems(): ReturnType {
       icon: 'MUD_menu',
       isActive: pathname === '/mud-worlds',
     } : null;
+    const epochs = config.features.celo.isEnabled ? {
+      text: 'Epochs',
+      nextRoute: { pathname: '/epochs' as const },
+      icon: 'hourglass',
+      isActive: pathname.startsWith('/epochs'),
+    } : null;
 
     const rollupFeature = config.features.rollup;
 
@@ -196,6 +202,7 @@ export default function useNavItems(): ReturnType {
         internalTxs,
         userOps,
         blocks,
+        epochs,
         topAccounts,
         validators,
         verifiedContracts,

lib/metadata/getPageOgType.ts

@@ -54,6 +54,8 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/name-domains/[name]': 'Regular page',
   '/validators': 'Root page',
   '/validators/[id]': 'Regular page',
+  '/epochs': 'Root page',
+  '/epochs/[number]': 'Regular page',
   '/gas-tracker': 'Root page',
   '/mud-worlds': 'Root page',
   '/token-transfers': 'Root page',

lib/metadata/templates/description.ts

@@ -57,6 +57,8 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains/[name]': DEFAULT_TEMPLATE,
   '/validators': DEFAULT_TEMPLATE,
   '/validators/[id]': DEFAULT_TEMPLATE,
+  '/epochs': DEFAULT_TEMPLATE,
+  '/epochs/[number]': DEFAULT_TEMPLATE,
   '/gas-tracker': 'Explore real-time %network_title% gas fees with Blockscout\'s advanced gas fee tracker. Get accurate %network_gwei% estimates and track transaction costs live.',
   '/mud-worlds': DEFAULT_TEMPLATE,
   '/token-transfers': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -54,6 +54,8 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains/[name]': '%network_name% %name% domain details',
   '/validators': '%network_name% validators list',
   '/validators/[id]': '%network_name% validator %id% details',
+  '/epochs': '%network_name% epochs',
+  '/epochs/[number]': '%network_name% epoch %number% details',
   '/gas-tracker': 'Track %network_name% gas fees in %network_gwei%',
   '/mud-worlds': '%network_name% MUD worlds list',
   '/token-transfers': '%network_name% token transfers',

lib/mixpanel/getPageType.ts

@@ -52,6 +52,8 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/name-domains/[name]': 'Domain details',
   '/validators': 'Validators list',
   '/validators/[id]': 'Validator details',
+  '/epochs': 'Epochs',
+  '/epochs/[number]': 'Epoch details',
   '/gas-tracker': 'Gas tracker',
   '/mud-worlds': 'MUD worlds',
   '/token-transfers': 'Token transfers',

lib/shortenString.ts

@@ -7,5 +7,7 @@ export default function shortenString(string: string | null, charNumber: number
     return string;
   }
 
-  return string.slice(0, charNumber - 4) + '...' + string.slice(-4);
+  const tailLength = charNumber < 8 ? 2 : 4;
+
+  return string.slice(0, charNumber - tailLength) + '...' + string.slice(-tailLength);
 }

mocks/address/epochRewards.ts

@@ -11,8 +11,6 @@ export const epochRewards: AddressEpochRewardsResponse = {
       amount: '136609473658452408568',
       account: withName,
       associated_account: withName,
-      block_hash: '0x',
-      block_number: 26369280,
       block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1526,
       token: tokenInfo,
@@ -22,8 +20,6 @@ export const epochRewards: AddressEpochRewardsResponse = {
       amount: '117205842355246195095',
       account: withoutName,
       associated_account: withoutName,
-      block_hash: '0x',
-      block_number: 26352000,
       block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1525,
       token: tokenInfo,
@@ -33,8 +29,6 @@ export const epochRewards: AddressEpochRewardsResponse = {
       amount: '125659647325556554060',
       account: withEns,
       associated_account: withEns,
-      block_hash: '0x',
-      block_number: 26300160,
       block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1524,
       token: tokenInfo,
@@ -43,7 +37,7 @@ export const epochRewards: AddressEpochRewardsResponse = {
   next_page_params: {
     amount: '71952055594478242556',
     associated_account_address_hash: '0x30d060f129817c4de5fbc1366d53e19f43c8c64f',
-    block_number: 25954560,
+    epoch_number: 25954560,
     items_count: 50,
     type: 'delegated_payment',
   },

mocks/blocks/block.ts

@@ -168,7 +168,7 @@ export const celo: Block = {
       recipient: addressMock.contract,
     },
     epoch_number: 1486,
-    is_epoch_block: true,
+    l1_era_finalized_epoch_number: 1485,
   },
 };
 

mocks/blocks/epoch.ts → mocks/epochs/celo.ts

 import { padStart } from 'es-toolkit/compat';
 
-import type { BlockEpoch, BlockEpochElectionRewardDetails, BlockEpochElectionRewardDetailsResponse } from 'types/api/block';
+import type { CeloEpochDetails, CeloEpochElectionRewardDetails, CeloEpochElectionRewardDetailsResponse, CeloEpochListResponse } from 'types/api/epochs';
 
 import * as addressMock from '../address/address';
 import * as tokenMock from '../tokens/tokenInfo';
 import * as tokenTransferMock from '../tokens/tokenTransfer';
 
-export const blockEpoch1: BlockEpoch = {
-  number: 1486,
+export const epoch1: CeloEpochDetails = {
+  number: 1739,
+  is_finalized: true,
+  type: 'L1',
+  timestamp: '2022-06-10T01:27:52.000000Z',
+  start_block_number: 48477132,
+  start_processing_block_hash: '0x9dece1eb0e26a95fdf57d2f3a65a6f2e00ca0192e8e3dd157eca0cd323670fa1',
+  start_processing_block_number: 48563546,
+  end_processing_block_hash: '0x9dece1eb0e26a95fdf57d2f3a65a6f2e00ca0192e8e3dd157eca0cd323670fa2',
+  end_processing_block_number: 48563552,
+  end_block_number: 48563551,
   distribution: {
     carbon_offsetting_transfer: tokenTransferMock.erc20,
     community_transfer: tokenTransferMock.erc20,
-    reserve_bolster_transfer: null,
+    transfers_total: {
+      token: tokenMock.tokenInfoERC20a,
+      total: {
+        value: '1000000000000000000',
+        decimals: '18',
+      },
+    },
   },
   aggregated_election_rewards: {
     delegated_payment: {
@@ -37,7 +52,59 @@ export const blockEpoch1: BlockEpoch = {
   },
 };
 
-function getRewardDetailsItem(index: number): BlockEpochElectionRewardDetails {
+export const epochUnfinalized: CeloEpochDetails = {
+  number: 1740,
+  is_finalized: false,
+  type: 'L2',
+  timestamp: null,
+  start_block_number: 48477132,
+  start_processing_block_hash: null,
+  start_processing_block_number: null,
+  end_processing_block_hash: null,
+  end_processing_block_number: null,
+  end_block_number: null,
+  distribution: null,
+  aggregated_election_rewards: null,
+};
+
+export const list: CeloEpochListResponse = {
+  items: [
+    {
+      timestamp: '2022-11-10T01:27:52.000000Z',
+      number: 1739,
+      type: 'L2',
+      is_finalized: false,
+      start_block_number: 48477132,
+      end_block_number: null,
+      distribution: null,
+    },
+    {
+      timestamp: '2022-06-09T01:27:32.000000Z',
+      number: 1738,
+      type: 'L1',
+      is_finalized: true,
+      end_block_number: 18477131,
+      start_block_number: 18390714,
+      distribution: {
+        carbon_offsetting_transfer: {
+          decimals: '18',
+          value: '1723199576750509130678',
+        },
+        community_transfer: {
+          decimals: '18',
+          value: '68927983070020365227',
+        },
+        transfers_total: {
+          decimals: '18',
+          value: '1792127559820529495905',
+        },
+      },
+    },
+  ],
+  next_page_params: null,
+};
+
+function getRewardDetailsItem(index: number): CeloEpochElectionRewardDetails {
   return {
     amount: `${ 100 - index }210001063118670575`,
     account: {
@@ -51,7 +118,7 @@ function getRewardDetailsItem(index: number): BlockEpochElectionRewardDetails {
   };
 }
 
-export const electionRewardDetails1: BlockEpochElectionRewardDetailsResponse = {
+export const electionRewardDetails1: CeloEpochElectionRewardDetailsResponse = {
   items: Array(15).fill('').map((item, index) => getRewardDetailsItem(index)),
   next_page_params: null,
 };

nextjs/getServerSideProps.ts

@@ -390,6 +390,16 @@ export const tac: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const celo: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.celo.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const interopMessages: GetServerSideProps<Props> = async(context) => {
   const rollupFeature = config.features.rollup;
   if (!rollupFeature.isEnabled || !rollupFeature.interopEnabled) {

nextjs/nextjs-routes.d.ts

@@ -43,6 +43,8 @@ declare module "nextjs-routes" {
     | StaticRoute<"/csv-export">
     | StaticRoute<"/deposits">
     | StaticRoute<"/dispute-games">
+    | DynamicRoute<"/epochs/[number]", { "number": string }>
+    | StaticRoute<"/epochs">
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">

pages/epochs/[number].tsx

+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Epoch = dynamic(() => import('ui/pages/Epoch'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/epochs/[number]" query={ props.query }>
+      <Epoch/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { celo as getServerSideProps } from 'nextjs/getServerSideProps';

pages/epochs/index.tsx

+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const Epochs = dynamic(() => import('ui/pages/Epochs'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/epochs">
+      <Epochs/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { celo as getServerSideProps } from 'nextjs/getServerSideProps';

playwright/fixtures/mockEnvs.ts

@@ -109,4 +109,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_TAC_OPERATION_LIFECYCLE_API_HOST', 'http://localhost:3100' ],
     [ 'NEXT_PUBLIC_TAC_TON_EXPLORER_URL', 'https://testnet.tonviewer.com' ],
   ],
+  celo: [
+    [ 'NEXT_PUBLIC_CELO_ENABLED', 'true' ],
+  ],
 };

public/icons/name.d.ts

@@ -83,6 +83,7 @@
 	| "graphQL"
 	| "heart_filled"
 	| "heart_outline"
+	| "hourglass_slim"
 	| "hourglass"
 	| "info_filled"
 	| "info"

stubs/address.ts

@@ -119,11 +119,9 @@ export const ADDRESS_MUD_TABLE_ITEM: AddressMudTableItem = {
 
 export const EPOCH_REWARD_ITEM: AddressEpochRewardsItem = {
   amount: '136609473658452408568',
-  block_number: 10355938,
   block_timestamp: '2022-05-15T13:16:24Z',
   type: 'voter',
   token: TOKEN_INFO_ERC_20,
-  block_hash: '0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
   account: ADDRESS_PARAMS,
   epoch_number: 1234,
   associated_account: ADDRESS_PARAMS,

stubs/block.ts

-import type { Block, BlockEpochElectionReward, BlockEpoch } from 'types/api/block';
+import type { Block } from 'types/api/block';
 
 import { ADDRESS_PARAMS } from './addressParams';
-import { TOKEN_INFO_ERC_20, TOKEN_TRANSFER_ERC_20 } from './token';
 
 export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
 
@@ -37,24 +36,3 @@ export const BLOCK: Block = {
   type: 'block',
   uncles_hashes: [],
 };
-
-const BLOCK_EPOCH_REWARD: BlockEpochElectionReward = {
-  count: 10,
-  total: '157705500305820107521',
-  token: TOKEN_INFO_ERC_20,
-};
-
-export const BLOCK_EPOCH: BlockEpoch = {
-  number: 1486,
-  aggregated_election_rewards: {
-    group: BLOCK_EPOCH_REWARD,
-    validator: BLOCK_EPOCH_REWARD,
-    voter: BLOCK_EPOCH_REWARD,
-    delegated_payment: BLOCK_EPOCH_REWARD,
-  },
-  distribution: {
-    carbon_offsetting_transfer: TOKEN_TRANSFER_ERC_20,
-    community_transfer: TOKEN_TRANSFER_ERC_20,
-    reserve_bolster_transfer: TOKEN_TRANSFER_ERC_20,
-  },
-};

stubs/epoch.ts

+import type { CeloEpochListItem, CeloEpochDetails, CeloEpochElectionReward } from 'types/api/epochs';
+
+import { BLOCK_HASH } from './block';
+import { TOKEN_INFO_ERC_20, TOKEN_TRANSFER_ERC_20, TOKEN_TRANSFER_ERC_20_TOTAL } from './token';
+
+export const CELO_EPOCH_ITEM: CeloEpochListItem = {
+  timestamp: '2025-06-10T01:27:52.000000Z',
+  number: 1739,
+  end_block_number: 48563551,
+  start_block_number: 48477132,
+  type: 'L1',
+  is_finalized: true,
+  distribution: {
+    carbon_offsetting_transfer: TOKEN_TRANSFER_ERC_20_TOTAL,
+    community_transfer: TOKEN_TRANSFER_ERC_20_TOTAL,
+    transfers_total: TOKEN_TRANSFER_ERC_20_TOTAL,
+  },
+};
+
+const CELO_EPOCH_REWARD: CeloEpochElectionReward = {
+  count: 10,
+  total: '157705500305820107521',
+  token: TOKEN_INFO_ERC_20,
+};
+
+export const CELO_EPOCH: CeloEpochDetails = {
+  timestamp: '2025-06-10T01:27:52.000000Z',
+  number: 1739,
+  start_block_number: 48477132,
+  start_processing_block_hash: BLOCK_HASH,
+  start_processing_block_number: 48563546,
+  end_processing_block_hash: BLOCK_HASH,
+  end_processing_block_number: 48563552,
+  end_block_number: 48563551,
+  type: 'L1',
+  is_finalized: true,
+  distribution: {
+    carbon_offsetting_transfer: TOKEN_TRANSFER_ERC_20,
+    community_transfer: TOKEN_TRANSFER_ERC_20,
+    transfers_total: {
+      token: TOKEN_INFO_ERC_20,
+      total: TOKEN_TRANSFER_ERC_20_TOTAL,
+    },
+  },
+  aggregated_election_rewards: {
+    group: CELO_EPOCH_REWARD,
+    validator: CELO_EPOCH_REWARD,
+    voter: CELO_EPOCH_REWARD,
+    delegated_payment: CELO_EPOCH_REWARD,
+  },
+};

stubs/token.ts

@@ -8,7 +8,7 @@ import type {
   TokenType,
 } from 'types/api/token';
 import type { TokenInstanceTransferPagination, TokenInstanceTransferResponse } from 'types/api/tokens';
-import type { TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
+import type { Erc20TotalPayload, TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
@@ -89,6 +89,11 @@ export const getTokenInstanceHoldersStub = (type?: TokenType, pagination: TokenH
   }
 };
 
+export const TOKEN_TRANSFER_ERC_20_TOTAL: Erc20TotalPayload = {
+  decimals: '18',
+  value: '9851351626684503',
+};
+
 export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
   block_hash: BLOCK_HASH,
   block_number: '123456',
@@ -98,10 +103,7 @@ export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
   timestamp: '2022-06-24T10:22:11.000000Z',
   to: ADDRESS_PARAMS,
   token: TOKEN_INFO_ERC_20,
-  total: {
-    decimals: '18',
-    value: '9851351626684503',
-  },
+  total: TOKEN_TRANSFER_ERC_20_TOTAL,
   transaction_hash: TX_HASH,
   type: 'token_minting',
 };

types/api/address.ts

 import type { Transaction } from 'types/api/transaction';
 
 import type { UserTags, AddressImplementation, AddressParam, AddressFilecoinParams } from './addressParams';
-import type { Block, EpochRewardsType } from './block';
+import type { Block } from './block';
 import type { SmartContractProxyType } from './contract';
+import type { CeloEpochRewardsType } from './epochs';
 import type { InternalTransaction } from './internalTransaction';
 import type { MudWorldSchema, MudWorldTable } from './mudWorlds';
 import type { NFTTokenType, TokenInfo, TokenInstance, TokenType } from './token';
@@ -260,18 +261,16 @@ export type AddressEpochRewardsResponse = {
   next_page_params: {
     amount: string;
     associated_account_address_hash: string;
-    block_number: number;
+    epoch_number: number;
     items_count: number;
-    type: EpochRewardsType;
+    type: CeloEpochRewardsType;
   } | null;
 };
 
 export type AddressEpochRewardsItem = {
-  type: EpochRewardsType;
+  type: CeloEpochRewardsType;
   token: TokenInfo;
   amount: string;
-  block_number: number;
-  block_hash: string;
   block_timestamp: string;
   account: AddressParam;
   epoch_number: number;

types/api/block.ts

@@ -6,7 +6,6 @@ import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
 import type { InternalTransaction } from './internalTransaction';
 import type { OptimisticL2BatchDataContainer, OptimisticL2BlobTypeEip4844, OptimisticL2BlobTypeCelestia } from './optimisticL2';
 import type { TokenInfo } from './token';
-import type { TokenTransfer } from './tokenTransfer';
 import type { ZkSyncBatchesItem } from './zkSyncL2';
 
 export type BlockType = 'block' | 'reorg' | 'uncle';
@@ -66,7 +65,7 @@ export interface Block {
   // CELO FIELDS
   celo?: {
     epoch_number: number;
-    is_epoch_block: boolean;
+    l1_era_finalized_epoch_number: number | null;
     base_fee?: BlockBaseFeeCelo;
   };
   // ZILLIQA FIELDS
@@ -167,32 +166,3 @@ export interface BlockCountdownResponse {
     RemainingBlock: string;
   } | null;
 }
-
-export interface BlockEpochElectionReward {
-  count: number;
-  token: TokenInfo<'ERC-20'>;
-  total: string;
-}
-
-export type EpochRewardsType = 'group' | 'validator' | 'delegated_payment' | 'voter';
-
-export interface BlockEpoch {
-  number: number;
-  distribution: {
-    carbon_offsetting_transfer: TokenTransfer | null;
-    community_transfer: TokenTransfer | null;
-    reserve_bolster_transfer: TokenTransfer | null;
-  } | null;
-  aggregated_election_rewards: Record<EpochRewardsType, BlockEpochElectionReward | null> | null;
-}
-
-export interface BlockEpochElectionRewardDetails {
-  account: AddressParam;
-  amount: string;
-  associated_account: AddressParam;
-}
-
-export interface BlockEpochElectionRewardDetailsResponse {
-  items: Array<BlockEpochElectionRewardDetails>;
-  next_page_params: null;
-}

types/api/configs.ts

@@ -5,3 +5,7 @@ export interface BackendVersionConfig {
 export interface CsvExportConfig {
   limit: number;
 }
+
+export interface CeloConfig {
+  l2_migration_block: number;
+}

types/api/epochs.ts

+import type { AddressParam } from './addressParams';
+import type { TokenInfo } from './token';
+import type { Erc20TotalPayload, TokenTransfer } from './tokenTransfer';
+
+export type CeloEpochType = 'L1' | 'L2';
+
+export type CeloEpochListItem = {
+  number: number;
+  type: CeloEpochType;
+  is_finalized: boolean;
+  start_block_number: number;
+  end_block_number: number | null;
+  timestamp: string | null;
+  distribution: {
+    carbon_offsetting_transfer: Erc20TotalPayload | null;
+    community_transfer: Erc20TotalPayload | null;
+    transfers_total: Erc20TotalPayload | null;
+  } | null;
+};
+
+export type CeloEpochListResponse = {
+  items: Array<CeloEpochListItem>;
+  next_page_params: {
+    items_count: number;
+    number: number;
+  } | null;
+};
+
+export type CeloEpochDetails = {
+  number: number;
+  type: CeloEpochType;
+  is_finalized: boolean;
+  timestamp: string | null;
+  start_block_number: number;
+  start_processing_block_hash: string | null;
+  start_processing_block_number: number | null;
+  end_block_number: number | null;
+  end_processing_block_hash: string | null;
+  end_processing_block_number: number | null;
+  distribution: {
+    carbon_offsetting_transfer: TokenTransfer | null;
+    community_transfer: TokenTransfer | null;
+    transfers_total: {
+      token: TokenInfo<'ERC-20'> | null;
+      total: Erc20TotalPayload | null;
+    } | null;
+  } | null;
+  aggregated_election_rewards: Record<CeloEpochRewardsType, CeloEpochElectionReward | null> | null;
+};
+
+export interface CeloEpochElectionReward {
+  count: number;
+  token: TokenInfo<'ERC-20'>;
+  total: string;
+}
+
+export type CeloEpochRewardsType = 'group' | 'validator' | 'delegated_payment' | 'voter';
+
+export interface CeloEpochElectionRewardDetails {
+  account: AddressParam;
+  amount: string;
+  associated_account: AddressParam;
+}
+
+export interface CeloEpochElectionRewardDetailsResponse {
+  items: Array<CeloEpochElectionRewardDetails>;
+  next_page_params: null;
+}

ui/address/AddressEpochRewards.tsx

@@ -12,7 +12,7 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-import AddressCsvExportLink from './AddressCsvExportLink';
+// import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressEpochRewardsListItem from './epochRewards/AddressEpochRewardsListItem';
 
 type Props = {
@@ -38,7 +38,7 @@ const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Pro
         items_count: 50,
         type: 'voter',
         associated_account_address_hash: '1',
-        block_number: 10355938,
+        epoch_number: 10355938,
       } }),
     },
   });
@@ -59,7 +59,7 @@ const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Pro
       <Box hideFrom="lg">
         { rewardsQuery.data.items.map((item, index) => (
           <AddressEpochRewardsListItem
-            key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
+            key={ item.epoch_number + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ rewardsQuery.isPlaceholderData }
           />
@@ -70,13 +70,17 @@ const AddressEpochRewards = ({ shouldRender = true, isQueryEnabled = true }: Pro
 
   const actionBar = rewardsQuery.pagination.isVisible ? (
     <ActionBar mt={ -6 }>
-      <AddressCsvExportLink
+      { /* <AddressCsvExportLink
         address={ hash }
         isLoading={ rewardsQuery.pagination.isLoading }
         params={{ type: 'epoch-rewards' }}
         ml={{ lg: 'auto' }}
+      /> */ }
+      <Pagination
+        ml="auto"
+        // ml={{ base: 0, lg: 8 }}
+        { ...rewardsQuery.pagination }
       />
-      <Pagination ml={{ base: 0, lg: 8 }} { ...rewardsQuery.pagination }/>
     </ActionBar>
   ) : null;
 

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -5,7 +5,7 @@ import type { AddressEpochRewardsItem } from 'types/api/address';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import EpochEntity from 'ui/shared/entities/epoch/EpochEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
@@ -21,20 +21,9 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <BlockEntity
-          number={ Number(item.block_number) }
-          isLoading={ isLoading }
-          noIcon
-        />
-      </ListItemMobileGrid.Value>
-
       <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton loading={ isLoading }>
-          { item.epoch_number }
-        </Skeleton>
+        <EpochEntity number={ String(item.epoch_number) } noIcon isLoading={ isLoading }/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>

ui/address/epochRewards/AddressEpochRewardsTable.tsx

@@ -19,7 +19,7 @@ const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader>
-            Block
+            Epoch
             <TimeFormatToggle/>
           </TableColumnHeader>
           <TableColumnHeader>Reward type</TableColumnHeader>
@@ -31,7 +31,7 @@ const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
         { items.map((item, index) => {
           return (
             <AddressEpochRewardsTableItem
-              key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (isLoading ? String(index) : '') }
+              key={ item.epoch_number + item.type + item.account.hash + item.associated_account.hash + (isLoading ? String(index) : '') }
               item={ item }
               isLoading={ isLoading }
             />

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

-import { Flex, Text } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
+import { route } from 'nextjs-routes';
+
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
@@ -23,10 +25,12 @@ const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
     <TableRow>
       <TableCell verticalAlign="middle">
         <Flex alignItems="center" gap={ 3 }>
-          <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon fontWeight={ 600 }/>
-          <Skeleton loading={ isLoading }>
-            <Text color="text.secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
-          </Skeleton>
+          <Link
+            href={ route({ pathname: '/epochs/[number]', query: { number: String(item.epoch_number) } }) }
+            loading={ isLoading }
+          >
+            { item.epoch_number }
+          </Link>
           <TimeWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>
         </Flex>
       </TableCell>

ui/block/BlockCeloEpochTag.tsx

+import { HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
 import { Link } from 'toolkit/chakra/link';
 import { Tag } from 'toolkit/chakra/tag';
 import { Tooltip } from 'toolkit/chakra/tooltip';
@@ -13,39 +13,44 @@ interface Props {
   blockQuery: BlockQuery;
 }
 
-const BlockCeloEpochTag = ({ blockQuery }: Props) => {
+const BlockCeloEpochTagRegular = ({ blockQuery }: Props) => {
   if (!blockQuery.data?.celo) {
     return null;
   }
 
-  if (!blockQuery.data.celo.is_epoch_block) {
-    const celoConfig = config.features.celo;
-    const epochBlockNumber = celoConfig.isEnabled && celoConfig.L2UpgradeBlock && blockQuery.data.height <= celoConfig.L2UpgradeBlock ?
-      blockQuery.data.celo.epoch_number * celoConfig.BLOCKS_PER_EPOCH :
-      undefined;
-    const content = epochBlockNumber ? (
-      <Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(epochBlockNumber) } }) }>
+  return (
+    <Tooltip
+      key="epoch-tag-before-finalized"
+      content="Displays the epoch this block belongs to before the epoch is finalized"
+    >
+      <Link href={ route({ pathname: '/epochs/[number]', query: { number: String(blockQuery.data.celo.epoch_number) } }) }>
         <Tag variant="clickable">Epoch #{ blockQuery.data.celo.epoch_number }</Tag>
       </Link>
-    ) : <Tag>Epoch #{ blockQuery.data.celo.epoch_number }</Tag>;
+    </Tooltip>
+  );
+};
 
-    return (
-      <Tooltip
-        key="epoch-tag-before-finalized"
-        content="Displays the epoch this block belongs to before the epoch is finalized"
-      >
-        { content }
-      </Tooltip>
-    );
+const BlockCeloEpochTag = ({ blockQuery }: Props) => {
+  if (!blockQuery.data?.celo) {
+    return null;
+  }
+
+  if (!blockQuery.data.celo.l1_era_finalized_epoch_number) {
+    return <BlockCeloEpochTagRegular blockQuery={ blockQuery }/>;
   }
 
   return (
-    <Tooltip
-      key="epoch-tag"
-      content="Displays the epoch finalized by this block"
-    >
-      <Tag bgColor="celo" color="blackAlpha.800" > Finalized epoch #{ blockQuery.data.celo.epoch_number } </Tag>
-    </Tooltip>
+    <HStack gap={ 2 }>
+      <Tooltip
+        key="epoch-tag"
+        content="Displays the epoch finalized by this block"
+      >
+        <Link href={ route({ pathname: '/epochs/[number]', query: { number: String(blockQuery.data.celo.l1_era_finalized_epoch_number) } }) }>
+          <Tag bgColor="celo" color="blackAlpha.800" variant="clickable"> Finalized epoch #{ blockQuery.data.celo.l1_era_finalized_epoch_number } </Tag>
+        </Link>
+      </Tooltip>
+      <BlockCeloEpochTagRegular blockQuery={ blockQuery }/>
+    </HStack>
   );
 };
 

ui/block/BlockEpochRewards.tsx

-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { BLOCK_EPOCH } from 'stubs/block';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import BlockEpochElectionRewards from './epochRewards/BlockEpochElectionRewards';
-import BlockEpochRewardsDistribution from './epochRewards/BlockEpochRewardsDistribution';
-
-interface Props {
-  heightOrHash: string;
-}
-
-const BlockEpochRewards = ({ heightOrHash }: Props) => {
-  const query = useApiQuery('general:block_epoch', {
-    pathParams: {
-      height_or_hash: heightOrHash,
-    },
-    queryOptions: {
-      placeholderData: BLOCK_EPOCH,
-    },
-  });
-
-  if (query.isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (!query.data || (!query.data.aggregated_election_rewards && !query.data.distribution)) {
-    return <span>No block epoch rewards data</span>;
-  }
-
-  return (
-    <>
-      <BlockEpochRewardsDistribution data={ query.data } isLoading={ query.isPlaceholderData }/>
-      <BlockEpochElectionRewards data={ query.data } isLoading={ query.isPlaceholderData }/>
-    </>
-  );
-};
-
-export default React.memo(BlockEpochRewards);

ui/block/epochRewards/BlockEpochRewardsDistribution.tsx

-import { Grid } from '@chakra-ui/react';
-import React from 'react';
-
-import type { BlockEpoch } from 'types/api/block';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
-import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
-
-interface Props {
-  data: BlockEpoch;
-  isLoading?: boolean;
-}
-
-const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
-  const isMobile = useIsMobile();
-
-  if (!data.distribution) {
-    return null;
-  }
-
-  if (!data.distribution.community_transfer && !data.distribution.carbon_offsetting_transfer && !data.distribution.reserve_bolster_transfer) {
-    return null;
-  }
-
-  return (
-    <Grid
-      columnGap={ 8 }
-      rowGap={{ base: 3, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
-      overflow="hidden"
-    >
-      { data.distribution.community_transfer && (
-        <>
-          <DetailedInfo.ItemLabel
-            hint="Funds allocation to support Celo projects and community initiatives"
-            isLoading={ isLoading }
-          >
-            Community fund
-          </DetailedInfo.ItemLabel>
-          <DetailedInfo.ItemValue>
-            <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
-          </DetailedInfo.ItemValue>
-        </>
-      ) }
-      { data.distribution.carbon_offsetting_transfer && (
-        <>
-          <DetailedInfo.ItemLabel
-            hint="Funds allocation to support projects that make Celo carbon-negative"
-            isLoading={ isLoading }
-          >
-            Carbon offset fund
-          </DetailedInfo.ItemLabel>
-          <DetailedInfo.ItemValue>
-            <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
-          </DetailedInfo.ItemValue>
-        </>
-      ) }
-      { data.distribution.reserve_bolster_transfer && (
-        <>
-          <DetailedInfo.ItemLabel
-            hint="Funds allocation to strengthen Celo’s reserve for network stability and security"
-            isLoading={ isLoading }
-          >
-            Reserve bolster
-          </DetailedInfo.ItemLabel>
-          <DetailedInfo.ItemValue>
-            <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
-          </DetailedInfo.ItemValue>
-        </>
-      ) }
-    </Grid>
-  );
-};
-
-export default React.memo(BlockEpochRewardsDistribution);

ui/blocks/BlocksContent.tsx

@@ -115,7 +115,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   const actionBar = isMobile ? (
     <ActionBar mt={ -6 }>
       <Link href={ route({ pathname: '/block/countdown' }) }>
-        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <IconSvg name="hourglass_slim" boxSize={ 5 } mr={ 2 }/>
         <span>Block countdown</span>
       </Link>
       <Pagination ml="auto" { ...query.pagination }/>

ui/blocks/BlocksListItem.tsx

@@ -51,8 +51,8 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
             noIcon
             fontWeight={ 600 }
           />
-          { data.celo?.is_epoch_block && (
-            <Tooltip content={ `Finalized epoch #${ data.celo.epoch_number }` } disabled={ isLoading }>
+          { data.celo?.l1_era_finalized_epoch_number && (
+            <Tooltip content={ `Finalized epoch #${ data.celo.l1_era_finalized_epoch_number }` } disabled={ isLoading }>
               <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
             </Tooltip>
           ) }

ui/blocks/BlocksTabSlot.tsx

@@ -37,7 +37,7 @@ const BlocksTabSlot = ({ pagination }: Props) => {
         </Box>
       ) }
       <Link href={ route({ pathname: '/block/countdown' }) }>
-        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <IconSvg name="hourglass_slim" boxSize={ 5 } mr={ 2 }/>
         <span>Block countdown</span>
       </Link>
       <Pagination my={ 1 } { ...pagination }/>

ui/blocks/BlocksTableItem.tsx

@@ -41,8 +41,8 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
     <TableRow animation={ animation }>
       <TableCell >
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
-          { data.celo?.is_epoch_block && (
-            <Tooltip content={ `Finalized epoch #${ data.celo.epoch_number }` }>
+          { data.celo?.l1_era_finalized_epoch_number && (
+            <Tooltip content={ `Finalized epoch #${ data.celo.l1_era_finalized_epoch_number }` }>
               <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
             </Tooltip>
           ) }

ui/epochs/EpochDetails.tsx

+import { Box, Grid, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { CeloEpochDetails } from 'types/api/epochs';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus';
+import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
+
+import EpochElectionRewards from './electionRewards/EpochElectionRewards';
+
+interface Props {
+  data: CeloEpochDetails;
+  isLoading?: boolean;
+}
+
+const EpochDetails = ({ data, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+
+  const totalFunRewards = data.distribution?.transfers_total?.total ? getCurrencyValue({
+    value: data.distribution?.transfers_total.total.value,
+    decimals: data.distribution?.transfers_total.total.decimals,
+  }) : null;
+
+  const processingRange = (() => {
+    if (!data.start_processing_block_number || !data.end_processing_block_number) {
+      return <Box color="text.secondary">N/A</Box>;
+    }
+
+    if (data.start_processing_block_number === data.end_processing_block_number) {
+      return <BlockEntity number={ data.start_processing_block_number } isLoading={ isLoading } noIcon/>;
+    }
+
+    return (
+      <>
+        <BlockEntity number={ data.start_processing_block_number } isLoading={ isLoading } noIcon/>
+        <chakra.span color="text.secondary" whiteSpace="pre"> - </chakra.span>
+        <BlockEntity number={ data.end_processing_block_number } isLoading={ isLoading } noIcon/>
+      </>
+    );
+  })();
+
+  return (
+    <>
+      <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
+        <DetailedInfo.ItemLabel
+          hint="Current status of the epoch"
+          isLoading={ isLoading }
+        >
+          Status
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
+          <CeloEpochStatus
+            isFinalized={ data.is_finalized }
+            loading={ isLoading }
+          />
+        </DetailedInfo.ItemValue>
+        <DetailedInfo.ItemLabel
+          hint="Timestamp of the block where the epoch processing completed"
+          isLoading={ isLoading }
+        >
+          Timestamp
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
+          { data.timestamp ?
+            <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/> :
+            <Box color="text.secondary" whiteSpace="pre-wrap">Epochs are finalized approximately once a day</Box> }
+        </DetailedInfo.ItemValue>
+        <DetailedInfo.ItemLabel
+        // eslint-disable-next-line max-len
+          hint={ `The range of blocks during which the epoch is processed — i.e., from the block where the "EpochProcessingStarted" event is emitted to the block where the "EpochProcessingEnded" event is emitted` }
+          isLoading={ isLoading }
+        >
+          Processing range
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
+          { processingRange }
+        </DetailedInfo.ItemValue>
+        <DetailedInfo.ItemLabel
+          hint="Funds allocation to support Celo projects and community initiatives"
+          isLoading={ isLoading }
+        >
+          Community fund
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
+          { data.distribution?.community_transfer ? (
+            <TokenTransferSnippet
+              data={ data.distribution.community_transfer }
+              isLoading={ isLoading }
+              noAddressIcons={ isMobile }
+            />
+          ) : (
+            <Box color="text.secondary">N/A</Box>
+          ) }
+        </DetailedInfo.ItemValue>
+        <DetailedInfo.ItemLabel
+          hint="Funds allocation to support projects that make Celo carbon-negative"
+          isLoading={ isLoading }
+        >
+          Carbon offset fund
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
+          { data.distribution?.carbon_offsetting_transfer ? (
+            <TokenTransferSnippet
+              data={ data.distribution.carbon_offsetting_transfer }
+              isLoading={ isLoading }
+              noAddressIcons={ isMobile }
+            />
+          ) : (
+            <Box color="text.secondary">N/A</Box>
+          ) }
+        </DetailedInfo.ItemValue>
+        <DetailedInfo.ItemLabel
+          hint="Sum of all fund allocations"
+          isLoading={ isLoading }
+        >
+          Total fund rewards
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue flexWrap="nowrap" gap={ 2 }>
+          { totalFunRewards ? (
+            <>
+              <Skeleton loading={ isLoading }>
+                <span>{ totalFunRewards.valueStr }</span>
+              </Skeleton>
+              { data.distribution?.transfers_total?.token ? (
+                <TokenEntity
+                  token={ data.distribution?.transfers_total.token }
+                  isLoading={ isLoading }
+                  noCopy
+                  onlySymbol
+                />
+              ) :
+                config.chain.currency.symbol }
+            </>
+          ) : (
+            <Box color="text.secondary">N/A</Box>
+          ) }
+        </DetailedInfo.ItemValue>
+      </Grid>
+      <EpochElectionRewards data={ data } isLoading={ isLoading }/>
+    </>
+  );
+};
+
+export default React.memo(EpochDetails);

ui/epochs/EpochsListItem.tsx

+import { HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { CeloEpochListItem } from 'types/api/epochs';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
+import EpochEntity from 'ui/shared/entities/epoch/EpochEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus';
+
+interface Props {
+  item: CeloEpochListItem;
+  isLoading?: boolean;
+}
+
+const EpochsListItem = ({ item, isLoading }: Props) => {
+  const communityReward = getCurrencyValue({
+    value: item.distribution?.community_transfer?.value ?? '0',
+    decimals: item.distribution?.community_transfer?.decimals,
+    accuracy: 8,
+  });
+  const carbonOffsettingReward = getCurrencyValue({
+    value: item.distribution?.carbon_offsetting_transfer?.value ?? '0',
+    decimals: item.distribution?.carbon_offsetting_transfer?.decimals,
+    accuracy: 8,
+  });
+  const totalReward = getCurrencyValue({
+    value: item.distribution?.transfers_total?.value ?? '0',
+    decimals: item.distribution?.transfers_total?.decimals,
+    accuracy: 8,
+  });
+
+  return (
+    <ListItemMobile rowGap={ 1 } py={ 3 } w="full" textStyle="sm" fontWeight={ 500 } alignItems="stretch">
+      <HStack minH="30px" gap={ 3 }>
+        <EpochEntity number={ String(item.number) } isLoading={ isLoading }/>
+        <Skeleton loading={ isLoading } color="text.secondary" fontWeight={ 400 } ml="auto"><span>{ item.type }</span></Skeleton>
+        <CeloEpochStatus isFinalized={ item.is_finalized } loading={ isLoading }/>
+      </HStack>
+      { item.timestamp && (
+        <HStack minH="30px" gap={ 0 } color="text.secondary" fontWeight={ 400 }>
+          <DetailedInfoTimestamp timestamp={ item.timestamp } isLoading={ isLoading } noIcon gap={ 1 }/>
+        </HStack>
+      ) }
+      <HStack minH="30px">
+        <Skeleton loading={ isLoading }>Block range</Skeleton>
+        <Skeleton loading={ isLoading } color="text.secondary">
+          <span>{ item.start_block_number } - { item.end_block_number || '' }</span>
+        </Skeleton>
+      </HStack>
+      { item.distribution?.community_transfer ? (
+        <HStack minH="30px">
+          <Skeleton loading={ isLoading }>Community</Skeleton>
+          <Skeleton loading={ isLoading } color="text.secondary">
+            <span>{ communityReward.valueStr } { config.chain.currency.symbol }</span>
+          </Skeleton>
+        </HStack>
+      ) : null }
+      { item.distribution?.carbon_offsetting_transfer ? (
+        <HStack minH="30px">
+          <Skeleton loading={ isLoading }>Carbon offset</Skeleton>
+          <Skeleton loading={ isLoading } color="text.secondary">
+            <span>{ carbonOffsettingReward.valueStr } { config.chain.currency.symbol }</span>
+          </Skeleton>
+        </HStack>
+      ) : null }
+      { item.distribution?.transfers_total ? (
+        <HStack minH="30px">
+          <Skeleton loading={ isLoading }>Total</Skeleton>
+          <Skeleton loading={ isLoading } color="text.secondary">
+            <span>{ totalReward.valueStr } { config.chain.currency.symbol }</span>
+          </Skeleton>
+        </HStack>
+      ) : null }
+    </ListItemMobile>
+  );
+};
+
+export default EpochsListItem;

ui/epochs/EpochsTable.tsx

+import React from 'react';
+
+import type { CeloEpochListItem } from 'types/api/epochs';
+
+import config from 'configs/app';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
+
+import EpochsTableItem from './EpochsTableItem';
+
+interface Props {
+  items: Array<CeloEpochListItem>;
+  isLoading?: boolean;
+  top: number;
+};
+
+const EpochsTable = ({ items, isLoading, top }: Props) => {
+  return (
+    <TableRoot minW="1100px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader w="280px">
+            Epoch
+            <TimeFormatToggle/>
+          </TableColumnHeader>
+          <TableColumnHeader w="120px">Status</TableColumnHeader>
+          <TableColumnHeader w="25%">Block range</TableColumnHeader>
+          <TableColumnHeader w="25%" isNumeric>Community { config.chain.currency.symbol }</TableColumnHeader>
+          <TableColumnHeader w="25%" isNumeric>Carbon offset { config.chain.currency.symbol }</TableColumnHeader>
+          <TableColumnHeader w="25%" isNumeric>Total { config.chain.currency.symbol }</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
+        { items.map((item, index) => {
+          return (
+            <EpochsTableItem
+              key={ item.number + (isLoading ? String(index) : '') }
+              item={ item }
+              isLoading={ isLoading }
+            />
+          );
+        }) }
+      </TableBody>
+    </TableRoot>
+  );
+};
+
+export default EpochsTable;

ui/epochs/EpochsTableItem.tsx

+import { HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { CeloEpochListItem } from 'types/api/epochs';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
+import EpochEntity from 'ui/shared/entities/epoch/EpochEntity';
+import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
+
+interface Props {
+  item: CeloEpochListItem;
+  isLoading?: boolean;
+};
+
+const EpochsTableItem = ({ item, isLoading }: Props) => {
+
+  const communityReward = getCurrencyValue({
+    value: item.distribution?.community_transfer?.value ?? '0',
+    decimals: item.distribution?.community_transfer?.decimals,
+    accuracy: 8,
+  });
+  const carbonOffsettingReward = getCurrencyValue({
+    value: item.distribution?.carbon_offsetting_transfer?.value ?? '0',
+    decimals: item.distribution?.carbon_offsetting_transfer?.decimals,
+    accuracy: 8,
+  });
+  const totalReward = getCurrencyValue({
+    value: item.distribution?.transfers_total?.value ?? '0',
+    decimals: item.distribution?.transfers_total?.decimals,
+    accuracy: 8,
+  });
+
+  return (
+    <TableRow>
+      <TableCell verticalAlign="middle">
+        <HStack gap={ 2 }>
+          <EpochEntity number={ String(item.number) } noIcon fontWeight={ 700 } isLoading={ isLoading }/>
+          <Skeleton loading={ isLoading } color="text.secondary" fontWeight={ 500 }><span>{ item.type }</span></Skeleton>
+          <TimeWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text.secondary"
+            display="inline-block"
+            fontWeight={ 400 }
+          />
+        </HStack>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <CeloEpochStatus
+          isFinalized={ item.is_finalized }
+          loading={ isLoading }
+        />
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
+          { item.start_block_number } - { item.end_block_number || '' }
+        </Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading }>
+          { item.distribution?.community_transfer ? communityReward.valueStr : '-' }
+        </Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading }>
+          { item.distribution?.carbon_offsetting_transfer ? carbonOffsettingReward.valueStr : '-' }
+        </Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading }>
+          { item.distribution?.transfers_total ? totalReward.valueStr : '-' }
+        </Skeleton>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default EpochsTableItem;

ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx → ui/epochs/electionRewards/EpochElectionRewardDetailsDesktop.tsx

@@ -2,7 +2,7 @@ import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { BlockEpoch } from 'types/api/block';
+import type { CeloEpochDetails } from 'types/api/epochs';
 import type { TokenInfo } from 'types/api/token';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
@@ -14,20 +14,20 @@ import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
 import { formatRewardType, getRewardDetailsTableTitles } from './utils';
 
 interface Props {
-  type: keyof BlockEpoch['aggregated_election_rewards'];
+  type: keyof CeloEpochDetails['aggregated_election_rewards'];
   token: TokenInfo;
 }
 
-const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
+const CeloEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
   const rootRef = React.useRef<HTMLDivElement>(null);
 
   const router = useRouter();
-  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+  const number = getQueryParamString(router.query.number);
 
   const { cutRef, query } = useLazyLoadedList({
     rootRef,
-    resourceName: 'general:block_election_rewards',
-    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    resourceName: 'general:epoch_celo_election_rewards',
+    pathParams: { number: number, reward_type: formatRewardType(type) },
     queryOptions: {
       refetchOnMount: false,
     },
@@ -97,4 +97,4 @@ const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
   );
 };
 
-export default React.memo(BlockEpochElectionRewardDetailsDesktop);
+export default React.memo(CeloEpochElectionRewardDetailsDesktop);

ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx → ui/epochs/electionRewards/EpochElectionRewardDetailsMobile.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { BlockEpoch } from 'types/api/block';
+import type { CeloEpochDetails } from 'types/api/epochs';
 import type { TokenInfo } from 'types/api/token';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
@@ -15,20 +15,20 @@ import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
 import { formatRewardType } from './utils';
 
 interface Props {
-  type: keyof BlockEpoch['aggregated_election_rewards'];
+  type: keyof CeloEpochDetails['aggregated_election_rewards'];
   token: TokenInfo;
 }
 
-const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
+const CeloEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
   const rootRef = React.useRef<HTMLDivElement>(null);
 
   const router = useRouter();
-  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+  const number = getQueryParamString(router.query.number);
 
   const { cutRef, query } = useLazyLoadedList({
     rootRef,
-    resourceName: 'general:block_election_rewards',
-    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    resourceName: 'general:epoch_celo_election_rewards',
+    pathParams: { number: number, reward_type: formatRewardType(type) },
     queryOptions: {
       refetchOnMount: false,
     },
@@ -80,4 +80,4 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
   );
 };
 
-export default React.memo(BlockEpochElectionRewardDetailsMobile);
+export default React.memo(CeloEpochElectionRewardDetailsMobile);

ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx → ui/epochs/electionRewards/EpochElectionRewards.pw.tsx

 import React from 'react';
 
-import * as blockEpochMock from 'mocks/blocks/epoch';
+import * as celoEpochMock from 'mocks/epochs/celo';
 import { test, expect } from 'playwright/lib';
 
-import BlockEpochElectionRewards from './BlockEpochElectionRewards';
+import EpochElectionRewards from './EpochElectionRewards';
 
-const heightOrHash = '1234';
+const number = '1234';
 const hooksConfig = {
   router: {
-    query: { height_or_hash: heightOrHash },
+    query: { number },
   },
 };
 
 test('base view', async({ render, mockApiResponse }) => {
   await mockApiResponse(
-    'general:block_election_rewards',
-    blockEpochMock.electionRewardDetails1,
-    { pathParams: { height_or_hash: heightOrHash, reward_type: 'voter' } },
+    'general:epoch_celo_election_rewards',
+    celoEpochMock.electionRewardDetails1,
+    { pathParams: { number, reward_type: 'voter' } },
   );
-  const component = await render(<BlockEpochElectionRewards data={ blockEpochMock.blockEpoch1 }/>, { hooksConfig });
+  const component = await render(<EpochElectionRewards data={ celoEpochMock.epoch1 }/>, { hooksConfig });
   await component.getByRole('cell', { name: 'Voting rewards' }).click();
   await expect(component).toHaveScreenshot();
 });
 
 test('base view +@mobile -@default', async({ render, mockApiResponse }) => {
   await mockApiResponse(
-    'general:block_election_rewards',
-    blockEpochMock.electionRewardDetails1,
-    { pathParams: { height_or_hash: heightOrHash, reward_type: 'voter' } },
+    'general:epoch_celo_election_rewards',
+    celoEpochMock.electionRewardDetails1,
+    { pathParams: { number, reward_type: 'voter' } },
   );
-  const component = await render(<BlockEpochElectionRewards data={ blockEpochMock.blockEpoch1 }/>, { hooksConfig });
+  const component = await render(<EpochElectionRewards data={ celoEpochMock.epoch1 }/>, { hooksConfig });
   await component.locator('div').filter({ hasText: 'Voting rewards' }).nth(3).click();
   await expect(component).toHaveScreenshot();
 });

ui/block/epochRewards/BlockEpochElectionRewards.tsx → ui/epochs/electionRewards/EpochElectionRewards.tsx

 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import type { BlockEpoch } from 'types/api/block';
+import type { CeloEpochDetails } from 'types/api/epochs';
 
 import { Heading } from 'toolkit/chakra/heading';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
-import BlockEpochElectionRewardsListItem from './BlockEpochElectionRewardsListItem';
-import BlockEpochElectionRewardsTableItem from './BlockEpochElectionRewardsTableItem';
+import EpochElectionRewardsListItem from './EpochElectionRewardsListItem';
+import EpochElectionRewardsTableItem from './EpochElectionRewardsTableItem';
 
 interface Props {
-  data: BlockEpoch;
+  data: CeloEpochDetails;
   isLoading?: boolean;
 }
 
-const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
+const EpochElectionRewards = ({ data, isLoading }: Props) => {
   if (!data.aggregated_election_rewards) {
     return null;
   }
 
   return (
-    <Box mt={ 8 }>
+    <Box mt={ 6 }>
       <Heading level="3" mb={ 3 }>Election rewards</Heading>
       <Box hideBelow="lg">
         <TableRoot style={{ tableLayout: 'auto' }}>
@@ -34,7 +34,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
           </TableHeaderSticky>
           <TableBody>
             { Object.entries(data.aggregated_election_rewards).map((entry) => {
-              const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+              const key = entry[0] as keyof CeloEpochDetails['aggregated_election_rewards'];
               const value = entry[1];
 
               if (!value) {
@@ -42,7 +42,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
               }
 
               return (
-                <BlockEpochElectionRewardsTableItem
+                <EpochElectionRewardsTableItem
                   key={ key }
                   type={ key }
                   isLoading={ isLoading }
@@ -55,7 +55,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
       </Box>
       <Box hideFrom="lg">
         { Object.entries(data.aggregated_election_rewards).map((entry) => {
-          const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+          const key = entry[0] as keyof CeloEpochDetails['aggregated_election_rewards'];
           const value = entry[1];
 
           if (!value) {
@@ -63,7 +63,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
           }
 
           return (
-            <BlockEpochElectionRewardsListItem
+            <EpochElectionRewardsListItem
               key={ key }
               type={ key }
               isLoading={ isLoading }
@@ -76,4 +76,4 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
   );
 };
 
-export default React.memo(BlockEpochElectionRewards);
+export default React.memo(EpochElectionRewards);

ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx → ui/epochs/electionRewards/EpochElectionRewardsListItem.tsx

 import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+import type { CeloEpochElectionReward, CeloEpochDetails } from 'types/api/epochs';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { IconButton } from 'toolkit/chakra/icon-button';
@@ -11,15 +11,16 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import IconSvg from 'ui/shared/IconSvg';
 
-import BlockEpochElectionRewardDetailsMobile from './BlockEpochElectionRewardDetailsMobile';
+import EpochElectionRewardDetailsMobile from './EpochElectionRewardDetailsMobile';
+import { getRewardNumText } from './utils';
 
 interface Props {
-  data: BlockEpochElectionReward;
-  type: keyof BlockEpoch['aggregated_election_rewards'];
+  data: CeloEpochElectionReward;
+  type: keyof CeloEpochDetails['aggregated_election_rewards'];
   isLoading?: boolean;
 }
 
-const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) => {
+const EpochElectionRewardsListItem = ({ data, isLoading, type }: Props) => {
   const section = useDisclosure();
 
   const { valueStr } = getCurrencyValue({
@@ -55,7 +56,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
           </Skeleton>
         ) : <Box boxSize={ 6 }/> }
         <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
-        <Skeleton loading={ isLoading }>{ data.count }</Skeleton>
+        <Skeleton loading={ isLoading } ml="auto">{ getRewardNumText(type, data.count) }</Skeleton>
         <Flex columnGap={ 2 } alignItems="center" ml={{ base: 9, lg: 'auto' }} w={{ base: '100%', lg: 'fit-content' }} fontWeight={ 500 }>
           <Skeleton loading={ isLoading }>{ valueStr }</Skeleton>
           <TokenEntity
@@ -69,11 +70,11 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
       </Flex>
       { section.open && (
         <Box mt={ 2 }>
-          <BlockEpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
+          <EpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
         </Box>
       ) }
     </Box>
   );
 };
 
-export default React.memo(BlockEpochElectionRewardsListItem);
+export default React.memo(EpochElectionRewardsListItem);

ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx → ui/epochs/electionRewards/EpochElectionRewardsTableItem.tsx

 import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+import type { CeloEpochDetails, CeloEpochElectionReward } from 'types/api/epochs';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { IconButton } from 'toolkit/chakra/icon-button';
@@ -12,16 +12,16 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import IconSvg from 'ui/shared/IconSvg';
 
-import BlockEpochElectionRewardDetailsDesktop from './BlockEpochElectionRewardDetailsDesktop';
+import EpochElectionRewardDetailsDesktop from './EpochElectionRewardDetailsDesktop';
 import { getRewardNumText } from './utils';
 
 interface Props {
-  data: BlockEpochElectionReward;
-  type: keyof BlockEpoch['aggregated_election_rewards'];
+  data: CeloEpochElectionReward;
+  type: keyof CeloEpochDetails['aggregated_election_rewards'];
   isLoading?: boolean;
 }
 
-const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => {
+const EpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => {
   const section = useDisclosure();
 
   const { valueStr } = getCurrencyValue({
@@ -79,7 +79,7 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
         <TableRow>
           <TableCell/>
           <TableCell colSpan={ 3 } pr={ 0 } pt={ 0 }>
-            <BlockEpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
+            <EpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
           </TableCell>
         </TableRow>
       ) }
@@ -87,4 +87,4 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
   );
 };
 
-export default React.memo(BlockEpochElectionRewardsTableItem);
+export default React.memo(EpochElectionRewardsTableItem);

ui/block/epochRewards/utils.ts → ui/epochs/electionRewards/utils.ts

-import type { BlockEpoch } from 'types/api/block';
+import type { CeloEpochDetails } from 'types/api/epochs';
 import type { ExcludeNull } from 'types/utils';
 
-export function getRewardNumText(type: keyof BlockEpoch['aggregated_election_rewards'], num: number) {
+export function getRewardNumText(type: keyof CeloEpochDetails['aggregated_election_rewards'], num: number) {
   const postfix1 = num !== 1 ? 's' : '';
   const postfix2 = num !== 1 ? 'es' : '';
 
@@ -27,7 +27,7 @@ export function getRewardNumText(type: keyof BlockEpoch['aggregated_election_rew
   return `${ num } ${ text }`;
 }
 
-export function getRewardDetailsTableTitles(type: keyof ExcludeNull<BlockEpoch['aggregated_election_rewards']>): [string, string] {
+export function getRewardDetailsTableTitles(type: keyof ExcludeNull<CeloEpochDetails['aggregated_election_rewards']>): [string, string] {
   switch (type) {
     case 'delegated_payment':
       return [ 'Beneficiary', 'Validator' ];
@@ -40,6 +40,6 @@ export function getRewardDetailsTableTitles(type: keyof ExcludeNull<BlockEpoch['
   }
 }
 
-export function formatRewardType(type: keyof ExcludeNull<BlockEpoch['aggregated_election_rewards']>) {
+export function formatRewardType(type: keyof ExcludeNull<CeloEpochDetails['aggregated_election_rewards']>) {
   return type.replaceAll('_', '-');
 }

ui/home/LatestBlocksItem.tsx

@@ -38,8 +38,8 @@ const LatestBlocksItem = ({ block, isLoading, animation }: Props) => {
           fontWeight={ 500 }
           mr="auto"
         />
-        { block.celo?.is_epoch_block && (
-          <Tooltip content={ `Finalized epoch #${ block.celo.epoch_number }` }>
+        { block.celo?.l1_era_finalized_epoch_number && (
+          <Tooltip content={ `Finalized epoch #${ block.celo.l1_era_finalized_epoch_number }` }>
             <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
           </Tooltip>
         ) }

ui/home/Stats.tsx

@@ -200,9 +200,10 @@ const Stats = () => {
       },
       apiData?.celo && {
         id: 'current_epoch' as const,
-        icon: 'hourglass' as const,
+        icon: 'hourglass_slim' as const,
         label: 'Current epoch',
         value: `#${ apiData.celo.epoch_number }`,
+        href: { pathname: '/epochs/[number]' as const, query: { number: String(apiData.celo.epoch_number) } },
         isLoading,
       },
     ]

ui/pages/Block.tsx

@@ -17,7 +17,6 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import BlockCeloEpochTag from 'ui/block/BlockCeloEpochTag';
 import BlockDetails from 'ui/block/BlockDetails';
-import BlockEpochRewards from 'ui/block/BlockEpochRewards';
 import BlockInternalTxs from 'ui/block/BlockInternalTxs';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
 import useBlockBlobTxsQuery from 'ui/block/useBlockBlobTxsQuery';
@@ -110,12 +109,7 @@ const BlockPageContent = () => {
           </>
         ),
       } : null,
-    blockQuery.data?.celo?.is_epoch_block ? {
-      id: 'epoch_rewards',
-      title: 'Epoch rewards',
-      component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
-    } : null,
-  ].filter(Boolean)), [ blockBlobTxsQuery, blockInternalTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination, heightOrHash ]);
+  ].filter(Boolean)), [ blockBlobTxsQuery, blockInternalTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination ]);
 
   let pagination;
   if (tab === 'txs') {

ui/pages/Epoch.pw.tsx

+import React from 'react';
+
+import * as epochMock from 'mocks/epochs/celo';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import Epoch from './Epoch';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { number: String(epochMock.epoch1.number) },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.celo);
+  await mockTextAd();
+  await mockApiResponse('general:epoch_celo', epochMock.epoch1, { pathParams: { number: String(epochMock.epoch1.number) } });
+
+  const component = await render(<Epoch/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('unfinalized epoch', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { number: String(epochMock.epochUnfinalized.number) },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.celo);
+  await mockTextAd();
+  await mockApiResponse('general:epoch_celo', epochMock.epochUnfinalized, { pathParams: { number: String(epochMock.epochUnfinalized.number) } });
+
+  const component = await render(<Epoch/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot();
+});

ui/pages/Epoch.tsx

+import { Box, HStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { CELO_EPOCH } from 'stubs/epoch';
+import { Tag } from 'toolkit/chakra/tag';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import EpochDetails from 'ui/epochs/EpochDetails';
+import TextAd from 'ui/shared/ad/TextAd';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const EpochPageContent = () => {
+  const isMobile = useIsMobile();
+  const appProps = useAppContext();
+  const router = useRouter();
+  const number = getQueryParamString(router.query.number);
+
+  const epochQuery = useApiQuery('general:epoch_celo', {
+    pathParams: {
+      number: number,
+    },
+    queryOptions: {
+      placeholderData: CELO_EPOCH,
+    },
+  });
+
+  throwOnResourceLoadError(epochQuery);
+
+  const isLoading = epochQuery.isPlaceholderData;
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/epochs');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to epochs list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  const titleContentAfter = (() => {
+    switch (epochQuery.data?.type) {
+      case 'L1':
+        return (
+          <Tooltip content="Epoch finalized while Celo was still an L1 network">
+            <Tag loading={ isLoading }>{ epochQuery.data.type }</Tag>
+          </Tooltip>
+        );
+      case 'L2':
+        return (
+          <Tooltip content="Epoch finalized after Celo migrated to the OP‐stack, when it became an L2 rollup">
+            <Tag loading={ isLoading }>{ epochQuery.data.type }</Tag>
+          </Tooltip>
+        );
+    }
+
+    return null;
+  })();
+
+  const titleSecondRow = (() => {
+    if (!epochQuery.data || epochQuery.data?.start_block_number === null) {
+      return null;
+    }
+
+    const isTruncated = isMobile && Boolean(epochQuery.data.end_block_number);
+    const truncationProps = isTruncated ? { truncation: 'constant' as const, truncationMaxSymbols: 6 } : undefined;
+
+    return (
+      <HStack textStyle={{ base: 'heading.sm', lg: 'heading.md' }} flexWrap="wrap">
+        <Box color="text.secondary">Ranging from</Box>
+        <BlockEntity
+          number={ epochQuery.data.start_block_number }
+          variant="subheading"
+          { ...truncationProps }
+        />
+        { epochQuery.data.end_block_number && (
+          <>
+            <Box color="text.secondary">to</Box>
+            <BlockEntity number={ epochQuery.data.end_block_number } variant="subheading" { ...truncationProps }/>
+          </>
+        ) }
+      </HStack>
+    );
+  })();
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Epoch #${ number }` }
+        backLink={ backLink }
+        contentAfter={ titleContentAfter }
+        secondRow={ titleSecondRow }
+        isLoading={ isLoading }
+      />
+      { epochQuery.data && <EpochDetails data={ epochQuery.data } isLoading={ isLoading }/> }
+    </>
+  );
+};
+
+export default EpochPageContent;

ui/pages/Epochs.pw.tsx

+import React from 'react';
+
+import { list as epochsList } from 'mocks/epochs/celo';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import Epochs from './Epochs';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.celo);
+  await mockTextAd();
+  await mockApiResponse('general:epochs_celo', epochsList);
+
+  const component = await render(<Epochs/>);
+
+  await expect(component).toHaveScreenshot();
+});

ui/pages/Epochs.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { CELO_EPOCH_ITEM } from 'stubs/epoch';
+import { generateListStub } from 'stubs/utils';
+import EpochsListItem from 'ui/epochs/EpochsListItem';
+import EpochsTable from 'ui/epochs/EpochsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const EpochsPageContent = () => {
+  const epochsQuery = useQueryWithPages({
+    resourceName: 'general:epochs_celo',
+    options: {
+      placeholderData: generateListStub<'general:epochs_celo'>(CELO_EPOCH_ITEM, 50, { next_page_params: {
+        number: 1739,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const actionBar = epochsQuery.pagination.isVisible ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...epochsQuery.pagination }/>
+    </ActionBar>
+  ) : null;
+
+  const isLoading = epochsQuery.isPlaceholderData;
+
+  const content = (() => {
+    if (epochsQuery.isError) {
+      return <DataFetchAlert/>;
+    }
+
+    return epochsQuery.data?.items ? (
+      <>
+        <Box hideBelow="lg">
+          <EpochsTable
+            items={ epochsQuery.data.items }
+            top={ epochsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+            isLoading={ isLoading }
+          />
+        </Box>
+        <Box hideFrom="lg">
+          { epochsQuery.data.items.map((item, index) => (
+            <EpochsListItem
+              key={ item.number + (epochsQuery.isPlaceholderData ? String(index) : '') }
+              item={ item }
+              isLoading={ isLoading }
+            />
+          )) }
+        </Box>
+      </>
+    ) : null;
+  })();
+
+  return (
+    <>
+      <PageTitle title="Epochs" withTextAd/>
+      <DataListDisplay
+        isError={ epochsQuery.isError }
+        itemsNum={ epochsQuery.data?.items?.length }
+        emptyText="There are no epochs."
+        actionBar={ actionBar }
+      >
+        { content }
+      </DataListDisplay>
+    </>
+  );
+};
+
+export default EpochsPageContent;

ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx

@@ -10,16 +10,17 @@ type Props = {
   timestamp: string | number;
   isLoading?: boolean;
   noIcon?: boolean;
+  gap?: number;
 };
 
-const DetailedInfoTimestamp = ({ timestamp, isLoading, noIcon }: Props) => {
+const DetailedInfoTimestamp = ({ timestamp, isLoading, noIcon, gap }: Props) => {
   return (
     <>
       { !noIcon && <IconSvg name="clock" boxSize={ 5 } color="gray.500" isLoading={ isLoading } mr={ 2 }/> }
       <Skeleton loading={ isLoading }>
         { dayjs(timestamp).fromNow() }
       </Skeleton>
-      <TextSeparator color="gray.500"/>
+      <TextSeparator color="gray.500" mx={ gap ?? 3 }/>
       <Skeleton loading={ isLoading } whiteSpace="normal">
         { dayjs(timestamp).format('llll') }
       </Skeleton>

ui/shared/EpochRewardTypeTag.tsx

 import React from 'react';
 
-import type { EpochRewardsType } from 'types/api/block';
+import type { CeloEpochRewardsType } from 'types/api/epochs';
 
 import type { BadgeProps } from 'toolkit/chakra/badge';
 import { Badge } from 'toolkit/chakra/badge';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 
 type Props = {
-  type: EpochRewardsType;
+  type: CeloEpochRewardsType;
   isLoading?: boolean;
 };
 
-const TYPE_TAGS: Record<EpochRewardsType, { text: string; label: string; color: BadgeProps['colorPalette'] }> = {
+const TYPE_TAGS: Record<CeloEpochRewardsType, { text: string; label: string; color: BadgeProps['colorPalette'] }> = {
   group: {
     text: 'Validator group rewards',
     // eslint-disable-next-line max-len

ui/shared/HashStringShorten.tsx

@@ -9,11 +9,12 @@ interface Props {
   noTooltip?: boolean;
   tooltipInteractive?: boolean;
   type?: 'long' | 'short';
+  maxSymbols?: number;
   as?: React.ElementType;
 }
 
-const HashStringShorten = ({ hash, noTooltip, as = 'span', type, tooltipInteractive }: Props) => {
-  const charNumber = type === 'long' ? 16 : 8;
+const HashStringShorten = ({ hash, noTooltip, as = 'span', type, tooltipInteractive, maxSymbols }: Props) => {
+  const charNumber = maxSymbols ?? (type === 'long' ? 16 : 8);
   if (hash.length <= charNumber) {
     return <chakra.span as={ as }>{ hash }</chakra.span>;
   }

ui/shared/entities/base/components.tsx

@@ -35,6 +35,7 @@ export interface EntityBaseProps {
   tailLength?: number;
   target?: React.HTMLAttributeAnchorTarget;
   truncation?: Truncation;
+  truncationMaxSymbols?: number;
   variant?: 'content' | 'heading' | 'subheading';
   linkVariant?: LinkProps['variant'];
 }
@@ -167,7 +168,9 @@ const IconShield = (props: IconShieldProps) => {
   return <IconSvg className="entity__shield" { ...styles } { ...svgProps }/>;
 };
 
-export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength' | 'noTooltip' | 'variant'> {
+export interface ContentBaseProps extends Pick<
+  EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength' | 'noTooltip' | 'variant' | 'truncationMaxSymbols'
+> {
   asProp?: React.ElementType;
   text: string;
   tooltipInteractive?: boolean;
@@ -179,6 +182,7 @@ const Content = chakra(({
   asProp,
   text,
   truncation = 'dynamic',
+  truncationMaxSymbols,
   tailLength,
   variant,
   noTooltip,
@@ -208,6 +212,7 @@ const Content = chakra(({
             type="long"
             noTooltip={ noTooltip }
             tooltipInteractive={ tooltipInteractive }
+            maxSymbols={ truncationMaxSymbols }
           />
         );
       case 'constant':
@@ -217,6 +222,7 @@ const Content = chakra(({
             as={ asProp }
             noTooltip={ noTooltip }
             tooltipInteractive={ tooltipInteractive }
+            maxSymbols={ truncationMaxSymbols }
           />
         );
       case 'dynamic':

ui/shared/entities/epoch/EpochEntity.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import * as EntityBase from 'ui/shared/entities/base/components';
+
+import { distributeEntityProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'number'>;
+
+const Link = chakra((props: LinkProps) => {
+  const defaultHref = route({ pathname: '/epochs/[number]', query: { number: props.number } });
+
+  return (
+    <EntityBase.Link
+      { ...props }
+      href={ props.href ?? defaultHref }
+    >
+      { props.children }
+    </EntityBase.Link>
+  );
+});
+
+const Icon = (props: EntityBase.IconBaseProps) => {
+  return (
+    <EntityBase.Icon
+      { ...props }
+      name={ props.name ?? 'hourglass_slim' }
+    />
+  );
+};
+
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'number'>;
+
+const Content = chakra((props: ContentProps) => {
+  return (
+    <EntityBase.Content
+      { ...props }
+      text={ props.number }
+    />
+  );
+});
+
+type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'number'>;
+
+const Copy = (props: CopyProps) => {
+  return (
+    <EntityBase.Copy
+      { ...props }
+      text={ props.number }
+      // by default we don't show copy icon
+      noCopy={ props.noCopy ?? true }
+    />
+  );
+};
+
+const Container = EntityBase.Container;
+
+export interface EntityProps extends EntityBase.EntityBaseProps {
+  number: string;
+}
+
+const EpochEntity = (props: EntityProps) => {
+  const partsProps = distributeEntityProps(props);
+  const content = <Content { ...partsProps.content }/>;
+
+  return (
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
+      <Copy { ...partsProps.copy }/>
+    </Container>
+  );
+};
+
+export default React.memo(chakra(EpochEntity));
+
+export {
+  Container,
+  Link,
+  Icon,
+  Content,
+  Copy,
+};

ui/shared/stats/StatsWidget.tsx

@@ -26,10 +26,10 @@ export type Props = {
   icon?: IconName;
 };
 
-const Container = ({ href, children }: { href?: Route; children: React.JSX.Element }) => {
+const Container = ({ href, children, className }: { href?: Route; children: React.JSX.Element; className?: string }) => {
   if (href) {
     return (
-      <Link href={ route(href) } variant="plain">
+      <Link href={ route(href) } variant="plain" className={ className }>
         { children }
       </Link>
     );
@@ -54,9 +54,9 @@ const StatsWidget = ({
   href,
 }: Props) => {
   return (
-    <Container href={ !isLoading ? href : undefined }>
+    <Container href={ !isLoading ? href : undefined } className={ href ? className : undefined }>
       <Flex
-        className={ className }
+        className={ href ? undefined : className }
         alignItems="center"
         bgColor={ isLoading ? { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } : { _light: 'gray.50', _dark: 'whiteAlpha.100' } }
         p={ 3 }

ui/shared/statusTag/CeloEpochStatus.tsx

+import React from 'react';
+
+import type { Props as StatusTagProps } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props extends Omit<StatusTagProps, 'type' | 'text'> {
+  isFinalized: boolean;
+}
+
+const CeloEpochStatus = ({ isFinalized, ...rest }: Props) => {
+  return (
+    <StatusTag
+      { ...rest }
+      type={ isFinalized ? 'ok' : 'pending' }
+      text={ isFinalized ? 'Finalized' : 'In progress' }
+    />
+  );
+};
+
+export default CeloEpochStatus;