fix: Error: new BigNumber() more than 15 digits feat: apply ellipsis

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"
@@ -143,7 +143,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"