base implementation

configs/nextjs/redirects.js

@@ -34,7 +34,7 @@ const oldUrls = [
     newPath: `${ PATHS.blocks }?tab=reorgs`,
   },
   {
-    oldPath: '/block/:id/transactions',
+    oldPath: '/block/:height/transactions',
     newPath: `${ PATHS.block }`,
   },
   {

next.config.js

+const withRoutes = require('nextjs-routes/config')({
+  outDir: 'types',
+});
 const path = require('path');
 
 const headers = require('./configs/nextjs/headers');
@@ -33,4 +36,4 @@ const moduleExports = {
   output: 'standalone',
 };
 
-module.exports = moduleExports;
+module.exports = withRoutes(moduleExports);

package.json

@@ -53,6 +53,7 @@
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
     "next": "12.2.5",
+    "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
     "path-to-regexp": "^6.2.1",

pages/apps/[id].tsx

@@ -16,7 +16,7 @@ const AppPage: NextPage = () => {
   const [ isLoading, setIsLoading ] = useState(true);
   const [ app, setApp ] = useState<AppItemOverview | undefined>(undefined);
 
-  const { id }: { id?: string } = router.query;
+  const id = router.query.id;
 
   useEffect(() => {
     if (!id) {

types/nextjs-routes.d.ts

+// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+// This file will be automatically regenerated when your Next.js server is running.
+// nextjs-routes version: 1.0.8
+/* eslint-disable */
+
+// prettier-ignore
+declare module "nextjs-routes" {
+  export type Route =
+    | StaticRoute<"/account/api_key">
+    | StaticRoute<"/account/custom_abi">
+    | StaticRoute<"/account/public_tags_request">
+    | StaticRoute<"/account/tag_address">
+    | StaticRoute<"/account/watchlist">
+    | StaticRoute<"/accounts">
+    | DynamicRoute<"/address/[id]/contract_verification", { "id": string }>
+    | DynamicRoute<"/address/[id]", { "id": string }>
+    | StaticRoute<"/api/csrf">
+    | StaticRoute<"/api/proxy">
+    | DynamicRoute<"/apps/[id]", { "id": string }>
+    | StaticRoute<"/apps">
+    | StaticRoute<"/auth/profile">
+    | DynamicRoute<"/block/[id]", { "id": string }>
+    | StaticRoute<"/blocks">
+    | StaticRoute<"/graph">
+    | StaticRoute<"/">
+    | StaticRoute<"/login">
+    | StaticRoute<"/search-results">
+    | StaticRoute<"/stats">
+    | DynamicRoute<"/token/[hash]", { "hash": string }>
+    | StaticRoute<"/tokens">
+    | DynamicRoute<"/tx/[id]", { "id": string }>
+    | StaticRoute<"/txs">
+    | StaticRoute<"/visualize/sol2uml">;
+
+  interface StaticRoute<Pathname> {
+    pathname: Pathname;
+    query?: Query | undefined;
+    hash?: string | null | undefined;
+  }
+
+  interface DynamicRoute<Pathname, Parameters> {
+    pathname: Pathname;
+    query: Parameters & Query;
+    hash?: string | null | undefined;
+  }
+
+  interface Query {
+    [key: string]: string | string[] | undefined;
+  };
+
+  export type RoutedQuery<P extends Route["pathname"]> = Extract<
+    Route,
+    { pathname: P }
+  >["query"];
+
+  export type Locale = undefined;
+
+  /**
+   * A typesafe utility function for generating paths in your application.
+   *
+   * route({ pathname: "/foos/[foo]", query: { foo: "bar" }}) will produce "/foos/bar".
+   */
+  export declare function route(r: Route): string;
+}
+
+// prettier-ignore
+declare module "next/link" {
+  import type { Route } from "nextjs-routes";
+  import type { LinkProps as NextLinkProps } from "next/dist/client/link";
+  import type {
+    AnchorHTMLAttributes,
+    DetailedReactHTMLElement,
+    MouseEventHandler,
+    PropsWithChildren,
+  } from "react";
+  export * from "next/dist/client/link";
+
+  type Query = { query?: { [key: string]: string | string[] | undefined } };
+  type StaticRoute = Exclude<Route, { query: any }>["pathname"];
+
+  export interface LinkProps
+    extends Omit<NextLinkProps, "href" | "locale">,
+      AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: Route | StaticRoute | Query;
+    locale?: false;
+  }
+
+  type LinkReactElement = DetailedReactHTMLElement<
+    {
+      onMouseEnter?: MouseEventHandler<Element> | undefined;
+      onClick: MouseEventHandler;
+      href?: string | undefined;
+      ref?: any;
+    },
+    HTMLElement
+  >;
+
+  declare function Link(props: PropsWithChildren<LinkProps>): LinkReactElement;
+
+  export default Link;
+}
+
+// prettier-ignore
+declare module "next/router" {
+  import type { Locale, Route, RoutedQuery } from "nextjs-routes";
+  import type { NextRouter as Router } from "next/dist/client/router";
+  export * from "next/dist/client/router";
+  export { default } from "next/dist/client/router";
+
+  type NextTransitionOptions = NonNullable<Parameters<Router["push"]>[2]>;
+  type StaticRoute = Exclude<Route, { query: any }>["pathname"];
+  type Query = { query?: { [key: string]: string | string[] | undefined } };
+
+  interface TransitionOptions extends Omit<NextTransitionOptions, "locale"> {
+    locale?: false;
+  }
+
+  export type NextRouter<P extends Route["pathname"] = Route["pathname"]> =
+    Extract<Route, { pathname: P }> &
+      Omit<
+        Router,
+        | "push"
+        | "replace"
+        | "locale"
+        | "locales"
+        | "defaultLocale"
+        | "domainLocales"
+      > & {
+        defaultLocale?: undefined;
+        domainLocales?: undefined;
+        locale?: Locale;
+        locales?: undefined;
+        push(
+          url: Route | StaticRoute | Query,
+          as?: string,
+          options?: TransitionOptions
+        ): Promise<boolean>;
+        replace(
+          url: Route | StaticRoute | Query,
+          as?: string,
+          options?: TransitionOptions
+        ): Promise<boolean>;
+        route: P;
+      };
+
+  export function useRouter<P extends Route["pathname"]>(): NextRouter<P>;
+}

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

 import { Text, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -7,7 +8,6 @@ import type { Block } from 'types/api/block';
 import appConfig from 'configs/app/config';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import link from 'lib/link/link';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -17,7 +17,7 @@ type Props = Block & {
 };
 
 const AddressBlocksValidatedListItem = (props: Props) => {
-  const blockUrl = link('block', { id: String(props.height) });
+  const blockUrl = route({ pathname: '/block/[id]', query: { id: props.height.toString() } });
   const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 

ui/address/tokenSelect/TokenSelect.tsx

@@ -10,7 +10,6 @@ import type { Address } from 'types/api/address';
 import walletIcon from 'icons/wallet.svg';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import link from 'lib/link/link';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
@@ -83,7 +82,7 @@ const TokenSelect = ({ onClick }: Props) => {
       }
       <Tooltip label="Show all tokens">
         <Box>
-          <NextLink href={ link('address_index', { id: addressHash }, { tab: 'tokens' }) } passHref>
+          <NextLink href={{ pathname: '/address/[id]', query: { id: addressHash || '', tab: 'tokens' } }} passHref>
             <IconButton
               aria-label="Show all tokens"
               variant="outline"

ui/apps/AppCardLink.tsx

@@ -2,8 +2,6 @@ import { LinkOverlay } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
-import link from 'lib/link/link';
-
 type Props = {
   id: string;
   url: string;
@@ -17,7 +15,7 @@ const AppLink = ({ url, external, id, title }: Props) => {
       { title }
     </LinkOverlay>
   ) : (
-    <NextLink href={ link('app_index', { id: id }) } passHref>
+    <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref>
       <LinkOverlay>
         { title }
       </LinkOverlay>

ui/apps/AppModalLink.tsx

@@ -2,8 +2,6 @@ import { Button } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
-import link from 'lib/link/link';
-
 type Props = {
   id: string;
   url: string;
@@ -29,7 +27,7 @@ const AppModalLink = ({ url, external, id }: Props) => {
       { ...buttonProps }
     >Launch app</Button>
   ) : (
-    <NextLink href={ link('app_index', { id: id }) } passHref>
+    <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref>
       <Button
         as="a"
         { ...buttonProps }

ui/block/BlockDetails.tsx

@@ -48,8 +48,7 @@ const BlockDetails = () => {
     const increment = direction === 'next' ? +1 : -1;
     const nextId = String(Number(router.query.id) + increment);
 
-    const url = link('block', { id: nextId });
-    router.push(url, undefined);
+    router.push({ pathname: '/block/[id]', query: { id: nextId } }, undefined);
   }, [ router ]);
 
   if (isLoading) {

ui/pages/ContractVerification.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import { useAppContext } from 'lib/appContext';
 import isBrowser from 'lib/isBrowser';
-import link from 'lib/link/link';
 import ContractVerificationForm from 'ui/contractVerification/ContractVerificationForm';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -25,7 +24,7 @@ const ContractVerification = () => {
 
   React.useEffect(() => {
     if (method && hash) {
-      router.replace(link('address_contract_verification', { id: hash }), undefined, { scroll: false, shallow: true });
+      router.replace({ pathname: '/address/[id]/contract_verification', query: { id: hash } }, undefined, { scroll: false, shallow: true });
     }
   // onMount only
   // eslint-disable-next-line react-hooks/exhaustive-deps

ui/shared/LinkInternal.tsx

 import type { LinkProps } from '@chakra-ui/react';
 import { Link } from '@chakra-ui/react';
+import type { LinkProps as NextLinkProps } from 'next/link';
 import NextLink from 'next/link';
 import type { LegacyRef } from 'react';
 import React from 'react';
@@ -11,7 +12,7 @@ const LinkInternal = (props: LinkProps, ref: LegacyRef<HTMLAnchorElement>) => {
   }
 
   return (
-    <NextLink href={ props.href } passHref target={ props.target }>
+    <NextLink href={ props.href as NextLinkProps['href'] } passHref target={ props.target }>
       <Link { ...props } ref={ ref }/>
     </NextLink>
   );

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -52,7 +52,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
     const nextTab = tabs[index];
 
     router.push(
-      { pathname: router.asPath.split('?')[0], query: { tab: nextTab.id } },
+      { pathname: router.asPath.split('?')[0], query: { tab: nextTab.id } } as Parameters<typeof router.push>[0],
       undefined,
       { shallow: true },
     );

ui/snippets/navigation/NavLink.tsx

 import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
+import type { LinkProps } from 'next/link';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -68,7 +69,7 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px, isNewUi }: Props)
       { /* why not NextLink in all cases? since prev UI and new one are hosting in the same domain and global routing is managed by nginx */ }
       { /* we have to hard reload page on every transition between urls from different part of the app */ }
       { isNewUi ? (
-        <NextLink href={ url } passHref>
+        <NextLink href={ url as LinkProps['href'] } passHref>
           { content }
         </NextLink>
       ) : content }

ui/token/TokenDetails.tsx

@@ -8,7 +8,6 @@ import type { TokenInfo } from 'types/api/tokenInfo';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
-import link from 'lib/link/link';
 import type { TokenTabs } from 'ui/pages/Token';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
@@ -26,9 +25,8 @@ const TokenDetails = ({ tokenQuery }: Props) => {
   });
 
   const changeUrlAndScroll = useCallback((tab: TokenTabs) => () => {
-    const newLink = link('token_index', { hash: router.query.hash }, { tab: tab });
     router.push(
-      newLink,
+      { pathname: '/token/[hash]', query: { hash: router.query.hash?.toString() || '', tab } },
       undefined,
       { shallow: true },
     );

yarn.lock

@@ -4897,6 +4897,14 @@ anymatch@^3.0.3:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -5161,6 +5169,11 @@ bignumber.js@^9.1.0:
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.0.tgz#8d340146107fe3a6cb8d40699643c302e8773b62"
   integrity sha512-4LwHK4nfDOraBCtst+wOWIHbu1vhvAPJK8g8nROd4iuc3PSEjWif/qwbkh8jwCJz6yDBvtU4KPynETgrfh7y3A==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 bind-decorator@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/bind-decorator/-/bind-decorator-1.0.11.tgz#e41bc06a1f65dd9cec476c91c5daf3978488252f"
@@ -5222,7 +5235,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -5415,6 +5428,21 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 ci-info@^3.2.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.6.1.tgz#7594f1c95cb7fdfddee7af95a13af7dbc67afdcf"
@@ -7421,7 +7449,7 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -7778,6 +7806,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -7844,7 +7879,7 @@ is-generator-function@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -9039,6 +9074,13 @@ next@12.2.5:
     "@next/swc-win32-ia32-msvc" "12.2.5"
     "@next/swc-win32-x64-msvc" "12.2.5"
 
+nextjs-routes@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/nextjs-routes/-/nextjs-routes-1.0.8.tgz#7604fe12dd0132c5a4c61e8d4a6c00c19cf615fb"
+  integrity sha512-EWBrzT0VS+SGcrhEbCUGnDlEAS6tjJSiecbSA7x75pBbcW9IYkYw7JxDMNqFhiSrvtYAL8yIWFwbQ8x0Jmz7wg==
+  dependencies:
+    chokidar "^3.5.3"
+
 node-addon-api@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-2.0.2.tgz#432cfa82962ce494b132e9d72a15b29f71ff5d32"
@@ -9080,7 +9122,7 @@ node-releases@^2.0.6:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -9386,7 +9428,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -9931,6 +9973,13 @@ readable-stream@^4.0.0:
     events "^3.3.0"
     process "^0.11.10"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 real-require@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.1.0.tgz#736ac214caa20632847b7ca8c1056a0767df9381"