remove useLink hook

lib/hooks/useNavItems.tsx

@@ -13,8 +13,8 @@ import publicTagIcon from 'icons/publictags.svg';
 import tokensIcon from 'icons/token.svg';
 import transactionsIcon from 'icons/transactions.svg';
 import watchlistIcon from 'icons/watchlist.svg';
+import link from 'lib/link/link';
 import useCurrentRoute from 'lib/link/useCurrentRoute';
-import useLink from 'lib/link/useLink';
 import notEmpty from 'lib/notEmpty';
 
 export default function useNavItems() {
@@ -23,7 +23,6 @@ export default function useNavItems() {
   [ ])
     .length > 0;
 
-  const link = useLink();
   const currentRoute = useCurrentRoute()();
 
   return React.useMemo(() => {
@@ -50,5 +49,5 @@ export default function useNavItems() {
     const profileItem = { text: 'My profile', url: link('profile'), icon: profileIcon, isActive: currentRoute === 'profile' };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ isMarketplaceFilled, link, currentRoute ]);
+  }, [ isMarketplaceFilled, currentRoute ]);
 }

lib/link/link.ts

@@ -5,22 +5,28 @@ import type { RouteName } from './routes';
 
 const PATH_PARAM_REGEXP = /\/\[(\w+)\]/g;
 
