Merge pull request #2120 from blockscout/fe-2067

change verification type and validator title for Arbitrum and zkEvm

configs/app/chain.ts

+import type { RollupType } from 'types/client/rollup';
+import type { NetworkVerificationType, NetworkVerificationTypeEnvs } from 'types/networks';
+
 import { getEnvValue } from './utils';
 
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
+const rollupType = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE') as RollupType;
+
+const verificationType: NetworkVerificationType = (() => {
+  if (rollupType === 'arbitrum') {
+    return 'posting';
+  }
+  if (rollupType === 'zkEvm') {
+    return 'sequencing';
+  }
+  return getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') as NetworkVerificationTypeEnvs || 'mining';
+})();
+
 const chain = Object.freeze({
   id: getEnvValue('NEXT_PUBLIC_NETWORK_ID'),
   name: getEnvValue('NEXT_PUBLIC_NETWORK_NAME'),
@@ -19,7 +34,7 @@ const chain = Object.freeze({
   tokenStandard: getEnvValue('NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME') || 'ERC',
   rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
   isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',
-  verificationType: getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') || 'mining',
+  verificationType,
 });
 
 export default chain;

deploy/tools/envs-validator/schema.ts

@@ -31,7 +31,7 @@ import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
 import { CHAIN_INDICATOR_IDS } from '../../../types/homepage';
 import type { ChainIndicatorId } from '../../../types/homepage';
-import { type NetworkVerificationType, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
+import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
 import { COLOR_THEME_IDS } from '../../../types/settings';
 import type { AddressViewId } from '../../../types/views/address';
 import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from '../../../types/views/address';
@@ -510,7 +510,17 @@ const schema = yup
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: yup.number().integer().positive(),
     NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL: yup.string(),
     NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES: yup.boolean(),
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup.string<NetworkVerificationType>().oneOf([ 'validation', 'mining' ]),
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup
+      .string<NetworkVerificationTypeEnvs>().oneOf([ 'validation', 'mining' ])
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value === 'arbitrum' || value === 'zkEvm',
+        then: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE can not be set for Arbitrum and ZkEVM rollups',
+          value => value === undefined,
+        ),
+        otherwise: (schema) => schema,
+      }),
     NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME: yup.string(),
     NEXT_PUBLIC_IS_TESTNET: yup.boolean(),
 

deploy/values/review-l2/values.yaml.gotmpl

@@ -49,7 +49,6 @@ frontend:
   env:
     NEXT_PUBLIC_APP_ENV: development
     NEXT_PUBLIC_APP_INSTANCE: review_L2
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
     NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
     NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
     NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-mainnet.json

deploy/values/review/values.yaml.gotmpl

@@ -49,7 +49,6 @@ frontend:
   env:
     NEXT_PUBLIC_APP_ENV: development
     NEXT_PUBLIC_APP_INSTANCE: review
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
     NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-sepolia.json
     NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
     NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
@@ -61,18 +60,10 @@ frontend:
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_AUTH_URL: https://blockscout-main.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_ENABLED: true
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-    NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL: https://gist.githubusercontent.com/maxaleks/ce5c7e3de53e8f5b240b88265daf5839/raw/328383c958a8f7ecccf6d50c953bcdf8ab3faa0a/security_reports_goerli_test.json
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
     NEXT_PUBLIC_NETWORK_RPC_URL: https://eth-sepolia.public.blastapi.io
     NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-    NEXT_PUBLIC_MARKETPLACE_FEATURED_APP: zkbob-wallet
-    NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL: https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html
-    NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL: https://www.basename.app
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
     NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: gradient_avatar
@@ -96,4 +87,3 @@ frontend:
     FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
-    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY

docs/ENVS.md

