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() {
return React.useMemo(() => {
const mainNavItems = [
{ 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: 'Apps', pathname: basePath + '/apps', icon: appsIcon },
{ 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) => {
return (
<>
<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 = () => {
</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 } isActive={ router.asPath === item.pathname }/>) }
{ mainNavItems.map((item) =>
<NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(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 } isActive={ router.asPath === item.pathname }/>) }
{ accountNavItems.map((item) =>
<NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath.startsWith(item.pathname) }/>) }
</VStack>
</Box>
<NavFooter isCollapsed={ isCollapsed }/>
......
ui/blocks/navigation/NavigationMobile.tsx
View file @ c86070a2
......@@ -14,12 +14,12 @@ const NavigationMobile = () => {
<>
<Box as="nav" mt={ 6 }>
<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>
</Box>
<Box as="nav" mt={ 6 }>
<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>
</Box>
<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 useBasePath from 'lib/hooks/useBasePath';
import AccountPageHeader from 'ui/shared/AccountPageHeader';
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 (
<Page>
<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>
);
};
......
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