build: upgrade ESLint to v9

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "eslint.workingDirectories": [{ "mode": "auto" }],
+  "eslint.experimental.useFlatConfig": true,
   "search.exclude": { ".yarn/**": true }
 }

apps/portal/eslint.config.js

@@ -0,0 +1,15 @@
+import recommended from '@talismn/eslint-config/react.js'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(...recommended, {
+  rules: {
+    // TODO: turn this back on
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: '(useRecoilCallback|useRecoilTransaction_UNSTABLE)',
+      },
+    ],
+  },
+})

apps/portal/package.json

@@ -101,7 +101,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.2.1",
     "dotenv": "^16.3.1",
-    "eslint": "^8.33.0",
+    "eslint": "^9.2.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "prop-types": "^15.8.1",

apps/portal/src/components/legacy/Button.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import IconLoading from '../../assets/icons/loader.svg?react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'

apps/portal/src/components/legacy/Grid.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import styled from '@emotion/styled'
 import { sortBy } from 'lodash'
 

apps/portal/src/components/legacy/Menu.tsx

@@ -12,7 +12,6 @@ export type MenuProps = {
   dropdownAlignment?: MenuDropdownAlignment
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function MenuItem(props: any) {
   return (
     <li className="cursor-pointer" {...props}>
@@ -26,7 +25,6 @@ export const Menu = styled((props: MenuProps) => {
   const nodeRef = useRef<HTMLDivElement>(null)
   const [showMenu, setShowMenu] = useState(false)
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onClickInside = (e: any) => {
     const el = nodeRef?.current
     if (closeOnSelect && el && el.contains(e.target as Node)) {

apps/portal/src/components/legacy/Pill.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
 
 const Pill = styled(({ children, className, small, large, primary, secondary, active, ...rest }: any) => (
-  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   <span className={`pill ${className ?? ''}`} {...rest}>
     {children}
   </span>
@@ -49,7 +48,6 @@ const Pill = styled(({ children, className, small, large, primary, secondary, ac
       color: var(--color-foreground);
       box-shadow: none;
       ${
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         !!onClick &&
         `
         &:hover{
@@ -67,7 +65,6 @@ const Pill = styled(({ children, className, small, large, primary, secondary, ac
       color: var(--color-foreground);
       box-shadow: none;
       ${
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         !!onClick &&
         `
         &:hover{

apps/portal/src/components/legacy/archetypes/Crowdloan/Countdown.tsx

@@ -12,9 +12,7 @@ type OngoingProps = {
 
 const Ongoing = ({ end, showSeconds, relayChainId, className = '' }: OngoingProps) => {
   const [secondsRemaining, setSecondsRemaining] = useState<number>()
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const blockNumber = useChainmetaValue(relayChainId!, 'blockNumber')
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const blockPeriod = useChainmetaValue(relayChainId!, 'blockPeriod')
 
   useEffect(() => {

apps/portal/src/components/legacy/archetypes/Wallet/Crowdloans.tsx

@@ -46,7 +46,6 @@ const GqlCrowdloanItem = styled(
     const { tokenSymbol: relayNativeToken, coingeckoId, tokenDecimals: relayTokenDecimals } = relayChain ?? {}
     const { name } = chain ?? {}
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const priceLoadable = useRecoilValueLoadable(tokenPriceState({ coingeckoId: coingeckoId! }))
 
     const relayTokenPrice = priceLoadable.valueMaybe()?.toString()

apps/portal/src/components/widgets/AccountsManagementMenu.tsx

@@ -42,10 +42,7 @@ const AccountsManagementSurfaceIconButton = (props: { size?: number | string })
   const selectedAccounts = useRecoilValue(selectedAccountsState)
 
   if (selectedAccounts.length === 1) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      <AccountIcon account={selectedAccounts[0]!} size={props.size ?? '2.4rem'} css={{ cursor: 'pointer' }} />
-    )
+    return <AccountIcon account={selectedAccounts[0]!} size={props.size ?? '2.4rem'} css={{ cursor: 'pointer' }} />
   }
 
   return (

apps/portal/src/components/widgets/ErrorBoundary.tsx

@@ -17,7 +17,6 @@ type ErrorElementProps = {
 const ErrorElement = (props: ErrorElementProps) => {
   const message =
     `${props.error.name}\n\n${props.error.message}` +
-    // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
     (props.error.cause ? `\n\n${props.error.cause}` : '') +
     (props.error.stack ? `\n\n${props.error.stack}` : '') +
     (props.componentStack ? `\n\n${props.componentStack}` : '')
@@ -55,7 +54,6 @@ export const RouteErrorElement = () => {
   // let the root error boundary handle it instead
   // https://github.com/remix-run/react-router/discussions/10494
   if (error) {
-    // eslint-disable-next-line @typescript-eslint/no-throw-literal
     throw error
   }
 

apps/portal/src/components/widgets/staking/dappStaking/AddStakeDialog.tsx

@@ -81,7 +81,7 @@ const AddStakeDialog = (props: AddStakeDialogProps) => {
       <DappAddStakeDialog
         account={props.account}
         stake={props.stake}
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
         dapp={props.stake.dapps.at(0)?.[0]!}
         onRequestDismiss={props.onRequestDismiss}
       />

apps/portal/src/components/widgets/staking/dappStaking/UnstakeDialog.tsx

@@ -83,7 +83,7 @@ const UnstakeDialog = (props: UnstakeDialogProps) => {
       <DappUnstakeDialog
         account={props.account}
         stake={props.stake}
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
         dapp={props.stake.dapps.at(0)?.[0]!}
         onRequestDismiss={props.onRequestDismiss}
       />

apps/portal/src/components/widgets/staking/lido/Stakes.tsx

@@ -44,7 +44,6 @@ const LidoStakes = (props: { lidoSuite: LidoSuite }) => {
       {stakes.map((stake, index) => (
         <StakePosition
           key={index}
-          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
           readonly={stake.account.readonly || !stake.account.canSignEvm}
           account={stake.account}
           provider="Lido finance"

apps/portal/src/components/widgets/staking/slpx/Stakes.tsx

@@ -19,7 +19,6 @@ const Stake = (props: { slpxPair: SlpxPair; position: ReturnType<typeof useStake
   return (
     <ErrorBoundary orientation="horizontal">
       <StakePosition
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         readonly={props.position.account.readonly || !props.position.account.canSignEvm}
         account={props.position.account}
         provider="Bifrost liquid staking"

apps/portal/src/components/widgets/staking/substrate/StakeForm.tsx

@@ -359,7 +359,6 @@ export const ControlledStakeForm = (props: { assetSelector: ReactNode; account?:
       : 'waiting'
   }, [eraStakersLoadable, poolNominatorsLoadable])
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const bondedPoolLoadable = useChainState('query', 'nominationPools', 'bondedPools', [selectedPoolId!], {
     enabled: selectedPoolId !== undefined,
   })
@@ -373,8 +372,7 @@ export const ControlledStakeForm = (props: { assetSelector: ReactNode; account?:
     'nominationPools',
     'metadata.multi',
     existingPool === undefined
-      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        [selectedPoolId!]
+      ? [selectedPoolId!]
       : selectedPoolId === undefined
       ? [existingPool.poolId, existingPool.poolId]
       : [selectedPoolId, existingPool.poolId],
@@ -513,7 +511,7 @@ const StakeForm = () => {
   const chains = useRecoilValue(nominationPoolsEnabledChainsState)
 
   const [inTransition, startTransition] = useTransition()
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   const [selectedChain, setSelectedChain] = useState(chains[0]!)
 
   return (

apps/portal/src/components/widgets/staking/substrate/ValidatorStakes.tsx

@@ -30,7 +30,6 @@ const useStakes = () => {
       const reward = stakerRewards.valueMaybe()?.[accounts[index]?.address ?? '']
       return {
         stake,
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         account: accounts[index]!,
         reward,
         slashingSpan: (slashingSpansLoadable[index]?.unwrapOrDefault().prior.length ?? -1) + 1,

apps/portal/src/domains/accounts/recoils.ts

@@ -41,7 +41,7 @@ export const lookupAccountAddressState = atom<string | undefined>({
       })
 
       // Persist lookup address between navigation
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+
       router.subscribe(async state => {
         const search = new URLSearchParams(state.location.search)
         const currentValue = await getPromise(lookupAccountAddressState)

apps/portal/src/domains/chains/contexts.tsx

@@ -4,7 +4,6 @@ import { PolkadotApiIdProvider } from '@talismn/react-polkadot-api'
 import { createContext, useContext, type PropsWithChildren } from 'react'
 import { useRecoilValue } from 'recoil'
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 export const ChainContext = createContext<ChainConfig>(chainConfigs[0]!)
 
 export const ChainProvider = (props: PropsWithChildren<{ chain: ChainConfig }>) => (

apps/portal/src/domains/chains/recoils.ts

@@ -29,7 +29,7 @@ export const chainState = selectorFamily({
               )
           ),
           rpc: x.rpcs?.at(0)?.url,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
           ...chainConfigs.find(y => y.genesisHash === x.genesisHash)!,
         }))
       ),

apps/portal/src/domains/common/hooks/useQueryMulti.ts

@@ -81,14 +81,13 @@ export const useQueryMulti = <
       const params = queries.map(x => {
         if (typeof x === 'string') {
           const [module, section] = x.split('.')
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
           return api.query[module!]?.[section!]
         }
 
         const [query, ...params] = x
         const [module, section] = query.split('.')
 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return [api.query[module!]?.[section!], ...params]
       })
 

apps/portal/src/domains/fastUnstake/hooks.ts

@@ -42,7 +42,6 @@ const unexposedAddressesState = atomFamily<
       const erasToCheck = new Set(getErasToCheck(activeEra, bondingDuration))
       for (const era of Object.keys(exposure)) {
         if (!erasToCheck.has(Number(era))) {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
           delete exposure[era]
         }
       }
@@ -59,7 +58,6 @@ const unexposedAddressesState = atomFamily<
             }
 
             if (era in exposure) {
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               exposure[era]![address] = exposed
             } else {
               exposure[era] = { [address]: exposed }

apps/portal/src/domains/staking/dappStaking/hooks/useTotalStaked.ts

@@ -18,7 +18,6 @@ export const useTotalStaked = () => {
             chains.map(chain =>
               nativeTokenAmountState({
                 genesisHash: chain.genesisHash,
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 apiEndpoint: chain.rpc!,
               })
             )

apps/portal/src/domains/staking/substrate/nominationPools/hooks/usePoolAddForm.ts

@@ -17,7 +17,6 @@ export const usePoolAddForm = (action: 'bondExtra' | 'join', account?: string) =
   const prevAccount = usePrevious(account)
 
   const balancesLoadable = useRecoilValueLoadable(
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     useDeriveState('balances', 'all', [account!], { enabled: account !== undefined })
   )
 

apps/portal/src/domains/staking/substrate/nominationPools/hooks/usePoolStake.ts

@@ -8,7 +8,6 @@ import { useMemo } from 'react'
 import { useRecoilValue, useRecoilValueLoadable, waitForAll } from 'recoil'
 
 export const usePoolStakes = <T extends Account | Account[]>(account: T) => {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
   const accounts = useMemo(() => (Array.isArray(account) ? (account as Account[]) : [account as Account]), [account])
 
   // TODO: recoil freeze if we use `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE` here
@@ -31,7 +30,6 @@ export const usePoolStakes = <T extends Account | Account[]>(account: T) => {
     () =>
       _poolMembers
         .map((x, index) => ({
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           account: accounts[index]!,
           poolMembers: x,
           pendingRewards: pendingRewards.find(rewards => rewards[0] === accounts[index]?.address)?.[1],

apps/portal/src/domains/staking/substrate/useTotalStaked.ts

@@ -28,7 +28,6 @@ export const useTotalStaked = () => {
     validatorStakes.state !== 'hasValue'
       ? 0
       : validatorStakes.contents
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           .map((x, index) => ({ decimals: decimals[index]!, price: nativeTokenPrices[index]!, loadable: x }))
           .filter(x => x.loadable.state === 'hasValue')
           .map(x => ({
@@ -46,7 +45,6 @@ export const useTotalStaked = () => {
     poolStakes.state !== 'hasValue'
       ? 0
       : poolStakes.contents
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           .map((x, index) => ({ decimals: decimals[index]!, price: nativeTokenPrices[index]!, loadable: x }))
           .filter(x => x.loadable.state === 'hasValue')
           .map(x => ({

apps/portal/src/domains/staking/substrate/validator/worker.ts

@@ -17,7 +17,6 @@ const getStakersReward = async (endpoints: string | string[], addresses: string[
 
   return Object.fromEntries(
     stakerRewards.map((x, index) => [
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       addresses[index]!,
       x
         .map(y => Object.values(y.validators).reduce((previous, current) => previous + current.value.toBigInt(), 0n))

apps/portal/src/index.tsx

@@ -11,7 +11,7 @@ initSentry()
 const ProfiledApp = Sentry.withProfiler(App)
 
 const container = document.getElementById('root')
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
 const root = createRoot(container!)
 
 root.render(