Skip to content

Commit

Permalink
fix: nonce increment/decrement functionality using arrow buttons (#26569
Browse files Browse the repository at this point in the history 
)

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

**Context**
When customizing the nonce using a lower increment button nonce value is
set to 0, using higher increment button results in nonce = 1.

This PR aims to fix the support of the arrow buttons to
increase/decrease the number taking the suggested next nonce as the
base.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Related issues**

Fixes: #23535

## **Manual testing steps**

1. Enable custom nonce
2. Send Eth
3. Customize nonce using the arrow buttons

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

[Screencast from 21-08-2024
10:42:17.webm](https://github.com/user-attachments/assets/d4fc505f-e2f0-4636-8462-5f0c1a2e050b)



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

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

---------

Co-authored-by: sleepytanya <[email protected]>
  • Loading branch information
@vinistevam @sleepytanya
vinistevam and sleepytanya authored Sep 3, 2024
1 parent 5c5bc87 commit 56363e2
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 31 deletions.
29 changes: 28 additions & 1 deletion ...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
<div
class="confirm-page-container-summary__nonce"
>
#undefined
#70
</div>
</div>
<div
Expand Down Expand Up @@ -449,6 +449,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="70"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
70 changes: 40 additions & 30 deletions ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -431,6 +430,19 @@ export default class ConfirmTransactionBase extends Component {
);
};

const handleNonceChange = ({ target: { value } }) => {
const inputValue = Number(value);

if (inputValue < 0 || isNaN(inputValue)) {
updateCustomNonce(undefined);
return;
}

updateCustomNonce(inputValue);

getNextNonce();
};

const renderTotalMaxAmount = ({
useMaxFee,
isBoldTextAndNotOverridden = false,
Expand Down Expand Up @@ -496,36 +508,34 @@ export default class ConfirmTransactionBase extends Component {
: primaryTotalTextOverride;
};

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={
typeof nextNonce === 'number' ? nextNonce.toString() : null
}
onChange={({ target: { value } }) => {
if (!value.length || Number(value) < 0) {
updateCustomNonce('');
} else {
updateCustomNonce(String(Math.floor(value)));
}
getNextNonce();
}}
fullWidth
margin="dense"
value={customNonceValue || ''}
/>
</div>
const nextNonceValue =
typeof nextNonce === 'number' ? nextNonce.toString() : null;
const renderNonceField = useNonceField && !isSigningOrSubmitting;

if (renderNonceField && !customNonceValue && nextNonceValue) {
updateCustomNonce(nextNonceValue);
}

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;

Expand Down
2 changes: 2 additions & 0 deletions ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,8 @@ const baseStore = {
tokenList: {},
ensResolutionsByAddress: {},
snaps: {},
useNonceField: true,
customNonceValue: '70',
},
confirmTransaction: {
txData: {
Expand Down

0 comments on commit 56363e2

Please sign in to comment.