fix re-rendering cycles clash

src/components/BottomMenuModal/AccountModal.tsx

@@ -9,6 +9,7 @@ import {
   useWalletAddress,
 } from '@etherspot/transaction-kit';
 import { useLogout } from '@privy-io/react-auth';
+import Tippy from '@tippyjs/react';
 import Avatar from 'boring-avatars';
 import { BigNumber, ethers } from 'ethers';
 import {
@@ -20,13 +21,12 @@ import {
   Hierarchy as IconHierarchy,
   Logout as LogoutIcon,
 } from 'iconsax-react';
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 import { Chain } from 'viem';
-import Tippy from '@tippyjs/react';
 
 // components
 import FormTabSelect from '../Form/FormTabSelect';
@@ -50,17 +50,11 @@ import useAssets from '../../hooks/useAssets';
 // services
 import { clearDappStorage } from '../../services/dappLocalStorage';
 
-// context
-import { AccountBalancesContext } from '../../providers/AccountBalancesProvider';
-import { AccountNftsContext } from '../../providers/AccountNftsProvider';
-
 interface AccountModalProps {
   isContentVisible?: boolean; // for animation purpose to not render rest of content and return main wrapper only
 }
 
 const AccountModal = ({ isContentVisible }: AccountModalProps) => {
-  const contextNfts = useContext(AccountNftsContext);
-  const contextBalances = useContext(AccountBalancesContext);
   const accountAddress = useWalletAddress();
   const navigate = useNavigate();
   const { logout } = useLogout();
@@ -124,17 +118,6 @@ const AccountModal = ({ isContentVisible }: AccountModalProps) => {
     }, []);
   }, [accountAddress, nfts]);
 
-  useEffect(() => {
-    if (!isContentVisible) {
-      contextNfts?.data.setUpdateData(false);
-      contextBalances?.data.setUpdateData(false);
-    }
-    if (isContentVisible) {
-      contextNfts?.data.setUpdateData(true);
-      contextBalances?.data.setUpdateData(true);
-    }
-  }, [isContentVisible, contextNfts?.data, contextBalances?.data]);
-
   const onCopyAddressClick = useCallback(() => {
     if (copied) {
       setCopied(false);

src/components/BottomMenuModal/SendModal/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { Blend2 as IconBlend, Layer as IconLayers } from 'iconsax-react';
-import React, { useContext, useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -16,30 +16,19 @@ import { SendModalData } from '../../../types';
 // hooks
 import useBottomMenuModal from '../../../hooks/useBottomMenuModal';
 import useGlobalTransactionsBatch from '../../../hooks/useGlobalTransactionsBatch';
-import { AccountBalancesContext } from '../../../providers/AccountBalancesProvider';
 
 interface SendModalProps extends React.PropsWithChildren {
   isContentVisible?: boolean; // for animation purpose to not render rest of content and return main wrapper only
   payload?: SendModalData;
 }
 
 const SendModal = ({ isContentVisible, payload }: SendModalProps) => {
-  const contextBalances = useContext(AccountBalancesContext);
   const wrapperRef = React.useRef(null);
   const { showBatchSendModal, setShowBatchSendModal } = useBottomMenuModal();
   const [t] = useTranslation();
   const { transactions: globalTransactionsBatch } =
     useGlobalTransactionsBatch();
 
-  useEffect(() => {
-    if (!isContentVisible) {
-      contextBalances?.data.setUpdateData(false);
-    }
-    if (isContentVisible) {
-      contextBalances?.data.setUpdateData(true);
-    }
-  }, [isContentVisible, contextBalances?.data]);
-
   if (!isContentVisible) {
     return <Wrapper />;
   }

src/components/BottomMenuModal/index.tsx

@@ -1,8 +1,12 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Transition } from 'react-transition-group';
 import styled from 'styled-components';
 
+// context
+import { AccountBalancesContext } from '../../providers/AccountBalancesProvider';
+import { AccountNftsContext } from '../../providers/AccountNftsProvider';
+
 // modals
 import AccountModal from './AccountModal';
 import AppsModal from './AppsModal';
@@ -14,6 +18,8 @@ import useBottomMenuModal from '../../hooks/useBottomMenuModal';
 
 const BottomMenuModal = () => {
   const modalRef = React.useRef<HTMLDivElement>(null);
+  const contextNfts = useContext(AccountNftsContext);
+  const contextBalances = useContext(AccountBalancesContext);
   const { active, activeIndex, hide } = useBottomMenuModal();
 
   const lastValidActiveIndex = React.useRef<number>(activeIndex ?? 0);
@@ -23,6 +29,13 @@ const BottomMenuModal = () => {
     lastValidActiveIndex.current = activeIndex ?? 0;
   }, [activeIndex]);
 
+  useEffect(() => {
+    if (activeIndex === 0 || activeIndex === 2) {
+      contextNfts?.data.setUpdateData(true);
+      contextBalances?.data.setUpdateData(true);
+    }
+  }, [contextNfts?.data, contextBalances?.data, activeIndex]);
+
   return (
     <Transition nodeRef={modalRef} in={!!active} timeout={100}>
       {(overlayState) => (