tokens and other routes

lib/link/link.test.ts

@@ -1,19 +0,0 @@
-import link from './link';
-
-it('makes correct link if there are no params in path', () => {
-  const result = link('stats');
-
-  expect(result).toBe('https://blockscout.com/stats');
-});
-
-it('makes correct link if there are params in path', () => {
-  const result = link('token_instance_item', { id: '42', hash: '0x67e90a54AeEA85f21949c645082FE95d77BC1E70' });
-
-  expect(result).toBe('https://blockscout.com/token/0x67e90a54AeEA85f21949c645082FE95d77BC1E70/instance/42');
-});
-
-// it('makes correct link with query params', () => {
-//   const result = link('tx', { id: '0x4eb3b3b35d4c4757629bee32fc7a28b5dece693af8e7a383cf4cd6debe97ecf2' }, { tab: 'index', foo: 'bar' });
-
-//   expect(result).toBe('https://blockscout.com/tx/0x4eb3b3b35d4c4757629bee32fc7a28b5dece693af8e7a383cf4cd6debe97ecf2?tab=index&foo=bar');
-// });

lib/link/routes.ts

@@ -58,14 +58,14 @@ export const ROUTES = {
   // },
 
   // TOKENS
-  tokens: {
-    pattern: PATHS.tokens,
-    crossNetworkNavigation: true,
-  },
-  token_index: {
-    pattern: PATHS.token_index,
-    crossNetworkNavigation: true,
-  },
+  // tokens: {
+  //   pattern: PATHS.tokens,
+  //   crossNetworkNavigation: true,
+  // },
+  // token_index: {
+  //   pattern: PATHS.token_index,
+  //   crossNetworkNavigation: true,
+  // },
   token_instance_item: {
     pattern: PATHS.token_instance_item,
   },
@@ -81,32 +81,32 @@ export const ROUTES = {
   },
 
   // ACCOUNTS
-  accounts: {
-    pattern: PATHS.accounts,
-    crossNetworkNavigation: true,
-  },
+  // accounts: {
+  //   pattern: PATHS.accounts,
+  //   crossNetworkNavigation: true,
+  // },
 
   // APPS
-  apps: {
-    pattern: PATHS.apps,
-  },
-  app_index: {
-    pattern: PATHS.app_index,
-  },
+  // apps: {
+  //   pattern: PATHS.apps,
+  // },
+  // app_index: {
+  //   pattern: PATHS.app_index,
+  // },
 
-  stats: {
-    pattern: PATHS.stats,
-  },
+  // stats: {
+  //   pattern: PATHS.stats,
+  // },
 
   // SEARCH
-  search_results: {
-    pattern: PATHS.search_results,
-  },
+  // search_results: {
+  //   pattern: PATHS.search_results,
+  // },
 
   // VISUALIZE
-  visualize_sol2uml: {
-    pattern: PATHS.visualize_sol2uml,
-  },
+  // visualize_sol2uml: {
+  //   pattern: PATHS.visualize_sol2uml,
+  // },
 
   csv_export: {
     pattern: PATHS.csv_export,

ui/address/contract/ContractSourceCode.tsx

@@ -1,9 +1,9 @@
 import { Box, chakra, Flex, Text, Tooltip } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
-import link from 'lib/link/link';
 import CodeEditor from 'ui/shared/CodeEditor';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -28,7 +28,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
   const diagramLink = hasSol2Yml && address ? (
     <Tooltip label="Visualize contract code using Sol2Uml JS library">
       <LinkInternal
-        href={ link('visualize_sol2uml', undefined, { address }) }
+        href={ route({ pathname: '/visualize/sol2uml', query: { address } }) }
         ml="auto"
         mr={ 3 }
       >

ui/address/details/AddressNameInfo.tsx

@@ -1,8 +1,8 @@
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
 
-import link from 'lib/link/link';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -19,7 +19,7 @@ const AddressNameInfo = ({ data }: Props) => {
         title="Token name"
         hint="Token name and symbol"
       >
-        <LinkInternal href={ link('token_index', { hash: data.token.address }) }>
+        <LinkInternal href={ route({ pathname: '/token/[hash]', query: { hash: data.token.address } }) }>
           { data.token.name }{ symbol }
         </LinkInternal>
       </DetailsInfoItem>

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -1,8 +1,8 @@
 import { chakra, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
-import link from 'lib/link/link';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import TokenLogo from 'ui/shared/TokenLogo';
@@ -45,7 +45,7 @@ const TokenSelectItem = ({ data }: Props) => {
   })();
 
   // TODO add filter param when token page is ready
-  const url = link('token_index', { hash: data.token.address });
+  const url = route({ pathname: '/token/[hash]', query: { hash: data.token.address } });
 
   return (
     <Flex

ui/address/tokens/NFTItem.tsx

@@ -1,4 +1,5 @@
 import { Flex, Link, Text, LinkBox, LinkOverlay, useColorModeValue } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
@@ -11,7 +12,7 @@ import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 type Props = AddressTokenBalance;
 
 const NFTItem = ({ token, token_id: tokenId }: Props) => {
-  const tokenLink = link('token_index', { hash: token.address });
+  const tokenLink = route({ pathname: '/token/[hash]', query: { hash: token.address } });
 
   return (
     <LinkBox

ui/searchResults/SearchResultListItem.tsx

@@ -7,7 +7,6 @@ import type { SearchResultItem } from 'types/api/search';
 import blockIcon from 'icons/block.svg';
 import txIcon from 'icons/transactions.svg';
 import highlightText from 'lib/highlightText';
-import link from 'lib/link/link';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -32,7 +31,7 @@ const SearchResultListItem = ({ data, searchTerm }: Props) => {
         return (
           <Flex alignItems="flex-start">
             <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
-            <LinkInternal ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 } wordBreak="break-all">
+            <LinkInternal ml={ 2 } href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) } fontWeight={ 700 } wordBreak="break-all">
               <chakra.span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
             </LinkInternal>
           </Flex>

ui/searchResults/SearchResultTableItem.tsx

@@ -32,7 +32,7 @@ const SearchResultTableItem = ({ data, searchTerm }: Props) => {
             <Td fontSize="sm">
               <Flex alignItems="center">
                 <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
-                <LinkInternal ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 } wordBreak="break-all">
+                <LinkInternal ml={ 2 } href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) } fontWeight={ 700 } wordBreak="break-all">
                   <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
                 </LinkInternal>
               </Flex>

ui/shared/address/AddressLink.tsx

@@ -47,7 +47,7 @@ const AddressLink = (props: Props) => {
   if (type === 'transaction') {
     url = route({ pathname: '/tx/[hash]', query: { hash } });
   } else if (type === 'token') {
-    url = link('token_index', { hash: hash });
+    url = route({ pathname: '/token/[hash]', query: { hash } });
   } else if (type === 'block') {
     url = route({ pathname: '/block/[height]', query: { height: props.height } });
   } else if (type === 'address_token') {

ui/snippets/searchBar/SearchBar.tsx

@@ -1,10 +1,10 @@
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
+import { route } from 'nextjs-routes';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import link from 'lib/link/link';
 
 import SearchBarInput from './SearchBarInput';
 import SearchBarSuggest from './SearchBarSuggest';
@@ -26,7 +26,7 @@ const SearchBar = ({ isHomepage }: Props) => {
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (searchTerm) {
-      const url = link('search_results', undefined, { q: searchTerm });
+      const url = route({ pathname: '/search-results', query: { q: searchTerm } });
       window.location.assign(url);
     }
   }, [ searchTerm ]);

ui/snippets/searchBar/SearchBarSuggestItem.tsx

@@ -23,7 +23,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm }: Props) => {
   const url = (() => {
     switch (data.type) {
       case 'token': {
-        return link('token_index', { hash: data.address });
+        return route({ pathname: '/token/[hash]', query: { hash: data.address } });
       }
       case 'contract':
       case 'address': {