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,19 +202,21 @@ const BlockDetails = ({ query }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      <DetailsInfoItem
-        title={ verificationTitle }
-        hint="A block producer who successfully included the block onto the blockchain"
-        columnGap={ 1 }
-        isLoading={ isPlaceholderData }
-      >
-        <AddressEntity
-          address={ data.miner }
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <DetailsInfoItem
+          title={ verificationTitle }
+          hint="A block producer who successfully included the block onto the blockchain"
+          columnGap={ 1 }
           isLoading={ isPlaceholderData }
-        />
-        { /* api doesn't return the block processing time yet */ }
-        { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
-      </DetailsInfoItem>
+        >
+          <AddressEntity
+            address={ data.miner }
+            isLoading={ isPlaceholderData }
+          />
+          { /* 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,13 +57,15 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <span>{ data.size.toLocaleString() } bytes</span>
         </Skeleton>
       </Flex>
-      <Flex columnGap={ 2 } w="100%">
-        <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
-        <AddressEntity
-          address={ data.miner }
-          isLoading={ isLoading }
-        />
-      </Flex>
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <Flex columnGap={ 2 } w="100%">
+          <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
+          <AddressEntity
+            address={ data.miner }
+            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>
-      <Td fontSize="sm">
-        <AddressEntity
-          address={ data.miner }
-          isLoading={ isLoading }
-        />
-      </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,20 +116,22 @@ const BlockPageContent = () => {
   const title = blockQuery.data?.type === 'reorg' ? `Reorged block #${ blockQuery.data?.height }` : `Block #${ blockQuery.data?.height }`;
   const titleSecondRow = (
     <>
-      <Skeleton
-        isLoaded={ !blockQuery.isPlaceholderData }
-        fontFamily="heading"
-        display="flex"
-        minW={ 0 }
-        columnGap={ 2 }
-        fontWeight={ 500 }
-      >
-        <chakra.span flexShrink={ 0 }>
-          { config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
-        </chakra.span>
-        <AddressEntity address={ blockQuery.data?.miner }/>
-      </Skeleton>
-      <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: 3, lg: 'auto' }}/>
+      { !config.UI.views.block.hiddenFields?.miner && (
+        <Skeleton
+          isLoaded={ !blockQuery.isPlaceholderData }
+          fontFamily="heading"
+          display="flex"
+          minW={ 0 }
+          columnGap={ 2 }
+          fontWeight={ 500 }
+        >
+          <chakra.span flexShrink={ 0 }>
+            { config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
+          </chakra.span>
+          <AddressEntity address={ blockQuery.data?.miner }/>
+        </Skeleton>
+      ) }
+      <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>
+        <SearchBar isHomepage/>
       </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 }}