Merge branch 'main' of github.com:blockscout/frontend into feat/verified-tokens

.env.template

@@ -32,13 +32,14 @@ NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TELEGRAM_L
 NEXT_PUBLIC_FOOTER_STAKING_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_STAKING_LINK__
 NEXT_PUBLIC_FEATURED_NETWORKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FEATURED_NETWORKS__
 NEXT_PUBLIC_NETWORK_EXPLORERS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_EXPLORERS__
+NEXT_PUBLIC_OTHER_LINKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_OTHER_LINKS__
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_CONFIG_URL__
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
 NEXT_PUBLIC_LOGOUT_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_URL__
 NEXT_PUBLIC_LOGOUT_RETURN_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_RETURN_URL__
 NEXT_PUBLIC_HOMEPAGE_CHARTS=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_CHARTS__
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR__
-NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT__
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND__
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER__
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME__
 NEXT_PUBLIC_AD_DOMAIN_WITH_AD=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_DOMAIN_WITH_AD__

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
+import type { NavItemExternal } from 'types/client/navigation-items';
 import type { WalletType } from 'types/client/wallets';
 import type { NetworkExplorer } from 'types/networks';
 import type { ChainIndicatorId } from 'ui/home/indicators/types';
@@ -11,6 +12,7 @@ const parseEnvJson = <DataType>(env: string | undefined): DataType | null => {
     return null;
   }
 };
+
 const stripTrailingSlash = (str: string) => str[str.length - 1] === '/' ? str.slice(0, -1) : str;
 const getWeb3DefaultWallet = (): WalletType => {
   const envValue = getEnvValue(process.env.NEXT_PUBLIC_WEB3_DEFAULT_WALLET);
@@ -101,6 +103,7 @@ const config = Object.freeze({
     telegram: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK),
     staking: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK),
   },
+  otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue(process.env.NEXT_PUBLIC_OTHER_LINKS)) || [],
   featuredNetworks: getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS),
   blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
   isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',
@@ -153,8 +156,8 @@ const config = Object.freeze({
   homepage: {
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_CHARTS)) || [],
     plate: {
-      gradient: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT) ||
-        'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)',
+      background: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND) ||
+        'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)',
       textColor: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR) || 'white',
     },
     showGasTracker: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER) === 'false' ? false : true,

configs/envs/.env.goerli.optimism

 # ui config
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=
-NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
 NEXT_PUBLIC_WEB3_DEFAULT_WALLET=coinbase
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=true

configs/envs/.env.poa_core

@@ -4,7 +4,7 @@ NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address','block':'/ethereum/poa/core/block'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-#NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=linear-gradient(136.9deg, \#235643 1.5%, \#16191E 77.77%)
+#NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='no-repeat bottom 20% right 0px/100% url(https://neon-labs.org/images/index/banner.jpg)'
 #NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=\#DCFE76
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/poa.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/poa.svg

configs/envs/.env.pw

@@ -15,6 +15,7 @@ NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.a
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=
 NEXT_PUBLIC_FEATURED_NETWORKS=
 NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_LOGO_DARK=

deploy/values/l2-optimism-goerli/values.yaml

@@ -385,7 +385,7 @@ frontend:
       _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
     NEXT_PUBLIC_NETWORK_EXPLORERS:
       _default: ''
-    NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT:
+    NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND:
       _default: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
     NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS:
       _default: ''

deploy/values/review-l2/values.yaml

@@ -113,7 +113,7 @@ frontend:
       _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
     NEXT_PUBLIC_NETWORK_EXPLORERS:
       _default: ''
-    NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT:
+    NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND:
       _default: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
     NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS:
       _default: ''

docs/ENVS.md

@@ -29,6 +29,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | Variable | Type| Description | Is required  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | 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_BLOCKSCOUT_VERSION | `string` | Current running version of Blockscout (used to display link to release in the footer) | - | - | `v.5.1.0-beta`
 | NEXT_PUBLIC_FOOTER_GITHUB_LINK | `string` | Link to Github in the footer | - | - | `https://github.com/blockscout/blockscout` |
 | NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` | Link to Twitter in the footer | - | - | `https://www.twitter.com/blockscoutcom` |
