chore: fix fast-refresh & add new linting rule (v2) (#6778)

* chore: new linting rule for fast-refresh

* chore: migrate NoImpactWarning

* chore: downgrade react-refresh lint rule to warning

* chore: fix most important react-refresh lint errors

* fix: migrate OrderProgressEventsUpdater because of tests dependency

Author: kernelwhisperer

…tend/src/common/hooks/useBlockNumber.tsx …s/useBlockNumber/BlockNumberProvider.tsxapps/cowswap-frontend/src/common/hooks/useBlockNumber.tsx renamed to apps/cowswap-frontend/src/common/hooks/useBlockNumber/BlockNumberProvider.tsx apps/cowswap-frontend/src/common/hooks/useBlockNumber.tsx renamed to apps/cowswap-frontend/src/common/hooks/useBlockNumber/BlockNumberProvider.tsx

@@ -1,34 +1,9 @@
-import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { useIsWindowVisible } from '@cowprotocol/common-hooks'
 import { useWalletChainId, useWalletProvider } from '@cowprotocol/wallet-provider'
 
-import { useLingui } from '@lingui/react/macro'
-
-const MISSING_PROVIDER = Symbol()
-const BlockNumberContext = createContext<
-  | {
-      value?: number
-    }
-  | typeof MISSING_PROVIDER
->(MISSING_PROVIDER)
-
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function useBlockNumberContext() {
-  const blockNumber = useContext(BlockNumberContext)
-  const { t } = useLingui()
-
-  if (blockNumber === MISSING_PROVIDER) {
-    throw new Error(t`BlockNumber hooks must be wrapped in a` + ` <BlockNumberProvider>`)
-  }
-  return blockNumber
-}
-
-/** Requires that BlockUpdater be installed in the DOM tree. */
-export function useBlockNumber(): number | undefined {
-  return useBlockNumberContext().value
-}
+import { BlockNumberContext } from './context'
 
 // TODO: Add proper return type annotation
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

apps/cowswap-frontend/src/common/hooks/useBlockNumber/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export const MISSING_PROVIDER = Symbol('MISSING_PROVIDER')
+
+export const BlockNumberContext = createContext<
+  | {
+      value?: number
+    }
+  | typeof MISSING_PROVIDER
+>(MISSING_PROVIDER)

apps/cowswap-frontend/src/common/hooks/useBlockNumber/index.ts

@@ -0,0 +1,2 @@
+export { useBlockNumber } from './useBlockNumber'
+export { BlockNumberProvider } from './BlockNumberProvider'

apps/cowswap-frontend/src/common/hooks/useBlockNumber/useBlockNumber.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react'
+
+import { useLingui } from '@lingui/react/macro'
+
+import { BlockNumberContext, MISSING_PROVIDER } from './context'
+
+// TODO: Add proper return type annotation
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function useBlockNumberContext() {
+  const blockNumber = useContext(BlockNumberContext)
+  const { t } = useLingui()
+
+  if (blockNumber === MISSING_PROVIDER) {
+    throw new Error(t`BlockNumber hooks must be wrapped in a` + ` <BlockNumberProvider>`)
+  }
+  return blockNumber
+}
+
+/** Requires that BlockUpdater be installed in the DOM tree. */
+export function useBlockNumber(): number | undefined {
+  return useBlockNumberContext().value
+}

apps/cowswap-frontend/src/common/pure/HelpCircle/index.cosmos.tsx

@@ -1,8 +1,8 @@
 import { HelpCircle } from '.'
 
-const fixtures = {
+const Fixtures = {
   default: () => <HelpCircle />,
   size16: <HelpCircle size={16} />,
 }
 
-export default fixtures
+export default Fixtures

apps/cowswap-frontend/src/common/pure/Modal/index.tsx

@@ -14,7 +14,8 @@ import { ContentWrapper, HeaderRow, HoverText, StyledDialogContent, StyledDialog
 
 import { openModalState } from '../../state/openModalState'
 
-export * from './styled'
+export { ContentWrapper, HeaderRow, HoverText, StyledDialogContent, StyledDialogOverlay, CloseIcon } from './styled'
+
 interface ModalProps {
   isOpen: boolean
   onDismiss: Command

apps/cowswap-frontend/src/common/pure/TransactionErrorContent/index.cosmos.tsx

@@ -10,12 +10,12 @@ const Wrapper = styled.div`
   background: var(${UI.COLOR_PAPER});
 `
 
-const fixtures = {
+const Fixtures = {
   default: () => (
     <Wrapper>
       <TransactionErrorContent modalMode message={'User rejected transaction'} onDismiss={console.log} />
     </Wrapper>
   ),
 }
 
-export default fixtures
+export default Fixtures

apps/cowswap-frontend/src/common/updaters/LpBalancesAndAllowancesUpdater.tsx

@@ -1,4 +1,4 @@
-import { atom, useSetAtom } from 'jotai'
+import { useSetAtom } from 'jotai'
 import { ReactNode, useEffect, useMemo, useState } from 'react'
 
 import { BalancesRpcCallUpdater } from '@cowprotocol/balances-and-allowances'
@@ -8,6 +8,8 @@ import { LP_TOKEN_LIST_CATEGORIES, useAllLpTokens } from '@cowprotocol/tokens'
 
 import ms from 'ms.macro'
 
+import { areLpBalancesLoadedAtom } from './lpBalancesState'
+
 // A small gap between balances and allowances refresh intervals is needed to avoid high load to the node at the same time
 const LP_BALANCES_SWR_CONFIG = { refreshInterval: ms`32s`, revalidateIfStale: false }
 const LP_MULTICALL_OPTIONS = { consequentExecution: true }
@@ -16,8 +18,6 @@ const LP_MULTICALL_OPTIONS = { consequentExecution: true }
 // We start the updater with a delay
 const LP_UPDATER_START_DELAY = ms`3s`
 
-export const areLpBalancesLoadedAtom = atom(false)
-
 export interface BalancesAndAllowancesUpdaterProps {
   account: string | undefined
   chainId: SupportedChainId

apps/cowswap-frontend/src/common/updaters/lpBalancesState.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const areLpBalancesLoadedAtom = atom(false)

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -41,7 +41,7 @@ if (window.ethereum) {
   window.ethereum.autoRefreshOnNetworkChange = false
 }
 
-function Main(): ReactNode {
+export function Main(): ReactNode {
   return (
     <StrictMode>
       <SvgCacheProvider>