Fix custom provider error handling

src/components/@shared/FormInput/InputElement/Provider/index.tsx

@@ -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, {
@@ -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 })

src/components/@shared/FormInput/index.tsx

@@ -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 {
@@ -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,
@@ -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]]
         )
       )
     }