From 85c798fcdb73f1cacf7fbe5e1147b83171242a14 Mon Sep 17 00:00:00 2001 From: don mosites Date: Thu, 12 Dec 2024 22:54:15 +0100 Subject: [PATCH] update eslint config; fixes (#1004) --- .eslintrc | 38 +++++++++++- .../@widgets/MakeWidget/MakeWidget.tsx | 4 +- .../@widgets/MyOrdersWidget/helpers/index.ts | 2 +- .../subcomponents/InfoSection/InfoSection.tsx | 2 +- src/components/Button/Button.tsx | 3 + src/components/Icon/icons/IconArrowLeft.tsx | 1 - src/components/IconButton/IconButton.tsx | 2 + src/components/SwapInputs/SwapInputs.tsx | 2 +- src/components/Timer/Timer.tsx | 2 +- src/components/TokenLogo/TokenLogo.styles.tsx | 2 +- .../helpers/getTimeAgoTranslation.spec.ts | 12 ++-- .../Typography/Typography.styles.tsx | 6 +- src/constants/addressAliases.ts | 4 +- src/constants/nativeCurrency.ts | 2 +- src/features/balances/balancesSlice.ts | 2 +- src/features/orders/ordersActions.ts | 2 +- src/features/orders/ordersHelpers.ts | 58 ++++++++++--------- src/features/quotes/quotesActions.ts | 2 +- .../transactions/transactionsHelpers.ts | 2 +- .../transactions/transactionsUtils.ts | 2 +- src/helpers/createSwapSignature.ts | 27 +++++---- src/helpers/getHumanReadableNumber.ts | 2 +- src/helpers/scrapeToken.ts | 15 +++-- src/hooks/useAddressOrEnsName.ts | 5 +- src/hooks/useApprovalPending.ts | 2 +- src/hooks/useDebounce.ts | 4 +- src/hooks/useDepositPending.ts | 2 +- src/hooks/useTimeoutFn.ts | 4 +- 28 files changed, 123 insertions(+), 88 deletions(-) diff --git a/.eslintrc b/.eslintrc index 63fb9fe24..a231ca097 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,6 +1,38 @@ { - "plugins": ["react-hooks"], - "rules": { - "react-hooks/exhaustive-deps": "off" + "env": { + "browser": true, + "es2021": true, + "node": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended" + ], + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "react"], + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module", + "ecmaFeatures": { + "jsx": true } + }, + "settings": { + "react": { + "version": "detect" + } + }, + "rules": { + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-empty-object-type": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-shadow": "off", + "react/react-in-jsx-scope": "off", + "react-hooks/exhaustive-deps": "off" + } } diff --git a/src/components/@widgets/MakeWidget/MakeWidget.tsx b/src/components/@widgets/MakeWidget/MakeWidget.tsx index 4e0744ce8..1a9a31d25 100644 --- a/src/components/@widgets/MakeWidget/MakeWidget.tsx +++ b/src/components/@widgets/MakeWidget/MakeWidget.tsx @@ -280,8 +280,8 @@ const MakeWidget: FC = () => { const createOrder = () => { const expiryDate = Date.now() + expiry; - const makerTokenAddress = makerTokenInfo?.address!; - const takerTokenAddress = takerTokenInfo?.address!; + const makerTokenAddress = makerTokenInfo?.address || ""; + const takerTokenAddress = takerTokenInfo?.address || ""; const signerToken = makerTokenAddress === ADDRESS_ZERO diff --git a/src/components/@widgets/MyOrdersWidget/helpers/index.ts b/src/components/@widgets/MyOrdersWidget/helpers/index.ts index a22d27c65..c827cdb20 100644 --- a/src/components/@widgets/MyOrdersWidget/helpers/index.ts +++ b/src/components/@widgets/MyOrdersWidget/helpers/index.ts @@ -9,7 +9,7 @@ import { OrderStatus } from "../../../../types/orderStatus"; export const getTokenAmountWithDecimals = ( amount: string, - decimals: number = 18 + decimals = 18 ): BigNumber => { return new BigNumber(amount).div(10 ** decimals); }; diff --git a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx index 7333cd44f..7de1672f9 100644 --- a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx +++ b/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx @@ -82,7 +82,7 @@ const InfoSection: FC = ({ } if (bestQuote) { - let price = new BigNumber(bestQuote).dividedBy(baseAmount); + const price = new BigNumber(bestQuote).dividedBy(baseAmount); return ( ; } & React.ButtonHTMLAttributes; export const Button = React.forwardRef( @@ -66,4 +67,6 @@ export const Button = React.forwardRef( } ); +Button.displayName = "Button"; + export default Button; diff --git a/src/components/Icon/icons/IconArrowLeft.tsx b/src/components/Icon/icons/IconArrowLeft.tsx index 981209d7d..161c1b790 100644 --- a/src/components/Icon/icons/IconArrowLeft.tsx +++ b/src/components/Icon/icons/IconArrowLeft.tsx @@ -9,7 +9,6 @@ const IconArrowLeft: FC = ({ className = "" }): ReactElement => ( d="M2 18L10 10L2 2" strokeWidth="2" strokeLinecap="square" - transform-origin="center" transform="scale(-1, 1)" /> diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 850daf087..eea2fc180 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -51,4 +51,6 @@ const IconButton = React.forwardRef( } ); +IconButton.displayName = "IconButton"; + export default IconButton; diff --git a/src/components/SwapInputs/SwapInputs.tsx b/src/components/SwapInputs/SwapInputs.tsx index ee2fa5a10..69ccc8fbb 100644 --- a/src/components/SwapInputs/SwapInputs.tsx +++ b/src/components/SwapInputs/SwapInputs.tsx @@ -93,7 +93,7 @@ const SwapInputs: FC<{ const handleTokenAmountChange = ( e: FormEvent, - callback: Function + callback: (value: string) => void ) => { let value = e.currentTarget.value; if (value === "" || floatRegExp.test(value)) { diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 853332d34..4f0863a33 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -21,7 +21,7 @@ export const Timer = ({ ); useEffect(() => { - let interval = setInterval(() => { + const interval = setInterval(() => { const dist: number = Math.floor(expiryTime - Date.now() / 1000); if (dist <= 0) { diff --git a/src/components/TokenLogo/TokenLogo.styles.tsx b/src/components/TokenLogo/TokenLogo.styles.tsx index 090d943e8..7cc9b11b0 100644 --- a/src/components/TokenLogo/TokenLogo.styles.tsx +++ b/src/components/TokenLogo/TokenLogo.styles.tsx @@ -6,7 +6,7 @@ export type StyledTokenLogoProps = { const StyledTokenLogo = styled.div` background-image: ${(props) => - !!props.logoURI ? `url("${props.logoURI}")` : "none"}; + props.logoURI ? `url("${props.logoURI}")` : "none"}; background-size: cover; background-position: center; background-repeat: no-repeat; diff --git a/src/components/TransactionsTab/helpers/getTimeAgoTranslation.spec.ts b/src/components/TransactionsTab/helpers/getTimeAgoTranslation.spec.ts index 323099902..82f6cf3f7 100644 --- a/src/components/TransactionsTab/helpers/getTimeAgoTranslation.spec.ts +++ b/src/components/TransactionsTab/helpers/getTimeAgoTranslation.spec.ts @@ -22,7 +22,7 @@ describe("Get Time Difference Between Two Dates", () => { }); it("should return now if less than one minute", () => { - var xMinutesAgo = new Date(Date.now() - 0.1 * MS_PER_MINUTE); + const xMinutesAgo = new Date(Date.now() - 0.1 * MS_PER_MINUTE); const { t } = useTranslation(); const res = getTimeTranslation(xMinutesAgo, t); @@ -30,7 +30,7 @@ describe("Get Time Difference Between Two Dates", () => { }); it("should return 5 mins", () => { - var xMinutesAgo = new Date(Date.now() - 5 * MS_PER_MINUTE); + const xMinutesAgo = new Date(Date.now() - 5 * MS_PER_MINUTE); const { t } = useTranslation(); const res = getTimeTranslation(xMinutesAgo, t); @@ -38,7 +38,7 @@ describe("Get Time Difference Between Two Dates", () => { }); it("should return 59 mins", () => { - var xMinutesAgo = new Date(Date.now() - 59 * MS_PER_MINUTE); + const xMinutesAgo = new Date(Date.now() - 59 * MS_PER_MINUTE); const { t } = useTranslation(); const res = getTimeTranslation(xMinutesAgo, t); @@ -46,7 +46,7 @@ describe("Get Time Difference Between Two Dates", () => { }); it("should return 1 hour", () => { - var xHoursAgo = new Date(Date.now() - 1 * MS_PER_HOUR); + const xHoursAgo = new Date(Date.now() - 1 * MS_PER_HOUR); const { t } = useTranslation(); const res = getTimeTranslation(xHoursAgo, t); @@ -72,7 +72,7 @@ describe("Get Time Difference Between Two Dates", () => { // }); it("should return 11 months", () => { - var xMonthsAgo = addMonths(addSeconds(Date.now(), -1), -11); + const xMonthsAgo = addMonths(addSeconds(Date.now(), -1), -11); const { t } = useTranslation(); const res = getTimeTranslation(xMonthsAgo, t); @@ -80,7 +80,7 @@ describe("Get Time Difference Between Two Dates", () => { }); it("should return 5 years", () => { - var xYearsAgo = addYears(addSeconds(Date.now(), -1), -5); + const xYearsAgo = addYears(addSeconds(Date.now(), -1), -5); const { t } = useTranslation(); const res = getTimeTranslation(xYearsAgo, t); diff --git a/src/components/Typography/Typography.styles.tsx b/src/components/Typography/Typography.styles.tsx index 78d2e1823..d961e1415 100644 --- a/src/components/Typography/Typography.styles.tsx +++ b/src/components/Typography/Typography.styles.tsx @@ -47,7 +47,7 @@ const makeTypographyComponent = ( const Component = (styled[tag] as ThemedStyledFunction< typeof tag, DefaultTheme, - {}, + object, never >)` font-family: ${(props) => @@ -56,7 +56,7 @@ const makeTypographyComponent = ( font-weight: ${(props) => props.theme.typography[key].desktop.fontWeight}; line-height: ${(props) => props.theme.typography[key].desktop.lineHeight}; ${additionalCSS ? additionalCSS : ""} - + ${(props) => props.theme.typography[key].mobile ? ` @@ -118,7 +118,7 @@ export const StyledLink = makeTypographyComponent( text-transform: uppercase; text-decoration: underline; ` -) as StyledComponent<"a", DefaultTheme, {}>; +) as StyledComponent<"a", DefaultTheme, object>; export const StyledNavigation = makeTypographyComponent("nav"); export const StyledInfoHeading = makeTypographyComponent( diff --git a/src/constants/addressAliases.ts b/src/constants/addressAliases.ts index c97f3895c..0af34e8ba 100644 --- a/src/constants/addressAliases.ts +++ b/src/constants/addressAliases.ts @@ -6,7 +6,7 @@ const nativeAddressAlias = "native"; export function transformAddressToAddressAlias( address?: string, - chainId: number = 1 + chainId = 1 ): string | undefined { if (!address) { return undefined; @@ -21,7 +21,7 @@ export function transformAddressToAddressAlias( export function transformAddressAliasToAddress( address?: string, - chainId: number = 1 + chainId = 1 ): string | undefined { if (!address) { return undefined; diff --git a/src/constants/nativeCurrency.ts b/src/constants/nativeCurrency.ts index 3093b1f2e..b573bf683 100644 --- a/src/constants/nativeCurrency.ts +++ b/src/constants/nativeCurrency.ts @@ -10,7 +10,7 @@ export const nativeCurrencyDecimals = 18; const nativeCurrency: Record = {}; -for (let chainId in ChainIds) { +for (const chainId in ChainIds) { nativeCurrency[chainId] = { chainId: Number(chainId), address: ADDRESS_ZERO, diff --git a/src/features/balances/balancesSlice.ts b/src/features/balances/balancesSlice.ts index a904b093b..60f1f1caf 100644 --- a/src/features/balances/balancesSlice.ts +++ b/src/features/balances/balancesSlice.ts @@ -56,7 +56,7 @@ const getThunk: ( { provider: ethers.providers.Web3Provider; }, - {} + object > = (type: "balances" | "allowances.swap" | "allowances.wrapper") => { const methods = { balances: fetchBalances, diff --git a/src/features/orders/ordersActions.ts b/src/features/orders/ordersActions.ts index 458e3840c..ec327af43 100644 --- a/src/features/orders/ordersActions.ts +++ b/src/features/orders/ordersActions.ts @@ -138,7 +138,7 @@ export const handleSubmittedCancelOrder = ( // replaces WETH to ETH on Wrapper orders const refactorOrder = (order: OrderERC20, chainId: number) => { - let newOrder = { ...order }; + const newOrder = { ...order }; if (order.senderToken === getWethAddress(chainId)) { newOrder.senderToken = nativeCurrency[chainId].address!; } else if (order.signerToken === getWethAddress(chainId)) { diff --git a/src/features/orders/ordersHelpers.ts b/src/features/orders/ordersHelpers.ts index 927a3e53c..2fccb50c8 100644 --- a/src/features/orders/ordersHelpers.ts +++ b/src/features/orders/ordersHelpers.ts @@ -33,7 +33,7 @@ async function swap( provider: ethers.providers.Web3Provider, order: OrderERC20 | FullOrderERC20 ) { - let contract = await getSwapErc20Contract(provider.getSigner(), chainId); + const contract = await getSwapErc20Contract(provider.getSigner(), chainId); if ("senderWallet" in order && order.senderWallet === ADDRESS_ZERO) { return contract.swapAnySender( await (await provider.getSigner()).getAddress(), @@ -100,23 +100,23 @@ export async function approveToken( contractType: "Swap" | "Wrapper", amount: string | number ): Promise { - return new Promise(async (resolve) => { - try { - const spender = - contractType === "Swap" - ? getSwapErc20Address(provider.network.chainId) - : Wrapper.getAddress(provider.network.chainId); - const erc20Contract = new ethers.Contract( - baseToken, - erc20Interface, - // @ts-ignore - provider.getSigner() - ); - const approvalTxHash = erc20Contract.approve(spender, amount); - resolve(approvalTxHash); - } catch (error: any) { - resolve(transformUnknownErrorToAppError(error)); - } + return new Promise((resolve) => { + const spender = + contractType === "Swap" + ? getSwapErc20Address(provider.network.chainId) + : Wrapper.getAddress(provider.network.chainId); + const erc20Contract = new ethers.Contract( + baseToken, + erc20Interface, + // @ts-ignore + provider.getSigner() + ); + erc20Contract + .approve(spender, amount) + .then(resolve) + .catch((error: any) => { + resolve(transformUnknownErrorToAppError(error)); + }); }); } @@ -125,15 +125,19 @@ export async function takeOrder( provider: ethers.providers.Web3Provider, contractType: "Swap" | "Wrapper" ): Promise { - return new Promise(async (resolve) => { - try { - const tx: Transaction = - contractType === "Swap" - ? await swap(provider.network.chainId, provider, order) - : await swapWrapper(provider.network.chainId, provider, order); - resolve(tx); - } catch (error: any) { - resolve(transformUnknownErrorToAppError(error)); + return new Promise((resolve) => { + if (contractType === "Swap") { + swap(provider.network.chainId, provider, order) + .then(resolve) + .catch((error: any) => { + resolve(transformUnknownErrorToAppError(error)); + }); + } else { + swapWrapper(provider.network.chainId, provider, order) + .then(resolve) + .catch((error: any) => { + resolve(transformUnknownErrorToAppError(error)); + }); } }); } diff --git a/src/features/quotes/quotesActions.ts b/src/features/quotes/quotesActions.ts index 236f84e2a..e19e9bf06 100644 --- a/src/features/quotes/quotesActions.ts +++ b/src/features/quotes/quotesActions.ts @@ -88,7 +88,7 @@ export const compareOrdersAndSetBestOrder = token: TokenInfo, lastLookOrder?: UnsignedOrderERC20, rfqOrder?: OrderERC20, - swapTransactionCost: string = "0" + swapTransactionCost = "0" ) => async (dispatch: AppDispatch): Promise => { dispatch(setBestOrder(undefined)); diff --git a/src/features/transactions/transactionsHelpers.ts b/src/features/transactions/transactionsHelpers.ts index 836c7e980..348777d1b 100644 --- a/src/features/transactions/transactionsHelpers.ts +++ b/src/features/transactions/transactionsHelpers.ts @@ -130,7 +130,7 @@ export const handleTransactionEvent = return; } - let updatedTransaction: SubmittedTransaction = { + const updatedTransaction: SubmittedTransaction = { ...matchingTransaction, hash: event.hash, status: diff --git a/src/features/transactions/transactionsUtils.ts b/src/features/transactions/transactionsUtils.ts index e06b26529..9d9085746 100644 --- a/src/features/transactions/transactionsUtils.ts +++ b/src/features/transactions/transactionsUtils.ts @@ -79,7 +79,7 @@ export const getTransactionReceipt = async ( transaction: SubmittedTransaction, library: BaseProvider ): Promise => { - let hash = transaction.hash; + const hash = transaction.hash; if (!hash) { console.error("Transaction hash is not found"); diff --git a/src/helpers/createSwapSignature.ts b/src/helpers/createSwapSignature.ts index c533385b4..5c827c03f 100644 --- a/src/helpers/createSwapSignature.ts +++ b/src/helpers/createSwapSignature.ts @@ -14,19 +14,18 @@ export const createOrderERC20Signature = ( swapContract: string, chainId: number ): Promise => { - return new Promise(async (resolve) => { - try { - const signature = await airSwapCreateSwapSignature( - unsignedOrder, - // @ts-ignore - signer, - swapContract, - chainId - ); - resolve(signature); - } catch (error: unknown) { - console.error(error); - resolve(transformUnknownErrorToAppError(error)); - } + return new Promise((resolve) => { + airSwapCreateSwapSignature( + unsignedOrder, + // @ts-ignore + signer, + swapContract, + chainId + ) + .then(resolve) + .catch((error) => { + console.error(error); + resolve(transformUnknownErrorToAppError(error)); + }); }); }; diff --git a/src/helpers/getHumanReadableNumber.ts b/src/helpers/getHumanReadableNumber.ts index ea6760d46..11bf48ad8 100644 --- a/src/helpers/getHumanReadableNumber.ts +++ b/src/helpers/getHumanReadableNumber.ts @@ -52,7 +52,7 @@ export const getHumanReadableNumber: ( readableNumber = input; } let numExtraZeros = 0; - let decIndex = readableNumber.indexOf("."); + const decIndex = readableNumber.indexOf("."); //get to 4 sig digits if ( readableNumber.length > maxDigits && diff --git a/src/helpers/scrapeToken.ts b/src/helpers/scrapeToken.ts index 90b29377c..b373c83b0 100644 --- a/src/helpers/scrapeToken.ts +++ b/src/helpers/scrapeToken.ts @@ -7,18 +7,17 @@ const scrapeToken = ( provider: ethers.providers.BaseProvider, chainId?: number ): Promise => { - return new Promise(async (resolve) => { + return new Promise((resolve) => { if (!ethers.utils.isAddress(address)) { return resolve(undefined); } - try { - const tokenInfo = await airSwapScrapeToken(provider, address); - resolve(tokenInfo); - } catch (e) { - console.error(e); - resolve(undefined); - } + airSwapScrapeToken(provider, address) + .then(resolve) + .catch((e) => { + console.error(e); + resolve(undefined); + }); }); }; diff --git a/src/hooks/useAddressOrEnsName.ts b/src/hooks/useAddressOrEnsName.ts index ed93bf044..c05b2f301 100644 --- a/src/hooks/useAddressOrEnsName.ts +++ b/src/hooks/useAddressOrEnsName.ts @@ -13,10 +13,7 @@ import { useAppSelector } from "../app/hooks"; // refreshes. Format: { [chainId]: { [address]: name | null }} const ensCachedResponses: Record> = {}; -const useAddressOrEnsName = ( - address: string | null, - truncate: boolean = true -) => { +const useAddressOrEnsName = (address: string | null, truncate = true) => { const { provider: library } = useWeb3React(); const { chainId } = useAppSelector((state) => state.web3); diff --git a/src/hooks/useApprovalPending.ts b/src/hooks/useApprovalPending.ts index 8951ed7bd..c9d210942 100644 --- a/src/hooks/useApprovalPending.ts +++ b/src/hooks/useApprovalPending.ts @@ -14,7 +14,7 @@ import useDebounce from "./useDebounce"; //* Will return the pending approval if it exists, and optionally the resolved approval for 2 seconds (for the transaction overlay). const useApprovalPending = ( tokenAddress?: string | null, - showResolvedApproval: boolean = false + showResolvedApproval = false ): SubmittedApprovalTransaction | undefined => { const { chainId } = useAppSelector((state) => state.web3); const [debouncedApproval, setDebouncedApproval] = useState< diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts index 8a7e35bf7..f050d6ddf 100644 --- a/src/hooks/useDebounce.ts +++ b/src/hooks/useDebounce.ts @@ -6,8 +6,8 @@ import useTimeoutFn from "./useTimeoutFn"; export type UseDebounceReturn = [() => boolean | null, () => void]; export default function useDebounce( - fn: Function, - ms: number = 0, + fn: (...args: any[]) => any, + ms = 0, deps: DependencyList = [] ): UseDebounceReturn { const [isReady, cancel, reset] = useTimeoutFn(fn, ms); diff --git a/src/hooks/useDepositPending.ts b/src/hooks/useDepositPending.ts index 2244352c5..9dca2e934 100644 --- a/src/hooks/useDepositPending.ts +++ b/src/hooks/useDepositPending.ts @@ -9,7 +9,7 @@ import { } from "../features/transactions/transactionsSlice"; const useDepositPending = ( - showResolvedDeposit: boolean = false + showResolvedDeposit = false ): SubmittedDepositTransaction | undefined => { const pendingDeposits = useAppSelector(selectPendingDeposits); const allDeposits = useAppSelector(selectAllDeposits); diff --git a/src/hooks/useTimeoutFn.ts b/src/hooks/useTimeoutFn.ts index 9206f9ae5..830f3cbda 100644 --- a/src/hooks/useTimeoutFn.ts +++ b/src/hooks/useTimeoutFn.ts @@ -4,8 +4,8 @@ import { useCallback, useEffect, useRef } from "react"; export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void]; export default function useTimeoutFn( - fn: Function, - ms: number = 0 + fn: (...args: any[]) => any, + ms = 0 ): UseTimeoutFnReturn { const ready = useRef(false); const timeout = useRef>();