[Design] Review, and improve, secret key input page

[kyranjamie]

Low priority, but we should consider how we can improve secret key input with new changes coming.

Design requirements

• Must have separate inputs
• Each input must be clearly labelled with its corresponding number
• Per-input validation (if one word is wrong, how does the user know?)
• Works with both 12 and 24 word phrases

[314159265359879]

The previous input field also worked with 15 and 18 word BIP39 inputs. Do we want to keep support for that too?
18 Words could be important because of legacy support for users with hardware devices that used to have 18 word seeds (Trezor).

Just tested 6.3.1. and 18 word seeds are still supported (I assume 15 and 21 too).

[markmhendrickson]

Note that keys with fewer than 24 words will indeed work in the current version with 24 inputs, even though we could / should make their compatibility more obvious.

[pete-watters]

FYI I have some work done to add validation to these fields in here:
#4130

[marcoleder]

Urgent @kyranjamie @aulneau @fbwoolf

Compatibility for 12-word recovery is broken. I assume it has to do something with react state management. When installing fresh and then clicking Have a 12-word Secret Key? the text switches, but the fields don't. States are somewhat swapped when pressing the 12/24 toggle -> no way to import a 12-word phrase.

[314159265359879]

@marcoleder this should be fixed in version 6.11.0 of the wallet.

It is not yet approved by the Chrome store but you can get it here and install from source/unzipped: https://github.com/leather-wallet/extension/releases/tag/v6.11.0

[pete-watters]

See bug fix for last comment about 12 word key here #4350 . Thanks for reporting @marcoleder , apologies for the any inconvenience caused