tabs query

lib/hooks/useNavItems.tsx

@@ -32,7 +32,7 @@ export default function useNavItems() {
   return React.useMemo(() => {
     const mainNavItems = [
       { text: 'Blocks', url: link('blocks'), icon: blocksIcon, isActive: currentRoute.startsWith('block') },
-      { text: 'Transactions', url: link('txs_validated'), icon: transactionsIcon, isActive: currentRoute.startsWith('tx') },
+      { text: 'Transactions', url: link('txs'), icon: transactionsIcon, isActive: currentRoute.startsWith('tx') },
       { text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens' },
       isMarketplaceFilled ?
         { text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute === 'apps' } : null,
@@ -44,7 +44,7 @@ export default function useNavItems() {
 
     const accountNavItems = [
       { text: 'Watchlist', url: link('watchlist'), icon: watchlistIcon, isActive: currentRoute === 'watchlist' },
-      { text: 'Private tags', url: link('private_tags_address'), icon: privateTagIcon, isActive: currentRoute.startsWith('private_tags') },
+      { text: 'Private tags', url: link('private_tags'), icon: privateTagIcon, isActive: currentRoute.startsWith('private_tags') },
       { text: 'Public tags', url: link('public_tags'), icon: publicTagIcon, isActive: currentRoute === 'public_tags' },
       { text: 'API keys', url: link('api_keys'), icon: apiKeysIcon, isActive: currentRoute === 'api_keys' },
       { text: 'Custom ABI', url: link('custom_abi'), icon: abiIcon, isActive: currentRoute === 'custom_abi' },

lib/link/isAccountRoute.ts

-export const ACCOUNT_ROUTES: Array<RouteName> = [ 'watchlist', 'private_tags_address', 'private_tags_tx', 'public_tags', 'api_keys', 'custom_abi' ];
+export const ACCOUNT_ROUTES: Array<RouteName> = [ 'watchlist', 'private_tags', 'public_tags', 'api_keys', 'custom_abi' ];
 import type { RouteName } from 'lib/link/routes';
 
 export default function isAccountRoute(route: RouteName) {

lib/link/routes.ts

@@ -19,14 +19,10 @@ export const ROUTES = {
     pattern: `${ BASE_PATH }/account/watchlist`,
     crossNetworkNavigation: true,
   },
-  private_tags_address: {
+  private_tags: {
     pattern: `${ BASE_PATH }/account/tag_address`,
     crossNetworkNavigation: true,
   },
-  private_tags_tx: {
-    pattern: `${ BASE_PATH }/account/tag_transaction`,
-    crossNetworkNavigation: true,
-  },
   public_tags: {
     pattern: `${ BASE_PATH }/account/public_tags_request`,
     crossNetworkNavigation: true,
@@ -45,49 +41,22 @@ export const ROUTES = {
   },
 
   // TRANSACTIONS
-  txs_validated: {
+  txs: {
     pattern: `${ BASE_PATH }/txs`,
     crossNetworkNavigation: true,
   },
-  txs_pending: {
-    pattern: `${ BASE_PATH }/pending-transactions`,
-    crossNetworkNavigation: true,
-  },
-  tx_index: {
+  tx: {
     pattern: `${ BASE_PATH }/tx/[id]`,
   },
-  tx_internal: {
-    pattern: `${ BASE_PATH }/tx/[id]/internal-transactions`,
-  },
-  tx_logs: {
-    pattern: `${ BASE_PATH }/tx/[id]/logs`,
-  },
-  tx_raw_trace: {
-    pattern: `${ BASE_PATH }/tx/[id]/raw-trace`,
-  },
-  tx_state: {
-    pattern: `${ BASE_PATH }/tx/[id]/state`,
-  },
 
   // BLOCKS
   blocks: {
     pattern: `${ BASE_PATH }/blocks`,
     crossNetworkNavigation: true,
   },
-  blocks_uncles: {
-    pattern: `${ BASE_PATH }/uncles`,
-    crossNetworkNavigation: true,
-  },
-  blocks_reorgs: {
-    pattern: `${ BASE_PATH }/reorgs`,
-    crossNetworkNavigation: true,
-  },
-  block_index: {
+  block: {
     pattern: `${ BASE_PATH }/block/[id]`,
   },
-  block_txs: {
-    pattern: `${ BASE_PATH }/block/[id]/transactions`,
-  },
 
   // TOKENS
   tokens: {

lib/next/block/BlockNextPage.tsx

@@ -5,16 +5,14 @@ import React from 'react';
 import type { PageParams } from './types';
 
 import Block from 'ui/pages/Block';
-import type { Props as BlockProps } from 'ui/pages/Block';
 
 import getSeo from './getSeo';
 
 type Props = {
   pageParams: PageParams;
-  tab: BlockProps['tab'];
 }
 
-const BlockNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
+const BlockNextPage: NextPage<Props> = ({ pageParams }: Props) => {
   const { title, description } = getSeo(pageParams);
   return (
     <>
@@ -22,7 +20,7 @@ const BlockNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
         <title>{ title }</title>
         <meta name="description" content={ description }/>
       </Head>
-      <Block tab={ tab }/>
+      <Block/>
     </>
   );
 };

lib/next/blocks/BlocksNextPage.tsx

@@ -5,23 +5,21 @@ import React from 'react';
 import type { PageParams } from './types';
 
 import Blocks from 'ui/pages/Blocks';
-import type { Props as BlocksProps } from 'ui/pages/Blocks';
 
 import getSeo from './getSeo';
 
 type Props = {
   pageParams: PageParams;
-  tab: BlocksProps['tab'];
 }
 
-const BlocksNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
+const BlocksNextPage: NextPage<Props> = ({ pageParams }: Props) => {
   const { title } = getSeo(pageParams);
   return (
     <>
       <Head>
         <title>{ title }</title>
       </Head>
-      <Blocks tab={ tab }/>
+      <Blocks/>
     </>
   );
 };

lib/next/tx/TransactionNextPage.tsx

@@ -4,17 +4,15 @@ import React from 'react';
 
 import type { PageParams } from './types';
 
-import type { Props as TransactionProps } from 'ui/pages/Transaction';
 import Transaction from 'ui/pages/Transaction';
 
 import getSeo from './getSeo';
 
 type Props = {
   pageParams: PageParams;
-  tab: TransactionProps['tab'];
 }
 
-const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
+const TransactionNextPage: NextPage<Props> = ({ pageParams }: Props) => {
   const { title, description } = getSeo(pageParams);
   return (
     <>
@@ -22,7 +20,7 @@ const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
         <title>{ title }</title>
         <meta name="description" content={ description }/>
       </Head>
-      <Transaction tab={ tab }/>
+      <Transaction/>
     </>
   );
 };

pages/[network_type]/[network_sub_type]/account/tag_address.tsx

@@ -19,7 +19,7 @@ const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
   return (
     <>
       <Head><title>{ title }</title></Head>
-      <PrivateTags tab="private_tags_address"/>
+      <PrivateTags/>
     </>
   );
 };

pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx

-import type { NextPage } from 'next';
-import Head from 'next/head';
-import React from 'react';
-
-import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import PrivateTags from 'ui/pages/PrivateTags';
-
-type PageParams = {
-  network_type: string;
-  network_sub_type: string;
-}
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const TransactionTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams || {});
-  return (
-    <>
-      <Head><title>{ title }</title></Head>
-      <PrivateTags tab="private_tags_tx"/>
-    </>
-  );
-};
-
-export default TransactionTagsPage;
-
-export { getStaticPaths } from 'lib/next/account/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/block/[id]/transactions.tsx → pages/[network_type]/[network_sub_type]/block/[id].tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
   return (
-    <BlockNextPage tab="block_txs" pageParams={ pageParams }/>
+    <BlockNextPage pageParams={ pageParams }/>
   );
 };
 

pages/[network_type]/[network_sub_type]/block/[id]/index.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import BlockNextPage from 'lib/next/block/BlockNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return (
-    <BlockNextPage tab="block_index" pageParams={ pageParams }/>
-  );
-};
-
-export default BlockPage;
-
-export { getStaticPaths } from 'lib/next/block/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/blocks.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
   return (
-    <BlocksNextPage tab="blocks" pageParams={ pageParams }/>
+    <BlocksNextPage pageParams={ pageParams }/>
   );
 };
 

pages/[network_type]/[network_sub_type]/pending-transactions.tsx

-import type { NextPage } from 'next';
-import Head from 'next/head';
-import React from 'react';
-
-import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import Transactions from 'ui/pages/Transactions';
-
-type PageParams = {
-  network_type: string;
-  network_sub_type: string;
-}
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
-  const title = getNetworkTitle(pageParams || {});
-  return (
-    <>
-      <Head><title>{ title }</title></Head>
-      <Transactions tab="txs_pending"/>
-    </>
-  );
-};
-
-export default AddressTagsPage;
-
-export { getStaticPaths } from 'lib/next/account/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/reorgs.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return (
-    <BlocksNextPage tab="blocks_reorgs" pageParams={ pageParams }/>
-  );
-};
-
-export default BlockPage;
-
-export { getStaticPaths } from 'lib/next/block/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/tx/[id]/index.tsx → pages/[network_type]/[network_sub_type]/tx/[id].tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
   return (
-    <TransactionNextPage tab="tx_index" pageParams={ pageParams }/>
+    <TransactionNextPage pageParams={ pageParams }/>
   );
 };
 

pages/[network_type]/[network_sub_type]/tx/[id]/internal-transactions.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import TransactionNextPage from 'lib/next/tx/TransactionNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return <TransactionNextPage pageParams={ pageParams } tab="tx_internal"/>;
-};
-
-export default TransactionPage;
-
-export { getStaticPaths } from 'lib/next/tx/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/tx/[id]/logs.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import TransactionNextPage from 'lib/next/tx/TransactionNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return <TransactionNextPage pageParams={ pageParams } tab="tx_logs"/>;
-};
-
-export default TransactionPage;
-
-export { getStaticPaths } from 'lib/next/tx/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/tx/[id]/raw-trace.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import TransactionNextPage from 'lib/next/tx/TransactionNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return <TransactionNextPage pageParams={ pageParams } tab="tx_raw_trace"/>;
-};
-
-export default TransactionPage;
-
-export { getStaticPaths } from 'lib/next/tx/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/tx/[id]/state.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import TransactionNextPage from 'lib/next/tx/TransactionNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const TransactionPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return <TransactionNextPage pageParams={ pageParams } tab="tx_state"/>;
-};
-
-export default TransactionPage;
-
-export { getStaticPaths } from 'lib/next/tx/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

