Add label for rollup stage index (#2733)

* "Stage" label

Fixes #2726

* update env for demo

* [skip ci] add utm to link

configs/app/features/rollup.ts

@@ -33,6 +33,7 @@ const title = 'Rollup (L2) chain';
 
 const config: Feature<{
   type: RollupType;
+  stageIndex: string | undefined;
   homepage: { showLatestBlocks: boolean };
   outputRootsEnabled: boolean;
   interopEnabled: boolean;
@@ -50,6 +51,7 @@ const config: Feature<{
       title,
       isEnabled: true,
       type,
+      stageIndex: getEnvValue('NEXT_PUBLIC_ROLLUP_STAGE_INDEX'),
       L2WithdrawalUrl: type === 'optimistic' ? L2WithdrawalUrl : undefined,
       outputRootsEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED') === 'true',
       interopEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_INTEROP_ENABLED') === 'true',

configs/envs/.env.optimism

@@ -9,6 +9,9 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_ROLLUP_STAGE_INDEX=2
+NEXT_PUBLIC_IS_TESTNET=false
+
 # Instance ENVs
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/

deploy/tools/envs-validator/schema.ts

@@ -1017,6 +1017,16 @@ const schema = yup
           value => value === undefined,
         ),
       }),
+    NEXT_PUBLIC_ROLLUP_STAGE_INDEX: yup.number().oneOf([ 1, 2 ])
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => Boolean(value),
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_STAGE_INDEX can only be used with NEXT_PUBLIC_ROLLUP_TYPE',
+          value => value === undefined,
+        ),
+      }),
     NEXT_PUBLIC_DEX_POOLS_ENABLED: yup.boolean()
       .when('NEXT_PUBLIC_CONTRACT_INFO_API_HOST', {
         is: (value: string) => Boolean(value),

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

@@ -5,4 +5,5 @@ NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
 NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
 NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=false
 NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://explorer.duckchain.io'}
-NEXT_PUBLIC_INTEROP_ENABLED=true
+NEXT_PUBLIC_INTEROP_ENABLED=true
\ No newline at end of file
+NEXT_PUBLIC_ROLLUP_STAGE_INDEX=1
\ No newline at end of file

docs/ENVS.md

@@ -463,6 +463,7 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 | NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' \| 'scroll'` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
 | NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
 | NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_STAGE_INDEX | `1 \| 2` | Reflects the maturity and decentralization level of the chain based on [L2BEAT's framework](https://medium.com/l2beat/introducing-stages-a-framework-to-evaluate-rollups-maturity-d290bb22befe). The label will be added to the sidebar according to the provided stage index. Not applicable for testnets. | - | - | `1` | v2.1.0+ |
 | NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
 | NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
 | NEXT_PUBLIC_INTEROP_ENABLED | `boolean` | Enables "Interop messages" page (Optimistic stack only)  | - | `false` | `true` | v1.39.0+ |

icons/rollup/stage-1.svg

+<svg viewBox="0 0 42 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x=".2" y=".2" width="41.6" height="13.6" rx="3.8" stroke="currentColor" stroke-width=".4"/>
+  <path d="M37.398 3.718v6.545h-.991V4.708h-.038l-1.566 1.023v-.946l1.633-1.067h.962ZM28.302 10.263V3.718h4.104v.85H29.29v1.994h2.902v.847H29.29v2.004h3.154v.85h-4.142ZM25.896 5.785a1.995 1.995 0 0 0-.249-.52 1.593 1.593 0 0 0-.857-.65 1.966 1.966 0 0 0-.597-.086 1.81 1.81 0 0 0-.997.285c-.297.19-.53.468-.704.834-.17.364-.255.81-.255 1.34s.086.978.259 1.345c.172.366.409.644.71.834.3.19.642.284 1.025.284.356 0 .666-.072.93-.217.266-.145.472-.35.617-.614.147-.266.22-.58.22-.94l.256.049h-1.873v-.815h2.573v.744c0 .55-.117 1.027-.351 1.432a2.394 2.394 0 0 1-.966.933c-.409.22-.878.33-1.406.33-.592 0-1.112-.137-1.56-.41a2.772 2.772 0 0 1-1.041-1.16c-.25-.502-.374-1.1-.374-1.79 0-.521.072-.99.217-1.406.145-.415.348-.768.61-1.058.265-.291.575-.514.93-.668a2.912 2.912 0 0 1 1.173-.233c.354 0 .683.052.988.157.307.104.58.252.818.444a2.515 2.515 0 0 1 .917 1.556h-1.013ZM16.115 10.263h-1.048l2.355-6.545h1.141l2.356 6.545H19.87l-1.85-5.356h-.051l-1.854 5.356Zm.176-2.563h3.4v.83h-3.4V7.7ZM10.203 4.568v-.85h5.065v.85h-2.042v5.695h-.984V4.568h-2.04ZM8.431 5.437a.934.934 0 0 0-.421-.703c-.248-.168-.559-.252-.934-.252-.268 0-.5.042-.696.127a1.073 1.073 0 0 0-.457.346.815.815 0 0 0-.16.495c0 .155.036.29.108.403a.975.975 0 0 0 .291.284c.122.075.252.137.39.189.139.049.272.09.4.121l.639.166c.209.051.423.12.642.208.22.087.423.202.61.345.188.143.34.32.454.53.118.212.176.464.176.758 0 .37-.096.7-.287.988-.19.287-.466.514-.828.68-.36.167-.796.25-1.307.25-.49 0-.914-.078-1.272-.233a1.959 1.959 0 0 1-.84-.662 1.918 1.918 0 0 1-.336-1.023h.99c.02.237.096.434.23.591.137.156.31.272.521.349.213.074.447.112.7.112.28 0 .528-.044.745-.131.22-.09.392-.213.518-.371a.878.878 0 0 0 .188-.56.686.686 0 0 0-.166-.476 1.228 1.228 0 0 0-.444-.306 4.342 4.342 0 0 0-.63-.215l-.773-.21c-.524-.143-.94-.353-1.247-.63-.304-.277-.457-.644-.457-1.1 0-.377.103-.706.307-.987.205-.281.482-.5.831-.655.35-.158.744-.237 1.183-.237.443 0 .834.078 1.173.233.34.156.609.37.805.643.196.27.298.582.307.933H8.43Z" fill="currentColor"/>
+</svg>

icons/rollup/stage-2.svg

+<svg viewBox="0 0 42 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x=".2" y=".2" width="41.6" height="13.6" rx="3.8" stroke="currentColor" stroke-width=".4"/>
+  <path d="M33.949 10.263v-.716l2.215-2.295c.236-.249.431-.467.585-.655.155-.19.271-.37.348-.54.077-.17.115-.351.115-.543a1.01 1.01 0 0 0-.153-.563 1.002 1.002 0 0 0-.419-.367 1.332 1.332 0 0 0-.598-.131c-.234 0-.439.048-.613.144a.985.985 0 0 0-.403.405c-.094.175-.14.38-.14.614h-.943c0-.398.091-.747.275-1.045.183-.298.434-.53.754-.694.32-.166.683-.249 1.09-.249.41 0 .773.082 1.086.246.316.162.562.384.738.665.177.28.266.595.266.946 0 .243-.046.48-.138.713-.09.232-.246.49-.47.776-.223.284-.534.628-.933 1.033l-1.3 1.361v.048h2.946v.847H33.95ZM27.443 10.263V3.718h4.103v.85H28.43v1.994h2.902v.847H28.43v2.004h3.155v.85h-4.142ZM25.036 5.785a1.998 1.998 0 0 0-.249-.52 1.593 1.593 0 0 0-.856-.65 1.967 1.967 0 0 0-.598-.086 1.81 1.81 0 0 0-.997.285c-.296.19-.53.468-.703.834-.17.364-.256.81-.256 1.34s.086.978.259 1.345c.172.366.409.644.71.834.3.19.642.284 1.025.284.356 0 .666-.072.93-.217.267-.145.472-.35.617-.614.147-.266.22-.58.22-.94l.256.049h-1.872v-.815h2.572v.744c0 .55-.117 1.027-.351 1.432a2.393 2.393 0 0 1-.965.933c-.41.22-.878.33-1.407.33-.592 0-1.112-.137-1.56-.41a2.773 2.773 0 0 1-1.041-1.16c-.25-.502-.374-1.1-.374-1.79 0-.521.072-.99.217-1.406.145-.415.348-.768.61-1.058.265-.291.575-.514.93-.668a2.911 2.911 0 0 1 1.174-.233c.353 0 .682.052.987.157.307.104.58.252.818.444a2.516 2.516 0 0 1 .917 1.556h-1.013ZM15.255 10.263h-1.048l2.355-6.545h1.141l2.356 6.545H19.01l-1.85-5.356h-.052l-1.854 5.356Zm.176-2.563h3.4v.83h-3.4V7.7ZM9.38 4.568v-.85h5.067v.85h-2.043v5.695h-.984V4.568H9.38ZM7.572 5.437a.934.934 0 0 0-.422-.703c-.248-.168-.559-.252-.934-.252-.268 0-.5.042-.696.127a1.073 1.073 0 0 0-.457.346.815.815 0 0 0-.16.495c0 .155.036.29.109.403a.975.975 0 0 0 .29.284c.122.075.252.137.39.189a4.4 4.4 0 0 0 .4.121l.639.166c.209.051.423.12.642.208.22.087.423.202.61.345a1.537 1.537 0 0 1 .63 1.288c0 .37-.095.7-.287.988-.19.287-.466.514-.828.68-.36.167-.796.25-1.307.25-.49 0-.914-.078-1.272-.233a1.959 1.959 0 0 1-.84-.662 1.918 1.918 0 0 1-.336-1.023h.99c.02.237.096.434.23.591.137.156.31.272.522.349.213.074.446.112.7.112.279 0 .527-.044.744-.131.22-.09.392-.213.518-.371a.878.878 0 0 0 .188-.56.686.686 0 0 0-.166-.476 1.228 1.228 0 0 0-.444-.306 4.342 4.342 0 0 0-.63-.215l-.773-.21c-.524-.143-.94-.353-1.247-.63-.304-.277-.457-.644-.457-1.1 0-.377.103-.706.307-.987.205-.281.482-.5.831-.655.35-.158.744-.237 1.183-.237.443 0 .834.078 1.173.233.34.156.61.37.805.643.196.27.298.582.307.933h-.952Z" fill="currentColor"/>
+</svg>

public/icons/name.d.ts

@@ -131,6 +131,8 @@
 	| "restAPI"
 	| "rocket_xl"
 	| "rocket"
+	| "rollup/stage-1"
+	| "rollup/stage-2"
 	| "RPC"
 	| "scope"
 	| "score/score-not-ok"

ui/snippets/header/Burger.tsx

@@ -7,6 +7,7 @@ import { IconButton } from 'toolkit/chakra/icon-button';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
+import RollupStageBadge from 'ui/snippets/navigation/RollupStageBadge';
 import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
@@ -50,6 +51,7 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
       <DrawerContent >
         <DrawerBody display="flex" flexDirection="column" overflowX="hidden" overflowY="auto">
           <TestnetBadge alignSelf="flex-start"/>
+          <RollupStageBadge alignSelf="flex-start"/>
           <Flex alignItems="center" justifyContent="space-between">
             <NetworkLogo onClick={ handleNetworkLogoClick }/>
             { config.UI.navigation.featuredNetworks ? (

ui/snippets/navigation/RollupStageBadge.tsx

+import type { HTMLChakraProps } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import IconSvg from 'ui/shared/IconSvg';
+
+const feature = config.features.rollup;
+
+const RollupStageBadge = (props: HTMLChakraProps<'div'>) => {
+  if (!feature.isEnabled || config.chain.isTestnet) {
+    return null;
+  }
+
+  switch (feature.stageIndex) {
+    case '1':
+    case '2': {
+      const tooltipContent = (
+        <>
+          The decentralization and maturity of the chain. Learn more at{ ' ' }
+          <Link href="https://l2beat.com?utm_source=blockscout&utm_medium=explorer" external>
+            l2beat.com
+          </Link>
+        </>
+      );
+
+      return (
+        <Tooltip content={ tooltipContent } interactive>
+          <IconSvg
+            name={ feature.stageIndex === '1' ? 'rollup/stage-1' : 'rollup/stage-2' }
+            h="14px"
+            w="42px"
+            color={ feature.stageIndex === '1' ? 'yellow.500' : 'green.400' }
+            { ...props }
+          />
+        </Tooltip>
+      );
+    }
+    default:
+      return null;
+  }
+};
+
+export default React.memo(RollupStageBadge);

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -9,6 +9,7 @@ import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
+import RollupStageBadge from '../RollupStageBadge';
 import TestnetBadge from '../TestnetBadge';
 import NavLink from './NavLink';
 import NavLinkGroup from './NavLinkGroup';
@@ -28,6 +29,7 @@ const NavigationDesktop = () => {
       >
         <NetworkLogo isCollapsed={ false } w={{ lg: '100%' }} maxW="120px"/>
         <TestnetBadge ml={ 3 }/>
+        <RollupStageBadge ml={ 3 }/>
         <chakra.nav ml="auto" mr={ config.features.account.isEnabled || config.features.blockchainInteraction.isEnabled ? 8 : 0 }>
           <Flex as="ul" columnGap={ 3 }>
             { mainNavItems.map((item) => {

ui/snippets/navigation/vertical/NavigationDesktop.tsx

@@ -8,6 +8,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 
+import RollupStageBadge from '../RollupStageBadge';
 import TestnetBadge from '../TestnetBadge';
 import NavLink from './NavLink';
 import NavLinkGroup from './NavLinkGroup';
@@ -63,6 +64,7 @@ const NavigationDesktop = () => {
       transitionTimingFunction="ease"
     >
       <TestnetBadge position="absolute" pl={ 3 } w="49px" top="34px"/>
+      <RollupStageBadge position="absolute" ml={{ lg: isExpanded ? 3 : '10px', xl: isCollapsed ? '10px' : 3 }} top="34px"/>
       <Box
         as="header"
         display="flex"