Suave field rename and ENV for hiding indexing alert in the header (#1312)

* Suave chain: rename "Computor" to "Kettle"

Fixes #1311

* ENV for hiding indexing alert in the header

configs/app/ui.ts

@@ -53,7 +53,12 @@ const UI = Object.freeze({
   },
   views,
   indexingAlert: {
-    isHidden: getEnvValue('NEXT_PUBLIC_HIDE_INDEXING_ALERT'),
+    blocks: {
+      isHidden: getEnvValue('NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS') === 'true' ? true : false,
+    },
+    intTxs: {
+      isHidden: getEnvValue('NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS') === 'true' ? true : false,
+    },
   },
   maintenanceAlert: {
     message: getEnvValue('NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE'),

deploy/tools/envs-validator/schema.ts

@@ -408,7 +408,8 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(networkExplorerSchema),
-    NEXT_PUBLIC_HIDE_INDEXING_ALERT: yup.boolean(),
+    NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
+    NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
 
     // 5. Features configuration

deploy/tools/envs-validator/test/.env.base

@@ -13,7 +13,8 @@ NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://example.com
 NEXT_PUBLIC_FEATURED_NETWORKS=https://example.com
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_HIDE_INDEXING_ALERT=false
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff'
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgb(255, 145, 0)'

docs/ENVS.md

@@ -252,7 +252,8 @@ Settings for meta tags and OG tags
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | 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_HIDE_INDEXING_ALERT | `boolean` | Set to `true` to hide indexing alert, if the chain indexing isn't completed | - | `false` | `true` |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` |
 | NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` |
 
 #### Network explorer configuration properties
@@ -515,7 +516,7 @@ For the smart contract addresses which are [Safe{Core} accounts](https://safe.gl
 
 ### SUAVE chain
 
-For blockchains that implementing SUAVE architecture additional fields will be shown on the transaction page ("Allowed peekers", "Computor"). Users also will be able to see the list of all transaction for a particular Computor in the separate view.
+For blockchains that implementing SUAVE architecture additional fields will be shown on the transaction page ("Allowed peekers", "Kettle"). Users also will be able to see the list of all transaction for a particular Kettle in the separate view.
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |

lib/metadata/getPageOgType.ts

@@ -5,7 +5,7 @@ type OGPageType = 'Homepage' | 'Root page' | 'Regular page';
 const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/': 'Homepage',
   '/txs': 'Root page',
-  '/txs/computor/[hash]': 'Regular page',
+  '/txs/kettle/[hash]': 'Regular page',
   '/tx/[hash]': 'Regular page',
   '/blocks': 'Root page',
   '/block/[height_or_hash]': 'Regular page',

lib/metadata/templates/description.ts

@@ -8,7 +8,7 @@ const DEFAULT_TEMPLATE = 'Blockscout is the #1 open-source blockchain explorer a
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/': DEFAULT_TEMPLATE,
   '/txs': DEFAULT_TEMPLATE,
-  '/txs/computor/[hash]': DEFAULT_TEMPLATE,
+  '/txs/kettle/[hash]': DEFAULT_TEMPLATE,
   '/tx/[hash]': 'View transaction %hash% on %network_title%',
   '/blocks': DEFAULT_TEMPLATE,
   '/block/[height_or_hash]': 'View the transactions, token transfers, and uncles for block %height_or_hash%',

lib/metadata/templates/title.ts

@@ -3,7 +3,7 @@ import type { Route } from 'nextjs-routes';
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/': 'blockchain explorer',
   '/txs': 'transactions',
-  '/txs/computor/[hash]': 'computor %hash% transactions',
+  '/txs/kettle/[hash]': 'kettle %hash% transactions',
   '/tx/[hash]': 'transaction %hash%',
   '/blocks': 'blocks',
   '/block/[height_or_hash]': 'block %height_or_hash%',

lib/mixpanel/getPageType.ts

@@ -3,7 +3,7 @@ import type { Route } from 'nextjs-routes';
 export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/': 'Homepage',
   '/txs': 'Transactions',
-  '/txs/computor/[hash]': 'Computor transactions',
+  '/txs/kettle/[hash]': 'Kettle transactions',
   '/tx/[hash]': 'Transaction details',
   '/blocks': 'Blocks',
   '/block/[height_or_hash]': 'Block details',

nextjs/nextjs-routes.d.ts

@@ -42,8 +42,8 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
-    | DynamicRoute<"/txs/computor/[hash]", { "hash": string }>
     | StaticRoute<"/txs">
+    | DynamicRoute<"/txs/kettle/[hash]", { "hash": string }>
     | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">
     | StaticRoute<"/withdrawals">

pages/txs/computor/[hash].tsx → pages/txs/kettle/[hash].tsx

@@ -5,12 +5,12 @@ import React from 'react';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
-const ComputorTxs = dynamic(() => import('ui/pages/ComputorTxs'), { ssr: false });
+const KettleTxs = dynamic(() => import('ui/pages/KettleTxs'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/txs/computor/[hash]" query={ props }>
-      <ComputorTxs/>
+    <PageNextJs pathname="/txs/kettle/[hash]" query={ props }>
+      <KettleTxs/>
     </PageNextJs>
   );
 };

ui/pages/ComputorTxs.tsx → ui/pages/KettleTxs.tsx

@@ -9,7 +9,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxsContent from 'ui/txs/TxsContent';
 
-const ComputorTxs = () => {
+const KettleTxs = () => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -39,4 +39,4 @@ const ComputorTxs = () => {
   );
 };
 
-export default ComputorTxs;
+export default KettleTxs;

ui/snippets/footer/Footer.tsx

@@ -117,7 +117,7 @@ const Footer = () => {
       <Box flexGrow="1" mb={{ base: 8, lg: 0 }}>
         <Flex flexWrap="wrap" columnGap={ 8 } rowGap={ 6 }>
           <ColorModeToggler/>
-          { !config.UI.indexingAlert.isHidden && <IntTxsIndexingStatus/> }
+          { !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> }
           <NetworkAddToWallet/>
         </Flex>
         <Box mt={{ base: 5, lg: '44px' }}>

ui/snippets/header/alerts/IndexingBlocksAlert.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { SocketMessage } from 'lib/socket/types';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 
+import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
@@ -17,7 +18,11 @@ const IndexingBlocksAlert = () => {
   const cookiesString = appProps.cookies;
   const [ hasAlertCookie ] = React.useState(cookies.get(cookies.NAMES.INDEXING_ALERT, cookiesString) === 'true');
 
-  const { data, isError, isLoading } = useApiQuery('homepage_indexing_status');
+  const { data, isError, isLoading } = useApiQuery('homepage_indexing_status', {
+    queryOptions: {
+      enabled: !config.UI.indexingAlert.blocks.isHidden,
+    },
+  });
 
   React.useEffect(() => {
     if (!isLoading && !isError) {
@@ -40,7 +45,7 @@ const IndexingBlocksAlert = () => {
 
   const blockIndexingChannel = useSocketChannel({
     topic: 'blocks:indexing',
-    isDisabled: !data || data.finished_indexing_blocks,
+    isDisabled: !data || data.finished_indexing_blocks || config.UI.indexingAlert.blocks.isHidden,
   });
 
   useSocketMessage({
@@ -49,12 +54,16 @@ const IndexingBlocksAlert = () => {
     handler: handleBlocksIndexStatus,
   });
 
+  if (config.UI.indexingAlert.blocks.isHidden) {
+    return null;
+  }
+
   if (isError) {
     return null;
   }
 
   if (isLoading) {
-    return hasAlertCookie ? <Skeleton h={{ base: '96px', lg: '48px' }} mb={ 6 } w="100%"/> : null;
+    return hasAlertCookie ? <Skeleton h={{ base: '96px', lg: '48px' }} w="100%"/> : null;
   }
 
   if (data.finished_indexing_blocks !== false) {

ui/tx/TxDetails.tsx

@@ -225,13 +225,13 @@ const TxDetails = () => {
         ) }
         { data.execution_node && (
           <DetailsInfoItem
-            title="Computor"
+            title="Kettle"
             hint="Node that carried out the confidential computation"
             isLoading={ isPlaceholderData }
           >
             <AddressEntity
               address={ data.execution_node }
-              href={ route({ pathname: '/txs/computor/[hash]', query: { hash: data.execution_node.hash } }) }
+              href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
             />
           </DetailsInfoItem>
         ) }