Skip to content

feat: Implement redesigned gas fee modal #15234

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 29 commits into from
May 29, 2025
Merged

feat: Implement redesigned gas fee modal #15234

merged 29 commits into from
May 29, 2025

Conversation

OGPoyraz
Copy link
Member

@OGPoyraz OGPoyraz commented May 8, 2025 •
edited
Loading

Description

This PR aims to implement redesigned gas fee modal.

It validates all cases below:

✅ - EIP1559 transaction with dapp-suggested gas values
✅ - EIP1559 transaction with fee-market gas estimates
✅ - EIP1559 transaction with gasPrice estimate
✅ - EIP1559 transaction with legacy gas estimates - (BSC Only option)
✅ - Legacy transaction with dapp-suggested gas values
✅ - Legacy transaction with fee-market gas estimates
✅ - Legacy transaction with gasPrice estimate
✅ - Legacy transaction with legacy gas estimates - (BSC Only option)
✅ - Wallet initiated with fee-market gas estimates (EIP-1559)
✅ - Wallet initiated with legacy gas estimates (EIP-1559) - (BSC Only option)
✅ - Wallet initiated with gasPrice estimates (EIP-1559)

There are couple recordings added for demonstrate in the recordings section. Manual QA of this component will be done only after transfer confirmation is enabled.

Following tasks will be handled separately

❌ - Save values for the network - Won't do as team decided
✅ - Metrics implementation
✅ - Advanced gas modal validations

Related issues

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

Manual testing steps

Only possible to test it out via setting FEATURE_FLAG_REDESIGNED_TRANSFER to true

Screenshots/Recordings

Before

After

Wallet initiated EIP1559 transaction

Wallet.initiated.EIP1559.transaction.mp4

DApp initiated EIP1559 transaction

DApp.initiated.EIP1559.transaction.mp4

DApp initiated legacy transaction

DApp.initiated.Legacy.transaction.mp4

DApp initiated EIP1559 without dapp suggestion

DApp.initiated.EIP1559.without.dapp.suggestion.mp4

Pre-merge author checklist

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.

@OGPoyraz OGPoyraz requested a review from a team as a code owner May 8, 2025 13:55
@OGPoyraz OGPoyraz added No QA Needed Apply this label when your PR does not need any QA effort. team-confirmations Push issues to confirmations team no-changelog Indicates no external facing user changes, therefore no changelog documentation needed Run Smoke E2E Requires smoke E2E testing labels May 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 8, 2025 •
edited by metamaskbot
Loading

https://bitrise.io/ Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: d3bf33c
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/888ff6cf-b2f3-4803-b6cf-19c2b91a5920

Note

  • You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

matthewwalsh0
matthewwalsh0 requested changes May 13, 2025
View reviewed changes
@codecov-commenter
Copy link

codecov-commenter commented May 15, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 88.52459% with 42 lines in your changes missing coverage. Please review.

Project coverage is 69.05%. Comparing base (c62b042) to head (d65ebd3).

Files with missing lines Patch % Lines
...als/gas-fee-modal/hooks/useAdvancedGasFeeOption.ts 72.97% 2 Missing and 8 partials ⚠️
...s-fee-modal/hooks/useGasFeeEstimateLevelOptions.ts 81.57% 3 Missing and 4 partials ⚠️
...as-fee-modal/hooks/useDappSuggestedGasFeeOption.ts 81.25% 0 Missing and 6 partials ⚠️
...iews/confirmations/hooks/gas/useFeeCalculations.ts 83.33% 1 Missing and 4 partials ⚠️
...nents/modals/gas-fee-modal/gas-fee-modal.styles.ts 0.00% 3 Missing ⚠️
...s/gas-fee-modal/hooks/useGasPriceEstimateOption.ts 91.66% 0 Missing and 3 partials ⚠️
...mponents/max-base-fee-input/max-base-fee-input.tsx 88.88% 0 Missing and 2 partials ⚠️
...mponents/priority-fee-input/priority-fee-input.tsx 88.88% 0 Missing and 2 partials ⚠️
.../components/modals/gas-fee-modal/gas-fee-modal.tsx 77.77% 1 Missing and 1 partial ⚠️
...s/transactions/gas-fee-details/gas-fee-details.tsx 84.61% 1 Missing and 1 partial ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #15234      +/-   ##
==========================================
+ Coverage   68.92%   69.05%   +0.12%     
==========================================
  Files        2394     2424      +30     
  Lines       51403    51736     +333     
  Branches     7720     7779      +59     
==========================================
+ Hits        35430    35724     +294     
- Misses      13702    13713      +11     
- Partials     2271     2299      +28

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@OGPoyraz OGPoyraz added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels May 15, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 15, 2025 •
edited by metamaskbot
Loading

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: d8d8d27
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6acf71f2-581d-4180-9376-672e83722783

Note

  • You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

  • Check the documentation if you have any doubts on how to understand the failure on bitrise

