Fixed the infinte render issue

push-protocol · Feb 20, 2024 · 191b9ab · 191b9ab
1 parent fb6074b
commit 191b9ab
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 21 deletions.
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -75,11 +75,10 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
               spacing="1px"
               width="max-content"
             >
-              <DesktopAddress>{dropdownValue?.title} <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2></DesktopAddress> 
+              <DesktopAddress>{dropdownValue?.title}</DesktopAddress> 
 
               <MobileAddress>
                 {shortenText(dropdownValue?.title,3)} 
-                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2>
               </MobileAddress>
             </Span>
             {dropdownValue?.invertedIcon && (

diff --git a/src/components/ProfileModal.tsx b/src/components/ProfileModal.tsx
@@ -45,7 +45,6 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues })=>{
             >
               <MobileAddress>
                 {shortenText(dropdownValue?.title,3)}
-                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode}</SpanV2>
               </MobileAddress>
             </Span>
            {dropdownValue?.invertedIcon && <Image

diff --git a/src/hooks/useAccount.tsx b/src/hooks/useAccount.tsx
@@ -32,11 +32,10 @@ export const useAccount = () => {
 
   const account = useMemo(() => {
     if(wallet && wallet.accounts.length > 0) {
-      setReadOnlyWallet(undefined);
-      setMode(undefined);
       return ethers.utils.getAddress(wallet.accounts[0].address);
+    }else{
+      return readOnlyWallet;
     }
-    return readOnlyWallet;
   }, [wallet, readOnlyWallet]);
 
   const chainId = useMemo(() => {
@@ -54,7 +53,7 @@ export const useAccount = () => {
     setWalletModules,
     setPrimaryWallet,
     provider,
-    account : account ? account : readOnlyWallet,
+    account : account,
     chainId,
     isActive,
     setChain,

diff --git a/src/modules/chat/ChatModule.tsx b/src/modules/chat/ChatModule.tsx
@@ -44,6 +44,7 @@ import { checkIfIntent, getUpdatedChatAndIntent, getUpdatedGroupInfo } from 'hel
 import { ChatUIProvider, darkChatTheme } from '@pushprotocol/uiweb';
 import { appConfig } from 'config';
 import GLOBALS, { device, globalsMargin } from 'config/Globals';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 export const ToastPosition: ToastOptions = {
   position: 'top-right',
@@ -59,7 +60,7 @@ export const Context = React.createContext<ChatUserAppContext | null>(null);
 
 // Create Header
 function Chat({ chatid }) {
-  const { account, chainId, provider } = useAccount();
+  const { account, chainId, provider,wallet } = useAccount();
   const { videoCallData } = useContext(VideoCallContext);
 
   const {
@@ -93,6 +94,7 @@ function Chat({ chatid }) {
   const [userShouldBeSearched, setUserShouldBeSearched] = useState<boolean>(false);
   const [filteredUserData, setFilteredUserData] = useState<User[]>([]);
   const [signerData, setSignerData] = useState();
+  const { readOnlyWallet } = React.useContext(GlobalContext);
 
   const isMobile = useDeviceWidthCheck(600);
   const queryClient = new QueryClient({});
@@ -393,7 +395,7 @@ function Chat({ chatid }) {
         theme={theme.scheme === 'dark' && darkChatTheme}
         // signer={signerData}
         env={appConfig?.appEnv}
-        account={account}
+        account={wallet?.accounts?.length > 0 ? account: readOnlyWallet}
         pgpPrivateKey={pgpPvtKey}
         user={userPushSDKInstance}
       >

diff --git a/src/primaries/Profile.tsx b/src/primaries/Profile.tsx
@@ -74,13 +74,9 @@ const Profile = ({ isDarkMode }) => {
       id: 'disconnect',
       value: '',
       function: async () => {
-        if (readOnlyWallet) {
-          setReadOnlyWallet('0x0000000000000000000000000000000000000000');
-        } else {
-          await disconnect(wallet);
-          setMode(ReadOnlyWalletMode.GUEST_MODE);
-          setReadOnlyWallet('0x0000000000000000000000000000000000000000');
-        }
+        await disconnect(wallet);
+        setMode(ReadOnlyWalletMode.GUEST_MODE);
+        setReadOnlyWallet('0x0000000000000000000000000000000000000000');
       },
       title: 'Logout',
       invertedIcon: './logout.svg',
@@ -103,7 +99,7 @@ const Profile = ({ isDarkMode }) => {
       {account && account != '' && !authError ? (
         <Body>
 
-          {mode === ReadOnlyWalletMode.GUEST_MODE ? (
+          {!(wallet?.accounts?.length > 0) ? (
             <Wallet
               bg="linear-gradient(87.17deg, #B6A0F5 0%, #F46EF7 57.29%, #FF95D5 100%)"
               color='#FFF'
@@ -132,7 +128,7 @@ const Profile = ({ isDarkMode }) => {
                 ) : (
                   <>{shortenText(account, 5)}</>
                 )}
-                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{mode ? mode : userPushSDKInstance?.readMode && ReadOnlyWalletMode.READ_ONLY_MODE}</SpanV2>
+                <SpanV2 fontWeight='600' margin='0 0 0 2px'>{!(wallet?.accounts?.length > 0) ? ReadOnlyWalletMode.GUEST_MODE : userPushSDKInstance?.readMode && ReadOnlyWalletMode.READ_ONLY_MODE}</SpanV2>
                 <ToggleArrowImg filter={isDarkMode ? theme.snackbarBorderIcon : 'brightness(0) invert(1)'}>
                   <img
                     alt="arrow"

diff --git a/src/sections/chat/ChatSidebarSection.tsx b/src/sections/chat/ChatSidebarSection.tsx
@@ -30,6 +30,7 @@ import NewTag from 'components/NewTag';
 import GLOBALS from 'config/Globals';
 import { appConfig } from '../../config';
 import { useAccount } from 'hooks';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 
 const createGroupOnMouseEnter = [
@@ -67,6 +68,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
   const theme = useTheme();
 
   const { setSelectedChatId } = useContext(Context);
+  const { setMode } = useContext(GlobalContext);
 
   const isNewTagVisible = getIsNewTagVisible(new Date('2023-02-22T00:00:00.000'), 90);
 

diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx
@@ -252,9 +252,9 @@ function Header({ isDarkMode, darkModeToggle }) {
         )}
 
         <ItemH justify="flex-end" flex="initial">
-          {!!error && <PrimaryTheme>{getErrorMessage(error)}</PrimaryTheme>}
+          {/* {!!error && <PrimaryTheme>{getErrorMessage(error)}</PrimaryTheme>} */}
           {/* {!isActive && !error && <ThirdTheme>Please connect to a Web3 Network</ThirdTheme>} */}
-          {!!error && <ThirdTheme>Please connect to a Web3 Network</ThirdTheme>}
+          {/* {!!error && <ThirdTheme>Please connect to a Web3 Network</ThirdTheme>} */}
           {/* {isActive && !showLoginControls && !error && (
             <RightBarDesktop justify="flex-end" flex="initial">
               <ChainIndicator isDarkMode={isDarkMode} />
@@ -264,7 +264,7 @@ function Header({ isDarkMode, darkModeToggle }) {
 
           <RightBarDesktop justify="flex-end" flex="initial">
             {/* //TODO: The chain Indicator should be removed in guest mode */}
-            {mode !== ReadOnlyWalletMode.GUEST_MODE && <ChainIndicator isDarkMode={isDarkMode} />}
+            {wallet?.accounts?.length > 0 && <ChainIndicator isDarkMode={isDarkMode} />}
             <Profile isDarkMode={isDarkMode} />
           </RightBarDesktop>
         </ItemH>