diff --git a/ui/components/app/auto-detect-nft/auto-detect-nft-modal.tsx b/ui/components/app/auto-detect-nft/auto-detect-nft-modal.tsx index c8ba83d14e03..5afd1b55fbab 100644 --- a/ui/components/app/auto-detect-nft/auto-detect-nft-modal.tsx +++ b/ui/components/app/auto-detect-nft/auto-detect-nft-modal.tsx @@ -53,8 +53,8 @@ function AutoDetectNftModal({ isOpen, onClose }: AutoDetectNftModalProps) { }, }); if (val) { - dispatch(setUseNftDetection(val)); dispatch(setOpenSeaEnabled(val)); + dispatch(setUseNftDetection(val)); } onClose(val); }, diff --git a/ui/components/app/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js b/ui/components/app/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js index fd5970b835a9..7ec66e532aec 100644 --- a/ui/components/app/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js +++ b/ui/components/app/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js @@ -1,16 +1,19 @@ import React from 'react'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { BannerAlert } from '../../component-library'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { detectNfts, + setOpenSeaEnabled, setShowNftDetectionEnablementToast, setUseNftDetection, } from '../../../store/actions'; +import { getOpenSeaEnabled } from '../../../selectors'; export default function NFTsDetectionNoticeNFTsTab() { const t = useI18nContext(); const dispatch = useDispatch(); + const isDisplayNFTMediaToggleEnabled = useSelector(getOpenSeaEnabled); return ( { + if (!isDisplayNFTMediaToggleEnabled) { + dispatch(setOpenSeaEnabled(true)); + } dispatch(setUseNftDetection(true)); // Show toast dispatch(setShowNftDetectionEnablementToast(true)); diff --git a/ui/components/app/nfts-tab/nfts-tab.test.js b/ui/components/app/nfts-tab/nfts-tab.test.js index 13428ef7dd1a..0f661956cc30 100644 --- a/ui/components/app/nfts-tab/nfts-tab.test.js +++ b/ui/components/app/nfts-tab/nfts-tab.test.js @@ -149,6 +149,7 @@ const nftsDropdownState = { const ACCOUNT_1 = '0x123'; const ACCOUNT_2 = '0x456'; const setUseNftDetectionStub = jest.fn(); +const setDisplayNftMediaStub = jest.fn(); const render = ({ nftContracts = [], @@ -224,6 +225,7 @@ describe('NFT Items', () => { checkAndUpdateAllNftsOwnershipStatusStub, updateNftDropDownState: updateNftDropDownStateStub, setUseNftDetection: setUseNftDetectionStub, + setOpenSeaEnabled: setDisplayNftMediaStub, }); const historyPushMock = jest.fn(); @@ -273,7 +275,9 @@ describe('NFT Items', () => { }); fireEvent.click(screen.queryByText('Enable NFT Autodetection')); expect(setUseNftDetectionStub).toHaveBeenCalledTimes(1); + expect(setDisplayNftMediaStub).toHaveBeenCalledTimes(1); expect(setUseNftDetectionStub.mock.calls[0][0]).toStrictEqual(true); + expect(setDisplayNftMediaStub.mock.calls[0][0]).toStrictEqual(true); }); it('should not render the NFTs Detection Notice when currently selected network is Mainnet and currently selected account has no NFTs but use NFT autodetection preference is set to true', () => { render({