refactor the rest

lib/hooks/useBasePath.tsx

@@ -1,6 +0,0 @@
-import { useRouter } from 'next/router';
-
-export default function useBasePath() {
-  const router = useRouter();
-  return `/${ router.query.network_type }/${ router.query.network_sub_type }`;
-}

lib/link/link.ts

@@ -1,3 +1,5 @@
+import isBrowser from 'lib/isBrowser';
+
 import { ROUTES } from './routes';
 import type { RouteName } from './routes';
 
@@ -14,7 +16,7 @@ export function link(routeName: RouteName, urlParams?: Record<string, string | u
     return paramValue ? `/${ paramValue }` : '';
   });
 
-  const url = new URL(path, window.location.origin);
+  const url = new URL(path, isBrowser() ? window.location.origin : 'https://blockscout.com');
 
   queryParams && Object.entries(queryParams).forEach(([ key, value ]) => {
     url.searchParams.append(key, value);

lib/link/routes.ts

@@ -76,15 +76,30 @@ export const ROUTES = {
     pattern: `${ BASE_PATH }/tokens`,
     crossNetworkNavigation: true,
   },
+  token_index: {
+    pattern: `${ BASE_PATH }/token/[id]`,
+    crossNetworkNavigation: true,
+  },
+
+  // ADDRESSES
+  address_index: {
+    pattern: `${ BASE_PATH }/address/[id]`,
+    crossNetworkNavigation: true,
+  },
 
   // APPS
   apps: {
     pattern: `${ BASE_PATH }/apps`,
   },
 
+  // SEARCH
+  search_results: {
+    pattern: `${ BASE_PATH }/apps`,
+  },
+
   // ??? what URL will be here
   other: {
-    pattern: `${ BASE_PATH }/other`,
+    pattern: `${ BASE_PATH }/search-results`,
   },
 };
 

ui/blocks/networkMenu/NetworkLogo.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import type { FunctionComponent, SVGAttributes } from 'react';
 
 import blockscoutLogo from 'icons/logo.svg';
-import useBasePath from 'lib/hooks/useBasePath';
 import useNetwork from 'lib/hooks/useNetwork';
+import useLink from 'lib/link/useLink';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 interface Props {
@@ -15,7 +15,8 @@ interface Props {
 
 const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
-  const href = useBasePath();
+  const link = useLink();
+  const href = link('network_index');
   const network = useNetwork();
   const logo = network?.logo;
 

ui/blocks/searchBar/SearchBar.tsx

@@ -1,15 +1,15 @@
 import type { ChangeEvent, FormEvent } from 'react';
 import React from 'react';
 
-import useBasePath from 'lib/hooks/useBasePath';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useLink from 'lib/link/useLink';
 
 import SearchBarDesktop from './SearchBarDesktop';
 import SearchBarMobile from './SearchBarMobile';
 
 const SearchBar = () => {
   const [ value, setValue ] = React.useState('');
-  const basePath = useBasePath();
+  const link = useLink();
   const isMobile = useIsMobile();
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -18,8 +18,9 @@ const SearchBar = () => {
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    window.location.assign(`https://blockscout.com${ basePath }/search-results?q=${ value }`);
-  }, [ value, basePath ]);
+    const url = link('search_results', undefined, { q: value });
+    window.location.assign(url);
+  }, [ link, value ]);
 
   if (isMobile) {
     return (

ui/pages/PrivateTags.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
-import useBasePath from 'lib/hooks/useBasePath';
+import useLink from 'lib/link/useLink';
 import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
 import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
 import Page from 'ui/shared/Page';
@@ -25,13 +25,13 @@ type Props = {
 const PrivateTags = ({ tab }: Props) => {
   const [ , setActiveTab ] = useState<TabName>(tab);
 
-  const basePath = useBasePath();
+  const link = useLink();
 
   const onChangeTab = useCallback((index: number) => {
     setActiveTab(TABS[index]);
-    const newUrl = basePath + '/account/' + (TABS[index] === 'address' ? 'tag_address' : 'tag_transaction');
+    const newUrl = link(TABS[index] === 'address' ? 'private_tags_address' : 'private_tags_tx');
     history.replaceState(history.state, '', newUrl);
-  }, [ setActiveTab, basePath ]);
+  }, [ link ]);
 
   return (
     <Page>

ui/shared/AddressLinkWithTooltip.tsx

@@ -2,7 +2,7 @@ import { Flex, Link } from '@chakra-ui/react';
 import type { HTMLChakraProps } from '@chakra-ui/system';
 import React from 'react';
 
-import useBasePath from 'lib/hooks/useBasePath';
+import useLink from 'lib/link/useLink';
 
 import AddressWithDots from './AddressWithDots';
 import CopyToClipboard from './CopyToClipboard';
@@ -18,14 +18,15 @@ interface Props extends HTMLChakraProps<'div'> {
 }
 
 const AddressLinkWithTooltip = ({ address, type = 'address', truncated, withCopy = true, ...styles }: Props) => {
-  const basePath = useBasePath();
+  const link = useLink();
+
   let url;
   if (type === 'transaction') {
-    url = basePath + '/tx/' + address;
+    url = link('tx_index', { id: address });
   } else if (type === 'token') {
-    url = basePath + '/address/' + address + '/tokens#address-tabs';
+    url = link('token_index', { id: address });
   } else {
-    url = basePath + '/address/' + address;
+    url = link('address_index', { id: address });
   }
   return (
     <Flex columnGap={ 2 } alignItems="center" overflow="hidden" maxW="100%" { ...styles }>

ui/shared/Token.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import tokeIcon from 'icons/tokens/toke.svg';
 import usdtIcon from 'icons/tokens/usdt.svg';
-import useBasePath from 'lib/hooks/useBasePath';
+import useLink from 'lib/link/useLink';
 
 // temporary solution
 // don't know where to get icons and addresses yet
@@ -29,13 +29,13 @@ interface Props {
 
 const Token = ({ symbol, className }: Props) => {
   const token = TOKENS[symbol as keyof typeof TOKENS];
-  const basePath = useBasePath();
+  const link = useLink();
 
   if (!token) {
     return null;
   }
 
-  const url = basePath + '/token/' + token.address;
+  const url = link('token_index', { id: token.address });
 
   return (
     <Center className={ className }>