fix: close network/accounts toasts when opening the Edit page (#29239)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR fixes the issue where toasts persist after navigating between
`Permissions view` > `Edit networks` or `Edit accounts`. The fix ensures
the toast dismisses upon navigating to edit in the Permissions modal.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29239?quickstart=1)

## **Related issues**

Fixes: #27808

## **Manual testing steps**

1. Connect a dapp and grant permissions.
2. Go to the Connection icon > Permissions view > Accounts > Edit.
3. Change the account selection.
4. Update and verify the toast confirms account permissions were
updated.
5. Navigate to Networks > Edit.
6. Change the network selection.
7. Update and verify the toast confirms network permissions were
updated.
8. Confirm no stale toast persists after each navigation.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

![Brave Browser 2024-10-11 at 4 24 18
PM](https://github.com/user-attachments/assets/a011d199-e0cc-40a7-b059-16d808c18964)

### **After**


https://github.com/user-attachments/assets/6cdd3b9d-90ce-4435-aea8-cf990b8b985a


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability.
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g., pulled and built the branch,
ran the app, tested the code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and/or screenshots.

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

@@ -176,6 +176,11 @@ export const ReviewPermissions = () => {
     setShowAccountToast(true);
   };
 
+  const hideAllToasts = () => {
+    setShowAccountToast(false);
+    setShowNetworkToast(false);
+  };
+
   return (
     <Page
       data-testid="connections-page"
@@ -196,6 +201,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} />}