Continuing to fix "yarn build"

A long way to go.

frontend/src/components/EntriesNavigation.js

@@ -1,4 +1,10 @@
-import React, { useRef, useEffect, useContext, useState } from "react";
+import React, {
+  useRef,
+  useEffect,
+  useContext,
+  useState,
+  useCallback,
+} from "react";
 import {
   Flex,
   Spinner,
@@ -67,14 +73,17 @@ const EntriesNavigation = () => {
   ]);
   const [filterState, setFilterState] = useState([]);
 
-  const setNewFilterState = (props) => {
-    console.log(
-      "setNewFilterState",
-      props,
-      subscriptionsCache.data.subscriptions[0].id
-    );
-    _setNewFilterState(props);
-  };
+  const setNewFilterState = useCallback(
+    (props) => {
+      console.log(
+        "setNewFilterState",
+        props,
+        subscriptionsCache.data.subscriptions[0].id
+      );
+      _setNewFilterState(props);
+    },
+    [subscriptionsCache.data.subscriptions]
+  );
   const loadMoreButtonRef = useRef(null);
 
   const { fetchMore, isFetchingMore, canFetchMore, EntriesPages, isLoading } =
@@ -97,11 +106,14 @@ const EntriesNavigation = () => {
     }
   };
 
-  const setFilterProps = (filterIdx, props) => {
-    const newFilterProps = [...newFilterState];
-    newFilterProps[filterIdx] = { ...newFilterProps[filterIdx], ...props };
-    setNewFilterState(newFilterProps);
-  };
+  const setFilterProps = useCallback(
+    (filterIdx, props) => {
+      const newFilterProps = [...newFilterState];
+      newFilterProps[filterIdx] = { ...newFilterProps[filterIdx], ...props };
+      setNewFilterState(newFilterProps);
+    },
+    [newFilterState, setNewFilterState]
+  );
 
   useEffect(() => {
     if (
@@ -112,7 +124,7 @@ const EntriesNavigation = () => {
         value: subscriptionsCache.data.subscriptions[0].address,
       });
     }
-  }, [subscriptionsCache.isLoading]);
+  }, [subscriptionsCache, newFilterState, setFilterProps]);
 
   const entriesPagesData = EntriesPages
     ? EntriesPages.pages.map((page) => {

frontend/src/components/FourOFour.jsx

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react";
+import { React } from "react";
 import { Heading, Box, Text, Center, VStack } from "@chakra-ui/react";
 const Page404 = () => (
   <Box pt={8} w="100%" h="100%">

frontend/src/components/FourOThree.jsx

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react";
+import { React } from "react";
 import { Heading, Box, Text, VStack, Center } from "@chakra-ui/react";
 const Page403 = ({ location }) => (
   <Box pt={8} w="100%" h="100%">

frontend/src/components/HeadLinks.jsx

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react";
+import { React } from "react";
 import Head from "next/head";
 import propTypes from "prop-types";
 

frontend/src/components/HeadSEO.jsx

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react";
+import { React } from "react";
 import Head from "next/head";
 import propTypes from "prop-types";
 

frontend/src/components/IconButton.jsx

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react";
+import { React } from "react";
 import { IconButton as IconButtonChakra } from "@chakra-ui/react";
 import { CheckIcon } from "@chakra-ui/icons";
 

frontend/src/components/LoadingDots.jsx

@@ -1,5 +1,4 @@
-import { jsx } from "@emotion/react";
-import { useState, useEffect } from "react";
+import { React, useState, useEffect } from "react";
 import { Text } from "@chakra-ui/react";
 
 const LoadingDots = (props) => {

frontend/src/components/NewSubscription.js

@@ -22,7 +22,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
   const { typesCache, createSubscription } = useSubscriptions();
   const { handleSubmit, errors, register } = useForm();
   const [radioState, setRadioState] = useState("ethereum_blockchain");
-  let { getRootProps, getRadioProps, ref } = useRadioGroup({
+  let { getRootProps, getRadioProps } = useRadioGroup({
     name: "type",
     defaultValue: radioState,
     onChange: setRadioState,

frontend/src/components/SearchBar.jsx

@@ -1,5 +1,5 @@
-import { jsx } from "@emotion/react";
 import {
+  React,
   useState,
   useContext,
   useRef,