Merge pull request #11 from lidofinance/feature/ethui-661-integrate-w…

…arehouse-eslint-config

Integrate common eslint config

.eslintignore

@@ -11,5 +11,4 @@
 
 # production
 /build
-
 /public

.eslintrc.json

@@ -4,14 +4,7 @@
     "es2021": true,
     "node": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:prettier/recommended"
-  ],
+  "extends": ["plugin:jsx-a11y/recommended", "@lidofinance", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -22,21 +15,34 @@
   },
   "plugins": ["@typescript-eslint", "react"],
   "rules": {
-    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
+    "@typescript-eslint/require-await": "off",
     "react/display-name": "off",
-    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-shadow": "off",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "@next/next/no-img-element": "off",
+    "no-console": ["warn", { "allow": ["warn", "error", "info", "debug"] }],
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
         "ignoreRestSiblings": true,
         "argsIgnorePattern": "^_"
       }
     ],
-    "jsx-a11y/no-autofocus": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    "func-style": ["error", "expression"]
+    "promise/param-names": [
+      "warn",
+      {
+        "resolvePattern": "^_?(resolve)$|^_$",
+        "rejectPattern": "^_?(reject)$|^_$"
+      }
+    ],
+    "func-style": ["error", "expression"],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ]
   },
   "settings": {
     "react": {

features/home/stake-form/stake-form.tsx

@@ -61,7 +61,7 @@ export const StakeForm: FC = memo(() => {
       typeof router.query.amount === 'string'
     ) {
       const { amount, ...rest } = router.query;
-      router.replace({ pathname: router.pathname, query: rest });
+      void router.replace({ pathname: router.pathname, query: rest });
       setInputValue(amount);
     }
   }, [router]);

features/rewards/components/addressInput/AddressInput.tsx

@@ -23,7 +23,7 @@ export const AddressInput: FC<AddressInputProps> = (props) => {
       }
       rightDecorator={address ? <CopyAddressUrl address={inputValue} /> : null}
       spellCheck="false"
-      error={!!inputValue.length && !isValidAnyAddress(inputValue)}
+      error={inputValue.length > 0 && !isValidAnyAddress(inputValue)}
     />
   );
 };

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -32,7 +32,7 @@ export const RewardsListContent: FC = () => {
     );
   }
   if (error) return <RewardsListErrorMessage error={error} />;
-  if (data && !data.events.length) return <ErrorBlockNoSteth />;
+  if (data && data.events.length === 0) return <ErrorBlockNoSteth />;
 
   return (
     <TableWrapperStyle>

features/rewards/components/stats/Stats.tsx

@@ -43,7 +43,7 @@ export const Stats: FC<StatsProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    getStEthEth();
+    void getStEthEth();
   }, [getStEthEth]);
 
   const stEthBalanceParsed = steth.data && new Big(steth.data.toString());

features/rewards/hooks/useGetCurrentAddress.ts

@@ -47,7 +47,7 @@ export const useGetCurrentAddress: UseGetCurrentAddress = () => {
   );
 
   useEffect(() => {
-    resolveInputValue(inputValue);
+    void resolveInputValue(inputValue);
   }, [resolveInputValue, inputValue]);
 
   // Pick up an address

features/rewards/utils/saveAsCSV.ts

