fix: nonce field styles

safe-global · Sep 28, 2023 · 920c039 · 920c039
1 parent 3e026a4
commit 920c039
Showing 1 changed file with 24 additions and 3 deletions.
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -14,6 +14,7 @@ import {
   ListSubheader,
   type ListSubheaderProps,
 } from '@mui/material'
+import { createFilterOptions } from '@mui/material/Autocomplete'
 import { Controller, useForm } from 'react-hook-form'
 
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
@@ -81,13 +82,22 @@ const NonceFormOption = memo(function NonceFormOption({
   )
 })
 
-const getFieldMinWidth = (value: string): string => {
+const getFieldMinWidth = (value: string, showRecommendedNonceButton = false): string => {
   const MIN_CHARS = 5
   const MAX_WIDTH = '200px'
+  const ADORNMENT_PADDING = '24px'
 
-  return `clamp(calc(${MIN_CHARS}ch + 6px), calc(${Math.max(MIN_CHARS, value.length)}ch + 6px), ${MAX_WIDTH})`
+  const clamped = `clamp(calc(${MIN_CHARS}ch + 6px), calc(${Math.max(MIN_CHARS, value.length)}ch + 6px), ${MAX_WIDTH})`
+
+  if (showRecommendedNonceButton) {
+    return `calc(${clamped} + ${ADORNMENT_PADDING})`
+  }
+
+  return clamped
 }
 
+const filter = createFilterOptions<string>()
+
 enum TxNonceFormFieldNames {
   NONCE = 'nonce',
 }
@@ -169,6 +179,17 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
             }}
             options={[recommendedNonce, ...previousNonces]}
             getOptionLabel={(option) => option.toString()}
+            filterOptions={(options, params) => {
+              const filtered = filter(options, params)
+
+              const isExisting = options.some((option) => params.inputValue === option)
+
+              if (params.inputValue !== '' && !isExisting) {
+                filtered.push(recommendedNonce)
+              }
+
+              return filtered
+            }}
             renderOption={(props, option) => {
               const isRecommendedNonce = option === recommendedNonce
               const isInitialPreviousNonce = option === previousNonces[0]
@@ -213,7 +234,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
                       },
                     ])}
                     sx={{
-                      minWidth: getFieldMinWidth(field.value),
+                      minWidth: getFieldMinWidth(field.value, showRecommendedNonceButton),
                     }}
                   />
                 </Tooltip>