From e2c8312f24bd858a54956f28b1d40a701267b715 Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Fri, 4 Apr 2025 02:51:04 +0530
Subject: [PATCH] feat: add footer

---
 examples/keystore-management/README.md        |   5 +-
 examples/keystore-management/next.config.js   |  13 +++
 .../keystore-management/src/app/layout.tsx    |   6 +-
 .../src/components/Footer.tsx                 | 100 ++++++++++++++++++
 .../src/components/ui/tooltip.tsx             |  28 +++++
 .../keystore-management/src/content/index.ts  |   6 --
 6 files changed, 147 insertions(+), 11 deletions(-)
 create mode 100644 examples/keystore-management/next.config.js
 create mode 100644 examples/keystore-management/src/components/Footer.tsx
 create mode 100644 examples/keystore-management/src/components/ui/tooltip.tsx

diff --git a/examples/keystore-management/README.md b/examples/keystore-management/README.md
index f5a3b40..8de7f1a 100644
--- a/examples/keystore-management/README.md
+++ b/examples/keystore-management/README.md
@@ -41,7 +41,6 @@ If you encounter an "ERC20: insufficient allowance" error, it means the token ap
 ## TODO
 - [ ] add help type info on the webapp
 - [ ] update descriptions, and link specs/resources
-- [ ] footer for discord help
+- [x] footer for discord help
 - [ ] add info about exporting/using keystore/credential and using with nwaku/nwaku-compose/waku-simulator
-- [ x ] exporting entire keystore
-- [ ] clean comments
\ No newline at end of file
+- [x] exporting entire keystore
\ No newline at end of file
diff --git a/examples/keystore-management/next.config.js b/examples/keystore-management/next.config.js
new file mode 100644
index 0000000..3e4252a
--- /dev/null
+++ b/examples/keystore-management/next.config.js
@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: [
+      'waku.org',
+      'logos.co',
+      'contributors.free.technology'
+    ],
+  },
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig 
\ No newline at end of file
diff --git a/examples/keystore-management/src/app/layout.tsx b/examples/keystore-management/src/app/layout.tsx
index 27b3f9b..77076e5 100644
--- a/examples/keystore-management/src/app/layout.tsx
+++ b/examples/keystore-management/src/app/layout.tsx
@@ -10,6 +10,7 @@ import "@fontsource-variable/jetbrains-mono";
 import {  WalletProvider, RLNImplementationProvider, KeystoreProvider, RLNProvider } from "../contexts/index";
 import { Header } from "../components/Header";
 import { AppStateProvider } from "../contexts/AppStateContext";
+import { Footer } from "@/components/Footer";
 
 export const fontSans = FontSans({
   subsets: ["latin"],
@@ -53,11 +54,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
               <RLNImplementationProvider>
                 <KeystoreProvider>
                   <RLNProvider>
-                    <div className="flex flex-col min-h-screen">
+                    <div className="relative flex min-h-screen flex-col">
                       <Header />
-                      <main className="flex-grow">
+                      <main className="flex-1 container mx-auto py-8">
                         {children}
                       </main>
+                      <Footer />
                     </div>
                     <Toaster />
                   </RLNProvider>
diff --git a/examples/keystore-management/src/components/Footer.tsx b/examples/keystore-management/src/components/Footer.tsx
new file mode 100644
index 0000000..33420a6
--- /dev/null
+++ b/examples/keystore-management/src/components/Footer.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link";
+import { Github } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export function Footer() {
+  return (
+    <footer className="w-full border-t border-terminal-border bg-terminal-background/80 backdrop-blur-sm mt-auto">
+      <div className="container mx-auto py-8">
+        <div className="flex flex-col items-center justify-center space-y-8">
+          {/* Waku Section */}
+          <div className="flex flex-col items-center space-y-4">
+            <Link 
+              href="https://waku.org" 
+              target="_blank"
+              className="flex items-center space-x-3 px-4 py-2 rounded-md transition-all duration-300 hover:bg-terminal-background/50"
+            >
+              <span className="text-primary font-mono text-xl font-bold glow-text">
+                Waku
+              </span>
+            </Link>
+            
+            {/* Community Links */}
+            <div className="flex items-center space-x-6">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Link
+                      href="https://discord.waku.org"
+                      target="_blank"
+                      className="text-muted-foreground hover:text-primary transition-colors duration-200"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026 13.83 13.83 0 0 0 1.226-1.963.074.074 0 0 0-.041-.104 13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028zM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38z"/>
+                      </svg>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="font-mono text-xs">Join our Discord community for support & feedback</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <Link
+                href="https://github.com/waku-org"
+                target="_blank"
+                className="text-muted-foreground hover:text-primary transition-colors duration-200"
+              >
+                <Github className="w-5 h-5" />
+              </Link>
+              <Link
+                href="https://docs.waku.org"
+                target="_blank"
+                className="text-muted-foreground hover:text-primary transition-colors duration-200 font-mono text-sm"
+              >
+                Docs
+              </Link>
+              <Link
+                href="https://github.com/waku-org/specs"
+                target="_blank"
+                className="text-muted-foreground hover:text-primary transition-colors duration-200 font-mono text-sm"
+              >
+                Specs
+              </Link>
+            </div>
+          </div>
+
+          {/* Organizational Structure */}
+          <div className="flex items-center justify-center space-x-8 text-muted-foreground">
+            <Link 
+              href="https://logos.co" 
+              target="_blank"
+              className="font-mono text-sm opacity-60 hover:opacity-100 transition-opacity duration-300"
+            >
+              Logos
+            </Link>
+
+            <span className="text-muted-foreground/40">•</span>
+
+            <Link 
+              href="https://free.technology" 
+              target="_blank"
+              className="font-mono text-sm opacity-60 hover:opacity-100 transition-opacity duration-300"
+            >
+              IFT
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+} 
\ No newline at end of file
diff --git a/examples/keystore-management/src/components/ui/tooltip.tsx b/examples/keystore-management/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..f36785f
--- /dev/null
+++ b/examples/keystore-management/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-terminal-background px-3 py-1.5 text-xs text-primary animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-terminal-border",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } 
\ No newline at end of file
diff --git a/examples/keystore-management/src/content/index.ts b/examples/keystore-management/src/content/index.ts
index f5db952..d508239 100644
--- a/examples/keystore-management/src/content/index.ts
+++ b/examples/keystore-management/src/content/index.ts
@@ -1,9 +1,3 @@
-// Types for content structure
-type Link = {
-  text: string;
-  url: string;
-};
-
 export type ContentSegment = {
   type: 'text' | 'link';
   content: string;