Skip to content

F
frontend
Commit c86070a2 authored by tom's avatar tom
Browse files
Options

tabs switching

parent 93704b0b
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 8 deletions
lib/hooks/useNavItems.tsx
View file @ c86070a2
...@@ -19,7 +19,7 @@ export default function useNavItems() { ...@@ -19,7 +19,7 @@ export default function useNavItems() {
return React.useMemo(() => { return React.useMemo(() => {
const mainNavItems = [ const mainNavItems = [
{ text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon }, { text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon },
{ text: 'Transactions', pathname: basePath + '/transactions', icon: transactionsIcon }, { text: 'Transactions', pathname: basePath + '/tx', icon: transactionsIcon },
{ text: 'Tokens', pathname: basePath + '/tokens', icon: tokensIcon }, { text: 'Tokens', pathname: basePath + '/tokens', icon: tokensIcon },
{ text: 'Apps', pathname: basePath + '/apps', icon: appsIcon }, { text: 'Apps', pathname: basePath + '/apps', icon: appsIcon },
{ text: 'Other', pathname: basePath + '/other', icon: gearIcon }, { text: 'Other', pathname: basePath + '/other', icon: gearIcon },
......
pages/[network_type]/[network_sub_type]/tx/[id]/index.tsx
View file @ c86070a2
...@@ -20,7 +20,7 @@ const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { ...@@ -20,7 +20,7 @@ const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return ( return (
<> <>
<Head><title>{ title }</title></Head> <Head><title>{ title }</title></Head>
<Transaction/> <Transaction tab="details"/>
</> </>
); );
}; };
......
pages/[network_type]/[network_sub_type]/tx/[id]/internal-transactions.tsx 0 → 100644
View file @ c86070a2
import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
import Head from 'next/head';
import React from 'react';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
import Transaction from 'ui/pages/Transaction';
type PageParams = {
network_type: string;
network_sub_type: string;
id: string;
}
type Props = {
pageParams: PageParams;
}
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
const title = getNetworkTitle(pageParams || {});
return (
<>
<Head><title>{ title }</title></Head>
<Transaction tab="internal_txn"/>
</>
);
};
export default TransactionPage;
export const getStaticPaths: GetStaticPaths = async() => {
return { paths: [], fallback: true };
};
export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
return {
props: {
pageParams: context.params as PageParams,
},
};
};
ui/blocks/navigation/NavigationDesktop.tsx
View file @ c86070a2
...@@ -66,12 +66,14 @@ const NavigationDesktop = () => { ...@@ -66,12 +66,14 @@ const NavigationDesktop = () => {
</Box> </Box>
<Box as="nav" mt={ 14 }> <Box as="nav" mt={ 14 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) } { mainNavItems.map((item) =>
<NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
</VStack> </VStack>
</Box> </Box>
<Box as="nav" mt={ 12 }> <Box as="nav" mt={ 12 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) } { accountNavItems.map((item) =>
<NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
</VStack> </VStack>
</Box> </Box>
<NavFooter isCollapsed={ isCollapsed }/> <NavFooter isCollapsed={ isCollapsed }/>
......
ui/blocks/navigation/NavigationMobile.tsx
View file @ c86070a2
...@@ -14,12 +14,12 @@ const NavigationMobile = () => { ...@@ -14,12 +14,12 @@ const NavigationMobile = () => {
<> <>
<Box as="nav" mt={ 6 }> <Box as="nav" mt={ 6 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) } { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath.startsWith(item.pathname) }/>) }
</VStack> </VStack>
</Box> </Box>
<Box as="nav" mt={ 6 }> <Box as="nav" mt={ 6 }>
<VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) } { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath.startsWith(item.pathname) }/>) }
</VStack> </VStack>
</Box> </Box>
<NavFooter/> <NavFooter/>
......
ui/pages/Transaction.tsx
View file @ c86070a2
import {
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
} from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import useBasePath from 'lib/hooks/useBasePath';
import AccountPageHeader from 'ui/shared/AccountPageHeader'; import AccountPageHeader from 'ui/shared/AccountPageHeader';
import Page from 'ui/shared/Page'; import Page from 'ui/shared/Page';
const TransactionPageContent = () => { interface Tab {
type: 'details' | 'internal_txn';
path: string;
name: string;
}
const TABS: Array<Tab> = [
{ type: 'details', path: '', name: 'Details' },
{ type: 'internal_txn', path: '/internal-transactions', name: 'Internal txn' },
];
interface Props {
tab: Tab['type'];
}
const TransactionPageContent = ({ tab }: Props) => {
const [ , setActiveTab ] = React.useState<Tab['type']>(tab);
const router = useRouter();
const basePath = useBasePath();
const handleTabChange = React.useCallback((index: number) => {
const nextTab = TABS[index];
setActiveTab(nextTab.type);
const newUrl = basePath + '/tx/' + router.query.id + nextTab.path;
window.history.replaceState(history.state, '', newUrl);
}, [ setActiveTab, basePath, router ]);
const defaultIndex = TABS.map(({ type }) => type).indexOf(tab);
return ( return (
<Page> <Page>
<AccountPageHeader text="Transaction details"/> <AccountPageHeader text="Transaction details"/>
FOO BAR <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } defaultIndex={ defaultIndex }>
<TabList marginBottom={{ base: 6, lg: 8 }}>
{ TABS.map((tab) => <Tab key={ tab.type }>{ tab.name }</Tab>) }
</TabList>
<TabPanels>
<TabPanel padding={ 0 }>
Details
</TabPanel>
<TabPanel padding={ 0 }>
Internal txn
</TabPanel>
</TabPanels>
</Tabs>
</Page> </Page>
); );
}; };
......
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