From 672475e8c76e70f180f99b21adc8d69dfa4c01b2 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 28 Feb 2024 14:36:25 -0300 Subject: [PATCH] feat(ramp): add bottom sheet quotes (#8627) Co-authored-by: Cal Leung --- .../__snapshots__/BuildQuote.test.tsx.snap | 16 +- .../__snapshots__/GetStarted.test.tsx.snap | 2 +- .../NetworkSwitcher.test.tsx.snap | 6 +- .../__snapshots__/OrderDetails.test.tsx.snap | 2 +- .../PaymentMethods.test.tsx.snap | 8 +- .../UI/Ramp/Views/Quotes/LoadingQuotes.tsx | 18 +- .../UI/Ramp/Views/Quotes/Quotes.styles.ts | 1 + .../UI/Ramp/Views/Quotes/Quotes.test.tsx | 23 + .../UI/Ramp/Views/Quotes/Quotes.tsx | 429 +- .../Quotes/__snapshots__/Quotes.test.tsx.snap | 4233 +++++++++++++---- .../__snapshots__/Regions.test.tsx.snap | 4 +- .../UI/Ramp/components/ErrorView.tsx | 17 +- .../components/ErrorViewWithReporting.tsx | 3 + .../components/LoadingAnimation/index.tsx | 29 +- app/components/UI/Ramp/routes/index.tsx | 14 +- locales/languages/en.json | 3 + 16 files changed, 3859 insertions(+), 949 deletions(-) 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 }} /> - +