remove uuids from .map, add React.memo

frontend/package.json

@@ -39,7 +39,7 @@
     "react-hook-form": "^6.9.2",
     "react-hubspot-form": "^1.3.7",
     "react-icons": "^4.3.1",
-    "react-pro-sidebar": "^0.6.0",
+    "react-pro-sidebar": "^0.7.1",
     "react-query": "^3.18.1",
     "react-showdown": "^2.3.0",
     "react-slick": "^0.28.1",

frontend/pages/dashboard/[dashboardId].js

@@ -20,7 +20,6 @@ import { useRouter, useSubscriptions } from "../../src/core/hooks";
 import { BiTrash } from "react-icons/bi";
 import OverlayContext from "../../src/core/providers/OverlayProvider/context";
 import SubscriptionReport from "../../src/components/SubscriptionReport";
-import { v4 } from "uuid";
 import { DRAWER_TYPES } from "../../src/core/providers/OverlayProvider/constants";
 import Page404 from "../../src/components/FourOFour";
 import { BsGear } from "react-icons/bs";
@@ -158,7 +157,7 @@ const Analytics = () => {
               )?.label;
               return (
                 <Flex
-                  key={v4()}
+                  key={`${dashboardId}-subscription-report-${key}`}
                   flexBasis={plotMinW}
                   flexGrow={1}
                   minW={plotMinW}

frontend/src/components/AccountIconButton.js

@@ -46,9 +46,9 @@ const AccountIconButton = (props) => {
         </MenuGroup>
         <MenuDivider />
         {ui.isMobileView &&
-          ALL_NAV_PATHES.map((pathToLink) => {
+          ALL_NAV_PATHES.map((pathToLink, idx) => {
             return (
-              <MenuItem key={v4()}>
+              <MenuItem key={`AccountIconButton-All_nav_pathes-${idx}`}>
                 <RouterLink href={pathToLink.path}>
                   {pathToLink.title}
                 </RouterLink>

frontend/src/components/AutoCompleter.js

@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
 import Downshift from "downshift";
-import { v4 } from "uuid";
 import {
   Stack,
   Box,
@@ -124,7 +123,7 @@ const AutoCompleter = ({
                           px={4}
                           py={1}
                           alignItems="center"
-                          key={v4()}
+                          key={`autocomplete-item-${index}`}
                           {...getItemProps({
                             index,
                             item,

frontend/src/components/CheckboxABI.js

@@ -144,102 +144,4 @@ const SuggestABI = ({ subscriptionId, state }) => {
 
 const ChakraSuggestABI = chakra(SuggestABI);
 
-export default ChakraSuggestABI;
+export default ChakraSuggestABI;
-
-{
-  /* <Stack pl={6} spacing={0}>
-{getEvents(pickerItems).map((event, idx) => {
-  const pickedEvents = getEvents(pickedItems);
-  return (
-    <Stack
-      px={2}
-      key={v4()}
-      direction="row"
-      bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
-    >
-      <Checkbox
-        isChecked={pickedEvents.some(
-          (pickedEvent) => pickedEvent.value === event.value
-        )}
-        onChange={() => {
-          const changedIndex = pickedItems.findIndex(
-            (pickedItem) =>
-              event.type === "event" &&
-              pickedItem.value === event.value
-          );
-          if (changedIndex === -1) {
-            setPickedItems((currentlyPicked) => {
-              const newPicked = [...currentlyPicked];
-              newPicked.push(event);
-              return newPicked;
-            });
-          } else {
-            setPickedItems((currentlyPicked) => {
-              const newPicked = [...currentlyPicked];
-              newPicked.splice(changedIndex, 1);
-              return newPicked;
-            });
-          }
-        }}
-      >
-        {event.value}
-      </Checkbox>
-      <Spacer />
-      {event.stateMutability === "view" && (
-        <Badge variant="solid" colorScheme="orange" size="sm">
-          View
-        </Badge>
-      )}
-      {event.stateMutability === "payable" && (
-        <Badge variant="solid" colorScheme="blue" size="sm">
-          Payable
-        </Badge>
-      )}
-      {event.stateMutability === "nonpayable" && (
-        <Badge variant="solid" colorScheme="green" size="sm">
-          Non-Payable
-        </Badge>
-      )}
-    </Stack>
-  );
-})}
-{pickerItems
-  ?.filter((unfilteredItem) => unfilteredItem.type === "function")
-  .map((item, idx) => {
-    return (
-      <Stack
-        px={2}
-        key={v4()}
-        direction="row"
-        bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
-      >
-        <Checkbox
-          isChecked={pickedItems.some(
-            (pickedItem) =>
-              item.type === "function" &&
-              pickedItem.value === item.value
-          )}
-        >
-          {item.value}
-        </Checkbox>
-        <Spacer />
-        {item.stateMutability === "view" && (
-          <Badge variant="solid" colorScheme="orange" size="sm">
-            View
-          </Badge>
-        )}
-        {item.stateMutability === "payable" && (
-          <Badge variant="solid" colorScheme="blue" size="sm">
-            Payable
-          </Badge>
-        )}
-        {item.stateMutability === "nonpayable" && (
-          <Badge variant="solid" colorScheme="green" size="sm">
-            Non-Payable
-          </Badge>
-        )}
-      </Stack>
-    );
-  })}
-</Stack> */
-}

frontend/src/components/CheckboxGrouped.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Stack, Checkbox } from "@chakra-ui/react";
-import { v4 } from "uuid";
 
 const CheckboxGroupped = ({
   groupName,
@@ -27,7 +26,7 @@ const CheckboxGroupped = ({
           return (
             <Stack
               px={2}
-              key={v4()}
+              key={`list-item-checkbox-${idx}`}
               direction="row"
               bgColor={idx % 2 == 0 ? "gray.50" : "gray.100"}
             >

frontend/src/components/Footer.js

@@ -110,9 +110,9 @@ const Footer = () => (
             </SocialButton>
           </Stack>
         </Stack>
-        {Object.values(FOOTER_COLUMNS).map((columnEnum) => {
+        {Object.values(FOOTER_COLUMNS).map((columnEnum, colIndex) => {
           return (
-            <Stack align={"flex-start"} key={v4()}>
+            <Stack align={"flex-start"} key={`footer-list-column-${colIndex}`}>
               {ALL_NAV_PATHES.filter(
                 (navPath) => navPath.footerCategory === columnEnum
               ).length > 0 && (
@@ -120,9 +120,13 @@ const Footer = () => (
                   <ListHeader>{columnEnum}</ListHeader>
                   {ALL_NAV_PATHES.filter(
                     (navPath) => navPath.footerCategory === columnEnum
-                  ).map((linkItem) => {
+                  ).map((linkItem, linkItemIndex) => {
                     return (
-                      <RouterLink passHref href={linkItem.path} key={v4()}>
+                      <RouterLink
+                        passHref
+                        href={linkItem.path}
+                        key={`footer-list-link-item-${linkItemIndex}-col-${colIndex}`}
+                      >
                         <Link {...LINKS_SIZES}>{linkItem.title}</Link>
                       </RouterLink>
                     );

frontend/src/components/Report.js

@@ -103,4 +103,4 @@ const Report = ({ data, timeRange }) => {
   );
 };
 
-export default Report;
+export default React.memo(Report);

frontend/src/components/Sidebar.js

@@ -102,9 +102,9 @@ const Sidebar = () => {
                 Login
               </MenuItem>
               {ui.isMobileView &&
-                ALL_NAV_PATHES.map((pathToLink) => {
+                ALL_NAV_PATHES.map((pathToLink, linkItemIndex) => {
                   return (
-                    <MenuItem key={v4()}>
+                    <MenuItem key={`mobile-all-nav-path-item-${linkItemIndex}`}>
                       <RouterLink href={pathToLink.path}>
                         {pathToLink.title}
                       </RouterLink>

frontend/src/components/SubscriptionReport.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { usePresignedURL } from "../core/hooks";
 import Report from "./Report";
 import {
@@ -30,6 +30,27 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
     hideToastOn404: true,
   });
   const plotMinW = "250px";
+  const eventKeys = useMemo(
+    () =>
+      Object.keys(data?.events ?? {}).length > 0
+        ? Object.keys(data?.events)
+        : undefined,
+    [data]
+  );
+  const methodKeys = useMemo(
+    () =>
+      Object.keys(data?.methods ?? {}).length > 0
+        ? Object.keys(data?.methods)
+        : undefined,
+    [data]
+  );
+  const genericKeys = useMemo(
+    () =>
+      Object.keys(data?.generic ?? {}).length > 0
+        ? Object.keys(data?.generic)
+        : undefined,
+    [data]
+  );
   if (failureCount < 1 && (!data || isLoading)) return <Spinner />;
   if (failureCount >= 1 && (!data || isLoading))
     return (
@@ -79,7 +100,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
         flexWrap="wrap"
         alignContent={["inherit", "flex-start", null]}
       >
-        {data?.web3_metric.map((metric) => {
+        {data?.web3_metric.map((metric, web3MetricIndex) => {
           return (
             <Flex
               flexGrow={1}
@@ -88,7 +109,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
               p={2}
               m={1}
               bgColor="blue.100"
-              key={v4()}
+              key={`web3-metric-${web3MetricIndex}`}
               size="sm"
               fontWeight="600"
               boxShadow="sm"
@@ -111,7 +132,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           );
         })}
       </Flex>
-      {data?.events && Object.keys(data?.events) && (
+      {data?.events && eventKeys && (
         <Flex
           w="100%"
           h="auto"
@@ -122,10 +143,10 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           <Heading size="md" pt={4}>
             Events
           </Heading>
-          {Object.keys(data.events).map((key) => {
+          {eventKeys.map((key) => {
             return (
               <Flex
-                key={v4()}
+                key={`events-list-${key}`}
                 flexBasis={plotMinW}
                 flexGrow={1}
                 minW={plotMinW}
@@ -154,7 +175,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           })}
         </Flex>
       )}
-      {data?.functions && Object.keys(data?.functions) && (
+      {data?.functions && methodKeys && (
         <Flex
           w="100%"
           h="auto"
@@ -165,10 +186,10 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           <Heading size="md" pt={4}>
             functions
           </Heading>
-          {Object.keys(data.functions).map((key) => {
+          {methodKeys.map((key) => {
             return (
               <Flex
-                key={v4()}
+                key={`methods-list-${key}`}
                 flexBasis={plotMinW}
                 flexGrow={1}
                 minW={plotMinW}
@@ -197,7 +218,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           })}
         </Flex>
       )}
-      {data?.generic && Object.keys(data?.generic) && (
+      {data?.generic && genericKeys && (
         <Flex
           w="100%"
           h="auto"
@@ -211,7 +232,7 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
           {Object.keys(data.generic).map((key) => {
             return (
               <Flex
-                key={v4()}
+                key={`generics-list-${key}`}
                 flexBasis={plotMinW}
                 flexGrow={1}
                 minW={plotMinW}
@@ -244,4 +265,4 @@ const SubscriptionReport = ({ timeRange, url, id, refetchLinks }) => {
   );
 };
 
-export default SubscriptionReport;
+export default React.memo(SubscriptionReport);

frontend/src/core/providers/UIProvider/index.js

@@ -260,26 +260,12 @@ const UIProvider = ({ children }) => {
   }, [onboardingStep, router.nextRouter.pathname, user, isAppReady]);
 
   useEffect(() => {
-    if (
+    if (isInit && router.nextRouter.isReady && !isLoggingOut && !isLoggingIn) {
-      isInit &&
-      router.nextRouter.isReady &&
-      onboardingState &&
-      !isLoggingOut &&
-      !isLoggingIn &&
-      onboardingRedirectCheckPassed
-    ) {
       setAppReady(true);
     } else {
       setAppReady(false);
     }
-  }, [
+  }, [isInit, router, isLoggingOut, isLoggingIn]);
-    isInit,
-    router,
-    onboardingState,
-    isLoggingOut,
-    isLoggingIn,
-    onboardingRedirectCheckPassed,
-  ]);
 
   //***************New chart item 's state  ************************/
   const dashboardUpdateReducer = useCallback(