Skip to content

F
frontend
Commit 70a126d1 authored by isstuev's avatar isstuev
Browse files
Options

api links in navigation

parent 0f0b0b2b
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 44 deletions
icons/RPC.svg 0 → 100644
View file @ 70a126d1
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
<path fill="currentColor" d="M22.857 19.714a3.033 3.033 0 0 0-1.571.448l-2.428-2.436a4.714 4.714 0 0 0 0-5.452l2.428-2.436c.473.29 1.016.445 1.571.448a3.143 3.143 0 1 0-3.143-3.143c.003.555.158 1.098.448 1.571l-2.436 2.428a4.714 4.714 0 0 0-5.452 0L9.838 8.714c.29-.473.445-1.016.448-1.571a3.143 3.143 0 1 0-3.143 3.143 3.033 3.033 0 0 0 1.571-.448l2.428 2.436a4.714 4.714 0 0 0 0 5.452l-2.428 2.436a3.033 3.033 0 0 0-1.571-.448 3.142 3.142 0 1 0 3.143 3.143 3.033 3.033 0 0 0-.448-1.571l2.436-2.428a4.714 4.714 0 0 0 5.452 0l2.436 2.428a3.033 3.033 0 0 0-.448 1.571 3.142 3.142 0 1 0 3.143-3.143Zm0-14.143a1.572 1.572 0 1 1 0 3.144 1.572 1.572 0 0 1 0-3.144ZM5.571 7.143a1.571 1.571 0 1 1 3.143 0 1.571 1.571 0 0 1-3.143 0Zm1.572 17.286a1.571 1.571 0 1 1 0-3.143 1.571 1.571 0 0 1 0 3.143ZM15 18.143a3.143 3.143 0 1 1 0-6.287 3.143 3.143 0 0 1 0 6.287Zm7.857 6.286a1.571 1.571 0 1 1 0-3.143 1.571 1.571 0 0 1 0 3.143Z"/>
</svg>
icons/graphQL.svg 0 → 100644
View file @ 70a126d1
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
<path fill="currentColor" d="m17.613 5.751 5.082 2.85a2.255 2.255 0 0 1 3.123-.077c.153.14.282.301.389.477.606 1.028.238 2.339-.82 2.928-.18.1-.372.175-.575.223v5.699c1.18.273 1.91 1.423 1.627 2.569-.05.204-.13.4-.239.581-.61 1.023-1.958 1.374-3.014.782a2.18 2.18 0 0 1-.542-.429l-5.052 2.832c.383 1.124-.245 2.335-1.402 2.706a2.275 2.275 0 0 1-.69.108c-1.216.001-2.203-.955-2.204-2.136 0-.205.03-.41.09-.609l-5.083-2.847a2.252 2.252 0 0 1-3.117.07 2.098 2.098 0 0 1-.072-3.026 2.224 2.224 0 0 1 1.075-.603l.001-5.699c-1.184-.276-1.913-1.433-1.628-2.584.048-.198.127-.389.23-.566.61-1.024 1.96-1.374 3.015-.782.183.101.35.228.495.377l5.086-2.85c-.347-1.133.32-2.322 1.484-2.657.203-.059.416-.088.628-.088 1.216-.001 2.203.954 2.204 2.134.001.209-.03.418-.091.617Zm-.53.877a.799.799 0 0 1-.06.058l6.654 11.19c.027-.009.058-.016.084-.023v-5.707c-1.179-.283-1.897-1.442-1.604-2.588.006-.024.012-.049.02-.072l-5.095-2.858Zm-3.106.059-.062-.06L8.82 9.479c.337 1.135-.337 2.318-1.505 2.645l-.078.021v5.708l.086.023 6.655-11.19-.002.001Zm2.138.507a2.285 2.285 0 0 1-1.228 0L8.234 18.383c.302.283.517.645.618 1.041h13.297c.1-.398.317-.761.622-1.044L16.115 7.194Zm1.016 16.227 5.06-2.838a1.715 1.715 0 0 1-.04-.142H8.85l-.022.083 5.087 2.852c.4-.404.962-.653 1.586-.653.646 0 1.226.269 1.63.698Z"/>
</svg>
icons/restAPI.svg 0 → 100644
View file @ 70a126d1
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
<g fill-rule="evenodd" clip-path="url(#restAPI_svg__a)" clip-rule="evenodd">
<path fill="currentColor" d="M23 4.3H7A2.7 2.7 0 0 0 4.3 7v16A2.7 2.7 0 0 0 7 25.7h16a2.7 2.7 0 0 0 2.7-2.7V7A2.7 2.7 0 0 0 23 4.3ZM7 3a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V7a4 4 0 0 0-4-4H7Z"/>
<path fill="currentColor" d="M14.911 11a1 1 0 0 0-1 1v7.111a1 1 0 1 0 2 0v-1.667h1.667a2.778 2.778 0 0 0 2.777-2.777v-.89A2.778 2.778 0 0 0 17.578 11H14.91Zm2.667 4.444H15.91V13h1.667a.777.777 0 0 1 .777.778v.889a.777.777 0 0 1-.777.777Zm-10.778 1v-2.222a3.222 3.222 0 0 1 6.444 0v4.889a1 1 0 1 1-2 0v-1.667H8.8v1.667a1 1 0 1 1-2 0v-2.667Zm2-1h2.444v-1.222a1.222 1.222 0 1 0-2.444 0v1.222ZM22.022 11a1 1 0 0 1 1 1v7.111a1 1 0 1 1-2 0V12a1 1 0 0 1 1-1Z"/>
<path d="M15.711 17.444c0-.11.09-.2.2-.2h1.667a2.577 2.577 0 0 0 2.578-2.577v-.89a2.577 2.577 0 0 0-2.578-2.577H14.91a.8.8 0 0 0-.8.8v7.111a.8.8 0 0 0 1.6 0v-1.667Zm.2-1.8a.2.2 0 0 1-.2-.2V13c0-.11.09-.2.2-.2h1.667a.978.978 0 0 1 .977.978v.889a.978.978 0 0 1-.977.977H15.91Zm-4.667 1.6c.11 0 .2.09.2.2v1.667a.8.8 0 0 0 1.6 0v-4.889a3.022 3.022 0 0 0-6.044 0v4.89a.8.8 0 0 0 1.6 0v-1.668c0-.11.09-.2.2-.2h2.444Zm-2.444-1.6a.2.2 0 0 1-.2-.2v-1.222a1.422 1.422 0 1 1 2.844 0v1.222a.2.2 0 0 1-.2.2H8.8Zm7.111 3.467a1 1 0 1 1-2 0V12a1 1 0 0 1 1-1h2.667a2.778 2.778 0 0 1 2.777 2.778v.889a2.778 2.778 0 0 1-2.777 2.777H15.91v1.667Zm1.667-3.667a.777.777 0 0 0 .777-.777v-.89a.778.778 0 0 0-.777-.777H15.91v2.444h1.667ZM8.8 19.111a1 1 0 1 1-2 0v-4.889a3.222 3.222 0 0 1 6.444 0v4.89a1 1 0 1 1-2 0v-1.668H8.8v1.667Zm2.444-4.889a1.222 1.222 0 1 0-2.444 0v1.222h2.444v-1.222ZM22.822 12a.8.8 0 0 0-1.6 0v7.111a.8.8 0 0 0 1.6 0V12Zm.2 0a1 1 0 1 0-2 0v7.111a1 1 0 1 0 2 0V12Z"/>
</g>
<defs>
<clipPath id="restAPI_svg__a">
<path d="M3 3h24v24H3z"/>
</clipPath>
</defs>
</svg>
lib/hooks/useNavItems.tsx
View file @ 70a126d1
......@@ -10,10 +10,13 @@ import appsIcon from 'icons/apps.svg';
import blocksIcon from 'icons/block.svg';
import gearIcon from 'icons/gear.svg';
import globeIcon from 'icons/globe-b.svg';
import graphQLIcon from 'icons/graphQL.svg';
// import outputRootsIcon from 'icons/output_roots.svg';
import privateTagIcon from 'icons/privattags.svg';
import profileIcon from 'icons/profile.svg';
import publicTagIcon from 'icons/publictags.svg';
import apiDocsIcon from 'icons/restAPI.svg';
import rpcIcon from 'icons/RPC.svg';
import statsIcon from 'icons/stats.svg';
import tokensIcon from 'icons/token.svg';
import topAccountsIcon from 'icons/top-accounts.svg';
......@@ -24,15 +27,25 @@ import verifiedIcon from 'icons/verified.svg';
import watchlistIcon from 'icons/watchlist.svg';
// import { rightLineArrow } from 'lib/html-entities';
export interface NavItem {
type NavItemCommon = {
text: string;
nextRoute: Route;
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
}
type NavItemInternal = NavItemCommon & {
nextRoute: Route;
isActive?: boolean;
isNewUi?: boolean;
}
export interface NavGroupItem extends Omit<NavItem, 'nextRoute'> {
type NavItemExternal = NavItemCommon & {
url: string;
}
export type NavItem = NavItemInternal | NavItemExternal
export type NavGroupItem = NavItemCommon & {
isActive?: boolean;
subItems: Array<NavItem> | Array<Array<NavItem>>;
}
......@@ -46,6 +59,10 @@ export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem
return 'subItems' in item;
}
export function isInternalItem(item: NavItem): item is NavItemInternal {
return 'nextRoute' in item;
}
export default function useNavItems(): ReturnType {
const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0 && appConfig.network.rpcUrl;
const hasAPIDocs = appConfig.apiDoc.specUrl;
......@@ -56,13 +73,29 @@ export default function useNavItems(): ReturnType {
return React.useMemo(() => {
let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
const topAccounts =
{ text: 'Top accounts', 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.startsWith('/block'), isNewUi: true };
const txs = { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true };
const topAccounts = {
text: 'Top accounts',
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.startsWith('/block'),
isNewUi: true,
};
const txs = {
text: 'Transactions',
nextRoute: { pathname: '/txs' as const },
icon: transactionsIcon,
isActive: pathname.startsWith('/tx'),
isNewUi: true,
};
const verifiedContracts =
// eslint-disable-next-line max-len
{ text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: false, isNewUi: false };
{ text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: false, isNewUi: true };
if (appConfig.L2.isL2Network) {
blockchainNavItems = [
......@@ -96,35 +129,64 @@ export default function useNavItems(): ReturnType {
const otherNavItems: Array<NavItem> = [
hasAPIDocs ? {
text: 'API documentation',
text: 'REST API',
nextRoute: { pathname: '/api-docs' as const },
// FIXME: need icon for this item
icon: topAccountsIcon,
icon: apiDocsIcon,
isActive: pathname === '/api-docs',
isNewUi: true,
} : null,
// FIXME: need icon for this item
{ text: 'GraphQL', nextRoute: { pathname: '/graphiql' as const }, icon: topAccountsIcon, isActive: false, isNewUi: false },
{
text: 'GraphQL',
nextRoute: { pathname: '/graphiql' as const },
icon: graphQLIcon,
isActive: pathname === '/graphiql',
isNewUi: true,
},
{
text: 'RPC API',
icon: rpcIcon,
url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
},
{
text: 'Eth RPC API',
icon: rpcIcon,
url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
},
].filter(Boolean);
const mainNavItems = [
{
text: 'Blockchain',
icon: globeIcon,
isActive: blockchainNavItems.flat().some(item => item.isActive),
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 },
isMarketplaceFilled ?
{ text: 'Apps', nextRoute: { pathname: '/apps' as const }, icon: appsIcon, isActive: pathname.startsWith('/app'), isNewUi: true } : null,
{
text: 'Tokens',
nextRoute: { pathname: '/tokens' as const },
icon: tokensIcon,
isActive: pathname.startsWith('/token'),
isNewUi: true,
},
isMarketplaceFilled ? {
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 },
// 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: 'Other', icon: gearIcon, isActive: otherNavItems.some(item => item.isActive), subItems: otherNavItems } : null,
].filter(Boolean);
otherNavItems.length > 0 ? {
text: 'Other',
icon: gearIcon,
isActive: otherNavItems.some(item => isInternalItem(item) && item.isActive),
subItems: otherNavItems,
} : null,
].filter(Boolean) as Array<NavItem | NavGroupItem>;
const accountNavItems = [
{
......@@ -144,9 +206,15 @@ export default function useNavItems(): ReturnType {
{
text: 'Public tags',
nextRoute: { pathname: '/account/public_tags_request' as const },
icon: publicTagIcon, isActive: pathname === '/account/public_tags_request', isNewUi: true,
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: '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 },
......@@ -157,7 +225,12 @@ export default function useNavItems(): ReturnType {
];
const profileItem = {
text: 'My profile', nextRoute: { pathname: '/auth/profile' as const }, icon: profileIcon, isActive: pathname === '/auth/profile', isNewUi: true };
text: 'My profile',
nextRoute: { pathname: '/auth/profile' as const },
icon: profileIcon,
isActive: pathname === '/auth/profile',
isNewUi: true,
};
return { mainNavItems, accountNavItems, profileItem };
}, [ hasAPIDocs, isMarketplaceFilled, pathname ]);
......
ui/snippets/navigation/NavLink.tsx
View file @ 70a126d1
......@@ -4,47 +4,57 @@ import { route } from 'nextjs-routes';
import React from 'react';
import type { NavItem } from 'lib/hooks/useNavItems';
import { isInternalItem } from 'lib/hooks/useNavItems';
import useColors from './useColors';
import useNavLinkStyleProps from './useNavLinkStyleProps';
type Props = NavItem & {
type Props = {
item: NavItem;
isCollapsed?: boolean;
px?: string | number;
className?: string;
}
const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi, className }: Props) => {
const NavLink = ({ item, isCollapsed, px, className }: Props) => {
const colors = useColors();
const isExpanded = isCollapsed === false;
const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalItem(item) && item.isActive });
const isXLScreen = useBreakpointValue({ base: false, xl: true });
let href: string| undefined;
if (isInternalItem(item)) {
item.isNewUi ? route(item.nextRoute) : undefined;
} else {
href = item.url;
}
const content = (
<Link
{ ...(isNewUi ? {} : { href: route(nextRoute) }) }
href={ href }
{ ...styleProps.itemProps }
w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
display="flex"
px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
aria-label={ `${ text } link` }
aria-label={ `${ item.text } link` }
whiteSpace="nowrap"
>
<Tooltip
label={ text }
label={ item.text }
hasArrow={ false }
isDisabled={ isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
placement="right"
variant="nav"
gutter={ 20 }
color={ isActive ? colors.text.active : colors.text.hover }
color={ isInternalItem(item) && item.isActive ? colors.text.active : colors.text.hover }
>
<HStack spacing={ 3 } overflow="hidden">
<Icon as={ icon } boxSize="30px"/>
<Icon as={ item.icon } boxSize="30px"/>
<Text { ...styleProps.textProps }>
{ text }
{ item.text }
</Text>
</HStack>
</Tooltip>
......@@ -55,8 +65,8 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi, cl
<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 */ }
{ isNewUi ? (
<NextLink href={ nextRoute } passHref>
{ isInternalItem(item) && item.isNewUi ? (
<NextLink href={ item.nextRoute } passHref>
{ content }
</NextLink>
) : content }
......
ui/snippets/navigation/NavLinkGroupDesktop.tsx
View file @ 70a126d1
......@@ -82,10 +82,10 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
borderColor: 'divider',
}}
>
{ item.map(subItem => <NavLink key={ subItem.text } { ...subItem } isCollapsed={ false }/>) }
{ item.map(subItem => <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>) }
</Box>
) :
<NavLink key={ item.text } { ...item } isCollapsed={ false }/>,
<NavLink key={ item.text } item={ item } isCollapsed={ false }/>,
) }
</VStack>
</PopoverBody>
......
ui/snippets/navigation/NavigationDesktop.tsx
View file @ 70a126d1
......@@ -85,7 +85,7 @@ const NavigationDesktop = () => {
if (isGroupItem(item)) {
return <NavLinkGroupDesktop key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
} else {
return <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
return <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
}
}) }
</VStack>
......@@ -93,7 +93,7 @@ const NavigationDesktop = () => {
{ hasAccount && (
<Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
<VStack as="ul" spacing="1" alignItems="flex-start">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
</VStack>
</Box>
) }
......
ui/snippets/navigation/NavigationMobile.tsx
View file @ 70a126d1
......@@ -55,7 +55,7 @@ const NavigationMobile = () => {
if (isGroupItem(item)) {
return <NavLinkGroupMobile key={ item.text } { ...item } onClick={ onGroupItemOpen(index) }/>;
} else {
return <NavLink key={ item.text } { ...item }/>;
return <NavLink key={ item.text } item={ item }/>;
}
}) }
</VStack>
......@@ -70,7 +70,7 @@ const NavigationMobile = () => {
style={{ x: mainX }}
>
<VStack as="ul" spacing="1" alignItems="flex-start">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item }/>) }
</VStack>
</Box>
) }
......@@ -105,10 +105,10 @@ const NavigationMobile = () => {
borderColor: 'divider',
}}
>
{ item.map(subItem => <NavLink key={ subItem.text } { ...subItem }/>) }
{ item.map(subItem => <NavLink key={ subItem.text } item={ subItem }/>) }
</Box>
) :
<NavLink key={ item.text } { ...item } mb={ 1 }/>,
<NavLink key={ item.text } item={ item } mb={ 1 }/>,
) }
</Box>
</Box>
......
ui/snippets/profileMenu/ProfileMenuContent.tsx
View file @ 70a126d1
......@@ -33,10 +33,10 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
>
{ email }
</Text>
<NavLink { ...profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
<NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
<Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
<VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
</VStack>
</Box>
<Box mt={ 2 } pt={ 3 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment