-
Notifications
You must be signed in to change notification settings - Fork 191
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: rfox improve no rewards address ux #8552
base: develop
Are you sure you want to change the base?
Conversation
useEffect(() => { | ||
handleRuneAddressChange(undefined) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See onChange()
below
@@ -116,7 +139,8 @@ export const AddressSelection: FC<AddressSelectionProps> = ({ | |||
return ( | |||
<Input | |||
{...register('manualRuneAddress', { | |||
minLength: 1, | |||
// Only required if user doesn't have a rewards address yet | |||
required: !currentRuneAddress, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More of a paranoia than anything else.
We will not render the manual field input if currentRuneAddress
(disabled account selection will be rendered instead, or a tag for EVM wallets), so we should be safe with required: true
but better be safe than sorry by being explicit.
onChange: e => { | ||
if (!e.target.value) { | ||
handleRuneAddressChange(undefined) | ||
} | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reset on empty input
@@ -110,7 +110,7 @@ export const StakeInput: React.FC<StakeInputProps & StakeRouteProps> = ({ | |||
|
|||
const methods = useForm<StakeInputValues>({ | |||
defaultValues: defaultFormValues, | |||
mode: 'onChange', | |||
mode: 'all', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i.e onBlur
, onChange
, onSubmit
and onTouched
, ensuring that the input becomes red if errorred in all those change modes.
if (errors.manualRuneAddress?.type === 'required') return translate('RFOX.selectRuneAddress') | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Explicit handling of the required
error, since it is not coming from a custom validation rule, but from native react-hook-form's required
property above
!isAccountsMetadataLoading | ||
Boolean( | ||
errors.amountFieldInput || | ||
// Required rewards input isn't an error per se |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoids screaming at users with big scary red color for the required case
Description
Does what it says on the box, makes things more obvious for users re: no rewards address:
In this case, we effectively assume that manual address input is the default/only valid flow here. This may not be exactly true in case accounts are loading, but this is a compromise
to make things work for most cases and reduce regressions risks, at the expense of this one specific case (users can always revert back to wallet account selection).
This means that native users will not end up there (unless explicitly selecting manual address input, in which case manual input will be required as expected), as they will default to account selection.
For others (e.g EVM-only wallets), the input will be the default, and since it is required, will render default react-hook-form/browser red required styles.
Issue (if applicable)
closes #8487
Risk
Low/Medium, RFOX form validation is quite a risky one
Testing
(unless explicitly selecting manual address input, in which case the input validation flow should be just the same as EVM wallets)
Engineering
Operations
Screenshots (if applicable)
https://jam.dev/c/2ad3937d-0676-4788-b82b-ce2b39fcfca8