Merge pull request #259 from blockscout/consensus

verification type in config

.env.template

@@ -16,6 +16,7 @@ NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_CURREN
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS__
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS__
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED__
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=__PLACEHOLDER_FOR_NEXT_PUBLIC_BLOCKSCOUT_VERSION__

README.md

@@ -69,6 +69,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` *(optional)* | Link to staking dashboard in the footer | `https://duneanalytics.com/maxaleks/xdai-staking` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | `https://airtable.com/shrqUAcjgGJ4jU88C` |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers.  | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
+| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` *(optional)* | Verification type in the network | `mining` |
 
 ### App configuration
 

configs/app/config.ts

@@ -29,6 +29,7 @@ const config = Object.freeze({
     nativeTokenAddress: process.env.NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS,
     basePath: '/' + [ process.env.NEXT_PUBLIC_NETWORK_TYPE, process.env.NEXT_PUBLIC_NETWORK_SUBTYPE ].filter(Boolean).join('/'),
     explorers: process.env.NEXT_PUBLIC_NETWORK_EXPLORERS?.replaceAll('\'', '"'),
+    verificationType: process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE || 'mining',
   },
   footerLinks: {
     github: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK,

configs/envs/.env.poa_core

@@ -16,6 +16,7 @@ NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=POA
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=0x029a799563238d0e75e20be2f4bda0ea68d00172
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 
 # api config
 NEXT_PUBLIC_API_BASE_PATH=/poa/core

deploy/values/e2e/values.yaml

@@ -315,6 +315,8 @@ frontend:
       _default: SPOA
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
       _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

deploy/values/main/values.yaml

@@ -307,10 +307,21 @@ frontend:
       _default: 77
     NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
       _default: POA Network Sokol
+    
+    
+    
+    
+    
+    
+    
+    
+    
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
       _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

deploy/values/review/values.yaml

@@ -311,6 +311,8 @@ frontend:
       _default: SPOA
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
       _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

lib/networks/getNetworkValidatorTitle.ts

+import appConfig from 'configs/app/config';
+
+export default function getNetworkValidatorTitle() {
+  return appConfig.network.verificationType === 'validation' ? 'validator' : 'miner';
+}

types/networks.ts

@@ -16,3 +16,5 @@ export interface NetworkExplorer {
     tx: string;
   };
 }
+
+export type NetworkVerificationType = 'mining' | 'validation';

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -18,6 +19,7 @@ import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 import { space } from 'lib/html-entities';
 import link from 'lib/link/link';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockDetailsSkeleton from 'ui/block/details/BlockDetailsSkeleton';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -70,6 +72,8 @@ const BlockDetails = () => {
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
   const { totalReward, staticReward, burntFees, txFees } = getBlockReward(data);
 
+  const validatorTitle = getNetworkValidatorTitle();
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
       <DetailsInfoItem
@@ -110,12 +114,12 @@ const BlockDetails = () => {
         </Link>
       </DetailsInfoItem>
       <DetailsInfoItem
-        title="Mined by"
+        title={ appConfig.network.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
         hint="A block producer who successfully included the block onto the blockchain."
         columnGap={ 1 }
       >
         <AddressLink hash={ data.miner.hash }/>
-        { data.miner.name && <Text>(Miner: { data.miner.name })</Text> }
+        { data.miner.name && <Text>{ `(${ capitalize(validatorTitle) }: ${ data.miner.name })` }</Text> }
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
@@ -123,7 +127,7 @@ const BlockDetails = () => {
         <DetailsInfoItem
           title="Block reward"
           hint={
-            `For each block, the miner is rewarded with a finite amount of ${ appConfig.network.currency.symbol || 'native token' }
+            `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ appConfig.network.currency.symbol || 'native token' } 
           on top of the fees paid for all transactions in the block.`
           }
           columnGap={ 1 }
