fix: enable display nft media from nft banner notice

MetaMask · Jun 14, 2024 · 666362f · 666362f
1 parent 7760571
commit 666362f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
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
@@ -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
@@ -1,23 +1,29 @@
 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 (
     <BannerAlert
       className="nfts-detection-notice"
       title={t('newNFTsAutodetected')}
       actionButtonLabel={t('selectNFTPrivacyPreference')}
       actionButtonOnClick={() => {
+        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
@@ -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({