chore: further changes

frontend/src/components/Footer.tsx

@@ -0,0 +1,12 @@
+function Footer() {
+  return (
+    <footer className="mt-20 mb-4 text-center">
+      <span className="text-gray-500 dark:text-neutral-300 text-xs">Made with 💜 by</span>
+      <a href="https://getalby.com?utm_source=nwc" rel="noreferrer noopener">
+        <img id="alby-logo" src="/public/images/alby-logo-with-text.svg" className="w-16 inline"/>
+      </a>
+    </footer>
+  )
+}
+
+export default Footer;

frontend/src/components/Loading.tsx

@@ -0,0 +1,28 @@
+function Loading({ color = "currentColor" }) {
+  return (
+    <>
+      <svg
+        className="animate-spin h-6 w-6 text-purple-700"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke={color}
+          strokeWidth="4"
+        ></circle>
+        <path
+          fill={color}
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </>
+  );
+}
+
+export default Loading;

frontend/src/components/Navbar.tsx

@@ -0,0 +1,68 @@
+import { Outlet } from "react-router-dom";
+import { useUser } from "../context/UserContext";
+
+
+function Navbar() {
+  const { logout } = useUser()
+  return (
+    <>
+      <div className="bg-gray-50 dark:bg-surface-00dp">
+        <div
+          className="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6"
+        >
+          <nav className="container max-w-screen-lg mx-auto px-4 lg:px-0 py-3">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center space-x-12">
+                <a href="/" className="font-headline text-[20px] dark:text-white">
+                  <img
+                    alt="NWC Logo"
+                    className="w-8 inline"
+                    width="128"
+                    height="120"
+                    src="/public/images/nwc-logo.svg"
+                  />
+                  <span className="dark:text-white text-lg font-semibold hidden sm:inline">
+                    Nostr Wallet Connect
+                  </span>
+                </a>
+
+                <div className="hidden md:flex space-x-4">
+                  <a
+                    className="text-gray-400 font-medium hover:text-gray-600 dark:hover:text-gray-300 transition"
+                    href="/apps"
+                  >
+                    Connections
+                  </a>
+                  <a className="text-gray-400 pl-5 font-medium" href="/about">
+                    About
+                  </a>
+                </div>
+              </div>
+              <div className="flex items-center relative">
+                <p className="text-gray-400 dark:text-gray-400 text-xs font-medium sm:text-base cursor-pointer select-none " id="dropdown-menu">
+                  {/* {user.email} */}
+                  <img
+                    id="caret"
+                    className="inline cursor-pointer w-4 ml-2"
+                    src="/public/images/caret.svg"
+                  />
+                </p>
+                  <div className="font-medium flex flex-col px-4 w-40 logout absolute right mt-25 justify-left cursor-pointer rounded-lg border border-gray-200 dark:border-gray-200 text-center bg-white dark:bg-surface-01dp shadow" id="dropdown">
+                    <a className="md:hidden flex items-center justify-left  py-2 text-gray-400 dark:text-gray-400" href="/about">
+                      <img className="inline cursor-pointer w-4 mr-3" src="/public/images/about.svg" alt="about-svg" /><p className="font-normal">About</p>
+                    </a>
+                    <div className="flex items-center justify-left py-2 text-red-500" onClick={logout}>
+                      <img className="inline cursor-pointer w-4 mr-3" src="/public/images/logout.svg" alt="logout-svg" /><p className="font-normal">Logout</p>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+      <Outlet/>
+    </>
+  )
+}
+
+export default Navbar;

frontend/src/components/QRCode.tsx

@@ -0,0 +1,35 @@
+import ReactQRCode from "react-qr-code";
+
+export type Props = {
+  value: string;
+  size?: number;
+  className?: string;
+
+  // set the level to Q if there are overlays
+  // Q will improve error correction (so we can add overlays covering up to 25% of the QR)
+  // at the price of decreased information density (meaning the QR codes "pixels" have to be
+  // smaller to encode the same information).
+  // While that isn't that much of a problem for lightning addresses (because they are usually quite short),
+  // for invoices that contain larger amount of data those QR codes can get "harder" to read.
+  // (meaning you have to aim your phone very precisely and have to wait longer for the reader
+  // to recognize the QR code)
+  level?: "Q" | undefined;
+};
+
+export default function QRCode({ value, size, level, className }: Props) {
+  // TODO: Theme option in settings?
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+  const fgColor = isDark ? "#FFFFFF" : "#000000";
+  const bgColor = isDark ? "#000000" : "#FFFFFF";
+
+  return (
+    <ReactQRCode
+      value={value}
+      size={size}
+      fgColor={fgColor}
+      bgColor={bgColor}
+      className={`"w-full h-auto rounded-md" ${className}`}
+      level={level}
+    />
+  );
+}