optimize global states

src/components/Apps/AppViewer.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box } from '@mui/material';
-import { MyContext, getBaseApiReact } from '../../App';
+import { getBaseApiReact } from '../../App';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useFrame } from 'react-frame-component';
 import { useQortalMessageListener } from './useQortalMessageListener';
@@ -8,7 +8,6 @@ import { useThemeContext } from '../Theme/ThemeContext';
 
 export const AppViewer = React.forwardRef(
   ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
-    const { rootHeight } = useContext(MyContext);
     // const iframeRef = useRef(null);
     const { window: frameWindow } = useFrame();
     const { path, history, changeCurrentIndex, resetHistory } =

src/components/Apps/AppViewerContainer.tsx

@@ -5,8 +5,6 @@ import { MyContext } from '../../App';
 
 const AppViewerContainer = React.forwardRef(
   ({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
-    const { rootHeight } = useContext(MyContext);
-
     return (
       <Frame
         id={`browser-iframe-${app?.tabId}`}

src/components/Apps/AppsCategoryDesktop.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   AppLibrarySubTitle,
   AppsDesktopLibraryBody,
@@ -10,7 +10,6 @@ import {
   AppsWidthLimiter,
 } from './Apps-styles';
 import { ButtonBase, InputBase, styled, useTheme } from '@mui/material';
-import { MyContext } from '../../App';
 import SearchIcon from '@mui/icons-material/Search';
 import IconClearInput from '../../assets/svgs/ClearInput.svg';
 import { Spacer } from '../../common/Spacer';
@@ -59,7 +58,6 @@ export const AppsCategoryDesktop = ({
   const [searchValue, setSearchValue] = useState('');
   const virtuosoRef = useRef();
   const theme = useTheme();
-  const { rootHeight } = useContext(MyContext);
 
   const categoryList = useMemo(() => {
     if (category?.id === 'all') return availableQapps;

src/components/Apps/AppsDesktop.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { AppsHomeDesktop } from './AppsHomeDesktop';
 import { Spacer } from '../../common/Spacer';
-import { GlobalContext, getBaseApiReact } from '../../App';
+import { MyContext, getBaseApiReact } from '../../App';
 import { AppInfo } from './AppInfo';
 import {
   executeEvent,
@@ -49,7 +49,7 @@ export const AppsDesktop = ({
   const iframeRefs = useRef({});
   const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
 
-  const { showTutorial } = useContext(GlobalContext);
+  const { showTutorial } = useContext(MyContext);
   const theme = useTheme();
 
   const myApp = useMemo(() => {

src/components/Apps/AppsPrivate.tsx

@@ -17,6 +17,7 @@ import { useDropzone } from 'react-dropzone';
 import { useHandlePrivateApps } from './useHandlePrivateApps';
 import {
   groupsPropertiesAtom,
+  memberGroupsAtom,
   myGroupsWhereIAmAdminAtom,
 } from '../../atoms/global';
 import { Label } from '../Group/AddGroup';
@@ -56,8 +57,10 @@ export const AppsPrivate = ({ myName }) => {
   }, [myGroupsWhereIAmAdminFromGlobal, groupsProperties]);
 
   const [isOpenPrivateModal, setIsOpenPrivateModal] = useState(false);
-  const { show, setInfoSnackCustom, setOpenSnackGlobal, memberGroups } =
+  const { show, setInfoSnackCustom, setOpenSnackGlobal } =
     useContext(MyContext);
+  const [memberGroups] = useAtom(memberGroupsAtom);
+
   const theme = useTheme();
 
   const myGroupsPrivate = useMemo(() => {

src/components/Chat/AdminSpace.tsx

@@ -18,7 +18,6 @@ export const AdminSpace = ({
   balance,
   isOwner,
 }) => {
-  const { rootHeight } = useContext(MyContext);
   const [isMoved, setIsMoved] = useState(false);
   useEffect(() => {
     if (hide) {

src/components/Chat/AdminSpaceInner.tsx

@@ -70,7 +70,7 @@ export const AdminSpaceInner = ({
   const [groupSecretKeyPublishDetails, setGroupSecretKeyPublishDetails] =
     useState(null);
   const [isLoadingPublishKey, setIsLoadingPublishKey] = useState(false);
-  const { show, setTxList, setInfoSnackCustom, setOpenSnackGlobal } =
+  const { show, setInfoSnackCustom, setOpenSnackGlobal } =
     useContext(MyContext);
 
   const getAdminGroupSecretKey = useCallback(async () => {

src/components/Chat/CreateCommonSecret.tsx

@@ -16,6 +16,8 @@ import {
 } from '../Group/Group';
 import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
 import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
+import { useSetAtom } from 'jotai';
+import { txListAtom } from '../../atoms/global';
 
 export const CreateCommonSecret = ({
   groupId,
@@ -29,7 +31,8 @@ export const CreateCommonSecret = ({
   setIsForceShowCreationKeyPopup,
   isForceShowCreationKeyPopup,
 }) => {
-  const { show, setTxList } = useContext(MyContext);
+  const { show } = useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
 
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);

src/components/Chat/GroupAnnouncements.tsx

@@ -138,7 +138,7 @@ export const GroupAnnouncements = ({
   const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
   const [isFocusedParent, setIsFocusedParent] = useState(false);
 
-  const { show, rootHeight } = React.useContext(MyContext);
+  const { show } = React.useContext(MyContext);
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);
   const hasInitialized = useRef(false);

src/components/Chat/GroupForum.tsx

@@ -1,6 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { GroupMail } from '../Group/Forum/GroupMail';
-import { MyContext } from '../../App';
 
 export const GroupForum = ({
   selectedGroup,
@@ -14,7 +13,6 @@ export const GroupForum = ({
   setDefaultThread,
   isPrivate,
 }) => {
-  const { rootHeight } = useContext(MyContext);
   const [isMoved, setIsMoved] = useState(false);
 
   useEffect(() => {

src/components/Embeds/VideoPlayer.tsx

@@ -17,7 +17,7 @@ import { Refresh } from '@mui/icons-material';
 
 import { Menu, MenuItem } from '@mui/material';
 import { MoreVert as MoreIcon } from '@mui/icons-material';
-import { GlobalContext, getBaseApiReact } from '../../App';
+import { MyContext, getBaseApiReact } from '../../App';
 import { resourceKeySelector } from '../../atoms/global';
 
 import { useAtomValue } from 'jotai';
@@ -84,7 +84,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
 
   const download = useAtomValue(resourceKeySelector(keyIdentifier));
 
-  const { downloadResource } = useContext(GlobalContext);
+  const { downloadResource } = useContext(MyContext);
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [playing, setPlaying] = useState(false);

src/components/GlobalActions/GlobalActions.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { JoinGroup } from './JoinGroup'
+import React from 'react';
+import { JoinGroup } from './JoinGroup';
 
-export const GlobalActions = ({memberGroups}) => {
+export const GlobalActions = () => {
   return (
     <>
-    <JoinGroup memberGroups={memberGroups} />
+      <JoinGroup />
     </>
-  )
-}
+  );
+};

src/components/GlobalActions/JoinGroup.tsx

@@ -16,9 +16,13 @@ import { getBaseApiReact, MyContext } from '../../App';
 import { getFee } from '../../background';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { FidgetSpinner } from 'react-loader-spinner';
+import { useAtom, useSetAtom } from 'jotai';
+import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 
-export const JoinGroup = ({ memberGroups }) => {
-  const { show, setTxList } = useContext(MyContext);
+export const JoinGroup = () => {
+  const { show } = useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
+  const [memberGroups] = useAtom(memberGroupsAtom);
   const [openSnack, setOpenSnack] = useState(false);
   const [infoSnack, setInfoSnack] = useState(null);
   const [groupInfo, setGroupInfo] = useState(null);

src/components/Group/AddGroup.tsx

@@ -38,6 +38,8 @@ import { getFee } from '../../background';
 import { MyContext } from '../../App';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useTranslation } from 'react-i18next';
+import { useSetAtom } from 'jotai';
+import { txListAtom } from '../../atoms/global';
 
 export const Label = styled('label')`
   display: block;
@@ -57,7 +59,9 @@ const Transition = forwardRef(function Transition(
 });
 
 export const AddGroup = ({ address, open, setOpen }) => {
-  const { show, setTxList } = useContext(MyContext);
+  const { show } = useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
+
   const [openAdvance, setOpenAdvance] = useState(false);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');

src/components/Group/AddGroupList.tsx

@@ -30,6 +30,8 @@ import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import { Spacer } from '../../common/Spacer';
 import { useTranslation } from 'react-i18next';
+import { useAtom, useSetAtom } from 'jotai';
+import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 
 const cache = new CellMeasurerCache({
   fixedWidth: true,
@@ -37,7 +39,11 @@ const cache = new CellMeasurerCache({
 });
 
 export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
-  const { memberGroups, show, setTxList } = useContext(MyContext);
+  const { show } = useContext(MyContext);
+  const [memberGroups] = useAtom(memberGroupsAtom);
+
+  const setTxList = useSetAtom(txListAtom);
+
   const { t } = useTranslation(['core', 'group']);
   const [groups, setGroups] = useState([]);
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to

src/components/Group/Group.tsx

@@ -11,7 +11,6 @@ import {
 } from '@mui/material';
 import React, {
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -33,7 +32,6 @@ import { Spacer } from '../../common/Spacer';
 import { ManageMembers } from './ManageMembers';
 import MarkChatUnreadIcon from '@mui/icons-material/MarkChatUnread';
 import {
-  MyContext,
   clearAllQueues,
   getArbitraryEndpointReact,
   getBaseApiReact,
@@ -73,6 +71,7 @@ import {
   groupsOwnerNamesAtom,
   groupsPropertiesAtom,
   isOpenBlockedModalAtom,
+  memberGroupsAtom,
   mutedGroupsAtom,
   selectedGroupIdAtom,
   timestampEnterDataAtom,
@@ -413,8 +412,9 @@ export const Group = ({
   const [openAddGroup, setOpenAddGroup] = useState(false);
   const [isInitialGroups, setIsInitialGroups] = useState(false);
   const [openManageMembers, setOpenManageMembers] = useState(false);
-  const { setMemberGroups, rootHeight, isRunningPublicNode } =
-    useContext(MyContext);
+
+  const setMemberGroups = useSetAtom(memberGroupsAtom);
+
   const lastGroupNotification = useRef<null | number>(null);
   const [timestampEnterData, setTimestampEnterData] = useAtom(
     timestampEnterDataAtom
@@ -1309,7 +1309,6 @@ export const Group = ({
     setOpenAddGroup(false);
     setIsInitialGroups(false);
     setOpenManageMembers(false);
-    setMemberGroups([]); // Assuming you're clearing the context here as well
     setTimestampEnterData({});
     setChatMode('groups');
     setNewChat(false);
@@ -1931,7 +1930,6 @@ export const Group = ({
             selectedGroup={selectedGroup}
             getUserSettings={getUserSettings}
             setOpenAddGroup={setOpenAddGroup}
-            isRunningPublicNode={isRunningPublicNode}
             setIsOpenBlockedUserModal={setIsOpenBlockedUserModal}
             myAddress={myAddress}
           />

src/components/Group/GroupJoinRequests.tsx

@@ -9,12 +9,12 @@ import GroupAddIcon from '@mui/icons-material/GroupAdd';
 import { executeEvent } from '../../utils/events';
 import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
 import { CustomLoader } from '../../common/CustomLoader';
-import { MyContext, getBaseApiReact } from '../../App';
-import { myGroupsWhereIAmAdminAtom } from '../../atoms/global';
+import { getBaseApiReact } from '../../App';
+import { myGroupsWhereIAmAdminAtom, txListAtom } from '../../atoms/global';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { useTranslation } from 'react-i18next';
-import { useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2);
 
 export const GroupJoinRequests = ({
@@ -33,7 +33,8 @@ export const GroupJoinRequests = ({
     []
   );
   const [loading, setLoading] = React.useState(true);
-  const { txList, setTxList } = React.useContext(MyContext);
+  const [txList] = useAtom(txListAtom);
+
   const setMyGroupsWhereIAmAdmin = useSetAtom(myGroupsWhereIAmAdminAtom);
 
   const theme = useTheme();

src/components/Group/GroupList.tsx

@@ -26,11 +26,12 @@ import {
   groupChatTimestampSelector,
   groupPropertySelector,
   groupsOwnerNamesSelector,
+  isRunningPublicNodeAtom,
   timestampEnterDataSelector,
 } from '../../atoms/global';
 
 import { timeDifferenceForNotificationChats } from './Group';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 
 export const GroupList = ({
   selectGroupFunc,
@@ -44,11 +45,12 @@ export const GroupList = ({
   selectedGroup,
   getUserSettings,
   setOpenAddGroup,
-  isRunningPublicNode,
   setIsOpenBlockedUserModal,
   myAddress,
 }) => {
   const theme = useTheme();
+  const [isRunningPublicNode] = useAtom(isRunningPublicNodeAtom);
+
   return (
     <div
       style={{

src/components/Group/ListOfGroupPromotions.tsx

@@ -39,6 +39,7 @@ import {
   myGroupsWhereIAmAdminAtom,
   promotionTimeIntervalAtom,
   promotionsAtom,
+  txListAtom,
 } from '../../atoms/global';
 import { Label } from './AddGroup';
 import ShortUniqueId from 'short-unique-id';
@@ -49,7 +50,7 @@ import ErrorBoundary from '../../common/ErrorBoundary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { getFee } from '../../background';
-import { useAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 export const requestQueuePromos = new RequestQueueWithPromise(3);
 
 export function utf8ToBase64(inputString: string): string {
@@ -93,7 +94,9 @@ export const ListOfGroupPromotions = () => {
   const [fee, setFee] = useState(null);
   const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
   const [isLoadingPublish, setIsLoadingPublish] = useState(false);
-  const { show, setTxList } = useContext(MyContext);
+  const { show } = useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
+
   const theme = useTheme();
   const listRef = useRef();
   const rowVirtualizer = useVirtualizer({

src/components/Group/ListOfJoinRequests.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Box,
@@ -17,7 +17,9 @@ import {
 import { getNameInfo } from './Group';
 import { getBaseApi, getFee } from '../../background';
 import { LoadingButton } from '@mui/lab';
-import { MyContext, getBaseApiReact } from '../../App';
+import { getBaseApiReact } from '../../App';
+import { txListAtom } from '../../atoms/global';
+import { useAtom } from 'jotai';
 
 export const getMemberInvites = async (groupNumber) => {
   const response = await fetch(
@@ -56,7 +58,7 @@ export const ListOfJoinRequests = ({
   show,
 }) => {
   const [invites, setInvites] = useState([]);
-  const { txList, setTxList } = useContext(MyContext);
+  const [txList, setTxList] = useAtom(txListAtom);
 
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open

src/components/Group/ManageMembers.tsx

@@ -23,6 +23,8 @@ import { LoadingButton } from '@mui/lab';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { Spacer } from '../../common/Spacer';
 import InsertLinkIcon from '@mui/icons-material/InsertLink';
+import { useSetAtom } from 'jotai';
+import { txListAtom } from '../../atoms/global';
 
 function a11yProps(index: number) {
   return {
@@ -61,7 +63,8 @@ export const ManageMembers = ({
     setValue(newValue);
   };
   const theme = useTheme();
-  const { show, setTxList } = React.useContext(MyContext);
+  const { show } = React.useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
 
   const handleClose = () => {
     setOpen(false);

src/components/Group/UserListOfInvites.tsx

@@ -20,6 +20,8 @@ import { getFee } from '../../background';
 import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 import { Spacer } from '../../common/Spacer';
+import { useSetAtom } from 'jotai';
+import { txListAtom } from '../../atoms/global';
 
 const cache = new CellMeasurerCache({
   fixedWidth: true,
@@ -52,7 +54,9 @@ export const UserListOfInvites = ({
   setInfoSnack,
   setOpenSnack,
 }) => {
-  const { txList, setTxList, show } = useContext(MyContext);
+  const { show } = useContext(MyContext);
+  const setTxList = useSetAtom(txListAtom);
+
   const [invites, setInvites] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const theme = useTheme();

src/components/Group/useBlockUsers.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 export const useBlockedAddresses = () => {
   const userBlockedRef = useRef({});
@@ -191,10 +191,13 @@ export const useBlockedAddresses = () => {
     }
   }, []);
 
-  return {
-    isUserBlocked,
-    addToBlockList,
-    removeBlockFromList,
-    getAllBlockedUsers,
-  };
+  return useMemo(
+    () => ({
+      isUserBlocked,
+      addToBlockList,
+      removeBlockFromList,
+      getAllBlockedUsers,
+    }),
+    [isUserBlocked, addToBlockList, removeBlockFromList, getAllBlockedUsers]
+  );
 };

src/components/Group/useHandleUserInfo.tsx

@@ -26,7 +26,5 @@ export const useHandleUserInfo = () => {
     }
   }, []);
 
-  return {
-    getIndividualUserInfo,
-  };
+  return getIndividualUserInfo;
 };

src/components/Minting/Minting.tsx

@@ -25,15 +25,13 @@ import { getFee, getNameOrAddress } from '../../background';
 import { Spacer } from '../../common/Spacer';
 import { FidgetSpinner } from 'react-loader-spinner';
 import { useModal } from '../../common/useModal';
+import { useAtom, useSetAtom } from 'jotai';
+import { memberGroupsAtom, txListAtom } from '../../atoms/global';
+
+export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
+  const setTxList = useSetAtom(txListAtom);
+  const [groups] = useAtom(memberGroupsAtom);
 
-export const Minting = ({
-  setIsOpenMinting,
-  myAddress,
-  groups,
-  show,
-  setTxList,
-  txList,
-}) => {
   const [mintingAccounts, setMintingAccounts] = useState([]);
   const [accountInfo, setAccountInfo] = useState(null);
   const [rewardSharePublicKey, setRewardSharePublicKey] = useState('');

src/components/RegisterName.tsx

@@ -34,6 +34,8 @@ import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
 import { BarSpinner } from '../common/Spinners/BarSpinner/BarSpinner';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
+import { useSetAtom } from 'jotai';
+import { txListAtom } from '../atoms/global';
 
 enum Availability {
   NULL = 'null',
@@ -46,9 +48,10 @@ export const RegisterName = ({
   setInfoSnack,
   userInfo,
   show,
-  setTxList,
   balance,
 }) => {
+  const setTxList = useSetAtom(txListAtom);
+
   const [isOpen, setIsOpen] = useState(false);
   const [registerNameValue, setRegisterNameValue] = useState('');
   const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false);

src/components/TaskManager/TaskManager.tsx

@@ -7,16 +7,21 @@ import {
   IconButton,
   useTheme,
 } from '@mui/material';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PendingIcon from '@mui/icons-material/Pending';
 import TaskAltIcon from '@mui/icons-material/TaskAlt';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import { MyContext, getBaseApiReact } from '../../App';
+import { getBaseApiReact } from '../../App';
 import { executeEvent } from '../../utils/events';
+import { useAtom } from 'jotai';
+import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 
 export const TaskManager = ({ getUserInfo }) => {
-  const { txList, setTxList, memberGroups } = useContext(MyContext);
+  const [memberGroups] = useAtom(memberGroupsAtom);
+
+  const [txList, setTxList] = useAtom(txListAtom);
+
   const [open, setOpen] = React.useState(false);
   const intervals = useRef({});
   const theme = useTheme();

src/components/Tutorials/Tutorials.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { GlobalContext } from '../../App';
+import { MyContext } from '../../App';
 import {
   Button,
   Dialog,
@@ -16,7 +16,7 @@ import { VideoPlayer } from '../Embeds/VideoPlayer';
 import { useTranslation } from 'react-i18next';
 
 export const Tutorials = () => {
-  const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
+  const { openTutorialModal, setOpenTutorialModal } = useContext(MyContext);
   const [multiNumber, setMultiNumber] = useState(0);
   const theme = useTheme();
   const { t } = useTranslation(['core', 'tutorial']);

src/components/Tutorials/useHandleTutorials.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop';
 import creationImg from './img/creation.webp';
 import dashboardImg from './img/dashboard.webp';
@@ -196,14 +196,17 @@ export const useHandleTutorials = () => {
     },
     [shownTutorials]
   );
-  return {
-    showTutorial,
-    hasSeenGettingStarted:
-      shownTutorials === null
-        ? null
-        : !!(shownTutorials || {})['getting-started'],
-    openTutorialModal,
-    setOpenTutorialModal,
-    shownTutorialsInitiated: !!shownTutorials,
-  };
+  return useMemo(
+    () => ({
+      showTutorial,
+      hasSeenGettingStarted:
+        shownTutorials === null
+          ? null
+          : !!(shownTutorials || {})['getting-started'],
+      openTutorialModal,
+      setOpenTutorialModal,
+      shownTutorialsInitiated: !!shownTutorials,
+    }),
+    [showTutorial, openTutorialModal, setOpenTutorialModal, shownTutorials]
+  );
 };

src/components/WrapperUserAction.tsx

@@ -8,10 +8,13 @@ import {
 } from '@mui/material';
 import { executeEvent } from '../utils/events';
 import { MyContext } from '../App';
+import { useAtom } from 'jotai';
+import { isRunningPublicNodeAtom } from '../atoms/global';
 
 export const WrapperUserAction = ({ children, address, name, disabled }) => {
   const theme = useTheme();
-  const { isRunningPublicNode } = useContext(MyContext);
+  const [isRunningPublicNode] = useAtom(isRunningPublicNodeAtom);
+
   const [anchorEl, setAnchorEl] = useState(null);
 
   // Handle child element click to open Popover