fix: nonce input tweaks

- readonly instead of disabled - only add right padding if adornment is shown
safe-global · Jul 6, 2023 · f972606 · f972606
1 parent c9bff78
commit f972606
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -4,7 +4,10 @@
 
 .input input {
   font-weight: bold;
-  padding-right: 30px !important;
+}
+
+.input.withAdornment input {
+  padding-right: 24px !important;
 }
 
 .adornment {