useBathPath hook

lib/hooks/useBasePath.tsx

+import { useRouter } from 'next/router';
+
+export default function useBasePath() {
+  const router = useRouter();
+  return `/${ router.query.network_name }/${ router.query.network_type }`;
+}

ui/header/SearchBar.tsx

@@ -3,8 +3,11 @@ import { InputGroup, Input, InputLeftAddon, InputLeftElement, useColorModeValue
 import type { ChangeEvent, FormEvent } from 'react';
 import React from 'react';
 
+import useBasePath from 'lib/hooks/useBasePath';
+
 const SearchBar = () => {
   const [ value, setValue ] = React.useState('');
+  const basePath = useBasePath();
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -12,8 +15,8 @@ const SearchBar = () => {
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    window.location.assign(`https://blockscout.com/xdai/mainnet/search-results?q=${ value }`);
-  }, [ value ]);
+    window.location.assign(`https://blockscout.com${ basePath }/search-results?q=${ value }`);
+  }, [ value, basePath ]);
 
   return (
     <form noValidate onSubmit={ handleSubmit }>

ui/navigation/Navigation.tsx

@@ -15,6 +15,7 @@ import tokensIcon from 'icons/token.svg';
 import transactionsIcon from 'icons/transactions.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import * as cookies from 'lib/cookies';
+import useBasePath from 'lib/hooks/useBasePath';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavFooter from './NavFooter';
@@ -23,22 +24,22 @@ import NetworkMenu from './networkMenu/NetworkMenu';
 
 const Navigation = () => {
   const router = useRouter();
-  const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
+  const basePath = useBasePath();
 
   const mainNavItems = [
-    { text: 'Blocks', pathname: basePathName + '/blocks', icon: blocksIcon },
-    { text: 'Transactions', pathname: basePathName + '/transactions', icon: transactionsIcon },
-    { text: 'Tokens', pathname: basePathName + '/tokens', icon: tokensIcon },
-    { text: 'Apps', pathname: basePathName + '/apps', icon: appsIcon },
-    { text: 'Other', pathname: basePathName + '/other', icon: gearIcon },
+    { text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon },
+    { text: 'Transactions', pathname: basePath + '/transactions', icon: transactionsIcon },
+    { text: 'Tokens', pathname: basePath + '/tokens', icon: tokensIcon },
+    { text: 'Apps', pathname: basePath + '/apps', icon: appsIcon },
+    { text: 'Other', pathname: basePath + '/other', icon: gearIcon },
   ];
 
   const accountNavItems = [
-    { text: 'Watchlist', pathname: basePathName + '/watchlist', icon: watchlistIcon },
-    { text: 'Private tags', pathname: basePathName + '/private-tags', icon: privateTagIcon },
-    { text: 'Public tags', pathname: basePathName + '/public-tags', icon: publicTagIcon },
-    { text: 'API keys', pathname: basePathName + '/api-keys', icon: apiKeysIcon },
-    { text: 'Custom ABI', pathname: basePathName + '/custom-abi', icon: abiIcon },
+    { text: 'Watchlist', pathname: basePath + '/watchlist', icon: watchlistIcon },
+    { text: 'Private tags', pathname: basePath + '/private-tags', icon: privateTagIcon },
+    { text: 'Public tags', pathname: basePath + '/public-tags', icon: publicTagIcon },
+    { text: 'API keys', pathname: basePath + '/api-keys', icon: apiKeysIcon },
+    { text: 'Custom ABI', pathname: basePath + '/custom-abi', icon: abiIcon },
   ];
 
   const [ isCollapsed, setCollapsedState ] = React.useState(cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED) === 'true');

ui/navigation/networkMenu/NetworkMenuPopup.tsx

 import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, useColorModeValue } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { NetworkLink } from './types';
@@ -12,6 +11,7 @@ import gnosisIcon from 'icons/networks/gnosis.svg';
 import poaSokolIcon from 'icons/networks/poa-sokol.svg';
 import poaIcon from 'icons/networks/poa.svg';
 import rskIcon from 'icons/networks/rsk.svg';
+import useBasePath from 'lib/hooks/useBasePath';
 
 import NetworkMenuLink from './NetworkMenuLink';
 
@@ -20,11 +20,10 @@ type PopupTab = 'mainnets' | 'testnets' | 'other';
 const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
 
 const NetworkMenuPopup = () => {
-  const router = useRouter();
   const gnosisChainIconColor = useColorModeValue('black', 'white');
   const poaChainIconColor = useColorModeValue('gray.100', 'gray.100');
 
-  const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
+  const basePath = useBasePath();
 
   const LINKS: Record<PopupTab, Array<NetworkLink>> = {
     mainnets: [
@@ -58,7 +57,7 @@ const NetworkMenuPopup = () => {
             { TABS.map((tab) => (
               <TabPanel key={ tab } p={ 0 }>
                 <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
-                  { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link } isActive={ basePathName === link.pathname }/>) }
+                  { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link } isActive={ basePath === link.pathname }/>) }
                 </VStack>
               </TabPanel>
             )) }