Fix: show an error if risk isn't acknowledged #2216
Conversation
Branch preview✅ Deploy successful! |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
|
Alternatively, we could also give the checkbox area a red outline and scroll to it if necessary if we want so save vertical space. |
|
@usame-algan done. I suggest we keep the warning message too though, for accessibility. I think highlighting the checkbox is a nice effect but it can be unclear without a call to action. |
| useEffect(() => { | ||
| if (isRiskIgnored && checkboxRef.current) { | ||
| checkboxRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }) | ||
| const timeout = setTimeout(() => setIsRiskIgnored(false), 3000) |
There was a problem hiding this comment.
Why do we need to set the state to false after 3 seconds? When pressing submit, the checkbox changes to red but changes back to black after 3 seconds. Shouldn't it stay red until the user checks it?
There was a problem hiding this comment.
So that when you click Submit again, it flashes red again
There was a problem hiding this comment.
Imo it should stay red until there is some user action. Right now the warning message also disappears automatically.
There was a problem hiding this comment.
That would require bidirectional dataflow between the submit button and the checkbox.
There was a problem hiding this comment.
If I remove line 48 and 49 in this file it seems to work as expected? Pressing submit multiple times won't animate anything again but the checkbox stays red until the user checks it.
There was a problem hiding this comment.
Pressing submit multiple times won't animate anything
Yeah, that's the part I don't like. But let's do it as you say. Resetting the error with a timeout isn't great either.
What it solves
When submitting a tx with risk, it will now ask to acknowledge the risk.