fix: cp-12.17.0 Fix remove nft (#32102)

## **Description**

PR to fix removal of NFT on a network different than the nft network.

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

## **Related issues**

Fixes:

## **Manual testing steps**

1. Make sure you have NFTs on two different networks exp (linea and
ethereum)
2. Select Ethereum network
3. Go to NFTs tab
4. Remove and NFT on linea
5. It should be removed successfully

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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. pull and build branch, run the
app, test 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.

---------

Co-authored-by: Nicholas Gambino <nicholas.gambino@consensys.net>

Author: sahar-fehri

CHANGELOG.md

@@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Beta] Create Solana account automatically on wallet creation or SRP import [#32038](https://github.com/MetaMask/metamask-extension/pull/32038)
 - Support for Solana on Firefox ([#32104](https://github.com/MetaMask/metamask-extension/pull/32104))
 
+### Fixed
+- Fix NFT removal on different networks ([#32102](https://github.com/MetaMask/metamask-extension/pull/32102))
+
 ## [12.15.2]
 ### Added
 - Add icon image for Lens network ([#31638](https://github.com/MetaMask/metamask-extension/pull/31638))

test/e2e/tests/tokens/nft/remove-erc1155.spec.ts

@@ -6,6 +6,10 @@ import Homepage from '../../../page-objects/pages/home/homepage';
 import NFTDetailsPage from '../../../page-objects/pages/nft-details-page';
 import NftListPage from '../../../page-objects/pages/home/nft-list';
 import { loginWithBalanceValidation } from '../../../page-objects/flows/login.flow';
+import { setupAutoDetectMocking } from './mocks';
+import SettingsPage from '../../../page-objects/pages/settings/settings-page';
+import HeaderNavbar from '../../../page-objects/pages/header-navbar';
+import PrivacySettings from '../../../page-objects/pages/settings/privacy-settings';
 
 async function mockIPFSRequest(mockServer: MockttpServer) {
   return [
@@ -47,4 +51,53 @@ describe('Remove ERC1155 NFT', function () {
       },
     );
   });
+
+  it('user should be able to remove an NFT while selected network is different than NFT network', async function () {
+    const driverOptions = { mock: true };
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().withNetworkControllerOnLinea().build(),
+        driverOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: setupAutoDetectMocking,
+      },
+      async ({ driver }) => {
+        await loginWithBalanceValidation(driver);
+
+        // navigate to security & privacy settings and toggle on NFT autodetection
+        await new HeaderNavbar(driver).openSettingsPage();
+        const settingsPage = new SettingsPage(driver);
+        await settingsPage.check_pageIsLoaded();
+        await settingsPage.goToPrivacySettings();
+
+        const privacySettings = new PrivacySettings(driver);
+        await privacySettings.check_pageIsLoaded();
+        await privacySettings.toggleAutodetectNft();
+        await settingsPage.closeSettingsPage();
+
+        // check that nft is displayed
+        const homepage = new Homepage(driver);
+        await homepage.check_pageIsLoaded();
+        await homepage.check_expectedBalanceIsDisplayed();
+        await homepage.goToNftTab();
+        const nftListPage = new NftListPage(driver);
+        await nftListPage.check_nftNameIsDisplayed(
+          'ENS: Ethereum Name Service',
+        );
+        await nftListPage.check_nftImageIsDisplayed();
+        await nftListPage.clickNFTIconOnActivityList();
+
+        const nftDetailsPage = new NFTDetailsPage(driver);
+        await nftDetailsPage.check_pageIsLoaded();
+
+        await nftDetailsPage.removeNFT();
+        await driver.delay(5000);
+
+        // Remove NFT
+        await nftListPage.check_successRemoveNftMessageIsDisplayed();
+        await nftListPage.check_noNftInfoIsDisplayed();
+        await driver.delay(5000);
+      },
+    );
+  });
 });

ui/components/app/assets/nfts/nft-details/nft-details.test.js

@@ -121,6 +121,7 @@ describe('NFT Details', () => {
     await expect(removeAndIgnoreNft).toHaveBeenCalledWith(
       nfts[5].address,
       nfts[5].tokenId,
+      'testNetworkConfigurationId',
     );
     expect(setRemoveNftMessage).toHaveBeenCalledWith('success');
     expect(mockHistoryPush).toHaveBeenCalledWith(DEFAULT_ROUTE);
@@ -145,6 +146,7 @@ describe('NFT Details', () => {
     await expect(removeAndIgnoreNft).toHaveBeenCalledWith(
       nfts[5].address,
       nfts[5].tokenId,
+      'testNetworkConfigurationId',
     );
     expect(setRemoveNftMessage).toHaveBeenCalledWith('error');
     expect(mockHistoryPush).toHaveBeenCalledWith(DEFAULT_ROUTE);

ui/components/app/assets/nfts/nft-details/nft-details.tsx

@@ -130,6 +130,9 @@ export function NftDetailsComponent({
   const nftNetworkConfigs = useSelector(getNetworkConfigurationsByChainId);
   const nftChainNetwork = nftNetworkConfigs[nftChainId as Hex];
   const nftChainImage = getImageForChainId(nftChainId as string);
+  const nftNetworkClientId =
+    nftChainNetwork?.rpcEndpoints?.[nftChainNetwork?.defaultRpcEndpointIndex]
+      .networkClientId;
   const networks = useSelector(getNetworkConfigurationIdByChainId) as Record<
     string,
     string
@@ -225,7 +228,7 @@ export function NftDetailsComponent({
   const onRemove = async () => {
     let isSuccessfulEvent = false;
     try {
-      await dispatch(removeAndIgnoreNft(address, tokenId));
+      await dispatch(removeAndIgnoreNft(address, tokenId, nftNetworkClientId));
       dispatch(setNewNftAddedMessage(''));
       dispatch(setRemoveNftMessage('success'));
       isSuccessfulEvent = true;

ui/store/actions.ts

@@ -2217,6 +2217,7 @@ export function addNftVerifyOwnership(
 export function removeAndIgnoreNft(
   address: string,
   tokenID: string,
+  networkClientId: string,
   shouldShowLoadingIndicator?: boolean,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return async (dispatch: MetaMaskReduxDispatch) => {
@@ -2230,7 +2231,11 @@ export function removeAndIgnoreNft(
       dispatch(showLoadingIndication());
     }
     try {
-      await submitRequestToBackground('removeAndIgnoreNft', [address, tokenID]);
+      await submitRequestToBackground('removeAndIgnoreNft', [
+        address,
+        tokenID,
+        { networkClientId },
+      ]);
     } catch (error) {
       logErrorWithMessage(error);
       dispatch(displayWarning(error));