Skip to content

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

basic implementation

parent ad8c07d9
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 91 deletions
pages/[network_type]/[network_sub_type]/account/tag_address.tsx
View file @ b0e0fa24
...@@ -19,7 +19,7 @@ const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => { ...@@ -19,7 +19,7 @@ const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
return ( return (
<> <>
<Head><title>{ title }</title></Head> <Head><title>{ title }</title></Head>
<PrivateTags tab="address"/> <PrivateTags tab="private_tags_address"/>
</> </>
); );
}; };
......
pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx
View file @ b0e0fa24
...@@ -19,7 +19,7 @@ const TransactionTagsPage: NextPage<Props> = ({ pageParams }: Props) => { ...@@ -19,7 +19,7 @@ const TransactionTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
return ( return (
<> <>
<Head><title>{ title }</title></Head> <Head><title>{ title }</title></Head>
<PrivateTags tab="transaction"/> <PrivateTags tab="private_tags_tx"/>
</> </>
); );
}; };
......
pages/[network_type]/[network_sub_type]/tx/[id]/index.tsx
View file @ b0e0fa24
...@@ -11,7 +11,7 @@ type Props = { ...@@ -11,7 +11,7 @@ type Props = {
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return ( return (
<TransactionNextPage tab="details" pageParams={ pageParams }/> <TransactionNextPage tab="tx_index" pageParams={ pageParams }/>
); );
}; };
......
pages/[network_type]/[network_sub_type]/tx/[id]/internal-transactions.tsx
View file @ b0e0fa24
...@@ -10,7 +10,7 @@ type Props = { ...@@ -10,7 +10,7 @@ type Props = {
} }
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return <TransactionNextPage pageParams={ pageParams } tab="internal_txn"/>; return <TransactionNextPage pageParams={ pageParams } tab="tx_internal"/>;
}; };
export default TransactionPage; export default TransactionPage;
......
pages/[network_type]/[network_sub_type]/tx/[id]/logs.tsx
View file @ b0e0fa24
...@@ -10,7 +10,7 @@ type Props = { ...@@ -10,7 +10,7 @@ type Props = {
} }
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return <TransactionNextPage pageParams={ pageParams } tab="logs"/>; return <TransactionNextPage pageParams={ pageParams } tab="tx_logs"/>;
}; };
export default TransactionPage; export default TransactionPage;
......
pages/[network_type]/[network_sub_type]/tx/[id]/raw-trace.tsx
View file @ b0e0fa24
...@@ -10,7 +10,7 @@ type Props = { ...@@ -10,7 +10,7 @@ type Props = {
} }
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return <TransactionNextPage pageParams={ pageParams } tab="raw_trace"/>; return <TransactionNextPage pageParams={ pageParams } tab="tx_raw_trace"/>;
}; };
export default TransactionPage; export default TransactionPage;
......
pages/[network_type]/[network_sub_type]/tx/[id]/state.tsx
View file @ b0e0fa24
...@@ -10,7 +10,7 @@ type Props = { ...@@ -10,7 +10,7 @@ type Props = {
} }
const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => { const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
return <TransactionNextPage pageParams={ pageParams } tab="state"/>; return <TransactionNextPage pageParams={ pageParams } tab="tx_state"/>;
}; };
export default TransactionPage; export default TransactionPage;
......
ui/pages/PrivateTags.tsx
View file @ b0e0fa24
import { import { Box } from '@chakra-ui/react'; import React from 'react';
Box,
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
} from '@chakra-ui/react';
import React, { useCallback, useState } from 'react';
import useLink from 'lib/link/useLink';
import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags'; import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags'; import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
import Page from 'ui/shared/Page'; import Page from 'ui/shared/Page';
import PageHeader from 'ui/shared/PageHeader'; import PageHeader from 'ui/shared/PageHeader';
import type { RoutedTab } from 'ui/shared/RoutedTabs';
import RoutedTabs from 'ui/shared/RoutedTabs';
const TABS = [ 'address', 'transaction' ] as const; const TABS: Array<RoutedTab> = [
{ routeName: 'private_tags_address', title: 'Address', component: <PrivateAddressTags/> },
type TabName = typeof TABS[number]; { routeName: 'private_tags_tx', title: 'Transaction', component: <PrivateTransactionTags/> },
];
type Props = { type Props = {
tab: TabName; tab: RoutedTab['routeName'];
} }
const PrivateTags = ({ tab }: Props) => { const PrivateTags = ({ tab }: Props) => {
const [ , setActiveTab ] = useState<TabName>(tab);
const link = useLink();
const onChangeTab = useCallback((index: number) => {
setActiveTab(TABS[index]);
const newUrl = link(TABS[index] === 'address' ? 'private_tags_address' : 'private_tags_tx');
history.replaceState(history.state, '', newUrl);
}, [ link ]);
return ( return (
<Page> <Page>
<Box h="100%"> <Box h="100%">
<PageHeader text="Private tags"/> <PageHeader text="Private tags"/>
<Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ onChangeTab } defaultIndex={ TABS.indexOf(tab) }> <RoutedTabs tabs={ TABS } defaultActiveTab={ tab }/>
<TabList marginBottom={{ base: 6, lg: 8 }}>
<Tab>Address</Tab>
<Tab>Transaction</Tab>
</TabList>
<TabPanels>
<TabPanel padding={ 0 }>
<PrivateAddressTags/>
</TabPanel>
<TabPanel padding={ 0 }>
<PrivateTransactionTags/>
</TabPanel>
</TabPanels>
</Tabs>
</Box> </Box>
</Page> </Page>
); );
......
ui/pages/Transaction.tsx
View file @ b0e0fa24
import {
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
} from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import type { RouteName } from 'lib/link/routes';
import useLink from 'lib/link/useLink';
import Page from 'ui/shared/Page'; import Page from 'ui/shared/Page';
import PageHeader from 'ui/shared/PageHeader'; import PageHeader from 'ui/shared/PageHeader';
import type { RoutedTab } from 'ui/shared/RoutedTabs';
import RoutedTabs from 'ui/shared/RoutedTabs';
import TxDetails from 'ui/tx/TxDetails'; import TxDetails from 'ui/tx/TxDetails';
import TxInternals from 'ui/tx/TxInternals'; import TxInternals from 'ui/tx/TxInternals';
import TxLogs from 'ui/tx/TxLogs'; import TxLogs from 'ui/tx/TxLogs';
import TxRawTrace from 'ui/tx/TxRawTrace'; import TxRawTrace from 'ui/tx/TxRawTrace';
import TxState from 'ui/tx/TxState'; import TxState from 'ui/tx/TxState';
interface Tab { const TABS: Array<RoutedTab> = [
type: 'details' | 'internal_txn' | 'logs' | 'raw_trace' | 'state'; { routeName: 'tx_index', title: 'Details', component: <TxDetails/> },
name: string; { routeName: 'tx_internal', title: 'Internal txn', component: <TxInternals/> },
path?: string; { routeName: 'tx_logs', title: 'Logs', component: <TxLogs/> },
component?: React.ReactNode; { routeName: 'tx_state', title: 'State', component: <TxState/> },
routeName: RouteName; { routeName: 'tx_raw_trace', title: 'Raw trace', component: <TxRawTrace/> },
}
const TABS: Array<Tab> = [
{ type: 'details', routeName: 'tx_index', name: 'Details', component: <TxDetails/> },
{ type: 'internal_txn', routeName: 'tx_internal', name: 'Internal txn', component: <TxInternals/> },
{ type: 'logs', routeName: 'tx_logs', name: 'Logs', component: <TxLogs/> },
{ type: 'state', routeName: 'tx_state', name: 'State', component: <TxState/> },
{ type: 'raw_trace', routeName: 'tx_raw_trace', name: 'Raw trace', component: <TxRawTrace/> },
]; ];
export interface Props { export interface Props {
tab: Tab['type']; tab: RoutedTab['routeName'];
} }
const TransactionPageContent = ({ tab }: Props) => { const TransactionPageContent = ({ tab }: Props) => {
const [ , setActiveTab ] = React.useState<Tab['type']>(tab);
const router = useRouter();
const link = useLink();
const handleTabChange = React.useCallback((index: number) => {
const nextTab = TABS[index];
setActiveTab(nextTab.type);
const newUrl = link(nextTab.routeName, { id: router.query.id as string });
window.history.replaceState(history.state, '', newUrl);
}, [ setActiveTab, link, router.query.id ]);
const defaultIndex = TABS.map(({ type }) => type).indexOf(tab);
return ( return (
<Page> <Page>
<PageHeader text="Transaction details"/> <PageHeader text="Transaction details"/>
<Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } defaultIndex={ defaultIndex }> <RoutedTabs tabs={ TABS } defaultActiveTab={ tab }/>
<TabList marginBottom={{ base: 6, lg: 8 }} flexWrap="wrap">
{ TABS.map((tab) => <Tab key={ tab.type }>{ tab.name }</Tab>) }
</TabList>
<TabPanels>
{ TABS.map((tab) => <TabPanel padding={ 0 } key={ tab.type }>{ tab.component || tab.name }</TabPanel>) }
</TabPanels>
</Tabs>
</Page> </Page>
); );
}; };
......
ui/shared/RoutedTabs.tsx 0 → 100644
View file @ b0e0fa24
import {
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
} from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { link } from 'lib/link/link';
import type { RouteName } from 'lib/link/routes';
export interface RoutedTab {
// for simplicity we use routeName as an id
// if we migrate to non-Next.js router that should be revised
// id: string;
routeName: RouteName;
title: string;
component: React.ReactNode;
}
interface Props {
tabs: Array<RoutedTab>;
defaultActiveTab: RoutedTab['routeName'];
}
const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
const [ , setActiveTab ] = React.useState<RoutedTab['routeName']>(defaultActiveTab);
const router = useRouter();
const handleTabChange = React.useCallback((index: number) => {
const nextTab = tabs[index];
setActiveTab(nextTab.routeName);
const newUrl = link(nextTab.routeName, router.query);
router.push(newUrl, undefined, { shallow: true });
}, [ tabs, router ]);
const defaultIndex = tabs.map(({ routeName }) => routeName).indexOf(defaultActiveTab);
return (
<Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } defaultIndex={ defaultIndex }>
<TabList marginBottom={{ base: 6, lg: 8 }} flexWrap="wrap">
{ tabs.map((tab) => <Tab key={ tab.routeName }>{ tab.title }</Tab>) }
</TabList>
<TabPanels>
{ tabs.map((tab) => <TabPanel padding={ 0 } key={ tab.routeName }>{ tab.component }</TabPanel>) }
</TabPanels>
</Tabs>
);
};
export default React.memo(RoutedTabs);
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