MetaMask / MetaMask/metamask-mobile

Transaction nonce input is too small

Open
#6,871 4 comments 0 reactions 0 assignees View on GitHub
Sev2-normal team-confirmations-planning type-bug type-pinned
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

**Describe the bug**
For the last 2 years atleast, users with more than 1000 nonce have had a subpar experience with editing transaction nonce as the input width is significantly too small.
Additionally, on iOS it does not prompt the keyboard which is also annoying.

**Screenshots**
![image](https://github.com/MetaMask/metamask-mobile/assets/15788890/dd0eb3d0-0ded-44c4-a6a7-f639081c78d9)

**To Reproduce**
_Steps to reproduce the behavior_
1. Enable Edit Nonce
2. Create a transaction on a wallet with >= 1000 nonce
3. Click edit nonce
4. Observe the issue

**Expected behavior**
For the input to grow appropriately within reason.

**Smartphone (please complete the following information):**
- Device: Any mobile device
- OS: Any mobile OS
- App Version - Any app version in the last 2 years

**Assumed Problematic Code Areas and Potential Fixes**
* Width Issue
https://github.com/MetaMask/metamask-mobile/blob/88ee868a911b769959208f4d7733cb27e9403690/app/components/UI/CustomNonceModal/index.js#L45
Fix:
```diff
- showSoftInputOnFocus={false}
+ showSoftInputOnFocus={true}
```
* Keyboard Hidden Issue
https://github.com/MetaMask/metamask-mobile/blob/88ee868a911b769959208f4d7733cb27e9403690/app/components/UI/CustomNonceModal/index.js#L164
Fix:
```diff
- const createStyles = (colors) =>
+ const createStyles = (colors, nonce) =>
...
- width: 80,
+ width: nonce.length * 25,
+ minWidth: 80,
+ maxWidth: 200,
...
- const styles = createStyles(colors);
+ const styles = createStyles(colors, nonce);
```

-------------------------------------------------------------
_to be added after bug submission by internal support / PM_
**Severity**

- How critical is the impact of this bug on a user?
- Add stats if available on % of customers impacted
- Is this visible to all users?
- Is this tech debt?

Contributor guide

Open the contributing guide

Research direction

Start in app/components/UI/CustomNonceModal/index.js, focusing on the input and createStyles locations linked in the issue. Reproduce with Edit Nonce enabled and a wallet nonce of at least 1000 on iOS and another mobile platform. Done means the nonce remains readable within a reasonable width and the keyboard appears when editing on iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.