diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx index 1310e8498f..27cb39261e 100644 --- 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 ( option.toString()} renderOption={(props, option) => { return @@ -148,7 +153,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo ) : 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)`, }} /> diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css index cfa81cf3fb..614c607033 100644 --- 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 {