Add explorer liquidity access and live route proxies

frontend/src/components/common/Footer.tsx

@@ -0,0 +1,65 @@
+const footerLinkClass =
+  'text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors'
+
+export default function Footer() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="mt-auto border-t border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/90 backdrop-blur">
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid gap-6 md:grid-cols-[1.5fr_1fr_1fr]">
+          <div className="space-y-3">
+            <div className="text-lg font-semibold text-gray-900 dark:text-white">
+              SolaceScanScout
+            </div>
+            <p className="max-w-xl text-sm leading-6 text-gray-600 dark:text-gray-400">
+              Built from Blockscout foundations and Solace Bank Group PLC frontend
+              work. Explorer data is powered by Blockscout, Chain 138 RPC, and the
+              companion MetaMask Snap.
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-500">
+              © {year} Solace Bank Group PLC. All rights reserved.
+            </p>
+          </div>
+
+          <div>
+            <div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+              Resources
+            </div>
+            <ul className="space-y-2 text-sm">
+              <li><a className={footerLinkClass} href="/docs.html">Documentation</a></li>
+              <li><a className={footerLinkClass} href="/liquidity">Liquidity Access</a></li>
+              <li><a className={footerLinkClass} href="/privacy.html">Privacy Policy</a></li>
+              <li><a className={footerLinkClass} href="/terms.html">Terms of Service</a></li>
+              <li><a className={footerLinkClass} href="/acknowledgments.html">Acknowledgments</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+              Contact
+            </div>
+            <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+              <p>
+                Support:{' '}
+                <a className={footerLinkClass} href="mailto:support@d-bis.org">
+                  support@d-bis.org
+                </a>
+              </p>
+              <p>
+                Snap site:{' '}
+                <a className={footerLinkClass} href="https://explorer.d-bis.org/snap/">
+                  explorer.d-bis.org/snap/
+                </a>
+              </p>
+              <p className="text-xs leading-5 text-gray-500 dark:text-gray-500">
+                Questions about the explorer, chain metadata, route discovery, or liquidity access
+                can be sent to the support mailbox above.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

frontend/src/components/common/Navbar.tsx

@@ -91,9 +91,21 @@ export default function Navbar() {
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center gap-4 md:gap-8">
-            <Link href="/" className="text-xl font-bold text-primary-600 dark:text-primary-400 flex flex-col" onClick={() => setMobileMenuOpen(false)}>
-              <span>SolaceScanScout</span>
-              <span className="text-xs font-normal text-gray-500 dark:text-gray-400">The Defi Oracle Meta Explorer</span>
+            <Link
+              href="/"
+              className="group inline-flex flex-col rounded-xl px-3 py-2 text-xl font-bold text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-gray-700/70"
+              onClick={() => setMobileMenuOpen(false)}
+              aria-label="Go to explorer home"
+            >
+              <span className="flex items-center gap-2">
+                <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600 text-white shadow-sm transition-transform group-hover:-translate-y-0.5 dark:bg-primary-500">
+                  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                    <path d="M12 2.5 3.5 6.5v11l8.5 4 8.5-4v-11L12 2.5Zm0 2.24 6.44 3.03L12 10.8 5.56 7.77 12 4.74Zm-7 4.63L11 13.1v6.07L5 16.4V9.37Zm9 9.8v-6.07l6-2.92v6.03l-6 2.96Z" />
+                  </svg>
+                </span>
+                <span>SolaceScanScout</span>
+              </span>
+              <span className="mt-0.5 text-xs font-normal text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200">The Defi Oracle Meta Explorer</span>
             </Link>
             <div className="hidden md:flex items-center gap-1">
               <NavDropdown
@@ -110,6 +122,7 @@ export default function Navbar() {
               >
                 <DropdownItem href="/search">Search</DropdownItem>
                 <DropdownItem href="/wallet">Wallet</DropdownItem>
+                <DropdownItem href="/liquidity">Liquidity</DropdownItem>
               </NavDropdown>
             </div>
           </div>
@@ -154,6 +167,7 @@ export default function Navbar() {
                   <ul className="pl-4 mt-1 space-y-0.5">
                     <li><Link href="/search" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Search</Link></li>
                     <li><Link href="/wallet" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Wallet</Link></li>
+                    <li><Link href="/liquidity" className={`block px-3 py-2 rounded-md ${navLink}`} onClick={() => setMobileMenuOpen(false)}>Liquidity</Link></li>
                   </ul>
                 )}
               </div>