From f972606766a9c6be0de7d3276075fb82dbf5094d Mon Sep 17 00:00:00 2001
From: schmanu <manu@safe.global>
Date: Thu, 6 Jul 2023 17:35:48 +0200
Subject: [PATCH] fix: nonce input tweaks

- readonly instead of disabled
- only add right padding if adornment is shown
---
 .../tx-flow/common/TxNonce/index.tsx          | 31 ++++++++++++-------
 .../tx-flow/common/TxNonce/styles.module.css  |  5 ++-
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index b001979e50..1310e8498f 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -25,6 +25,7 @@ import usePreviousNonces from '@/hooks/usePreviousNonces'
 import { isRejectionTx } from '@/utils/transactions'
 
 import css from './styles.module.css'
+import classNames from 'classnames'
 
 const CustomPopper = function (props: PopperProps) {
   return <Popper {...props} sx={{ width: '300px !important' }} placement="bottom-start" />
@@ -102,6 +103,8 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
         },
       }}
       render={({ field, fieldState }) => {
+        const showRecommendedNonceButton = !readOnly && recommendedNonce.toString() !== field.value
+
         return (
           <Autocomplete
             value={field.value}
@@ -116,7 +119,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
               }
             }}
             options={previousNonces}
-            disabled={readOnly}
+            readOnly={readOnly}
             getOptionLabel={(option) => option.toString()}
             renderOption={(props, option) => {
               return <NonceFormOption menuItemProps={props} nonce={option} />
@@ -136,19 +139,23 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                     InputProps={{
                       ...params.InputProps,
                       name: field.name,
-                      endAdornment:
-                        !readOnly && recommendedNonce.toString() !== field.value ? (
-                          <InputAdornment position="end" className={css.adornment}>
-                            <Tooltip title="Reset to recommended nonce">
-                              <IconButton onClick={resetNonce} size="small" color="primary">
-                                <RotateLeftIcon fontSize="small" />
-                              </IconButton>
-                            </Tooltip>
-                          </InputAdornment>
-                        ) : null,
+                      endAdornment: showRecommendedNonceButton ? (
+                        <InputAdornment position="end" className={css.adornment}>
+                          <Tooltip title="Reset to recommended nonce">
+                            <IconButton onClick={resetNonce} size="small" color="primary">
+                              <RotateLeftIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        </InputAdornment>
+                      ) : null,
                       readOnly,
                     }}
-                    className={css.input}
+                    className={classNames([
+                      css.input,
+                      {
+                        [css.withAdornment]: showRecommendedNonceButton,
+                      },
+                    ])}
                     sx={{
                       minWidth: `clamp(1ch, ${field.value.length}ch, 200px)`,
                     }}
diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
index 9eb7bd83b3..cfa81cf3fb 100644
--- a/src/components/tx-flow/common/TxNonce/styles.module.css
+++ b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -4,7 +4,10 @@
 
 .input input {
   font-weight: bold;
-  padding-right: 30px !important;
+}
+
+.input.withAdornment input {
+  padding-right: 24px !important;
 }
 
 .adornment {