diff --git a/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap b/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap
index fd694600bd4..1ec16efb9e5 100644
--- a/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap
@@ -472,7 +472,7 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
+ {Array.from({ length: count }, (_, index) => (
+
+
+
+ ))}
+ >
+ );
+ }
+
return (
<>
diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.styles.ts b/app/components/UI/Ramp/Views/Quotes/Quotes.styles.ts
index 40315434da9..67ac2356264 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.styles.ts
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.styles.ts
@@ -13,6 +13,7 @@ const styleSheet = (params: { theme: Theme }) => {
paddingHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
+ alignSelf: 'center',
},
timer: {
fontVariant: ['tabular-nums'],
diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
index 477bf42fe88..4d82d4c8d25 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
@@ -176,6 +176,7 @@ describe('Quotes', () => {
jest.useRealTimers();
});
});
+
it('navigates and tracks event on SELL cancel button press', async () => {
mockUseRampSDKValues.rampType = RampType.SELL;
mockUseRampSDKValues.isSell = true;
@@ -234,6 +235,28 @@ describe('Quotes', () => {
});
});
+ it('renders correctly after animation with quotes and expanded', async () => {
+ mockUseQuotesValues = {
+ ...mockUseQuotesInitialValues,
+ data: [
+ ...mockQuotesData.slice(0, 2),
+ { ...mockQuotesData[2], error: false },
+ ] as (QuoteResponse | QuoteError)[],
+ };
+ render(Quotes);
+ fireEvent.press(
+ screen.getByRole('button', { name: 'Explore more options' }),
+ );
+ act(() => {
+ jest.advanceTimersByTime(3000);
+ jest.clearAllTimers();
+ });
+ expect(screen.toJSON()).toMatchSnapshot();
+ act(() => {
+ jest.useRealTimers();
+ });
+ });
+
const simulateQuoteSelection = async (
browser: ProviderBuyFeatureBrowserEnum,
) => {
diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
index 6cbf49eb632..90453d7e008 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
@@ -1,5 +1,20 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+ Fragment,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import { useNavigation } from '@react-navigation/native';
+import Animated, {
+ Extrapolate,
+ interpolate,
+ useAnimatedScrollHandler,
+ useAnimatedStyle,
+ useSharedValue,
+} from 'react-native-reanimated';
+import { ScrollView } from 'react-native-gesture-handler';
import {
CryptoCurrency,
FiatCurrency,
@@ -12,7 +27,8 @@ import { Provider } from '@consensys/on-ramp-sdk/dist/API';
import styleSheet from './Quotes.styles';
import LoadingQuotes from './LoadingQuotes';
-import Text from '../../../../Base/Text';
+import Timer from './Timer';
+import TextLegacy from '../../../../Base/Text';
import ScreenLayout from '../../components/ScreenLayout';
import ErrorViewWithReporting from '../../components/ErrorViewWithReporting';
import ErrorView from '../../components/ErrorView';
@@ -21,6 +37,21 @@ import Quote from '../../components/Quote';
import InfoAlert from '../../components/InfoAlert';
import { getFiatOnRampAggNavbar } from '../../../Navbar';
+import Text, {
+ TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import {
+ ButtonSize,
+ ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button';
+import BottomSheet, {
+ BottomSheetRef,
+} from '../../../../../component-library/components/BottomSheets/BottomSheet';
+import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import BottomSheetFooter, {
+ ButtonsAlignment,
+} from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
+
import useAnalytics from '../../hooks/useAnalytics';
import useQuotes from '../../hooks/useQuotes';
import { useRampSDK } from '../../sdk';
@@ -33,20 +64,13 @@ import Routes from '../../../../../constants/navigation/Routes';
import { strings } from '../../../../../../locales/i18n';
import LoadingAnimation from '../../components/LoadingAnimation';
import useInterval from '../../../../hooks/useInterval';
-import Animated, {
- Extrapolate,
- interpolate,
- useAnimatedScrollHandler,
- useAnimatedStyle,
- useSharedValue,
-} from 'react-native-reanimated';
import useInAppBrowser from '../../hooks/useInAppBrowser';
import { createCheckoutNavDetails } from '../Checkout';
import { PROVIDER_LINKS, ScreenLocation } from '../../types';
import Logger from '../../../../../util/Logger';
-import Timer from './Timer';
import { isBuyQuote, isBuyQuotes, isSellQuotes } from '../../utils';
+const HIGHLIGHTED_QUOTES_COUNT = 2;
export interface QuotesParams {
amount: number | string;
asset: CryptoCurrency;
@@ -72,6 +96,9 @@ function Quotes() {
} = useRampSDK();
const renderInAppBrowser = useInAppBrowser();
+ const [isExpanded, setIsExpanded] = useState(false);
+ const bottomSheetRef = useRef(null);
+
const [isLoading, setIsLoading] = useState(true);
const [shouldFinishAnimation, setShouldFinishAnimation] = useState(false);
@@ -111,19 +138,31 @@ function Quotes() {
query: fetchQuotes,
} = useQuotes(params.amount);
- const filteredQuotes = useMemo(() => {
+ const [filteredQuotes, highlightedQuotes] = useMemo(() => {
if (quotes) {
if (isBuyQuotes(quotes, rampType)) {
- return quotes.filter((quote): quote is QuoteResponse => !quote.error);
+ const allQuotes = quotes.filter(
+ (quote): quote is QuoteResponse => !quote.error,
+ );
+ return [
+ allQuotes,
+ allQuotes.slice(0, HIGHLIGHTED_QUOTES_COUNT),
+ ] as const;
} else if (isSellQuotes(quotes, rampType)) {
- return quotes.filter(
+ const allQuotes = quotes.filter(
(quote): quote is SellQuoteResponse => !quote.error,
);
+ return [
+ allQuotes,
+ allQuotes.slice(0, HIGHLIGHTED_QUOTES_COUNT),
+ ] as const;
}
}
- return [];
+ return [[], []] as const;
}, [quotes, rampType]);
+ const expandedCount = filteredQuotes.length - highlightedQuotes.length;
+
const handleCancelPress = useCallback(() => {
if (isBuy) {
trackEvent('ONRAMP_CANCELED', {
@@ -140,6 +179,18 @@ function Quotes() {
}
}, [filteredQuotes.length, isBuy, selectedChainId, trackEvent]);
+ const handleClosePress = useCallback(
+ (bottomSheetDialogRef) => {
+ handleCancelPress();
+ if (bottomSheetDialogRef?.current) {
+ bottomSheetDialogRef.current.onCloseBottomSheet();
+ } else {
+ navigation.goBack();
+ }
+ },
+ [handleCancelPress, navigation],
+ );
+
const handleFetchQuotes = useCallback(() => {
setIsLoading(true);
setIsInPolling(true);
@@ -498,71 +549,155 @@ function Quotes() {
}, [filteredQuotes]);
if (sdkError) {
+ if (!isExpanded) {
+ return (
+
+
+
+ );
+ }
+
return (
-
-
-
-
-
+
+ handleClosePress(bottomSheetRef)} />
+
+
);
}
if (ErrorFetchingQuotes) {
+ if (!isExpanded) {
+ return (
+
+
+
+ );
+ }
+
return (
-
+
+ handleClosePress(bottomSheetRef)} />
+
+
);
}
if (pollingCyclesLeft < 0) {
+ if (!isExpanded) {
+ return (
+
+
+
+ );
+ }
return (
-
+
+ handleClosePress(bottomSheetRef)} />
+
+
);
}
- if (isLoading) {
- return (
-
-
+ if (isLoading && !firstFetchCompleted) {
+ if (!isExpanded) {
+ return (
+
setIsLoading(false)}
+ asScreen={false}
/>
-
-
+
+ );
+ }
+
+ return (
+
+ handleClosePress(bottomSheetRef)} />
+ setIsLoading(false)}
+ />
+
);
}
// No providers available
if (!isFetchingQuotes && filteredQuotes.length === 0) {
+ if (!isExpanded) {
+ return (
+
+ navigation.goBack()}
+ location={'Quotes Screen'}
+ asScreen={false}
+ />
+
+ );
+ }
+
return (
- navigation.goBack()}
- location={'Quotes Screen'}
- />
+
+ handleClosePress(bottomSheetRef)} />
+
+ navigation.goBack()}
+ location={'Quotes Screen'}
+ />
+
+
);
}
- return (
-
-
+ if (!isExpanded) {
+ return (
+
+ handleClosePress(bottomSheetRef)}>
+ {strings('fiat_on_ramp_aggregator.select_a_quote')}
+
+
{isInPolling && (
)}
-
-
- {strings('fiat_on_ramp_aggregator.compare_rates')}
-
-
-
- setShowProviderInfo(false)}
- providerName={selectedProviderInfo?.name}
- logos={selectedProviderInfo?.logos}
- subtitle={selectedProviderInfo?.hqAddress}
- body={selectedProviderInfo?.description}
- providerWebsite={
- selectedProviderInfo?.links?.find(
- (link) => link.name === PROVIDER_LINKS.HOMEPAGE,
- )?.url
- }
- providerPrivacyPolicy={
- selectedProviderInfo?.links?.find(
- (link) => link.name === PROVIDER_LINKS.PRIVACY_POLICY,
- )?.url
- }
- providerTermsOfService={
- selectedProviderInfo?.links?.find(
- (link) => link.name === PROVIDER_LINKS.TOS,
- )?.url
- }
- providerSupport={
- selectedProviderInfo?.links?.find(
- (link) => link.name === PROVIDER_LINKS.SUPPORT,
- )?.url
- }
- />
-
-
-
-
+
+
{isFetchingQuotes && isInPolling ? (
-
+
) : (
- filteredQuotes.map((quote, index) => (
+ highlightedQuotes.map((quote, index) => (
))
)}
+
+
+ 0
+ ? [
+ {
+ accessible: true,
+ accessibilityRole: 'button',
+ variant: ButtonVariants.Link,
+ size: ButtonSize.Md,
+ label: strings(
+ 'fiat_on_ramp_aggregator.explore_more_options',
+ ),
+ onPress: () => setIsExpanded(true),
+ },
+ ]
+ : []
+ }
+ />
+
+ setShowProviderInfo(false)}
+ providerName={selectedProviderInfo?.name}
+ logos={selectedProviderInfo?.logos}
+ subtitle={selectedProviderInfo?.hqAddress}
+ body={selectedProviderInfo?.description}
+ providerWebsite={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.HOMEPAGE,
+ )?.url
+ }
+ providerPrivacyPolicy={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.PRIVACY_POLICY,
+ )?.url
+ }
+ providerTermsOfService={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.TOS,
+ )?.url
+ }
+ providerSupport={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.SUPPORT,
+ )?.url
+ }
+ />
+
+ );
+ }
+
+ return (
+
+ handleClosePress(bottomSheetRef)}>
+ {strings('fiat_on_ramp_aggregator.select_a_quote')}
+
+
+
+ {isInPolling && (
+
+ )}
+
+
+
+ {strings('fiat_on_ramp_aggregator.compare_rates')}
+
-
-
-
+
+ setShowProviderInfo(false)}
+ providerName={selectedProviderInfo?.name}
+ logos={selectedProviderInfo?.logos}
+ subtitle={selectedProviderInfo?.hqAddress}
+ body={selectedProviderInfo?.description}
+ providerWebsite={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.HOMEPAGE,
+ )?.url
+ }
+ providerPrivacyPolicy={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.PRIVACY_POLICY,
+ )?.url
+ }
+ providerSupport={
+ selectedProviderInfo?.links?.find(
+ (link) => link.name === PROVIDER_LINKS.SUPPORT,
+ )?.url
+ }
+ />
+
+
+
+
+ {isFetchingQuotes && isInPolling ? (
+
+ ) : (
+ filteredQuotes.map((quote, index) => (
+
+ {index === HIGHLIGHTED_QUOTES_COUNT &&
+ expandedCount > 0 && (
+
+
+ {expandedCount === 1
+ ? strings(
+ 'fiat_on_ramp_aggregator.one_more_option',
+ )
+ : strings(
+ 'fiat_on_ramp_aggregator.more_options',
+ {
+ count: expandedCount,
+ },
+ )}
+
+
+ )}
+
+ handleOnQuotePress(quote)}
+ onPressCTA={() => handleOnPressCTA(quote, index)}
+ highlighted={quote.provider.id === providerId}
+ showInfo={() => handleInfoPress(quote)}
+ rampType={rampType}
+ />
+
+
+ ))
+ )}
+
+
+
+
+
);
}
diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
index 73f38913267..e6a977ed48a 100644
--- a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
@@ -1032,31 +1032,97 @@ exports[`Quotes renders animation on first fetching 1`] = `
}
}
>
-
+
+
+
@@ -1064,7 +1130,27 @@ exports[`Quotes renders animation on first fetching 1`] = `
style={
Object {
"alignItems": "center",
- "flex": 1,
+ "alignSelf": "stretch",
+ "padding": 4,
+ }
+ }
+ >
+
+
+
-
-
-
+
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ Array [
+ Object {
+ "backgroundColor": "#FFFFFF",
+ "flex": 1,
+ },
+ undefined,
+ ],
+ ]
+ }
+ useSharedProcessPool={true}
+ />
+
-
+
@@ -1683,32 +1769,97 @@ exports[`Quotes renders correctly after animation with quotes 1`] = `
}
}
>
-
+
+
+
@@ -1716,6 +1867,120 @@ exports[`Quotes renders correctly after animation with quotes 1`] = `
style={
Object {
"alignItems": "center",
+ "alignSelf": "stretch",
+ "padding": 4,
+ }
+ }
+ >
+
+
+
+
+
+
+
+
+ Select a Quote
+
+
+
+
+
+
+
+
+
+
+
-
- Compare rates from these providers. Quotes are sorted by overall price.
-
-
-
-
-
-
-
-
-
+
-
-
+
+
+
+
-
+
@@ -2650,7 +2843,7 @@ exports[`Quotes renders correctly after animation with quotes 1`] = `
`;
-exports[`Quotes renders correctly after animation without quotes 1`] = `
+exports[`Quotes renders correctly after animation with quotes and expanded 1`] = `
-
-
-
-
-
+ />
+
+
-
- No providers available
-
-
-
-
+
+
+
+
+
+ Select a Quote
+
+
+
- Try choosing a different payment method or try to increase or reduce the amount you want to buy!
-
-
-
-
+
+
+
+
+
+
+
+
-
+
- Try again
-
-
-
-
-
-
-
-
-
-
-
-
-
+ ]
+ }
+ >
+
+
+ New quotes in
+
+
+ 0:07
+
+
+
+
+
+ Compare rates from these providers. Quotes are sorted by overall price.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0.01714
+
+ ETH
+
+
+
+
+ ≈
+ $
+
+ 46.97 AUD
+
+
+
+
+
+
+
+
+ Continue with Banxa (Staging)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0.0162
+
+ ETH
+
+
+
+
+ ≈
+ $
+
+ 44.39 AUD
+
+
+
+
+
+
+
+
+ Continue with MoonPay (Staging)
+
+
+
+
+
+
+
+
+
+
+ 1 more option
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0.01591
+
+ ETH
+
+
+
+
+ ≈
+ $
+
+ 43.59 AUD
+
+
+
+
+
+
+
+
+ Continue with Transak (Staging)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Quotes renders correctly after animation without quotes 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Back
+
+
+
+
+
+
+ Select a Quote
+
+
+
+
+ Ethereum Main Network
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No providers available
+
+
+
+
+ Try choosing a different payment method or try to increase or reduce the amount you want to buy!
+
+
+
+
+
+ Try again
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
@@ -3754,231 +6022,348 @@ exports[`Quotes renders correctly when fetching quotes errors 1`] = `
}
>
-
-
-
-
-
-
-
-
- Error
-
-
-
+
+
-
- Test Error
-
-
+ />
+
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+ Error
+
+
+
+
+ Test Error
+
+
+
- Try again
-
-
+ "marginTop": 30,
+ }
+ }
+ >
+
+
+ Try again
+
+
+
+
+
@@ -4425,40 +6810,126 @@ exports[`Quotes renders correctly with sdkError 1`] = `
}
}
>
-
+
+
+
+
+
+
-
+
@@ -5129,231 +7600,348 @@ exports[`Quotes renders quotes expired screen 1`] = `
}
>
-
-
-
-
-
-
+
+
-
- Quotes timeout
-
-
-
-
- Please request new quotes to get the latest best rate.
-
-
+ "paddingBottom": 0,
+ },
+ ]
+ }
+ >
-
+
-
+
+
+
- Get new quotes
-
-
+
+
+
+
+
+
+
+ Quotes timeout
+
+
+
+
+ Please request new quotes to get the latest best rate.
+
+
+
+
+
+ Get new quotes
+
+
+
+
+
@@ -5374,6 +7962,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5486,6 +8075,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5598,6 +8188,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5710,6 +8301,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5822,6 +8414,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=false, pollingC
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5934,6 +8527,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -5994,6 +8588,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -6054,6 +8649,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
@@ -6114,6 +8710,7 @@ exports[`Timer component renders correctly with isFetchingQuotes=true, pollingCy
style={
Object {
"alignItems": "center",
+ "alignSelf": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 20,
"flexDirection": "row",
diff --git a/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap b/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap
index 8dad06619da..8e4129cdadd 100644
--- a/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap
@@ -1879,7 +1879,7 @@ exports[`Regions View renders correctly with error 1`] = `
+const createStyles = (
+ colors: Colors,
+ options?: {
+ asScreen: boolean;
+ },
+) =>
StyleSheet.create({
screen: {
- flex: 1,
+ flex: options?.asScreen ? 1 : undefined,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.background.default,
@@ -24,7 +29,7 @@ const createStyles = (colors: Colors) =>
content: {
width: '100%',
paddingHorizontal: 60,
- marginTop: -100,
+ marginVertical: 60,
},
ctaContainer: {
marginTop: 30,
@@ -51,6 +56,7 @@ interface Props {
ctaLabel?: string; // The CTA button label, default will be "Try again" (Optional)
ctaOnPress?: () => any; // The optional callback to be invoked when pressing the CTA button (Optional)
icon?: IconType;
+ asScreen?: boolean; // Whether this component should be rendered as a screen or not (Optional)
location: ScreenLocation;
}
@@ -86,10 +92,13 @@ function ErrorView({
ctaLabel,
ctaOnPress,
location,
+ asScreen = true,
icon = 'error',
}: Props) {
const { colors } = useTheme();
- const styles = createStyles(colors);
+ const styles = createStyles(colors, {
+ asScreen,
+ });
const trackEvent = useAnalytics();
const {
selectedPaymentMethodId,
diff --git a/app/components/UI/Ramp/components/ErrorViewWithReporting.tsx b/app/components/UI/Ramp/components/ErrorViewWithReporting.tsx
index 94c99d30f87..e293cea2719 100644
--- a/app/components/UI/Ramp/components/ErrorViewWithReporting.tsx
+++ b/app/components/UI/Ramp/components/ErrorViewWithReporting.tsx
@@ -12,9 +12,11 @@ import { ScreenLocation } from '../types';
function ErrorViewWithReporting({
error,
location,
+ asScreen,
}: {
error: Error;
location: ScreenLocation;
+ asScreen?: boolean;
}) {
const navigation = useNavigation();
@@ -32,6 +34,7 @@ function ErrorViewWithReporting({
navigation.dangerouslyGetParent()?.pop();
}}
location={location}
+ asScreen={asScreen}
/>
);
}
diff --git a/app/components/UI/Ramp/components/LoadingAnimation/index.tsx b/app/components/UI/Ramp/components/LoadingAnimation/index.tsx
index 1fa843a263d..73d93f4cbd7 100644
--- a/app/components/UI/Ramp/components/LoadingAnimation/index.tsx
+++ b/app/components/UI/Ramp/components/LoadingAnimation/index.tsx
@@ -28,17 +28,22 @@ const IS_NARROW = Device.getDeviceWidth() <= 320;
const STAGE_SIZE = IS_NARROW ? 240 : 260;
const FINALIZING_PERCENTAGE = 80;
-const createStyles = (colors: Colors) =>
+const createStyles = (
+ colors: Colors,
+ options?: {
+ asScreen: boolean;
+ },
+) =>
StyleSheet.create({
screen: {
- flex: 1,
+ flex: options?.asScreen ? 1 : undefined,
justifyContent: 'center',
alignItems: 'center',
},
content: {
width: '100%',
paddingHorizontal: 60,
- marginVertical: 15,
+ marginVertical: 60,
},
progressWrapper: {
backgroundColor: colors.primary.muted,
@@ -89,15 +94,17 @@ interface Props {
title: string;
finish: boolean;
onAnimationEnd?: () => any;
+ asScreen?: boolean;
}
function LoadingAnimation({
title,
finish,
onAnimationEnd,
+ asScreen = true,
}: Props): React.ReactElement {
const { colors } = useTheme();
- const styles = createStyles(colors);
+ const styles = createStyles(colors, { asScreen });
const [hasStartedFinishing, setHasStartedFinishing] = useState(false);
const [hasStarted, setHasStarted] = useState(false);
@@ -161,13 +168,13 @@ function LoadingAnimation({
-
-
-
+
+
+
);
diff --git a/app/components/UI/Ramp/routes/index.tsx b/app/components/UI/Ramp/routes/index.tsx
index 911a0d44164..9e936939d7c 100644
--- a/app/components/UI/Ramp/routes/index.tsx
+++ b/app/components/UI/Ramp/routes/index.tsx
@@ -10,7 +10,7 @@ import BuildQuote from '../Views/BuildQuote';
import { RampType } from '../types';
import { RampSDKProvider } from '../sdk';
import Routes from '../../../../constants/navigation/Routes';
-
+import { colors } from './../../../../styles/common';
const Stack = createStackNavigator();
const RampRoutes = ({ rampType }: { rampType: RampType }) => (
@@ -37,7 +37,17 @@ const RampRoutes = ({ rampType }: { rampType: RampType }) => (
component={BuildQuote}
options={{ animationEnabled: false }}
/>
-
+