[5.3] Skip to amount to buy when region is selected (#4442)

Co-authored-by: Gustavo Antunes <gantunes@uc.cl> Co-authored-by: Curtis David <Curtis.David7@gmail.com> Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com> Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com> Co-authored-by: Cal Leung <cleun007@gmail.com> Co-authored-by: André Fatia <andre@thecodeventure.com> Co-authored-by: ricky <ricky.miller@gmail.com> Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com> Co-authored-by: Andrea Salvatore <andrea.salvatore@consensys.net> Co-authored-by: Alaa Hadad <alaahd@gmail.com> Co-authored-by: Vik Chawla <vik.chawla2@gmail.com>
MetaMask · Jun 14, 2022 · a2b965c · a2b965c
1 parent 48467a3
commit a2b965c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 10 deletions.
diff --git 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 }}
       />
+      <Stack.Screen
+        name={Routes.FIAT_ON_RAMP_AGGREGATOR.AMOUNT_TO_BUY_HAS_STARTED}
+        component={AmountToBuy}
+        options={{ animationEnabled: false }}
+      />
     </Stack.Navigator>
   </FiatOnRampSDKProvider>
 );

diff --git 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
@@ -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
@@ -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',