chore(alert): heading and paragraph for connection error alert

joinmarket-webui · Apr 22, 2024 · 4970eca · 4970eca
1 parent 0cb53f0
commit 4970eca
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -87,6 +87,8 @@ export default function App() {
     [reloadCurrentWalletInfo],
   )
 
+  debugger
+
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route
@@ -132,27 +134,33 @@ export default function App() {
               path="*"
               element={
                 <rb.Alert variant="danger">
-                  {t('app.alert_no_connection', { connectionError: sessionConnectionError.message })}.{' '}
-                  {!sessionConnectionError.response?.ok && sessionConnectionError.response?.url && (
-                    <Trans
-                      i18nKey="app.alert_no_connection_details"
-                      components={{
-                        1: (
-                          <a href={sessionConnectionError.response.url} target="_blank" rel="noopener noreferrer">
-                            {sessionConnectionError.response.url}
-                          </a>
-                        ),
-                        2: (
-                          <a
-                            href="https://jamdocs.org/FAQ/#how-to-resolve-no-connection-to-gateway"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            the docs
-                          </a>
-                        ),
-                      }}
-                    />
+                  <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>
               }

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -32,7 +32,7 @@
   },
   "app": {
     "alert_no_connection": "No connection to backend: {{ connectionError }}",
-    "alert_no_connection_details": "Unable to access <1>this URL</1>. Please confirm that the backend is running and see <2>the docs</2> for more information.",
+    "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": {