fix: Custom Approve value is reset whenever we see Transaction detail…

…s or click Edit (#6711) * keep inputted token spend value when present * edit spend value should not set dapp default value
MetaMask · Jun 27, 2023 · 569743a · 569743a
1 parent 04f3eff
commit 569743a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.test.tsx b/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.test.tsx
@@ -7,21 +7,23 @@ import CustomSpendCap from './CustomSpendCap';
 import {
   ACCOUNT_BALANCE,
   CUSTOM_SPEND_CAP_TEST_ID,
+  DAPP_PROPOSED_VALUE,
   INPUT_VALUE_CHANGED,
   TICKER,
 } from './CustomSpendCap.constants';
 // Internal dependencies.
 import { CustomSpendCapProps } from './CustomSpendCap.types';
 
 function RenderCustomSpendCap(
-  tokenSpendValue: string,
+  tokenSpendValue = '',
   isInputValid: () => boolean = () => true,
+  dappProposedValue: string = DAPP_PROPOSED_VALUE,
 ) {
   return (
     <CustomSpendCap
       ticker={TICKER}
       accountBalance={ACCOUNT_BALANCE}
-      dappProposedValue={tokenSpendValue}
+      dappProposedValue={dappProposedValue}
       onInputChanged={INPUT_VALUE_CHANGED}
       isEditDisabled={false}
       editValue={() => ({})}
@@ -104,4 +106,18 @@ describe('CustomSpendCap', () => {
 
     expect(isInputValid).toHaveBeenCalledWith(true);
   });
+
+  it('should render token spend value if present', async () => {
+    const inputtedSpendValue = '100';
+
+    const { findByText } = renderWithProvider(
+      RenderCustomSpendCap(
+        inputtedSpendValue,
+        isInputValid,
+        DAPP_PROPOSED_VALUE,
+      ),
+    );
+
+    expect(await findByText(`${inputtedSpendValue} ${TICKER}`)).toBeDefined();
+  });
 });
diff --git a/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx b/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx
@@ -60,10 +60,9 @@ const CustomSpendCap = ({
   }, [inputHasError, isInputValid]);
 
   useEffect(() => {
-    if (dappProposedValue) {
-      setValue(dappProposedValue);
-    }
-  }, [dappProposedValue]);
+    const spendValue = tokenSpendValue || dappProposedValue;
+    setValue(spendValue);
+  }, [dappProposedValue, tokenSpendValue]);
 
   const handleDefaultValue = () => {
     setMaxSelected(false);
@@ -72,8 +71,7 @@ const CustomSpendCap = ({
   };
 
   const handlePress = () => {
-    if (isEditDisabled) editValue();
-    handleDefaultValue();
+    isEditDisabled ? editValue() : handleDefaultValue();
   };
 
   useEffect(() => {

diff --git a/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap b/...mponent-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap
@@ -57,9 +57,9 @@ exports[`CustomSpendCap should match snapshot 1`] = `
         onStartShouldSetResponder={[Function]}
       >
         <SvgMock
-          color="#BBC0C5"
+          color="#D73847"
           height={16}
-          name="Question"
+          name="Danger"
           style={
             Object {
               "height": 16,
@@ -137,11 +137,13 @@ exports[`CustomSpendCap should match snapshot 1`] = `
                 "paddingBottom": 0,
                 "paddingTop": 0,
               },
-              false,
+              Object {
+                "color": "#D73847",
+              },
             ]
           }
           testID="custom-spend-cap-input-input-id"
-          value=""
+          value="115792089237316195423570985008687907853269984665640564039457.584007913129639936"
         />
       </View>
       <Text
@@ -181,7 +183,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
         }
       }
     >
-      Only enter a number that you're comfortable with the third party spending now or in the future. You can always increase the spending cap later.
+      This allows the third party to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap.
        
       <Text
         onPress={[Function]}

diff --git a/app/components/UI/ApproveTransactionReview/index.js b/app/components/UI/ApproveTransactionReview/index.js
@@ -664,6 +664,14 @@ class ApproveTransactionReview extends PureComponent {
     });
   };
 
+  handleCustomSpendOnInputChange = (value) => {
+    if (isNumber(value)) {
+      this.setState({
+        tokenSpendValue: value.replace(/[^0-9.]/g, ''),
+      });
+    }
+  };
+
   renderDetails = () => {
     const {
       originalApproveAmount,
@@ -872,13 +880,7 @@ class ApproveTransactionReview extends PureComponent {
                           toggleLearnMoreWebPage={this.toggleLearnMoreWebPage}
                           isEditDisabled={Boolean(isReadyToApprove)}
                           editValue={this.goToSpendCap}
-                          onInputChanged={(value) => {
-                            if (isNumber(value)) {
-                              this.setState({
-                                tokenSpendValue: value.replace(/[^0-9.]/g, ''),
-                              });
-                            }
-                          }}
+                          onInputChanged={this.handleCustomSpendOnInputChange}
                           isInputValid={this.handleSetIsCustomSpendInputValid}
                         />
                       )