-
Notifications
You must be signed in to change notification settings - Fork 5.4k
feat: added shield coverage icon with animation #37588
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
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. |
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (5 files, +262 -3)
|
Builds ready [a674dae]
UI Startup Metrics (1287 ± 101 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [674ddd1]
UI Startup Metrics (1210 ± 91 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [05ca23c]
UI Startup Metrics (1251 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [b8bdf81]
UI Startup Metrics (1164 ± 97 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [9b23a7e]
UI Startup Metrics (1235 ± 92 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
...ponents/confirm/footer/shield-footer-coverage-indicator/shield-footer-coverage-indicator.tsx
Outdated
Show resolved
Hide resolved
- play animation also for provisional state
Builds ready [0906444]
UI Startup Metrics (1218 ± 84 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Description
Adds Shield Icon with animation to coverage status.
Covered
Transaction covered: Green color with shimmer effect
Malicious
Transaction malicious: Danger color with wiggle effect
Not covered
Transaction not covered: Neutral color with wiggle effect
Paused
Shield subscription is paused: Warning color with wiggle effect
https://www.figma.com/design/HTAO1SrmixV4ppv7qIvLoa/Metamask-Transaction-Shield?node-id=10109-24636&t=dpj6EeZul3sgHFVg-4
Changelog
CHANGELOG entry: Adds shield icon with animation to Transaction Shield coverage status
Related issues Add shield icon with animation
Fixes:
Manual testing steps
https://metamask.github.io/test-dapp/and connect with metamaskScreenshots/Recordings
Before
After
shield-icon-animation.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Adds a Rive-based animated shield icon to the footer coverage indicator with severity/paused handling and trial-only playback, plus styles and tests.
ShieldIconAnimation(Rive) with severity toggles, WASM/buffer loading, and optional playback.shield-footer-coverage-indicator.tsxto render the icon, map paused subscriptions toWarning, derive severity fromalerts, play animation ontrialing, requirecurrentConfirmation, and adjust layout to flex..riv-animation__shield-icon-containerand.riv-animation__canvassizing inindex.scss.footer.test.tsxand animation component in coverage indicator test; verifies Transaction Shield label renders.Written by Cursor Bugbot for commit 9b23a7e. This will update automatically on new commits. Configure here.