@@ -12,7 +12,7 @@ const objToCSV = (objArray: SomeObj[]) => {
 };
 
 export const saveAsCSV = (data: SomeObj[], fileName = 'Lido Rewards') => {
-  if (!data.length) {
+  if (data.length === 0) {
     return;
   }
 

features/withdrawals/claim/form/claim-form.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { BigNumber } from 'ethers';
 
 import { FormatToken } from 'shared/formatters';
@@ -36,16 +36,15 @@ export const ClaimForm = () => {
     const startTx = async () => {
       setIsSubmitting(true);
       try {
-        claimMutation(claimSelection.sortedSelectedRequests);
+        await claimMutation(claimSelection.sortedSelectedRequests);
       } finally {
         setIsSubmitting(false);
       }
     };
     // send it to state
     dispatchModalState({ type: 'set_starTx_callback', callback: startTx });
     // start flow
-    startTx();
-    return;
+    return startTx();
   }, [
     dispatchModalState,
     claimMutation,

features/withdrawals/claim/requests-list/requests-loader.tsx

@@ -6,7 +6,9 @@ import {
   REQUESTS_LIST_LOADERS_COUNT,
 } from './styles';
 
-const LOADERS_SIZE_ARRAY = Array.from(Array(REQUESTS_LIST_LOADERS_COUNT));
+const LOADERS_SIZE_ARRAY = Array.from({
+  length: REQUESTS_LIST_LOADERS_COUNT,
+}).fill(null);
 
 export const RequestsLoader = () => {
   return (

features/withdrawals/claim/wallet/wallet.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Divider } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { useSDK } from '@lido-sdk/react';
 
 import { CardAccount, CardRow, Fallback } from 'shared/wallet';

features/withdrawals/contexts/withdrawals-context.tsx

@@ -39,13 +39,12 @@ export const WithdrawalsProvider: FC<WithdrawalsProviderProps> = ({
     useWithdrawalsBaseData();
   const { isBunker, isPaused, isTurbo, maxAmount, minAmount } = data ?? {};
 
-  const withdrawalsStatus: StatusProps['variant'] = isPaused
-    ? 'error'
-    : isBunker
-    ? 'warning'
-    : isTurbo
-    ? 'success'
-    : 'error';
+  const withdrawalsStatus: StatusProps['variant'] = (() => {
+    if (isPaused) return 'error';
+    if (isBunker) return 'warning';
+    if (isTurbo) return 'success';
+    return 'error';
+  })();
 
   const value = useMemo(
     () => ({

features/withdrawals/hooks/useWaitingTime.ts

@@ -34,17 +34,15 @@ export const useWaitingTime = (
   const url = useMemo(() => {
     const basePath = dynamics.wqAPIBasePath;
     const params = encodeURLQuery({ amount: debouncedAmount });
-
-    return `${basePath}/v1/request-time${params ? `?${params}` : ''}`;
+    const queryString = params ? `?${params}` : '';
+    return `${basePath}/v1/request-time${queryString}`;
   }, [debouncedAmount]);
 
   const { data, initialLoading, error } = useLidoSWR(url, standardFetcher, {
     ...STRATEGY_EAGER,
     shouldRetryOnError: (e: unknown) => {
       // if api is not happy about our request - no retry
-      if (e && typeof e == 'object' && 'status' in e && e.status == 400)
-        return false;
-      return true;
+      return !(e && typeof e == 'object' && 'status' in e && e.status == 400);
     },
   }) as SWRResponse<RequestTimeResponse>;
   const { isBunker, isPaused } = useWithdrawals();

features/withdrawals/hooks/useWithdrawTxPrice.ts

@@ -12,7 +12,7 @@ import {
 } from 'config';
 import { MAX_REQUESTS_COUNT } from 'features/withdrawals/withdrawals-constants';
 
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { TOKENS } from '@lido-sdk/constants';
 
 import { useWithdrawalsContract } from './contract/useWithdrawalsContract';
@@ -74,7 +74,9 @@ export const useRequestTxPrice = ({
           invariant(contractRpc, 'contractRpc is required');
           const gasLimit = (
             await contractRpc.estimateGas.requestWithdrawals(
-              Array(debouncedRequestCount).fill(BigNumber.from(100)),
+              Array.from<BigNumber>({ length: debouncedRequestCount }).fill(
+                BigNumber.from(100),
+              ),
               ESTIMATE_ACCOUNT,
               { from: ESTIMATE_ACCOUNT },
             )

features/withdrawals/request/form/options/dex-options.tsx

@@ -22,7 +22,7 @@ import {
   DexOptionLoader,
 } from './styles';
 
-const placeholder = Array(3).fill(null);
+const placeholder = Array.from<null>({ length: 3 }).fill(null);
 
 const dexInfo: {
   [key: string]: {
@@ -99,9 +99,8 @@ const DexOption: React.FC<DexOptionProps> = ({
         Go to {title}
       </DexOptionBlockLink>
       <DexOptionAmount>
-        {loading ? (
-          <InlineLoaderSmall />
-        ) : toReceive ? (
+        {loading && <InlineLoaderSmall />}
+        {toReceive ? (
           <FormatToken
             approx
             showAmountTip

features/withdrawals/request/form/submit-button.tsx

@@ -1,6 +1,6 @@
 import { useRequestFormData } from '../request-form-context';
 import { ButtonIcon, Lock } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 
 import { Connect } from 'shared/wallet';
 import { useWithdrawals } from 'features/withdrawals/contexts/withdrawals-context';

features/withdrawals/request/request-form-context/validators.ts

@@ -146,7 +146,9 @@ const validateSplitRequests = (
     );
   }
 
-  const requests = Array(requestCount).fill(amountPerRequest);
+  const requests = Array.from<BigNumber>({ length: requestCount }).fill(
+    amountPerRequest,
+  );
   if (restCount) {
     requests[requestCount - 1] = lastRequestAmountEther;
   }

features/withdrawals/request/wallet/wallet-mode.tsx

@@ -13,13 +13,12 @@ export const WalletMode = () => {
     isPaused,
   } = useWithdrawals();
 
-  const modeLabel = isBunker
-    ? 'Bunker'
-    : isPaused
-    ? 'Paused'
-    : isTurbo
-    ? 'Turbo'
-    : '-';
+  const modeLabel = (() => {
+    if (isPaused) return 'Paused';
+    if (isBunker) return 'Bunker';
+    if (isTurbo) return 'Turbo';
+    return '-';
+  })();
 
   const content = <Status variant={withdrawalsStatus}>{modeLabel}</Status>;
   const timeTitle = <>Withdrawals mode {<WalletQueueTooltip />}</>;

features/withdrawals/request/wallet/wallet.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Divider } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { useSDK } from '@lido-sdk/react';
 
 import { CardAccount, CardRow, Fallback } from 'shared/wallet';

features/withdrawals/shared/input-decorator-tvl-stake/input-decorator-tvl-stake.tsx

@@ -18,7 +18,7 @@ export const InputDecoratorTvlStake = ({
       size="xxs"
       variant="translucent"
       data-testid="letsStakeBtn"
-      onClick={() => push(`/${queryString}`)}
+      onClick={() => void push(`/${queryString}`)}
     >
       Yes, let`s stake
     </Button>

features/wrap/features/wrap-form/form.tsx

@@ -14,7 +14,7 @@ import {
   useWSTETHContractWeb3,
   useSDK,
 } from '@lido-sdk/react';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { useCurrencyInput } from 'shared/forms/hooks/useCurrencyInput';
 import { useIsMultisig } from 'shared/hooks/useIsMultisig';
 import { wrapProcessingWithApprove } from 'features/wrap/utils';

features/wrap/utils.ts

@@ -1,4 +1,5 @@
 import { parseEther } from '@ethersproject/units';
+import { BigNumber } from 'ethers';
 import { WstethAbi } from '@lido-sdk/contracts';
 import { CHAINS, getTokenAddress, TOKENS } from '@lido-sdk/constants';
 import { TX_STAGE } from 'shared/components';
@@ -16,8 +17,8 @@ type UnwrapProcessingProps = (
   setTxStage: (value: TX_STAGE) => void,
   setTxHash: (value: string | undefined) => void,
   setTxModalFailedText: (value: string) => void,
-  wstethBalanceUpdate: () => void,
-  stethBalanceUpdate: () => void,
+  wstethBalanceUpdate: () => Promise<BigNumber | undefined>,
+  stethBalanceUpdate: () => Promise<BigNumber | undefined>,
   chainId: string | number | undefined,
   inputValue: string,
   resetForm: () => void,
@@ -71,8 +72,8 @@ export const unwrapProcessing: UnwrapProcessingProps = async (
     const handleEnding = () => {
       openTxModal();
       resetForm();
-      stethBalanceUpdate();
-      wstethBalanceUpdate();
+      void stethBalanceUpdate();
+      void wstethBalanceUpdate();
     };
 
     if (isMultisig) {
@@ -110,13 +111,13 @@ type WrapProcessingWithApproveProps = (
   setTxStage: (value: TX_STAGE) => void,
   setTxHash: (value: string | undefined) => void,
   setTxModalFailedText: (value: string) => void,
-  ethBalanceUpdate: () => void,
-  stethBalanceUpdate: () => void,
+  ethBalanceUpdate: () => Promise<BigNumber | undefined>,
+  stethBalanceUpdate: () => Promise<BigNumber | undefined>,
   inputValue: string,
   selectedToken: string,
   needsApprove: boolean,
   isMultisig: boolean,
-  approve: () => void,
+  approve: () => Promise<void>,
   resetForm: () => void,
 ) => Promise<void>;
 
@@ -140,8 +141,8 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
   const handleEnding = () => {
     openTxModal();
     resetForm();
-    ethBalanceUpdate();
-    stethBalanceUpdate();
+    void ethBalanceUpdate();
+    void stethBalanceUpdate();
   };
 
   const getGasParameters = async () => {
@@ -202,7 +203,7 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
       handleEnding();
     } else if (selectedToken === TOKENS.STETH) {
       if (needsApprove) {
-        approve();
+        return approve();
       } else {
         const callback = async () => {
           if (isMultisig) {