@@ -93,7 +93,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 | NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` | v1.0.x+ |
 | NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL | `string` | Network secondary coin symbol.  | - | - | `GNO` | v1.29.0+ |
 | NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES | `boolean` | Set to `true` for networks where users can pay transaction fees in either the native coin or ERC-20 tokens.  | - | `false` | `true` | v1.33.0+ |
-| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` | Verification type in the network | - | `mining` | `validation` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` | `mining` | Verification type in the network. Irrelevant for Arbitrum (verification type is always `posting`) and ZkEvm (verification type is always `sequencing`) L2s | - | `mining` | `validation` | v1.0.x+ |
 | NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME | `string` | Name of the standard for creating tokens | - | `ERC` | `BEP` | v1.31.0+ |
 | NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` | v1.0.x+ |
 

lib/networks/getNetworkValidationActionText.ts

+import config from 'configs/app';
+
+export default function getNetworkValidationActionText() {
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validated';
+    }
+    case 'mining': {
+      return 'mined';
+    }
+    case 'posting': {
+      return 'posted';
+    }
+    case 'sequencing': {
+      return 'sequenced';
+    }
+    default: {
+      return 'miner';
+    }
+  }
+}

lib/networks/getNetworkValidatorTitle.ts

 import config from 'configs/app';
 
 export default function getNetworkValidatorTitle() {
-  return config.chain.verificationType === 'validation' ? 'validator' : 'miner';
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validator';
+    }
+    case 'mining': {
+      return 'miner';
+    }
+    case 'posting': {
+      return 'poster';
+    }
+    case 'sequencing': {
+      return 'sequencer';
+    }
+    default: {
+      return 'miner';
+    }
+  }
 }

types/networks.ts

@@ -24,4 +24,6 @@ export interface NetworkExplorer {
   };
 }
 
-export type NetworkVerificationType = 'mining' | 'validation';
+export type NetworkVerificationTypeEnvs = 'mining' | 'validation';
+export type NetworkVerificationTypeComputed = 'posting' | 'sequencing';
+export type NetworkVerificationType = NetworkVerificationTypeEnvs | NetworkVerificationTypeComputed;

ui/address/AddressBlocksValidated.tsx

@@ -18,12 +18,14 @@ import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import SocketAlert from 'ui/shared/SocketAlert';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
+const OVERLOAD_COUNT = 75;
+
 interface Props {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
@@ -31,7 +33,9 @@ interface Props {
 }
 
 const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
-  const [ socketAlert, setSocketAlert ] = React.useState(false);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ newItemsCount, setNewItemsCount ] = React.useState(0);
+
   const queryClient = useQueryClient();
   const router = useRouter();
   const isMounted = useIsMounted();
@@ -57,11 +61,11 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
   });
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert(true);
+    setSocketAlert('An error has occurred while fetching new blocks. Please refresh the page to load new blocks.');
   }, []);
 
   const handleNewSocketMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    setSocketAlert(false);
+    setSocketAlert('');
 
     queryClient.setQueryData(
       getResourceKey('address_blocks_validated', { pathParams: { hash: addressHash } }),
@@ -70,6 +74,11 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
           return;
         }
 
