Validators list: incorrect position of the sticky table header (#2867)

Fixes #2866

.github/workflows/deploy-review-l2.yml

@@ -32,7 +32,7 @@ on:
             - shibarium
             - stability
             - zkevm 
-            - zilliqa_prototestnet
+            - zilliqa
             - zksync
             - zora
 

.github/workflows/deploy-review.yml

@@ -37,7 +37,7 @@ on:
             - tac
             - tac_turin
             - zkevm
-            - zilliqa_prototestnet
+            - zilliqa
             - zksync
             - zora
 

.vscode/tasks.json

@@ -387,7 +387,7 @@
               "tac",
               "tac_turin",
               "zkevm",
-              "zilliqa_prototestnet",
+              "zilliqa",
               "zksync",
               "zora",
             ],

configs/envs/.env.zilliqa_prototestnet → configs/envs/.env.zilliqa

-# Set of ENVs for Zilliqa EVM proto-testnet network explorer
-# https://zilliqa-prototestnet.blockscout.com
-# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zilliqa_prototestnet"
+# Set of ENVs for Zilliqa 2 mainnet network explorer
+# https://zilliqa.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=zilliqa"
 
 # Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
@@ -10,31 +10,36 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
 # Instance ENVs
+NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol', 'efp', 'webacy', 'deepdao', 'humanpassport', 'bankless', 'blockscoutbadges']
+NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/widgets/config.json
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=zilliqa-prototestnet.blockscout.com
+NEXT_PUBLIC_API_HOST=zilliqa.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 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/zilliqa.json
 NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x3d1ded3a7924cd3256a4b1a447c9bfb194f54b9a8ceb441edb8bb01563b516db
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x5fac3ef1d2f63aad2845214f7b0723406a910d8cd55bdee9e485a9c9391abeee
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 99.97%)','linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 50.02%, rgba(0, 0, 0, 1) 99.97%)'],'text_color':['rgba(255, 255, 255, 1)','rgba(255, 255, 255, 1)'],'button':{'_default':{'background':['rgba(38, 6, 124, 1)']},'_hover':{'background':['rgba(17, 4, 87, 1)']}}}
-NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ZIL
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ZIL
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zilliqa.svg
 NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zilliqa-dark.svg
-NEXT_PUBLIC_NETWORK_ID=33103
+NEXT_PUBLIC_NETWORK_ID=32769
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zilliqa.svg
 NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zilliqa-dark.svg
-NEXT_PUBLIC_NETWORK_NAME=Zilliqa EVM proto-testnet
-NEXT_PUBLIC_NETWORK_RPC_URL=https://api.zq2-prototestnet.zilliqa.com
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Zilliqa EVM proto-testnet
+NEXT_PUBLIC_NETWORK_NAME=Zilliqa 2 mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://api.zilliqa.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Zilliqa 2 mainnet
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zilliqa.png
+NEXT_PUBLIC_PUZZLE_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/capyPuzzleBadge
+NEXT_PUBLIC_STATS_API_BASE_PATH=/stats-service
+NEXT_PUBLIC_STATS_API_HOST=https://zilliqa.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=zilliqa
 NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=zil

stubs/validators.ts

@@ -38,7 +38,7 @@ export const VALIDATORS_BLACKFORT_COUNTERS: ValidatorsBlackfortCountersResponse
 export const VALIDATORS_ZILLIQA_ITEM: ValidatorsZilliqaItem = {
   index: 420,
   bls_public_key: '0x95125dca41be848801f9bd75254f1faf1ae3194b1da53e9a5684ed7f67b729542482bc521924603b9703c33bf831a100',
-  balance: '1000000000000000000',
+  balance: '80000000000000000000000000',
 };
 
 export const VALIDATOR_ZILLIQA: ValidatorZilliqa = {

tools/preset-sync/index.ts

@@ -30,7 +30,7 @@ const PRESETS = {
   tac_turin: 'https://tac-turin.blockscout.com',
   zkevm: 'https://zkevm.blockscout.com',
   zksync: 'https://zksync.blockscout.com',
-  zilliqa_prototestnet: 'https://zilliqa-prototestnet.blockscout.com',
+  zilliqa: 'https://zilliqa.blockscout.com',
   zora: 'https://explorer.zora.energy',
   // main === staging
   main: 'https://eth-sepolia.k8s-dev.blockscout.com',

ui/pages/ValidatorsZilliqa.tsx

@@ -2,10 +2,9 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import { generateListStub } from 'stubs/utils';
 import { VALIDATORS_ZILLIQA_ITEM } from 'stubs/validators';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -14,9 +13,6 @@ import ValidatorsList from 'ui/validators/zilliqa/ValidatorsList';
 import ValidatorsTable from 'ui/validators/zilliqa/ValidatorsTable';
 
 const ValidatorsZilliqa = () => {
-
-  const isMobile = useIsMobile();
-
   const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
     resourceName: 'general:validators_zilliqa',
     options: {
@@ -29,7 +25,7 @@ const ValidatorsZilliqa = () => {
     },
   });
 
-  const actionBar = (!isMobile || pagination.isVisible) ? (
+  const actionBar = pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
@@ -41,7 +37,7 @@ const ValidatorsZilliqa = () => {
         <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
       </Box>
       <Box hideBelow="lg">
-        <ValidatorsTable data={ data.items } isLoading={ isPlaceholderData }/>
+        <ValidatorsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Box>
     </>
   ) : null;

ui/validators/zilliqa/ValidatorsTable.tsx

@@ -4,23 +4,23 @@ import type { ValidatorsZilliqaItem } from 'types/api/validators';
 
 import config from 'configs/app';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
-import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 
 import ValidatorsTableItem from './ValidatorsTableItem';
 
 interface Props {
   data: Array<ValidatorsZilliqaItem>;
   isLoading?: boolean;
+  top?: number;
 }
 
-const ValidatorsTable = ({ data, isLoading }: Props) => {
+const ValidatorsTable = ({ data, isLoading, top }: Props) => {
   return (
     <TableRoot>
-      <TableHeaderSticky top={ ACTION_BAR_HEIGHT_DESKTOP }>
+      <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader width="50%">BLS public key</TableColumnHeader>
-          <TableColumnHeader width="25%">Index</TableColumnHeader>
-          <TableColumnHeader width="25%" isNumeric>
+          <TableColumnHeader width="15%">Index</TableColumnHeader>
+          <TableColumnHeader width="35%" isNumeric>
             Staked { config.chain.currency.symbol }
           </TableColumnHeader>
         </TableRow>

ui/validators/zilliqa/ValidatorsTableItem.tsx

@@ -25,7 +25,7 @@ const ValidatorsTableItem = ({ data, isLoading }: Props) => {
         </Skeleton>
       </TableCell>
       <TableCell verticalAlign="middle" isNumeric>
-        <Skeleton loading={ isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block" wordBreak="break-all">
           { BigNumber(data.balance).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
         </Skeleton>
       </TableCell>