import order rule

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     '@typescript-eslint',
     'react-hooks',
     'jsx-a11y',
+    'eslint-plugin-import-helpers',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -180,6 +181,20 @@ module.exports = {
     'wrap-iife': [ 'error', 'inside' ],
     semi: [ 'error', 'always' ],
 
+    'import-helpers/order-imports': [
+      'error',
+      {
+        newlinesBetween: 'always',
+        groups: [
+          'module',
+          '/types/',
+          [ '/^data/', '/^icons/', '/^lib/', '/^pages/', '/^theme/', '/^ui/' ],
+          [ 'parent', 'sibling', 'index' ],
+        ],
+        alphabetize: { order: 'asc', ignoreCase: true },
+      },
+    ],
+
     'react/jsx-key': 'error',
     'react/jsx-no-bind': [ 'error', {
       ignoreRefs: true,

package.json

@@ -38,6 +38,7 @@
     "eslint": "8.16.0",
     "eslint-config-next": "12.1.6",
     "eslint-plugin-es5": "^1.5.0",
+    "eslint-plugin-import-helpers": "^1.2.1",
     "eslint-plugin-regexp": "^1.7.0",
     "husky": "^8.0.0",
     "lint-staged": ">=10",

pages/_app.tsx

-import React, { useState } from 'react';
-import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
-import theme from 'theme';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AppProps } from 'next/app';
+import React, { useState } from 'react';
+
+import theme from 'theme';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [ queryClient ] = useState(() => new QueryClient({

pages/_document.tsx

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

pages/api-keys.tsx

-import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import React from 'react';
 
 import ApiKeys from 'ui/pages/ApiKeys';
 

pages/api/account/private-tags/address/index.ts

-import handler from 'pages/api/utils/handler';
-
 import type { AddressTags } from 'pages/api/types/account';
 
+import handler from 'pages/api/utils/handler';
+
 const addressHandler = handler<AddressTags>(() => '/account/v1/user/tags/address', [ 'GET', 'POST' ]);
 
 export default addressHandler;

pages/api/account/private-tags/transaction/index.ts

-import handler from 'pages/api/utils/handler';
-
 import type { TransactionTags } from 'pages/api/types/account';
 
+import handler from 'pages/api/utils/handler';
+
 const transactionHandler = handler<TransactionTags>(() => '/account/v1/user/tags/transaction', [ 'GET', 'POST' ]);
 
 export default transactionHandler;

pages/index.tsx

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

pages/private-tags.tsx

-import React, { useCallback, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import type { NextPage } from 'next';
 import Head from 'next/head';
-
-import { useQuery } from '@tanstack/react-query';
+import React, { useCallback, useState } from 'react';
 
 import PrivateTags from 'ui/pages/PrivateTags';
 

pages/public-tags.tsx

-import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import React from 'react';
 
 import PublicTags from 'ui/pages/PublicTags';
 

pages/watchlist.tsx

-import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import React from 'react';
 
 import WatchList from 'ui/pages/Watchlist';
 

theme/components/Form.ts

@@ -3,6 +3,7 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { getColor, mode } from '@chakra-ui/theme-tools';
 import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
 import type { Dict } from '@chakra-ui/utils';
+
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
 const activeInputStyles = {

theme/components/Input.ts

 import type { inputAnatomy as parts } from '@chakra-ui/anatomy';
+import { Input as InputComponent } from '@chakra-ui/react';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
+
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-import { Input as InputComponent } from '@chakra-ui/react';
-
 const sizes: Record<string, SystemStyleObject> = {
   md: {
     fontSize: 'md',

theme/components/Link.ts

 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
 import type { SystemStyleFunction, SystemStyleInterpolation } from '@chakra-ui/theme-tools';
+
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const baseStyle: SystemStyleInterpolation = {

theme/components/Modal.ts

 import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
-import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 
 const baseStyleDialog: SystemStyleFunction = (props) => {
   return {

theme/components/Table.ts

@@ -2,6 +2,7 @@ import type { tableAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
 import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const variantSimple: PartsStyleFunction<typeof parts> = (props) => {

theme/components/Tabs.ts

+import type { tabsAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type {
   PartsStyleFunction,
 } from '@chakra-ui/theme-tools';
 import { getColor } from '@chakra-ui/theme-tools';
 
-import type { tabsAnatomy as parts } from '@chakra-ui/anatomy';
-
 const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
   const { colorScheme: c, theme } = props;
   return {

theme/components/Tag.ts

@@ -2,6 +2,7 @@ import type { tagAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
 import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const variantGray: PartsStyleFunction<typeof parts> = (props) => {

theme/components/Text.ts

-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
 const variantSecondary: SystemStyleFunction = (props) => ({

theme/components/Textarea.ts

+import { Textarea as TextareaComponent } from '@chakra-ui/react';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type {
   SystemStyleObject,
 } from '@chakra-ui/theme-tools';
 
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-import { Textarea as TextareaComponent } from '@chakra-ui/react';
-
 const sizes: Record<string, SystemStyleObject> = {
   lg: {
     fontSize: 'md',

theme/components/Tooltip.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { Tooltip as TooltipComponent } from '@chakra-ui/react';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const Tooltip: ComponentStyleConfig = {
   baseStyle: {

theme/global.ts

 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
+
 import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
 
 const global = (props: StyleFunctionProps) => ({

theme/index.ts

 import { extendTheme } from '@chakra-ui/react';
 
-import typography from './foundations/typography';
-import borders from './foundations/borders';
-import colors from './foundations/colors';
 import components from './components/index';
 import config from './config';
+import borders from './foundations/borders';
+import colors from './foundations/colors';
+import typography from './foundations/typography';
 import global from './global';
 
 const overrides = {

theme/utils/getOutlinedFieldStyles.ts

 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode, getColor } from '@chakra-ui/theme-tools';
+
 import getDefaultFormColors from './getDefaultFormColors';
 import getDefaultTransitionProps from './getDefaultTransitionProps';
 

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

-import React, { useCallback, useEffect } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
-
 import {
   Box,
   Button,
@@ -9,6 +5,9 @@ import {
   FormLabel,
   Input,
 } from '@chakra-ui/react';
+import React, { useCallback, useEffect } from 'react';
+import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 
 import type { TApiKeyItem } from 'data/apiKey';
 

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

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

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

-import React from 'react';
-
 import {
   Table,
   Thead,
@@ -8,6 +6,7 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import React from 'react';
 
 import type { TApiKey, TApiKeyItem } from 'data/apiKey';
 

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

-import React, { useCallback } from 'react';
-
 import {
   Tr,
   Td,
   HStack,
   Text,
 } from '@chakra-ui/react';
-
-import EditButton from 'ui/shared/EditButton';
-import DeleteButton from 'ui/shared/DeleteButton';
+import React, { useCallback } from 'react';
 
 import type { TApiKeyItem } from 'data/apiKey';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DeleteButton from 'ui/shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
 
 interface Props {
   item: TApiKeyItem;

ui/apiKey/DeleteApiKeyModal.tsx

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

ui/header/ColorModeToggler.tsx

 import type { UseCheckboxProps } from '@chakra-ui/checkbox';
 import { useCheckbox } from '@chakra-ui/checkbox';
+import { SunIcon } from '@chakra-ui/icons';
+import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
 import type {
   SystemStyleObject,
   ThemingProps,
@@ -12,11 +14,9 @@ import {
 } from '@chakra-ui/system';
 import { dataAttr, __DEV__ } from '@chakra-ui/utils';
 import * as React from 'react';
-import { SunIcon } from '@chakra-ui/icons';
-import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
-import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
-import moonIcon from '../../icons/moon.svg';
 
+import moonIcon from '../../icons/moon.svg';
+import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
 import styles from './ColorModeToggler.module.css';
 
 export interface ColorModeTogglerProps

ui/header/Header.tsx

-import React from 'react';
-import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, useColorModeValue } from '@chakra-ui/react';
 import { SearchIcon } from '@chakra-ui/icons';
+import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
 import Identicon from 'react-identicons';
-import { ColorModeToggler } from './ColorModeToggler';
 
+import { ColorModeToggler } from './ColorModeToggler';
 import styles from './Header.module.css';
 
 const Header = () => {

ui/navigation/AccountNavLink.tsx

-import React from 'react';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
+import React from 'react';
+
 import useColors from './useColors';
 
 interface Props {

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 React from 'react';
+
+import ABIIcon from 'icons/ABI.svg';
+import ApiKeysIcon from 'icons/API.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 AccountNavLink from './AccountNavLink';
 
 const navItems = [
   { text: 'Watchlist', pathname: '/watchlist', icon: WatchlistIcon },

ui/navigation/MainNavLink.tsx

-import React from 'react';
+import { ChevronRightIcon } from '@chakra-ui/icons';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
-import { ChevronRightIcon } from '@chakra-ui/icons';
+import React from 'react';
+
 import useColors from './useColors';
 
 interface Props {

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 React from 'react';
+
 import AppsIcon from 'icons/apps.svg';
+import BlocksIcon from 'icons/block.svg';
 import BlockscoutIcon from 'icons/blockscout.svg';
+import TokensIcon from 'icons/token.svg';
+import TransactionsIcon from 'icons/transactions.svg';
+
+import MainNavLink from './MainNavLink';
 
 const navItems = [
   { text: 'Blocks', pathname: '/blocks', icon: BlocksIcon },

ui/navigation/NavFooter.tsx

-import React from 'react';
-
 import { VStack, Text, HStack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
 
-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';
+import tgIcon from 'icons/social/telega.svg';
+import twIcon from 'icons/social/tweet.svg';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
   { link: '#gh', icon: ghIcon },

ui/navigation/Navigation.tsx

-import React from 'react';
 import { VStack, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
-
-import AccountNavigation from './AccountNavigation';
-import MainNavigation from './MainNavigation';
-import NavFooter from './NavFooter';
+import React from 'react';
 
 import logoIcon from 'icons/logo.svg';
 import networksIcon from 'icons/networks.svg';
 
 import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
+import AccountNavigation from './AccountNavigation';
+import MainNavigation from './MainNavigation';
+import NavFooter from './NavFooter';
 
 const Navigation = () => {
   return (

ui/pages/ApiKeys.tsx

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

ui/pages/PrivateTags.tsx

-import React, { useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-
-import type { AddressTags, TransactionTags } from 'types/api/account';
-
 import {
   Box,
   Tab,
@@ -11,11 +6,15 @@ import {
   TabPanel,
   TabPanels,
 } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React, { useCallback } from 'react';
+
+import type { AddressTags, TransactionTags } from 'types/api/account';
 
-import Page from 'ui/shared/Page/Page';
-import AccountPageHeader from 'ui/shared/AccountPageHeader';
 import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
 import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
+import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import Page from 'ui/shared/Page/Page';
 
 type Props = {
   onChangeTab: (index: number) => void;

ui/pages/PublicTags.tsx

-import React, { useCallback, useState } from 'react';
-import { animateScroll } from 'react-scroll';
-
 import {
   Box,
   useToast,
 } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+import { animateScroll } from 'react-scroll';
 
-import Page from 'ui/shared/Page/Page';
-import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import type { TPublicTagItem } from 'data/publicTags';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
 import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
-
-import type { TPublicTagItem } from 'data/publicTags';
+import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import Page from 'ui/shared/Page/Page';
 
 type TScreen = 'data' | 'form';
 

ui/pages/Watchlist.tsx

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

ui/privateTags/AddressModal/AddressForm.tsx

-import React, { useCallback, useEffect, useState } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
-
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
 import {
   Box,
   Button,
 } from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
+
+import type { AddressTag } from 'types/api/account';
 
 import AddressInput from 'ui/shared/AddressInput';
 import TagInput from 'ui/shared/TagInput';
-import type { AddressTag } from 'types/api/account';
 
 const ADDRESS_LENGTH = 42;
 const TAG_MAX_LENGTH = 35;

ui/privateTags/AddressModal/AddressModal.tsx

@@ -2,9 +2,10 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AddressForm from './AddressForm';
 import FormModal from 'ui/shared/FormModal';
 
+import AddressForm from './AddressForm';
+
 type Props = {
   isOpen: boolean;
   onClose: () => void;

ui/privateTags/AddressTagTable/AddressTagTable.tsx

-import React from 'react';
-
 import {
   Table,
   Thead,
@@ -8,6 +6,7 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import React from 'react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
 

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

-import React, { useCallback } from 'react';
-
 import {
   Tag,
   Tr,
   Td,
   HStack,
 } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+
+import type { AddressTag } from 'types/api/account';
 
 import AddressIcon from 'ui/shared/AddressIcon';
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
-
-import type { AddressTag } from 'types/api/account';
-import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 interface Props {

ui/privateTags/DeletePrivateTagModal.tsx

-import React, { useCallback, useState } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from 'ui/shared/DeleteModal';
-
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import React, { useCallback, useState } from 'react';
 
 import type { AddressTag, TransactionTag } from 'types/api/account';
 
+import DeleteModal from 'ui/shared/DeleteModal';
+
 type Props = {
   isOpen: boolean;
   onClose: () => void;

ui/privateTags/PrivateAddressTags.tsx

+import { Box, Button, Spinner, Text, useDisclosure } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
-import { Box, Button, Spinner, Text, useDisclosure } from '@chakra-ui/react';
+import type { AddressTags, AddressTag } from 'types/api/account';
 
-import AddressTagTable from './AddressTagTable/AddressTagTable';
 import AddressModal from './AddressModal/AddressModal';
+import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
-import type { AddressTags, AddressTag } from 'types/api/account';
 
 type Props = {
   addressTags: AddressTags;

ui/privateTags/PrivateTransactionTags.tsx

-import React, { useCallback, useState } from 'react';
-
 import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
 
 import type { TransactionTags, TransactionTag } from 'types/api/account';
 
-import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
-import TransactionModal from './TransactionModal/TransactionModal';
-
 import DeletePrivateTagModal from './DeletePrivateTagModal';
+import TransactionModal from './TransactionModal/TransactionModal';
+import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 type Props = {
   transactionTags: TransactionTags;

ui/privateTags/TransactionModal/TransactionForm.tsx

+import {
+  Box,
+  Button,
+} from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useState } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { TransactionTag } from 'types/api/account';
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import {
-  Box,
-  Button,
-} from '@chakra-ui/react';
-
-import TransactionInput from 'ui/shared/TransactionInput';
 import TagInput from 'ui/shared/TagInput';
+import TransactionInput from 'ui/shared/TransactionInput';
 
 const HASH_LENGTH = 66;
 const TAG_MAX_LENGTH = 35;

ui/privateTags/TransactionModal/TransactionModal.tsx

@@ -2,9 +2,10 @@ import React, { useCallback } from 'react';
 
 import type { TransactionTag } from 'types/api/account';
 
-import TransactionForm from './TransactionForm';
 import FormModal from 'ui/shared/FormModal';
 
+import TransactionForm from './TransactionForm';
+
 type Props = {
   isOpen: boolean;
   onClose: () => void;

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

-import React from 'react';
-
-import type { TransactionTags, TransactionTag } from 'types/api/account';
-
 import {
   Table,
   Thead,
@@ -10,6 +6,9 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TransactionTags, TransactionTag } from 'types/api/account';
 
 import TransactionTagTableItem from './TransactionTagTableItem';
 

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

-import React, { useCallback } from 'react';
-
 import {
   Tag,
   Tr,
@@ -7,13 +5,13 @@ import {
   HStack,
   Tooltip,
 } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
-import EditButton from 'ui/shared/EditButton';
-import DeleteButton from 'ui/shared/DeleteButton';
+import type { TransactionTag } from 'types/api/account';
 
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
-
-import type { TransactionTag } from 'types/api/account';
+import DeleteButton from 'ui/shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
 
 interface Props {
   item: TransactionTag;

ui/publicTags/DeletePublicTagModal.tsx

+import { Flex, Text, FormControl, FormLabel, Textarea } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 import type { ChangeEvent } from 'react';
-import { Flex, Text, FormControl, FormLabel, Textarea } from '@chakra-ui/react';
-
-import DeleteModal from 'ui/shared/DeleteModal';
 
 import type { TPublicTag } from 'data/publicTags';
+import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
   isOpen: boolean;

ui/publicTags/PublicTagTable/PublicTagTable.tsx

-import React from 'react';
-
 import {
   Table,
   Thead,
@@ -8,6 +6,7 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import React from 'react';
 
 import type { TPublicTagItem, TPublicTags } from 'data/publicTags';
 

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

-import React, { useCallback } from 'react';
-
 import {
   Box,
   Tag,
@@ -10,14 +8,14 @@ import {
   VStack,
   useColorModeValue,
 } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
+import type { TPublicTagItem, TPublicTagAddress, TPublicTag } from 'data/publicTags';
 import AddressIcon from 'ui/shared/AddressIcon';
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
-
-import type { TPublicTagItem, TPublicTagAddress, TPublicTag } from 'data/publicTags';
-import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 interface Props {
   item: TPublicTagItem;

ui/publicTags/PublicTagsData.tsx

@@ -3,8 +3,9 @@ import React, { useCallback, useState } from 'react';
 
 import type { TPublicTagItem, TPublicTag } from 'data/publicTags';
 import { publicTags } from 'data/publicTags';
-import PublicTagTable from './PublicTagTable/PublicTagTable';
+
 import DeletePublicTagModal from './DeletePublicTagModal';
+import PublicTagTable from './PublicTagTable/PublicTagTable';
 
 type Props = {
   changeToFormScreen: (data?: TPublicTagItem) => void;

ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx

+import { RadioGroup, Radio, Stack } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { RadioGroup, Radio, Stack } from '@chakra-ui/react';
 import { Controller } from 'react-hook-form';
+
 import type { Inputs } from './PublicTagsForm';
 
 interface Props {

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

+import { IconButton, Icon } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { IconButton, Icon } from '@chakra-ui/react';
 import { Controller } from 'react-hook-form';
-import type { Inputs } from './PublicTagsForm';
-import AddressInput from 'ui/shared/AddressInput';
 
-import PlusIcon from 'icons/plus.svg';
 import MinusIcon from 'icons/minus.svg';
+import PlusIcon from 'icons/plus.svg';
+import AddressInput from 'ui/shared/AddressInput';
+
+import type { Inputs } from './PublicTagsForm';
 
 interface Props {
   control: Control<Inputs>;

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

+import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { FormControl, FormLabel, Textarea } from '@chakra-ui/react';
 import { Controller } from 'react-hook-form';
+
 import type { Inputs } from './PublicTagsForm';
 
 interface Props {

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -7,16 +7,15 @@ import {
   HStack,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
-
-import type { TPublicTagItem, TPublicTag, TPublicTagAddress } from 'data/publicTags';
-
 import type { Path } from 'react-hook-form';
 import { useForm, useFieldArray } from 'react-hook-form';
 
+import type { TPublicTagItem, TPublicTag, TPublicTagAddress } from 'data/publicTags';
+
 import PublicTagFormAction from './PublicTagFormAction';
+import PublicTagFormAddressInput from './PublicTagFormAddressInput';
 import PublicTagFormComment from './PublicTagFormComment';
 import PublicTagsFormInput from './PublicTagsFormInput';
-import PublicTagFormAddressInput from './PublicTagFormAddressInput';
 
 type Props = {
   changeToDataScreen: (success?: boolean) => void;

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

+import { FormControl, FormLabel, Input } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, FieldValues, Path, Control } from 'react-hook-form';
-import { FormControl, FormLabel, Input } from '@chakra-ui/react';
 import { Controller } from 'react-hook-form';
 
 interface Props<TInputs extends FieldValues> {

ui/shared/AccountPageHeader.tsx

-import React from 'react';
-
 import { Heading } from '@chakra-ui/react';
+import React from 'react';
 
 const PageHeader = ({ text }: {text: string}) => {
   return (

ui/shared/AddressIcon.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
-import { Box } from '@chakra-ui/react';
 
 const AddressIcon = ({ address }: {address: string}) => {
   return (

ui/shared/AddressInput.tsx

-import React from 'react';
-import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
-
 import {
   Input,
   FormControl,
   FormLabel,
 } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
 
 const ADDRESS_LENGTH = 42;
 

ui/shared/AddressLinkWithTooltip.tsx

-import React from 'react';
-
 import { HStack, Link } from '@chakra-ui/react';
+import React from 'react';
 
 import AddressWithDots from './AddressWithDots';
 import CopyToClipboard from './CopyToClipboard';

ui/shared/AddressWithDots.tsx

@@ -8,11 +8,12 @@
 
 // so i did it with js
 
-import React, { useCallback, useEffect, useRef } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useRef } from 'react';
 import type { FontFace } from 'use-font-face-observer';
 import useFontFaceObserver from 'use-font-face-observer';
+
 import { BODY_TYPEFACE } from 'theme/foundations/typography';
 
 const TAIL_LENGTH = 4;

ui/shared/CopyToClipboard.tsx

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

ui/shared/DeleteButton.tsx

-import React, { useCallback } from 'react';
-
 import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
 import DeleteIcon from 'icons/delete.svg';
 

ui/shared/DeleteModal.tsx

-import React, { useCallback } from 'react';
-
 import {
   Button,
   Modal,
@@ -10,6 +8,7 @@ import {
   ModalBody,
   ModalCloseButton,
 } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
 type Props = {
   isOpen: boolean;

ui/shared/EditButton.tsx

-import React, { useCallback } from 'react';
-
 import { Tooltip, IconButton, Icon } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
 import EditIcon from 'icons/edit.svg';
 

ui/shared/FormModal.tsx

-import React from 'react';
-
 import {
   Modal,
   ModalOverlay,
@@ -9,6 +7,7 @@ import {
   ModalCloseButton,
   Text,
 } from '@chakra-ui/react';
+import React from 'react';
 
 interface Props<TData> {
   isOpen: boolean;

ui/shared/Page/Page.tsx

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

ui/shared/TagInput.tsx

-import React from 'react';
-
-import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
-
 import {
   Input,
   FormControl,
   FormLabel,
 } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
 
 const TAG_MAX_LENGTH = 35;
 

ui/shared/TransactionInput.tsx

-import React from 'react';
-import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
-
 import {
   Input,
   FormControl,
   FormLabel,
 } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
 
 const HASH_LENGTH = 66;
 

ui/shared/TruncatedTextTooltip.tsx

-import React from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import debounce from 'lodash/debounce';
+import React from 'react';
 import useFontFaceObserver from 'use-font-face-observer';
+
 import { BODY_TYPEFACE } from 'theme/foundations/typography';
 
 interface Props {

ui/watchlist/AddressModal/AddressForm.tsx

-import React, { useCallback, useEffect } from 'react';
-import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
-import { useForm, Controller } from 'react-hook-form';
-
 import {
   Box,
   Button,
@@ -10,12 +6,14 @@ import {
   Grid,
   GridItem,
 } from '@chakra-ui/react';
+import React, { useCallback, useEffect } from 'react';
+import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 
+import type { TWatchlistItem } from 'data/watchlist';
 import AddressInput from 'ui/shared/AddressInput';
 import TagInput from 'ui/shared/TagInput';
 
-import type { TWatchlistItem } from 'data/watchlist';
-
 const NOTIFICATIONS = [ 'xDAI', 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
 const ADDRESS_LENGTH = 42;
 const TAG_MAX_LENGTH = 35;

ui/watchlist/AddressModal/AddressModal.tsx

 import React, { useCallback } from 'react';
 
 import type { TWatchlistItem } from 'data/watchlist';
+import FormModal from 'ui/shared/FormModal';
 
 import AddressForm from './AddressForm';
-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 React, { useCallback } from 'react';
+
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

-import React from 'react';
-
 import { Link, HStack, VStack, Image, Text, Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
 
-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';
+import { nbsp } from 'lib/html-entities';
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   const mainTextColor = useColorModeValue('gray.700', 'gray.50');

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

-import React, { useCallback } from 'react';
-
 import {
   Tag,
   Tr,
@@ -7,13 +5,13 @@ import {
   Switch,
   HStack,
 } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 
-import EditButton from 'ui/shared/EditButton';
+import type { TWatchlistItem } from 'data/watchlist';
 import DeleteButton from 'ui/shared/DeleteButton';
+import EditButton from 'ui/shared/EditButton';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-import type { TWatchlistItem } from 'data/watchlist';
-
 import WatchListAddressItem from './WatchListAddressItem';
 
 interface Props {

ui/watchlist/WatchlistTable/WatchlistTable.tsx

-import React from 'react';
-
 import {
   Table,
   Thead,
@@ -8,6 +6,7 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import React from 'react';
 
 import type { TWatchlist, TWatchlistItem } from 'data/watchlist';
 

yarn.lock

@@ -1625,6 +1625,11 @@ eslint-plugin-es5@^1.5.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-es5/-/eslint-plugin-es5-1.5.0.tgz#aab19af3d4798f7924bba309bc4f87087280fbba"
   integrity sha512-Qxmfo7v2B7SGAEURJo0dpBweFf+JU15kSyALfiB2rXWcBuJ96r6X9kFHXFnhdopPHCaHjoQs1xQPUJVbGMb1AA==
 
+eslint-plugin-import-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import-helpers/-/eslint-plugin-import-helpers-1.2.1.tgz#22c7ac66c964e8257b2a6fb4aff8a51b35cbdc6d"
+  integrity sha512-BSqLlCnyX4tWGlvPUTpBgUoaFiWxXSztpk9SozZVW4TZU1ygZuF0Lrfn9CO5xx1XT+PVAR9yroP9JPRyB4rAjQ==
+
 eslint-plugin-import@^2.26.0:
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"