change variable names

configs/app/ui.ts

@@ -24,8 +24,8 @@ const hiddenLinks = (() => {
   return result;
 })();
 
-const lightningLabels = (() => {
-  const parsedValue = parseEnvJson<Array<NavigationLinkId>>(getEnvValue('NEXT_PUBLIC_MENU_LIGHTNING_LABELS'));
+const highlightedRoutes = (() => {
+  const parsedValue = parseEnvJson<Array<NavigationLinkId>>(getEnvValue('NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES'));
   return Array.isArray(parsedValue) ? parsedValue : [];
 })();
 
@@ -48,7 +48,7 @@ const UI = Object.freeze({
       dark: getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK'),
     },
     hiddenLinks,
-    lightningLabels,
+    highlightedRoutes,
     otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue('NEXT_PUBLIC_OTHER_LINKS')) || [],
     featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS'),
   },

configs/envs/.env.eth_sepolia

@@ -33,7 +33,7 @@ NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/front
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
 NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
-NEXT_PUBLIC_MENU_LIGHTNING_LABELS=['/blocks','/apps']
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/blocks','/apps']
 ## footer
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
 ##views

configs/envs/.env.main

@@ -28,7 +28,7 @@ NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/goerli.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/goerli.svg
-NEXT_PUBLIC_MENU_LIGHTNING_LABELS=['/accounts','/apps']
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/accounts','/apps']
 ## footer
 ##views
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]

deploy/tools/envs-validator/schema.ts

@@ -528,15 +528,15 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(yup.string<NavigationLinkId>().oneOf(NAVIGATION_LINK_IDS)),
-    NEXT_PUBLIC_NETWORK_LOGO: yup.string().test(urlTest),
-    NEXT_PUBLIC_NETWORK_LOGO_DARK: yup.string().test(urlTest),
-    NEXT_PUBLIC_NETWORK_ICON: yup.string().test(urlTest),
-    NEXT_PUBLIC_NETWORK_ICON_DARK: yup.string().test(urlTest),
-    NEXT_PUBLIC_MENU_LIGHTNING_LABELS: yup
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: yup
       .array()
       .transform(replaceQuotes)
       .json()
       .of(yup.string()),
+    NEXT_PUBLIC_NETWORK_LOGO: yup.string().test(urlTest),
+    NEXT_PUBLIC_NETWORK_LOGO_DARK: yup.string().test(urlTest),
+    NEXT_PUBLIC_NETWORK_ICON: yup.string().test(urlTest),
+    NEXT_PUBLIC_NETWORK_ICON_DARK: yup.string().test(urlTest),
 
     //     c. footer
     NEXT_PUBLIC_FOOTER_LINKS: yup

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

@@ -26,7 +26,7 @@ NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.blocks
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://example.com
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://example.com
-NEXT_PUBLIC_MENU_LIGHTNING_LABELS=['/accounts','/apps']
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/accounts','/apps']
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false

docs/ENVS.md

@@ -128,7 +128,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 | NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) which contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` |
 | NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` |
 | NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS | `Array<LinkId>` | List of external links hidden in the navigation. Supported ids are `eth_rpc_api`, `rpc_api` | - | - | `['eth_rpc_api']` |
-| NEXT_PUBLIC_MENU_LIGHTNING_LABELS | `Array<string>` | List of menu item routes that should have a lightning label | - | - | `['/accounts']` |
+| NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES | `Array<string>` | List of menu item routes that should have a lightning label | - | - | `['/accounts']` |
 
 #### Featured network configuration properties
 

playwright/fixtures/mockEnvs.ts

@@ -63,7 +63,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   noNftMarketplaces: [
     [ 'NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES', '' ],
   ],
