Fix error display in RampSelectOptionScene

This happens because `useRampQuotes` calls `runWithTimeout` for 10 seconds. If that timeout triggers, we show an error card in place of the payment method.

Fix to increase the delay, only ever show one error card, and also notify the user to check their network connection.

Author: Jon-edge

src/components/scenes/RampSelectOptionScene.tsx

@@ -154,6 +154,11 @@ export const RampSelectOptionScene: React.FC<Props> = (props: Props) => {
       ? lstrings.trade_option_buy_title
       : lstrings.trade_option_sell_title
 
+  // Only show a single non-fiat provider error when there are no quotes
+  const nonFiatErrors = React.useMemo(() => {
+    return failedQuotes.filter(q => !(q.error instanceof FiatProviderError))
+  }, [failedQuotes])
+
   return (
     <SceneWrapper scroll hasTabs>
       <SceneContainer headerTitle={headerTitle}>
@@ -199,22 +204,12 @@ export const RampSelectOptionScene: React.FC<Props> = (props: Props) => {
                 />
               )
             )}
-            {failedQuotes.map(quoteError => {
-              const error = quoteError.error
-              if (error instanceof FiatProviderError) {
-                // Ignore known FiatProviderErrors
-                return null
-              }
-
-              // We should communicate all unknown errors to the user for
-              // reporting purposes.
-              return (
-                <ErrorCard
-                  key={`error-${quoteError.pluginId}`}
-                  error={quoteError.error}
-                />
-              )
-            })}
+            {allQuotes.length === 0 && nonFiatErrors.length > 0 ? (
+              <ErrorCard
+                key="ramp-quotes-error"
+                error={nonFiatErrors[0].error}
+              />
+            ) : null}
           </>
         )}
       </SceneContainer>

src/hooks/useRampQuotes.ts

@@ -58,7 +58,7 @@ export const useRampQuotes = ({
           try {
             const quotes = await runWithTimeout(
               plugin.fetchQuotes(rampQuoteRequest),
-              10000
+              15000
             )
             return { ok: true, value: quotes }
           } catch (error) {

src/locales/en_US.ts

@@ -1364,7 +1364,7 @@ const strings = {
   error_unexpected_title: 'Unexpected Error',
   error_kyc_required_s: 'KYC required: %s',
   error_generic_message:
-    'An unexpected error occurred. Please try again later.',
+    'An unexpected error occurred. Please check your network connection and try again later.',
 
   export_transaction_date_range: 'Date Range',
   export_transaction_export_type: 'Export Type',

src/locales/strings/enUS.json

@@ -1070,7 +1070,7 @@
   "error_boundary_help_button": "Help Closing App",
   "error_unexpected_title": "Unexpected Error",
   "error_kyc_required_s": "KYC required: %s",
-  "error_generic_message": "An unexpected error occurred. Please try again later.",
+  "error_generic_message": "An unexpected error occurred. Please check your network connection and try again later.",
   "export_transaction_date_range": "Date Range",
   "export_transaction_export_type": "Export Type",
   "export_transaction_this_month": "This Month",