diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx index 5bebba3bcd..732b670456 100644 --- a/lib/hooks/useNavItems.tsx +++ b/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 }; diff --git a/types/client/navigation-items.ts b/types/client/navigation-items.ts index f6debfbf5f..8aed9af9ce 100644 --- a/types/client/navigation-items.ts +++ b/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 & { diff --git a/types/nextjs-routes.d.ts b/types/nextjs-routes.d.ts index 5395139df7..4dd71bf168 100644 --- a/types/nextjs-routes.d.ts +++ b/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"> diff --git a/ui/snippets/navigation/NavLink.tsx b/ui/snippets/navigation/NavLink.tsx index 8ded1066e6..8c0e233476 100644 --- a/ui/snippets/navigation/NavLink.tsx +++ b/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 = ( { 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 } > { item.icon && } @@ -69,9 +61,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => { return ( - { /* 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 ? ( { content } diff --git a/ui/snippets/networkMenu/types.ts b/ui/snippets/networkMenu/types.ts index 2c92abeccd..5fce6bdb26 100644 --- a/ui/snippets/networkMenu/types.ts +++ b/ui/snippets/networkMenu/types.ts @@ -4,5 +4,4 @@ export interface NetworkLink { pathname: string; name: string; icon?: FunctionComponent>; - isNewUi?: boolean; }