-  menuLightningLabels: [
-    [ 'NEXT_PUBLIC_MENU_LIGHTNING_LABELS', '["/blocks", "/apps"]' ],
+  navigationHighlightedRoutes: [
+    [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks", "/apps"]' ],
   ],
 };

public/icons/name.d.ts

@@ -71,7 +71,7 @@
 	| "integration/full"
 	| "integration/partial"
 	| "key"
-	| "lightning_sidebar"
+	| "lightning_navbar"
 	| "lightning"
 	| "link"
 	| "lock"

ui/snippets/navigation/LightningLabel.tsx

@@ -21,7 +21,7 @@ const LightningLabel = ({ bgColor, isCollapsed }: { bgColor?: string; isCollapse
   return (
     <IconSvg
       className="lightning-label"
-      name="lightning_sidebar"
+      name="lightning_navbar"
       boxSize={ 4 }
       ml={{ base: 1, lg: isExpanded ? 1 : 0, xl: isCollapsed ? 0 : 1 }}
       position={{ lg: isExpanded ? 'relative' : 'absolute', xl: isCollapsed ? 'absolute' : 'relative' }}

ui/snippets/navigation/NavLink.tsx

@@ -13,7 +13,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import LightningLabel from './LightningLabel';
 import NavLinkIcon from './NavLinkIcon';
 import useColors from './useColors';
-import useLightningLabel from './useLightningLabel';
+import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = {
@@ -36,7 +36,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
   const href = isInternalLink ? route(item.nextRoute) : item.url;
 
-  const hasLightningLabel = useLightningLabel(item);
+  const isHighlighted = useHighlightedRoute(item);
 
   const content = (
     <Link
@@ -71,7 +71,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
             <span>{ item.text }</span>
             { !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
           </Text>
-          { hasLightningLabel && (
+          { isHighlighted && (
             <LightningLabel bgColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
           ) }
         </HStack>

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -18,7 +18,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import LightningLabel from './LightningLabel';
 import NavLink from './NavLink';
 import NavLinkIcon from './NavLinkIcon';
-import useLightningLabel from './useLightningLabel';
+import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = {
@@ -31,7 +31,7 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
 
   const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
 
-  const hasLightningLabel = useLightningLabel(item.subItems);
+  const isHighlighted = useHighlightedRoute(item.subItems);
 
   return (
     <Box as="li" listStyleType="none" w="100%">
@@ -57,7 +57,7 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
               >
                 { item.text }
               </Text>
-              { hasLightningLabel && (
+              { isHighlighted && (
                 <LightningLabel bgColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
               ) }
               <IconSvg

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -12,7 +12,7 @@ import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from './LightningLabel';
 import NavLinkIcon from './NavLinkIcon';
-import useLightningLabel from './useLightningLabel';
+import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
 
 type Props = {
@@ -24,7 +24,7 @@ type Props = {
 const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
   const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
 
-  const hasLightningLabel = useLightningLabel(item.subItems);
+  const isHighlighted = useHighlightedRoute(item.subItems);
 
   return (
     <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
@@ -43,7 +43,7 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
             >
               { item.text }
             </Text>
-            { hasLightningLabel && (<LightningLabel bgColor={ styleProps.itemProps.bgColor }/>) }
+            { isHighlighted && (<LightningLabel bgColor={ styleProps.itemProps.bgColor }/>) }
           </HStack>
           <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
         </Flex>

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -219,11 +219,11 @@ test.describe('hover xl screen', () => {
   });
 });
 
-test.describe('with lightning labels', () => {
+test.describe('with highlighted routes', () => {
   let component: Locator;
 
   test.beforeEach(async({ render, mockEnvs }) => {
-    await mockEnvs(ENVS_MAP.menuLightningLabels);
+    await mockEnvs(ENVS_MAP.navigationHighlightedRoutes);
 
     component = await render(
       <Flex w="100%" minH="100vh" alignItems="stretch">

ui/snippets/navigation/useLightningLabel.ts → ui/snippets/navigation/useHighlightedRoute.ts

@@ -3,13 +3,13 @@ import type { NavItem } from 'types/client/navigation-items';
 import config from 'configs/app';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 
-export default function useLightningLabel(item: NavItem | Array<NavItem> | Array<Array<NavItem>>) {
+export default function useHighlightedRoute(item: NavItem | Array<NavItem> | Array<Array<NavItem>>) {
 
   function checkForLightningLabel(item: NavItem | Array<NavItem> | Array<Array<NavItem>>): boolean {
     if (Array.isArray(item)) {
       return item.some((subItem) => checkForLightningLabel(subItem));
     }
-    return isInternalItem(item) && (config.UI.sidebar.lightningLabels.includes(item.nextRoute.pathname));
+    return isInternalItem(item) && (config.UI.sidebar.highlightedRoutes.includes(item.nextRoute.pathname));
   }
 
   return checkForLightningLabel(item);