From 920c039ab3c7829791f35a8143bc36cc4af65aaf Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Thu, 28 Sep 2023 10:56:58 +0200
Subject: [PATCH] fix: nonce field styles

---
 .../tx-flow/common/TxNonce/index.tsx          | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 3aa9709623..087c5d54cf 100644
--- 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>