diff --git a/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx b/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx index 9449c08e4e98..fd7776f863ef 100644 --- a/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx +++ b/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx @@ -35,30 +35,24 @@ const TabsList = forwardRef( const tabs: TabItem[] = useMemo( () => - React.Children.map(children, (child, index) => { - if (React.isValidElement(child)) { - const props = child.props as { + React.Children.toArray(children) + .filter((child) => React.isValidElement(child)) + .map((child, index) => { + const props = (child as React.ReactElement).props as { tabLabel?: string; isDisabled?: boolean; }; const tabLabel = props.tabLabel || `Tab ${index + 1}`; const isDisabled = props.isDisabled || false; return { - key: child.key?.toString() || `tab-${index}`, + key: + (child as React.ReactElement).key?.toString() || `tab-${index}`, label: tabLabel, content: child, isDisabled, isLoaded: false, }; - } - return { - key: `tab-${index}`, - label: `Tab ${index + 1}`, - content: child, - isDisabled: false, - isLoaded: false, - }; - }) || [], + }), [children], ); diff --git a/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap b/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap index 5e5cfa951c54..fd4d1bfc69d2 100644 --- a/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap +++ b/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap @@ -146,109 +146,6 @@ exports[`TabsList Edge Cases handles non-React element children with default val - - - - Tab 2 - - - Tab 2 - - - 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/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts index fef64635db21..61758f7ccaa1 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts @@ -8,47 +8,21 @@ export const styleSheet = (params: { theme: Theme }) => { container: { flex: 1, }, - filterTabText: { - color: colors.text.alternative, - }, filterContainer: { + paddingVertical: 8, paddingHorizontal: 16, - paddingVertical: 12, backgroundColor: colors.background.default, }, - filterScrollView: { - flexGrow: 0, - }, - filterTabContainer: { - gap: 8, - }, - filterTabActive: { - backgroundColor: colors.background.defaultPressed, - }, - transactionList: { - flex: 1, - minHeight: 1, // Prevents FlashList layout issues - }, tabDescription: { paddingHorizontal: 16, paddingTop: 8, }, - sectionHeader: { - paddingTop: 12, - paddingHorizontal: 16, - backgroundColor: colors.background.default, - }, - sectionHeaderText: { - fontSize: 16, - fontWeight: '600' as const, - color: colors.text.alternative, - }, transactionItem: { flexDirection: 'row' as const, alignItems: 'center' as const, paddingVertical: 16, paddingHorizontal: 16, - minHeight: 72, // Consistent height for FlashList + minHeight: 72, }, tokenIconContainer: { width: 36, @@ -104,12 +78,11 @@ export const styleSheet = (params: { theme: Theme }) => { flex: 1, justifyContent: 'center' as const, alignItems: 'center' as const, - paddingVertical: 48, + paddingVertical: 40, }, - fillTag: { - flexDirection: 'row' as const, - alignItems: 'center' as const, - gap: 10, + sectionHeader: { + paddingVertical: 12, + paddingHorizontal: 16, }, }; }; diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx index d8358a601daa..99e7e7c0017e 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx @@ -10,10 +10,15 @@ import React, { import { RefreshControl, ScrollView, View } from 'react-native'; import { useSelector } from 'react-redux'; import { strings } from '../../../../../../locales/i18n'; -import Text, { +import { + Text, TextVariant, -} from '../../../../../component-library/components/Texts/Text'; + TextColor, + ButtonSize, +} from '@metamask/design-system-react-native'; import { useStyles } from '../../../../../component-library/hooks'; +import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState'; +import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter'; import Routes from '../../../../../constants/navigation/Routes'; import { PerpsNavigationParamList } from '../../types/navigation'; import { selectSelectedInternalAccountFormattedAddress } from '../../../../../selectors/accountsController'; @@ -36,12 +41,11 @@ import { formatDateSection } from '../../utils/formatUtils'; import { styleSheet } from './PerpsTransactionsView.styles'; import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement'; import { TraceName } from '../../../../../util/trace'; -import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter'; -import { ButtonSize } from '@metamask/design-system-react-native'; -import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState'; +import { useTailwind } from '@metamask/design-system-twrnc-preset'; const PerpsTransactionsView: React.FC = () => { const { styles } = useStyles(styleSheet, {}); + const tw = useTailwind(); const navigation = useNavigation>(); // Transaction data is now computed from hooks instead of stored in state @@ -266,7 +270,7 @@ const PerpsTransactionsView: React.FC = () => { if (item.fill) { return ( {item.fill.amount} @@ -285,7 +289,7 @@ const PerpsTransactionsView: React.FC = () => { } return ( - + {item.order.text} ); @@ -294,7 +298,7 @@ const PerpsTransactionsView: React.FC = () => { if (item.fundingAmount) { return ( = () => { if (item.type === 'header') { return ( - {item.title} + {item.title} ); } @@ -382,7 +386,7 @@ const PerpsTransactionsView: React.FC = () => { @@ -392,7 +396,7 @@ const PerpsTransactionsView: React.FC = () => { {filterTabDescription && ( - {filterTabDescription} + {filterTabDescription} )} @@ -406,7 +410,7 @@ const PerpsTransactionsView: React.FC = () => { = () => { {filterTabDescription && ( - {filterTabDescription} + {filterTabDescription} )} 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/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 = [ 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, - }) - )} - +