@@ -43,7 +44,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_LOGOUT_RETURN_URL | `string` | Account logout return url. Required if account is supported for the app instance. | - | - | `https://blockscout.com/poa/core/auth/logout` |
 | NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price' \| 'market_cap'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` |
 | NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes) | `\#FFFFFF \| rgb(220, 254, 118)` | `\#DCFE76` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT | `string` | Gradient value for hero plate on the homepage (escape "#" symbol if you use HEX color codes) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 72% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)` |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
 | NEXT_PUBLIC_AD_DOMAIN_WITH_AD | `string` | The domain on which we display ads | - | - | `blockscout.com` |

lib/hooks/useNavItems.tsx

 import { useRouter } from 'next/router';
-import type { Route } from 'nextjs-routes';
 import React from 'react';
 
+import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation-items';
+
 import appConfig from 'configs/app/config';
 import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
@@ -27,28 +28,6 @@ import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import { rightLineArrow } from 'lib/html-entities';
 
-type NavItemCommon = {
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-
-type NavItemInternal = NavItemCommon & {
-  nextRoute: Route;
-  isActive?: boolean;
-  isNewUi?: boolean;
-}
-
-type NavItemExternal = NavItemCommon & {
-  url: string;
-}
-
-export type NavItem = NavItemInternal | NavItemExternal
-
-export type NavGroupItem = NavItemCommon & {
-  isActive?: boolean;
-  subItems: Array<NavItem> | Array<Array<NavItem>>;
-}
-
 interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
@@ -135,7 +114,7 @@ export default function useNavItems(): ReturnType {
       ].filter(Boolean);
     }
 
-    const otherNavItems: Array<NavItem> = [
+    const apiNavItems: Array<NavItem> = [
       hasAPIDocs ? {
         text: 'REST API',
         nextRoute: { pathname: '/api-docs' as const },
@@ -185,14 +164,16 @@ export default function useNavItems(): ReturnType {
         isNewUi: true,
       } : null,
       { text: 'Charts & stats', nextRoute: { pathname: '/stats' as const }, icon: statsIcon, isActive: pathname === '/stats', isNewUi: true },
-      // there should be custom site sections like Stats, Faucet, More, etc but never an 'other'
-      // examples https://explorer-edgenet.polygon.technology/ and https://explorer.celo.org/
-      // at this stage custom menu items is under development, we will implement it later
-      otherNavItems.length > 0 ? {
+      {
+        text: 'API',
+        icon: apiDocsIcon,
+        isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
+        subItems: apiNavItems,
+      },
+      appConfig.otherLinks.length > 0 ? {
         text: 'Other',
         icon: gearIcon,
-        isActive: otherNavItems.some(item => isInternalItem(item) && item.isActive),
-        subItems: otherNavItems,
+        subItems: appConfig.otherLinks,
       } : null,
     ].filter(Boolean) as Array<NavItem | NavGroupItem>;
 

types/client/navigation-items.ts

+import type { Route } from 'nextjs-routes';
+
+type NavItemCommon = {
+  text: string;
+  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+export type NavItemInternal = NavItemCommon & {
+  nextRoute: Route;
+  isActive?: boolean;
+  isNewUi?: boolean;
+}
+
+export type NavItemExternal = NavItemCommon & {
+  url: string;
+}
+
+export type NavItem = NavItemInternal | NavItemExternal
+
+export type NavGroupItem = NavItemCommon & {
+  isActive?: boolean;
+  subItems: Array<NavItem> | Array<Array<NavItem>>;
+}

ui/address/tokens/ERC721TokensListItem.tsx

 import { Flex, HStack, Text } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
@@ -12,6 +13,9 @@ import TokenLogo from 'ui/shared/TokenLogo';
 type Props = AddressTokenBalance;
 
 const ERC721TokensListItem = ({ token, value }: Props) => {
+  const router = useRouter();
+
+  const hash = router.query.hash?.toString() || '';
 
   const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
 
@@ -19,7 +23,7 @@ const ERC721TokensListItem = ({ token, value }: Props) => {
     <ListItemMobile rowGap={ 2 }>
       <Flex alignItems="center" width="100%">
         <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
-        <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
+        <AddressLink fontWeight="700" hash={ hash } tokenHash={ token.address } type="address_token" alias={ tokenString }/>
       </Flex>
       <Flex alignItems="center" pl={ 8 }>
         <AddressLink hash={ token.address } type="address" truncation="constant"/>

ui/address/tokens/ERC721TokensTableItem.tsx

 import { Tr, Td, Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
@@ -14,7 +15,9 @@ const ERC721TokensTableItem = ({
   token,
   value,
 }: Props) => {
+  const router = useRouter();
 
+  const hash = router.query.hash?.toString() || '';
   const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
 
   return (
@@ -22,7 +25,7 @@ const ERC721TokensTableItem = ({
       <Td verticalAlign="middle">
         <Flex alignItems="center">
           <TokenLogo data={ token } boxSize={ 6 } mr={ 2 }/>
-          <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
+          <AddressLink fontWeight="700" hash={ hash } tokenHash={ token.address } type="address_token" alias={ tokenString }/>
         </Flex>
       </Td>
       <Td verticalAlign="middle">

ui/home/LatestTxsItemSkeleton.tsx

@@ -11,7 +11,7 @@ const LatestTxsItemSkeleton = () => {
   return (
     <Box
       width="100%"
-      minW="700px"
+      minW={{ base: 'unset', lg: '700px' }}
       borderTop="1px solid"
       borderColor="divider"
       py={ 4 }

ui/pages/Home.pw.tsx

@@ -5,6 +5,7 @@ import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
@@ -47,6 +48,35 @@ test('default view -@default +@desktop-xl +@dark-mode', async({ mount, page }) =
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
+test.describe('custom hero plate background', () => {
+  const IMAGE_URL = 'https://localhost:3000/my-image.png';
+  const extendedTest = test.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND', value: `no-repeat center/cover url(${ IMAGE_URL })` },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  extendedTest('default view', async({ mount, page }) => {
+    await page.route(IMAGE_URL, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/giant_duck_long.jpg',
+      });
+    });
+
+    const component = await mount(
+      <TestApp>
+        <Home/>
+      </TestApp>,
+    );
+
+    const heroPlate = component.locator('div[data-label="hero plate"]');
+
+    await expect(heroPlate).toHaveScreenshot();
+  });
+});
+
 // had to separate mobile test, otherwise all the tests fell on CI
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });

ui/pages/Home.tsx

@@ -17,11 +17,11 @@ const Home = () => {
     <Page isHomePage>
       <Box
         w="100%"
-        backgroundImage={ appConfig.homepage.plate.gradient }
-        backgroundColor="blue.400"
+        background={ appConfig.homepage.plate.background }
         borderRadius="24px"
         padding={{ base: '24px', lg: '48px' }}
         minW={{ base: 'unset', lg: '900px' }}
+        data-label="hero plate"
       >
         <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between">
           <Heading

ui/snippets/navigation/NavLink.tsx

@@ -3,8 +3,9 @@ import NextLink from 'next/link';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
+import type { NavItem } from 'types/client/navigation-items';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
-import type { NavItem } from 'lib/hooks/useNavItems';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 
 import useColors from './useColors';
@@ -57,7 +58,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => {
         color={ isInternalItem(item) && item.isActive ? colors.text.active : colors.text.hover }
       >
         <HStack spacing={ 3 } overflow="hidden">
-          <Icon as={ item.icon } boxSize="30px"/>
+          { item.icon && <Icon as={ item.icon } boxSize="30px"/> }
           <Text { ...styleProps.textProps }>
             { item.text }
           </Text>

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -12,8 +12,9 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NavGroupItem } from 'types/client/navigation-items';
+
 import chevronIcon from 'icons/arrows/east-mini.svg';
-import type { NavGroupItem } from 'lib/hooks/useNavItems';
 
 import NavLink from './NavLink';
 import useNavLinkStyleProps from './useNavLinkStyleProps';

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -7,8 +7,9 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NavGroupItem } from 'types/client/navigation-items';
+
 import chevronIcon from 'icons/arrows/east-mini.svg';
-import type { NavGroupItem } from 'lib/hooks/useNavItems';
 
 import useNavLinkStyleProps from './useNavLinkStyleProps';