From 8299329cf857de719d4f672499fef92e6a16fb10 Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <vinicius.stevam@consensys.io>
Date: Wed, 21 Aug 2024 10:56:38 +0100
Subject: [PATCH 1/4] fix: increment custom nonce using arrow up and down

---
 .../confirm-transaction-base.test.js.snap     | 27 +++++++++++++
 .../confirm-transaction-base.component.js     | 38 ++++++++++++-------
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 63bf71e0c409..e6c929ce27a0 100644
--- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -459,6 +459,33 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 </div>
               </div>
             </div>
+            <div>
+              <div
+                class="confirm-detail-row"
+              >
+                <div
+                  class="confirm-detail-row__label"
+                >
+                  Custom nonce
+                </div>
+                <div
+                  class="custom-nonce-input"
+                >
+                  <div
+                    class="mm-box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
+                    min="0"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                      focused="false"
+                      type="number"
+                      value="undefined"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index 8caf1043cf4a..bf7994761129 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -23,7 +23,6 @@ import {
 import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display';
 
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
-import TextField from '../../../components/ui/text-field';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { getMethodName } from '../../../helpers/utils/metrics';
 import {
@@ -42,7 +41,7 @@ import {
 import { TransactionModalContextProvider } from '../../../contexts/transaction-modal';
 import TransactionDetail from '../components/transaction-detail/transaction-detail.component';
 import TransactionDetailItem from '../components/transaction-detail-item/transaction-detail-item.component';
-import { Text } from '../../../components/component-library';
+import { Text, TextField } from '../../../components/component-library';
 import LoadingHeartBeat from '../../../components/ui/loading-heartbeat';
 import LedgerInstructionField from '../components/ledger-instruction-field';
 import {
@@ -431,6 +430,19 @@ export default class ConfirmTransactionBase extends Component {
       );
     };
 
+    const handleNonceChange = ({ target: { value } }) => {
+      const inputValue = Number(value);
+
+      if (inputValue < 0 || isNaN(inputValue)) {
+        updateCustomNonce('');
+        return;
+      }
+
+      updateCustomNonce(String(inputValue));
+
+      getNextNonce();
+    };
+
     const renderTotalMaxAmount = ({
       useMaxFee,
       isBoldTextAndNotOverridden = false,
@@ -496,6 +508,13 @@ export default class ConfirmTransactionBase extends Component {
         : primaryTotalTextOverride;
     };
 
+    const nextNonceValue =
+      typeof nextNonce === 'number' ? nextNonce.toString() : null;
+
+    if (!customNonceValue && nextNonceValue) {
+      updateCustomNonce(nextNonceValue);
+    }
+
     const nonceField =
       useNonceField && !isSigningOrSubmitting ? (
         <div>
@@ -507,20 +526,11 @@ export default class ConfirmTransactionBase extends Component {
               <TextField
                 type="number"
                 min={0}
-                placeholder={
-                  typeof nextNonce === 'number' ? nextNonce.toString() : null
-                }
-                onChange={({ target: { value } }) => {
-                  if (!value.length || Number(value) < 0) {
-                    updateCustomNonce('');
-                  } else {
-                    updateCustomNonce(String(Math.floor(value)));
-                  }
-                  getNextNonce();
-                }}
+                placeholder={nextNonceValue}
+                onChange={handleNonceChange}
                 fullWidth
                 margin="dense"
-                value={customNonceValue || ''}
+                value={customNonceValue ?? ''}
               />
             </div>
           </div>

From 965fbce6f1c4eb8af8dc13c52269675a4a5090f2 Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <vinicius.stevam@consensys.io>
Date: Wed, 21 Aug 2024 13:14:23 +0100
Subject: [PATCH 2/4] fix unit test

---
 .../__snapshots__/confirm-transaction-base.test.js.snap       | 4 ++--
 .../confirm-transaction-base/confirm-transaction-base.test.js | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index e6c929ce27a0..542342df5e58 100644
--- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -249,7 +249,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
           <div
             class="confirm-page-container-summary__nonce"
           >
-            #undefined
+            #70
           </div>
         </div>
         <div
@@ -480,7 +480,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
                       focused="false"
                       type="number"
-                      value="undefined"
+                      value="70"
                     />
                   </div>
                 </div>
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
index fc8bbe116069..2430a81768e6 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
@@ -177,6 +177,8 @@ const baseStore = {
     tokenList: {},
     ensResolutionsByAddress: {},
     snaps: {},
+    useNonceField: true,
+    customNonceValue: '70',
   },
   confirmTransaction: {
     txData: {

From 2698877c2aa981034002d215e84226f42641995a Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <vinicius.stevam@consensys.io>
Date: Thu, 22 Aug 2024 13:31:01 +0100
Subject: [PATCH 3/4] applied suggestions

---
 test/e2e/tests/tokens/increase-token-allowance.spec.js        | 4 ++--
 .../confirm-transaction-base.component.js                     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/e2e/tests/tokens/increase-token-allowance.spec.js b/test/e2e/tests/tokens/increase-token-allowance.spec.js
index ed35d314228b..a3f0ceef9be9 100644
--- a/test/e2e/tests/tokens/increase-token-allowance.spec.js
+++ b/test/e2e/tests/tokens/increase-token-allowance.spec.js
@@ -1,7 +1,6 @@
 const { strict: assert } = require('assert');
 const FixtureBuilder = require('../../fixture-builder');
 const {
-  defaultGanacheOptions,
   openDapp,
   sendTransaction,
   unlockWallet,
@@ -10,6 +9,7 @@ const {
   ACCOUNT_2,
   WINDOW_TITLES,
   clickNestedButton,
+  multipleGanacheOptions,
 } = require('../../helpers');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
 
@@ -25,7 +25,7 @@ describe('Increase Token Allowance', function () {
         fixtures: new FixtureBuilder()
           .withPermissionControllerConnectedToTestDapp()
           .build(),
-        ganacheOptions: defaultGanacheOptions,
+        ganacheOptions: multipleGanacheOptions,
         smartContract,
         title: this.test.fullTitle(),
       },
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index bf7994761129..63b156a26ff5 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -434,11 +434,11 @@ export default class ConfirmTransactionBase extends Component {
       const inputValue = Number(value);
 
       if (inputValue < 0 || isNaN(inputValue)) {
-        updateCustomNonce('');
+        updateCustomNonce(undefined);
         return;
       }
 
-      updateCustomNonce(String(inputValue));
+      updateCustomNonce(inputValue);
 
       getNextNonce();
     };

From 2e3080515603db9c59e1f3de63056d4a4e278959 Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <vinicius.stevam@consensys.io>
Date: Thu, 22 Aug 2024 16:50:36 +0100
Subject: [PATCH 4/4] fix: only update custom nonce when nonce field renders

---
 .../tokens/increase-token-allowance.spec.js   |  4 +-
 .../confirm-transaction-base.component.js     | 40 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/test/e2e/tests/tokens/increase-token-allowance.spec.js b/test/e2e/tests/tokens/increase-token-allowance.spec.js
index a3f0ceef9be9..ed35d314228b 100644
--- a/test/e2e/tests/tokens/increase-token-allowance.spec.js
+++ b/test/e2e/tests/tokens/increase-token-allowance.spec.js
@@ -1,6 +1,7 @@
 const { strict: assert } = require('assert');
 const FixtureBuilder = require('../../fixture-builder');
 const {
+  defaultGanacheOptions,
   openDapp,
   sendTransaction,
   unlockWallet,
@@ -9,7 +10,6 @@ const {
   ACCOUNT_2,
   WINDOW_TITLES,
   clickNestedButton,
-  multipleGanacheOptions,
 } = require('../../helpers');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
 
@@ -25,7 +25,7 @@ describe('Increase Token Allowance', function () {
         fixtures: new FixtureBuilder()
           .withPermissionControllerConnectedToTestDapp()
           .build(),
-        ganacheOptions: multipleGanacheOptions,
+        ganacheOptions: defaultGanacheOptions,
         smartContract,
         title: this.test.fullTitle(),
       },
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index 63b156a26ff5..b33ada06ccde 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -510,32 +510,32 @@ export default class ConfirmTransactionBase extends Component {
 
     const nextNonceValue =
       typeof nextNonce === 'number' ? nextNonce.toString() : null;
+    const renderNonceField = useNonceField && !isSigningOrSubmitting;
 
-    if (!customNonceValue && nextNonceValue) {
+    if (renderNonceField && !customNonceValue && nextNonceValue) {
       updateCustomNonce(nextNonceValue);
     }
 
-    const nonceField =
-      useNonceField && !isSigningOrSubmitting ? (
-        <div>
-          <div className="confirm-detail-row">
-            <div className="confirm-detail-row__label">
-              {t('nonceFieldHeading')}
-            </div>
-            <div className="custom-nonce-input">
-              <TextField
-                type="number"
-                min={0}
-                placeholder={nextNonceValue}
-                onChange={handleNonceChange}
-                fullWidth
-                margin="dense"
-                value={customNonceValue ?? ''}
-              />
-            </div>
+    const nonceField = renderNonceField ? (
+      <div>
+        <div className="confirm-detail-row">
+          <div className="confirm-detail-row__label">
+            {t('nonceFieldHeading')}
+          </div>
+          <div className="custom-nonce-input">
+            <TextField
+              type="number"
+              min={0}
+              placeholder={nextNonceValue}
+              onChange={handleNonceChange}
+              fullWidth
+              margin="dense"
+              value={customNonceValue ?? ''}
+            />
           </div>
         </div>
-      ) : null;
+      </div>
+    ) : null;
 
     const { simulationData } = txData;