fix: types 18 upgrade

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     'import/first': 'error',
     'import/newline-after-import': 'error',
     'import/no-duplicates': 'error',
-    'import/no-named-as-default': 'error',
+    'import/no-named-as-default': 'warn',
     'import/no-unresolved': 'warn',
     // disabled as with the static export Image does not make to much sense
     '@next/next/no-img-element': 'off',

cypress/support/commands.ts

@@ -1,4 +1,5 @@
 import 'cypress-wait-until';
+// import { Provider } from '@ethersproject/providers';
 
 import { CustomizedBridge } from './tools/bridge';
 

src/components/ContentWithTooltip.tsx

@@ -1,4 +1,4 @@
-import { Box, ClickAwayListener, experimental_sx, Popper, styled, Tooltip } from '@mui/material';
+import { Box, ClickAwayListener, Popper, styled, Tooltip } from '@mui/material';
 import { JSXElementConstructor, ReactElement, ReactNode, useState } from 'react';
 
 interface ContentWithTooltipProps {
@@ -12,8 +12,8 @@ interface ContentWithTooltipProps {
   offset?: [number, number];
 }
 
-export const PopperComponent = styled(Popper)(
-  experimental_sx({
+export const PopperComponent = styled(Popper)(({ theme }) =>
+  theme.unstable_sx({
     '.MuiTooltip-tooltip': {
       color: 'text.primary',
       backgroundColor: 'background.paper',

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -24,6 +24,7 @@ export interface TxModalDetailsProps {
   skipLoad?: boolean;
   disabled?: boolean;
   chainId?: number;
+  children?: ReactNode;
 }
 
 const ArrowRightIcon = (

src/components/transactions/GasStation/GasStationProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 export enum GasOption {
   Slow = 'slow',
@@ -30,7 +30,7 @@ function gasStationReducer(state: State, action: Action) {
   }
 }
 
-export const GasStationProvider: React.FC = ({ children }) => {
+export const GasStationProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [state, dispatch] = React.useReducer(gasStationReducer, {
     gasOption: GasOption.Normal,
     customGas: '100',

src/helpers/useParaSwapTransactionHandler.tsx

@@ -77,6 +77,7 @@ export const useParaSwapTransactionHandler = ({
     asset: string;
     amount: string;
   }
+  // @ts-expect-error TODO: need think about "tx" type
   const [previousDeps, setPreviousDeps] = useState<Dependency>({ asset: deps[0], amount: deps[1] });
   const [usePermit, setUsePermit] = useState(false);
   const mounted = useRef(false);
@@ -291,6 +292,7 @@ export const useParaSwapTransactionHandler = ({
           if (Number(deps[1]) < Number(previousDeps.amount)) {
             setTxError(undefined);
           }
+          // @ts-expect-error TODO: need think about "tx" type
           setPreviousDeps({ asset: deps[0], amount: deps[1] });
           if (approval && preferPermit) {
             setUsePermit(true);

src/hooks/app-data-provider/useAppDataProvider.tsx

@@ -6,7 +6,7 @@ import {
   UserReserveData,
 } from '@aave/math-utils';
 import { formatUnits } from 'ethers/lib/utils';
-import React, { useContext } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 import { EmodeCategory } from 'src/helpers/types';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
@@ -71,7 +71,7 @@ const AppDataContext = React.createContext<AppDataContextType>({} as AppDataCont
  * This is the only provider you'll ever need.
  * It fetches reserves /incentives & walletbalances & keeps them updated.
  */
-export const AppDataProvider: React.FC = ({ children }) => {
+export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const { currentAccount } = useWeb3Context();
 
   const currentMarketData = useRootStore((state) => state.currentMarketData);

src/hooks/migration/useUserSummaryAfterMigration.ts

@@ -111,12 +111,12 @@ const select = memoize(
     const suppliesMap = supplies.reduce((obj, item) => {
       obj[item.underlyingAsset] = item;
       return obj;
-    }, {} as Record<string, typeof userMigrationReserves.supplyReserves[0]>);
+    }, {} as Record<string, (typeof userMigrationReserves.supplyReserves)[0]>);
 
     const borrowsMap = borrows.reduce((obj, item) => {
       obj[item.debtKey] = item;
       return obj;
-    }, {} as Record<string, typeof userMigrationReserves.borrowReserves[0]>);
+    }, {} as Record<string, (typeof userMigrationReserves.borrowReserves)[0]>);
 
     const userReserves = toUserSummary.userReservesData.map((userReserveData) => {
       const variableBorrowAsset = borrowsMap[userReserveData.reserve.variableDebtTokenAddress];

src/hooks/useIsWrongNetwork.tsx

@@ -7,6 +7,7 @@ export function useIsWrongNetwork(_requiredChainId?: number) {
   const { chainId: connectedChainId } = useWeb3Context();
 
   const requiredChainId = _requiredChainId ? _requiredChainId : currentChainId;
+
   const isWrongNetwork = connectedChainId !== requiredChainId;
 
   return {

src/hooks/useModal.tsx

@@ -1,5 +1,5 @@
 import { ChainId, Stake } from '@aave/contract-helpers';
-import { createContext, useContext, useState } from 'react';
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
 import { TxErrorType } from 'src/ui-config/errorMapping';
@@ -129,7 +129,7 @@ export const ModalContext = createContext<ModalContextType<ModalArgsType>>(
   {} as ModalContextType<ModalArgsType>
 );
 
-export const ModalContextProvider: React.FC = ({ children }) => {
+export const ModalContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const { setSwitchNetworkError } = useWeb3Context();
   // contains the current modal open state if any
   const [type, setType] = useState<ModalType>();

src/hooks/usePermissions.tsx

@@ -1,5 +1,5 @@
 import { PERMISSION, PermissionManager } from '@aave/contract-helpers';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { getProvider, isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
 
@@ -15,7 +15,7 @@ const Context = React.createContext<PermissionsContext>({
   isPermissionsLoading: false,
 });
 
-export const PermissionProvider: React.FC = ({ children }) => {
+export const PermissionProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const { currentChainId: chainId, currentMarketData } = useProtocolDataContext();
   const { currentAccount: walletAddress } = useWeb3Context();
   const [isPermissionsLoading, setIsPermissionsLoading] = useState<boolean>(true);

src/hooks/useReservesHistory.tsx

@@ -13,7 +13,7 @@ export const reserveRateTimeRangeOptions = [
   ESupportedTimeRanges.SixMonths,
   ESupportedTimeRanges.OneYear,
 ];
-export type ReserveRateTimeRange = typeof reserveRateTimeRangeOptions[number];
+export type ReserveRateTimeRange = (typeof reserveRateTimeRangeOptions)[number];
 
 type RatesHistoryParams = {
   from: number;

src/libs/LanguageProvider.tsx

@@ -2,7 +2,7 @@
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { el, en, es, fr } from 'make-plural/plurals';
-import React, { useEffect } from 'react';
+import React, { PropsWithChildren, useEffect } from 'react';
 
 import { messages } from '../locales/en/messages.js';
 
@@ -36,16 +36,16 @@ export async function dynamicActivateLanguage(locale: string) {
   localStorage.setItem('LOCALE', locale);
 }
 
-export const LanguageProvider: React.FunctionComponent = (props) => {
+export const LanguageProvider: React.FC<PropsWithChildren> = ({ children }) => {
   useEffect(() => {
     // With this method we dynamically load the catalogs
     const savedLocale = localStorage.getItem('LOCALE') || DEFAULT_LOCALE;
-    if (i18n._locale !== savedLocale) dynamicActivateLanguage(savedLocale);
+    if (i18n.locale !== savedLocale) dynamicActivateLanguage(savedLocale);
   }, []);
 
   return (
     <I18nProvider i18n={i18n} forceRenderOnLocaleChange={false}>
-      {props.children}
+      {children}
     </I18nProvider>
   );
 };

src/libs/web3-data-provider/Web3Provider.tsx

@@ -48,7 +48,7 @@ interface ConnectWalletOpts {
 }
 
 export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ children }) => {
-  const { account, chainId, connector, provider, isActivating, isActive } = useWeb3React();
+  const { account, chainId: chainId, connector, provider, isActivating, isActive } = useWeb3React();
 
   const [error, setError] = useState<Error>();
   const [switchNetworkError, setSwitchNetworkError] = useState<Error>();

src/modules/dashboard/LiquidationRiskParametresModal/components/HFContent.tsx

@@ -1,7 +1,7 @@
 import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { Box, Typography } from '@mui/material';
-import BigNumber from 'bignumber.js';
+import { default as BigNumber } from 'bignumber.js';
 import React from 'react';
 
 import { FormattedNumber } from '../../../../components/primitives/FormattedNumber';

src/modules/governance/StateBadge.tsx

@@ -1,4 +1,4 @@
-import { alpha, experimental_sx, Skeleton, styled } from '@mui/material';
+import { alpha, Skeleton, styled } from '@mui/material';
 import invariant from 'tiny-invariant';
 
 import { ProposalLifecycleStep, ProposalVoteInfo } from './utils/formatProposal';
@@ -55,7 +55,7 @@ const Badge = styled('span')<BadgeProps>(({ theme, state }) => {
     [ProposalBadgeState.Failed]: theme.palette.error.main,
   };
   const color = COLOR_MAP[state] || '#000';
-  return experimental_sx({
+  return theme.unstable_sx({
     ...theme.typography.subheader2,
     color,
     border: '1px solid',

src/modules/governance/VoteBar.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro';
-import { Box, BoxProps, experimental_sx, Skeleton, styled, Typography } from '@mui/material';
+import { Box, BoxProps, Skeleton, styled, Typography } from '@mui/material';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 
-const OuterBar = styled('div')(
-  experimental_sx({
+const OuterBar = styled('div')(({ theme }) =>
+  theme.unstable_sx({
     position: 'relative',
     width: '100%',
     height: '8px',
@@ -15,8 +15,8 @@ const OuterBar = styled('div')(
 
 const InnerBar = styled('span', {
   shouldForwardProp: (prop) => prop !== 'yae' && prop !== 'percent',
-})<{ percent: number; yae?: boolean }>(({ percent, yae }) =>
-  experimental_sx({
+})<{ percent: number; yae?: boolean }>(({ percent, yae, theme }) =>
+  theme.unstable_sx({
     position: 'absolute',
     top: 0,
     left: 0,

src/modules/governance/proposal/ProposalLifecycle.tsx

@@ -217,6 +217,8 @@ export const ProposalLifecycle = ({ proposal }: { proposal: Proposal | undefined
       <Typography variant="h3">
         <Trans>Proposal details</Trans>
       </Typography>
+
+      {/* @ts-expect-error TODO: need think about "tx" type */}
       <Timeline
         position="right"
         sx={{
@@ -342,6 +344,7 @@ const ProposalStep = ({
           )}
         </Box>
         {substeps && subtimelineOpen && (
+          // @ts-expect-error TODO: need think about "tx" type
           <Timeline>
             {substeps.map((elem) => (
               <ProposalStep key={elem.stepName?.toString()} {...elem} />

src/modules/history/HistoryWrapper.tsx

@@ -92,7 +92,7 @@ export const HistoryWrapper = () => {
 
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
-    (node) => {
+    (node: HTMLDivElement | null) => {
       if (isLoading) return;
       if (observer.current) observer.current.disconnect();
       observer.current = new IntersectionObserver((entries) => {

src/modules/history/HistoryWrapperMobile.tsx

@@ -117,7 +117,7 @@ export const HistoryWrapperMobile = () => {
 
   const observer = useRef<IntersectionObserver | null>(null);
   const lastElementRef = useCallback(
-    (node) => {
+    (node: HTMLDivElement | null) => {
       if (isLoading) return;
       if (observer.current) observer.current.disconnect();
       observer.current = new IntersectionObserver((entries) => {

src/modules/reserve-overview/ReservePanels.tsx

@@ -23,6 +23,7 @@ export const PanelTitle: React.FC<TypographyProps> = (props) => (
 interface PanelItemProps {
   title: ReactNode;
   className?: string;
+  children?: ReactNode;
 }
 
 export const PanelItem: React.FC<PanelItemProps> = ({ title, children, className }) => {

src/ui-config/SharedDependenciesProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 import { ApprovedAmountService } from 'src/services/ApprovedAmountService';
 import { DelegationTokenService } from 'src/services/DelegationTokenService';
 import { ERC20Service } from 'src/services/Erc20Service';
@@ -40,7 +40,7 @@ interface SharedDependenciesContext {
 
 const SharedDependenciesContext = createContext<SharedDependenciesContext | null>(null);
 
-export const SharedDependenciesProvider: React.FC = ({ children }) => {
+export const SharedDependenciesProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const currentMarketData = useRootStore((state) => state.currentMarketData);
 
   const getGovernanceProvider = (chainId: number) => {