MetaMask / MetaMask/metamask-mobile
Transaction nonce input is too small
- 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**

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