fix: Permit value decimal & refactor: Create reusable ConfirmInfoRowTextTokenUnits component

ui/components/app/confirm/info/row/index.ts

@@ -3,5 +3,6 @@ export * from './date';
 export * from './divider';
 export * from './row';
 export * from './text';
+export * from './text-token-units';
 export * from './url';
 export * from './value-double';

ui/components/app/confirm/info/row/text-token-units.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ConfirmInfoRow } from './row';
+import { ConfirmInfoRowTextTokenUnits } from './text-token-units';
+
+export default {
+  title: 'Components/App/Confirm/InfoRowTextToken',
+  component: ConfirmInfoRowTextTokenUnits,
+  decorators: [
+    (story) => <ConfirmInfoRow label="Amount">{story()}</ConfirmInfoRow>,
+  ],
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    decimals: {
+      control: 'number',
+    },
+  },
+  args: {
+    value: '3000198768',
+    decimals: 5,
+  },
+};
+
+export const DefaultStory = (args: { value: string, decimals: number }) =>
+  <ConfirmInfoRowTextTokenUnits {...args} />;
+

ui/components/app/confirm/info/row/text-token-units.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfirmInfoRowTextTokenUnits } from './text-token-units';
+
+describe('ConfirmInfoRowTextTokenUnits', () => {
+  it('renders the value with the correct formatted decimal', () => {
+    const value = 123.456789;
+    const decimals = 4;
+    const { getByText } = render(
+      <ConfirmInfoRowTextTokenUnits value={value} decimals={decimals} />,
+    );
+
+    // Note: using formatAmount loses precision
+    expect(getByText('0.0123')).toBeInTheDocument();
+  });
+
+  it('renders the value with the correct formatted non-fractional number', () => {
+    const value = 123456789;
+    const decimals = 4;
+    const { getByText } = render(
+      <ConfirmInfoRowTextTokenUnits value={value} decimals={decimals} />,
+    );
+
+    // Note: using formatAmount loses precision
+    expect(getByText('12,346')).toBeInTheDocument();
+  });
+});

ui/components/app/confirm/info/row/text-token-units.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BigNumber } from 'bignumber.js';
+
+import { calcTokenAmount } from '../../../../../../shared/lib/transactions-controller-utils';
+import {
+  formatAmount,
+  formatAmountMaxPrecision,
+} from '../../../../../pages/confirmations/components/simulation-details/formatAmount';
+import { ConfirmInfoRowText } from './text';
+
+type ConfirmInfoRowTextTokenUnitsProps = {
+  value: number | string | BigNumber;
+  decimals: number;
+};
+
+export const ConfirmInfoRowTextTokenUnits: React.FC<
+  ConfirmInfoRowTextTokenUnitsProps
+> = ({ value, decimals }) => {
+  const tokenValue = calcTokenAmount(value, decimals);
+
+  // FIXME - Precision may be lost for large values when using formatAmount
+  /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */
+  const tokenText = formatAmount('en-US', tokenValue);
+  const tokenTextMaxPrecision = formatAmountMaxPrecision('en-US', tokenValue);
+
+  return (
+    <ConfirmInfoRowText
+      isEllipsis={true}
+      text={tokenText}
+      tooltip={tokenTextMaxPrecision}
+    />
+  );
+};

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

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { NameType } from '@metamask/name-controller';
-import { BigNumber } from 'bignumber.js';
 
+import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import { parseTypedDataMessage } from '../../../../../../../../shared/modules/transaction.utils';
 import { Numeric } from '../../../../../../../../shared/modules/Numeric';
 import Name from '../../../../../../../components/app/name/name';
@@ -53,15 +53,13 @@ const PermitSimulation: React.FC<{
   }, [exchangeRate, value]);
 
   const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
-    const valueBN = new BigNumber(value);
-    const diviserBN = new BigNumber(10).pow(tokenDecimals);
-    const resultBn = valueBN.div(diviserBN);
+    const tokenAmount = calcTokenAmount(value, tokenDecimals);
 
     // FIXME - Precision may be lost for large values when using formatAmount
     /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */
     return {
-      tokenValue: formatAmount('en-US', resultBn),
-      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', resultBn),
+      tokenValue: formatAmount('en-US', tokenAmount),
+      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', tokenAmount),
     };
   }, [tokenDecimals, value]);
 

ui/pages/confirmations/components/confirm/row/dataTree.tsx

@@ -1,4 +1,3 @@
-import { BigNumber } from 'bignumber.js';
 import React, { memo } from 'react';
 
 import { isValidHexAddress } from '../../../../../../shared/modules/hexstring-utils';
@@ -11,11 +10,8 @@ import {
   ConfirmInfoRowAddress,
   ConfirmInfoRowDate,
   ConfirmInfoRowText,
+  ConfirmInfoRowTextTokenUnits,
 } from '../../../../../components/app/confirm/info/row';
-import {
-  formatAmount,
-  formatAmountMaxPrecision,
-} from '../../simulation-details/formatAmount';
 
 type ValueType = string | Record<string, TreeData> | TreeData[];
 
@@ -81,21 +77,8 @@ const DataField = memo(
       );
     }
     if (isPermit && label === 'value') {
-      const valueBN = new BigNumber(value);
-      const diviserBN = new BigNumber(10).pow(tokenDecimals);
-      const resultBn = valueBN.div(diviserBN);
-
-      // FIXME - Precision may be lost for large values when using formatAmount
-      /** @see {@link https://github.com/MetaMask/metamask-extension/issues/25755} */
-      const tokenValue = formatAmount('en-US', resultBn);
-      const tokenValueMaxPrecision = formatAmountMaxPrecision('en-US', valueBN);
-
       return (
-        <ConfirmInfoRowText
-          isEllipsis={true}
-          text={tokenValue}
-          tooltip={tokenValueMaxPrecision}
-        />
+        <ConfirmInfoRowTextTokenUnits value={value} decimals={tokenDecimals} />
       );
     }
     if (isPermit && label === 'deadline') {