improved UX and error handling for wallet configuration

[myxmaster]

Description

This fixes #2172 (all of it, so issue=PR description).

Additionally fixed onFocus and added onBlur for TextInput component.

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• LndHub
• [DEPRECATED] Core Lightning (c-lightning-REST)
• [DEPRECATED] Core Lightning (Spark)
• [DEPRECATED] Eclair

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[myxmaster]

Now "/" is allowed for host inputs, we use textColor instead of infoModal for invalid input handling (way better UX), outsourced/improved validation logic and added tests.

[myxmaster]

Latest commit fixes this edge case issue:
LND case as example:

• enter valid macaroon
• paste invalid host "host not ok", then start editing it to "host not o" -> button was enabled

[myxmaster]

(rebased)

[shubhamkmr04]

LNDHub

1. Something weird I noticed, It gives us the error when we type in the host name correctly, and not in case of a random string
   
   

2. We can add some margin here between the ErrorMessage and other content
   

CLNRest / LND Rest
Here as well, Not able to paste correct hostname, I can save wallet config after writing anything in host input

Also, do we get any error message somewhere on typing in incorrect values in macroon/host/rune as mentioned in the issue at some places #2172 , or it will just trigger the red text to show the error?

[myxmaster]

Uhm yeah, when URLs end with "/" we should probably allow it. I'll look into it.

Random strings are allowed because I wanted to allow stuff like "localhost".

Also, do we get any error message somewhere on typing in incorrect values in macroon/host/rune as mentioned in the issue at some places #2172 , or it will just trigger the red text to show the error?

I dropped the error message idea, because I think it is better UX without modals (it is annoying to click those away). I think 99.9% of the time user just copied wrong stuff (or pasted in wrong input), so it is obvious right away what is wrong.

We can add some margin here between the ErrorMessage and other content

I agree, although not really part of this PR.

[myxmaster]

Actually, I think we should change the GUI label from Host into Server address.
-> Technically, what we allow users to enter here, is not always a valid host, domain or URL.

• A hostname never contains protocol (http/https) or path (exampe.com/any/path/).
• A domain never contains subdomains (subdomain.domain.com) and an IP address is not a domain either.
• A Web-URL always contains protocol, but we allow your-server.com as well

@kaloudis If you agree, I will change all labels and rename the ValidationUtils methods accordingly (e.g. isValidHostname -> isValidServerAddress).

[myxmaster]

Uhm yeah, when URLs end with "/" we should probably allow it. I'll look into it.

So, after some thoughts and reading, it makes sense to allow paths in the server address input (to allow stuff like anysubdomain.btcpayserver.org/some/path/).

For paths there are more chars allowed (compared to [sub]domains). So we need to allow these chars for the path segment:
of course: a-zA-Z0-9
also: -._~
and even: !$&'()*+,;=

Since we do not need query and fragment, we should not allow ?and #.

Source: https://datatracker.ietf.org/doc/html/rfc3986

[kaloudis]

Actually, I think we should change the GUI label from Host into Server address. -> Technically, what we allow users to enter here, is not always a valid host, domain or URL.

* A hostname never contains protocol (http/https) or path (exampe.com/any/path/).

* A domain never contains subdomains (subdomain.domain.com) and an IP address is not a domain either.

* A Web-URL always contains protocol, but we allow `your-server.com` as well

@kaloudis If you agree, I will change all labels and rename the ValidationUtils methods accordingly (e.g. isValidHostname -> isValidServerAddress).

I can get behind this.

I also want to potentially but the Port line right below it, instead of the macaroon. We ended up swapping them because of an issue where the keyboard would be covering it. Not sure if we've remedied that yet. LMK what you find.

[myxmaster]

The issue with the keyboard covering content is long gone as far as i know. (If you see it anywhere on iOS, let me know...)

So yes, good idea to put Port below Server address.

[myxmaster]

The HOST_REGEX is kind of crazy, but oh well, tests all pass, so looks good :)

I think all issues we talked about are now fixed. Just that error message layout problem is still there, I'll care about that in another PR.

[shubhamkmr04]

I think all issues we talked about are now fixed. Just that error message layout problem is still there, I'll care about that in another PR.

Sounds good. Looking much better now