Fix lint warnings

components/blocks/language-selector.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { HiLanguage } from 'react-icons/hi2';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
@@ -18,20 +18,20 @@ const languages: LanguageOption[] = [
 const LanguageSelector = ({ bg = 'transparent', size, color }: { bg?: string; size?: string; color?: string }) => {
   const { i18n } = useTranslation();
 
-  const languageDetector = new LanguageDetector();
+  const languageDetector = useMemo(() => new LanguageDetector(), []);
 
   useEffect(() => {
     languageDetector.init();
     const lng = languageDetector.detect();
     i18n.changeLanguage(typeof lng === 'string' ? lng : lng[0]);
-  }, []);
+  }, [i18n, languageDetector]);
 
   const handleLanguageChange = useCallback(
     (languageCode: string) => {
       i18n.changeLanguage(languageCode);
       languageDetector.cacheUserLanguage(languageCode);
     },
-    [i18n]
+    [i18n, languageDetector]
   );
 
   return (

components/pages/app/page-templates/list-page-jump-to.tsx

@@ -1,6 +1,6 @@
 import { Column, ListCardContainer } from '@components/elements/grid';
 import { useTranslation } from 'react-i18next';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { renderSkeleton } from './list-page';
 import { FlexAlignItem, FlexContainer, FlexJustifyContent } from '@components/elements/flex';
 import { Else, If, Then } from 'react-if';
@@ -98,30 +98,36 @@ export function useJumpToPaginatedList({
   // Set loading
   useEffect(() => {
     setLoading(loadingElements || dataPagination == null || lastElement == null);
-  }, [loadingElements, dataPagination]);
+  }, [loadingElements, dataPagination, lastElement]);
 
-  const getFirstPageIndex = (page) => {
-    const index = lastElement - page * pageSize;
-    return index < 0 ? 0 : index;
-  };
+  const getFirstPageIndex = useCallback(
+    (page) => {
+      const index = lastElement - page * pageSize;
+      return index < 0 ? 0 : index;
+    },
+    [lastElement, pageSize]
+  );
 
   // Get the page where the block are you searching is
-  const getPageFromPosition = () => {
+  const getPageFromPosition = useCallback(() => {
     const totalPages = Math.ceil(lastElement / pageSize);
     return totalPages - Math.ceil(jumpTo / pageSize);
-  };
+  }, [jumpTo, lastElement, pageSize]);
 
-  const jumpToPosition = (newPos) => {
-    // Calculate new position
-    // const jumpToPosition = (jumpTo + 1) - pageSize
-    // But if paginator is used, page can change but the filter could be still set
-    // As we are using the paginator with pages instead of with positions, we have to handle
-    // the fact that somebody jump to a position and then advance the page.
-    // todo(ritmo): use paginator based on positions and not on pages for easy use.
-    const pageOfPosition = getPageFromPosition();
-    const offset = () => newPos + 1 - getFirstPageIndex(pageOfPosition);
-    setDataPagination(getFirstPageIndex(currentPage) + offset() - pageSize);
-  };
+  const jumpToPosition = useCallback(
+    (newPos) => {
+      // Calculate new position
+      // const jumpToPosition = (jumpTo + 1) - pageSize
+      // But if paginator is used, page can change but the filter could be still set
+      // As we are using the paginator with pages instead of with positions, we have to handle
+      // the fact that somebody jump to a position and then advance the page.
+      // todo(ritmo): use paginator based on positions and not on pages for easy use.
+      const pageOfPosition = getPageFromPosition();
+      const offset = () => newPos + 1 - getFirstPageIndex(pageOfPosition);
+      setDataPagination(getFirstPageIndex(currentPage) + offset() - pageSize);
+    },
+    [currentPage, getFirstPageIndex, getPageFromPosition, pageSize, setDataPagination]
+  );
 
   // Jump to height on filter
   useEffect(() => {
@@ -136,7 +142,7 @@ export function useJumpToPaginatedList({
     } else {
       setCurrentPage(1);
     }
-  }, [jumpTo]);
+  }, [currentPage, getPageFromPosition, jumpTo, jumpToPosition]);
 
   // When current page changed get next blocks
   useEffect(() => {
@@ -146,7 +152,7 @@ export function useJumpToPaginatedList({
         jumpToPosition(jumpTo);
       } else setDataPagination(getFirstPageIndex(currentPage));
     }
-  }, [currentPage, lastElement]);
+  }, [currentPage, getFirstPageIndex, jumpTo, jumpToPosition, lastElement, setDataPagination]);
 
   return {
     loading,

components/pages/blocks/components/BlockFilter.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { InputSearch } from '@components/elements/inputs';
 import { InlineFlex } from '@components/elements/flex';
 import { DivWithMarginChildren } from '@components/elements/styled-divs';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FilterForm } from '@components/pages/app/page-templates/filter-form';
 import { DELAY_BOUNCE_TIME } from '@const/filters';
 
