From 244210d4a8f5c871e6869a0df05afddc515f5a20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20=C5=81ucka?= <5708018+PatrykLucka@users.noreply.github.com> Date: Fri, 12 Dec 2025 18:39:42 +0100 Subject: [PATCH 1/3] feat: remove the dot on the card icon (#23978) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** The badge (dot) on the card icon button was displayed using a different color than the notification bell icon's badge, creating visual inconsistency. Per the issue requirements, this PR removes the badge from the card icon entirely to resolve the UX discrepancy. **Changes:** - Removed BadgeWrapper and BadgeStatus from CardButton component - Removed hasViewedCardButton state dependency from the component (metrics tracking still works) - Cleaned up related unit tests and snapshots - Removed badge getter from e2e page object and e2e test assertions - Removed unused CARD_BUTTON_BADGE selector ## **Changelog** CHANGELOG entry: Removed the notification badge from the card icon button ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/MDP-203 ## **Manual testing steps** ```gherkin Feature: Card button without badge Scenario: user views wallet header Given user is on the wallet home screen When user looks at the card icon button in the navbar Then no badge/dot is displayed on the card icon ``` ## **Screenshots/Recordings** ### **Before** Screenshot 2025-12-12 at 15 41 42 ### **After** Screenshot 2025-12-12 at 16 21 33 ## **Pre-merge author checklist** - [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. ## **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. --- > [!NOTE] > Removes the badge from the navbar Card button and eliminates related state, selectors, and tests while keeping metrics tracking intact. > > - **UI** > - `CardButton`: remove `BadgeWrapper`/`BadgeStatus` and Redux `hasViewedCardButton` logic; call `onPress` directly; continue tracking `CARD_BUTTON_VIEWED` on mount. > - **Tests** > - Unit: simplify to render + `onPress` assertion; drop badge/state checks; update snapshot. > - E2E: remove badge assertions and getter; test taps `CARD_BUTTON` and verifies Card Home. > - **Selectors** > - Remove `WalletViewSelectorsIDs.CARD_BUTTON_BADGE`. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 46dbfffc8bbdd4b50a0b842f5be230ce8be7cc51. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- .../components/CardButton/CardButton.test.tsx | 54 +- .../Card/components/CardButton/CardButton.tsx | 48 +- .../__snapshots__/CardButton.test.tsx.snap | 625 ++---------------- e2e/pages/wallet/WalletView.ts | 4 - e2e/selectors/wallet/WalletView.selectors.ts | 1 - e2e/specs/card/card-button.spec.ts | 5 +- 6 files changed, 77 insertions(+), 660 deletions(-) diff --git a/app/components/UI/Card/components/CardButton/CardButton.test.tsx b/app/components/UI/Card/components/CardButton/CardButton.test.tsx index ad0fba01664..22fb7ebc377 100644 --- a/app/components/UI/Card/components/CardButton/CardButton.test.tsx +++ b/app/components/UI/Card/components/CardButton/CardButton.test.tsx @@ -4,6 +4,7 @@ import CardButton from './CardButton'; import { renderScreen } from '../../../../../util/test/renderWithProvider'; import { backgroundState } from '../../../../../util/test/initial-root-state'; import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors'; + jest.mock('../../../../hooks/useMetrics', () => { const actual = jest.requireActual('../../../../hooks/useMetrics'); return { @@ -19,14 +20,7 @@ jest.mock('../../../../hooks/useMetrics', () => { }; }); -interface PartialCardState { - hasViewedCardButton?: boolean; -} - -function renderWithProvider( - component: React.ComponentType, - stateOverride: PartialCardState = {}, -) { +function renderWithProvider(component: React.ComponentType) { return renderScreen( component, { name: 'CardButton' }, @@ -39,7 +33,6 @@ function renderWithProvider( lastFetchedByAddress: {}, hasViewedCardButton: false, isLoaded: false, - ...stateOverride, }, }, }, @@ -53,7 +46,7 @@ describe('CardButton Component', () => { jest.clearAllMocks(); }); - it('renders with badge (not yet viewed) and matches snapshot', () => { + it('renders and matches snapshot', () => { const { toJSON, getByTestId } = renderWithProvider(() => ( { /> )); - expect(getByTestId(WalletViewSelectorsIDs.CARD_BUTTON_BADGE)).toBeTruthy(); + expect(getByTestId(WalletViewSelectorsIDs.CARD_BUTTON)).toBeTruthy(); expect(toJSON()).toMatchSnapshot(); }); - it('dispatches setHasViewedCardButton(true) and hides badge on first press', () => { - const { getByTestId, store, queryByTestId } = renderWithProvider(() => ( + it('calls onPress when button is pressed', () => { + const { getByTestId } = renderWithProvider(() => ( { fireEvent.press(button); expect(mockOnPress).toHaveBeenCalledTimes(1); - expect(store.getState().card.hasViewedCardButton).toBe(true); - expect(queryByTestId(WalletViewSelectorsIDs.CARD_BUTTON_BADGE)).toBeNull(); - }); - - it('does not dispatch setHasViewedCardButton again if already viewed', () => { - const { getByTestId, store } = renderWithProvider( - () => ( - - ), - { hasViewedCardButton: true }, - ); - - const button = getByTestId(WalletViewSelectorsIDs.CARD_BUTTON); - fireEvent.press(button); - - expect(mockOnPress).toHaveBeenCalledTimes(1); - expect(store.getState().card.hasViewedCardButton).toBe(true); - }); - - it('renders without badge when already viewed', () => { - const { toJSON, queryByTestId } = renderWithProvider( - () => ( - - ), - { hasViewedCardButton: true }, - ); - - expect(queryByTestId(WalletViewSelectorsIDs.CARD_BUTTON_BADGE)).toBeNull(); - expect(toJSON()).toMatchSnapshot(); }); }); diff --git a/app/components/UI/Card/components/CardButton/CardButton.tsx b/app/components/UI/Card/components/CardButton/CardButton.tsx index ce9039a6cdb..11a2d179a3a 100644 --- a/app/components/UI/Card/components/CardButton/CardButton.tsx +++ b/app/components/UI/Card/components/CardButton/CardButton.tsx @@ -1,9 +1,4 @@ import { - BadgeStatus, - BadgeStatusStatus, - BadgeWrapper, - BadgeWrapperPosition, - BadgeWrapperPositionAnchorShape, ButtonIcon, ButtonIconSize, IconName, @@ -13,11 +8,6 @@ import { import React, { useEffect } from 'react'; import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors'; import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; -import { useDispatch, useSelector } from 'react-redux'; -import { - selectHasViewedCardButton, - setHasViewedCardButton, -} from '../../../../../core/redux/slices/card'; interface CardButtonProps { onPress: () => void; @@ -30,8 +20,6 @@ interface CardButtonProps { } const CardButton: React.FC = ({ onPress, touchAreaSlop }) => { - const dispatch = useDispatch(); - const hasViewedCardButton = useSelector(selectHasViewedCardButton); const { trackEvent, createEventBuilder } = useMetrics(); useEffect(() => { @@ -40,35 +28,15 @@ const CardButton: React.FC = ({ onPress, touchAreaSlop }) => { ); }, [trackEvent, createEventBuilder]); - const onPressHandler = () => { - if (!hasViewedCardButton) { - dispatch(setHasViewedCardButton(true)); - } - onPress(); - }; - return ( - - ) : null - } - > - - + ); }; diff --git a/app/components/UI/Card/components/CardButton/__snapshots__/CardButton.test.tsx.snap b/app/components/UI/Card/components/CardButton/__snapshots__/CardButton.test.tsx.snap index db9adbd1c57..a737e364376 100644 --- a/app/components/UI/Card/components/CardButton/__snapshots__/CardButton.test.tsx.snap +++ b/app/components/UI/Card/components/CardButton/__snapshots__/CardButton.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CardButton Component renders with badge (not yet viewed) and matches snapshot 1`] = ` +exports[`CardButton Component renders and matches snapshot 1`] = ` - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`CardButton Component renders without badge when already viewed 1`] = ` - - - - - - - - - - - - - CardButton - - - - - - - - - - - - - - - - - - - - - - - + /> - diff --git a/e2e/pages/wallet/WalletView.ts b/e2e/pages/wallet/WalletView.ts index 57fde5c228e..d4133fa3c58 100644 --- a/e2e/pages/wallet/WalletView.ts +++ b/e2e/pages/wallet/WalletView.ts @@ -77,10 +77,6 @@ class WalletView { return Matchers.getElementByID(WalletViewSelectorsIDs.CARD_BUTTON); } - get navbarCardButtonBadge(): DetoxElement { - return Matchers.getElementByID(WalletViewSelectorsIDs.CARD_BUTTON_BADGE); - } - get nftTab(): DetoxElement { return Matchers.getElementByText(WalletViewSelectorsText.NFTS_TAB); } diff --git a/e2e/selectors/wallet/WalletView.selectors.ts b/e2e/selectors/wallet/WalletView.selectors.ts index eb4a67864c4..5f2671c5660 100644 --- a/e2e/selectors/wallet/WalletView.selectors.ts +++ b/e2e/selectors/wallet/WalletView.selectors.ts @@ -10,7 +10,6 @@ export const WalletViewSelectorsIDs = { WALLET_TOKEN_DETECTION_LINK_BUTTON: 'wallet-token-detection-link-button', TOTAL_BALANCE_TEXT: 'total-balance-text', CARD_BUTTON: 'card-button', - CARD_BUTTON_BADGE: 'card-button-badge', STAKE_BUTTON: 'stake-button', EARN_EARNINGS_HISTORY_BUTTON: 'earn-earnings-history-button', UNSTAKE_BUTTON: 'unstake-button', diff --git a/e2e/specs/card/card-button.spec.ts b/e2e/specs/card/card-button.spec.ts index 08094ec71ac..784e3b9f8fc 100644 --- a/e2e/specs/card/card-button.spec.ts +++ b/e2e/specs/card/card-button.spec.ts @@ -51,12 +51,9 @@ describe.skip(SmokeCard('Card NavBar Button'), () => { jest.setTimeout(150000); }); - it('should open Card Home when pressing card navbar button', async () => { + it('opens Card Home when pressing card navbar button', async () => { await setupCardTest(async () => { await Assertions.expectElementToBeVisible(WalletView.navbarCardButton); - await Assertions.expectElementToBeVisible( - WalletView.navbarCardButtonBadge, - ); await WalletView.tapNavbarCardButton(); await Assertions.expectElementToBeVisible(CardHomeView.cardViewTitle); }); From 7bf7d9581a3c0cda2837363ef1513fc9fdfa55ff Mon Sep 17 00:00:00 2001 From: infiniteflower <139582705+infiniteflower@users.noreply.github.com> Date: Sat, 13 Dec 2025 05:59:31 +0900 Subject: [PATCH 2/3] fix: blocking button even when there's an active quote (#23792) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR fixes an issue that caused Swap button to be blocked even though a quote was available. ## **Changelog** CHANGELOG entry: Fixed a bug that caused Swap button to be blocked even though a quote was available ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3559 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** ### **Before** ### **After** https://github.com/user-attachments/assets/4e38deb6-61d9-4b39-aaa0-ecf31906b5af ## **Pre-merge author checklist** - [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. ## **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. --- > [!NOTE] > Adjusts `isSubmitDisabled` so the confirm button remains enabled during loading when an `activeQuote` exists. > > - **Bridge UI (`app/components/UI/Bridge/Views/BridgeView/index.tsx`)**: > - Refines `isSubmitDisabled` to `(isLoading && !activeQuote)` instead of `isLoading`, allowing confirm when a quote is already available. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5754e63c8d0152ba0f190b84cc35c9ce969fe068. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- app/components/UI/Bridge/Views/BridgeView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/Bridge/Views/BridgeView/index.tsx b/app/components/UI/Bridge/Views/BridgeView/index.tsx index 5db33c83da9..17eba7f81ec 100644 --- a/app/components/UI/Bridge/Views/BridgeView/index.tsx +++ b/app/components/UI/Bridge/Views/BridgeView/index.tsx @@ -228,7 +228,7 @@ const BridgeView = () => { ]); const isSubmitDisabled = - isLoading || + (isLoading && !activeQuote) || hasInsufficientBalance || isSubmittingTx || (isHardwareAddress && isSolanaSourced) || From 0311feb13aa4e42e3586d451d7f67062c56e1a67 Mon Sep 17 00:00:00 2001 From: imblue <106779544+imblue-dabadee@users.noreply.github.com> Date: Fri, 12 Dec 2025 15:32:22 -0600 Subject: [PATCH 3/3] fix: multiple alert modal selected index sync (#23893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Fixes a bug in `MultipleAlertModal` where closing the modal while viewing one alert and reopening it by clicking a different alert would cause a mismatch between the alert content and styling. **Root cause:** The `selectedIndex` state (used for styling/severity) was not syncing with the `alertKey` (used for content) when the modal was reopened. This caused scenarios where a Warning alert's yellow styling would display with a Danger alert's red content, or vice versa. **Solution:** Added a `useEffect` that syncs `selectedIndex` with `alertKey` whenever the alertKey changes, ensuring the correct styling is always applied. ## **Changelog** CHANGELOG entry: Fixed a bug where alert modal styling would not update correctly when switching between different severity alerts. ## **Related issues** Fixes: https://github.com/MetaMask/metamask-mobile/issues/23841 ## **Manual testing steps** ```gherkin Feature: Multiple alert modal styling synchronization Scenario: user closes and reopens alert modal with different alert Given the user is on a transaction confirmation screen with multiple alerts of different severities (e.g., a Warning alert on "Network fee" and a Danger alert on "You receive") When user clicks on the Warning alert to open the modal And user navigates to the Danger alert using the arrow And user closes the modal by tapping outside And user clicks on the Warning alert again Then the modal displays the Warning alert with correct yellow/warning styling Scenario: user switches between danger and warning alerts Given the user is on a transaction confirmation screen with a Danger alert and a Warning alert When user clicks on the Danger alert to open the modal And user closes the modal by tapping outside And user clicks on the Warning alert Then the modal displays the Warning alert with correct yellow/warning styling (not red/danger styling)## ``` ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/81a6f432-fc08-4f27-8bce-6287ce5e330c ### **After** https://github.com/user-attachments/assets/2afa4cfd-95ce-4d35-9886-fac5e6cfcf03 ## **Pre-merge author checklist** - [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. ## **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. --- > [!NOTE] > Syncs `selectedIndex` with `alertKey` in `MultipleAlertModal` to keep styling/content aligned and adds a test for this behavior. > > - **Confirmations UI**: > - `multiple-alert-modal.tsx`: Add `useEffect` to sync `selectedIndex` with `alertKey`, ensuring correct styling when switching/reopening alerts. > - Update imports to include `useEffect`. > - **Tests**: > - `multiple-alert-modal.test.tsx`: Add test validating `selectedIndex` updates when `alertKey` changes; minor setup adjustments. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit eacd2add6ab1847aa3d94b67c300e7b4b6df28db. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- .../multiple-alert-modal.test.tsx | 23 +++++++++++++++++++ .../multiple-alert-modal.tsx | 13 ++++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx b/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx index 8a0a9130236..fb1adf8df63 100644 --- a/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx +++ b/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx @@ -153,4 +153,27 @@ describe('MultipleAlertModal', () => { const { queryByText } = render(); expect(queryByText('Test Alert')).toBeNull(); }); + + it('syncs selectedIndex with alertKey when alertKey changes', () => { + const setAlertKey = jest.fn(); + (useAlerts as jest.Mock).mockReturnValue({ + ...baseMockUseAlerts, + setAlertKey, + alertKey: 'alert2', + }); + + const { getByText, rerender } = render(); + + expect(getByText('Test Alert 2')).toBeOnTheScreen(); + + (useAlerts as jest.Mock).mockReturnValue({ + ...baseMockUseAlerts, + setAlertKey, + alertKey: 'alert1', + }); + + rerender(); + + expect(getByText('Test Alert')).toBeOnTheScreen(); + }); }); diff --git a/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx b/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx index e836eeec040..b36cf4e4e43 100644 --- a/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx +++ b/app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { View } from 'react-native'; import { useAlerts } from '../../../context/alert-system-context'; import { Alert, AlertSeverity, Severity } from '../../../types/alerts'; @@ -140,6 +140,17 @@ const MultipleAlertModal: React.FC = () => { initialAlertIndex === -1 ? 0 : initialAlertIndex, ); + // syncs selectedIndex with alertKey when the modal is reopened which + // ensures the correct styling is applied + useEffect(() => { + const alertKeyIndex = fieldAlerts.findIndex( + (alert: Alert) => alert.key === alertKey, + ); + if (alertKeyIndex !== -1 && alertKeyIndex !== selectedIndex) { + setSelectedIndex(alertKeyIndex); + } + }, [alertKey, fieldAlerts, selectedIndex]); + const handleBackButtonClick = useCallback(() => { setSelectedIndex((prevIndex: number) => prevIndex > 0 ? prevIndex - 1 : prevIndex,