diff --git a/components/Footer.tsx b/components/Footer.tsx
deleted file mode 100644
index 4b25b24..0000000
--- a/components/Footer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import FooterLinks from "@/components/FooterLinks";
-import Logo from "@/components/Logo";
-import Link from "@/components/Link";
-
-export default function Footer() {
- return (
-
- );
-}
diff --git a/components/FooterLinks.tsx b/components/FooterLinks.tsx
deleted file mode 100644
index aa3c7b2..0000000
--- a/components/FooterLinks.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-export default function FooterLinks({
- title,
- links,
-}: {
- title: string;
- links: { name: string; href: string }[];
-}) {
- return (
-
- );
-}
diff --git a/components/Header.tsx b/components/Header.tsx
index 40c38a2..2dead3c 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,6 +1,56 @@
import React from "react";
import Link from "@/components/Link";
import Logo from "@/components/Logo";
+import { cn } from "@/lib/utils";
+
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuIndicator,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+ {
+ title: "Accounts",
+ href: "/#/",
+ description:
+ "View your multi-factor accounts and their key shares.",
+ },
+ {
+ title: "About",
+ href: "/#/about",
+ description:
+ "Learn more about how multi-factor accounts work.",
+ },
+ {
+ title: "Create",
+ href: "/#/keys/create",
+ description:
+ "Create a new multi-factor account using distributed key generation.",
+ },
+ {
+ title: "Source Code",
+ href: "https://github.com/mpc-sdk/tss-snap",
+ description:
+ "Get the source code for this snap on Github.",
+ },
+ {
+ title: "MetaMask Flask",
+ href: "https://metamask.io/flask/",
+ description:
+ "The canary build of MetaMask with next-generation features.",
+ },
+ {
+ title: "Snaps",
+ href: "https://metamask.io/snaps/",
+ description: "Snaps extend the functionality of the MetaMask wallet.",
+ },
+];
export default function Header() {
return (
@@ -14,7 +64,53 @@ export default function Header() {
+
+
+
+ Menu
+
+
+ {components.map((component) => (
+
+ {component.description}
+
+ ))}
+
+
+
+
+
);
}
+
+const ListItem = React.forwardRef<
+ React.ElementRef<"a">,
+ React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+ return (
+
+
+
+ {title}
+
+ {children}
+
+
+
+
+ )
+})
+ListItem.displayName = "ListItem"
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..a254ab4
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+ "group inline-flex h-10 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium transition-colors hover:bg-slate-100 hover:text-slate-900 focus:bg-slate-100 focus:text-slate-900 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-slate-100/50 data-[state=open]:bg-slate-100/50 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[active]:bg-slate-800/50 dark:data-[state=open]:bg-slate-800/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}{""}
+
+
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+NavigationMenuIndicator.displayName =
+ NavigationMenuPrimitive.Indicator.displayName
+
+export {
+ navigationMenuTriggerStyle,
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+}
diff --git a/pages/Layout.tsx b/pages/Layout.tsx
index 54235df..576b279 100644
--- a/pages/Layout.tsx
+++ b/pages/Layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
import { Toaster } from "@/components/ui/toaster";
import Header from "@/components/Header";
-import Footer from "@/components/Footer";
+//import Footer from "@/components/Footer";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
@@ -12,7 +12,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
-
);
diff --git a/snap.manifest.json b/snap.manifest.json
index eaaacea..2126b18 100644
--- a/snap.manifest.json
+++ b/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/mpc-sdk/tss-snap"
},
"source": {
- "shasum": "I1l2mfOKqIyRba5jBAjP0zFQ/zf7gX+CH1Vbda9gK6c=",
+ "shasum": "WfCfVsicixx/CmNN6RGDamXbMWCCKuU8mHXvnS39/Sk=",
"location": {
"npm": {
"filePath": "bundle/bundle.js",