-export function link(routeName: RouteName, urlParams?: Record<string, Array<string> | string | undefined>, queryParams?: Record<string, string>): string {
+export default function link(
+  routeName: RouteName,
+  urlParams?: Record<string, Array<string> | string | undefined>,
+  queryParams?: Record<string, string>,
+): string {
   const route = ROUTES[routeName];
   if (!route) {
     return '';
   }
 
-  // if we pass network type, we have to get subtype from params too
-  // otherwise getting it from config since it is not cross-chain link
-  const networkSubType = typeof urlParams?.network_type === 'string' ? urlParams?.network_sub_type : appConfig.network.subtype;
+  const refinedUrlParams: typeof urlParams = {
+    network_type: appConfig.network.type,
+    network_sub_type: appConfig.network.subtype,
+    ...urlParams,
+  };
 
   const path = route.pattern.replace(PATH_PARAM_REGEXP, (_, paramName: string) => {
-    if (paramName === 'network_sub_type' && !networkSubType) {
+    if (paramName === 'network_sub_type' && !refinedUrlParams.network_sub_type) {
       return '';
     }
 
-    let paramValue = urlParams?.[paramName];
+    let paramValue = refinedUrlParams?.[paramName];
     if (Array.isArray(paramValue)) {
       // FIXME we don't have yet params as array, but typescript says that we could
       // dunno know how to manage it, fix me if you find an issue

lib/link/useLink.ts

-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { link } from 'lib/link/link';
-
-type LinkBuilderParams = Parameters<typeof link>;
-
-export default function useLink() {
-  const router = useRouter();
-  const networkType = router.query.network_type;
-  const networkSubType = router.query.network_sub_type;
-
-  return React.useCallback((...args: LinkBuilderParams) => {
-    return link(args[0], { network_type: networkType, network_sub_type: networkSubType, ...args[1] }, args[2]);
-  }, [ networkType, networkSubType ]);
-}

lib/networks/useNetworkNavigationItems.ts

@@ -2,7 +2,7 @@ import appConfig from 'configs/app/config';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { link } from 'lib/link/link';
+import link from 'lib/link/link';
 import { ROUTES } from 'lib/link/routes';
 import useCurrentRoute from 'lib/link/useCurrentRoute';
 import featuredNetworks from 'lib/networks/featuredNetworks';

middleware.ts

@@ -4,7 +4,7 @@ import { NextResponse } from 'next/server';
 
 import { NAMES } from 'lib/cookies';
 import getCspPolicy from 'lib/csp/getCspPolicy';
-import { link } from 'lib/link/link';
+import link from 'lib/link/link';
 
 const cspPolicy = getCspPolicy();
 

ui/apps/AppCard.tsx

@@ -8,7 +8,7 @@ import type { AppItemPreview } from 'types/client/apps';
 import northEastIcon from 'icons/arrows/north-east.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import notEmpty from 'lib/notEmpty';
 
 import { APP_CATEGORIES } from './constants';
@@ -39,8 +39,6 @@ const AppCard = ({ id,
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
-  const link = useLink();
-
   return (
     <LinkBox
       _hover={{

ui/apps/AppModal.tsx

@@ -15,7 +15,7 @@ import twIcon from 'icons/social/tweet.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import { nbsp } from 'lib/html-entities';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import notEmpty from 'lib/notEmpty';
 
 import { APP_CATEGORIES } from './constants';
@@ -45,8 +45,6 @@ const AppModal = ({
     categories,
   } = marketplaceApps.find(app => app.id === id) as AppItemOverview;
 
-  const link = useLink();
-
   const socialLinks = [
     telegram ? {
       icon: tgIcon,

ui/block/BlockDetails.tsx

@@ -9,7 +9,7 @@ import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
 import dayjs from 'lib/date/dayjs';
 import { space } from 'lib/html-entities';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -21,7 +21,6 @@ import Utilization from 'ui/shared/Utilization';
 
 const BlockDetails = () => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
-  const link = useLink();
   const router = useRouter();
 
   const handleCutClick = React.useCallback(() => {

ui/blocks/BlocksListItem.tsx

@@ -7,7 +7,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import type { blocks } from 'data/blocks';
 import flameIcon from 'icons/flame.svg';
 import dayjs from 'lib/date/dayjs';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -20,7 +20,6 @@ interface Props {
 
 const BlocksListItem = ({ data, isPending }: Props) => {
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-  const link = useLink();
 
   return (
     <AccountListItemMobile rowGap={ 3 }>

ui/blocks/BlocksTableItem.tsx

@@ -6,7 +6,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import type { blocks } from 'data/blocks';
 import flameIcon from 'icons/flame.svg';
 import dayjs from 'lib/date/dayjs';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import Utilization from 'ui/shared/Utilization';
@@ -17,8 +17,6 @@ interface Props {
 }
 
 const BlocksTableItem = ({ data, isPending }: Props) => {
-  const link = useLink();
-
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (

ui/pages/Transaction.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import ExternalLink from 'ui/shared/ExternalLink';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -25,8 +25,6 @@ const TABS: Array<RoutedTab> = [
 ];
 
 const TransactionPageContent = () => {
-  const link = useLink();
-
   return (
     <Page>
       { /* TODO should be shown only when navigating from txs list */ }

ui/shared/TokenSnippet.tsx

 import { Center, Link, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
@@ -12,8 +12,6 @@ interface Props {
 }
 
 const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
-  const link = useLink();
-
   const url = link('token_index', { id: hash });
 
   return (

ui/shared/address/AddressLink.tsx

 import { Link, chakra, shouldForwardProp, Tooltip, Box } from '@chakra-ui/react';
 import React from 'react';
 
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
@@ -16,7 +16,6 @@ interface Props {
 }
 
 const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id, fontWeight }: Props) => {
-  const link = useLink();
   let url;
   if (type === 'transaction') {
     url = link('tx', { id: id || hash });

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { FunctionComponent, SVGAttributes } from 'react';
 
 import blockscoutLogo from 'icons/logo.svg';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 // predefined network logos
@@ -31,7 +31,6 @@ interface Props {
 
 const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
-  const link = useLink();
   const href = link('network_index');
   const logo = appConfig.network.logo || LOGOS[appConfig.network.basePath];
 

ui/snippets/searchBar/SearchBar.tsx

 import type { ChangeEvent, FormEvent } from 'react';
 import React from 'react';
 
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 
 import SearchBarDesktop from './SearchBarDesktop';
 import SearchBarMobile from './SearchBarMobile';
 
 const SearchBar = () => {
   const [ value, setValue ] = React.useState('');
-  const link = useLink();
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -18,7 +17,7 @@ const SearchBar = () => {
     event.preventDefault();
     const url = link('search_results', undefined, { q: value });
     window.location.assign(url);
-  }, [ link, value ]);
+  }, [ value ]);
 
   return (
     <>

ui/tx/logs/TxLogItem.tsx

@@ -5,7 +5,7 @@ import type { Log } from 'types/api/log';
 
 // import searchIcon from 'icons/search.svg';
 import { space } from 'lib/html-entities';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -24,7 +24,6 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const link = useLink();
 
   return (
     <Grid

ui/txs/TxAdditionalInfo.tsx

@@ -6,7 +6,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 
 import type { txs } from 'data/txs';
 import { nbsp } from 'lib/html-entities';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization';
 
@@ -25,8 +25,6 @@ const TxAdditionalInfo = ({ tx }: { tx: ArrayElement<typeof txs> }) => {
     fontSize: 'sm',
   };
 
-  const link = useLink();
-
   return (
     <>
       <Heading as="h4" fontSize="18px" mb={ 6 }>Additional info </Heading>

ui/txs/TxsListItem.tsx

@@ -19,7 +19,7 @@ import type { txs } from 'data/txs';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import dayjs from 'lib/date/dayjs';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -33,7 +33,6 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-  const link = useLink();
 
   return (
     <>

ui/txs/TxsTableItem.tsx

@@ -23,7 +23,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import type { txs } from 'data/txs';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import dayjs from 'lib/date/dayjs';
-import useLink from 'lib/link/useLink';
+import link from 'lib/link/link';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -35,7 +35,6 @@ import TxAdditionalInfoButton from 'ui/txs/TxAdditionalInfoButton';
 import TxType from './TxType';
 
 const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
-  const link = useLink();
 
   const addressFrom = (
     <Address>