Merge branch 'main' into color-mode-smooth-transition

.eslintrc.js

@@ -243,4 +243,12 @@ module.exports = {
     'regexp/no-useless-character-class': 'error',
     'regexp/no-useless-dollar-replacements': 'error',
   },
+  overrides: [
+    {
+      files: [ '*.js', '*.jsx' ],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+  ],
 };

.github/workflows/linters.yml

+name: Linters
+on: [pull_request]
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install dependencies
+      run: yarn
+    - name: Run ESLint
+      run: yarn lint:eslint
\ No newline at end of file

next.config.js

-const withReactSvg = require('next-react-svg')
-const path = require('path')
+const withReactSvg = require('next-react-svg');
+const path = require('path');
 
 module.exports = withReactSvg({
   include: path.resolve(__dirname, 'icons'),
   reactStrictMode: true,
-  webpack(config, options) {
+  webpack(config) {
     return config
-  }
+  },
 })

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint:eslint": "./node_modules/.bin/eslint . --ext .js,.jsx,.ts,.tsx",
     "prepare": "husky install"
   },
   "dependencies": {

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 (

theme/components/Heading.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const baseStyle = {
+  fontWeight: '500',
+  letterSpacing: '-0.5px',
+}
+
+// WIP
+// designer promised to sync theme and page mock-ups
+// so that's not the final point yet
+const sizes = {
+  lg: {
+    fontSize: '32px',
+    lineHeight: '40px',
+  },
+}
+
+const Heading: ComponentStyleConfig = {
+  sizes,
+  baseStyle,
+}
+
+export default Heading;

theme/components/index.ts

 import Button from './Button';
 import Form from './Form';
+import Heading from './Heading';
 import Input from './Input';
 import Link from './Link';
 import Modal from './Modal';
@@ -10,6 +11,7 @@ import Tooltip from './Tooltip';
 
 const components = {
   Button,
+  Heading,
   Input,
   Form,
   Link,

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,11 +2,11 @@ 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 getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+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';
 
 import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
 

ui/pages/ApiKeys.tsx

 import React, { useCallback, useState } from 'react';
 
-import { Box, Button, HStack, Link, Text, useColorModeValue, useDisclosure } from '@chakra-ui/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;
 
@@ -49,7 +49,7 @@ const ApiKeys: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>API keys</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>API keys</Heading>
         <Text marginBottom={ 12 }>
           Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
           <Link href="#">“How to use a Blockscout API key”</Link>.

ui/pages/PrivateTags.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {
   Box,
+  Heading,
   Tab,
   Tabs,
   TabList,
@@ -9,15 +10,15 @@ 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 (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>Private tags</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>Private tags</Heading>
         <Tabs variant="soft-rounded" colorScheme="blue">
           <TabList marginBottom={ 8 }>
             <Tab>Address</Tab>

ui/pages/Watchlist.tsx

 import React, { useCallback, useState } from 'react';
 
-import { Box, Button, Text, useDisclosure } from '@chakra-ui/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();
@@ -41,7 +41,7 @@ const WatchList: React.FC = () => {
   return (
     <Page>
       <Box h="100%">
-        <Box as="h1" textStyle="h2" marginBottom={ 8 }>Watch list</Box>
+        <Heading as="h1" size="lg" marginBottom={ 8 }>Watch list</Heading>
         <Text marginBottom={ 12 }>An email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
         { Boolean(watchlist.length) && (
           <WatchlistTable

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';