feat: Add animation on the Smart Transaction status page

[dan437]

Description

Add animation on the Smart Transaction status page. We reused the animation from Smart Swaps.

Related issues

Fixes:

Manual testing steps

1. Turn on Smart Transactions in Advanced Settings
2. Use the Sepolia test network
3. Submit a Send transaction
4. You will see the animation on the Smart Transaction status page

Screenshots/Recordings

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[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.

[dbrans]

For a future PR:
Where do these constants come from? Should we use computed values or constants?
cc @georgewrmarshall from DS team.

[georgewrmarshall]

Thanks for the tag @dbrans! I tend to think arbitrary values in styles are code smells, but sometimes they are necessary. It would be great to see a screencast of these changes in the PR description so I can review without having to checkout the branch and locate where these changes are implemented @dan437 🙏

[dan437]

This width is twice the size of the transaction-background-top.svg image (817px) and I believe it was used in the past to make the animation work properly. We just reused the same code for animation from Smart Swaps as a short term solution. We will be replacing it with a long term solution once it's designed.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.34%. Comparing base (d27a233) to head (1e16638).
Report is 15 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24389      +/-   ##
===========================================
- Coverage    67.37%   67.34%   -0.03%     
===========================================
  Files         1278     1282       +4     
  Lines        49881    50065     +184     
  Branches     12944    12986      +42     
===========================================
+ Hits         33605    33716     +111     
- Misses       16276    16349      +73     

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

[metamaskbot]

Builds ready [1e16638]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • content-script: 0
  • ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (185 ± 252 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	56	112	78	19	9
		domContentLoaded	8	65	15	15	7
		load	45	2471	185	525	252
		domInteractive	8	65	15	15	7

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 358 Bytes (0.01%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Missing release label release-11.15.3 on PR. Adding release label release-11.15.3 on PR and removing other release labels(release-11.18.0), as PR was cherry-picked in branch 11.15.3.