TW-265 [tech] Upgrade eslint rule import/no-cycle (#1032)

* TW-1180 Add import/no-cycle rule

* TW-1180 Fix rest of dependencies cycles

* TW-1180 Remove dead code

* TW-265 Upgrade eslint-plugin-import module

* TW-265 Add a final newline

* TW-265 Avoid removing eslint-config-react-app

* TW-265 Avoid moving .eslintrc

* TW-265 Avoid moving .eslintrc

.eslintrc

@@ -31,6 +31,7 @@
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/no-self-import": "error",
+    "import/no-cycle": "error",
     "import/order": [
       "error",
       {
@@ -42,7 +43,7 @@
           }
         ],
         "pathGroupsExcludedImportTypes": ["react"],
-        "groups": [["external", "builtin"], "internal", ["parent", "sibling", "index"]],
+        "groups": [["external", "builtin"], "internal", "parent", "sibling", "index"],
         "alphabetize": {
           "order": "asc",
           "caseInsensitive": true

e2e/src/utils/browser-context.utils.ts

@@ -3,6 +3,7 @@ import { Browser } from 'puppeteer';
 import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
 
 import { BrowserContext } from '../classes/browser-context.class';
+
 import { getExtensionId } from './browser.utils';
 import { RETRY_OPTIONS } from './timing.utils';
 

package.json

@@ -125,7 +125,7 @@
     "eslint": "^8.17.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-prettier": "^4",
     "eslint-webpack-plugin": "^3.2.0",
     "fast-glob": "^3.2.12",
@@ -215,6 +215,7 @@
     "@taquito/contracts-library": "17.0.0",
     "@taquito/tzip16": "17.0.0",
     "bignumber.js": "9.1.0",
+    "eslint-plugin-import": "2.29.0",
     "graphql-request": "^6.1.0",
     "json5": "^2.2.2"
   }

src/app/ErrorBoundary.tsx

@@ -4,7 +4,7 @@ import classNames from 'clsx';
 
 import { ReactComponent as DangerIcon } from 'app/icons/danger.svg';
 import { t, T } from 'lib/i18n';
-import { getOnlineStatus } from 'lib/temple/front';
+import { getOnlineStatus } from 'lib/temple/front/get-online-status';
 
 interface ErrorBoundaryProps extends React.PropsWithChildren {
   className?: string;

src/app/PageRouter.tsx

@@ -26,7 +26,7 @@ import Welcome from 'app/pages/Welcome/Welcome';
 import { AliceBobWithdraw } from 'app/pages/Withdraw/Debit/AliceBob/AliceBobWithdraw';
 import { Withdraw } from 'app/pages/Withdraw/Withdraw';
 import { usePageRouterAnalytics } from 'lib/analytics';
-import { Notifications, NotificationsItem } from 'lib/notifications';
+import { Notifications, NotificationsItem } from 'lib/notifications/components';
 import { useTempleClient } from 'lib/temple/front';
 import * as Woozie from 'lib/woozie';
 

src/app/atoms/index.ts

@@ -47,3 +47,5 @@ export { Stepper } from './Stepper/Stepper';
 export { DataPlaceholder } from './DataPlaceholder';
 
 export { default as ABContainer } from './ABContainer';
+
+export { PageTitle } from './PageTitle';

src/app/layouts/PageLayout.tsx

@@ -10,19 +10,20 @@ import ErrorBoundary from 'app/ErrorBoundary';
 import { ReactComponent as ChevronLeftIcon } from 'app/icons/chevron-left.svg';
 import ContentContainer from 'app/layouts/ContentContainer';
 import { T } from 'lib/i18n';
-import { NotificationsBell } from 'lib/notifications';
+import { NotificationsBell } from 'lib/notifications/components/bell';
 import { goBack, HistoryAction, navigate, useLocation } from 'lib/woozie';
 
 import { DonationBanner } from '../atoms/DonationBanner/DonationBanner';
 import { useOnboardingProgress } from '../pages/Onboarding/hooks/useOnboardingProgress.hook';
 import { AdvertisingBanner } from '../templates/advertising/advertising-banner/advertising-banner';
 import { AdvertisingOverlay } from '../templates/advertising/advertising-overlay/advertising-overlay';
-import { PageLayoutSelectors } from './PageLayout.selectors';
+
 import { ChangelogOverlay } from './PageLayout/ChangelogOverlay/ChangelogOverlay';
 import ConfirmationOverlay from './PageLayout/ConfirmationOverlay';
 import Header from './PageLayout/Header';
 import { NewsletterOverlay } from './PageLayout/NewsletterOverlay/NewsletterOverlay';
 import { OnRampOverlay } from './PageLayout/OnRampOverlay/OnRampOverlay';
+import { PageLayoutSelectors } from './PageLayout.selectors';
 
 interface PageLayoutProps extends PropsWithChildren, ToolbarProps {
   contentContainerStyle?: React.CSSProperties;

src/app/layouts/PageLayout/Header.tsx

@@ -12,10 +12,10 @@ import { useTempleClient, useAccount } from 'lib/temple/front';
 import Popper from 'lib/ui/Popper';
 import { Link } from 'lib/woozie';
 
-import styles from './Header.module.css';
-import { HeaderSelectors } from './Header.selectors';
 import AccountDropdown from './Header/AccountDropdown';
 import NetworkSelect from './Header/NetworkSelect';
+import styles from './Header.module.css';
+import { HeaderSelectors } from './Header.selectors';
 
 const Header: FC = () => {
   const appEnv = useAppEnv();

src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx

@@ -5,10 +5,10 @@ import classNames from 'clsx';
 import { Name, Button, HashShortView, Money, Identicon } from 'app/atoms';
 import AccountTypeBadge from 'app/atoms/AccountTypeBadge';
 import Balance from 'app/templates/Balance';
+import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { TempleAccount } from 'lib/temple/types';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 
-import { setAnotherSelector, setTestID } from '../../../../../lib/analytics';
 import { AccountDropdownSelectors } from './selectors';
 
 interface AccountItemProps {

src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx

@@ -14,12 +14,12 @@ import { useOnboardingProgress } from 'app/pages/Onboarding/hooks/useOnboardingP
 import { shouldShowNewsletterModalAction } from 'app/store/newsletter/newsletter-actions';
 import { useShouldShowNewsletterModalSelector } from 'app/store/newsletter/newsletter-selectors';
 import { useOnRampPossibilitySelector } from 'app/store/settings/selectors';
+import { setTestID } from 'lib/analytics';
 import { newsletterApi } from 'lib/apis/newsletter';
 import { useYupValidationResolver } from 'lib/form/use-yup-validation-resolver';
 import { T, t } from 'lib/i18n/react';
 import { useLocation } from 'lib/woozie';
 
-import { setTestID } from '../../../../lib/analytics';
 import NewsletterImage from './NewsletterImage.png';
 import { NewsletterOverlaySelectors } from './NewsletterOverlay.selectors';
 

src/app/layouts/TabsPageLayout.tsx

@@ -10,6 +10,7 @@ import { Link } from 'lib/woozie';
 
 import { useAppEnv } from '../env';
 import ErrorBoundary from '../ErrorBoundary';
+
 import PageLayout from './PageLayout';
 
 export interface TabInterface extends Required<TestIDProperty> {

src/app/pages/AddAsset/AddAsset.tsx

@@ -20,19 +20,13 @@ import {
   detectTokenStandard,
   IncorrectTokenIdError
 } from 'lib/assets/standards';
+import { getBalanceSWRKey } from 'lib/balances';
 import { T, t } from 'lib/i18n';
 import type { TokenMetadata } from 'lib/metadata';
 import { fetchOneTokenMetadata } from 'lib/metadata/fetch';
 import { TokenMetadataNotFoundError } from 'lib/metadata/on-chain';
 import { loadContract } from 'lib/temple/contract';
-import {
-  useTezos,
-  useNetwork,
-  useChainId,
-  useAccount,
-  getBalanceSWRKey,
-  validateContractAddress
-} from 'lib/temple/front';
+import { useTezos, useNetwork, useChainId, useAccount, validateContractAddress } from 'lib/temple/front';
 import * as Repo from 'lib/temple/repo';
 import { useSafeState } from 'lib/ui/hooks';
 import { delay } from 'lib/utils';

src/app/pages/Buy/Crypto/Exolix/steps/ApproveStep.tsx

@@ -17,6 +17,7 @@ import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 import { ExchangeDataInterface, ExchangeDataStatusEnum } from '../exolix.interface';
 import { ExolixSelectors } from '../Exolix.selectors';
 import { getCoinCodeToDisplay, getExchangeData } from '../exolix.util';
+
 import WarningComponent from './WarningComponent';
 
 interface Props {

src/app/pages/Collectibles/CollectiblePage/index.tsx

@@ -29,6 +29,7 @@ import { navigate } from 'lib/woozie';
 
 import { useCollectibleSelling } from '../hooks/use-collectible-selling.hook';
 import { CollectiblesSelectors } from '../selectors';
+
 import { AttributesItems } from './AttributesItems';
 import { CollectiblePageImage } from './CollectiblePageImage';
 import { PropertiesItems } from './PropertiesItems';

src/app/pages/Home/ContentSection.tsx

@@ -14,6 +14,7 @@ import { isTezAsset } from 'lib/assets';
 import { t, TID } from 'lib/i18n';
 
 import { CollectiblesTab } from '../Collectibles/CollectiblesTab';
+
 import { HomeSelectors } from './Home.selectors';
 import BakingSection from './OtherComponents/BakingSection';
 import { TokensTab } from './OtherComponents/Tokens/Tokens';

src/app/pages/Home/Home.tsx

@@ -12,6 +12,8 @@ import { ReactComponent as SendIcon } from 'app/icons/send-alt.svg';
 import { ReactComponent as SwapIcon } from 'app/icons/swap.svg';
 import { ReactComponent as WithdrawIcon } from 'app/icons/withdraw.svg';
 import PageLayout from 'app/layouts/PageLayout';
+import { togglePartnersPromotionAction } from 'app/store/partners-promotion/actions';
+import { useIsEnabledAdsBannerSelector } from 'app/store/settings/selectors';
 import { setAnotherSelector, setTestID, TestIDProps } from 'lib/analytics';
 import { TEZ_TOKEN_SLUG } from 'lib/assets';
 import { T, t } from 'lib/i18n';
@@ -22,10 +24,9 @@ import useTippy from 'lib/ui/useTippy';
 import { createUrl, HistoryAction, Link, navigate, To, useLocation } from 'lib/woozie';
 import { createLocationState } from 'lib/woozie/location';
 
-import { togglePartnersPromotionAction } from '../../store/partners-promotion/actions';
-import { useIsEnabledAdsBannerSelector } from '../../store/settings/selectors';
 import { useOnboardingProgress } from '../Onboarding/hooks/useOnboardingProgress.hook';
 import Onboarding from '../Onboarding/Onboarding';
+
 import { ContentSection } from './ContentSection';
 import { HomeSelectors } from './Home.selectors';
 import EditableTitle from './OtherComponents/EditableTitle';

src/app/pages/Home/OtherComponents/BakingSection.tsx

@@ -5,6 +5,7 @@ import classNames from 'clsx';
 
 import { Button } from 'app/atoms/Button';
 import Spinner from 'app/atoms/Spinner/Spinner';
+import { useAppEnv } from 'app/env';
 // SVG
 import { ReactComponent as DelegateIcon } from 'app/icons/delegate.svg';
 import { ReactComponent as DiscordIcon } from 'app/icons/delegationDis.svg';
@@ -28,7 +29,6 @@ import { TempleAccountType } from 'lib/temple/types';
 import useTippy from 'lib/ui/useTippy';
 import { Link } from 'lib/woozie';
 
-import { useAppEnv } from '../../../env';
 import styles from './BakingSection.module.css';
 import { BakingSectionSelectors } from './BakingSection.selectors';
 

src/app/pages/Home/OtherComponents/EditableTitle.tsx

@@ -12,6 +12,7 @@ import { useTempleClient, useAccount } from 'lib/temple/front';
 import { useAlert } from 'lib/ui/dialog';
 
 import { HomeSelectors } from '../Home.selectors';
+
 import { EditableTitleSelectors } from './EditableTitle.selectors';
 
 const buttonClassNames = [

src/app/pages/Home/OtherComponents/MainBanner.tsx

@@ -23,6 +23,7 @@ import { useTotalBalance } from 'lib/temple/front/use-total-balance.hook';
 import useTippy from 'lib/ui/useTippy';
 
 import { HomeSelectors } from '../Home.selectors';
+
 import { TokenPageSelectors } from './TokenPage.selectors';
 
 interface Props {

src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx

@@ -30,6 +30,7 @@ import { Link, navigate } from 'lib/woozie';
 
 import { HomeSelectors } from '../../Home.selectors';
 import { AssetsSelectors } from '../Assets.selectors';
+
 import { AcceptAdsBanner } from './AcceptAdsBanner';
 import { ListItem } from './components/ListItem';
 import { toExploreAssetLink } from './utils';

src/app/pages/Home/OtherComponents/Tokens/components/ListItem.tsx

@@ -12,6 +12,7 @@ import { Link } from 'lib/woozie';
 import { AssetsSelectors } from '../../Assets.selectors';
 import styles from '../Tokens.module.css';
 import { toExploreAssetLink } from '../utils';
+
 import { CryptoBalance, FiatBalance } from './Balance';
 import { TokenTag } from './TokenTag';
 

src/app/pages/NewWallet/CreateWallet.tsx

@@ -4,8 +4,8 @@ import { generateMnemonic } from 'bip39';
 
 import PageLayout from 'app/layouts/PageLayout';
 import { t } from 'lib/i18n';
+import { useTempleClient } from 'lib/temple/front';
 
-import { useTempleClient } from '../../../lib/temple/front';
 import { NewSeedBackup } from './create/NewSeedBackup/NewSeedBackup';
 import { NewSeedVerify } from './create/NewSeedVerify/NewSeedVerify';
 import { LockedWalletExists } from './LockedWalletExists';

src/app/pages/NewWallet/ImportWallet.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react';
 
+import ImportTabSwitcher from 'app/atoms/ImportTabSwitcher';
 import PageLayout from 'app/layouts/PageLayout';
 import { TID, t } from 'lib/i18n';
+import { useTempleClient } from 'lib/temple/front';
 
-import { useTempleClient } from '../../../lib/temple/front';
-import ImportTabSwitcher from '../../atoms/ImportTabSwitcher';
 import { ImportFromKeystoreFile } from './import/ImportFromKeystoreFile/ImportFromKeystoreFile';
 import { ImportFromSeedPhrase } from './import/ImportSeedPhrase/ImportFromSeedPhrase';
 import { LockedWalletExists } from './LockedWalletExists';

src/app/pages/NewWallet/setWalletPassword/SetWalletPassword.tsx

@@ -28,6 +28,7 @@ import PasswordStrengthIndicator, { PasswordValidation } from 'lib/ui/PasswordSt
 import { navigate } from 'lib/woozie';
 
 import { useOnboardingProgress } from '../../Onboarding/hooks/useOnboardingProgress.hook';
+
 import { setWalletPasswordSelectors } from './SetWalletPassword.selectors';
 
 const MIN_PASSWORD_LENGTH = 8;

src/app/pages/Receive/Receive.tsx

@@ -3,7 +3,7 @@ import React, { FC, memo, useEffect } from 'react';
 import classNames from 'clsx';
 import { QRCode } from 'react-qr-svg';
 
-import { FormField } from 'app/atoms';
+import { FormField, PageTitle } from 'app/atoms';
 import { ReactComponent as CopyIcon } from 'app/icons/copy.svg';
 import { ReactComponent as GlobeIcon } from 'app/icons/globe.svg';
 import { ReactComponent as HashIcon } from 'app/icons/hash.svg';
@@ -17,7 +17,6 @@ import { useTezosDomainNameByAddress } from 'lib/temple/front/tzdns';
 import { useSafeState } from 'lib/ui/hooks';
 import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 
-import { PageTitle } from '../../atoms/PageTitle';
 import { ReceiveSelectors } from './Receive.selectors';
 
 const ADDRESS_FIELD_VIEWS = [

src/app/pages/Unlock/Unlock.tsx

@@ -6,7 +6,10 @@ import { useDispatch } from 'react-redux';
 
 import { Alert, FormField, FormSubmitButton } from 'app/atoms';
 import SimplePageLayout from 'app/layouts/SimplePageLayout';
+import { getUserTestingGroupNameActions } from 'app/store/ab-testing/actions';
+import { useUserTestingGroupNameSelector } from 'app/store/ab-testing/selectors';
 import { useFormAnalytics } from 'lib/analytics';
+import { ABTestGroup } from 'lib/apis/temple';
 import { USER_ACTION_TIMEOUT } from 'lib/fixed-times';
 import { T, t } from 'lib/i18n';
 import { useTempleClient } from 'lib/temple/front';
@@ -15,9 +18,6 @@ import { useLocalStorage } from 'lib/ui/local-storage';
 import { delay } from 'lib/utils';
 import { Link } from 'lib/woozie';
 
-import { ABTestGroup } from '../../../lib/apis/temple';
-import { getUserTestingGroupNameActions } from '../../store/ab-testing/actions';
-import { useUserTestingGroupNameSelector } from '../../store/ab-testing/selectors';
 import { UnlockSelectors } from './Unlock.selectors';
 
 interface UnlockProps {

src/app/pages/Welcome/Welcome.tsx

@@ -3,14 +3,14 @@ import React, { ComponentProps, FC } from 'react';
 import classNames from 'clsx';
 
 import Logo from 'app/atoms/Logo';
+import { useABTestingLoading } from 'app/hooks/use-ab-testing-loading';
 import { ReactComponent as EntranceIcon } from 'app/icons/entrance.svg';
 import { ReactComponent as FolderAddIcon } from 'app/icons/folder-add.svg';
 import { ReactComponent as LedgerNanoIcon } from 'app/misc/ledger.svg';
 import { TestIDProps } from 'lib/analytics';
 import { TID, T } from 'lib/i18n';
 import { Link } from 'lib/woozie';
 
-import { useABTestingLoading } from '../../hooks/use-ab-testing-loading';
 import { WelcomeSelectors } from './Welcome.selectors';
 
 interface TSign extends TestIDProps {

src/app/pages/Withdraw/Debit/AliceBob/AliceBobWithdraw.tsx

@@ -12,6 +12,7 @@ import { TempleAccountType } from 'lib/temple/types';
 import { Redirect } from 'lib/woozie';
 
 import { WithdrawSelectors } from '../../Withdraw.selectors';
+
 import { InitialStep } from './steps/InitialStep';
 import { OrderStatusStep } from './steps/OrderStatusStep';
 import { SellStep } from './steps/SellStep';

src/app/pages/Withdraw/Debit/AliceBob/steps/InitialStep.tsx

@@ -21,6 +21,7 @@ import { t, T } from 'lib/i18n/react';
 
 import { CardNumberInput } from '../components/CardNumberInput';
 import { useCardNumberInput } from '../components/use-card-number-input.hook';
+
 import { StepProps } from './step.props';
 
 const NOT_UKRAINIAN_CARD_ERROR_MESSAGE = 'Ukrainian bank card is required.';

src/app/pages/Withdraw/Debit/AliceBob/steps/OrderStatusStep.tsx

@@ -12,6 +12,7 @@ import { T, TID } from 'lib/i18n';
 import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 
 import { useUpdatedOrderInfo } from '../hooks/useUpdatedOrderInfo';
+
 import { StepProps } from './step.props';
 
 export const OrderStatusStep: FC<StepProps> = ({ orderInfo, setStep, setOrderInfo, setIsApiError }) => {

src/app/pages/Withdraw/Debit/AliceBob/steps/SellStep.tsx

@@ -8,13 +8,14 @@ import { ReactComponent as CopyIcon } from 'app/icons/copy.svg';
 import { WithdrawSelectors } from 'app/pages/Withdraw/Withdraw.selectors';
 import { AnalyticsEventCategory, setTestID, useAnalytics, useFormAnalytics } from 'lib/analytics';
 import { AliceBobOrderStatus, cancelAliceBobOrder } from 'lib/apis/temple';
-import { toTransferParams } from 'lib/assets/utils';
+import { toTransferParams } from 'lib/assets/contract.utils';
 import { T, TID } from 'lib/i18n';
 import { TEZOS_METADATA } from 'lib/metadata/defaults';
 import { useAccount, useTezos } from 'lib/temple/front';
 import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 
 import { useUpdatedOrderInfo } from '../hooks/useUpdatedOrderInfo';
+
 import { StepProps } from './step.props';
 
 export const SellStep: FC<StepProps> = ({ orderInfo, isApiError, setStep, setOrderInfo, setIsApiError }) => {

src/app/store/ab-testing/selectors.ts

@@ -1,3 +1,3 @@
-import { useSelector } from '../index';
+import { useSelector } from '../root-state.selector';
 
 export const useUserTestingGroupNameSelector = () => useSelector(({ abTesting }) => abTesting.groupName);

src/app/store/advertising/state.mock.ts

@@ -1,6 +1,6 @@
+import { advertisingPromotionMock } from 'app/interfaces/advertising-promotion.mock';
 import { createEntity } from 'lib/store';
 
-import { advertisingPromotionMock } from '../../interfaces/advertising-promotion.mock';
 import { AdvertisingState } from './state';
 
 export const mockAdvertisingState: AdvertisingState = {

src/app/store/balances/selectors.ts

@@ -1,6 +1,6 @@
-import { getKeyForBalancesRecord } from 'lib/balances';
+import { getKeyForBalancesRecord } from 'lib/balances/utils';
 
-import { useSelector } from '..';
+import { useSelector } from '../root-state.selector';
 
 const EMPTY_BALANCES_RECORD = {};