Merge pull request #829 from blockscout/remove-is-new-ui

remove isNewUi flag from nav items

lib/hooks/useNavItems.tsx

@@ -57,41 +57,38 @@ export default function useNavItems(): ReturnType {
       nextRoute: { pathname: '/accounts' as const },
       icon: topAccountsIcon,
       isActive: pathname === '/accounts',
-      isNewUi: true,
     };
     const blocks = {
       text: 'Blocks',
       nextRoute: { pathname: '/blocks' as const },
       icon: blocksIcon,
       isActive: pathname === '/blocks' || pathname === '/block/[height]',
-      isNewUi: true,
     };
     const txs = {
       text: 'Transactions',
       nextRoute: { pathname: '/txs' as const },
       icon: transactionsIcon,
       isActive: pathname === '/txs' || pathname === '/tx/[hash]',
-      isNewUi: true,
     };
     const verifiedContracts =
     // eslint-disable-next-line max-len
-     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified-contracts', isNewUi: true };
+     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified-contracts' };
 
     if (appConfig.L2.isL2Network) {
       blockchainNavItems = [
         [
           txs,
           // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: depositsIcon, isActive: pathname === '/l2-deposits', isNewUi: true },
+          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: depositsIcon, isActive: pathname === '/l2-deposits' },
           // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/l2-withdrawals', isNewUi: true },
+          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/l2-withdrawals' },
         ],
         [
           blocks,
           // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/l2-txn-batches', isNewUi: true },
+          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/l2-txn-batches' },
           // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/l2-output-roots', isNewUi: true },
+          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/l2-output-roots' },
         ],
         [
           topAccounts,
@@ -109,7 +106,6 @@ export default function useNavItems(): ReturnType {
           nextRoute: { pathname: '/withdrawals' as const },
           icon: withdrawalsIcon,
           isActive: pathname === '/withdrawals',
-          isNewUi: true,
         },
       ].filter(Boolean);
     }
