diff --git a/.eslintrc.js b/.eslintrc.js index d5d773e..06ae2a5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -10,14 +10,15 @@ module.exports = { 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:tailwindcss/recommended', - 'plugin:@typescript-eslint/recommended' + 'plugin:@typescript-eslint/recommended', + 'next/core-web-vitals' ], 'parser': '@typescript-eslint/parser', 'parserOptions': { 'ecmaFeatures': { 'jsx': true }, - 'ecmaVersion': 12, + 'ecmaVersion': 2022, 'sourceType': 'module', 'project': ['./tsconfig.json'] }, @@ -46,6 +47,7 @@ module.exports = { 'array-bracket-spacing': [2, 'never'], 'react/jsx-curly-brace-presence': ['error', {'props': 'always', 'children': 'always'}], 'semi': 'error', + 'import/no-named-as-default-member': 2, 'tailwindcss/no-custom-classname': 0, 'unused-imports/no-unused-imports': 'error', 'unused-imports/no-unused-vars': ['warn', { diff --git a/components/common/AppWrapper.tsx b/components/common/AppWrapper.tsx index 0c64390..e250d11 100644 --- a/components/common/AppWrapper.tsx +++ b/components/common/AppWrapper.tsx @@ -1,11 +1,11 @@ -import React, {ReactElement} from 'react'; -import {AppProps} from 'next/app'; -import {KBarProvider} from 'kbar'; -import {AnimatePresence, motion} from 'framer-motion'; -import Header from 'components/common/StandardHeader'; -import Footer from 'components/common/StandardFooter'; -import Meta from 'components/common/Meta'; -import KBar from 'components/common/Kbar'; +import React, {ReactElement} from 'react'; +import {AppProps} from 'next/app'; +import {KBarProvider} from 'kbar'; +import {AnimatePresence, motion} from 'framer-motion'; +import Header from 'components/common/StandardHeader'; +import Footer from 'components/common/StandardFooter'; +import Meta from 'components/common/Meta'; +import KBar from 'components/common/Kbar'; const transition = {duration: 0.3, ease: [0.17, 0.67, 0.83, 0.67]}; const thumbnailVariants = { diff --git a/components/common/KBarButton.tsx b/components/common/KBarButton.tsx index bb5bea0..e50dac0 100644 --- a/components/common/KBarButton.tsx +++ b/components/common/KBarButton.tsx @@ -1,6 +1,6 @@ -import React, {ReactElement} from 'react'; -import {Search} from '@yearn-finance/web-lib/icons'; -import {useKBar} from 'kbar'; +import React, {ReactElement} from 'react'; +import {Search} from '@yearn-finance/web-lib/icons'; +import {useKBar} from 'kbar'; function KBarButton(): ReactElement { const {query} = useKBar(); diff --git a/components/common/Kbar.tsx b/components/common/Kbar.tsx index 857b3c7..341042a 100644 --- a/components/common/Kbar.tsx +++ b/components/common/Kbar.tsx @@ -1,4 +1,4 @@ -import React, {ReactElement} from 'react'; +import React, {ReactElement, forwardRef, useMemo} from 'react'; import { ActionId, ActionImpl, @@ -40,12 +40,12 @@ const groupNameStyle = { }; // eslint-disable-next-line react/display-name -const ResultItem = React.forwardRef(( +const ResultItem = forwardRef(( {action, active, currentRootActionId}: {action: ActionImpl; active: boolean; currentRootActionId: ActionId;}, ref: React.Ref ): ReactElement => { - const ancestors = React.useMemo((): unknown => { + const ancestors = useMemo((): unknown => { if (!currentRootActionId) return action.ancestors; const index = action.ancestors.findIndex((ancestor: any): any => ancestor.id === currentRootActionId); // +1 removes the currentRootAction; e.g. diff --git a/components/common/Meta.tsx b/components/common/Meta.tsx index 4e9c89b..55cf057 100644 --- a/components/common/Meta.tsx +++ b/components/common/Meta.tsx @@ -1,7 +1,7 @@ -import React, {ReactElement} from 'react'; -import Head from 'next/head'; -import {DefaultSeo} from 'next-seo'; -import meta from 'public/manifest.json'; +import React, {ReactElement} from 'react'; +import Head from 'next/head'; +import {DefaultSeo} from 'next-seo'; +import meta from 'public/manifest.json'; function Meta(): ReactElement { return ( diff --git a/components/common/StandardFooter.tsx b/components/common/StandardFooter.tsx index 15a9950..5025e4b 100644 --- a/components/common/StandardFooter.tsx +++ b/components/common/StandardFooter.tsx @@ -1,10 +1,9 @@ -import React, {ReactElement} from 'react'; -import Link from 'next/link'; -import {SwitchTheme} from '@yearn-finance/web-lib/components'; -import {useUI} from '@yearn-finance/web-lib/contexts'; -import {SocialDiscord, SocialGithub, - SocialMedium, SocialTwitter} from '@yearn-finance/web-lib/icons'; -import meta from 'public/manifest.json'; +import React, {ReactElement} from 'react'; +import Link from 'next/link'; +import {SwitchTheme} from '@yearn-finance/web-lib/components'; +import {useUI} from '@yearn-finance/web-lib/contexts'; +import {SocialDiscord, SocialGithub, SocialMedium, SocialTwitter} from '@yearn-finance/web-lib/icons'; +import meta from 'public/manifest.json'; function Footer(): ReactElement { diff --git a/components/common/StandardHeader.tsx b/components/common/StandardHeader.tsx index ee4f2b3..5299406 100644 --- a/components/common/StandardHeader.tsx +++ b/components/common/StandardHeader.tsx @@ -1,4 +1,4 @@ -import React, {ReactElement} from 'react'; +import React, {ReactElement, useEffect, useState} from 'react'; import Link from 'next/link'; import {Card, Dropdown, ModalMobileMenu} from '@yearn-finance/web-lib/components'; import {useWeb3} from '@yearn-finance/web-lib/contexts'; @@ -8,7 +8,13 @@ import {Hamburger, NetworkArbitrum, NetworkEthereum, import LogoYearn from 'components/icons/LogoYearn'; import KBarButton from 'components/common/KBarButton'; -const options: any[] = [ +type TOptions = { + icon: ReactElement; + label: string; + value: number; +} + +const options: TOptions[] = [ {icon: , label: 'Ethereum', value: 1}, {icon: , label: 'Optimism', value: 10}, {icon: , label: 'Fantom', value: 250}, @@ -20,11 +26,11 @@ function StandardHeader({ shouldUseNetworks = true }): ReactElement { const {chainID, onSwitchChain, isActive, address, ens, openLoginModal, onDesactivate} = useWeb3(); - const [walletIdentity, set_walletIdentity] = React.useState('Connect wallet'); - const [selectedOption, set_selectedOption] = React.useState(options[0]); - const [hasMobileMenu, set_hasMobileMenu] = React.useState(false); + const [walletIdentity, set_walletIdentity] = useState('Connect wallet'); + const [selectedOption, set_selectedOption] = useState(options[0]); + const [hasMobileMenu, set_hasMobileMenu] = useState(false); - React.useEffect((): void => { + useEffect((): void => { if (!isActive && address) { set_walletIdentity('Invalid network'); } else if (ens) { @@ -36,7 +42,7 @@ function StandardHeader({ } }, [ens, address, isActive]); - React.useEffect((): void => { + useEffect((): void => { const _selectedOption = options.find((e): boolean => e.value === Number(chainID)) || options[0]; set_selectedOption(_selectedOption); }, [chainID, isActive]); @@ -77,7 +83,7 @@ function StandardHeader({ defaultOption={options[0]} options={options} selected={selectedOption} - onSelect={(option: any): void => onSwitchChain(option.value as number, true)} /> + onSelect={(option: TOptions): void => onSwitchChain(option.value as number, true)} /> ) : null} {shouldUseWallets ? ( diff --git a/components/icons/LogoYearn.tsx b/components/icons/LogoYearn.tsx index 85c84cb..d7cee82 100644 --- a/components/icons/LogoYearn.tsx +++ b/components/icons/LogoYearn.tsx @@ -1,4 +1,4 @@ -import React, {ReactElement} from 'react'; +import React, {ReactElement} from 'react'; function LogoYearn(props: React.SVGProps): ReactElement { return ( diff --git a/pages/_app.tsx b/pages/_app.tsx index 99edf1f..b99713b 100755 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ -import React, {ReactElement} from 'react'; -import {AppProps} from 'next/app'; -import {WithYearn} from '@yearn-finance/web-lib/contexts'; -import AppWrapper from 'components/common/AppWrapper'; +import React, {ReactElement} from 'react'; +import {AppProps} from 'next/app'; +import {WithYearn} from '@yearn-finance/web-lib/contexts'; +import AppWrapper from 'components/common/AppWrapper'; import '../style.css'; diff --git a/pages/disclaimer.tsx b/pages/disclaimer.tsx index 8b51e26..6a5d52b 100644 --- a/pages/disclaimer.tsx +++ b/pages/disclaimer.tsx @@ -1,7 +1,7 @@ -import React, {ReactElement} from 'react'; -import Link from 'next/link'; -import {Card} from '@yearn-finance/web-lib/components'; -import {Cross} from '@yearn-finance/web-lib/icons'; +import React, {ReactElement} from 'react'; +import Link from 'next/link'; +import {Card} from '@yearn-finance/web-lib/components'; +import {Cross} from '@yearn-finance/web-lib/icons'; function DisclaimerPage(): ReactElement { return ( diff --git a/pages/index.tsx b/pages/index.tsx index face35f..2237fe8 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ -import React, {ReactElement} from 'react'; -import {Banner, Card, DescriptionList} from '@yearn-finance/web-lib/components'; +import React, {ReactElement} from 'react'; +import {Banner, Card, DescriptionList} from '@yearn-finance/web-lib/components'; function Content(): ReactElement { return ( diff --git a/pages/settings.tsx b/pages/settings.tsx index 8b33a21..64479a8 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,6 +1,6 @@ -import React, {ReactElement} from 'react'; -import {Card} from '@yearn-finance/web-lib/components'; -import {useSettings} from '@yearn-finance/web-lib/contexts'; +import React, {ReactElement, useMemo, useState} from 'react'; +import {Card} from '@yearn-finance/web-lib/components'; +import {useSettings} from '@yearn-finance/web-lib/contexts'; type TWrappedInput = { title: string; @@ -10,9 +10,9 @@ type TWrappedInput = { } function WrappedInput({title, caption, initialValue, onSave}: TWrappedInput): ReactElement { - const [isFocused, set_isFocused] = React.useState(false); - const [value, set_value] = React.useState(initialValue); - const isInitialValue = React.useMemo((): boolean => value === initialValue, [value, initialValue]); + const [isFocused, set_isFocused] = useState(false); + const [value, set_value] = useState(initialValue); + const isInitialValue = useMemo((): boolean => value === initialValue, [value, initialValue]); return (