update eslint config; fixes (#1004)

.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"
+  }
 }

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

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);
 };

src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx

@@ -82,7 +82,7 @@ const InfoSection: FC<InfoSectionProps> = ({
   }
 
   if (bestQuote) {
-    let price = new BigNumber(bestQuote).dividedBy(baseAmount);
+    const price = new BigNumber(bestQuote).dividedBy(baseAmount);
 
     return (
       <PriceConverter

src/components/Button/Button.tsx

@@ -28,6 +28,7 @@ export type ButtonProps = {
    * prevents further clicks on the button
    */
   loading?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -66,4 +67,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
+Button.displayName = "Button";
+
 export default Button;

src/components/Icon/icons/IconArrowLeft.tsx

@@ -9,7 +9,6 @@ const IconArrowLeft: FC<SvgIconProps> = ({ className = "" }): ReactElement => (
       d="M2 18L10 10L2 2"
       strokeWidth="2"
       strokeLinecap="square"
-      transform-origin="center"
       transform="scale(-1, 1)"
     />
   </svg>

src/components/IconButton/IconButton.tsx

@@ -51,4 +51,6 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   }
 );
 
+IconButton.displayName = "IconButton";
+
 export default IconButton;

src/components/SwapInputs/SwapInputs.tsx

@@ -93,7 +93,7 @@ const SwapInputs: FC<{
 
   const handleTokenAmountChange = (
     e: FormEvent<HTMLInputElement>,
-    callback: Function
+    callback: (value: string) => void
   ) => {
     let value = e.currentTarget.value;
     if (value === "" || floatRegExp.test(value)) {

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) {

src/components/TokenLogo/TokenLogo.styles.tsx

@@ -6,7 +6,7 @@ export type StyledTokenLogoProps = {
 
 const StyledTokenLogo = styled.div<StyledTokenLogoProps>`
   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;

src/components/TransactionsTab/helpers/getTimeAgoTranslation.spec.ts

@@ -22,31 +22,31 @@ 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);
     expect(res).toBe("undefined wallet.justNow");
   });
 
   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);
     expect(res).toBe("5 wallet.minuteAgo_other");
   });
 
   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);
     expect(res).toBe("59 wallet.minuteAgo_other");
   });
 
   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,15 +72,15 @@ 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);
     expect(res).toBe("11 wallet.monthAgo_other");
   });
 
   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);

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(

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;

src/constants/nativeCurrency.ts

@@ -10,7 +10,7 @@ export const nativeCurrencyDecimals = 18;
 
 const nativeCurrency: Record<number, TokenInfo> = {};
 
-for (let chainId in ChainIds) {
+for (const chainId in ChainIds) {
   nativeCurrency[chainId] = {
     chainId: Number(chainId),
     address: ADDRESS_ZERO,

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,

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)) {

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<Transaction | AppError> {
-  return new Promise<Transaction | AppError>(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<Transaction | AppError>((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<Transaction | AppError> {
-  return new Promise<Transaction | AppError>(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<Transaction | AppError>((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));
+        });
     }
   });
 }

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<void> => {
     dispatch(setBestOrder(undefined));

src/features/transactions/transactionsHelpers.ts

@@ -130,7 +130,7 @@ export const handleTransactionEvent =
       return;
     }
 
-    let updatedTransaction: SubmittedTransaction = {
+    const updatedTransaction: SubmittedTransaction = {
       ...matchingTransaction,
       hash: event.hash,
       status:

src/features/transactions/transactionsUtils.ts

@@ -79,7 +79,7 @@ export const getTransactionReceipt = async (
   transaction: SubmittedTransaction,
   library: BaseProvider
 ): Promise<TransactionReceipt | undefined> => {
-  let hash = transaction.hash;
+  const hash = transaction.hash;
 
   if (!hash) {
     console.error("Transaction hash is not found");

src/helpers/createSwapSignature.ts

@@ -14,19 +14,18 @@ export const createOrderERC20Signature = (
   swapContract: string,
   chainId: number
 ): Promise<Signature | AppError> => {
-  return new Promise<Signature | AppError>(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<Signature | AppError>((resolve) => {
+    airSwapCreateSwapSignature(
+      unsignedOrder,
+      // @ts-ignore
+      signer,
+      swapContract,
+      chainId
+    )
+      .then(resolve)
+      .catch((error) => {
+        console.error(error);
+        resolve(transformUnknownErrorToAppError(error));
+      });
   });
 };