From d49b21f96b34972537b4426af5baaeb333dbca1e Mon Sep 17 00:00:00 2001 From: Kevin Bluer Date: Thu, 4 Dec 2025 11:48:06 -0600 Subject: [PATCH 1/6] fix(predict): Resolves sporadic re-render issue with chart when selecting MAX (#23572) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** - Resolves a sporadic re-render issue on the market details chart when a user selects `MAX` - Sets the default selected timeframe to `1M` ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: [PRED-34](https://consensyssoftware.atlassian.net/browse/PRED-341) ## **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** image ## **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] > Stabilizes MAX timeframe chart updates with a one-shot adaptive fidelity flow and switches default timeframe to 1M, with tests covering fidelity scenarios and empty histories. > > - **UI (PredictMarketDetails)**: > - Default `selectedTimeframe` set to `ONE_MONTH`. > - MAX interval fidelity made one-shot and stable using `useRef` locks (`maxFidelityLockedRef`, `prevTimeframeRef`): > - Reset fidelity when leaving `MAX`; wait for fetch completion; ignore immediate switch-to-MAX; compute range from primary history only. > - Renames `maxIntervalRangeMs` to `primaryMaxIntervalRangeMs` and refines range calculation. > - **Tests (PredictMarketDetails.test.tsx)**: > - Add coverage for MAX fidelity behavior: > - Requests higher fidelity for short spans; keeps default for long spans; handles empty histories gracefully. > - Utilize rerender and mocked `usePredictPriceHistory` to assert interval/fidelity calls. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit f3d8fbbee801d772d8cfb5c5756366ee994bfd2a. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- .../PredictMarketDetails.test.tsx | 70 +++++++++++++++-- .../PredictMarketDetails.tsx | 78 ++++++++++++++----- 2 files changed, 120 insertions(+), 28 deletions(-) diff --git a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx index d2937f4fdfcb..e7769c3ed6aa 100644 --- a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx +++ b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx @@ -2193,10 +2193,63 @@ describe('PredictMarketDetails', () => { it('requests higher fidelity when MAX history span is shorter than a month', async () => { const shortRangeHistory = buildPriceHistory(12 * 60 * 60 * 1000); // 12 hours + const { usePredictPriceHistory } = jest.requireMock( + '../../hooks/usePredictPriceHistory', + ); + + const { rerender } = setupPredictMarketDetailsTest( + { status: 'closed' }, + {}, + { + priceHistory: { + priceHistories: shortRangeHistory, + isFetching: true, + }, + }, + ); + + await waitFor(() => { + const maxCalls = usePredictPriceHistory.mock.calls.filter( + (call: [UsePredictPriceHistoryOptions]) => + call[0]?.interval === PredictPriceHistoryInterval.MAX, + ); + expect(maxCalls.length).toBeGreaterThan(0); + }); + + usePredictPriceHistory.mockReturnValue({ + priceHistories: shortRangeHistory, + isFetching: false, + errors: [], + refetch: jest.fn().mockResolvedValue(undefined), + }); + + await act(async () => { + rerender(); + }); + await waitFor( + () => { + const maxCalls = usePredictPriceHistory.mock.calls.filter( + (call: [UsePredictPriceHistoryOptions]) => + call[0]?.interval === PredictPriceHistoryInterval.MAX, + ); + expect( + maxCalls.some( + (call: [UsePredictPriceHistoryOptions]) => + call[0]?.fidelity === SHORT_RANGE_FIDELITY, + ), + ).toBe(true); + }, + { timeout: 10000 }, + ); + }, 15000); + + it('keeps default MAX fidelity when history span exceeds the threshold', async () => { + const longRangeHistory = buildPriceHistory(45 * 24 * 60 * 60 * 1000); + setupPredictMarketDetailsTest( { status: 'closed' }, {}, - { priceHistory: { priceHistories: shortRangeHistory } }, + { priceHistory: { priceHistories: longRangeHistory } }, ); const { usePredictPriceHistory } = jest.requireMock( @@ -2210,33 +2263,36 @@ describe('PredictMarketDetails', () => { ); expect(maxCalls.length).toBeGreaterThan(0); expect( - maxCalls.some( + maxCalls.every( (call: [UsePredictPriceHistoryOptions]) => - call[0]?.fidelity === SHORT_RANGE_FIDELITY, + call[0]?.fidelity === MAX_DEFAULT_FIDELITY, ), ).toBe(true); }); }); - it('keeps default MAX fidelity when history span exceeds the threshold', async () => { - const longRangeHistory = buildPriceHistory(45 * 24 * 60 * 60 * 1000); // 45 days - + it('handles empty price history gracefully', async () => { + // Empty price history should not cause errors + // The effect should wait for valid data before making fidelity decisions setupPredictMarketDetailsTest( { status: 'closed' }, {}, - { priceHistory: { priceHistories: longRangeHistory } }, + { priceHistory: { priceHistories: [[], []], isFetching: false } }, ); const { usePredictPriceHistory } = jest.requireMock( '../../hooks/usePredictPriceHistory', ); + // omponent should still render and make MAX interval calls + // but fidelity adjustment won't happen until valid data is available await waitFor(() => { const maxCalls = usePredictPriceHistory.mock.calls.filter( (call: [UsePredictPriceHistoryOptions]) => call[0]?.interval === PredictPriceHistoryInterval.MAX, ); expect(maxCalls.length).toBeGreaterThan(0); + // Should use default MAX fidelity since no valid range data available expect( maxCalls.every( (call: [UsePredictPriceHistoryOptions]) => diff --git a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx index 0f20e379342b..775d04db85b3 100644 --- a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx +++ b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx @@ -4,7 +4,13 @@ import { useNavigation, useRoute, } from '@react-navigation/native'; -import React, { useMemo, useState, useEffect, useCallback } from 'react'; +import React, { + useMemo, + useState, + useEffect, + useCallback, + useRef, +} from 'react'; import { Image, InteractionManager, @@ -114,9 +120,13 @@ const PredictMarketDetails: React.FC = () => { useRoute>(); const tw = useTailwind(); const [selectedTimeframe, setSelectedTimeframe] = - useState(PredictPriceHistoryInterval.ONE_DAY); + useState( + PredictPriceHistoryInterval.ONE_MONTH, + ); const [maxIntervalAdaptiveFidelity, setMaxIntervalAdaptiveFidelity] = useState(null); + const maxFidelityLockedRef = useRef(false); + const prevTimeframeRef = useRef(null); const [activeTab, setActiveTab] = useState(null); const [userSelectedTab, setUserSelectedTab] = useState(false); const insets = useSafeAreaInsets(); @@ -350,49 +360,75 @@ const PredictMarketDetails: React.FC = () => { enabled: chartOutcomeTokenIds.length > 0, }); - const maxIntervalRangeMs = useMemo(() => { + const primaryMaxIntervalRangeMs = useMemo(() => { if (selectedTimeframe !== PredictPriceHistoryInterval.MAX) { return null; } - const timestamps = priceHistories.flatMap((history) => - history.map((point) => getTimestampInMs(point.timestamp)), - ); - - if (!timestamps.length) { + const primaryHistory = priceHistories[0] ?? []; + if (primaryHistory.length === 0) { return null; } + const timestamps = primaryHistory.map((point) => + getTimestampInMs(point.timestamp), + ); + return Math.max(...timestamps) - Math.min(...timestamps); }, [priceHistories, selectedTimeframe]); useEffect(() => { + const prevTimeframe = prevTimeframeRef.current; + const justSwitchedToMax = + selectedTimeframe === PredictPriceHistoryInterval.MAX && + prevTimeframe !== PredictPriceHistoryInterval.MAX; + + // update the ref for next render + prevTimeframeRef.current = selectedTimeframe; + + // when switching away from MAX, reset the fidelity and unlock for next MAX selection if (selectedTimeframe !== PredictPriceHistoryInterval.MAX) { if (maxIntervalAdaptiveFidelity !== null) { setMaxIntervalAdaptiveFidelity(null); } + maxFidelityLockedRef.current = false; return; } - if ( - typeof maxIntervalRangeMs === 'number' && - maxIntervalRangeMs > 0 && - maxIntervalRangeMs < MAX_INTERVAL_SHORT_RANGE_MS - ) { - if (maxIntervalAdaptiveFidelity !== MAX_INTERVAL_SHORT_RANGE_FIDELITY) { - setMaxIntervalAdaptiveFidelity(MAX_INTERVAL_SHORT_RANGE_FIDELITY); - } + // skip if already locked to prevent feedback loop + if (maxFidelityLockedRef.current) { return; } + // wait for fetch to complete before making decisions + if (isPriceHistoryFetching) { + return; + } + + // skip if just switched to MAX - data is still from previous timeframe + if (justSwitchedToMax) { + return; + } + + // wait for valid range data before making a decision if ( - maxIntervalAdaptiveFidelity !== null && - (maxIntervalRangeMs === null || - maxIntervalRangeMs >= MAX_INTERVAL_SHORT_RANGE_MS) + typeof primaryMaxIntervalRangeMs !== 'number' || + primaryMaxIntervalRangeMs <= 0 ) { - setMaxIntervalAdaptiveFidelity(null); + return; + } + + // make one-shot fidelity decision and lock to prevent re-evaluation + if (primaryMaxIntervalRangeMs < MAX_INTERVAL_SHORT_RANGE_MS) { + setMaxIntervalAdaptiveFidelity(MAX_INTERVAL_SHORT_RANGE_FIDELITY); } - }, [maxIntervalRangeMs, maxIntervalAdaptiveFidelity, selectedTimeframe]); + maxFidelityLockedRef.current = true; + }, [ + primaryMaxIntervalRangeMs, + maxIntervalAdaptiveFidelity, + selectedTimeframe, + isPriceHistoryFetching, + ]); const chartData: ChartSeries[] = useMemo(() => { const palette = [ From 95228663672740faac3067e00a150d2a57dda687 Mon Sep 17 00:00:00 2001 From: Michele Esposito <34438276+mikesposito@users.noreply.github.com> Date: Thu, 4 Dec 2025 19:41:16 +0100 Subject: [PATCH 2/6] refactor: cp-7.61.0 gate `ProfileMetricsController` with `pna25Acknowledged` (#23682) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** The PR adds an additional check to the `assertUserOptedIn` function passed to the `ProfileMetricsController` to ensure that profile metrics are only collected after the user has acknowledged the PNA25 notice. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: ## **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** ## **Pre-merge author checklist** - [ ] 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). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] 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. --- .../profile-metrics-controller-init.test.ts | 32 +++++++++++++++++-- .../profile-metrics-controller-init.ts | 12 +++++-- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/app/core/Engine/controllers/profile-metrics-controller-init.test.ts b/app/core/Engine/controllers/profile-metrics-controller-init.test.ts index 50aae78ce0db..bded270cf5f1 100644 --- a/app/core/Engine/controllers/profile-metrics-controller-init.test.ts +++ b/app/core/Engine/controllers/profile-metrics-controller-init.test.ts @@ -16,10 +16,12 @@ function getInitRequestMock({ metaMetricsId, remoteFeatureFlag, metaMetricsEnabled, + pna25Acknowledged, }: { metaMetricsId: string; remoteFeatureFlag: boolean; metaMetricsEnabled: boolean; + pna25Acknowledged: boolean; }): jest.Mocked> { const baseMessenger = new ExtendedMessenger({ namespace: MOCK_ANY_NAMESPACE, @@ -35,12 +37,19 @@ function getInitRequestMock({ }, }); + const mockGetState = jest.fn().mockReturnValue({ + legalNotices: { + isPna25Acknowledged: pna25Acknowledged, + }, + }); + const requestMock = { ...buildControllerInitRequestMock(baseMessenger), controllerMessenger: getProfileMetricsControllerMessenger(baseMessenger), initMessenger: undefined, metaMetricsId, getController: mockGetController, + getState: mockGetState, }; return requestMock; @@ -51,36 +60,52 @@ describe.each([ metaMetricsId: 'dd6395a5-7a84-47b8-8bc3-713170c2f3e8', remoteFeatureFlag: true, metaMetricsEnabled: true, + pna25Acknowledged: true, }, { metaMetricsId: '898cbad5-7a5e-4ea1-8ca0-822bb4804665', remoteFeatureFlag: false, metaMetricsEnabled: false, + pna25Acknowledged: false, }, { metaMetricsId: '9c9fe89c-76c3-4ad6-89f8-b76061159458', remoteFeatureFlag: true, metaMetricsEnabled: false, + pna25Acknowledged: false, }, { metaMetricsId: '5aed4107-f430-4bb0-84c9-1e7031599cc2', remoteFeatureFlag: false, metaMetricsEnabled: true, + pna25Acknowledged: false, + }, + { + metaMetricsId: '3f4e2d2a-1c4e-4f5e-9f3a-2b6d8c9e7f10', + remoteFeatureFlag: true, + metaMetricsEnabled: true, + pna25Acknowledged: false, }, ])( 'profileMetricsControllerInit', - ({ metaMetricsId, remoteFeatureFlag, metaMetricsEnabled }) => { + ({ + metaMetricsId, + remoteFeatureFlag, + metaMetricsEnabled, + pna25Acknowledged, + }) => { beforeEach(() => { jest.clearAllMocks(); }); - describe(`when metaMetricsId is ${metaMetricsId}, the feature flag value is ${remoteFeatureFlag} and MetaMetrics is ${metaMetricsEnabled ? 'enabled' : 'disabled'}`, () => { + describe(`when metaMetricsId is ${metaMetricsId}, the feature flag value is ${remoteFeatureFlag}, MetaMetrics is ${metaMetricsEnabled ? 'enabled' : 'disabled'} and pna25Acknowledged is ${pna25Acknowledged}`, () => { it('initializes the controller', () => { const { controller } = profileMetricsControllerInit( getInitRequestMock({ metaMetricsId, remoteFeatureFlag, metaMetricsEnabled, + pna25Acknowledged, }), ); @@ -93,6 +118,7 @@ describe.each([ metaMetricsId, remoteFeatureFlag, metaMetricsEnabled, + pna25Acknowledged, }), ); @@ -105,7 +131,7 @@ describe.each([ getMetaMetricsId: expect.any(Function), }); expect(controllerMock.mock.calls[0][0].assertUserOptedIn()).toBe( - metaMetricsEnabled && remoteFeatureFlag, + metaMetricsEnabled && remoteFeatureFlag && pna25Acknowledged, ); expect(controllerMock.mock.calls[0][0].getMetaMetricsId()).toBe( metaMetricsId, diff --git a/app/core/Engine/controllers/profile-metrics-controller-init.ts b/app/core/Engine/controllers/profile-metrics-controller-init.ts index 5990908d9c92..6d6bb0821393 100644 --- a/app/core/Engine/controllers/profile-metrics-controller-init.ts +++ b/app/core/Engine/controllers/profile-metrics-controller-init.ts @@ -18,13 +18,21 @@ import { MetaMetrics } from '../../Analytics'; export const profileMetricsControllerInit: ControllerInitFunction< ProfileMetricsController, ProfileMetricsControllerMessenger -> = ({ controllerMessenger, persistedState, getController, metaMetricsId }) => { +> = ({ + controllerMessenger, + persistedState, + getController, + metaMetricsId, + getState, +}) => { const remoteFeatureFlagController = getController( 'RemoteFeatureFlagController', ); const assertUserOptedIn = () => remoteFeatureFlagController.state.remoteFeatureFlags.extensionUxPna25 === - true && MetaMetrics.getInstance().isEnabled() === true; + true && + MetaMetrics.getInstance().isEnabled() === true && + getState().legalNotices.isPna25Acknowledged === true; const controller = new ProfileMetricsController({ messenger: controllerMessenger, From 0232ac7b07ff950169a045d6ec650976d1e731e8 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 4 Dec 2025 10:44:55 -0800 Subject: [PATCH 3/6] fix: sentence case violations 1-1000 of locales file (#23499) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR fixes sentence case violations in lines 1-1000 of the `locales/languages/en.json` file as part of ongoing content papercut improvements. The changes convert Title Case strings to Sentence case following standard capitalization conventions. **What is the reason for the change?** Content consistency and adherence to proper sentence case formatting across the app. **What is the improvement/solution?** Updated 31 locale keys from Title Case to Sentence case, and updated all affected test files to match the new casing. ## **Changelog** CHANGELOG entry: Fixed sentence case violations in English locale strings lines 1-1000 ## **Related issues** Fixes: Part of content papercut improvements batch 1 ## **Manual testing steps** ```gherkin Feature: Locale string display Scenario: user views UI elements with updated locale strings Given the app is running with the updated locale file When user navigates to various screens (Settings, Onboarding, Perps, Deposit, etc.) Then all text labels should display in proper sentence case format And no Title Case violations should appear in the affected strings ``` ## **Screenshots/Recordings** N/A - This is a content-only change with no visual differences beyond text casing ### **Before** Text displayed in Title Case (e.g., "Alert Details", "Try Again", "Your Accounts") ### **After** Text displayed in Sentence case (e.g., "Alert details", "Try again", "Your accounts") ## **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. --- ## **Technical Details** ### Changes Made: - **Locale file**: Updated 31 keys in `locales/languages/en.json` (lines 1-1000) - **Test files**: Updated 16 test files with hardcoded string assertions - **Snapshots**: Regenerated 8 snapshot files to match new casing ### Affected Areas: - Onboarding flows - Settings screens - Alert modals - Perps/trading interfaces - Deposit/payment flows - Rewards banners - Send/recipient selection ### Validation: - All affected unit tests pass - No old Title Case strings remain in updated test files - Changes are purely cosmetic (text casing only) 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- > [!NOTE] > Standardizes sentence case across `locales/languages/en.json` and updates impacted tests/snapshots to match. > > - **i18n**: > - Convert numerous strings in `locales/languages/en.json` to sentence case (e.g., `"Try again"`, `"Additional verification"`, `"Error details"`, `"Your accounts"`, `"Sample feature"`, `"Postal/zip code"`). > - **Tests/Snapshots (casing updates only)**: > - Predict: `usePredictToasts.test.ts`. > - Ramp Deposit: `AdditionalVerification`, `BuildQuote`, `EnterAddress`, `ErrorDetailsModal`, `PaymentMethodSelectorModal`, `UnsupportedRegionModal`, `SdkErrorAlert` (and snapshots). > - Rewards: `RewardsErrorBanner.test.tsx`. > - Settings: `Views/Settings/DeveloperOptions` snapshot. > - Confirmations: `alert-modal.test.tsx`, `useAddressTrustSignalAlerts.test.ts`, `SendFlow/AddressList` and `SendTo` snapshots. > - SampleFeature: `SampleFeatureDevSettingsEntryPoint.test.tsx`, `SamplePetNames` and `SampleFeature` snapshots. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit deae15875fdf64e89e768adc4a6bfa46e1e23fb5. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- .../UI/Predict/hooks/usePredictToasts.test.ts | 4 +- .../AdditionalVerification.test.tsx.snap | 4 +- .../__snapshots__/BuildQuote.test.tsx.snap | 8 +-- .../__snapshots__/EnterAddress.test.tsx.snap | 18 +++--- .../ErrorDetailsModal.test.tsx.snap | 2 +- .../PaymentMethodSelectorModal.test.tsx.snap | 2 +- .../UnsupportedRegionModal.test.tsx | 2 +- .../UnsupportedRegionModal.test.tsx.snap | 4 +- .../SdkErrorAlert/SdkErrorAlert.test.tsx | 2 +- .../__snapshots__/SdkErrorAlert.test.tsx.snap | 10 ++-- .../components/RewardsErrorBanner.test.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../modals/alert-modal/alert-modal.test.tsx | 2 +- .../useAddressTrustSignalAlerts.test.ts | 2 +- .../SendFlow/AddressList/AddressList.test.tsx | 2 +- .../__snapshots__/AddressList.test.tsx.snap | 2 +- .../SendTo/__snapshots__/index.test.tsx.snap | 2 +- ...ampleFeatureDevSettingsEntryPoint.test.tsx | 2 +- .../SamplePetNames.test.tsx.snap | 2 +- .../__snapshots__/SampleFeature.test.tsx.snap | 4 +- locales/languages/en.json | 56 +++++++++---------- 21 files changed, 68 insertions(+), 68 deletions(-) diff --git a/app/components/UI/Predict/hooks/usePredictToasts.test.ts b/app/components/UI/Predict/hooks/usePredictToasts.test.ts index 548a594b3561..d2268aa063a7 100644 --- a/app/components/UI/Predict/hooks/usePredictToasts.test.ts +++ b/app/components/UI/Predict/hooks/usePredictToasts.test.ts @@ -86,7 +86,7 @@ describe('usePredictToasts', () => { errorToastConfig: { title: 'Transaction Failed', description: 'Something went wrong', - retryLabel: 'Try Again', + retryLabel: 'Try again', onRetry: mockOnRetry, }, clearTransaction: mockClearTransaction, @@ -609,7 +609,7 @@ describe('usePredictToasts', () => { }), ]), linkButtonOptions: expect.objectContaining({ - label: 'Try Again', + label: 'Try again', onPress: mockOnRetry, }), }), diff --git a/app/components/UI/Ramp/Deposit/Views/AdditionalVerification/__snapshots__/AdditionalVerification.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/AdditionalVerification/__snapshots__/AdditionalVerification.test.tsx.snap index 1c5aa3d7a5b2..dfa8bdb69eec 100644 --- a/app/components/UI/Ramp/Deposit/Views/AdditionalVerification/__snapshots__/AdditionalVerification.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/AdditionalVerification/__snapshots__/AdditionalVerification.test.tsx.snap @@ -231,7 +231,7 @@ exports[`AdditionalVerification Component render matches snapshot 1`] = ` } } > - Additional Verification + Additional verification @@ -592,7 +592,7 @@ exports[`AdditionalVerification Component render matches snapshot 1`] = ` } } > - Additional Verification + Additional verification - Try Again + Try again @@ -22991,7 +22991,7 @@ exports[`BuildQuote Component Region Selection does not open region modal when r } } > - Try Again + Try again @@ -26710,7 +26710,7 @@ exports[`BuildQuote Component Token Selection does not open token modal when cry } } > - Try Again + Try again @@ -28618,7 +28618,7 @@ exports[`BuildQuote Component User Details Error displays user details error ale } } > - Try Again + Try again diff --git a/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap index 10553582273f..710951bc8b43 100644 --- a/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap @@ -1263,7 +1263,7 @@ exports[`EnterAddress Component displays form validation errors when continue is } testID="label" > - Postal/Zip Code + Postal/zip code - Postal/Zip Code is required + Postal/zip code is required - Postal/Zip Code + Postal/zip code - Postal/Zip Code + Postal/zip code - Postal/Zip Code + Postal/zip code - Error Details + Error details diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap index 932b653a6dbb..ea735246a4a7 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap @@ -475,7 +475,7 @@ exports[`PaymentMethodSelectorModal Component renders correctly and matches snap } testID="header-title" > - Select a Payment Method + Select a payment method { const { getByText } = render(UnsupportedRegionModal); - const buyCryptoButton = getByText('Buy Crypto'); + const buyCryptoButton = getByText('Buy crypto'); fireEvent.press(buyCryptoButton); expect(mockDangerouslyGetParent).toHaveBeenCalled(); diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap index e166994a5b1f..08218d8125af 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap @@ -653,7 +653,7 @@ exports[`UnsupportedRegionModal handles missing region gracefully 1`] = ` } } > - Buy Crypto + Buy crypto @@ -1329,7 +1329,7 @@ exports[`UnsupportedRegionModal render match snapshot 1`] = ` } } > - Buy Crypto + Buy crypto diff --git a/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/SdkErrorAlert.test.tsx b/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/SdkErrorAlert.test.tsx index 6cd1becf1625..195f1e63610e 100644 --- a/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/SdkErrorAlert.test.tsx +++ b/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/SdkErrorAlert.test.tsx @@ -64,7 +64,7 @@ describe('SdkErrorAlert', () => { />, ); - const retryButton = screen.getByText('Try Again'); + const retryButton = screen.getByText('Try again'); fireEvent.press(retryButton); expect(mockRetry).toHaveBeenCalledTimes(1); diff --git a/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/__snapshots__/SdkErrorAlert.test.tsx.snap b/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/__snapshots__/SdkErrorAlert.test.tsx.snap index f70a3c05760e..2dabbc961232 100644 --- a/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/__snapshots__/SdkErrorAlert.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/components/SdkErrorAlert/__snapshots__/SdkErrorAlert.test.tsx.snap @@ -89,7 +89,7 @@ exports[`SdkErrorAlert disables retry button when isRetrying is true 1`] = ` } } > - Try Again + Try again @@ -246,7 +246,7 @@ exports[`SdkErrorAlert renders payment methods error message 1`] = ` } } > - Try Again + Try again @@ -342,7 +342,7 @@ exports[`SdkErrorAlert renders regions error message 1`] = ` } } > - Try Again + Try again @@ -438,7 +438,7 @@ exports[`SdkErrorAlert renders tokens error message 1`] = ` } } > - Try Again + Try again @@ -534,7 +534,7 @@ exports[`SdkErrorAlert renders user details error message 1`] = ` } } > - Try Again + Try again diff --git a/app/components/UI/Rewards/components/RewardsErrorBanner.test.tsx b/app/components/UI/Rewards/components/RewardsErrorBanner.test.tsx index 81444e26e219..f461d4bb1fc0 100644 --- a/app/components/UI/Rewards/components/RewardsErrorBanner.test.tsx +++ b/app/components/UI/Rewards/components/RewardsErrorBanner.test.tsx @@ -201,7 +201,7 @@ describe('RewardsErrorBanner', () => { it('calls onConfirm when custom labeled button pressed', () => { // Arrange const onConfirm = jest.fn(); - const customLabel = 'Try Again'; + const customLabel = 'Try again'; const { getByText } = render( { ); // Act - fireEvent.press(getByText('Try Again')); + fireEvent.press(getByText('Try again')); // Assert expect(onConfirm).toHaveBeenCalledTimes(1); diff --git a/app/components/Views/Settings/DeveloperOptions/__snapshots__/index.test.tsx.snap b/app/components/Views/Settings/DeveloperOptions/__snapshots__/index.test.tsx.snap index 7183ad3ca804..87156ac90cc9 100644 --- a/app/components/Views/Settings/DeveloperOptions/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/Settings/DeveloperOptions/__snapshots__/index.test.tsx.snap @@ -516,7 +516,7 @@ exports[`DeveloperOptions renders correctly 1`] = ` } } > - Sample Feature + Sample feature { const { getByText } = render(); expect(getByText('Test Alert')).toBeDefined(); expect(getByText(ALERT_MESSAGE_MOCK)).toBeDefined(); - expect(getByText('Alert Details')).toBeDefined(); + expect(getByText('Alert details')).toBeDefined(); expect(getByText('• Detail 1')).toBeDefined(); expect(getByText('• Detail 2')).toBeDefined(); }); diff --git a/app/components/Views/confirmations/hooks/alerts/useAddressTrustSignalAlerts.test.ts b/app/components/Views/confirmations/hooks/alerts/useAddressTrustSignalAlerts.test.ts index 0bc12db9277a..f681e3a02752 100644 --- a/app/components/Views/confirmations/hooks/alerts/useAddressTrustSignalAlerts.test.ts +++ b/app/components/Views/confirmations/hooks/alerts/useAddressTrustSignalAlerts.test.ts @@ -91,7 +91,7 @@ describe('useAddressTrustSignalAlerts', () => { field: RowAlertKey.InteractingWith, message: "We can't verify this address. It may be new or unverified. Only continue if you trust the source.", - title: 'Address Needs Review', + title: 'Address needs review', severity: Severity.Warning, isBlocking: false, }, diff --git a/app/components/Views/confirmations/legacy/SendFlow/AddressList/AddressList.test.tsx b/app/components/Views/confirmations/legacy/SendFlow/AddressList/AddressList.test.tsx index 91e9e85e9ba0..2acded42e92b 100644 --- a/app/components/Views/confirmations/legacy/SendFlow/AddressList/AddressList.test.tsx +++ b/app/components/Views/confirmations/legacy/SendFlow/AddressList/AddressList.test.tsx @@ -42,7 +42,7 @@ jest.mock('../../../../../../core/Engine', () => { }); const textElements = { - yourAccounts: 'Your Accounts', + yourAccounts: 'Your accounts', contacts: 'Contacts', firstAccount: 'Account 1', firstContact: 'My first contact', diff --git a/app/components/Views/confirmations/legacy/SendFlow/AddressList/__snapshots__/AddressList.test.tsx.snap b/app/components/Views/confirmations/legacy/SendFlow/AddressList/__snapshots__/AddressList.test.tsx.snap index 2203b8d2c259..b0f36d6f528b 100644 --- a/app/components/Views/confirmations/legacy/SendFlow/AddressList/__snapshots__/AddressList.test.tsx.snap +++ b/app/components/Views/confirmations/legacy/SendFlow/AddressList/__snapshots__/AddressList.test.tsx.snap @@ -66,7 +66,7 @@ exports[`AddressList renders correctly 1`] = ` } } > - Your Accounts + Your accounts - Your Accounts + Your accounts { ); // Check that the component renders the expected text - expect(getByText('Sample Feature')).toBeDefined(); + expect(getByText('Sample feature')).toBeDefined(); expect( getByText('A sample feature as a template for developers.'), ).toBeDefined(); diff --git a/app/features/SampleFeature/components/views/SamplePetNames/__snapshots__/SamplePetNames.test.tsx.snap b/app/features/SampleFeature/components/views/SamplePetNames/__snapshots__/SamplePetNames.test.tsx.snap index 077562d35a1e..bb8c1d6d1dc2 100644 --- a/app/features/SampleFeature/components/views/SamplePetNames/__snapshots__/SamplePetNames.test.tsx.snap +++ b/app/features/SampleFeature/components/views/SamplePetNames/__snapshots__/SamplePetNames.test.tsx.snap @@ -49,7 +49,7 @@ exports[`SamplePetNames matches rendered snapshot 1`] = ` } } > - Pet Names on this network + Pet names on this network - Sample Feature + Sample feature - Sample Feature + Sample feature Date: Thu, 4 Dec 2025 16:21:07 -0300 Subject: [PATCH 4/6] fix(ramp): align Aggregator UI with design system cp-7.61.0 (#23677) ## **Description** This PR aligns Aggregator screens with the current design system components and styles as part of **Unified Buy Phase 1** ([#23636](https://github.com/MetaMask/metamask-mobile/issues/23636)). The Ramp components were originally created before the design system existed. These refinements reduce visual noise and inconsistencies, making the experience feel more modern, trustworthy, and consistent with the rest of the app. ### Changes: - **Inputs**: Removed borders and applied muted background (borderless input style) - **Primary CTA**: Updated buttons to design system `Button` component (Primary variant) - **Quotes list**: Updated quote cards to borderless boxes with muted background - **Account & region selectors**: Updated to muted background style to match new inputs - **Keypad**: Set keypad container background to `background.section` - **Quick amounts**: Set background to `background.section`, migrated to `Button` (Secondary variant) - **Icons**: Replaced FontAwesome/Entypo icons with component-library `Icon` (ArrowDown) - **Skeleton components**: Updated background color to `background.hover` **Note**: Visual-only changes; no behavioral changes expected. ## **Changelog** CHANGELOG entry: Refined Buy/Sell UI inputs and buttons to match design system ## **Related issues** Fixes: #23636 ## **Manual testing steps** ```gherkin Feature: Buy UI Design System Alignment Scenario: User views the Build Quote screen Given the user is on the Buy flow When user navigates to the Build Quote screen Then the inputs should have muted backgrounds without borders And the "Get quotes" button should use the Primary button style And the keypad container should have a section background And the quick amount buttons should use Secondary button style Scenario: User views the Quotes list Given the user has entered an amount to buy When user views the list of quotes Then the quote cards should have muted backgrounds without borders And the "Continue with [provider]" buttons should show loading spinner when pressed Scenario: User views Order Details Given the user has completed an order When user views the order details screen Then the action buttons should use the Primary button style Scenario: User toggles between light and dark theme Given the user is on any Ramp screen When user switches between light and dark theme Then all components should render correctly in both themes ``` ## **Screenshots/Recordings** ### **Before** #### Light Theme https://github.com/user-attachments/assets/f99f11cb-c21d-48be-afb8-4e2e2870d155 #### Dark Theme https://github.com/user-attachments/assets/832268cd-5330-48fb-9877-a57d5686e5db ### **After** #### Light Theme https://github.com/user-attachments/assets/be3400df-07d7-4db9-b1c9-df4d246e4480 #### Dark Theme https://github.com/user-attachments/assets/5f5450f8-cb12-4dee-8957-ce52e26098ce ## **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] > [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) is generating a summary for commit 7c91a7560cd6df77264bcba0edb9d14aff72142c. Configure [here](https://cursor.com/dashboard?tab=bugbot). --- app/components/Base/SelectorButton.tsx | 20 +- .../Views/BuildQuote/BuildQuote.styles.ts | 2 +- .../Views/BuildQuote/BuildQuote.tsx | 32 +- .../__snapshots__/BuildQuote.test.tsx.snap | 5794 +++++------------ .../__snapshots__/Checkout.test.tsx.snap | 354 +- .../Views/OrderDetails/OrderDetails.tsx | 28 +- .../__snapshots__/OrderDetails.test.tsx.snap | 381 +- .../Aggregator/Views/Quotes/Quotes.styles.ts | 2 +- .../Quotes/__snapshots__/Quotes.test.tsx.snap | 595 +- .../components/AssetSelectorButton.tsx | 5 +- .../UI/Ramp/Aggregator/components/Box.tsx | 3 +- .../CustomAction/CustomAction.test.tsx | 4 +- .../components/CustomAction/CustomAction.tsx | 43 +- .../__snapshots__/CustomAction.test.tsx.snap | 175 + .../Aggregator/components/DownChevronText.tsx | 45 +- .../Ramp/Aggregator/components/ErrorView.tsx | 16 +- .../PaymentMethodSelectorModal.test.tsx.snap | 18 +- .../Aggregator/components/QuickAmounts.tsx | 65 +- .../components/Quote/Quote.test.tsx | 4 +- .../Aggregator/components/Quote/Quote.tsx | 43 +- .../Quote/__snapshots__/Quote.test.tsx.snap | 311 + .../Aggregator/components/SkeletonBox.tsx | 2 +- .../Aggregator/components/SkeletonText.tsx | 2 +- .../AccountSelector.test.tsx.snap | 38 +- .../__snapshots__/AmountInput.test.tsx.snap | 159 +- .../AssetSelectorButton.test.tsx.snap | 301 +- .../PaymentMethodSelector.test.tsx.snap | 297 +- .../__snapshots__/BuildQuote.test.tsx.snap | 34 +- .../AccountSelector/AccountSelector.styles.ts | 2 +- 29 files changed, 3178 insertions(+), 5597 deletions(-) create mode 100644 app/components/UI/Ramp/Aggregator/components/CustomAction/__snapshots__/CustomAction.test.tsx.snap create mode 100644 app/components/UI/Ramp/Aggregator/components/Quote/__snapshots__/Quote.test.tsx.snap diff --git a/app/components/Base/SelectorButton.tsx b/app/components/Base/SelectorButton.tsx index 946b70a6767a..7a578f183ca8 100644 --- a/app/components/Base/SelectorButton.tsx +++ b/app/components/Base/SelectorButton.tsx @@ -6,7 +6,11 @@ import { TouchableOpacityProps, GestureResponderEvent, } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import Icon, { + IconName, + IconSize, + IconColor, +} from '../../component-library/components/Icons/Icon'; import { useTheme } from '../../util/theme'; import { Theme } from '@metamask/design-tokens'; @@ -19,7 +23,7 @@ interface SelectorButtonProps { const createStyles = (colors: Theme['colors']) => StyleSheet.create({ container: { - backgroundColor: colors.background.alternative, + backgroundColor: colors.background.muted, paddingVertical: 8, paddingHorizontal: 10, borderRadius: 100, @@ -28,10 +32,7 @@ const createStyles = (colors: Theme['colors']) => justifyContent: 'center', }, caretDown: { - textAlign: 'right', - color: colors.text.alternative, - marginLeft: 10, - marginRight: 5, + marginHorizontal: 5, }, }); @@ -48,7 +49,12 @@ const SelectorButton: React.FC = ({ <>{children} - + ); diff --git a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.styles.ts b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.styles.ts index 022fe9e80cef..e1aece00dfde 100644 --- a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.styles.ts +++ b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.styles.ts @@ -23,7 +23,7 @@ const styleSheet = (params: { theme: Theme }) => { left: 0, right: 0, paddingBottom: 50, - backgroundColor: colors.background.alternative, + backgroundColor: colors.background.section, }, keypad: { paddingHorizontal: 16, diff --git a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx index 64a610621bdb..0dfd41e2132d 100644 --- a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx +++ b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx @@ -31,7 +31,6 @@ import useAddressBalance from '../../../../../hooks/useAddressBalance/useAddress import { Asset } from '../../../../../hooks/useAddressBalance/useAddressBalance.types'; import BaseSelectorButton from '../../../../../Base/SelectorButton'; -import StyledButton from '../../../../StyledButton'; import ScreenLayout from '../../components/ScreenLayout'; import Row from '../../components/Row'; @@ -92,6 +91,11 @@ import Text, { TextColor, TextVariant, } from '../../../../../../component-library/components/Texts/Text'; +import Button, { + ButtonSize, + ButtonVariants, + ButtonWidthTypes, +} from '../../../../../../component-library/components/Buttons/Button'; import { BuildQuoteSelectors } from '../../../../../../../e2e/selectors/Ramps/BuildQuote.selectors'; import { isNonEvmAddress } from '../../../../../../core/Multichain/utils'; @@ -1101,15 +1105,15 @@ const BuildQuote = () => { - - {strings('fiat_on_ramp_aggregator.get_quotes')} - + /> @@ -1137,14 +1141,14 @@ const BuildQuote = () => { } /> - - {strings('fiat_on_ramp_aggregator.done')} - + /> diff --git a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap index 89da8e65ebc1..1381d6b8e5f5 100644 --- a/app/components/UI/Ramp/Aggregator/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap @@ -630,7 +630,7 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -676,32 +676,20 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -801,9 +777,8 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -1019,117 +994,46 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no } testID="listitemcolumn" > - + - - ETH - - - -  - + ETH + @@ -1192,9 +1096,8 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -1297,117 +1200,46 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no onPress={[Function]} testID="select-currency" > - + - - USD - - - -  - + USD + @@ -1484,9 +1316,8 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -1586,117 +1417,46 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no } testID="listitem-gap" /> - + - - Change - - - -  - + Change + @@ -1799,53 +1559,34 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -1887,8 +1628,8 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no $100 @@ -1962,62 +1679,38 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no $500 @@ -2026,62 +1719,38 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no $1000 @@ -2798,49 +2467,34 @@ exports[`BuildQuote View Balance display displays balance from useBalance for no Done @@ -3556,49 +3210,34 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr Change payment method @@ -4219,49 +3858,34 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr Change cash destination @@ -4979,49 +4603,34 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i Try again @@ -5675,7 +5284,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -5721,32 +5330,20 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -5844,9 +5429,8 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -5889,12 +5473,12 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp [ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 9999, - "height": 40, + "height": 48, "justifyContent": "center", "overflow": "hidden", - "width": 40, + "width": 48, }, undefined, ] @@ -5922,7 +5506,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -5967,7 +5551,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -6012,7 +5596,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -6062,9 +5646,8 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -6167,117 +5750,46 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp onPress={[Function]} testID="select-currency" > - + - - USD - - - -  - + USD + @@ -6352,9 +5864,8 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -6395,7 +5906,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -6440,7 +5951,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -6486,7 +5997,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -6548,53 +6059,34 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -6636,8 +6128,8 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp $100 @@ -6711,62 +6179,38 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp $500 @@ -6775,62 +6219,38 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp $1000 @@ -7547,49 +6967,34 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp Done @@ -8305,49 +7710,34 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is Try again @@ -9001,7 +8391,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -9047,32 +8437,20 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -9170,9 +8536,8 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -9215,12 +8580,12 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats [ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 9999, - "height": 40, + "height": 48, "justifyContent": "center", "overflow": "hidden", - "width": 40, + "width": 48, }, undefined, ] @@ -9248,7 +8613,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9293,7 +8658,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9338,7 +8703,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9388,9 +8753,8 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -9445,7 +8809,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9492,7 +8856,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9587,9 +8951,8 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -9630,7 +8993,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9675,7 +9038,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9721,7 +9084,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -9783,53 +9146,34 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -9871,8 +9215,8 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats $100 @@ -9946,62 +9266,38 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats $500 @@ -10010,62 +9306,38 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats $1000 @@ -10782,49 +10054,34 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats Done @@ -11540,49 +10797,34 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is Try again @@ -12236,7 +11478,7 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -12282,32 +11524,20 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -12407,9 +11625,8 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -12625,117 +11842,46 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa } testID="listitemcolumn" > - + - - ETH - - - -  - + ETH + @@ -12798,9 +11944,8 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -12903,117 +12048,46 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa onPress={[Function]} testID="select-currency" > - + - - USD - - - -  - + USD + @@ -13090,9 +12164,8 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -13192,117 +12265,46 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa } testID="listitem-gap" /> - + - + - Change - - - -  - - + } + width={16} + /> @@ -13362,53 +12364,34 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -13450,8 +12433,8 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa $100 @@ -13525,62 +12484,38 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa $500 @@ -13589,62 +12524,38 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa $1000 @@ -14361,49 +13272,34 @@ exports[`BuildQuote View Payment Method Data renders no icons if there are no pa Done @@ -15055,7 +13951,7 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -15101,32 +13997,20 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -15226,9 +14098,8 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -15444,117 +14315,46 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme } testID="listitemcolumn" > - + - - ETH - - - -  - + ETH + @@ -15617,9 +14417,8 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -15722,117 +14521,46 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme onPress={[Function]} testID="select-currency" > - + - - USD - - - -  - + USD + @@ -15907,9 +14635,8 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -15950,7 +14677,7 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -15995,7 +14722,7 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -16041,7 +14768,7 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -16103,53 +14830,34 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -16191,8 +14899,8 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme $100 @@ -16266,62 +14950,38 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme $500 @@ -16330,62 +14990,38 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme $1000 @@ -17102,49 +15738,34 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme Done @@ -17860,49 +16481,34 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi Try again @@ -18556,7 +17162,7 @@ exports[`BuildQuote View Regions data renders the loading page when regions are style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -18602,32 +17208,20 @@ exports[`BuildQuote View Regions data renders the loading page when regions are } } /> - -  - + width={16} + /> Get quotes @@ -19390,8 +17962,8 @@ exports[`BuildQuote View Regions data renders the loading page when regions are $100 @@ -19465,62 +18013,38 @@ exports[`BuildQuote View Regions data renders the loading page when regions are $500 @@ -19529,62 +18053,38 @@ exports[`BuildQuote View Regions data renders the loading page when regions are $1000 @@ -20301,49 +18801,34 @@ exports[`BuildQuote View Regions data renders the loading page when regions are Done @@ -20995,7 +19480,7 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -21041,32 +19526,20 @@ exports[`BuildQuote View renders correctly 1`] = ` } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> @@ -21166,9 +19627,8 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -21384,117 +19844,46 @@ exports[`BuildQuote View renders correctly 1`] = ` } testID="listitemcolumn" > - + - - ETH - - - -  - + ETH + @@ -21557,9 +19946,8 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -21662,117 +20050,46 @@ exports[`BuildQuote View renders correctly 1`] = ` onPress={[Function]} testID="select-currency" > - + - - USD - - - -  - + USD + @@ -21849,9 +20166,8 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -21951,117 +20267,46 @@ exports[`BuildQuote View renders correctly 1`] = ` } testID="listitem-gap" /> - + - - Change - - - -  - + Change + @@ -22164,53 +20409,34 @@ exports[`BuildQuote View renders correctly 1`] = ` accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] + { + "alignItems": "center", + "alignSelf": "stretch", + "backgroundColor": "#121314", + "borderRadius": 12, + "flexDirection": "row", + "height": 48, + "justifyContent": "center", + "opacity": 0.5, + "overflow": "hidden", + "paddingHorizontal": 16, + } } > Get quotes @@ -22252,8 +20478,8 @@ exports[`BuildQuote View renders correctly 1`] = ` $100 @@ -22327,62 +20529,38 @@ exports[`BuildQuote View renders correctly 1`] = ` $500 @@ -22391,62 +20569,38 @@ exports[`BuildQuote View renders correctly 1`] = ` - + $1000 @@ -23163,49 +21317,34 @@ exports[`BuildQuote View renders correctly 1`] = ` Done @@ -23760,7 +21899,7 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ { "alignItems": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 100, "flexDirection": "row", "justifyContent": "center", @@ -23806,32 +21945,20 @@ exports[`BuildQuote View renders correctly 2`] = ` } } /> - -  - + width={16} + /> 🇨🇱 - -  - + width={16} + /> USD - -  - + width={16} + /> @@ -23998,9 +22101,8 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -24216,117 +22318,46 @@ exports[`BuildQuote View renders correctly 2`] = ` } testID="listitemcolumn" > - + - - ETH - - - -  - + ETH + @@ -24389,9 +22420,8 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -24530,9 +22560,8 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -24632,117 +22661,46 @@ exports[`BuildQuote View renders correctly 2`] = ` } testID="listitem-gap" /> - + - - Change - - - -  - + Change + @@ -24845,53 +22803,34 @@ exports[`BuildQuote View renders correctly 2`] = ` accessible={true} activeOpacity={1} disabled={true} + onPress={[Function]} + onPressIn={[Function]} + onPressOut={[Function]} style={ - [ - [ - { - "borderRadius": 12, - "justifyContent": "center", - "padding": 15, - }, - { - "backgroundColor": "#4459ff", - "minHeight": 50, - }, - undefined, - ], - { - "opacity": 0.6, - }, - ] - } - > - + Get quotes @@ -24933,8 +22872,8 @@ exports[`BuildQuote View renders correctly 2`] = ` 25% @@ -25008,62 +22923,38 @@ exports[`BuildQuote View renders correctly 2`] = ` 50% @@ -25072,62 +22963,38 @@ exports[`BuildQuote View renders correctly 2`] = ` 75% @@ -25136,62 +23003,38 @@ exports[`BuildQuote View renders correctly 2`] = ` MAX @@ -25908,49 +23751,34 @@ exports[`BuildQuote View renders correctly 2`] = ` Done @@ -26666,49 +24494,34 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = ` Return to Home Screen @@ -27329,49 +25142,34 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = ` Return to Home Screen diff --git a/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap index 5ee2a6b0c01a..f5fd96791b42 100644 --- a/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap @@ -1925,49 +1925,34 @@ exports[`Checkout displays sdkError when present 1`] = ` Return to Home Screen @@ -3223,49 +3208,34 @@ exports[`Checkout handles get order error gracefully 1`] = ` Try again @@ -3978,49 +3948,34 @@ exports[`Checkout handles undefined order gracefully 1`] = ` Try again @@ -5276,49 +5231,34 @@ exports[`Checkout sets and displays error on http error in WebView 1`] = ` Try again @@ -6031,49 +5971,34 @@ exports[`Checkout sets and displays error on http error in WebView for callback Try again @@ -6786,49 +6711,34 @@ exports[`Checkout sets error when handling url navigation state change and selec Try again diff --git a/app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx b/app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx index e55933f83585..ccf108aa3bab 100644 --- a/app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx +++ b/app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx @@ -10,7 +10,11 @@ import useThunkDispatch from '../../../../../hooks/useThunkDispatch'; import ScreenLayout from '../../components/ScreenLayout'; import OrderDetail from '../../components/OrderDetails'; import Row from '../../components/Row'; -import StyledButton from '../../../../StyledButton'; +import Button, { + ButtonSize, + ButtonVariants, + ButtonWidthTypes, +} from '../../../../../../component-library/components/Buttons/Button'; import { FiatOrder, getOrderById, @@ -262,27 +266,29 @@ const OrderDetails = () => { !order.sellTxHash && order.state === FIAT_ORDER_STATES.CREATED ? ( - - {strings( + label={strings( 'fiat_on_ramp_aggregator.order_details.continue_order', )} - + variant={ButtonVariants.Primary} + width={ButtonWidthTypes.Full} + /> ) : null} {order.state !== FIAT_ORDER_STATES.CREATED && order.state !== FIAT_ORDER_STATES.PENDING && ( - - {strings( + label={strings( 'fiat_on_ramp_aggregator.order_details.start_new_order', )} - + variant={ButtonVariants.Primary} + width={ButtonWidthTypes.Full} + /> )} diff --git a/app/components/UI/Ramp/Aggregator/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap index 68922e4a7b5f..d18a113513a1 100644 --- a/app/components/UI/Ramp/Aggregator/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap @@ -603,9 +603,8 @@ exports[`OrderDetails renders a cancelled order 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -1429,49 +1428,34 @@ exports[`OrderDetails renders a cancelled order 1`] = ` Start a new order @@ -2116,9 +2100,8 @@ exports[`OrderDetails renders a completed order 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -2942,49 +2925,34 @@ exports[`OrderDetails renders a completed order 1`] = ` Start a new order @@ -3644,9 +3612,8 @@ exports[`OrderDetails renders a created order 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -5087,9 +5054,8 @@ exports[`OrderDetails renders a failed order 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -5913,49 +5879,34 @@ exports[`OrderDetails renders a failed order 1`] = ` Start a new order @@ -6615,9 +6566,8 @@ exports[`OrderDetails renders a pending order 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -8511,49 +8461,34 @@ exports[`OrderDetails renders an error screen if a CREATED order cannot be polle Try again @@ -9228,9 +9163,8 @@ exports[`OrderDetails renders non-transacted orders 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -10066,49 +10000,34 @@ exports[`OrderDetails renders non-transacted orders 1`] = ` Continue this order @@ -10781,9 +10700,8 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -11626,49 +11544,34 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` Start a new order @@ -12328,9 +12231,8 @@ exports[`OrderDetails renders transacted orders that do not have timeDescription style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { @@ -13819,9 +13721,8 @@ exports[`OrderDetails renders transacted orders that have timeDescriptionPending style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, { diff --git a/app/components/UI/Ramp/Aggregator/Views/Quotes/Quotes.styles.ts b/app/components/UI/Ramp/Aggregator/Views/Quotes/Quotes.styles.ts index f139c38edc82..756b7900c592 100644 --- a/app/components/UI/Ramp/Aggregator/Views/Quotes/Quotes.styles.ts +++ b/app/components/UI/Ramp/Aggregator/Views/Quotes/Quotes.styles.ts @@ -6,7 +6,7 @@ const styleSheet = (params: { theme: Theme }) => { const { colors } = theme; return StyleSheet.create({ timerWrapper: { - backgroundColor: colors.background.alternative, + backgroundColor: colors.background.muted, borderRadius: 20, marginBottom: 8, paddingVertical: 4, diff --git a/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap index 362db1b6865a..3a147e17ec3b 100644 --- a/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap @@ -24,9 +24,8 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -67,7 +66,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -113,7 +112,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -168,7 +167,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -214,7 +213,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -265,9 +264,8 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -308,7 +306,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -354,7 +352,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -403,9 +401,8 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -446,7 +443,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -492,7 +489,7 @@ exports[`LoadingQuotes component renders correctly 1`] = ` style={ [ { - "backgroundColor": "#f3f5f9", + "backgroundColor": "#858b9a14", "borderRadius": 30, "padding": 14, }, @@ -1257,7 +1254,7 @@ exports[`Quotes custom action renders correctly after animation with the recomme { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -1402,9 +1399,8 @@ exports[`Quotes custom action renders correctly after animation with the recomme style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -1523,49 +1519,36 @@ exports[`Quotes custom action renders correctly after animation with the recomme Continue with Paypal (Staging) @@ -3588,7 +3571,7 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -3824,9 +3807,8 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -4052,49 +4034,36 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` Continue with Banxa (Staging) @@ -4140,9 +4109,8 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -4397,49 +4365,36 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` Continue with MoonPay (Staging) @@ -4485,9 +4440,8 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -4667,49 +4621,36 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = ` Continue with Transak (Staging) @@ -5477,7 +5418,7 @@ exports[`Quotes renders correctly after animation with the recommended quote 1`] { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -5632,9 +5573,8 @@ exports[`Quotes renders correctly after animation with the recommended quote 1`] style={ [ { - "borderColor": "#b7bbc8", + "backgroundColor": "#3c4d9d0f", "borderRadius": 8, - "borderWidth": 1.5, "padding": 16, }, undefined, @@ -5892,49 +5832,36 @@ exports[`Quotes renders correctly after animation with the recommended quote 1`] Continue with MoonPay (Staging) @@ -6790,49 +6717,34 @@ exports[`Quotes renders correctly after animation without quotes 1`] = ` Try again @@ -7631,49 +7543,34 @@ exports[`Quotes renders correctly when fetching quotes errors 1`] = ` Try again @@ -8472,49 +8369,34 @@ exports[`Quotes renders correctly with sdkError 1`] = ` Return to Home Screen @@ -9313,49 +9195,34 @@ exports[`Quotes renders quotes expired screen 1`] = ` Get new quotes @@ -9385,7 +9252,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9495,7 +9362,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9605,7 +9472,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9715,7 +9582,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9825,7 +9692,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9935,7 +9802,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -9995,7 +9862,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -10055,7 +9922,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, @@ -10115,7 +9982,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "#f3f5f9", + "backgroundColor": "#3c4d9d0f", "borderRadius": 20, "flexDirection": "row", "marginBottom": 8, diff --git a/app/components/UI/Ramp/Aggregator/components/AssetSelectorButton.tsx b/app/components/UI/Ramp/Aggregator/components/AssetSelectorButton.tsx index d6194dd80cee..c247b0c87ad0 100644 --- a/app/components/UI/Ramp/Aggregator/components/AssetSelectorButton.tsx +++ b/app/components/UI/Ramp/Aggregator/components/AssetSelectorButton.tsx @@ -48,7 +48,10 @@ const AssetSelectorButton: React.FC = ({ {loading ? ( - + diff --git a/app/components/UI/Ramp/Aggregator/components/Box.tsx b/app/components/UI/Ramp/Aggregator/components/Box.tsx index 23dec83c1621..bfe2e6188c80 100644 --- a/app/components/UI/Ramp/Aggregator/components/Box.tsx +++ b/app/components/UI/Ramp/Aggregator/components/Box.tsx @@ -14,8 +14,7 @@ const createStyles = (colors: Colors) => StyleSheet.create({ wrapper: { padding: 16, - borderWidth: 1.5, - borderColor: colors.border.default, + backgroundColor: colors.background.muted, borderRadius: 8, }, label: { diff --git a/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.test.tsx b/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.test.tsx index d4b125185c32..d22566092465 100644 --- a/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.test.tsx +++ b/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.test.tsx @@ -84,7 +84,7 @@ describe('CustomAction Component', () => { }); it('shows loading indicator when isLoading is true', () => { - const { getByTestId } = renderWithProvider( + const { toJSON } = renderWithProvider( { { state: defaultState }, ); - expect(getByTestId('buy-button-loading')).toBeTruthy(); + expect(toJSON()).toMatchSnapshot(); }); it('displays previously used provider tag', () => { diff --git a/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.tsx b/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.tsx index 80633d26ffab..e7ca9436a5d1 100644 --- a/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.tsx +++ b/app/components/UI/Ramp/Aggregator/components/CustomAction/CustomAction.tsx @@ -1,10 +1,5 @@ import React from 'react'; -import { - View, - TouchableOpacity, - LayoutChangeEvent, - ActivityIndicator, -} from 'react-native'; +import { View, TouchableOpacity, LayoutChangeEvent } from 'react-native'; import Feather from 'react-native-vector-icons/Feather'; import Animated, { Easing, @@ -17,7 +12,11 @@ import Animated, { import { PaymentCustomAction } from '@consensys/on-ramp-sdk/dist/API'; import Box from '../Box'; import Title from '../../../../../Base/Title'; -import StyledButton from '../../../../StyledButton'; +import Button, { + ButtonSize, + ButtonVariants, + ButtonWidthTypes, +} from '../../../../../../component-library/components/Buttons/Button'; import { strings } from '../../../../../../../locales/i18n'; import RemoteImage from '../../../../../Base/RemoteImage'; import TagColored from '../../../../../../component-library/components-temp/TagColored'; @@ -51,7 +50,7 @@ const CustomAction: React.FC = ({ }: Props) => { const { styles, - theme: { colors, themeAppearance }, + theme: { themeAppearance }, } = useStyles(styleSheet, {}); const { buy: { provider }, @@ -140,23 +139,17 @@ const CustomAction: React.FC = ({ testID="animated-view-height" > - - {isLoading ? ( - - ) : ( - strings('fiat_on_ramp_aggregator.continue_with', { - provider: provider.name, - }) - )} - +