From 4f8e366109ffb41c4ba5e547c0555d91882d572d Mon Sep 17 00:00:00 2001
From: digiwand <20778143+digiwand@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:01:28 +0800
Subject: [PATCH] fix: cherry-pick PermitSimulationValueDisplay code

---
 .../value-display/value-display.tsx           | 29 +++++++------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx
index 25fad3020103..d0cd9c529d0e 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { NameType } from '@metamask/name-controller';
-import { Hex } from '@metamask/utils';
 import { captureException } from '@sentry/browser';
+import { getTokenStandardAndDetails } from '../../../../../../../../store/actions';
 import { shortenString } from '../../../../../../../../helpers/utils/util';
 
 import { calcTokenAmount } from '../../../../../../../../../shared/lib/transactions-controller-utils';
@@ -27,30 +27,23 @@ import {
   TextAlign,
 } from '../../../../../../../../helpers/constants/design-system';
 import Name from '../../../../../../../../components/app/name/name';
-import { fetchErc20Decimals } from '../../../../../../utils/token';
 
-type PermitSimulationValueDisplayParams = {
-  /** The primaryType of the typed sign message */
-  primaryType?: string;
-
-  /**
-   * The ethereum token contract address. It is expected to be in hex format.
-   * We currently accept strings since we have a patch that accepts a custom string
-   * {@see .yarn/patches/@metamask-eth-json-rpc-middleware-npm-14.0.1-b6c2ccbe8c.patch}
-   */
-  tokenContract: Hex | string;
+const getTokenDecimals = async (tokenContract: string) => {
+  const tokenDetails = await getTokenStandardAndDetails(tokenContract);
+  const tokenDecimals = tokenDetails?.decimals;
 
-  /** The token amount */
-  value: number | string;
+  return parseInt(tokenDecimals ?? '0', 10);
 };
 
-const PermitSimulationValueDisplay: React.FC<
-  PermitSimulationValueDisplayParams
-> = ({ primaryType, tokenContract, value }) => {
+const PermitSimulationValueDisplay: React.FC<{
+  primaryType?: string;
+  tokenContract: string;
+  value: number | string;
+}> = ({ primaryType, tokenContract, value }) => {
   const exchangeRate = useTokenExchangeRate(tokenContract);
 
   const { value: tokenDecimals } = useAsyncResult(
-    async () => await fetchErc20Decimals(tokenContract),
+    async () => await getTokenDecimals(tokenContract),
     [tokenContract],
   );