fix: improve multisig approval modal layout and functionality (#11403)

This commit is contained in:
Arjun Porwal 2025-03-20 08:27:06 +05:30 committed by GitHub
parent 5af60050f9
commit e45f0beae1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -79,6 +79,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
isMultiCall: !!multisig && (multisig.approvals.length + 1) >= threshold,
multisig
});
setCallHex('');
setCallData(EMPTY_CALL);
}, [hash, ongoing, threshold]);
@ -173,7 +174,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
<Modal.Columns hint={t('The call hash from the list of available and unapproved calls.')}>
<Dropdown
label={t('pending hashes {{count}}', {
replace: { count: hashes.length }
replace: { count: `(${hashes.length})` }
})}
onChange={setHash}
options={hashes}
@ -231,27 +232,29 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
<>
{isCallOverride && (
<Modal.Columns hint={t('The call data for this transaction matching the hash. Once sent, the multisig will be executed against this.')}>
{callData && callInfo
? (
<Expander
isPadded
summary={`${callInfo.section}.${callInfo.method}`}
summaryMeta={callInfo.meta}
>
<CallDisplay
className='details'
value={callData}
/>
</Expander>
)
: (
<Input
autoFocus
isError={!callHex || !!callError}
label={t('call data for final approval')}
onChange={setCallHex}
/>
)}
<Input
autoFocus
isError={!callHex || !!callError}
label={t('call data for final approval')}
onChange={setCallHex}
value={callHex}
/>
{callData && callInfo &&
(
<div style={{ marginTop: 8 }}>
<Expander
isPadded
summary={`${callInfo.section}.${callInfo.method}`}
summaryMeta={callInfo.meta}
>
<CallDisplay
className='details'
value={callData}
/>
</Expander>
</div>
)
}
{callError && (
<MarkError content={callError} />
)}
@ -290,7 +293,8 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
const StyledModal = styled(Modal)`
.tipToggle {
width: 100%;
width: fit-content;
float: right;
text-align: right;
}
`;