diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js index 33cb1ce69a5..0be1983ae41 100644 --- a/app/components/Nav/Main/MainNavigator.js +++ b/app/components/Nav/Main/MainNavigator.js @@ -446,6 +446,11 @@ const FiatOnRampAggregator = () => ( component={Region} options={{ animationEnabled: false }} /> + ); diff --git a/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx b/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx index d19c6e6bebc..6a09caf0880 100644 --- a/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx +++ b/app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx @@ -11,7 +11,7 @@ import Animated, { useSharedValue, withTiming, } from 'react-native-reanimated'; -import { useNavigation } from '@react-navigation/native'; +import { useNavigation, useRoute } from '@react-navigation/native'; import { useFiatOnRampSDK, useSDKMethod } from '../sdk'; import useModalHandler from '../../../Base/hooks/useModalHandler'; @@ -49,6 +49,7 @@ import { Colors } from '../../../../util/theme/models'; import { CryptoCurrency } from '@consensys/on-ramp-sdk'; import Routes from '../../../../constants/navigation/Routes'; import useAnalytics from '../hooks/useAnalytics'; +import { Region } from '../types'; // TODO: Convert into typescript and correctly type const Text = BaseText as any; @@ -93,6 +94,7 @@ const createStyles = (colors: Colors) => const AmountToBuy = () => { const navigation = useNavigation(); + const { params } = useRoute(); const { colors } = useTheme(); const styles = createStyles(colors); const trackEvent = useAnalytics(); @@ -217,6 +219,38 @@ const AmountToBuy = () => { * * Defaults and validation of selected values */ + useEffect(() => { + if ( + selectedRegion && + !isFetchingCountries && + !errorCountries && + countries + ) { + const allRegions: Region[] = countries.reduce( + (acc: Region[], region: Region) => [ + ...acc, + region, + ...((region.states as Region[]) || []), + ], + [], + ); + const selectedRegionFromAPI = + allRegions.find((region) => region.id === selectedRegion.id) ?? null; + + if (!selectedRegionFromAPI || selectedRegionFromAPI.unsupported) { + navigation.reset({ + routes: [{ name: Routes.FIAT_ON_RAMP_AGGREGATOR.REGION }], + }); + } + } + }, [ + countries, + errorCountries, + isFetchingCountries, + navigation, + selectedRegion, + ]); + const filteredPaymentMethods = useMemo(() => { if (paymentMethods) { return paymentMethods.filter((paymentMethod) => @@ -400,12 +434,17 @@ const AmountToBuy = () => { navigation.setOptions( getFiatOnRampAggNavbar( navigation, - { title: strings('fiat_on_ramp_aggregator.amount_to_buy') }, + { + title: strings('fiat_on_ramp_aggregator.amount_to_buy'), + // @ts-expect-error navigation params error + showBack: params?.showBack, + }, colors, handleCancelPress, ), ); - }, [navigation, colors, handleCancelPress]); + // @ts-expect-error navigation params error + }, [navigation, colors, handleCancelPress, params?.showBack]); /** * * Keypad style, handlers and effects diff --git a/app/components/UI/FiatOnRampAggregator/Views/GetStarted.tsx b/app/components/UI/FiatOnRampAggregator/Views/GetStarted.tsx index e9b0571a6c2..9fb290a433d 100644 --- a/app/components/UI/FiatOnRampAggregator/Views/GetStarted.tsx +++ b/app/components/UI/FiatOnRampAggregator/Views/GetStarted.tsx @@ -54,8 +54,13 @@ const styles = StyleSheet.create({ const GetStarted: React.FC = () => { const navigation = useNavigation(); - const { getStarted, setGetStarted, sdkError, selectedChainId } = - useFiatOnRampSDK(); + const { + getStarted, + setGetStarted, + sdkError, + selectedChainId, + selectedRegion, + } = useFiatOnRampSDK(); const trackEvent = useAnalytics(); const { colors } = useTheme(); @@ -88,12 +93,24 @@ const GetStarted: React.FC = () => { useEffect(() => { if (getStarted) { - navigation.reset({ - index: 0, - routes: [{ name: Routes.FIAT_ON_RAMP_AGGREGATOR.REGION_HAS_STARTED }], - }); + if (selectedRegion) { + navigation.reset({ + index: 0, + routes: [ + { + name: Routes.FIAT_ON_RAMP_AGGREGATOR.AMOUNT_TO_BUY_HAS_STARTED, + params: { showBack: false }, + }, + ], + }); + } else { + navigation.reset({ + index: 0, + routes: [{ name: Routes.FIAT_ON_RAMP_AGGREGATOR.REGION_HAS_STARTED }], + }); + } } - }, [getStarted, navigation]); + }, [getStarted, navigation, selectedRegion]); if (sdkError) { return ( diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts index c376d7ffc77..b56e9161aee 100644 --- a/app/constants/navigation/Routes.ts +++ b/app/constants/navigation/Routes.ts @@ -7,6 +7,7 @@ const Routes = { GET_STARTED: 'GetStarted', PAYMENT_METHOD: 'PaymentMethod', AMOUNT_TO_BUY: 'AmountToBuy', + AMOUNT_TO_BUY_HAS_STARTED: 'AmountToBuyHasStarted', GET_QUOTES: 'GetQuotes', CHECKOUT: 'Checkout', REGION: 'Region',