Skip to content

Commit

Permalink
Fix custom provider error handling (#1965)
Browse files Browse the repository at this point in the history
* fixes error handling for is valid and is compatible custom provider input field

* revert some input form changes
  • Loading branch information
bogdanfazakas authored Sep 25, 2023
1 parent 24d8998 commit a976e5b
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 17 deletions.
23 changes: 19 additions & 4 deletions src/components/@shared/FormInput/InputElement/Provider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,17 @@ export default function CustomProvider(props: InputProps): ReactElement {
// No way to detect a failed request with ProviderInstance.isValidProvider,
// making this error show up for multiple cases it shouldn't, like network
// down.
if (!isValid)
throw Error(
if (!isValid) {
setFieldError(
`${field.name}.url`,
'✗ No valid provider detected. Check your network, your URL and try again.'
)
LoggerInstance.error(
'[Custom Provider]:',
'✗ No valid provider detected. Check your network, your URL and try again.'
)
return
}

// Check if valid provider is for same chain user is on
const providerResponse = await axios.get(field.value.url, {
Expand All @@ -53,10 +60,18 @@ export default function CustomProvider(props: InputProps): ReactElement {
providerChain === userChainId
? true
: !!(providerChain.length > 0 && providerChain.includes(userChainId))
if (!isCompatible)
throw Error(

if (!isCompatible) {
setFieldError(
`${field.name}.url`,
'✗ This provider is incompatible with the network your wallet is connected to.'
)
LoggerInstance.error(
'[Custom Provider]:',
'✗ This provider is incompatible with the network your wallet is connected to.'
)
return
}

// if all good, add provider to formik state
helpers.setValue({ url: field.value.url, valid: isValid, custom: true })
Expand Down
33 changes: 20 additions & 13 deletions src/components/@shared/FormInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,21 @@ export interface InputProps {
disclaimerValues?: string[]
}

function checkError(form: any, field: FieldInputProps<any>) {
const touched = getObjectPropertyByPath(form?.touched, field?.name)
const errors = getObjectPropertyByPath(form?.errors, field?.name)

return (
touched &&
errors &&
!field.name.endsWith('.files') &&
!field.name.endsWith('.links') &&
!field.name.endsWith('consumerParameters')
)
function checkError(
form: any,
parsedFieldName: string[],
field: FieldInputProps<any>
) {
if (
(form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
(form?.touched[field?.name] &&
form?.errors[field?.name] &&
field.name !== 'files' &&
field.name !== 'links')
) {
return true
}
}

export default function Input(props: Partial<InputProps>): ReactElement {
Expand All @@ -99,10 +103,13 @@ export default function Input(props: Partial<InputProps>): ReactElement {
} = props

const isFormikField = typeof field !== 'undefined'
const isNestedField = field?.name?.includes('.')
// TODO: this feels hacky as it assumes nested `values` store. But we can't use the
// `useField()` hook in here to get `meta.error` so we have to match against form?.errors?
// handling flat and nested data at same time.
const hasFormikError = checkError(form, field)
const parsedFieldName =
isFormikField && (isNestedField ? field?.name.split('.') : [field?.name])
const hasFormikError = checkError(form, parsedFieldName, field)

const styleClasses = cx({
field: true,
Expand All @@ -117,7 +124,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
if (disclaimer && disclaimerValues) {
setDisclaimerVisible(
disclaimerValues.includes(
getObjectPropertyByPath(props.form?.values, field?.name)
props.form?.values[parsedFieldName[0]]?.[parsedFieldName[1]]
)
)
}
Expand Down

1 comment on commit a976e5b

@vercel
Copy link

@vercel vercel bot commented on a976e5b Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.