pages/[network_type]/[network_sub_type]/txs.tsx

@@ -19,7 +19,7 @@ const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
   return (
     <>
       <Head><title>{ title }</title></Head>
-      <Transactions tab="txs_validated"/>
+      <Transactions/>
     </>
   );
 };

pages/[network_type]/[network_sub_type]/uncles.tsx

-import type { NextPage } from 'next';
-import React from 'react';
-
-import type { PageParams } from 'lib/next/tx/types';
-
-import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
-
-type Props = {
-  pageParams: PageParams;
-}
-
-const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
-  return (
-    <BlocksNextPage tab="blocks_uncles" pageParams={ pageParams }/>
-  );
-};
-
-export default BlockPage;
-
-export { getStaticPaths } from 'lib/next/block/getStaticPaths';
-export { getStaticProps } from 'lib/next/getStaticProps';

ui/block/BlockDetails.tsx

@@ -63,7 +63,7 @@ const BlockDetails = () => {
         title="Transactions"
         hint="The number of transactions in the block."
       >
-        <Link href={ link('block_txs', { id: router.query.id }) }>
+        <Link href={ link('block', { id: router.query.id }, { tab: 'transactions' }) }>
           { block.transactionsNum } transactions
         </Link>
       </DetailsInfoItem>

ui/blocks/BlocksListItem.tsx

@@ -30,7 +30,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
           { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
           <Link
             fontWeight={ 600 }
-            href={ link('block_index', { id: String(data.height) }) }
+            href={ link('block', { id: String(data.height) }) }
           >
             { data.height }
           </Link>

ui/blocks/BlocksTableItem.tsx

@@ -28,7 +28,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
           { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
           <Link
             fontWeight={ 600 }
-            href={ link('block_index', { id: String(data.height) }) }
+            href={ link('block', { id: String(data.height) }) }
           >
             { data.height }
           </Link>

ui/pages/Block.tsx

@@ -10,15 +10,11 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const TABS: Array<RoutedTab> = [
-  { routeName: 'block_index', title: 'Details', component: <BlockDetails/> },
-  { routeName: 'block_txs', title: 'Transactions', component: <BlockTxs/> },
+  { id: 'index', title: 'Details', component: <BlockDetails/> },
+  { id: 'txs', title: 'Transactions', component: <BlockTxs/> },
 ];
 
-export interface Props {
-  tab: RoutedTab['routeName'];
-}
-
-const BlockPageContent = ({ tab }: Props) => {
+const BlockPageContent = () => {
   const router = useRouter();
 
   return (
@@ -26,7 +22,6 @@ const BlockPageContent = ({ tab }: Props) => {
       <PageTitle text={ `Block #${ router.query.id || '' }` }/>
       <RoutedTabs
         tabs={ TABS }
-        defaultActiveTab={ tab }
       />
     </Page>
   );

ui/pages/Blocks.tsx

@@ -8,22 +8,17 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const TABS: Array<RoutedTab> = [
-  { routeName: 'blocks', title: 'All', component: <BlocksContent/> },
-  { routeName: 'blocks_reorgs', title: 'Forked', component: <BlocksContent/> },
-  { routeName: 'blocks_uncles', title: 'Uncles', component: <BlocksContent/> },
+  { id: 'blocks', title: 'All', component: <BlocksContent/> },
+  { id: 'reorgs', title: 'Forked', component: <BlocksContent/> },
+  { id: 'uncles', title: 'Uncles', component: <BlocksContent/> },
 ];
 
-export interface Props {
-  tab: RoutedTab['routeName'];
-}
-
-const BlocksPageContent = ({ tab }: Props) => {
+const BlocksPageContent = () => {
   return (
     <Page>
       <PageTitle text="Blocks"/>
       <RoutedTabs
         tabs={ TABS }
-        defaultActiveTab={ tab }
       />
     </Page>
   );

ui/pages/PrivateTags.tsx

@@ -9,19 +9,15 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 const TABS: Array<RoutedTab> = [
-  { routeName: 'private_tags_address', title: 'Address', component: <PrivateAddressTags/> },
-  { routeName: 'private_tags_tx', title: 'Transaction', component: <PrivateTransactionTags/> },
+  { id: 'address', title: 'Address', component: <PrivateAddressTags/> },
+  { id: 'tx', title: 'Transaction', component: <PrivateTransactionTags/> },
 ];
 
-type Props = {
-  tab: RoutedTab['routeName'];
-}
-
-const PrivateTags = ({ tab }: Props) => {
+const PrivateTags = () => {
   return (
     <Page>
       <PageTitle text="Private tags"/>
-      <RoutedTabs tabs={ TABS } defaultActiveTab={ tab }/>
+      <RoutedTabs tabs={ TABS }/>
     </Page>
   );
 };

ui/pages/Transaction.tsx

@@ -16,24 +16,20 @@ import TxRawTrace from 'ui/tx/TxRawTrace';
 import TxState from 'ui/tx/TxState';
 
 const TABS: Array<RoutedTab> = [
-  { routeName: 'tx_index', title: 'Details', component: <TxDetails/> },
-  { routeName: 'tx_internal', title: 'Internal txn', component: <TxInternals/> },
-  { routeName: 'tx_logs', title: 'Logs', component: <TxLogs/> },
-  { routeName: 'tx_state', title: 'State', component: <TxState/> },
-  { routeName: 'tx_raw_trace', title: 'Raw trace', component: <TxRawTrace/> },
+  { id: 'index', title: 'Details', component: <TxDetails/> },
+  { id: 'internal', title: 'Internal txn', component: <TxInternals/> },
+  { id: 'logs', title: 'Logs', component: <TxLogs/> },
+  { id: 'state', title: 'State', component: <TxState/> },
+  { id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace/> },
 ];
 
-export interface Props {
-  tab: RoutedTab['routeName'];
-}
-
-const TransactionPageContent = ({ tab }: Props) => {
+const TransactionPageContent = () => {
   const link = useLink();
 
   return (
     <Page>
       { /* TODO should be shown only when navigating from txs list */ }
-      <Link mb={ 6 } display="inline-flex" href={ link('txs_validated') }>
+      <Link mb={ 6 } display="inline-flex" href={ link('txs') }>
         <Icon as={ eastArrowIcon } boxSize={ 6 } mr={ 2 } transform="rotate(180deg)"/>
         Transactions
       </Link>
@@ -55,7 +51,6 @@ const TransactionPageContent = ({ tab }: Props) => {
       </Flex>
       <RoutedTabs
         tabs={ TABS }
-        defaultActiveTab={ tab }
       />
     </Page>
   );

ui/pages/Transactions.tsx

@@ -12,21 +12,17 @@ import TxsPending from 'ui/txs/TxsPending';
 import TxsValidated from 'ui/txs/TxsValidated';
 
 const TABS: Array<RoutedTab> = [
-  { routeName: 'txs_validated', title: 'Validated', component: <TxsValidated/> },
-  { routeName: 'txs_pending', title: 'Pending', component: <TxsPending/> },
+  { id: 'validated', title: 'Validated', component: <TxsValidated/> },
+  { id: 'pending', title: 'Pending', component: <TxsPending/> },
 ];
 
-type Props = {
-  tab: RoutedTab['routeName'];
-}
-
-const Transactions = ({ tab }: Props) => {
+const Transactions = () => {
 
   return (
     <Page>
       <Box h="100%">
         <PageTitle text="Transactions"/>
-        <RoutedTabs tabs={ TABS } defaultActiveTab={ tab }/>
+        <RoutedTabs tabs={ TABS }/>
       </Box>
     </Page>
   );

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -7,12 +7,11 @@ import {
 } from '@chakra-ui/react';
 import type { StyleProps } from '@chakra-ui/styled-system';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { RoutedTab } from './types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import { link } from 'lib/link/link';
 
 import RoutedTabsMenu from './RoutedTabsMenu';
 import useAdaptiveTabs from './useAdaptiveTabs';
@@ -26,29 +25,36 @@ const hiddenItemStyles: StyleProps = {
 
 interface Props {
   tabs: Array<RoutedTab>;
-  defaultActiveTab: RoutedTab['routeName'];
 }
 
-const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
-  const defaultIndex = tabs.findIndex(({ routeName }) => routeName === defaultActiveTab);
-  const isMobile = useIsMobile();
+const RoutedTabs = ({ tabs }: Props) => {
+  const router = useRouter();
+  const [ activeTabIndex, setActiveTabIndex ] = useState<number>(tabs.length + 1);
+  useEffect(() => {
+    if (router.isReady) {
+      let tabIndex = 0;
+      if (router.query.tab) {
+        tabIndex = tabs.findIndex(({ id }) => id === router.query.tab);
+        if (tabIndex < 0) {
+          tabIndex = 0;
+        }
+      }
+      setActiveTabIndex(tabIndex);
+    }
+  }, [ tabs, router ]);
 
-  const [ activeTab ] = React.useState<number>(defaultIndex);
+  const isMobile = useIsMobile();
   const { tabsCut, tabsList, tabsRefs, listRef } = useAdaptiveTabs(tabs, isMobile);
 
-  const router = useRouter();
-
   const handleTabChange = React.useCallback((index: number) => {
     const nextTab = tabs[index];
 
-    if (nextTab.routeName) {
-      const newUrl = link(nextTab.routeName, router.query);
-      router.push(newUrl, undefined, { shallow: true });
-    }
+    router.query.tab = nextTab.id;
+    router.push(router);
   }, [ tabs, router ]);
 
   return (
-    <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTab }>
+    <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTabIndex }>
       <TabList
         marginBottom={{ base: 6, lg: 12 }}
         flexWrap="nowrap"
@@ -68,14 +74,14 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
         }}
       >
         { tabsList.map((tab, index) => {
-          if (!tab.routeName) {
+          if (!tab.id) {
             return (
               <RoutedTabsMenu
                 key="menu"
                 tabs={ tabs }
-                activeTab={ tabs[activeTab] }
+                activeTab={ tabs[activeTabIndex] }
                 tabsCut={ tabsCut }
-                isActive={ activeTab >= tabsCut }
+                isActive={ activeTabIndex >= tabsCut }
                 styles={ tabsCut < tabs.length ?
                   // initially our cut is 0 and we don't want to show the menu button too
                   // but we want to keep it in the tabs row so it won't collapse
@@ -91,7 +97,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
 
           return (
             <Tab
-              key={ tab.routeName }
+              key={ tab.id }
               ref={ tabsRefs[index] }
               { ...(index < tabsCut ? {} : hiddenItemStyles) }
               scrollSnapAlign="start"
@@ -102,7 +108,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
         }) }
       </TabList>
       <TabPanels>
-        { tabsList.map((tab) => <TabPanel padding={ 0 } key={ tab.routeName }>{ tab.component }</TabPanel>) }
+        { tabsList.map((tab) => <TabPanel padding={ 0 } key={ tab.id }>{ tab.component }</TabPanel>) }
       </TabPanels>
     </Tabs>
   );

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -49,10 +49,10 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
         <PopoverBody display="flex" flexDir="column">
           { tabs.slice(tabsCut).map((tab, index) => (
             <Button
-              key={ tab.routeName }
+              key={ tab.id }
               variant="ghost"
               onClick={ handleItemClick }
-              isActive={ activeTab.routeName === tab.routeName }
+              isActive={ activeTab.id === tab.id }
               justifyContent="left"
               data-index={ index }
             >

ui/shared/RoutedTabs/types.ts

-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 | null;
+  id: string;
   title: string;
   component: React.ReactNode;
 }
 
 export interface MenuButton {
-  routeName: null;
+  id: null;
   title: string;
   component: null;
 }

ui/shared/RoutedTabs/utils.ts

@@ -3,7 +3,7 @@ import type { MenuButton } from './types';
 import { middot } from 'lib/html-entities';
 
 export const menuButton: MenuButton = {
-  routeName: null,
+  id: null,
   title: `${ middot }${ middot }${ middot }`,
   component: null,
 };

ui/shared/address/AddressLink.tsx

@@ -19,11 +19,11 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
   const link = useLink();
   let url;
   if (type === 'transaction') {
-    url = link('tx_index', { id: id || hash });
+    url = link('tx', { id: id || hash });
   } else if (type === 'token') {
     url = link('token_index', { id: id || hash });
   } else if (type === 'block') {
-    url = link('block_index', { id: id || hash });
+    url = link('block', { id: id || hash });
   } else {
     url = link('address_index', { id: id || hash });
   }

ui/txs/TxAdditionalInfo.tsx

@@ -79,7 +79,7 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
           <Text fontWeight="600" as="span">{ tx.position }</Text>
         </Box>
       </Box>
-      <Link fontSize="sm" href={ link('tx_index', { id: tx.hash }) }>More details</Link>
+      <Link fontSize="sm" href={ link('tx', { id: tx.hash }) }>More details</Link>
     </>
   );
 };

ui/txs/TxsListItem.tsx

@@ -79,7 +79,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
         </Flex>
         <Box mt={ 2 }>
           <Text as="span">Block </Text>
-          <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
+          <Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
         </Box>
         <Flex alignItems="center" height={ 6 } mt={ 6 }>
           <Address width="calc((100%-40px)/2)">

ui/txs/TxsTableItem.tsx

@@ -104,7 +104,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
         </TruncatedTextTooltip>
       </Td>
       <Td>
-        <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
+        <Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
       </Td>
       <Show above="xl">
         <Td>