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 ? ( - + ) : ( )}