rest routes

configs/nextjs/redirects.js

@@ -10,19 +10,19 @@ const oldUrls = [
     newPath: `${ PATHS.txs }?tab=pending`,
   },
   {
-    oldPath: '/tx/:id/internal-transactions',
+    oldPath: '/tx/:hash/internal-transactions',
     newPath: `${ PATHS.tx }?tab=internal`,
   },
   {
-    oldPath: '/tx/:id/logs',
+    oldPath: '/tx/:hash/logs',
     newPath: `${ PATHS.tx }?tab=logs`,
   },
   {
-    oldPath: '/tx/:id/raw-trace',
+    oldPath: '/tx/:hash/raw-trace',
     newPath: `${ PATHS.tx }?tab=raw_trace`,
   },
   {
-    oldPath: '/tx/:id/state',
+    oldPath: '/tx/:hash/state',
     newPath: `${ PATHS.tx }?tab=state`,
   },
   {

lib/link/routes.ts

 import appConfig from 'configs/app/config';
 
-import PATHS from './paths.json';
+// import PATHS from './paths.json';
 
 export interface Route {
   pattern: string;
@@ -64,9 +64,9 @@ export const ROUTES = {
   //   pattern: PATHS.token_index,
   //   crossNetworkNavigation: true,
   // },
-  token_instance_item: {
-    pattern: PATHS.token_instance_item,
-  },
+  // token_instance_item: {
+  //   pattern: PATHS.token_instance_item,
+  // },
 
   // ADDRESSES
   // address_index: {
@@ -106,9 +106,9 @@ export const ROUTES = {
   //   pattern: PATHS.visualize_sol2uml,
   // },
 
-  csv_export: {
-    pattern: PATHS.csv_export,
-  },
+  // csv_export: {
+  //   pattern: PATHS.csv_export,
+  // },
 
   // AUTH
   // todo_tom need add page to the app

pages/csv-export.tsx

+import type { NextPage } from 'next';
+
+const CsvExportPage: NextPage = () => {
+  return null;
+};
+
+export default CsvExportPage;
+
+export async function getServerSideProps() {
+  return {
+    notFound: true,
+  };
+}

types/nextjs-routes.d.ts

@@ -22,12 +22,14 @@ declare module "nextjs-routes" {
     | StaticRoute<"/auth/profile">
     | DynamicRoute<"/block/[height]", { "height": string }>
     | StaticRoute<"/blocks">
+    | StaticRoute<"/csv-export">
     | StaticRoute<"/graph">
     | StaticRoute<"/">
     | StaticRoute<"/login">
     | StaticRoute<"/search-results">
     | StaticRoute<"/stats">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
+    | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">

ui/address/AddressCsvExportLink.tsx

 import { chakra, Icon, Link, Tooltip, Hide } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import svgFileIcon from 'icons/files/csv.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import link from 'lib/link/link';
 
 interface Props {
   address: string;
@@ -20,7 +20,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
         className={ className }
         display="inline-flex"
         alignItems="center"
-        href={ link('csv_export', undefined, { type, address }) }
+        href={ route({ pathname: '/csv-export', query: { type, address } }) }
         flexShrink={ 0 }
       >
         <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>

ui/address/tokens/NFTItem.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
-import link from 'lib/link/link';
 import NftImage from 'ui/shared/nft/NftImage';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -42,7 +41,7 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
               overflow="hidden"
               whiteSpace="nowrap"
               textOverflow="ellipsis"
-              href={ link('token_instance_item', { hash: token.address, id: tokenId }) }
+              href={ route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } }) }
             >
               { tokenId }
             </Link>

ui/shared/TokenTransfer/TokenTransferNft.tsx

 import { Box, Icon, Link, chakra } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import nftPlaceholder from 'icons/nft_shield.svg';
-import link from 'lib/link/link';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
@@ -14,7 +14,7 @@ interface Props {
 const TokenTransferNft = ({ hash, id, className }: Props) => {
   return (
     <Link
-      href={ link('token_instance_item', { hash, id }) }
+      href={ route({ pathname: '/token/[hash]/instance/[id]', query: { hash, id } }) }
       overflow="hidden"
       whiteSpace="nowrap"
       display="flex"

ui/token/TokenInventoryItem.tsx

 import { Flex, Link, Text, LinkBox, LinkOverlay, useColorModeValue, Hide } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
 
-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';
@@ -13,7 +13,7 @@ import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 type Props = { item: TokenInstance };
 
 const NFTItem = ({ item }: Props) => {
-  const tokenLink = link('token_instance_item', { hash: item.token.address, id: item.id });
+  const tokenLink = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: item.token.address, id: item.id } });
 
   return (
     <LinkBox

ui/tokenInstance/details/TokenInstanceTransfersCount.tsx

+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import link from 'lib/link/link';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import LinkInternal from 'ui/shared/LinkInternal';
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
@@ -30,7 +30,7 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
   }
 
   const url = transfersCountQuery.data.transfers_count > 0 ?
-    link('token_instance_item', { id, hash }, { tab: 'token_transfers' }) :
+    route({ pathname: '/token/[hash]/instance/[id]', query: { hash, id, tab: 'token_transfers' } }) :
     undefined;
 
   return (

ui/tx/NftTokenTransferSnippet.tsx

 import { Flex, Link, Text, Icon, Box } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import nftIcon from 'icons/nft_shield.svg';
-import link from 'lib/link/link';
 import AddressLink from 'ui/shared/address/AddressLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -17,7 +17,7 @@ interface Props {
 
 const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props) => {
   const num = value === '1' ? '' : value;
-  const url = link('token_instance_item', { hash: hash, id: tokenId });
+  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: hash, id: tokenId } });
 
   return (
     <Flex alignItems="center" columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">

ui/tx/details/TxDetailsAction.tsx

 import { Flex, Link, Icon, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { TxAction, TxActionGeneral } from 'types/api/txAction';
 
 import appConfig from 'configs/app/config';
 import uniswapIcon from 'icons/uniswap.svg';
-import link from 'lib/link/link';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -97,7 +97,7 @@ const TxDetailsAction = ({ action }: Props) => {
           <Flex columnGap={ 1 } rowGap={ 2 } pl={ 3 } flexDirection="column" mt={ 2 }>
             {
               data.ids.map((id: string) => {
-                const url = link('token_instance_item', { hash: data.address, id });
+                const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: data.address, id } });
                 return (
                   <Flex key={ data.address + id } whiteSpace="pre-wrap">
                     <span>1 of </span>