Skip to content
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

refactor: Replace redesign confirmation BottomModal with BottomSheet #13268

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

digiwand
Copy link
Contributor

@digiwand digiwand commented Jan 30, 2025

Description

  • Replaces BottomModal with BottomSheet in redesign Confirm page
    • Add scroll support
    • Remove min height 70% to prevent redesign Confirm page from showing excess space
    • Allow BottomSheet styles (rounded corners, footer bottom styles, and device padding detection padding) rather than custom BottomModal styles
  • Add BottomSheet isBackgroundAlternative prop
    • Added BottomSheet footer isBackgroundAlternative prop
    • Note: I think we don't need the additional background colors for header and footer since the parent, BottomSheet animated view sets the background color. Once I removed them, it triggered many snapshot tests and code owner reviews from 5 additional teams. I reverted this in favor of the explicit isBackgroundAlternative prop
  • Update BlockaidBanner to remove surrounding margin to allow for better reusability
    • Replace BlockaidBanner instances margin overrides with surrounding container margins
  • Fix TransactionReview BlockaidBanner negative padding → turn to positive padding to allow space between next element

Related issues

Fixes: #13267
Todo follow-up - Related Issue: #12656

Manual testing steps

Test BottomSheets and BlockaidBanner alerts work as expected. Test redesign confirmation page works as expected

Screenshots/Recordings

Before using BottomModal and no scroll behavior

CleanShot.2025-01-30.at.01.11.16.mp4

After using BottomSheet with scroll behavior

CleanShot.2025-01-30.at.02.18.53.mp4

Before 70% min height

After remove 70% min height

Before Transaction Review BlockaidBanner negative padding

**After Transaction Review BlockaidBanner positive padding **

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.

no need because BottomSheetDialog provides background color
- affects only old confirmations
- fix marginBottom on TransactionReview
Copy link
Contributor

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.

@metamaskbot metamaskbot added the team-confirmations Push issues to confirmations team label Jan 30, 2025
@digiwand digiwand marked this pull request as ready for review January 30, 2025 18:22
@digiwand digiwand requested review from a team as code owners January 30, 2025 18:22
@digiwand digiwand added the Run Smoke E2E Triggers smoke e2e on Bitrise label Jan 30, 2025
Copy link
Contributor

github-actions bot commented Jan 30, 2025

https://bitrise.io/ Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 50594e4
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/e9a940ea-e242-4a48-9a81-9bb840e70aa0

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

@@ -595,7 +595,7 @@ exports[`Approval render matches snapshot 1`] = `
<View
style={
{
"marginBottom": -8,
"marginBottom": 8,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixes missing padding between blockaid banner alert and account header

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Run Smoke E2E Triggers smoke e2e on Bitrise team-confirmations Push issues to confirmations team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

refactor: Replace BottomModal with BottomSheet in redesign confirmation
2 participants