Merge pull request #52 from blockscout/absolute-paths

absolute imports support

pages/_app.tsx

 import React from 'react';
 import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
-import theme from '../theme/index';
+import theme from 'theme';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

pages/_document.tsx

 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { ColorModeScript } from '@chakra-ui/react';
-import theme from '../theme'
+import theme from 'theme'
 
 class MyDocument extends Document {
   render() {

pages/api-keys.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head'
 
-import ApiKeys from '../ui/pages/ApiKeys';
+import ApiKeys from 'ui/pages/ApiKeys';
 
 const ApiKeysPage: NextPage = () => {
   return (

pages/index.tsx

 import React from 'react';
 import type { NextPage } from 'next';
 import { Center } from '@chakra-ui/react';
-import Page from '../ui/Page/Page';
+import Page from 'ui/shared/Page/Page';
 
 const Home: NextPage = () => {
   return (

pages/private-tags.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head'
 
-import PrivateTags from '../ui/pages/PrivateTags';
+import PrivateTags from 'ui/pages/PrivateTags';
 
 const PrivateTagsPage: NextPage = () => {
   return (

pages/watchlist.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head'
 
-import WatchList from '../ui/pages/Watchlist';
+import WatchList from 'ui/pages/Watchlist';
 
 const WatchListPage: NextPage = () => {
   return (

tsconfig.json

@@ -13,7 +13,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "decs.d.ts"],
   "exclude": ["node_modules"]

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -10,7 +10,7 @@ import {
   Input,
 } from '@chakra-ui/react';
 
-import type { TApiKeyItem } from '../../../data/apiKey';
+import type { TApiKeyItem } from 'data/apiKey';
 
 type Props = {
   data?: TApiKeyItem;

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

 import React, { useCallback } from 'react';
 
-import type { TApiKeyItem } from '../../../data/apiKey';
+import type { TApiKeyItem } from 'data/apiKey';
 
 import ApiKeyForm from './ApiKeyForm';
-import FormModal from '../../shared/FormModal';
+import FormModal from 'ui/shared/FormModal';
 
 type Props = {
   isOpen: boolean;

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -9,7 +9,7 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TApiKey, TApiKeyItem } from '../../../data/apiKey';
+import type { TApiKey, TApiKeyItem } from 'data/apiKey';
 
 import ApiKeyTableItem from './ApiKeyTableItem';
 

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -8,11 +8,11 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 
-import EditButton from '../../shared/EditButton';
-import DeleteButton from '../../shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
+import DeleteButton from 'ui/shared/DeleteButton';
 
-import type { TApiKeyItem } from '../../../data/apiKey';
-import CopyToClipboard from '../../shared/CopyToClipboard';
+import type { TApiKeyItem } from 'data/apiKey';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
   item: TApiKeyItem;

ui/apiKey/DeleteApiKeyModal.tsx

 import React, { useCallback } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from '../shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal'
 
 type Props = {
   isOpen: boolean;

ui/navigation/AccountNavigation.tsx

 import React from 'react';
 import { Box, VStack } from '@chakra-ui/react';
 import AccountNavLink from './AccountNavLink';
-import WatchlistIcon from '../../icons/watchlist.svg'
-import PrivateTagIcon from '../../icons/privattags.svg'
-import PublicTagIcon from '../../icons/publictags.svg'
-import ApiKeysIcon from '../../icons/API.svg';
-import ABIIcon from '../../icons/ABI.svg';
+import WatchlistIcon from 'icons/watchlist.svg'
+import PrivateTagIcon from 'icons/privattags.svg'
+import PublicTagIcon from 'icons/publictags.svg'
+import ApiKeysIcon from 'icons/API.svg';
+import ABIIcon from 'icons/ABI.svg';
 
 const navItems = [
   { text: 'Watchlist', pathname: '/watchlist', icon: WatchlistIcon },

ui/navigation/MainNavigation.tsx

 import React from 'react';
 import { Box, VStack } from '@chakra-ui/react';
 import MainNavLink from './MainNavLink';
-import BlocksIcon from '../../icons/block.svg'
-import TransactionsIcon from '../../icons/transactions.svg'
-import TokensIcon from '../../icons/token.svg'
-import AppsIcon from '../../icons/apps.svg';
-import BlockscoutIcon from '../../icons/blockscout.svg';
+import BlocksIcon from 'icons/block.svg'
+import TransactionsIcon from 'icons/transactions.svg'
+import TokensIcon from 'icons/token.svg'
+import AppsIcon from 'icons/apps.svg';
+import BlockscoutIcon from 'icons/blockscout.svg';
 
 const navItems = [
   { text: 'Blocks', pathname: '/blocks', icon: BlocksIcon },

ui/navigation/NavFooter.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { VStack, Text, HStack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
 
-import ghIcon from '../../icons/social/git.svg';
-import twIcon from '../../icons/social/tweet.svg';
-import tgIcon from '../../icons/social/telega.svg';
-import statsIcon from '../../icons/social/stats.svg';
+import ghIcon from 'icons/social/git.svg';
+import twIcon from 'icons/social/tweet.svg';
+import tgIcon from 'icons/social/telega.svg';
+import statsIcon from 'icons/social/stats.svg';
 
 const SOCIAL_LINKS = [
   { link: '#gh', icon: ghIcon },

ui/navigation/Navigation.tsx

@@ -5,8 +5,8 @@ import AccountNavigation from './AccountNavigation';
 import MainNavigation from './MainNavigation';
 import NavFooter from './NavFooter'
 
-import logoIcon from '../../icons/logo.svg';
-import networksIcon from '../../icons/networks.svg';
+import logoIcon from 'icons/logo.svg';
+import networksIcon from 'icons/networks.svg';
 
 const Navigation = () => {
   return (

ui/pages/ApiKeys.tsx

@@ -2,16 +2,16 @@ import React, { useCallback, useState } from 'react';
 
 import { Box, Button, Heading, HStack, Link, Text, useColorModeValue, useDisclosure } from '@chakra-ui/react';
 
-import Page from '../Page/Page';
+import Page from 'ui/shared/Page/Page';
 
-import ApiKeyTable from '../apiKey/ApiKeyTable/ApiKeyTable';
-import ApiKeyModal from '../apiKey/ApiKeyModal/ApiKeyModal';
-import DeleteApiKeyModal from '../apiKey/DeleteApiKeyModal';
+import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
+import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
+import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 
-import type { TApiKeyItem } from '../../data/apiKey';
-import { apiKey } from '../../data/apiKey';
+import type { TApiKeyItem } from 'data/apiKey';
+import { apiKey } from 'data/apiKey';
 
-import { space } from '../../lib/html-entities';
+import { space } from 'lib/html-entities';
 
 const DATA_LIMIT = 3;
 

ui/pages/PrivateTags.tsx

@@ -10,9 +10,9 @@ import {
   TabPanels,
 } from '@chakra-ui/react';
 
-import Page from '../Page/Page';
-import PrivateAddressTags from '../privateTags/PrivateAddressTags';
-import PrivateTransactionTags from '../privateTags/PrivateTransactionTags';
+import Page from 'ui/shared/Page/Page';
+import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
+import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
 
 const PrivateTags: React.FC = () => {
   return (

ui/pages/Watchlist.tsx

@@ -2,14 +2,14 @@ import React, { useCallback, useState } from 'react';
 
 import { Box, Button, Text, useDisclosure, Heading } from '@chakra-ui/react';
 
-import Page from '../Page/Page';
+import Page from 'ui/shared/Page/Page';
 
-import WatchlistTable from '../watchlist/WatchlistTable/WatchlistTable';
-import AddressModal from '../watchlist/AddressModal/AddressModal';
+import WatchlistTable from 'ui/watchlist/WatchlistTable/WatchlistTable';
+import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 
-import type { TWatchlistItem } from '../../data/watchlist';
-import { watchlist } from '../../data/watchlist';
-import DeleteAddressModal from '../watchlist/DeleteAddressModal';
+import type { TWatchlistItem } from 'data/watchlist';
+import { watchlist } from 'data/watchlist';
+import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 
 const WatchList: React.FC = () => {
   const addressModalProps = useDisclosure();

ui/privateTags/AddressModal/AddressForm.tsx

@@ -7,10 +7,10 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import AddressInput from '../../shared/AddressInput';
-import TagInput from '../../shared/TagInput';
+import AddressInput from 'ui/shared/AddressInput';
+import TagInput from 'ui/shared/TagInput';
 
-import type { TPrivateTagsAddressItem } from '../../../data/privateTagsAddress';
+import type { TPrivateTagsAddressItem } from 'data/privateTagsAddress';
 
 const ADDRESS_LENGTH = 42;
 const TAG_MAX_LENGTH = 35;

ui/privateTags/AddressModal/AddressModal.tsx

 import React, { useCallback } from 'react';
 
-import type { TPrivateTagsAddressItem } from '../../../data/privateTagsAddress';
+import type { TPrivateTagsAddressItem } from 'data/privateTagsAddress';
 
 import AddressForm from './AddressForm';
-import FormModal from '../../shared/FormModal';
+import FormModal from 'ui/shared/FormModal';
 
 type Props = {
   isOpen: boolean;

ui/privateTags/AddressTagTable/AddressTagTable.tsx

@@ -9,7 +9,7 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TPrivateTagsAddress, TPrivateTagsAddressItem } from '../../../data/privateTagsAddress';
+import type { TPrivateTagsAddress, TPrivateTagsAddressItem } from 'data/privateTagsAddress';
 
 import AddressTagTableItem from './AddressTagTableItem';
 

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -8,12 +8,12 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
-import AddressIcon from '../../shared/AddressIcon';
-import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 
-import type { TPrivateTagsAddressItem } from '../../../data/privateTagsAddress';
-import EditButton from '../../shared/EditButton';
-import DeleteButton from '../../shared/DeleteButton';
+import type { TPrivateTagsAddressItem } from 'data/privateTagsAddress';
+import EditButton from 'ui/shared/EditButton';
+import DeleteButton from 'ui/shared/DeleteButton';
 
 interface Props {
   item: TPrivateTagsAddressItem;

ui/privateTags/DeletePrivateTagModal.tsx

 import React, { useCallback } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from '../shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal'
 
 type Props = {
   isOpen: boolean;

ui/privateTags/PrivateAddressTags.tsx

@@ -5,8 +5,8 @@ import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
 import AddressTagTable from './AddressTagTable/AddressTagTable';
 import AddressModal from './AddressModal/AddressModal';
 
-import type { TPrivateTagsAddressItem } from './../../data/privateTagsAddress';
-import { privateTagsAddress } from './../../data/privateTagsAddress';
+import type { TPrivateTagsAddressItem } from 'data/privateTagsAddress';
+import { privateTagsAddress } from 'data/privateTagsAddress';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags: React.FC = () => {

ui/privateTags/PrivateTransactionTags.tsx

@@ -5,8 +5,8 @@ import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
 import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 import TransactionModal from './TransactionModal/TransactionModal';
 
-import type { TPrivateTagsTransactionItem } from './../../data/privateTagsTransaction';
-import { privateTagsTransaction } from './../../data/privateTagsTransaction';
+import type { TPrivateTagsTransactionItem } from 'data/privateTagsTransaction';
+import { privateTagsTransaction } from 'data/privateTagsTransaction';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateTransactionTags: React.FC = () => {

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -7,10 +7,10 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import TransactionInput from '../../shared/TransactionInput';
-import TagInput from '../../shared/TagInput';
+import TransactionInput from 'ui/shared/TransactionInput';
+import TagInput from 'ui/shared/TagInput';
 
-import type { TPrivateTagsTransactionItem } from '../../../data/privateTagsTransaction';
+import type { TPrivateTagsTransactionItem } from 'data/privateTagsTransaction';
 
 const HASH_LENGTH = 66;
 const TAG_MAX_LENGTH = 35;

ui/privateTags/TransactionModal/TransactionModal.tsx

 import React, { useCallback } from 'react';
 
-import type { TPrivateTagsTransactionItem } from '../../../data/privateTagsTransaction';
+import type { TPrivateTagsTransactionItem } from 'data/privateTagsTransaction';
 
 import TransactionForm from './TransactionForm';
-import FormModal from '../../shared/FormModal';
+import FormModal from 'ui/shared/FormModal';
 
 type Props = {
   isOpen: boolean;

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

@@ -9,7 +9,7 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TPrivateTagsTransaction, TPrivateTagsTransactionItem } from '../../../data/privateTagsTransaction';
+import type { TPrivateTagsTransaction, TPrivateTagsTransactionItem } from 'data/privateTagsTransaction';
 
 import TransactionTagTableItem from './TransactionTagTableItem';
 

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -8,12 +8,12 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
-import EditButton from '../../shared/EditButton';
-import DeleteButton from '../../shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
+import DeleteButton from 'ui/shared/DeleteButton';
 
-import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 
-import type { TPrivateTagsTransactionItem } from '../../../data/privateTagsTransaction';
+import type { TPrivateTagsTransactionItem } from 'data/privateTagsTransaction';
 
 interface Props {
   item: TPrivateTagsTransactionItem;

ui/shared/CopyToClipboard.tsx

 import React, { useEffect, useState } from 'react';
 
 import { IconButton, Tooltip, useClipboard } from '@chakra-ui/react';
-import CopyIcon from '../../icons/copy.svg';
+import CopyIcon from 'icons/copy.svg';
 
 const CopyToClipboard = ({ text }: {text: string}) => {
   const { hasCopied, onCopy } = useClipboard(text, 3000);

ui/shared/DeleteButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
 
-import DeleteIcon from '../../icons/delete.svg';
+import DeleteIcon from 'icons/delete.svg';
 
 type Props = {
   onClick: () => void;

ui/shared/EditButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
 
-import EditIcon from '../../icons/edit.svg';
+import EditIcon from 'icons/edit.svg';
 
 type Props = {
   onClick: () => void;

ui/Page/Page.tsx → ui/shared/Page/Page.tsx

 import React from 'react';
 import { Box, HStack, VStack } from '@chakra-ui/react';
 
-import Navigation from '../navigation/Navigation';
-import Header from '../header/Header';
+import Navigation from 'ui/navigation/Navigation';
+import Header from 'ui/header/Header';
 
 interface Props {
   children: React.ReactNode;

ui/watchlist/AddressModal/AddressForm.tsx

@@ -11,10 +11,10 @@ import {
   GridItem,
 } from '@chakra-ui/react';
 
-import AddressInput from '../../shared/AddressInput';
-import TagInput from '../../shared/TagInput';
+import AddressInput from 'ui/shared/AddressInput';
+import TagInput from 'ui/shared/TagInput';
 
-import type { TWatchlistItem } from '../../../data/watchlist';
+import type { TWatchlistItem } from 'data/watchlist';
 
 const NOTIFICATIONS = [ 'xDAI', 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
 const ADDRESS_LENGTH = 42;

ui/watchlist/AddressModal/AddressModal.tsx

 import React, { useCallback } from 'react';
 
-import type { TWatchlistItem } from '../../../data/watchlist';
+import type { TWatchlistItem } from 'data/watchlist';
 
 import AddressForm from './AddressForm';
-import FormModal from '../../shared/FormModal';
+import FormModal from 'ui/shared/FormModal';
 
 type Props = {
   isOpen: boolean;

ui/watchlist/DeleteAddressModal.tsx

 import React, { useCallback } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from '../shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal'
 
 type Props = {
   isOpen: boolean;

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { Link, HStack, VStack, Image, Text, Icon, useColorModeValue } from '@chakra-ui/react';
 
-import AddressIcon from '../../shared/AddressIcon';
-import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
-import type { TWatchlistItem } from '../../../data/watchlist';
-import { nbsp } from '../../../lib/html-entities';
-import TokensIcon from '../../../icons/tokens.svg';
-import WalletIcon from '../../../icons/wallet.svg';
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import type { TWatchlistItem } from 'data/watchlist';
+import { nbsp } from 'lib/html-entities';
+import TokensIcon from 'icons/tokens.svg';
+import WalletIcon from 'icons/wallet.svg';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   const mainTextColor = useColorModeValue('gray.700', 'gray.50');

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -9,10 +9,10 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
-import EditButton from '../../shared/EditButton';
-import DeleteButton from '../../shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
+import DeleteButton from 'ui/shared/DeleteButton';
 
-import type { TWatchlistItem } from '../../../data/watchlist';
+import type { TWatchlistItem } from 'data/watchlist';
 
 import WatchListAddressItem from './WatchListAddressItem';
 

ui/watchlist/WatchlistTable/WatchlistTable.tsx

@@ -9,7 +9,7 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TWatchlist, TWatchlistItem } from '../../../data/watchlist';
+import type { TWatchlist, TWatchlistItem } from 'data/watchlist';
 
 import WatchlistTableItem from './WatchListTableItem';