chore(runway): cherry-pick fix: cp-12.18.0 Infinite loader on approve request (#32548)

<!--
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 aims to fix infinite loader on `approve` request described here:
#32489 (comment)

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

## **Related issues**

Fixes: #32489

## **Manual testing steps**

1. Connect to a dapp
2. Switch to Base
3. Select WETH
4. Trigger Approval

## **Screenshots/Recordings**

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

### **Before**

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

### **After**



https://github.com/user-attachments/assets/9ac4185c-f921-4178-ae51-2edb608578e2




## **Pre-merge author checklist**

- [X] 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).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] 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.

Author: OGPoyraz

test/integration/confirmations/transactions/erc20-approve.test.tsx

@@ -145,7 +145,7 @@ describe('ERC20 Approve Confirmation', () => {
   beforeEach(() => {
     jest.resetAllMocks();
     setupSubmitRequestToBackgroundMocks({
-      getTokenStandardAndDetails: {
+      getTokenStandardAndDetailsByChain: {
         standard: TokenStandard.ERC20,
       },
     });

test/integration/confirmations/transactions/increase-allowance.test.tsx

@@ -144,7 +144,7 @@ describe('ERC20 increaseAllowance Confirmation', () => {
   beforeEach(() => {
     jest.resetAllMocks();
     setupSubmitRequestToBackgroundMocks({
-      getTokenStandardAndDetails: {
+      getTokenStandardAndDetailsByChain: {
         standard: TokenStandard.ERC20,
       },
     });

ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft.test.ts

@@ -6,24 +6,29 @@ import {
 } from '../../../../../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import { renderHookWithProvider } from '../../../../../../../../test/lib/render-helpers';
-import { getTokenStandardAndDetails } from '../../../../../../../store/actions';
+import { getTokenStandardAndDetailsByChain } from '../../../../../../../store/actions';
 import { useIsNFT } from './use-is-nft';
 
 jest.mock('../../../../../../../store/actions', () => ({
   ...jest.requireActual('../../../../../../../store/actions'),
-  getTokenStandardAndDetails: jest.fn(),
+  getTokenStandardAndDetailsByChain: jest.fn(),
 }));
 
 describe('useIsNFT', () => {
-  it('identifies NFT in token with 0 decimals', async () => {
-    const getTokenStandardAndDetailsMock = jest
-      .fn()
-      .mockImplementation(() => ({ standard: TokenStandard.ERC721 }));
+  const mockGetTokenStandardAndDetailsByChain = jest.mocked(
+    getTokenStandardAndDetailsByChain,
+  );
 
-    (getTokenStandardAndDetails as jest.Mock).mockImplementation(
-      getTokenStandardAndDetailsMock,
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetTokenStandardAndDetailsByChain.mockImplementation(() =>
+      Promise.resolve({
+        standard: TokenStandard.ERC721,
+      }),
     );
+  });
 
+  it('identifies NFT in token with 0 decimals', async () => {
     const transactionMeta = genUnapprovedContractInteractionConfirmation({
       address: CONTRACT_INTERACTION_SENDER_ADDRESS,
     }) as TransactionMeta;
@@ -36,15 +41,19 @@ describe('useIsNFT', () => {
     await waitForNextUpdate();
 
     expect(result.current.isNFT).toMatchInlineSnapshot(`true`);
+    expect(mockGetTokenStandardAndDetailsByChain).toHaveBeenCalledWith(
+      transactionMeta.txParams.to,
+      transactionMeta.txParams.from,
+      undefined,
+      transactionMeta.chainId,
+    );
   });
 
   it('identifies fungible in token with greater than 0 decimals', async () => {
-    const getTokenStandardAndDetailsMock = jest
-      .fn()
-      .mockImplementation(() => ({ standard: TokenStandard.ERC20 }));
-
-    (getTokenStandardAndDetails as jest.Mock).mockImplementation(
-      getTokenStandardAndDetailsMock,
+    mockGetTokenStandardAndDetailsByChain.mockImplementation(() =>
+      Promise.resolve({
+        standard: TokenStandard.ERC20,
+      }),
     );
 
     const transactionMeta = genUnapprovedContractInteractionConfirmation({

ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft.ts

@@ -1,14 +1,17 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { TokenStandard } from '../../../../../../../../shared/constants/transaction';
 import { useAsyncResult } from '../../../../../../../hooks/useAsync';
-import { getTokenStandardAndDetails } from '../../../../../../../store/actions';
+import { getTokenStandardAndDetailsByChain } from '../../../../../../../store/actions';
 
 export const useIsNFT = (
   transactionMeta: TransactionMeta,
 ): { isNFT: boolean; pending: boolean } => {
   const { value, pending } = useAsyncResult(async () => {
-    return await getTokenStandardAndDetails(
+    return await getTokenStandardAndDetailsByChain(
       transactionMeta?.txParams?.to as string,
+      transactionMeta?.txParams?.from as string,
+      undefined,
+      transactionMeta?.chainId as string,
     );
   }, [transactionMeta?.txParams?.to]);