fix: close network/accounts toasts when opening the Edit page

ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx

@@ -175,6 +175,11 @@ export const ReviewPermissions = () => {
     setShowAccountToast(true);
   };
 
+  const hideAllToasts = () => {
+    setShowAccountToast(false);
+    setShowNetworkToast(false);
+  };
+
   return (
     <Page
       data-testid="connections-page"
@@ -195,6 +200,7 @@ export const ReviewPermissions = () => {
               onSelectChainIds={handleSelectChainIds}
               selectedAccountAddresses={connectedAccountAddresses}
               selectedChainIds={connectedChainIds}
+              hideAllToasts={hideAllToasts}
             />
           ) : (
             <NoConnectionContent />

ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, fireEvent } from '@testing-library/react';
+import configureStore from '../../../../../store/store';
+import { SiteCell } from './site-cell';
+
+describe('SiteCell', () => {
+  const store = configureStore({
+    metamask: {
+      useBlockie: false,
+    },
+  });
+
+  describe('toast handling', () => {
+    it('should call hideAllToasts when edit accounts is clicked', () => {
+      const hideAllToasts = jest.fn();
+      const { getAllByTestId } = render(
+        <Provider store={store}>
+          <SiteCell
+            nonTestNetworks={[]}
+            testNetworks={[]}
+            accounts={[]}
+            onSelectAccountAddresses={() => undefined}
+            onSelectChainIds={() => undefined}
+            selectedAccountAddresses={[]}
+            selectedChainIds={[]}
+            hideAllToasts={hideAllToasts}
+          />
+        </Provider>,
+      );
+
+      const editButtons = getAllByTestId('edit');
+      fireEvent.click(editButtons[0]);
+      expect(hideAllToasts).toHaveBeenCalled();
+    });
+
+    it('should call hideAllToasts when edit networks is clicked', () => {
+      const hideAllToasts = jest.fn();
+      const { getAllByTestId } = render(
+        <Provider store={store}>
+          <SiteCell
+            nonTestNetworks={[]}
+            testNetworks={[]}
+            accounts={[]}
+            onSelectAccountAddresses={() => undefined}
+            onSelectChainIds={() => undefined}
+            selectedAccountAddresses={[]}
+            selectedChainIds={[]}
+            hideAllToasts={hideAllToasts}
+          />
+        </Provider>,
+      );
+
+      const editButtons = getAllByTestId('edit');
+      fireEvent.click(editButtons[1]);
+      expect(hideAllToasts).toHaveBeenCalled();
+    });
+
+    it('should not throw if hideAllToasts is not provided', () => {
+      const { getAllByTestId } = render(
+        <Provider store={store}>
+          <SiteCell
+            nonTestNetworks={[]}
+            testNetworks={[]}
+            accounts={[]}
+            onSelectAccountAddresses={() => undefined}
+            onSelectChainIds={() => undefined}
+            selectedAccountAddresses={[]}
+            selectedChainIds={[]}
+          />
+        </Provider>,
+      );
+
+      expect(() => {
+        const editButtons = getAllByTestId('edit');
+        fireEvent.click(editButtons[0]);
+        fireEvent.click(editButtons[1]);
+      }).not.toThrow();
+    });
+  });
+});

ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx

@@ -38,6 +38,7 @@ type SiteCellProps = {
   selectedAccountAddresses: string[];
   selectedChainIds: string[];
   isConnectFlow?: boolean;
+  hideAllToasts?: () => void;
 };
 
 export const SiteCell: React.FC<SiteCellProps> = ({
@@ -49,6 +50,7 @@ export const SiteCell: React.FC<SiteCellProps> = ({
   selectedAccountAddresses,
   selectedChainIds,
   isConnectFlow,
+  hideAllToasts = () => undefined,
 }) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
@@ -91,6 +93,30 @@ export const SiteCell: React.FC<SiteCellProps> = ({
       ? t('requestingForNetwork', [selectedNetworks[0].name])
       : t('requestingFor');
 
+  const handleOpenAccountsModal = () => {
+    hideAllToasts?.();
+    setShowEditAccountsModal(true);
+    trackEvent({
+      category: MetaMetricsEventCategory.Navigation,
+      event: MetaMetricsEventName.ViewPermissionedAccounts,
+      properties: {
+        location: 'Connect view, Permissions toast, Permissions (dapp)',
+      },
+    });
+  };
+
+  const handleOpenNetworksModal = () => {
+    hideAllToasts?.();
+    setShowEditNetworksModal(true);
+    trackEvent({
+      category: MetaMetricsEventCategory.Navigation,
+      event: MetaMetricsEventName.ViewPermissionedNetworks,
+      properties: {
+        location: 'Connect view, Permissions toast, Permissions (dapp)',
+      },
+    });
+  };
+
   return (
     <>
       <Box
@@ -105,16 +131,7 @@ export const SiteCell: React.FC<SiteCellProps> = ({
           connectedMessage={accountMessageConnectedState}
           unconnectedMessage={accountMessageNotConnectedState}
           isConnectFlow={isConnectFlow}
-          onClick={() => {
-            setShowEditAccountsModal(true);
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.ViewPermissionedAccounts,
-              properties: {
-                location: 'Connect view, Permissions toast, Permissions (dapp)',
-              },
-            });
-          }}
+          onClick={handleOpenAccountsModal}
           paddingBottomValue={2}
           paddingTopValue={0}
           content={
@@ -136,16 +153,7 @@ export const SiteCell: React.FC<SiteCellProps> = ({
           connectedMessage={networkMessageConnectedState}
           unconnectedMessage={networkMessageNotConnectedState}
           isConnectFlow={isConnectFlow}
-          onClick={() => {
-            setShowEditNetworksModal(true);
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.ViewPermissionedNetworks,
-              properties: {
-                location: 'Connect view, Permissions toast, Permissions (dapp)',
-              },
-            });
-          }}
+          onClick={handleOpenNetworksModal}
           paddingTopValue={2}
           paddingBottomValue={0}
           content={<SiteCellTooltip networks={selectedNetworks} />}