Error handling when no crypto currencies available on selected region

app/components/UI/FiatOnRampAggregator/Views/AmountToBuy.tsx

@@ -97,7 +97,7 @@ const AmountToBuy = () => {
   const [amountFocused, setAmountFocused] = useState(false);
   const [amount, setAmount] = useState('0');
   const [amountNumber, setAmountNumber] = useState(0);
-  const [tokens, setTokens] = useState<CryptoCurrency[]>([]);
+  const [tokens, setTokens] = useState<CryptoCurrency[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const keyboardHeight = useRef(1000);
   const keypadOffset = useSharedValue(1000);
@@ -353,7 +353,7 @@ const AmountToBuy = () => {
   }));
 
   useEffect(() => {
-    keypadOffset.value = amountFocused ? 40 : keyboardHeight.current + 40;
+    keypadOffset.value = amountFocused ? 40 : keyboardHeight.current + 80;
   }, [amountFocused, keyboardHeight, keypadOffset]);
 
   /**
@@ -650,7 +650,7 @@ const AmountToBuy = () => {
     );
   }
 
-  if (!isFetching && (!tokens || tokens.length === 0)) {
+  if (!isFetching && tokens && tokens.length === 0) {
     return (
       <ScreenLayout>
         <ScreenLayout.Body>
@@ -659,11 +659,21 @@ const AmountToBuy = () => {
               'fiat_on_ramp_aggregator.no_tokens_available',
               {
                 network: NETWORKS_NAMES[selectedChainId],
+                region: selectedRegion?.name,
               },
             )}
-            ctaOnPress={() => navigation.goBack()}
+            ctaLabel={strings('fiat_on_ramp_aggregator.try_different_region')}
+            ctaOnPress={toggleRegionModal as () => void}
           />
         </ScreenLayout.Body>
+        <RegionModal
+          isVisible={isRegionModalVisible}
+          title={strings('fiat_on_ramp_aggregator.region.title')}
+          description={strings('fiat_on_ramp_aggregator.region.description')}
+          data={countries}
+          dismiss={hideRegionModal as () => void}
+          onRegionPress={handleRegionPress}
+        />
       </ScreenLayout>
     );
   }
@@ -784,7 +794,7 @@ const AmountToBuy = () => {
           'fiat_on_ramp_aggregator.select_a_cryptocurrency_description',
           { network: NETWORKS_NAMES[selectedChainId] },
         )}
-        tokens={tokens}
+        tokens={tokens ?? []}
         onItemPress={handleAssetPress}
       />
       <FiatSelectModal

app/components/UI/FiatOnRampAggregator/Views/Checkout.tsx

@@ -160,7 +160,10 @@ const CheckoutWebView = () => {
           source={{ uri }}
           onHttpError={(syntheticEvent) => {
             const { nativeEvent } = syntheticEvent;
-            if (nativeEvent.url === uri) {
+            if (
+              nativeEvent.url === uri ||
+              nativeEvent.url.startsWith(callbackBaseUrl)
+            ) {
               const webviewHttpError = strings(
                 'fiat_on_ramp_aggregator.webview_received_error',
                 { code: nativeEvent.statusCode },

app/components/UI/FiatOnRampAggregator/components/ErrorViewWithReporting.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ErrorView from './ErrorView';
 import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../locales/i18n';
-
 /**
  * ErrorViewWithReporting is a functional general-purpose UI component responsible to show error details in Fiat On-Ramp
  *
@@ -11,16 +10,18 @@ import { strings } from '../../../../../locales/i18n';
  */
 function ErrorViewWithReporting({ error }: { error: Error }) {
   const navigation = useNavigation();
+
   return (
     <ErrorView
       description={
         error?.message ||
         strings('fiat_on_ramp_aggregator.something_went_wrong')
       }
       title={strings('fiat_on_ramp_aggregator.something_went_wrong')}
-      ctaLabel={strings('fiat_on_ramp_aggregator.report_this_issue')}
+      ctaLabel={strings('fiat_on_ramp_aggregator.return_home')}
       ctaOnPress={() => {
         //TODO: implement a reporting mechanisim for the sdkError
+        //TODO: implement a mechanisim for user to submit a support ticket
         // @ts-expect-error navigation prop mismatch
         navigation.dangerouslyGetParent()?.pop();
       }}

app/components/UI/FiatOnRampAggregator/sdk/index.tsx

@@ -96,6 +96,10 @@ export const FiatOnRampSDKProvider = ({
         const sdk = await SDK.regions();
         setSdkModule(sdk);
       } catch (error) {
+        Logger.error(
+          error as Error,
+          `FiatOnRampSDKProvider SDK.regions() failed`,
+        );
         setSdkError(error as Error);
       }
     })();

locales/languages/en.json

@@ -1584,7 +1584,9 @@
     "no_providers_available": "No providers available",
     "try_different_amount_to_buy_input": "Try choosing a different payment method or try to increase or reduce the amount you want to buy!",
     "webview_received_error": "WebView received error status code: {{code}}",
-    "no_tokens_available": "There are currently no cryptocurrencies available to purchase on {{network}}",
+    "no_tokens_available": "There are currently no cryptocurrencies available to purchase on {{network}} in {{region}}",
+    "try_different_region": "Try a different region",
+    "return_home": "Return to Home Screen",
     "region": {
       "buy_crypto_tokens": "Buy Crypto Tokens",
       "title": "Select your Region",