fix: Fix ERC20 approve copy (#27222)

<!--
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**


Update two pieces of copy for the ERC20 Approve screen. The "Spender"
field tooltip, as well as the simulation details description text.

<!--
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?
-->

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

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **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/develop/.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/develop/.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.

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

@@ -183,9 +183,8 @@ describe('ERC20 Approve Confirmation', () => {
     );
     expect(simulationSection).toBeInTheDocument();
 
-    // TODO - fix this copy
     expect(simulationSection).toHaveTextContent(
-      "You're giving someone else permission to withdraw NFTs from your account",
+      "You're giving someone else permission to spend this amount from your account.",
     );
     expect(simulationSection).toHaveTextContent('Spending cap');
     const spendingCapValue = screen.getByTestId('simulation-token-value');
@@ -221,9 +220,9 @@ describe('ERC20 Approve Confirmation', () => {
     );
     expect(approveDetailsSpender).toContainElement(spenderTooltip);
     await testUser.hover(spenderTooltip);
-    // TODO - fix this copy
+
     const spenderTooltipContent = await screen.findByText(
-      'This is the address that will be able to withdraw your NFTs.',
+      'This is the address that will be able to spend your tokens on your behalf.',
     );
     expect(spenderTooltipContent).toBeInTheDocument();
 

ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
           style="white-space: pre-wrap;"
         >
-          You're giving someone else permission to withdraw NFTs from your account.
+          You're giving someone else permission to spend this amount from your account.
         </p>
       </div>
     </div>
@@ -118,7 +118,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
           <div
             aria-describedby="tippy-tooltip-2"
             class=""
-            data-original-title="This is the address that will be able to withdraw your NFTs."
+            data-original-title="This is the address that will be able to spend your tokens on your behalf."
             data-tooltipped=""
             style="display: flex;"
             tabindex="0"

ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.tsx

@@ -1,3 +1,4 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -7,6 +8,7 @@ import {
 } from '../../../../../../../components/app/confirm/info/row';
 import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
+import { useConfirmContext } from '../../../../../context/confirm';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../../../selectors/preferences';
 import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
 import { Container } from '../../shared/transaction-data/transaction-data';
@@ -15,10 +17,16 @@ import {
   OriginRow,
   RecipientRow,
 } from '../../shared/transaction-details/transaction-details';
+import { useIsNFT } from '../hooks/use-is-nft';
 
 const Spender = () => {
   const t = useI18nContext();
 
+  const { currentConfirmation: transactionMeta } =
+    useConfirmContext<TransactionMeta>();
+
+  const { isNFT } = useIsNFT(transactionMeta);
+
   const decodedResponse = useDecodedTransactionData();
 
   const { value, pending } = decodedResponse;
@@ -37,7 +45,9 @@ const Spender = () => {
     <>
       <ConfirmInfoRow
         label={t('spender')}
-        tooltip={t('spenderTooltipDesc')}
+        tooltip={t(
+          isNFT ? 'spenderTooltipDesc' : 'spenderTooltipERC20ApproveDesc',
+        )}
         data-testid="confirmation__approve-spender"
       >
         <ConfirmInfoRowAddress address={spender} />

ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx

@@ -88,7 +88,11 @@ export const ApproveStaticSimulation = () => {
     <StaticSimulation
       title={t('simulationDetailsTitle')}
       titleTooltip={t('simulationDetailsTitleTooltip')}
-      description={t('simulationDetailsApproveDesc')}
+      description={t(
+        isNFT
+          ? 'simulationDetailsApproveDesc'
+          : 'simulationDetailsERC20ApproveDesc',
+      )}
       simulationHeading={
         isNFT ? t('simulationApproveHeading') : t('spendingCap')
       }