From a31312de9f863187bb318b0dbd8b1664485fb5f4 Mon Sep 17 00:00:00 2001
From: RanaBug <rana.khy@gmail.com>
Date: Thu, 5 Dec 2024 14:52:10 +0000
Subject: [PATCH] fix re-rendering cycles clash

---
 .../BottomMenuModal/AccountModal.tsx          | 21 ++-----------------
 .../BottomMenuModal/SendModal/index.tsx       | 13 +-----------
 src/components/BottomMenuModal/index.tsx      | 15 ++++++++++++-
 3 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/src/components/BottomMenuModal/AccountModal.tsx b/src/components/BottomMenuModal/AccountModal.tsx
index 9e5bb10e..d55147a1 100644
--- a/src/components/BottomMenuModal/AccountModal.tsx
+++ b/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);
diff --git a/src/components/BottomMenuModal/SendModal/index.tsx b/src/components/BottomMenuModal/SendModal/index.tsx
index d874a7be..9773ee51 100644
--- a/src/components/BottomMenuModal/SendModal/index.tsx
+++ b/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,7 +16,6 @@ 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
@@ -24,22 +23,12 @@ interface SendModalProps extends React.PropsWithChildren {
 }
 
 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 />;
   }
diff --git a/src/components/BottomMenuModal/index.tsx b/src/components/BottomMenuModal/index.tsx
index fbb452de..7cd06bc4 100644
--- a/src/components/BottomMenuModal/index.tsx
+++ b/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) => (