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], );