diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx index 95a8ea394000..7fa94719d44b 100644 --- a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx +++ b/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 ( { onSelectChainIds={handleSelectChainIds} selectedAccountAddresses={connectedAccountAddresses} selectedChainIds={connectedChainIds} + hideAllToasts={hideAllToasts} /> ) : ( diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.test.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.test.tsx new file mode 100644 index 000000000000..affd55cfaa66 --- /dev/null +++ b/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( + + undefined} + onSelectChainIds={() => undefined} + selectedAccountAddresses={[]} + selectedChainIds={[]} + hideAllToasts={hideAllToasts} + /> + , + ); + + 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( + + undefined} + onSelectChainIds={() => undefined} + selectedAccountAddresses={[]} + selectedChainIds={[]} + hideAllToasts={hideAllToasts} + /> + , + ); + + const editButtons = getAllByTestId('edit'); + fireEvent.click(editButtons[1]); + expect(hideAllToasts).toHaveBeenCalled(); + }); + + it('should not throw if hideAllToasts is not provided', () => { + const { getAllByTestId } = render( + + undefined} + onSelectChainIds={() => undefined} + selectedAccountAddresses={[]} + selectedChainIds={[]} + /> + , + ); + + expect(() => { + const editButtons = getAllByTestId('edit'); + fireEvent.click(editButtons[0]); + fireEvent.click(editButtons[1]); + }).not.toThrow(); + }); + }); +}); diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx index fcb104937e28..1c91489d0d1f 100644 --- a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx +++ b/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 = ({ @@ -49,6 +50,7 @@ export const SiteCell: React.FC = ({ selectedAccountAddresses, selectedChainIds, isConnectFlow, + hideAllToasts = () => undefined, }) => { const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); @@ -91,6 +93,30 @@ export const SiteCell: React.FC = ({ ? 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 ( <> = ({ 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 = ({ 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={}