fix: render nonce as text in readonly, fix input width

safe-global · Jul 7, 2023 · 8fe9163 · 8fe9163
1 parent f972606
commit 8fe9163
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -103,7 +103,13 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
         },
       }}
       render={({ field, fieldState }) => {
-        const showRecommendedNonceButton = !readOnly && recommendedNonce.toString() !== field.value
+        if (readOnly) {
+          return <>{nonce}</>
+        }
+
+        console.log(field, field.value)
+
+        const showRecommendedNonceButton = recommendedNonce.toString() !== field.value
 
         return (
           <Autocomplete
@@ -119,7 +125,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
               }
             }}
             options={previousNonces}
-            readOnly={readOnly}
             getOptionLabel={(option) => option.toString()}
             renderOption={(props, option) => {
               return <NonceFormOption menuItemProps={props} nonce={option} />
@@ -148,7 +153,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                           </Tooltip>
                         </InputAdornment>
                       ) : null,
-                      readOnly,
                     }}
                     className={classNames([
                       css.input,
@@ -157,7 +161,9 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                       },
                     ])}
                     sx={{
-                      minWidth: `clamp(1ch, ${field.value.length}ch, 200px)`,
+                      minWidth: `clamp(1ch, calc(${field.value.toString().length}ch${
+                        showRecommendedNonceButton ? ' + 28px' : ' + 4px'
+                      }), 200px)`,
                     }}
                   />
                 </Tooltip>

diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -4,6 +4,7 @@
 
 .input input {
   font-weight: bold;
+  min-width: 0px !important;
 }
 
 .input.withAdornment input {