@@ -120,14 +116,12 @@ export default function useNavItems(): ReturnType {
         nextRoute: { pathname: '/api-docs' as const },
         icon: apiDocsIcon,
         isActive: pathname === '/api-docs',
-        isNewUi: true,
       } : null,
       {
         text: 'GraphQL',
         nextRoute: { pathname: '/graphiql' as const },
         icon: graphQLIcon,
         isActive: pathname === '/graphiql',
-        isNewUi: true,
       },
       {
         text: 'RPC API',
@@ -146,7 +140,6 @@ export default function useNavItems(): ReturnType {
         text: 'Blockchain',
         icon: globeIcon,
         isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
-        isNewUi: true,
         subItems: blockchainNavItems,
       },
       {
@@ -154,16 +147,14 @@ export default function useNavItems(): ReturnType {
         nextRoute: { pathname: '/tokens' as const },
         icon: tokensIcon,
         isActive: pathname.startsWith('/token'),
-        isNewUi: true,
       },
       isMarketplaceAvailable ? {
         text: 'Apps',
         nextRoute: { pathname: '/apps' as const },
         icon: appsIcon,
         isActive: pathname.startsWith('/app'),
-        isNewUi: true,
       } : null,
-      { text: 'Charts & stats', nextRoute: { pathname: '/stats' as const }, icon: statsIcon, isActive: pathname === '/stats', isNewUi: true },
+      { text: 'Charts & stats', nextRoute: { pathname: '/stats' as const }, icon: statsIcon, isActive: pathname === '/stats' },
       {
         text: 'API',
         icon: apiDocsIcon,
@@ -183,40 +174,34 @@ export default function useNavItems(): ReturnType {
         nextRoute: { pathname: '/account/watchlist' as const },
         icon: watchlistIcon,
         isActive: pathname === '/account/watchlist',
-        isNewUi: true,
       },
       {
         text: 'Private tags',
         nextRoute: { pathname: '/account/tag_address' as const },
         icon: privateTagIcon,
         isActive: pathname === '/account/tag_address',
-        isNewUi: true,
       },
       {
         text: 'Public tags',
         nextRoute: { pathname: '/account/public_tags_request' as const },
         icon: publicTagIcon, isActive: pathname === '/account/public_tags_request',
-        isNewUi: true,
       },
       {
         text: 'API keys',
         nextRoute: { pathname: '/account/api_key' as const },
         icon: apiKeysIcon, isActive: pathname === '/account/api_key',
-        isNewUi: true,
       },
       {
         text: 'Custom ABI',
         nextRoute: { pathname: '/account/custom_abi' as const },
         icon: abiIcon,
         isActive: pathname === '/account/custom_abi',
-        isNewUi: true,
       },
       appConfig.contractInfoApi.endpoint && appConfig.adminServiceApi.endpoint && {
         text: 'Verified addrs',
         nextRoute: { pathname: '/account/verified_addresses' as const },
         icon: verifiedIcon,
         isActive: pathname === '/account/verified_addresses',
-        isNewUi: true,
       },
     ].filter(Boolean);
 
@@ -225,7 +210,6 @@ export default function useNavItems(): ReturnType {
       nextRoute: { pathname: '/auth/profile' as const },
       icon: profileIcon,
       isActive: pathname === '/auth/profile',
-      isNewUi: true,
     };
 
     return { mainNavItems, accountNavItems, profileItem };

types/client/navigation-items.ts

@@ -8,7 +8,6 @@ type NavItemCommon = {
 export type NavItemInternal = NavItemCommon & {
   nextRoute: Route;
   isActive?: boolean;
-  isNewUi?: boolean;
 }
 
 export type NavItemExternal = NavItemCommon & {

types/nextjs-routes.d.ts

@@ -26,7 +26,6 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/block/[height]", { "height": string }>
     | StaticRoute<"/blocks">
     | StaticRoute<"/csv-export">
-    | StaticRoute<"/graph">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
     | StaticRoute<"/l2-deposits">

ui/snippets/navigation/NavLink.tsx

@@ -21,26 +21,18 @@ type Props = {
 const NavLink = ({ item, isCollapsed, px, className }: Props) => {
   const isMobile = useIsMobile();
   const colors = useColors();
-  const isExpanded = isCollapsed === false;
 
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalItem(item) && item.isActive });
+  const isExpanded = isCollapsed === false;
+  const isInternalLink = isInternalItem(item);
 
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive });
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
-
-  let href: string| undefined;
-
-  const isInternal = isInternalItem(item);
-
-  if (isInternal) {
-    href = !item.isNewUi ? route(item.nextRoute) : undefined;
-  } else {
-    href = item.url;
-  }
+  const href = isInternalLink ? route(item.nextRoute) : item.url;
 
   const content = (
     <Link
       href={ href }
-      target={ isInternal ? '_self' : '_blank' }
+      target={ isInternalLink ? '_self' : '_blank' }
       { ...styleProps.itemProps }
       w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
       display="flex"
@@ -55,7 +47,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => {
         placement="right"
         variant="nav"
         gutter={ 20 }
-        color={ isInternalItem(item) && item.isActive ? colors.text.active : colors.text.hover }
+        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
       >
         <HStack spacing={ 3 } overflow="hidden">
           { item.icon && <Icon as={ item.icon } boxSize="30px"/> }
@@ -69,9 +61,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => {
 
   return (
     <Box as="li" listStyleType="none" w="100%" className={ className }>
-      { /* why not NextLink in all cases? since prev UI and new one are hosting in the same domain and global routing is managed by nginx */ }
-      { /* we have to hard reload page on every transition between urls from different part of the app */ }
-      { isInternalItem(item) && item.isNewUi ? (
+      { isInternalLink ? (
         <NextLink href={ item.nextRoute } passHref legacyBehavior>
           { content }
         </NextLink>

ui/snippets/networkMenu/types.ts

@@ -4,5 +4,4 @@ export interface NetworkLink {
   pathname: string;
   name: string;
   icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  isNewUi?: boolean;
 }