@@ -18,21 +18,21 @@ export const BlocksFilter = ({ setFilter }: { setFilter: (IFilterBlocks) => void
 
   const [tempFilter, setTempFilter] = useState<IFilterBlocks>({});
 
-  const resetFilter = () => {
+  const resetFilter = useCallback(() => {
     setTempFilter({});
     setSearchTermIT('');
-  };
+  }, []);
 
-  const _onEnableFilter = () => {
+  const _onEnableFilter = useCallback(() => {
     setFilter(Object.assign({}, tempFilter));
-  };
+  }, [setFilter, tempFilter]);
 
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       _onEnableFilter();
     }, DELAY_BOUNCE_TIME);
     return () => clearTimeout(delayDebounceFn);
-  }, [tempFilter]);
+  }, [_onEnableFilter, tempFilter]);
 
   return (
     <FilterForm onEnableFilter={_onEnableFilter}>

components/pages/transactions/components/TransactionsFilter.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { InputSearch } from '@components/elements/inputs';
 import { InlineFlex } from '@components/elements/flex';
 import { DivWithMarginChildren } from '@components/elements/styled-divs';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FilterForm } from '@components/pages/app/page-templates/filter-form';
 import { DELAY_BOUNCE_TIME } from '@const/filters';
 
@@ -23,16 +23,16 @@ export const TransactionsFilter = ({ setFilter }: { setFilter: (IFilterTransacti
     setSearchTermIT('');
   };
 
-  const _onEnableFilter = () => {
+  const _onEnableFilter = useCallback(() => {
     setFilter(Object.assign({}, tempFilter));
-  };
+  }, [setFilter, tempFilter]);
 
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       _onEnableFilter();
     }, DELAY_BOUNCE_TIME);
     return () => clearTimeout(delayDebounceFn);
-  }, [tempFilter]);
+  }, [_onEnableFilter, tempFilter]);
 
   return (
     <FilterForm onEnableFilter={_onEnableFilter}>

components/pages/verify/index.tsx

@@ -6,11 +6,10 @@ import { DivWithMarginChildren, FakedButton } from '@components/elements/styled-
 import { Typography, TypographyVariant } from '@components/elements/typography';
 import i18n from '@i18n';
 import { colors } from '@theme/colors';
-import { ReactNode, useEffect, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import { TopDiv } from '../app/page-templates/list-page';
 import { Button } from '@components/elements/button';
-import { useUrlHash } from 'use-url-hash';
 
 const VerifyPage = ({ minified = false, onSubmit }: { minified?: boolean; onSubmit?: (etVoteId: string) => void }) => {
   const [etVoteId, setEtVoteId] = useState(''); // Handle edit text state

components/pages/verify/single-page.tsx

@@ -1,16 +1,8 @@
 import { Loader } from '@components/blocks/loader';
-import { Button } from '@components/elements/button';
 import { FlexAlignItem, FlexContainer, FlexJustifyContent } from '@components/elements/flex';
-import { FakedButton } from '@components/elements/styled-divs';
 import { EnvelopeDetails } from '@components/pages/envelopes/details';
-import VerifyPage from '@components/pages/verify';
 import i18n from '@i18n';
-import { useEffect, useState } from 'react';
-import { Else, If, Then, Unless, When } from 'react-if';
-import styled from 'styled-components';
-import Router from 'next/router';
-import { VERIFY_DETAILS } from '@const/routes';
-import { getPath } from '@components/pages/app/components/get-links';
+import { Else, If, Then, When } from 'react-if';
 import { useVoteInfo } from '@hooks/use-voconi-sdk';
 
 const VerifySinglePage = ({ voteId }: { voteId: string }) => {

components/redirect.tsx

@@ -9,7 +9,7 @@ export const Redirect = ({ to }: IRedirectProps) => {
   const router = useRouter();
   useEffect(() => {
     router.replace(to);
-  }, [to]);
+  }, [router, to]);
 
   return <></>;
 };

pages/converter.tsx

@@ -44,13 +44,17 @@ const BlocksPage = () => {
       setTargetDate(null);
       setTargetBlock(blockInput);
     }
+    // Execute this effect only when blockInput change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [blockInput]);
 
   useEffect(() => {
     if (dateInput !== targetDate) {
       setTargetBlock(null);
       setTargetDate(dateInput);
     }
+    // Execute this effect only when dateInput change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dateInput]);
 
   const enviormentName = (env) => {

pages/index.tsx

@@ -1,5 +1,5 @@
 import { Loader } from '@components/blocks/loader';
-import { BannerContainer, HeroBanner } from '@components/pages/home/components/hero-banner';
+import { BannerContainer } from '@components/pages/home/components/hero-banner';
 import StatsPage from '@components/pages/stats';
 import { Else, If, Then } from 'react-if';
 import FeaturedContent from './index/featured';