646 - Improve Connection Error Page

src/components/App.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from 'react'
 import * as rb from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import {
   createBrowserRouter,
   createRoutesFromElements,
@@ -87,6 +87,8 @@ export default function App() {
     [reloadCurrentWalletInfo],
   )
 
+  debugger
+
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route
@@ -132,7 +134,34 @@ export default function App() {
               path="*"
               element={
                 <rb.Alert variant="danger">
-                  {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.
+                  <h5 className="alert-heading">
+                    {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}
+                  </h5>
+                  {!sessionConnectionError.response?.ok && (
+                    <>
+                      <p>
+                        <Trans
+                          i18nKey="app.alert_no_connection_details"
+                          components={{
+                            1: (
+                              <a
+                                className="alert-link"
+                                href="https://jamdocs.org/FAQ/#how-to-resolve-no-connection-to-gateway"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                the docs
+                              </a>
+                            ),
+                          }}
+                        />
+                      </p>
+                      <pre>
+                        {sessionConnectionError.response.status}&nbsp;{sessionConnectionError.response.statusText}&nbsp;
+                        {sessionConnectionError.response.url}
+                      </pre>
+                    </>
+                  )}
                 </rb.Alert>
               }
             />

src/context/ServiceInfoContext.tsx

@@ -93,7 +93,7 @@ interface ServiceInfoContextEntry {
   serviceInfo: ServiceInfo | null
   reloadServiceInfo: ({ signal }: { signal: AbortSignal }) => Promise<ServiceInfo>
   dispatchServiceInfo: Dispatch<Partial<ServiceInfo>>
-  connectionError?: Error
+  connectionError?: Api.JmApiError
 }
 
 const ServiceInfoContext = createContext<ServiceInfoContextEntry | undefined>(undefined)
@@ -107,7 +107,7 @@ const ServiceInfoProvider = ({ children }: PropsWithChildren<{}>) => {
     (state: ServiceInfo | null, obj: Partial<ServiceInfo>) => ({ ...state, ...obj }) as ServiceInfo | null,
     null,
   )
-  const [connectionError, setConnectionError] = useState<Error>()
+  const [connectionError, setConnectionError] = useState<Api.JmApiError>()
 
   useEffect(() => {
     const abortCtrl = new AbortController()

src/i18n/locales/en/translation.json

@@ -32,6 +32,7 @@
   },
   "app": {
     "alert_no_connection": "No connection to backend: {{ connectionError }}",
+    "alert_no_connection_details": "Please confirm that the backend is running and <1>see the docs for more information</1>.",
     "alert_rescan_in_progress": "Rescanning in progress..."
   },
   "navbar": {