feat: focus ict errored field

[ncomont]

don't merge this, please

[zoontek]

Don't forget to remove the listeners to avoid leaks / updating unmounted components states:

useEffect(() => {
  const removeRouteListener = listenFields(["route"], ({ route: { value } }) => setRoute(value));
  const removeResultsListener = listenFields(["results"], () => refresh());

  return () => {
    removeRouteListener();
    removeResultsListener();
  };
}, [listenFields, refresh]);

[zoontek]

Avoid non-boolean values in conditions (orphanErrors.length -> orphanErrors.length > 0).
It often create issues, especially in react renders.

For example:

{orphanErrors.length && <p>Hello</p>} // will print the text "0" is array is empty

[zoontek]

I highly recommend using an array of tuples (with fixed size: 2). You can also default to a fixed instance of an empty array to avoid useless conditions in your components:

type ErrorsArray = Array<[name: string, error: string | undefined]>; // array of [string, string | undefined]
const NO_ERRORS: ErrorsArray = [];

type Props = {
  initialBeneficiary?: Beneficiary;
  amount: Amount;
  errors?: ErrorsArray;
  onPressPrevious: () => void;
  onSave: (details: Beneficiary) => void;
};

export const TransferInternationalWizardBeneficiary = ({
  initialBeneficiary,
  amount,
  errors = NO_ERRORS, // default to empty array
  onPressPrevious,
  onSave,
}: Props) => {

[zoontek]

Given the update above, you can safely do:

const setDynamicFieldError = dynamicFormApiRef.current?.setDynamicFieldError;

useEffect(() => {
  for (const [name, error] of errors) {
    setDynamicFieldError?.(name, error);
  }
}, [errors, setDynamicFieldError]);

[zoontek]

Could be removed entirely as there's no need to check if first tuple item is nullish.

[zoontek]

Could be replaced with:

errors.length > 0 ? (
  <LakeAlert
    anchored={true}
    variant="error"
    title={t("transfer.new.internationalTransfer.errors.title")}
  >
    {errors.map(([_, message], i) => (
      <LakeText key={`validation-alert-${i}`}>{message}</LakeText>
    ))}
  </LakeAlert>
) : null

(no extra array)

[zoontek]

@ncomont Is this still needed?