feat(wallet): Enhanced Transaction Submission Status Panels

[Douglashdaniel]

Description

Introduces new and enhanced Transaction Submission Status panels

Resolves brave/brave-browser#40373

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• 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 wiki
  • npm run presubmit wiki, 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/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Screen.Recording.4.mov

Send:

Swap:

Bridge:

ERC20 Approve:

[mkarolin]

strings++ with a nit.

[brave-builds]

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

[brave-builds]

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

[brave-builds]

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

[yrliou]

core++

[onyb]

LGTM!

[github-actions]

[puLL-Merge] - brave/brave-core@25470

Description

This PR introduces significant changes to the Brave Wallet UI, particularly in the post-confirmation flow for transactions. It updates the visual design, adds new functionality, and improves the user experience for various transaction states (submitted, signed, completed, failed, or canceled).

Changes

Changes

1. browser/ui/webui/brave_wallet/wallet_page_ui.cc and wallet_panel_ui.cc:

   • Added a new localized string for pending transactions.

2. components/brave_wallet/browser/brave_wallet_constants.h:

   • Added several new localized strings for various transaction states and actions.

3. components/brave_wallet_ui/assets/svg-icons/:

   • Removed error-circle-icon.svg.

4. components/brave_wallet_ui/components/extension/post-confirmation/:

   • Added new components: cancel_transaction, common, failed_or_canceled.
   • Updated existing components: complete, submitted_or_signed.
   • Removed old components: failed.
   • These changes reflect a significant overhaul of the post-confirmation UI.

5. components/brave_wallet_ui/panel/container.tsx:

   • Updated the transaction status panel dimensions.

6. components/brave_wallet_ui/stories/:

   • Updated mock data and locale strings to support the new UI components.

7. components/resources/wallet_strings.grdp:

   • Added new string resources for the updated UI.

8. ui/webui/resources/BUILD.gn:

   • Added new Leo icons: "send-filled.svg" and "xmark-color.svg".

These changes represent a comprehensive update to the transaction confirmation and status UI in the Brave Wallet, introducing new visual elements, more detailed status information, and improved user interactions for various transaction states.

Possible Issues

• The removal of some existing components and strings might cause issues if they were referenced elsewhere in the codebase.
• The new UI components might require additional testing to ensure compatibility across different devices and screen sizes.

Security Hotspots

None identified. The changes appear to be primarily UI-related and don't introduce any obvious security concerns.