feat: add connection indicator to footer (#55)

* Add connection indicator to footer * Update src/components/App.jsx * Update src/components/App.jsx * Update src/components/App.jsx * Update src/components/App.jsx Co-authored-by: Daniel <[email protected]>
joinmarket-webui · Feb 7, 2022 · 6470ab4 · 6470ab4
1 parent 8bb8b7b
commit 6470ab4
Showing 1 changed file with 54 additions and 41 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -113,47 +113,60 @@ export default function App() {
         )}
       </rb.Container>
       <rb.Nav as="footer" className="border-top py-2">
-        <rb.Container className="d-flex justify-content-center">
-          <rb.Nav.Item>
-            <a
-              href="https://github.com/JoinMarket-Org/joinmarket-clientserver/tree/master/docs"
-              target="_blank"
-              rel="noreferrer"
-              className="nav-link text-secondary"
-            >
-              Docs
-            </a>
-          </rb.Nav.Item>
-          <rb.Nav.Item>
-            <a
-              href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
-              target="_blank"
-              rel="noreferrer"
-              className="nav-link text-secondary"
-            >
-              Features
-            </a>
-          </rb.Nav.Item>
-          <rb.Nav.Item>
-            <a
-              href="https://github.com/JoinMarket-Org/joinmarket-clientserver"
-              target="_blank"
-              rel="noreferrer"
-              className="nav-link text-secondary"
-            >
-              GitHub
-            </a>
-          </rb.Nav.Item>
-          <rb.Nav.Item>
-            <a
-              href="https://twitter.com/joinmarket"
-              target="_blank"
-              rel="noreferrer"
-              className="nav-link text-secondary"
-            >
-              Twitter
-            </a>
-          </rb.Nav.Item>
+        <rb.Container>
+          {connectionError ? (
+            <div class="d-flex justify-content-center pt-2">
+              <span class="text-danger mx-1">•</span>
+              <span className="text-secondary">Disconnected</span>
+            </div>
+          ) : (
+            <div class="d-flex justify-content-center pt-2">
+              <span class="text-success mx-1">•</span>
+              <span className="text-secondary">Connected</span>
+            </div>
+          )}
+          <div class="d-flex justify-content-center">
+            <rb.Nav.Item>
+              <a
+                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/tree/master/docs"
+                target="_blank"
+                rel="noreferrer"
+                className="nav-link text-secondary"
+              >
+                Docs
+              </a>
+            </rb.Nav.Item>
+            <rb.Nav.Item>
+              <a
+                href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
+                target="_blank"
+                rel="noreferrer"
+                className="nav-link text-secondary"
+              >
+                Features
+              </a>
+            </rb.Nav.Item>
+            <rb.Nav.Item>
+              <a
+                href="https://github.com/JoinMarket-Org/joinmarket-clientserver"
+                target="_blank"
+                rel="noreferrer"
+                className="nav-link text-secondary"
+              >
+                GitHub
+              </a>
+            </rb.Nav.Item>
+            <rb.Nav.Item>
+              <a
+                href="https://twitter.com/joinmarket"
+                target="_blank"
+                rel="noreferrer"
+                className="nav-link text-secondary"
+              >
+                Twitter
+              </a>
+            </rb.Nav.Item>
+          </div>
         </rb.Container>
       </rb.Nav>
     </>