diff --git a/src/App.tsx b/src/App.tsx index 74f5dee..558cd01 100644 --- a/src/App.tsx +++ b/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(defaultValues); -export const GlobalContext = - createContext(defaultValuesGlobal); - export let globalApiKey: string | null = null; export const getBaseApiReact = (customApi?: string) => { @@ -327,15 +319,13 @@ function App() { useState(''); const [walletToBeDecryptedError, setWalletToBeDecryptedError] = useState(''); - 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('not-authenticated'); const isFocusedRef = useRef(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 && ( - + <> - - + + )} @@ -1955,15 +1968,7 @@ function App() { }} > - + {extState === 'not-authenticated' && ( logout )} */} {extState === 'authenticated' && isMainWindow && ( - - - - {renderProfile()} - - + + {renderProfile()} + )} {isOpenSendQort && isMainWindow && ( @@ -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() { - + {extState === 'create-wallet' && walletToBeDownloaded && ( { @@ -3632,11 +3612,8 @@ function App() { {isOpenMinting && ( )} diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index 04f068e..6d580fe 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/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']); diff --git a/src/Wallets.tsx b/src/Wallets.tsx index 1f218da..281e07e 100644 --- a/src/Wallets.tsx +++ b/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); diff --git a/src/assets/Icons/Return.tsx b/src/assets/Icons/Return.tsx index 81a6690..5506a57 100644 --- a/src/assets/Icons/Return.tsx +++ b/src/assets/Icons/Return.tsx @@ -8,9 +8,9 @@ export const Return: React.FC = ({ color, opacity, ...children }) => { return ( atom((get) => get(resourceDownloadControllerAtom)[key] || null) diff --git a/src/background.ts b/src/background.ts index 3811a42..93a5e28 100644 --- a/src/background.ts +++ b/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; diff --git a/src/common/useFetchResources.tsx b/src/common/useFetchResources.tsx index cc2ab41..242f418 100644 --- a/src/common/useFetchResources.tsx +++ b/src/common/useFetchResources.tsx @@ -163,5 +163,5 @@ export const useFetchResources = () => { [setResources] ); - return { downloadResource }; + return downloadResource; }; diff --git a/src/common/useModal.tsx b/src/common/useModal.tsx index b9ab713..e92dc99 100644 --- a/src/common/useModal.tsx +++ b/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({ - isShow: false, + const [state, setState] = useState({ isShow: false }); + const [message, setMessage] = useState({ publishFee: '', message: '' }); + const promiseConfig = useRef(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(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 - }; -}; \ No newline at end of file + 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] + ); +}; diff --git a/src/components/Apps/AppViewer.tsx b/src/components/Apps/AppViewer.tsx index e76467b..06a64c5 100644 --- a/src/components/Apps/AppViewer.tsx +++ b/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 } = diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index 43c661f..b159aa7 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/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 (
{ 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({ diff --git a/src/components/Group/ListOfJoinRequests.tsx b/src/components/Group/ListOfJoinRequests.tsx index d2bd5ad..8c51ee2 100644 --- a/src/components/Group/ListOfJoinRequests.tsx +++ b/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 diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx index eba8de3..6956693 100644 --- a/src/components/Group/ManageMembers.tsx +++ b/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); diff --git a/src/components/Group/UserListOfInvites.tsx b/src/components/Group/UserListOfInvites.tsx index c6bb8d3..a0362be 100644 --- a/src/components/Group/UserListOfInvites.tsx +++ b/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([]); const [isLoading, setIsLoading] = useState(false); const theme = useTheme(); diff --git a/src/components/Group/useBlockUsers.tsx b/src/components/Group/useBlockUsers.tsx index 4165260..e82d0c6 100644 --- a/src/components/Group/useBlockUsers.tsx +++ b/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] + ); }; diff --git a/src/components/Group/useHandleUserInfo.tsx b/src/components/Group/useHandleUserInfo.tsx index da7ee13..8b8796f 100644 --- a/src/components/Group/useHandleUserInfo.tsx +++ b/src/components/Group/useHandleUserInfo.tsx @@ -26,7 +26,5 @@ export const useHandleUserInfo = () => { } }, []); - return { - getIndividualUserInfo, - }; + return getIndividualUserInfo; }; diff --git a/src/components/Minting/Minting.tsx b/src/components/Minting/Minting.tsx index 552d39c..fe05c5b 100644 --- a/src/components/Minting/Minting.tsx +++ b/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(''); diff --git a/src/components/RegisterName.tsx b/src/components/RegisterName.tsx index 4cee6ec..4b52a45 100644 --- a/src/components/RegisterName.tsx +++ b/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); diff --git a/src/components/TaskManager/TaskManager.tsx b/src/components/TaskManager/TaskManager.tsx index 673c385..d49077e 100644 --- a/src/components/TaskManager/TaskManager.tsx +++ b/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(); diff --git a/src/components/Tutorials/Tutorials.tsx b/src/components/Tutorials/Tutorials.tsx index 522324f..f1a5fe5 100644 --- a/src/components/Tutorials/Tutorials.tsx +++ b/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']); diff --git a/src/components/Tutorials/useHandleTutorials.tsx b/src/components/Tutorials/useHandleTutorials.tsx index 5fde392..597199e 100644 --- a/src/components/Tutorials/useHandleTutorials.tsx +++ b/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] + ); }; diff --git a/src/components/WrapperUserAction.tsx b/src/components/WrapperUserAction.tsx index 44d7c12..07b5d45 100644 --- a/src/components/WrapperUserAction.tsx +++ b/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 diff --git a/src/utils/mobile/mobileUtils.ts b/src/utils/mobile/mobileUtils.ts deleted file mode 100644 index 144c8c1..0000000 --- a/src/utils/mobile/mobileUtils.ts +++ /dev/null @@ -1,5 +0,0 @@ - -export const getRootHeight = ()=> { - - return document?.getElementById('root')?.style?.height || '100%' -} \ No newline at end of file