Add obfuscation toggle for private key input

[ryanml]

Fixes: #20630

Explanation

Adds a show/hide element which toggles whether the private key input value is visible or not.

Screenshots/Screencaps

Before

before1080.mov

After

after1080.mov

Manual Testing Steps

1. Click the accounts menu dropdown
2. Select Import account
3. Ensure the private key input defaults to hidden
4. Ensure the show/hide toggle switches between input visibility appropriately
5. Ensure that the private key import functionality is otherwise unchanged

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov]

Codecov Report

Patch coverage: 50.00% and project coverage change: +0.62% 🎉

Comparison is base (37824db) 68.20% compared to head (b3eee9f) 68.81%.

❗ Current head b3eee9f differs from pull request most recent head 8719919. Consider uploading reports for the commit 8719919 to get more accurate results

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #20719      +/-   ##
===========================================
+ Coverage    68.20%   68.81%   +0.62%     
===========================================
  Files          999      998       -1     
  Lines        39846    38966     -880     
  Branches     10669    10459     -210     
===========================================
- Hits         27174    26814     -360     
+ Misses       12672    12152     -520     

Files Changed	Coverage Δ
...omponents/multichain/import-account/private-key.js	50.00% <50.00%> (+3.85%)	⬆️

... and 53 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[HowardBraham]

This looks visually unbalanced. I think this would look better with the eye button inside the text field, like this:

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.

[github-actions]

This PR was closed because there has been no follow up activity in the last 14 days. Thank you for your contributions.

[plasmacorral]

Would still be nice to have this even though this was closed by the stalebot.

[dawnseeker8]

i have updated the branch with latest code and also update the code to match latest change. now the PR is ready for review #20719

[dawnseeker8]

This looks visually unbalanced. I think this would look better with the eye button inside the text field, like this:

Let me do something to achieve this to move the eye button inside the box.

[dawnseeker8]

This looks visually unbalanced. I think this would look better with the eye button inside the text field, like this:

Let me do something to achieve this to move the eye button inside the box.

To move the eye inside the box is not easy since how we structure the FormTextField, i have created a new form-password-field which have use most of form-text-field styling. the final field look like this .

[dawnseeker8]

@HowardBraham hi, Can you do a review of this PR when you have time? thank you very much, we will like to close this issue ASAP.

[HowardBraham]

@georgewrmarshall should look at this with respect to the new Design System stuff.

Also... this PR is currently blocked by the unsolved mystery of why all PRs from external contributors fail on prep-deps.

[ryanml]

@dawnseeker8 thanks for the updates!

[georgewrmarshall]

Looking good! I think if we are to create a FormPasswordField it should live in ui/components/app folder. I've provided an example of using the endAccessory prop to achieve the button within the input also.

Another reason to create a reusable component is to improve the consistency for all password type inputs. Here is one that should use the same technique. Could we create some tickets to replace other instances if this new password component gets merged?

Screen.Recording.2024-02-26.at.12.18.40.PM.mov

[georgewrmarshall]

Hey @dawnseeker8, fantastic job! I've made a minor tweak to align the icon in the show-hide-toggle component and updated the before/after screencasts to match the code changes. Excellent work! 💯 LGTM!

[dawnseeker8]

have successfully ganed two review approver, however, need to ask somebody to fix CI pipeline or merge with without passing all action status.

[dawnseeker8]

Another same PR #23371 has been created internally as workaround to run the CI. so close this ticket.

[dawnseeker8]

Another same PR #23371 has been created internally as workaround to run the CI. so close this ticket.