fix: Permit message, dataTree value incorrectly using default ERC20 d…

…ecimals for non-ERC20 token values (#28142)

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

Removes bug where fetchErc20Decimals was used in
`ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx`
info component and passed to the message dataTree to be used.
fetchErc20Decimals was incorrectly used as it cannot be assumed that the
token contract is an ERC20 standard. Fixed by calling
useGetTokenStandardAndDetails instead which will use the default 18
decimals digit if the standard is an ERC20 token with no decimals found
in the details.

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

## **Related issues**

Fixes: #28118

## **Manual testing steps**

1. Go to test-dapp
2. Test Permit button
3. Observe both the simulation and message value display "3,000"
(contract is not an ERC20 standard so it does not apply default 18
decimals)

## **Screenshots/Recordings**

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

### **Before**

<img width="640"
src="https://private-user-images.githubusercontent.com/104780023/380556504-95ff2704-fca4-411e-b2b6-40dc6b099531.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzAxOTcyMjAsIm5iZiI6MTczMDE5NjkyMCwicGF0aCI6Ii8xMDQ3ODAwMjMvMzgwNTU2NTA0LTk1ZmYyNzA0LWZjYTQtNDExZS1iMmI2LTQwZGM2YjA5OTUzMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAyOVQxMDE1MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wMDU4NjhhMGE0OGZhNjg4YzY0YmM3ZWRhNWFjYmUwNjFlZTY2ZDZjN2IyMDg1MjI0NGEyNTM2OTIyOGNmZjAzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.MipJ95Oyanm_83vnd1FYq14ua0HgEiH_7GMt3hRDGLE">

### **After**

<img width="320"
src="https://github.com/user-attachments/assets/eea77452-3aa0-49b3-84a6-401ffb189b40">

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

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { isValidAddress } from 'ethereumjs-util';
 
@@ -14,11 +14,11 @@ import {
 import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { SignatureRequestType } from '../../../../types/confirm';
+import { useGetTokenStandardAndDetails } from '../../../../hooks/useGetTokenStandardAndDetails';
 import {
   isOrderSignatureRequest,
   isPermitSignatureRequest,
 } from '../../../../utils';
-import { fetchErc20Decimals } from '../../../../utils/token';
 import { useConfirmContext } from '../../../../context/confirm';
 import { selectUseTransactionSimulations } from '../../../../selectors/preferences';
 import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData';
@@ -31,7 +31,6 @@ const TypedSignInfo: React.FC = () => {
   const useTransactionSimulations = useSelector(
     selectUseTransactionSimulations,
   );
-  const [decimals, setDecimals] = useState<number>(0);
 
   if (!currentConfirmation?.msgParams) {
     return null;
@@ -44,17 +43,10 @@ const TypedSignInfo: React.FC = () => {
 
   const isPermit = isPermitSignatureRequest(currentConfirmation);
   const isOrder = isOrderSignatureRequest(currentConfirmation);
-  const chainId = currentConfirmation.chainId as string;
+  const tokenContract = isPermit || isOrder ? verifyingContract : undefined;
+  const { decimalsNumber } = useGetTokenStandardAndDetails(tokenContract);
 
-  useEffect(() => {
-    (async () => {
-      if (!isPermit && !isOrder) {
-        return;
-      }
-      const tokenDecimals = await fetchErc20Decimals(verifyingContract);
-      setDecimals(tokenDecimals);
-    })();
-  }, [verifyingContract]);
+  const chainId = currentConfirmation.chainId as string;
 
   const toolTipMessage = isSnapId(currentConfirmation.msgParams.origin)
     ? t('requestFromInfoSnap')
@@ -99,7 +91,7 @@ const TypedSignInfo: React.FC = () => {
         >
           <ConfirmInfoRowTypedSignData
             data={msgData}
-            tokenDecimals={decimals}
+            tokenDecimals={decimalsNumber}
             chainId={chainId}
           />
         </ConfirmInfoRow>

ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap

@@ -349,7 +349,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-17"
+                aria-describedby="tippy-tooltip-18"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -410,7 +410,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-18"
+                      aria-describedby="tippy-tooltip-19"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -473,7 +473,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-22"
+                            aria-describedby="tippy-tooltip-25"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -525,7 +525,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-23"
+                            aria-describedby="tippy-tooltip-26"
                             class=""
                             data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -666,7 +666,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-21"
+                      aria-describedby="tippy-tooltip-22"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -1050,7 +1050,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-16"
+                            aria-describedby="tippy-tooltip-17"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""

ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts

@@ -16,8 +16,12 @@ import {
  * @returns
  */
 export const useGetTokenStandardAndDetails = (
-  tokenAddress: Hex | string | undefined,
+  tokenAddress?: Hex | string | undefined,
 ) => {
+  if (!tokenAddress) {
+    return { decimalsNumber: undefined };
+  }
+
   const { value: details } = useAsyncResult<TokenDetailsERC20>(
     async () =>
       (await memoizedGetTokenStandardAndDetails(