diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index d11b176ba4..f2582cbad0 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -54,6 +54,18 @@ const NonceFormOption = memo(function NonceFormOption({
)
})
+const getFieldMinWidth = (value: string, showRecommendedNonceButton?: boolean): string => {
+ const MIN_CHARS = 4
+ const MAX_WIDTH = '200px'
+
+ const extraWidth = `${showRecommendedNonceButton ? 32 : 8}px`
+
+ return `clamp(calc(${MIN_CHARS}ch + ${extraWidth}), calc(${Math.max(
+ MIN_CHARS,
+ value.length,
+ )}ch + ${extraWidth}), ${MAX_WIDTH})`
+}
+
enum TxNonceFormFieldNames {
NONCE = 'nonce',
}
@@ -114,8 +126,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
const showRecommendedNonceButton = recommendedNonce !== field.value
- const extraWidth = showRecommendedNonceButton ? 32 : 8
-
return (
@@ -188,6 +196,8 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
)
}
+const skeletonMinWidth = getFieldMinWidth('')
+
const TxNonce = () => {
const { nonce, recommendedNonce } = useContext(SafeTxContext)
@@ -198,7 +208,7 @@ const TxNonce = () => {
#
{nonce === undefined || recommendedNonce === undefined ? (
-
+
) : (
)}