feat: improvement for how we display big and small numbers

ui/components/app/confirm/info/row/text.stories.tsx

@@ -22,6 +22,7 @@ const ConfirmInfoRowTextStory = {
 export const DefaultStory = ({ text }) => <ConfirmInfoRowText text={text} />;
 DefaultStory.args = {
   text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 };
 
 export const EditableStory = (props) => <ConfirmInfoRowText {...props} />;

ui/components/app/confirm/info/row/text.tsx

@@ -8,17 +8,26 @@ import {
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { Box, ButtonIcon, IconName, Text } from '../../../../component-library';
+import Tooltip from '../../../../ui/tooltip';
+
+const InfoText = ({ text }: { text: string }) => (
+  <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
+    {text}
+  </Text>
+);
 
 export type ConfirmInfoRowTextProps = {
   text: string;
   onEditClick?: () => void;
   editIconClassName?: string;
+  tooltip?: string;
 };
 
 export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
   text,
   onEditClick,
   editIconClassName,
+  tooltip,
 }) => {
   const t = useContext(I18nContext);
 
@@ -31,9 +40,18 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
       flexWrap={FlexWrap.Wrap}
       gap={2}
     >
-      <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
-        {text}
-      </Text>
+      {tooltip ? (
+        <Tooltip
+          position="bottom"
+          title={tooltip}
+          wrapperStyle={{ minWidth: 0 }}
+          interactive
+        >
+          <InfoText text={text} />
+        </Tooltip>
+      ) : (
+        <InfoText text={text} />
+      )}
       {isEditable ? (
         <ButtonIcon
           className={editIconClassName || undefined}

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

@@ -93,7 +93,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
         </p>
         <div>
           <div
-            aria-describedby="tippy-tooltip-6"
+            aria-describedby="tippy-tooltip-8"
             class=""
             data-original-title="This is the site asking for your signature."
             data-tooltipped=""
@@ -397,12 +397,25 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
               <div
                 class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
               >
-                <p
-                  class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-                  style="white-space: pre-wrap;"
+                <div
+                  style="min-width: 0;"
                 >
-                  3,000
-                </p>
+                  <div
+                    aria-describedby="tippy-tooltip-9"
+                    class=""
+                    data-original-title="3,000"
+                    data-tooltipped=""
+                    style="display: inline;"
+                    tabindex="0"
+                  >
+                    <p
+                      class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+                      style="white-space: pre-wrap;"
+                    >
+                      3,000
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
             <div

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

@@ -67,11 +67,24 @@ exports[`PermitSimulation renders component correctly 1`] = `
           <div
             class="mm-box mm-box--margin-inline-end-1 mm-box--display-inline"
           >
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
+            <div
+              style="min-width: 0;"
             >
-              30.00
-            </p>
+              <div
+                aria-describedby="tippy-tooltip-2"
+                class=""
+                data-original-title="30"
+                data-tooltipped=""
+                style="display: inline;"
+                tabindex="0"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-inline-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-xl"
+                >
+                  30
+                </p>
+              </div>
+            </div>
           </div>
           <div>
             <div

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { NameType } from '@metamask/name-controller';
+import { BigNumber } from 'bignumber.js';
 
 import { parseTypedDataMessage } from '../../../../../../../../shared/modules/transaction.utils';
 import { Numeric } from '../../../../../../../../shared/modules/Numeric';
@@ -12,6 +13,7 @@ import {
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../../selectors';
 import { Box, Text } from '../../../../../../../components/component-library';
+import Tooltip from '../../../../../../../components/ui/tooltip';
 import {
   BackgroundColor,
   BorderRadius,
@@ -21,7 +23,10 @@ import {
 import { SignatureRequestType } from '../../../../../types/confirm';
 import useTokenExchangeRate from '../../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { IndividualFiatDisplay } from '../../../../simulation-details/fiat-display';
-import { formatNumber } from '../../../utils';
+import {
+  formatAmount,
+  formatAmountMaxPrecision,
+} from '../../../../simulation-details/formatAmount';
 import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
 
 const PermitSimulation: React.FC<{
@@ -46,6 +51,14 @@ const PermitSimulation: React.FC<{
     return undefined;
   }, [exchangeRate, value]);
 
+  const { tokenValue, tokenValueMaxPrecision } = useMemo(() => {
+    const valueBN = new BigNumber(value / Math.pow(10, tokenDecimals));
+    return {
+      tokenValue: formatAmount('en-US', valueBN),
+      tokenValueMaxPrecision: formatAmountMaxPrecision('en-US', valueBN),
+    };
+  }, [tokenDecimals, value]);
+
   return (
     <ConfirmInfoSection>
       <ConfirmInfoRow
@@ -58,17 +71,21 @@ const PermitSimulation: React.FC<{
         <Box style={{ marginLeft: 'auto' }}>
           <Box display={Display.Flex}>
             <Box display={Display.Inline} marginInlineEnd={1}>
-              <Text
-                backgroundColor={BackgroundColor.backgroundAlternative}
-                borderRadius={BorderRadius.XL}
-                paddingInline={2}
-                textAlign={TextAlign.Center}
+              <Tooltip
+                position="bottom"
+                title={tokenValueMaxPrecision}
+                wrapperStyle={{ minWidth: 0 }}
+                interactive
               >
-                {formatNumber(
-                  value / Math.pow(10, tokenDecimals),
-                  tokenDecimals,
-                )}
-              </Text>
+                <Text
+                  backgroundColor={BackgroundColor.backgroundAlternative}
+                  borderRadius={BorderRadius.XL}
+                  paddingInline={2}
+                  textAlign={TextAlign.Center}
+                >
+                  {tokenValue}
+                </Text>
+              </Tooltip>
             </Box>
             <Name value={verifyingContract} type={NameType.ETHEREUM_ADDRESS} />
           </Box>

ui/pages/confirmations/components/confirm/row/__snapshots__/dataTree.test.tsx.snap

@@ -606,3 +606,102 @@ exports[`DataTree should match snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`DataTree should match snapshot for permit signature type 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--width-full"
+  >
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; padding-right: 0px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Types:
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        />
+      </div>
+    </div>
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; padding-right: 0px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          PrimaryType:
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        />
+      </div>
+    </div>
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; padding-right: 0px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Domain:
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        />
+      </div>
+    </div>
+    <div
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px; padding-right: 0px;"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+        >
+          Message:
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        >
+          3000
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign';
 import mockState from '../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import configureStore from '../../../../../store/store';
@@ -69,6 +70,16 @@ describe('DataTree', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should match snapshot for permit signature type', () => {
+    const { container } = renderWithProvider(
+      <DataTree
+        data={JSON.parse(permitSignatureMsg.msgParams?.data as string)}
+      />,
+      store,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it('correctly renders reverse strings', () => {
     const data = {
       'Sign into \u202E EVIL': {