@OGPoyraz OGPoyraz mentioned this pull request May 16, 2025
Merged
4 tasks
OGPoyraz added a commit to MetaMask/core that referenced this pull request May 20, 2025
@OGPoyraz
fix: Add userFeeLevel as dappSuggested initially when txParams …
c767a57 
…contains gas values for `legacy` transactions (#5821)

## Explanation

<!--
Thanks for your contribution! Take a moment to answer these questions so
that reviewers have the information they need to properly understand
your changes:

* What is the current state of things and why does it need to change?
* What is the solution your changes offer and how does it work?
* Are there any changes whose purpose might not obvious to those
unfamiliar with the domain?
* If your primary goal was to update one package but you found you had
to update another one along the way, why did you do so?
* If you had to upgrade a dependency, why did you do so?
-->

This PR aims to add `userFeeLevel` as `dappSuggested` initially when
`txParams` contains gas values also for `legacy` transactions.

## References

<!--
Are there any issues that this pull request is tied to?
Are there other links that reviewers should consult to understand these
changes better?
Are there client or consumer pull requests to adopt any breaking
changes?

For example:

* Fixes #12345
* Related to #67890
-->

* Issue found while implementing gas modal:
MetaMask/metamask-mobile#15234

## Changelog

<!--
THIS SECTION IS NO LONGER NEEDED.

The process for updating changelogs has changed. Please consult the
"Updating changelogs" section of the Contributing doc for more.
-->

## Checklist

- [X] I've updated the test suite for new or updated code as appropriate
- [X] I've updated documentation (JSDoc, Markdown, etc.) for new or
updated code as appropriate
- [X] I've communicated my changes to consumers by [updating changelogs
for packages I've
changed](https://github.com/MetaMask/core/tree/main/docs/contributing.md#updating-changelogs),
highlighting breaking changes as necessary
- [X] I've prepared draft pull requests for clients and consumer
packages to resolve any breaking changes
This was referenced May 21, 2025
Merged
Merged
matthewwalsh0
matthewwalsh0 previously approved these changes May 28, 2025
View reviewed changes
OGPoyraz added 10 commits May 29, 2025 07:12
@OGPoyraz
Reduce margin in values
7047e13
@OGPoyraz
Fix lint
171deb5
@OGPoyraz
Add final design adjustments
768226a
@OGPoyraz
feat: Adds gas modal metrics (#15383)
80bdeb0 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to add gas modal metrics.

Fixes: MetaMask/mobile-planning#2194

N/A

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

<!-- [screenshots/recordings] -->

<!-- [screenshots/recordings] -->

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

- [ ] 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.
@OGPoyraz
feat: Implement gas input validations in redesigned gas modals (#15478)
7452375 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to implement gas input validations.

To see it in action, please see the recordings below.

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

N/A

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

<!-- [screenshots/recordings] -->

https://github.com/user-attachments/assets/222338d4-8bf9-4421-b121-e66dd9a7b2c3

https://github.com/user-attachments/assets/6d7fc75e-34f0-4c80-afc6-153014b24172

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

- [ ] 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.
@OGPoyraz
Relocate files
12813f5
@OGPoyraz
Revert unintentional change
25457cd
@OGPoyraz
fix final suggestions from design
59bb4b1
@OGPoyraz
Fix tests
4dd9ebb
@OGPoyraz
Fix test
470898f
@OGPoyraz OGPoyraz added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels May 29, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 29, 2025 •
edited by metamaskbot
Loading

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: d40fee5
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/023c8e5c-d633-4884-8049-2123ee47e896

Note

  • You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

  • Check the documentation if you have any doubts on how to understand the failure on bitrise

@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
43 New issues
0 Accepted issues

Measures
1 Security Hotspot
93.1% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@OGPoyraz
Copy link
Member Author

E2e failures on smoke confirmations are expected: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/023c8e5c-d633-4884-8049-2123ee47e896

They are failing on different reason, explained here: https://consensys.slack.com/archives/C02U025CVU4/p1748480127828199

Screenshot 2025-05-29 at 08 22 07

@OGPoyraz OGPoyraz enabled auto-merge May 29, 2025 08:48
@OGPoyraz OGPoyraz added No E2E Smoke Needed If the PR does not need E2E smoke test run and removed Run Smoke E2E Requires smoke E2E testing labels May 29, 2025
@OGPoyraz OGPoyraz added this pull request to the merge queue May 29, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks May 29, 2025
@OGPoyraz OGPoyraz added this pull request to the merge queue May 29, 2025
Merged via the queue into main with commit 9bf7475 May 29, 2025
52 of 55 checks passed
@OGPoyraz OGPoyraz deleted the ogp/4831 branch May 29, 2025 09:35
@github-actions github-actions bot locked and limited conversation to collaborators May 29, 2025
@metamaskbot metamaskbot added the release-7.48.0 Issue or pull request that will be included in release 7.48.0 label May 29, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@pedronfigueiredo pedronfigueiredo pedronfigueiredo approved these changes

@matthewwalsh0 matthewwalsh0 matthewwalsh0 left review comments

Assignees
No one assigned
Labels
No E2E Smoke Needed If the PR does not need E2E smoke test run No QA Needed Apply this label when your PR does not need any QA effort. no-changelog Indicates no external facing user changes, therefore no changelog documentation needed release-7.48.0 Issue or pull request that will be included in release 7.48.0 team-confirmations Push issues to confirmations team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@OGPoyraz @codecov-commenter @pedronfigueiredo @matthewwalsh0 @metamaskbot