From f591d523e94f14c5430b018183a8ab1cb41430df Mon Sep 17 00:00:00 2001 From: PhilReact Date: Tue, 29 Apr 2025 22:44:45 +0300 Subject: [PATCH 1/2] fix styling --- src/App.tsx | 4 ++++ src/assets/Icons/Return.tsx | 2 +- src/components/Auth/DownloadWallet.tsx | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 74f5dee..6c55ff4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2063,6 +2063,7 @@ function App() { style={{ cursor: 'pointer', height: '24px', + width: 'auto', }} onClick={returnToMain} /> @@ -2560,6 +2561,7 @@ function App() { style={{ cursor: 'pointer', height: '24px', + width: 'auto', }} onClick={() => { setRawWallet(null); @@ -2593,6 +2595,7 @@ function App() { style={{ cursor: 'pointer', height: '24px', + width: 'auto', }} onClick={() => { setRawWallet(null); @@ -2722,6 +2725,7 @@ function App() { style={{ cursor: 'pointer', height: '24px', + width: 'auto', }} onClick={() => { if (creationStep === 2) { 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 ( From 2604f52aa136e7444dbae37cbfa3f1088b92908e Mon Sep 17 00:00:00 2001 From: PhilReact Date: Wed, 30 Apr 2025 03:04:21 +0300 Subject: [PATCH 2/2] optimize global states --- src/App.tsx | 199 ++++++++---------- src/ExtStates/NotAuthenticated.tsx | 4 +- src/Wallets.tsx | 4 +- src/atoms/global.ts | 4 + src/background.ts | 6 +- src/common/useFetchResources.tsx | 2 +- src/common/useModal.tsx | 98 ++++----- src/components/Apps/AppViewer.tsx | 5 +- src/components/Apps/AppViewerContainer.tsx | 2 - src/components/Apps/AppsCategoryDesktop.tsx | 4 +- src/components/Apps/AppsDesktop.tsx | 4 +- src/components/Apps/AppsPrivate.tsx | 5 +- src/components/Chat/AdminSpace.tsx | 1 - src/components/Chat/AdminSpaceInner.tsx | 2 +- src/components/Chat/CreateCommonSecret.tsx | 5 +- src/components/Chat/GroupAnnouncements.tsx | 2 +- src/components/Chat/GroupForum.tsx | 4 +- src/components/Embeds/VideoPlayer.tsx | 4 +- .../GlobalActions/GlobalActions.tsx | 12 +- src/components/GlobalActions/JoinGroup.tsx | 8 +- src/components/Group/AddGroup.tsx | 6 +- src/components/Group/AddGroupList.tsx | 8 +- src/components/Group/Group.tsx | 10 +- src/components/Group/GroupJoinRequests.tsx | 9 +- src/components/Group/GroupList.tsx | 6 +- .../Group/ListOfGroupPromotions.tsx | 7 +- src/components/Group/ListOfJoinRequests.tsx | 8 +- src/components/Group/ManageMembers.tsx | 5 +- src/components/Group/UserListOfInvites.tsx | 6 +- src/components/Group/useBlockUsers.tsx | 17 +- src/components/Group/useHandleUserInfo.tsx | 4 +- src/components/Minting/Minting.tsx | 14 +- src/components/RegisterName.tsx | 5 +- src/components/TaskManager/TaskManager.tsx | 11 +- src/components/Tutorials/Tutorials.tsx | 4 +- .../Tutorials/useHandleTutorials.tsx | 25 ++- src/components/WrapperUserAction.tsx | 5 +- src/utils/mobile/mobileUtils.ts | 5 - 38 files changed, 263 insertions(+), 267 deletions(-) delete mode 100644 src/utils/mobile/mobileUtils.ts diff --git a/src/App.tsx b/src/App.tsx index 6c55ff4..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 && ( - + {extState === 'create-wallet' && walletToBeDownloaded && ( { @@ -3636,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/atoms/global.ts b/src/atoms/global.ts index 8f4c6d5..e0b4156 100644 --- a/src/atoms/global.ts +++ b/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) 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 ( { if (category?.id === 'all') return availableQapps; diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index 13bbf7d..b5a5cba 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/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(() => { diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx index 78db4ad..86ec6d3 100644 --- a/src/components/Apps/AppsPrivate.tsx +++ b/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(() => { diff --git a/src/components/Chat/AdminSpace.tsx b/src/components/Chat/AdminSpace.tsx index a57b6e4..49109aa 100644 --- a/src/components/Chat/AdminSpace.tsx +++ b/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) { diff --git a/src/components/Chat/AdminSpaceInner.tsx b/src/components/Chat/AdminSpaceInner.tsx index de68ed6..9a1cffd 100644 --- a/src/components/Chat/AdminSpaceInner.tsx +++ b/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 () => { diff --git a/src/components/Chat/CreateCommonSecret.tsx b/src/components/Chat/CreateCommonSecret.tsx index 6c4fcfa..9cf3b79 100644 --- a/src/components/Chat/CreateCommonSecret.tsx +++ b/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); diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx index a597e21..9ac3ded 100644 --- a/src/components/Chat/GroupAnnouncements.tsx +++ b/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); diff --git a/src/components/Chat/GroupForum.tsx b/src/components/Chat/GroupForum.tsx index 78dd02a..551a2db 100644 --- a/src/components/Chat/GroupForum.tsx +++ b/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(() => { diff --git a/src/components/Embeds/VideoPlayer.tsx b/src/components/Embeds/VideoPlayer.tsx index 26e3e08..30991ff 100644 --- a/src/components/Embeds/VideoPlayer.tsx +++ b/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 = ({ const download = useAtomValue(resourceKeySelector(keyIdentifier)); - const { downloadResource } = useContext(GlobalContext); + const { downloadResource } = useContext(MyContext); const videoRef = useRef(null); const [playing, setPlaying] = useState(false); diff --git a/src/components/GlobalActions/GlobalActions.tsx b/src/components/GlobalActions/GlobalActions.tsx index 6dd845c..e181df4 100644 --- a/src/components/GlobalActions/GlobalActions.tsx +++ b/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 ( <> - + - ) -} + ); +}; diff --git a/src/components/GlobalActions/JoinGroup.tsx b/src/components/GlobalActions/JoinGroup.tsx index 58ff5ed..6503de4 100644 --- a/src/components/GlobalActions/JoinGroup.tsx +++ b/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); diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx index 278d6a7..9628c55 100644 --- a/src/components/Group/AddGroup.tsx +++ b/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(''); diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx index 3030c55..971f6e0 100644 --- a/src/components/Group/AddGroupList.tsx +++ b/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 diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index e16404a..2f2a314 100644 --- a/src/components/Group/Group.tsx +++ b/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); 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} /> diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx index 32252da..15304f5 100644 --- a/src/components/Group/GroupJoinRequests.tsx +++ b/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(); diff --git a/src/components/Group/GroupList.tsx b/src/components/Group/GroupList.tsx index 47f464c..1057281 100644 --- a/src/components/Group/GroupList.tsx +++ b/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 (
{ 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