Update SearchBar background color and hide miner field in block views (#1397)

* update SearchBar background color on home page

* add miner field to NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS variable supported values

docs/ENVS.md

@@ -188,6 +188,7 @@ Settings for meta tags and OG tags
 | `burnt_fees` | Burnt fees |
 | `total_reward` | Total block reward |
 | `nonce` | Block nonce |
+| `miner` | Address of block's miner or validator |
 
  
 

types/views/block.ts

@@ -4,6 +4,7 @@ export const BLOCK_FIELDS_IDS = [
   'burnt_fees',
   'total_reward',
   'nonce',
+  'miner',
 ] as const;
 
 export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>;

ui/block/BlockDetails.tsx

@@ -202,6 +202,7 @@ const BlockDetails = ({ query }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
+      { !config.UI.views.block.hiddenFields?.miner && (
         <DetailsInfoItem
           title={ verificationTitle }
           hint="A block producer who successfully included the block onto the blockchain"
@@ -215,6 +216,7 @@ const BlockDetails = ({ query }: Props) => {
           { /* api doesn't return the block processing time yet */ }
           { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
         </DetailsInfoItem>
+      ) }
       { !isRollup && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
         <DetailsInfoItem
           title="Block reward"

ui/blocks/BlocksListItem.tsx

@@ -57,6 +57,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <span>{ data.size.toLocaleString() } bytes</span>
         </Skeleton>
       </Flex>
+      { !config.UI.views.block.hiddenFields?.miner && (
         <Flex columnGap={ 2 } w="100%">
           <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
           <AddressEntity
@@ -64,6 +65,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             isLoading={ isLoading }
           />
         </Flex>
+      ) }
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Txn</Text>
         { data.tx_count > 0 ? (

ui/blocks/BlocksTable.tsx

@@ -42,7 +42,8 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size, bytes</Th>
-          <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th>
+          { !config.UI.views.block.hiddenFields?.miner &&
+            <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th> }
           <Th width="64px" isNumeric>Txn</Th>
           <Th width={ `${ GAS_COL_WEIGHT / widthBase * 100 }%` }>Gas used</Th>
           { !isRollup && !config.UI.views.block.hiddenFields?.total_reward &&

ui/blocks/BlocksTableItem.tsx

@@ -66,12 +66,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           { data.size.toLocaleString() }
         </Skeleton>
       </Td>
+      { !config.UI.views.block.hiddenFields?.miner && (
         <Td fontSize="sm">
           <AddressEntity
             address={ data.miner }
             isLoading={ isLoading }
           />
         </Td>
+      ) }
       <Td isNumeric fontSize="sm">
         { data.tx_count > 0 ? (
           <Skeleton isLoaded={ !isLoading } display="inline-block">

ui/home/LatestBlocksItem.tsx

@@ -66,7 +66,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
           </>
         ) }
 
-        { !config.features.optimisticRollup.isEnabled && (
+        { !config.features.optimisticRollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && (
           <>
             <Skeleton isLoaded={ !isLoading } textTransform="capitalize">{ getNetworkValidatorTitle() }</Skeleton>
             <AddressEntity

ui/pages/Block.tsx

@@ -116,6 +116,7 @@ const BlockPageContent = () => {
   const title = blockQuery.data?.type === 'reorg' ? `Reorged block #${ blockQuery.data?.height }` : `Block #${ blockQuery.data?.height }`;
   const titleSecondRow = (
     <>
+      { !config.UI.views.block.hiddenFields?.miner && (
         <Skeleton
           isLoaded={ !blockQuery.isPlaceholderData }
           fontFamily="heading"
@@ -129,7 +130,8 @@ const BlockPageContent = () => {
           </chakra.span>
           <AddressEntity address={ blockQuery.data?.miner }/>
         </Skeleton>
-      <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: 3, lg: 'auto' }}/>
+      ) }
+      <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: config.UI.views.block.hiddenFields?.miner ? 0 : 3, lg: 'auto' }}/>
     </>
   );
 

ui/pages/Home.tsx

-import { Box, Heading, Flex, LightMode } from '@chakra-ui/react';
+import { Box, Heading, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -30,15 +30,13 @@ const Home = () => {
             fontWeight={ 600 }
             color={ config.UI.homepage.plate.textColor }
           >
-            Welcome to { config.chain.name } explorer
+            { config.chain.name } explorer
           </Heading>
           <Box display={{ base: 'none', lg: 'block' }}>
             { config.features.account.isEnabled && <ProfileMenuDesktop/> }
           </Box>
         </Flex>
-        <LightMode>
         <SearchBar isHomepage/>
-        </LightMode>
       </Box>
       <Stats/>
       <ChainIndicators/>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -68,7 +68,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       onBlur={ onBlur }
       onFocus={ onFocus }
       w="100%"
-      backgroundColor={ isHomepage ? 'white' : bgColor }
+      backgroundColor={ bgColor }
       borderRadius={{ base: isHomepage ? 'base' : 'none', lg: 'base' }}
       position={{ base: isHomepage ? 'static' : 'fixed', lg: 'static' }}
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}