chore: upgrade nx, vite and jest (cowprotocol#4326)

* chore: upgrade nx, vite and jest

* chore: upgrade vite plugins, cosmos, and lingui

* chore: fix cross-env

* chore: upgrade eslint (cowprotocol#4327)

* chore: upgrade eslint

* chore: fix tests (cowprotocol#4329)

* chore: fix tests

* chore: fix widget-cfg tests

* chore: fix exporer circular dep

* chore: fix coverageDirectory

* chore: fix build cosmos

apps/cowswap-frontend-e2e/cypress.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'cypress'
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {

apps/cowswap-frontend/package.json

@@ -11,7 +11,7 @@
     "patch-package": "npx patch-package",
     "cosmos:clear": "rm -rf ./public/cosmos",
     "cosmos:run": "yarn run _cosmos:run",
-    "build:cosmos": "cross-env NODE_ENV=development npx cosmos-export",
+    "build:cosmos": "npx cross-env NODE_ENV=development npx cosmos-export",
     "_cosmos:run": "yarn cosmos:clear && npx cosmos"
   },
   "browser": {

apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx

@@ -1,9 +1,9 @@
-import { ReactComponent as DropDown } from '@cowprotocol/assets/images/dropdown.svg'
+import DropDown from '@cowprotocol/assets/images/dropdown.svg?react'
 import { UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
-export const ArrowDown = styled(DropDown)<{ $stubbed?: boolean }>`
+export const ArrowDown = styled((props) => <DropDown {...props} />)<{ $stubbed?: boolean }>`
   margin: 0 3px;
   width: 12px;
   height: 7px;

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

@@ -88,7 +88,6 @@ export function Modal({
                 $mobile={isMobile}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
-                {/* eslint-disable-next-line jsx-a11y/tabindex-no-positive, jsx-a11y/no-noninteractive-tabindex */}
                 {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}
                 {children}
               </StyledDialogContent>

apps/cowswap-frontend/src/legacy/components/Confetti/index.tsx

@@ -2,7 +2,6 @@ import { useWindowSize } from '@cowprotocol/common-hooks'
 
 import ReactConfetti from 'react-confetti'
 
-// eslint-disable-next-line react/prop-types
 export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {
   const { width, height } = useWindowSize()
 

apps/cowswap-frontend/src/main.tsx

@@ -1,2 +1,3 @@
+/// <reference types="vite-plugin-svgr/client" />
 import './polyfills'
 import './cow-react'

apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx

@@ -1,6 +1,6 @@
 import { useSetAtom } from 'jotai'
 
-import { ReactComponent as Close } from '@cowprotocol/assets/images/x.svg'
+import Close from '@cowprotocol/assets/images/x.svg?react'
 import { UI } from '@cowprotocol/ui'
 import { useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
@@ -102,7 +102,7 @@ const Header = styled.div`
   }
 `
 
-const CloseIcon = styled(Close)`
+const CloseIcon = styled((props) => <Close {...props} />)`
   opacity: 0.6;
   transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
   stroke: var(${UI.COLOR_TEXT});

apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersRawStateAtom.ts

@@ -20,10 +20,7 @@ export interface LimitOrdersRawState extends ExtendedTradeRawState {
   readonly isUnlocked: boolean
 }
 
-export function getDefaultLimitOrdersState(
-  chainId: SupportedChainId | null,
-  isUnlocked: boolean = false
-): LimitOrdersRawState {
+export function getDefaultLimitOrdersState(chainId: SupportedChainId | null, isUnlocked = false): LimitOrdersRawState {
   return {
     ...getDefaultTradeRawState(chainId),
     inputCurrencyAmount: null,

apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx

@@ -140,14 +140,12 @@ const DropDown = ({ item, context }: DropdownProps) => {
       {items?.map((item, index) => {
         const { sectionTitle, links } = item
         return (
-          <>
-            <MenuSection key={index}>
-              {sectionTitle && <MenuTitle>{sectionTitle}</MenuTitle>}
-              {links.map((link, linkIndex) => (
-                <DropdownLink key={linkIndex} link={link} context={context} />
-              ))}
-            </MenuSection>
-          </>
+          <MenuSection key={index}>
+            {sectionTitle && <MenuTitle>{sectionTitle}</MenuTitle>}
+            {links.map((link, linkIndex) => (
+              <DropdownLink key={linkIndex} link={link} context={context} />
+            ))}
+          </MenuSection>
         )
       })}
     </MenuDropdown>

apps/cowswap-frontend/src/modules/wallet/containers/AccountSelectorModal/styled.tsx

@@ -1,9 +1,9 @@
-import { ReactComponent as Close } from '@cowprotocol/assets/images/x.svg'
+import Close from '@cowprotocol/assets/images/x.svg?react'
 import { UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
-export const CloseIcon = styled(Close)`
+export const CloseIcon = styled((props) => <Close {...props} />)`
   opacity: 0.6;
   transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
   stroke: var(${UI.COLOR_TEXT});

apps/cowswap-frontend/src/modules/wallet/pure/WalletModal/styled.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as Close } from '@cowprotocol/assets/images/x.svg'
+import Close from '@cowprotocol/assets/images/x.svg?react'
 import { ExternalLink } from '@cowprotocol/ui'
 import { UI } from '@cowprotocol/ui'
 
@@ -36,7 +36,7 @@ export const NewToEthereum = () => (
   </Blurb>
 )
 
-export const CloseColor = styled(Close)`
+export const CloseColor = styled((props) => <Close {...props} />)`
   color: inherit;
 
   path {

apps/explorer/loadConfig.ts

@@ -1,7 +1,8 @@
-import * as path from 'path'
-import * as fs from 'fs'
 import * as YAML from 'yaml'
 
+import * as fs from 'fs'
+import * as path from 'path'
+
 const SUPPORTED_EXTENSIONS = 'yaml|yml|json'
 const CONFIG_FILE = './config-default.yaml'
 

apps/explorer/src/api/erc20/Erc20Api.ts

@@ -1,17 +1,15 @@
-import BN from 'bn.js'
-import { AbiItem } from 'web3-utils'
 import { Erc20Contract, toBN } from '@gnosis.pm/dex-js'
 import erc20Abi from '@gnosis.pm/dex-js/build/contracts/abi/Erc20.json'
-import erc20_bytes32Abi from 'abis/erc20_bytes32.json'
-
-import { TxOptionalParams, Receipt } from 'types'
+import BN from 'bn.js'
 import { ZERO } from 'const'
+import { TxOptionalParams, Receipt } from 'types'
 import { logDebug } from 'utils'
+import Web3 from 'web3'
+import { AbiItem } from 'web3-utils'
 
+import erc20_bytes32Abi from 'abis/erc20_bytes32.json'
 import ERC20_DETAILS from 'api/erc20/erc20Details.json'
 
-import Web3 from 'web3'
-
 export interface Erc20Props {
   name: string
   symbol: string