Skip to content

Commit

Permalink
Merge pull request #829 from blockscout/remove-is-new-ui
Browse files Browse the repository at this point in the history 
remove isNewUi flag from nav items
  • Loading branch information
@tom2drum
tom2drum authored May 22, 2023
2 parents e35dc1e + 87163a6 commit ee02cfa
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 42 deletions.
28 changes: 6 additions & 22 deletions lib/hooks/useNavItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -109,7 +106,6 @@ export default function useNavItems(): ReturnType {
nextRoute: { pathname: '/withdrawals' as const },
icon: withdrawalsIcon,
isActive: pathname === '/withdrawals',
isNewUi: true,
},
].filter(Boolean);
}
Expand All @@ -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',
Expand All @@ -146,24 +140,21 @@ export default function useNavItems(): ReturnType {
text: 'Blockchain',
icon: globeIcon,
isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
isNewUi: true,
subItems: blockchainNavItems,
},
{
text: 'Tokens',
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,
Expand All @@ -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);

Expand All @@ -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 };
Expand Down
1 change: 0 additions & 1 deletion types/client/navigation-items.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ type NavItemCommon = {
export type NavItemInternal = NavItemCommon & {
nextRoute: Route;
isActive?: boolean;
isNewUi?: boolean;
}

export type NavItemExternal = NavItemCommon & {
Expand Down
1 change: 0 additions & 1 deletion types/nextjs-routes.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
24 changes: 7 additions & 17 deletions ui/snippets/navigation/NavLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"/> }
Expand All @@ -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>
Expand Down
1 change: 0 additions & 1 deletion ui/snippets/networkMenu/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@ export interface NetworkLink {
pathname: string;
name: string;
icon?: FunctionComponent<SVGAttributes<SVGElement>>;
isNewUi?: boolean;
}

0 comments on commit ee02cfa

Please sign in to comment.