Edit copy

MetaMask · Oct 9, 2024 · 264c806 · 264c806
1 parent c5541a2
commit 264c806
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/.../components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.test.tsx b/.../components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.test.tsx
@@ -3,7 +3,10 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { getMockApproveConfirmState } from '../../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
-import { EditSpendingCapModal } from './edit-spending-cap-modal';
+import {
+  countDecimalDigits,
+  EditSpendingCapModal,
+} from './edit-spending-cap-modal';
 
 jest.mock('react-dom', () => ({
   ...jest.requireActual('react-dom'),
@@ -78,3 +81,26 @@ describe('<EditSpendingCapModal />', () => {
     expect(container).toMatchSnapshot();
   });
 });
+
+describe('countDecimalDigits()', () => {
+  // @ts-expect-error This is missing from the Mocha type definitions
+  it.each([
+    { numberString: '0', expectedDecimals: 0 },
+    { numberString: '100', expectedDecimals: 0 },
+    { numberString: '100.123', expectedDecimals: 3 },
+    { numberString: '3.141592654', expectedDecimals: 9 },
+  ])(
+    'should return $expectedDecimals decimals for `$numberString`',
+    ({
+      numberString,
+      expectedDecimals,
+    }: {
+      numberString: string;
+      expectedDecimals: number;
+    }) => {
+      const actual = countDecimalDigits(numberString);
+
+      expect(actual).toEqual(expectedDecimals);
+    },
+  );
+});
diff --git a/...tions/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx b/...tions/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx
@@ -1,5 +1,5 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import { hexToDecimal } from '../../../../../../../../shared/modules/conversion.utils';
@@ -32,7 +32,7 @@ import { useConfirmContext } from '../../../../../context/confirm';
 import { useAssetDetails } from '../../../../../hooks/useAssetDetails';
 import { useApproveTokenSimulation } from '../hooks/use-approve-token-simulation';
 
-function countDecimalDigits(numberString: string) {
+export function countDecimalDigits(numberString: string) {
   const decimalPointIndex = numberString.indexOf('.');
 
   if (decimalPointIndex === -1) {
@@ -128,17 +128,14 @@ export const EditSpendingCapModal = ({
     setCustomSpendingCapInputValue(formattedSpendingCap.toString());
   }, [customSpendingCapInputValue, formattedSpendingCap]);
 
-  const showDecimalError = useMemo(() => {
-    return (
-      decimals &&
-      parseInt(decimals, 10) < countDecimalDigits(customSpendingCapInputValue)
-    );
-  }, [decimals, customSpendingCapInputValue]);
+  const showDecimalError =
+    decimals &&
+    parseInt(decimals, 10) < countDecimalDigits(customSpendingCapInputValue);
 
   return (
     <Modal
       isOpen={isOpenEditSpendingCapModal}
-      onClose={() => handleCancel()}
+      onClose={handleCancel}
       isClosedOnEscapeKey
       isClosedOnOutsideClick
       className="edit-spending-cap-modal"
@@ -173,6 +170,15 @@ export const EditSpendingCapModal = ({
             style={{ width: '100%' }}
             inputProps={{ 'data-testid': 'custom-spending-cap-input' }}
           />
+          {showDecimalError && (
+            <Text
+              variant={TextVariant.bodySm}
+              color={TextColor.errorDefault}
+              paddingTop={1}
+            >
+              {t('editSpendingCapError', [decimals])}
+            </Text>
+          )}
           <Text
             variant={TextVariant.bodySm}
             color={TextColor.textAlternative}
@@ -183,15 +189,6 @@ export const EditSpendingCapModal = ({
               tokenSymbol || '',
             ])}
           </Text>
-          {showDecimalError && (
-            <Text
-              variant={TextVariant.bodySm}
-              color={TextColor.errorDefault}
-              paddingTop={1}
-            >
-              {t('editSpendingCapError', [decimals])}
-            </Text>
-          )}
         </ModalBody>
         <ModalFooter
           onSubmit={handleSubmit}