feat(wallet): Built Out Encryption Key Panel UI

[Douglashdaniel]

Description

Built out the Encryption Key Panel UI

1. This panel has 2 states request or read

• request will be displayed when a dapp is requesting your Public Encryption Key
• read will be displayed when a dapp is asking permission to read your Encrypted Message

note: (This is just the build out of the UI, backend functionality will be integrated in these 2 issues brave/brave-browser#19275 , brave/brave-browser#19276)

Resolves brave/brave-browser#21177

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Request Encryption Key Panel (Demo):

Allow Reading Encrypted Message Panel (Demo):

Allow Reading Encrypted Message Decrypted Panel (Demo):

Test Plan

1. Go to https://inb0x.life/ and click Connect
2. Unlock and Connect your wallet
3. Click Activate and Sign the message prompt
4. Click Generate Secured inb0x Key and then click Provide in the Public Encryption Key panel.
5. Click Send New Message and then send a test message to another Wallet address.
6. Lock your Wallet and then refresh the page.
7. Unlock your Wallet and then click Connect
8. Click Activate and then Sign the message prompt
9. Wait for the Decrypt Message panel, Click Decrypt message to verify functionality.
10. Click Allow and it should sign you back in to pick up where you left off.

Screen.Recording.2022-04-25.at.1.48.49.PM.mov

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[mkarolin]

wallet's ?

[mkarolin]

#13398 (comment)

[devYonz]

Is it possible to access these functions using deep links? like ws:// for metamask?