fix: (cherry-pick)(Version v12.1.0) Error: new BigNumber() more than …

…15 digits feat: apply ellipsis #25741  (#25804)

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

Cherry-pick #25741
for Version-v12.1.0

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

## **Related issues**

Fixes: MetaMask/MetaMask-planning#2730
(ellipsis)
Fixes: #25751
(Error)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

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

shared/modules/transaction.utils.test.js

@@ -395,6 +395,21 @@ describe('Transaction.utils', function () {
         const result = parseTypedDataMessage('{"test": "dummy"}');
         expect(result.test).toBe('dummy');
       });
+
+      it('parses message.value as a string', () => {
+        const result = parseTypedDataMessage(
+          '{"test": "dummy", "message": { "value": 3000123} }',
+        );
+        expect(result.message.value).toBe('3000123');
+      });
+
+      it('parses message.value such that it does not lose precision', () => {
+        const result = parseTypedDataMessage(
+          '{"test": "dummy", "message": { "value": 30001231231212312138768} }',
+        );
+        expect(result.message.value).toBe('30001231231212312138768');
+      });
+
       it('throw error for invalid typedDataMessage', () => {
         expect(() => {
           parseTypedDataMessage('');

shared/modules/transaction.utils.ts

@@ -282,5 +282,40 @@ export async function determineTransactionAssetType(
   return { assetType: AssetType.native, tokenStandard: TokenStandard.none };
 }
 
-export const parseTypedDataMessage = (dataToParse: string) =>
-  JSON.parse(dataToParse);
+const REGEX_MESSAGE_VALUE_LARGE =
+  /"message"\s*:\s*\{[^}]*"value"\s*:\s*(\d{15,})/u;
+
+function extractLargeMessageValue(dataToParse: string): string | undefined {
+  if (typeof dataToParse !== 'string') {
+    return undefined;
+  }
+  return dataToParse.match(REGEX_MESSAGE_VALUE_LARGE)?.[1];
+}
+
+/**
+ * JSON.parse has a limitation which coerces values to scientific notation if numbers are greator than
+ * Number.MAX_SAFE_INTEGER. This can cause a loss in precision.
+ *
+ * Aside from precision concerns, if the value returned was a large number greator than 15 digits,
+ * e.g. 3.000123123123121e+26, passing the value to BigNumber will throw the error:
+ * Error: new BigNumber() number type has more than 15 significant digits
+ *
+ * Note that using JSON.parse reviver cannot help since the value will be coerced by the time it
+ * reaches the reviver function.
+ *
+ * This function has a workaround to extract the large value from the message and replace
+ * the message value with the string value.
+ *
+ * @param dataToParse
+ * @returns
+ */
+export const parseTypedDataMessage = (dataToParse: string) => {
+  const result = JSON.parse(dataToParse);
+
+  const messageValue = extractLargeMessageValue(dataToParse);
+  if (result.message?.value) {
+    result.message.value = messageValue || String(result.message.value);
+  }
+
+  return result;
+};

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { I18nContext } from '../../../../../contexts/i18n';
 import {
   AlignItems,
+  BlockSize,
   Display,
   FlexWrap,
   IconColor,
@@ -10,8 +11,18 @@ import {
 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' }}>
+const InfoText = ({
+  isEllipsis,
+  text,
+}: {
+  isEllipsis: boolean;
+  text: string;
+}) => (
+  <Text
+    color={TextColor.inherit}
+    style={isEllipsis ? {} : { whiteSpace: 'pre-wrap' }}
+    ellipsis={isEllipsis}
+  >
     {text}
   </Text>
 );
@@ -20,12 +31,14 @@ export type ConfirmInfoRowTextProps = {
   text: string;
   onEditClick?: () => void;
   editIconClassName?: string;
+  isEllipsis?: boolean;
   tooltip?: string;
 };
 
 export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
   text,
   onEditClick,
+  isEllipsis = false,
   editIconClassName,
   tooltip,
 }) => {
@@ -39,6 +52,7 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
       alignItems={AlignItems.center}
       flexWrap={FlexWrap.Wrap}
       gap={2}
+      minWidth={BlockSize.Zero}
     >
       {tooltip ? (
         <Tooltip
@@ -47,10 +61,10 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
           wrapperStyle={{ minWidth: 0 }}
           interactive
         >
-          <InfoText text={text} />
+          <InfoText isEllipsis={isEllipsis} text={text} />
         </Tooltip>
       ) : (
-        <InfoText text={text} />
+        <InfoText isEllipsis={isEllipsis} text={text} />
       )}
       {isEditable ? (
         <ButtonIcon

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

@@ -61,7 +61,7 @@ exports[`Info renders info section for personal sign request 1`] = `
         </p>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -223,7 +223,7 @@ exports[`Info renders info section for typed sign request 1`] = `
             </p>
           </div>
           <div
-            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
           >
             <p
               class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -270,7 +270,7 @@ exports[`Info renders info section for typed sign request 1`] = `
                     </p>
                   </div>
                   <div
-                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
                   >
                     <p
                       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -383,7 +383,7 @@ exports[`Info renders info section for typed sign request 1`] = `
                     </p>
                   </div>
                   <div
-                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                    class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
                   >
                     <p
                       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -480,7 +480,7 @@ exports[`Info renders info section for typed sign request 1`] = `
                 </p>
               </div>
               <div
-                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
               >
                 <p
                   class="mm-box mm-text mm-text--body-md mm-box--color-inherit"

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

@@ -61,7 +61,7 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
         </p>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -136,7 +136,7 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
         </p>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"

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

@@ -16,7 +16,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -40,7 +40,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -64,7 +64,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -159,7 +159,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -183,7 +183,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -207,7 +207,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -255,7 +255,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -284,7 +284,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -308,7 +308,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -332,7 +332,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -427,7 +427,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -451,7 +451,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -475,7 +475,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -523,7 +523,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -547,7 +547,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -557,7 +557,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </p>
     </div>
     <div
-      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"

ui/pages/confirmations/components/confirm/info/shared/advanced-details/__snapshots__/advanced-details.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`<AdvancedDetails /> does not render component for advanced transaction
         </div>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -82,7 +82,7 @@ exports[`<AdvancedDetails /> renders component for advanced transaction details
         </div>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -118,7 +118,7 @@ exports[`<AdvancedDetails /> renders component for advanced transaction details
         </p>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
         <p
           class="mm-box mm-text mm-text--body-md mm-box--color-inherit"

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

@@ -84,7 +84,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
                 </p>
               </div>
               <div
-                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
               >
                 <p
                   class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
@@ -108,7 +108,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
                 </p>
               </div>
               <div
-                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
               >
                 <p
                   class="mm-box mm-text mm-text--body-md mm-box--color-inherit"