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.

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

feat: add carousel component #13010

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

feat: add carousel component #13010

wants to merge 77 commits into from

Conversation

jonybur
Copy link
Contributor

@jonybur jonybur commented Jan 15, 2025 •
edited by vinnyhoward
Loading

Description

This PR introduces a new carousel component for displaying banners in the wallet view. The implementation includes:

  1. A new reusable Carousel component with TypeScript support
  2. Integration of the carousel in the wallet view to display promotional banners
  3. Banner state persistence through Redux
  4. New banner images and localized content
  5. With there is no balance - the "fund" banner cannot be dismissed

The main motivation is to provide a better way to showcase important announcements and features to users directly in their wallet view, improving user engagement and communication.

Related issues

Fixes: #3909

Manual testing steps

  1. Open the MetaMask Mobile app
  2. Navigate to the wallet view
  3. Verify the carousel is displayed at the top of the screen
  4. Swipe left/right to navigate through different banners
  5. Close the app and reopen to verify banner state persistence
  6. Verify proper banner display across different device sizes

Screenshots/Recordings

Navigating Banner MetaMask Card Buy Banner
banner card buy
Sell Banner Settings Banner All slides dismissible with balance
sell card all_dissmisable_with_balance
Cannot dismiss if no balance

Before

NA

After

NA

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.

@github-actions GitHub Actions
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.

@jonybur jonybur added the Run Smoke E2E Triggers smoke e2e on Bitrise label Jan 15, 2025
@github-actions GitHub Actions
Copy link
Contributor

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

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 3fafda1
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/32d1a3cf-1163-4ee8-95a7-126f60634df6

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

@jonybur jonybur marked this pull request as ready for review January 29, 2025 17:37
@jonybur jonybur requested a review from a team as a code owner January 29, 2025 17:37
@jonybur jonybur added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 29, 2025
@github-actions GitHub Actions
Copy link
Contributor

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

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 4943892
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/eef2f63c-4045-417d-be19-8858f140dc0a

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

@jonybur jonybur added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 30, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 30, 2025 •
edited by metamaskbot
Loading

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c6c7e82
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/33017209-65b6-4f9a-9ad8-9b4ff3f59002

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

@jonybur jonybur requested review from a team as code owners February 3, 2025 14:20
@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 079ec69
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/7407419b-487f-41f2-ba5e-02f79d2ac538

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

@vinnyhoward vinnyhoward removed the Run Smoke E2E Triggers smoke e2e on Bitrise label Mar 4, 2025
@vinnyhoward vinnyhoward added the Run Smoke E2E Triggers smoke e2e on Bitrise label Mar 4, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 4, 2025

https://bitrise.io/ Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 7334105
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3150758d-5f37-4d0e-9d7e-ac7dc2adef34

Note

  • This comment will auto-update when build completes
  • 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

@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 7334105
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3150758d-5f37-4d0e-9d7e-ac7dc2adef34

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

1 similar comment
@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 7334105
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3150758d-5f37-4d0e-9d7e-ac7dc2adef34

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

@vinnyhoward vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 4, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 4, 2025

https://bitrise.io/ Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 761c599
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/406e99ac-d8f9-4c82-9f49-08e6d8d62d0e

Note

  • This comment will auto-update when build completes
  • 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

@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 761c599
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/406e99ac-d8f9-4c82-9f49-08e6d8d62d0e

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

@vinnyhoward vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 11, 2025
@github-actions GitHub Actions
Copy link
Contributor

https://bitrise.io/ Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/672e6dd4-d164-4e6a-98ae-bf7576eddd43

Note

  • This comment will auto-update when build completes
  • 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

@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/672e6dd4-d164-4e6a-98ae-bf7576eddd43

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

1 similar comment
@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/672e6dd4-d164-4e6a-98ae-bf7576eddd43

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

@vinnyhoward vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 11, 2025
@github-actions GitHub Actions
Copy link
Contributor

https://bitrise.io/ Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/caf5f455-7e51-4e0a-95c3-5ba959557611

Note

  • This comment will auto-update when build completes
  • 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

@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/caf5f455-7e51-4e0a-95c3-5ba959557611

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

1 similar comment
@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 382f24e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/caf5f455-7e51-4e0a-95c3-5ba959557611

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

@vinnyhoward vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 12, 2025
@github-actions GitHub Actions
Copy link
Contributor

https://bitrise.io/ Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 8237b45
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/dc6f83aa-138d-4fc7-8d32-950acc14eef5

Note

  • This comment will auto-update when build completes
  • 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

@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
90.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 8237b45
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/dc6f83aa-138d-4fc7-8d32-950acc14eef5

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

1 similar comment
@metamaskbot
Copy link
Collaborator

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 8237b45
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/dc6f83aa-138d-4fc7-8d32-950acc14eef5

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@EtherWizard33 EtherWizard33 Awaiting requested review from EtherWizard33

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
design-review Any feature that needs feedback from the design team Run Smoke E2E Triggers smoke e2e on Bitrise team-wallet-ux
Projects
PR review queue
Status: Needs dev review
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@jonybur @codecov-commenter @metamaskbot @EtherWizard33 @vinnyhoward @hesterbruikman