lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

new route trees

Browse Source
This commit is contained in:
tom
2022-08-13 14:25:56 +03:00
parent 73ce8e4f27
commit 32374ea077
12 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.js
+9
View File
@@ -7,4 +7,13 @@ module.exports = withReactSvg({
webpack(config) {
return config;
},
async redirects() {
return [
{
source: '/',
destination: '/xdai/mainnet',
permanent: true,
},
];
},
});
pages/api-keys.tsx → pages/[network_name]/[network_type]/api-keys.tsx
View File
pages/[network_name]/[network_type]/index.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Center } from '@chakra-ui/react';
import type { NextPage } from 'next';
import { useRouter } from 'next/router';
import React from 'react';
import Page from 'ui/shared/Page/Page';
const Home: NextPage = () => {
const router = useRouter();
return (
<Page>
<Center h="100%">
home page for { router.query.network_name } { router.query.network_type } network
</Center>
</Page>
);
};
export default Home;
pages/private-tags.tsx → pages/[network_name]/[network_type]/private-tags.tsx
View File
pages/public-tags.tsx → pages/[network_name]/[network_type]/public-tags.tsx
View File
pages/watchlist.tsx → pages/[network_name]/[network_type]/watchlist.tsx
View File
pages/index.tsx
+1 -11
View File
@@ -1,17 +1,7 @@
import { Center } from '@chakra-ui/react';
import type { NextPage } from 'next';
import React from 'react';
import Page from 'ui/shared/Page/Page';
const Home: NextPage = () => {
return (
<Page>
<Center h="100%">
Home Page
</Center>
</Page>
);
return null;
};
export default Home;
ui/navigation/NavLink.tsx
+2 -5
View File
@@ -1,6 +1,5 @@
import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
@@ -9,15 +8,13 @@ import useColors from './useColors';
interface Props {
isCollapsed: boolean;
isActive: boolean;
pathname: string;
text: string;
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
}
const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
const router = useRouter();
const isActive = router.pathname === pathname;
const NavLink = ({ text, pathname, icon, isCollapsed, isActive }: Props) => {
const colors = useColors();
return (
ui/navigation/Navigation.tsx
+22 -18
View File
@@ -1,5 +1,6 @@
import { ChevronLeftIcon } from '@chakra-ui/icons';
import { Flex, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import abiIcon from 'icons/ABI.svg';
@@ -20,23 +21,26 @@ import NavFooter from './NavFooter';
import NavLink from './NavLink';
import NetworkMenu from './networkMenu/NetworkMenu';
const mainNavItems = [
{ text: 'Blocks', pathname: '/blocks', icon: blocksIcon },
{ text: 'Transactions', pathname: '/transactions', icon: transactionsIcon },
{ text: 'Tokens', pathname: '/tokens', icon: tokensIcon },
{ text: 'Apps', pathname: '/apps', icon: appsIcon },
{ text: 'Other', pathname: '/other', icon: gearIcon },
];
const accountNavItems = [
{ text: 'Watchlist', pathname: '/watchlist', icon: watchlistIcon },
{ text: 'Private tags', pathname: '/private-tags', icon: privateTagIcon },
{ text: 'Public tags', pathname: '/public-tags', icon: publicTagIcon },
{ text: 'API keys', pathname: '/api-keys', icon: apiKeysIcon },
{ text: 'Custom ABI', pathname: '/custom-abi', icon: abiIcon },
];
const Navigation = () => {
const router = useRouter();
const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
const mainNavItems = [
{ text: 'Blocks', pathname: basePathName + '/blocks', icon: blocksIcon },
{ text: 'Transactions', pathname: basePathName + '/transactions', icon: transactionsIcon },
{ text: 'Tokens', pathname: basePathName + '/tokens', icon: tokensIcon },
{ text: 'Apps', pathname: basePathName + '/apps', icon: appsIcon },
{ text: 'Other', pathname: basePathName + '/other', icon: gearIcon },
];
const accountNavItems = [
{ text: 'Watchlist', pathname: basePathName + '/watchlist', icon: watchlistIcon },
{ text: 'Private tags', pathname: basePathName + '/private-tags', icon: privateTagIcon },
{ text: 'Public tags', pathname: basePathName + '/public-tags', icon: publicTagIcon },
{ text: 'API keys', pathname: basePathName + '/api-keys', icon: apiKeysIcon },
{ text: 'Custom ABI', pathname: basePathName + '/custom-abi', icon: abiIcon },
];
const [ isCollapsed, setCollapsedState ] = React.useState(cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED) === 'true');
const handleTogglerClick = React.useCallback(() => {
@@ -86,12 +90,12 @@ const Navigation = () => {
</Box>
<Box as="nav" mt={ 14 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
{ mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) }
</VStack>
</Box>
<Box as="nav" mt={ 12 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) }
</VStack>
</Box>
<NavFooter isCollapsed={ isCollapsed }/>
ui/navigation/networkMenu/NetworkMenuLink.tsx
+6 -4
View File
@@ -8,15 +8,17 @@ import checkIcon from 'icons/check.svg';
import useColors from '../useColors';
type Props = NetworkLink;
interface Props extends NetworkLink {
isActive: boolean;
}
const NetworkMenuLink = ({ name, url, icon, iconColor }: Props) => {
const isActive = name === 'Gnosis Chain';
const NetworkMenuLink = ({ name, pathname, icon, iconColor, isActive, isNewUi }: Props) => {
const colors = useColors();
const href = isNewUi ? pathname : 'https://blockscout.com' + pathname;
return (
<Box as="li" listStyleType="none">
<NextLink href={ url } passHref>
<NextLink href={ href } passHref>
<Flex
as="a"
px={ 4 }
ui/navigation/networkMenu/NetworkMenuPopup.tsx
+16 -12
View File
@@ -1,4 +1,5 @@
import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, useColorModeValue } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import type { NetworkLink } from './types';
@@ -19,26 +20,29 @@ type PopupTab = 'mainnets' | 'testnets' | 'other';
const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
const NetworkMenuPopup = () => {
const router = useRouter();
const gnosisChainIconColor = useColorModeValue('black', 'white');
const poaChainIconColor = useColorModeValue('gray.100', 'gray.100');
const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
const LINKS: Record<PopupTab, Array<NetworkLink>> = {
mainnets: [
{ name: 'Gnosis Chain', url: '/xdai/mainnet', icon: gnosisIcon, iconColor: gnosisChainIconColor },
{ name: 'Optimism on Gnosis Chain', url: '/xdai/optimism', icon: gnosisIcon, iconColor: gnosisChainIconColor },
{ name: 'Arbitrum on xDai', url: '/xdai/aox', icon: arbitrumIcon },
{ name: 'Ethereum', url: '/eth/mainnet', icon: ethereumIcon },
{ name: 'Ethereum Classic', url: '/etc/mainnet', icon: ethereumClassicIcon },
{ name: 'POA', url: '/poa/core', icon: poaIcon, iconColor: poaChainIconColor },
{ name: 'RSK', url: '/rsk/mainnet', icon: rskIcon },
{ name: 'Gnosis Chain', pathname: '/xdai/mainnet', icon: gnosisIcon, iconColor: gnosisChainIconColor, isNewUi: true },
{ name: 'Optimism on Gnosis Chain', pathname: '/xdai/optimism', icon: gnosisIcon, iconColor: gnosisChainIconColor },
{ name: 'Arbitrum on xDai', pathname: '/xdai/aox', icon: arbitrumIcon },
{ name: 'Ethereum', pathname: '/eth/mainnet', icon: ethereumIcon },
{ name: 'Ethereum Classic', pathname: '/etc/mainnet', icon: ethereumClassicIcon },
{ name: 'POA', pathname: '/poa/core', icon: poaIcon, iconColor: poaChainIconColor },
{ name: 'RSK', pathname: '/rsk/mainnet', icon: rskIcon },
],
testnets: [
{ name: 'Gnosis Chain Testnet', url: '/xdai/testnet', icon: arbitrumIcon },
{ name: 'POA Sokol', url: '/poa/sokol', icon: poaSokolIcon },
{ name: 'Gnosis Chain Testnet', pathname: '/xdai/testnet', icon: arbitrumIcon },
{ name: 'POA Sokol', pathname: '/poa/sokol', icon: poaSokolIcon },
],
other: [
{ name: 'ARTIS Σ1', url: '/artis/sigma1', icon: artisIcon },
{ name: 'LUKSO L14', url: '/lukso/l14', icon: poaIcon, iconColor: poaChainIconColor },
{ name: 'ARTIS Σ1', pathname: '/artis/sigma1', icon: artisIcon },
{ name: 'LUKSO L14', pathname: '/lukso/l14', icon: poaIcon, iconColor: poaChainIconColor },
],
};
@@ -54,7 +58,7 @@ const NetworkMenuPopup = () => {
{ TABS.map((tab) => (
<TabPanel key={ tab } p={ 0 }>
<VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
{ LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link }/>) }
{ LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link } isActive={ basePathName === link.pathname }/>) }
</VStack>
</TabPanel>
)) }
ui/navigation/networkMenu/types.ts
+2 -1
View File
@@ -1,8 +1,9 @@
import type { FunctionComponent, SVGAttributes } from 'react';
export interface NetworkLink {
url: string;
pathname: string;
name: string;
icon: FunctionComponent<SVGAttributes<SVGElement>>;
iconColor?: string;
isNewUi?: boolean;
}