Merge pull request #36 from Qortal/feature/optimizations

Feature/optimizations

src/App.tsx

@@ -104,9 +104,11 @@ import {
   groupsPropertiesAtom,
   hasSettingsChangedAtom,
   isDisabledEditorEnterAtom,
+  isRunningPublicNodeAtom,
   isUsingImportExportSettingsAtom,
   lastPaymentSeenTimestampAtom,
   mailsAtom,
+  memberGroupsAtom,
   mutedGroupsAtom,
   oldPinnedAppsAtom,
   qMailLastEnteredTimestampAtom,
@@ -114,6 +116,7 @@ import {
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
   timestampEnterDataAtom,
+  txListAtom,
 } from './atoms/global';
 import { NotAuthenticated } from './ExtStates/NotAuthenticated';
 import { handleGetFileFromIndexedDB } from './utils/indexedDB';
@@ -161,10 +164,6 @@ type extStates =
   | 'group';
 
 interface MyContextInterface {
-  txList: any[];
-  memberGroups: any[];
-  setTxList: (val) => void;
-  setMemberGroups: (val) => void;
   isShow: boolean;
   onCancel: () => void;
   onOk: () => void;
@@ -173,10 +172,6 @@ interface MyContextInterface {
 }
 
 const defaultValues: MyContextInterface = {
-  txList: [],
-  memberGroups: [],
-  setTxList: () => {},
-  setMemberGroups: () => {},
   isShow: false,
   onCancel: () => {},
   onOk: () => {},
@@ -245,9 +240,6 @@ const defaultValuesGlobal = {
 
 export const MyContext = createContext<MyContextInterface>(defaultValues);
 
-export const GlobalContext =
-  createContext<MyContextInterface>(defaultValuesGlobal);
-
 export let globalApiKey: string | null = null;
 
 export const getBaseApiReact = (customApi?: string) => {
@@ -327,15 +319,13 @@ function App() {
     useState<string>('');
   const [walletToBeDecryptedError, setWalletToBeDecryptedError] =
     useState<string>('');
-  const [txList, setTxList] = useState([]);
-  const [memberGroups, setMemberGroups] = useState([]);
   const [isFocused, setIsFocused] = useState(true);
   const [hasSettingsChanged, setHasSettingsChanged] = useAtom(
     hasSettingsChangedAtom
   );
 
   const balanceSetIntervalRef = useRef(null);
-  const { downloadResource } = useFetchResources();
+  const downloadResource = useFetchResources();
   const holdRefExtState = useRef<extStates>('not-authenticated');
   const isFocusedRef = useRef<boolean>(true);
   const {
@@ -375,8 +365,7 @@ function App() {
     isShow: isShowQortalRequestExtension,
     message: messageQortalRequestExtension,
   } = useModal();
-
-  const [isRunningPublicNode, setIsRunningPublicNode] = useState(false);
+  const setIsRunningPublicNode = useSetAtom(isRunningPublicNodeAtom);
 
   const [infoSnack, setInfoSnack] = useState(null);
   const [openSnack, setOpenSnack] = useState(false);
@@ -386,7 +375,6 @@ function App() {
   const [apiKey, setApiKey] = useState('');
   const [isOpenSendQort, setIsOpenSendQort] = useState(false);
   const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false);
-  const [rootHeight, setRootHeight] = useState('100%');
   const {
     isUserBlocked,
     addToBlockList,
@@ -402,7 +390,7 @@ function App() {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [showSeed, setShowSeed] = useState(false);
   const [creationStep, setCreationStep] = useState(1);
-  const { getIndividualUserInfo } = useHandleUserInfo();
+  const getIndividualUserInfo = useHandleUserInfo();
   const qortalRequestCheckbox1Ref = useRef(null);
   useRetrieveDataLocalStorage(userInfo?.address);
   useQortalGetSaveSettings(userInfo?.name, extState === 'authenticated');
@@ -482,6 +470,8 @@ function App() {
   const resetMutedGroupsAtom = useResetAtom(mutedGroupsAtom);
   const resetGroupChatTimestampsAtom = useResetAtom(groupChatTimestampsAtom);
   const resetTimestampEnterAtom = useResetAtom(timestampEnterDataAtom);
+  const resettxListAtomAtom = useResetAtom(txListAtom);
+  const resetmemberGroupsAtomAtom = useResetAtom(memberGroupsAtom);
 
   const resetAllRecoil = () => {
     resetAtomSortablePinnedAppsAtom();
@@ -499,8 +489,59 @@ function App() {
     resetMutedGroupsAtom();
     resetGroupChatTimestampsAtom();
     resetTimestampEnterAtom();
+    resettxListAtomAtom();
+    resetmemberGroupsAtomAtom();
   };
 
+  const contextValue = useMemo(
+    () => ({
+      isShow,
+      onCancel,
+      onOk,
+      show,
+      userInfo,
+      message,
+      showInfo,
+      openSnackGlobal: openSnack,
+      setOpenSnackGlobal: setOpenSnack,
+      infoSnackCustom: infoSnack,
+      setInfoSnackCustom: setInfoSnack,
+      downloadResource,
+      getIndividualUserInfo,
+      isUserBlocked,
+      addToBlockList,
+      removeBlockFromList,
+      getAllBlockedUsers,
+      showTutorial,
+      openTutorialModal,
+      setOpenTutorialModal,
+      hasSeenGettingStarted,
+    }),
+    [
+      isShow,
+      onCancel,
+      onOk,
+      show,
+      userInfo,
+      message,
+      showInfo,
+      openSnack,
+      setOpenSnack,
+      infoSnack,
+      setInfoSnack,
+      downloadResource,
+      getIndividualUserInfo,
+      isUserBlocked,
+      addToBlockList,
+      removeBlockFromList,
+      getAllBlockedUsers,
+      showTutorial,
+      openTutorialModal,
+      setOpenTutorialModal,
+      hasSeenGettingStarted,
+    ]
+  );
+
   const handleSetGlobalApikey = (key) => {
     globalApiKey = key;
   };
@@ -985,7 +1026,7 @@ function App() {
     }
   };
 
-  const logoutFunc = async () => {
+  const logoutFunc = useCallback(async () => {
     try {
       if (hasSettingsChanged) {
         await showUnsavedChanges({
@@ -1014,7 +1055,7 @@ function App() {
     } catch (error) {
       console.log(error);
     }
-  };
+  }, [hasSettingsChanged, extState]);
 
   const returnToMain = () => {
     setPaymentTo('');
@@ -1059,8 +1100,6 @@ function App() {
     setWalletToBeDownloadedError('');
     setSendqortState(null);
     setHasLocalNode(false);
-    setTxList([]);
-    setMemberGroups([]);
     resetAllRecoil();
     if (balanceSetIntervalRef?.current) {
       clearInterval(balanceSetIntervalRef?.current);
@@ -1758,36 +1797,10 @@ function App() {
             }}
           >
             {extState === 'authenticated' && isMainWindow && (
-              <MyContext.Provider
-                value={{
-                  txList,
-                  setTxList,
-                  memberGroups,
-                  setMemberGroups,
-                  isShow,
-                  onCancel,
-                  onOk,
-                  show,
-                  userInfo,
-                  message,
-                  rootHeight,
-                  showInfo,
-                  openSnackGlobal: openSnack,
-                  setOpenSnackGlobal: setOpenSnack,
-                  infoSnackCustom: infoSnack,
-                  setInfoSnackCustom: setInfoSnack,
-                  downloadResource,
-                  getIndividualUserInfo,
-                  isUserBlocked,
-                  addToBlockList,
-                  removeBlockFromList,
-                  getAllBlockedUsers,
-                  isRunningPublicNode,
-                }}
-              >
+              <>
                 <TaskManager getUserInfo={getUserInfo} />
-                <GlobalActions memberGroups={memberGroups} />
-              </MyContext.Provider>
+                <GlobalActions />
+              </>
             )}
 
             <Spacer height="20px" />
@@ -1955,15 +1968,7 @@ function App() {
       }}
     >
       <PdfViewer />
-      <GlobalContext.Provider
-        value={{
-          showTutorial,
-          openTutorialModal,
-          setOpenTutorialModal,
-          downloadResource,
-          hasSeenGettingStarted,
-        }}
-      >
+      <MyContext.Provider value={contextValue}>
         <Tutorials />
         {extState === 'not-authenticated' && (
           <NotAuthenticated
@@ -1984,56 +1989,28 @@ function App() {
         <button onClick={logoutFunc}>logout</button>
       )} */}
         {extState === 'authenticated' && isMainWindow && (
-          <MyContext.Provider
-            value={{
-              txList,
-              setTxList,
-              memberGroups,
-              setMemberGroups,
-              isShow,
-              onCancel,
-              onOk,
-              show,
-              userInfo,
-              message,
-              rootHeight,
-              showInfo,
-              openSnackGlobal: openSnack,
-              setOpenSnackGlobal: setOpenSnack,
-              infoSnackCustom: infoSnack,
-              setInfoSnackCustom: setInfoSnack,
-              downloadResource,
-              getIndividualUserInfo,
-              isUserBlocked,
-              addToBlockList,
-              removeBlockFromList,
-              getAllBlockedUsers,
-              isRunningPublicNode,
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              height: '100vh',
+              width: '100vw',
             }}
           >
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                height: '100vh',
-                width: '100vw',
-              }}
-            >
-              <Group
-                balance={balance}
-                desktopViewMode={desktopViewMode}
-                isFocused={isFocused}
-                isMain={isMain}
-                isOpenDrawerProfile={isOpenDrawerProfile}
-                logoutFunc={logoutFunc}
-                myAddress={address}
-                setDesktopViewMode={setDesktopViewMode}
-                setIsOpenDrawerProfile={setIsOpenDrawerProfile}
-                userInfo={userInfo}
-              />
-              {renderProfile()}
-            </Box>
-          </MyContext.Provider>
+            <Group
+              balance={balance}
+              desktopViewMode={desktopViewMode}
+              isFocused={isFocused}
+              isMain={isMain}
+              isOpenDrawerProfile={isOpenDrawerProfile}
+              logoutFunc={logoutFunc}
+              myAddress={address}
+              setDesktopViewMode={setDesktopViewMode}
+              setIsOpenDrawerProfile={setIsOpenDrawerProfile}
+              userInfo={userInfo}
+            />
+            {renderProfile()}
+          </Box>
         )}
         {isOpenSendQort && isMainWindow && (
           <Box
@@ -2063,6 +2040,7 @@ function App() {
                 style={{
                   cursor: 'pointer',
                   height: '24px',
+                  width: 'auto',
                 }}
                 onClick={returnToMain}
               />
@@ -2560,6 +2538,7 @@ function App() {
                 style={{
                   cursor: 'pointer',
                   height: '24px',
+                  width: 'auto',
                 }}
                 onClick={() => {
                   setRawWallet(null);
@@ -2593,6 +2572,7 @@ function App() {
                 style={{
                   cursor: 'pointer',
                   height: '24px',
+                  width: 'auto',
                 }}
                 onClick={() => {
                   setRawWallet(null);
@@ -2722,6 +2702,7 @@ function App() {
                     style={{
                       cursor: 'pointer',
                       height: '24px',
+                      width: 'auto',
                     }}
                     onClick={() => {
                       if (creationStep === 2) {
@@ -3604,13 +3585,12 @@ function App() {
         <RegisterName
           balance={balance}
           show={show}
-          setTxList={setTxList}
           userInfo={userInfo}
           setOpenSnack={setOpenSnack}
           setInfoSnack={setInfoSnack}
         />
         <BuyQortInformation balance={balance} />
-      </GlobalContext.Provider>
+      </MyContext.Provider>
       {extState === 'create-wallet' && walletToBeDownloaded && (
         <ButtonBase
           onClick={() => {
@@ -3632,11 +3612,8 @@ function App() {
       {isOpenMinting && (
         <Minting
           setIsOpenMinting={setIsOpenMinting}
-          groups={memberGroups}
           myAddress={address}
           show={show}
-          setTxList={setTxList}
-          txList={txList}
         />
       )}
 

src/ExtStates/NotAuthenticated.tsx

@@ -27,11 +27,11 @@ import Logo1Dark from '../assets/svgs/Logo1Dark.svg';
 import HelpIcon from '@mui/icons-material/Help';
 import { CustomizedSnackbars } from '../components/Snackbar/Snackbar';
 import { cleanUrl, gateways } from '../background';
-import { GlobalContext } from '../App';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 import ThemeSelector from '../components/Theme/ThemeSelector';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../components/Language/LanguageSelector';
+import { MyContext } from '../App';
 
 const manifestData = {
   version: '0.5.3',
@@ -85,7 +85,7 @@ export const NotAuthenticated = ({
   const [enteredApiKey, setEnteredApiKey] = useState('');
   const [customNodeToSaveIndex, setCustomNodeToSaveIndex] =
     React.useState(null);
-  const { showTutorial, hasSeenGettingStarted } = useContext(GlobalContext);
+  const { showTutorial, hasSeenGettingStarted } = useContext(MyContext);
   const theme = useTheme();
   const { t } = useTranslation(['auth', 'core']);
 

src/Wallets.tsx

@@ -31,7 +31,7 @@ import { crypto } from './constants/decryptWallet';
 import { LoadingButton } from '@mui/lab';
 import { PasswordField } from './components';
 import { HtmlTooltip } from './ExtStates/NotAuthenticated';
-import { GlobalContext } from './App';
+import { MyContext } from './App';
 
 const parsefilenameQortal = (filename) => {
   return filename.startsWith('qortal_backup_') ? filename.slice(14) : filename;
@@ -43,7 +43,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
   const [seedValue, setSeedValue] = useState('');
   const [seedName, setSeedName] = useState('');
   const [seedError, setSeedError] = useState('');
-  const { hasSeenGettingStarted } = useContext(GlobalContext);
+  const { hasSeenGettingStarted } = useContext(MyContext);
 
   const [password, setPassword] = useState('');
   const [isOpenSeedModal, setIsOpenSeedModal] = useState(false);

src/assets/Icons/Return.tsx

@@ -8,9 +8,9 @@ export const Return: React.FC<SVGProps> = ({ color, opacity, ...children }) => {
 
   return (
     <svg
-      {...children}
       width="20"
       height="16"
+      {...children}
       viewBox="0 0 20 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/atoms/global.ts

@@ -46,6 +46,10 @@ export const mutedGroupsAtom = atomWithReset([]);
 export const groupChatTimestampsAtom = atomWithReset({});
 export const timestampEnterDataAtom = atomWithReset({});
 
+export const txListAtom = atomWithReset([]);
+export const memberGroupsAtom = atomWithReset([]);
+export const isRunningPublicNodeAtom = atomWithReset(false);
+
 // Atom Families (replacing selectorFamily)
 export const resourceKeySelector = atomFamily((key) =>
   atom((get) => get(resourceDownloadControllerAtom)[key] || null)

src/background.ts

@@ -1742,7 +1742,7 @@ export async function decryptSingleFunc({
       const responseData = uint8ArrayToObject(decryptToUnit8Array);
       holdMessages.push({ ...message, decryptedData: responseData });
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
   return holdMessages;
@@ -1766,7 +1766,7 @@ export async function decryptSingleForPublishes({
       const responseData = uint8ArrayToObject(decryptToUnit8Array);
       holdMessages.push({ ...message, decryptedData: responseData });
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
   return holdMessages;
@@ -1795,7 +1795,7 @@ export async function decryptDirectFunc({ messages, involvingAddress }) {
       const parsedMessage = JSON.parse(decodedMessage);
       holdMessages.push({ ...message, ...parsedMessage });
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
   return holdMessages;

src/common/useFetchResources.tsx

@@ -163,5 +163,5 @@ export const useFetchResources = () => {
     [setResources]
   );
 
-  return { downloadResource };
+  return downloadResource;
 };

src/common/useModal.tsx

@@ -1,64 +1,50 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 
 interface State {
-    isShow: boolean;
+  isShow: boolean;
 }
+
 export const useModal = () => {
-    const [state, setState] = useState<State>({
-        isShow: false,
+  const [state, setState] = useState<State>({ isShow: false });
+  const [message, setMessage] = useState({ publishFee: '', message: '' });
+  const promiseConfig = useRef<any>(null);
+
+  const show = useCallback((data) => {
+    setMessage(data);
+    return new Promise((resolve, reject) => {
+      promiseConfig.current = { resolve, reject };
+      setState({ isShow: true });
     });
-    const [message, setMessage] = useState({
-        publishFee: "",
-        message: ""
-    });
-    const promiseConfig = useRef<any>(null);
-    const show = async (data) => {
-        setMessage(data)
-        return new Promise((resolve, reject) => {
-            promiseConfig.current = {
-                resolve,
-                reject,
-            };
-            setState({
-                isShow: true,
-            });
-        });
-    };
+  }, []);
 
-    const hide = () => {
-        setState({
-            isShow: false,
-        });
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-    };
+  const hide = useCallback(() => {
+    setState({ isShow: false });
+    setMessage({ publishFee: '', message: '' });
+  }, []);
 
-    const onOk = (payload:any) => {
-        const { resolve } = promiseConfig.current;
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-        hide();
-        resolve(payload);
-    };
+  const onOk = useCallback(
+    (payload: any) => {
+      const { resolve } = promiseConfig.current || {};
+      hide();
+      resolve?.(payload);
+    },
+    [hide]
+  );
 
-    const onCancel = () => {
-        const { reject } = promiseConfig.current;
-        hide();
-        reject();
-        setMessage({
-            publishFee: "",
-        message: ""
-        })
-    };
-    return {
-        show,
-        onOk,
-        onCancel,
-        isShow: state.isShow,
-        message
-    };
-};
+  const onCancel = useCallback(() => {
+    const { reject } = promiseConfig.current || {};
+    hide();
+    reject?.();
+  }, [hide]);
+
+  return useMemo(
+    () => ({
+      show,
+      onOk,
+      onCancel,
+      isShow: state.isShow,
+      message,
+    }),
+    [show, onOk, onCancel, state.isShow, message]
+  );
+};

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/Auth/DownloadWallet.tsx

@@ -121,6 +121,7 @@ export const DownloadWallet = ({
           style={{
             cursor: 'pointer',
             height: '24px',
+            width: 'auto',
           }}
           onClick={returnToMain}
         />

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

src/utils/mobile/mobileUtils.ts

@@ -1,5 +0,0 @@
-
-export const getRootHeight = ()=> {
-
-    return document?.getElementById('root')?.style?.height || '100%'
-}