@@ -219,7 +223,7 @@ const BlockDetails = () => {
       { /* api doesn't support extra data yet */ }
       { /* <DetailsInfoItem
         title="Extra data"
-        hint="Any data that can be included by the miner in the block."
+        hint={ `Any data that can be included by the ${ validatorTitle } in the block.` }
       >
         <Text whiteSpace="pre">{ data.extra_data } </Text>
         <Text variant="secondary">(Hex: { data.extra_data })</Text>
@@ -248,7 +252,7 @@ const BlockDetails = () => {
 
           <DetailsInfoItem
             title="Difficulty"
-            hint="Block difficulty for miner, used to calibrate block generation time."
+            hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time.` }
           >
             { BigNumber(data.difficulty).toFormat() }
           </DetailsInfoItem>
@@ -300,7 +304,8 @@ const BlockDetails = () => {
               <DetailsInfoItem
                 key={ type }
                 title={ type }
-                hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
+                // is this text correct for validators?
+                hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees.` }
               >
                 { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
               </DetailsInfoItem>

ui/blocks/BlocksListItem.tsx

 import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -10,6 +11,7 @@ import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import link from 'lib/link/link';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -43,7 +45,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
         <Text variant="secondary">{ data.size.toLocaleString('en') } bytes</Text>
       </Flex>
       <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Miner</Text>
+        <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
         <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant"/>
       </Flex>
       <Flex columnGap={ 2 }>

ui/blocks/BlocksTable.tsx

 import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
 
 import appConfig from 'configs/app/config';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
 
 interface Props {
@@ -19,7 +21,7 @@ const BlocksTable = ({ data }: Props) => {
           <Tr>
             <Th width="125px">Block</Th>
             <Th width="120px">Size</Th>
-            <Th width="21%" minW="144px">Miner</Th>
+            <Th width="21%" minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
             <Th width="64px" isNumeric>Txn</Th>
             <Th width="35%">Gas used</Th>
             <Th width="22%">Reward { appConfig.network.currency.symbol }</Th>

ui/pages/Transactions.tsx

@@ -5,19 +5,21 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import appConfig from 'configs/app/config';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 import TxsPending from 'ui/txs/TxsPending';
 import TxsValidated from 'ui/txs/TxsValidated';
 
-const TABS: Array<RoutedTab> = [
-  { id: 'validated', title: 'Validated', component: <TxsValidated/> },
-  { id: 'pending', title: 'Pending', component: <TxsPending/> },
-];
-
 const Transactions = () => {
 
+  const verifiedTitle = appConfig.network.verificationType === 'validation' ? 'Validated' : 'Mined';
+  const TABS: Array<RoutedTab> = [
+    { id: 'validated', title: verifiedTitle, component: <TxsValidated/> },
+    { id: 'pending', title: 'Pending', component: <TxsPending/> },
+  ];
+
   return (
     <Page>
       <Box h="100%">

ui/tx/state/TxStateListItem.tsx

 import { AccordionItem, AccordionButton, AccordionIcon, Button, Box, Flex, Text, Link, StatArrow, Stat, AccordionPanel } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type ArrayElement from 'types/utils/ArrayElement';
@@ -6,6 +7,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import appConfig from 'configs/app/config';
 import type { data } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -60,7 +62,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
             ) }
             <Flex rowGap={ 2 } flexDir="column" fontSize="sm" whiteSpace="pre" fontWeight={ 500 }>
               <Box>
-                <Text as="span">Miner </Text>
+                <Text as="span">{ capitalize(getNetworkValidatorTitle()) }</Text>
                 <Link>{ miner }</Link>
               </Box>
               <Box>

ui/tx/state/TxStateTable.tsx

@@ -6,10 +6,12 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
 import { data } from 'data/txState';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 const TxStateTable = () => {
@@ -20,7 +22,7 @@ const TxStateTable = () => {
           <Tr>
             <Th width="92px">Storage</Th>
             <Th width="146px">Address</Th>
-            <Th width="120px">Miner</Th>
+            <Th width="120px">{ capitalize(getNetworkValidatorTitle()) }</Th>
             <Th width="33%" isNumeric>{ `After ${ appConfig.network.currency.symbol }` }</Th>
             <Th width="33%" isNumeric>{ `Before ${ appConfig.network.currency.symbol }` }</Th>
             <Th width="33%" isNumeric>{ `State difference ${ appConfig.network.currency.symbol }` }</Th>