+        if (prevData.items.length >= OVERLOAD_COUNT) {
+          setNewItemsCount(prev => prev + 1);
+          return prevData;
+        }
+
         return {
           ...prevData,
           items: [ payload.block, ...prevData.items ],
@@ -95,20 +104,26 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
 
   const content = query.data?.items ? (
     <>
-      { socketAlert && <SocketAlert mb={ 6 }/> }
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
+        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
           <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
-              <Th width="17%">Block</Th>
-              <Th width="17%">Age</Th>
-              <Th width="16%">Txn</Th>
-              <Th width="25%">Gas used</Th>
-              { !config.UI.views.block.hiddenFields?.total_reward &&
-              <Th width="25%" isNumeric>Reward { currencyUnits.ether }</Th> }
+              <Th>Block</Th>
+              <Th>Age</Th>
+              <Th>Txn</Th>
+              <Th>Gas used</Th>
+              { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled &&
+              <Th isNumeric>Reward { currencyUnits.ether }</Th> }
             </Tr>
           </Thead>
           <Tbody>
+            <SocketNewItemsNotice.Desktop
+              url={ window.location.href }
+              num={ newItemsCount }
+              alert={ socketAlert }
+              type="block"
+              isLoading={ query.isPlaceholderData }
+            />
             { query.data.items.map((item, index) => (
               <AddressBlocksValidatedTableItem
                 key={ item.height + (query.isPlaceholderData ? String(index) : '') }
@@ -121,6 +136,15 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
         </Table>
       </Hide>
       <Show below="lg" ssr={ false }>
+        { query.pagination.page === 1 && (
+          <SocketNewItemsNotice.Mobile
+            url={ window.location.href }
+            num={ newItemsCount }
+            alert={ socketAlert }
+            type="block"
+            isLoading={ query.isPlaceholderData }
+          />
+        ) }
         { query.data.items.map((item, index) => (
           <AddressBlocksValidatedListItem
             key={ item.height + (query.isPlaceholderData ? String(index) : '') }

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -52,7 +52,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
           isLoading={ props.isLoading }
         />
       </Flex>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
           <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>

ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx

@@ -56,7 +56,7 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
           />
         </Flex>
       </Td>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Td isNumeric display="flex" justifyContent="end">
           <Skeleton isLoaded={ !props.isLoading } display="inline-block">
             <span>{ totalReward.toFixed() }</span>

ui/block/BlockDetails.tsx

@@ -15,6 +15,7 @@ import getBlockReward from 'lib/block/getBlockReward';
 import { GWEI, WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import getArbitrumVerificationStepStatus from 'lib/getArbitrumVerificationStepStatus';
 import { space } from 'lib/html-entities';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { currencyUnits } from 'lib/units';
@@ -114,13 +115,7 @@ const BlockDetails = ({ query }: Props) => {
     );
   })();
 
-  const verificationTitle = (() => {
-    if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
-      return 'Sequenced by';
-    }
-
-    return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
-  })();
+  const verificationTitle = `${ capitalize(getNetworkValidationActionText()) } by`;
 
   const txsNum = (() => {
     const blockTxsNum = (

ui/pages/Address.tsx

@@ -11,6 +11,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -193,10 +194,10 @@ const AddressPageContent = () => {
         title: 'Coin balance history',
         component: <AddressCoinBalance shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
-      config.chain.verificationType === 'validation' && addressTabsCountersQuery.data?.validations_count ?
+      addressTabsCountersQuery.data?.validations_count ?
         {
           id: 'blocks_validated',
-          title: 'Blocks validated',
+          title: `Blocks ${ getNetworkValidationActionText() }`,
           count: addressTabsCountersQuery.data?.validations_count,
           component: <AddressBlocksValidated scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :

ui/pages/Block.tsx

 import { chakra, Skeleton } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,6 +11,7 @@ import { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import BlockDetails from 'ui/block/BlockDetails';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
@@ -149,7 +151,7 @@ const BlockPageContent = () => {
           fontWeight={ 500 }
         >
           <chakra.span flexShrink={ 0 }>
-            { config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
+            { `${ capitalize(getNetworkValidationActionText()) } by` }
           </chakra.span>
           <AddressEntity address={ blockQuery.data?.miner }/>
         </Skeleton>

ui/pages/Transactions.tsx

+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,6 +8,7 @@ import config from 'configs/app';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
@@ -27,7 +29,7 @@ const TAB_LIST_PROPS = {
 const TABS_HEIGHT = 88;
 
 const Transactions = () => {
-  const verifiedTitle = config.chain.verificationType === 'validation' ? 'Validated' : 'Mined';
+  const verifiedTitle = capitalize(getNetworkValidationActionText());
   const router = useRouter();
   const isMobile = useIsMobile();
   const tab = getQueryParamString(router.query.tab);