metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard
verified publisher icon MetaMask

feat: Update TransactionDetail Gas UI Styles

Open digiwand opened this issue 1 year ago • 2 comments

Description

This PR updates various gas UI styles. There are discrepancies between transaction and gas details. This PR makes the styles more consistent, cleaner, and responsive.

Figma: https://www.figma.com/design/oHNdOauz7w9PEti2zX83Cg/Gas-component?node-id=3-2837&t=wxI1mCX7Hf1TKfRk-0

It might be helpful to note that TransactionDetailITem is used in 13 various components CleanShot 2024-05-23 at 22 37 30

There is a separate issue to update the gas UI for setApprovalForAll / revoke screens: https://github.com/MetaMask/metamask-extension/issues/24769

This was a meticulous operation as we had numerous combinations to account for with various styling means, including passing nested child components and the props suffixProps and textProps to styles.

With the upcoming confirmation redesign work, we will eventually move away from these styles and TransactionDetail/TransactionDetailItem. In the meantime, we are updating the styles.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2194

Manual testing steps

  1. Go to Test Dapp
  2. Test various transactions
  3. Observe transaction and gas details

Screenshots/Recordings

Before

Some before screenshots can be found in the related Figma

After

Layer 2

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.

digiwand avatar Apr 25 '24 13:04 digiwand

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.

github-actions[bot] avatar Apr 25 '24 13:04 github-actions[bot]

Builds ready [5ed793b]
Page Load Metrics (879 ± 534 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint61142912412
domContentLoaded97118157
load5027398791112534
domInteractive97118157
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 24 '24 17:05 metamaskbot

Builds ready [c27d9a1]
Page Load Metrics (607 ± 504 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint702171063416
domContentLoaded9231242
load5428366071049504
domInteractive9231242
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2.09 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 27 '24 15:05 metamaskbot

Builds ready [c27d9a1]
Page Load Metrics (607 ± 504 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint702171063416
domContentLoaded9231242
load5428366071049504
domInteractive9231242
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2.09 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 27 '24 15:05 metamaskbot

Builds ready [0c233d2]
Page Load Metrics (696 ± 519 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint66163992613
domContentLoaded9221131
load5527456961080519
domInteractive9221131
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2.09 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 29 '24 07:05 metamaskbot

Codecov Report

Attention: Patch coverage is 71.42857% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 65.77%. Comparing base (85f19c2) to head (40b2a67). Report is 1 commits behind head on develop.

Files Patch % Lines
...saction-base/confirm-transaction-base.component.js 42.86% 4 Missing :warning:
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop   #24241      +/-   ##
===========================================
- Coverage    65.78%   65.77%   -0.00%     
===========================================
  Files         1366     1366              
  Lines        54258    54260       +2     
  Branches     14103    14104       +1     
===========================================
  Hits         35689    35689              
- Misses       18569    18571       +2

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar May 29 '24 16:05 codecov[bot]

Builds ready [40b2a67]
Page Load Metrics (555 ± 462 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint6614095199
domContentLoaded8271252
load532637555962462
domInteractive8271252
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2.09 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 29 '24 17:05 metamaskbot

Builds ready [40b2a67]
Page Load Metrics (555 ± 462 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint6614095199
domContentLoaded8271252
load532637555962462
domInteractive8271252
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 2.09 KiB (0.03%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar May 29 '24 17:05 metamaskbot