From 502540ea9dbf5ae6a52bb920db2f7ba30c52f7a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Thu, 12 Oct 2023 08:55:45 +0200
Subject: [PATCH] HeaderMenuLinks. Inline navLinks

---
 packages/nextjs/components/Header.tsx         |  35 +---
 .../nextjs/components/HeaderMenuLinks.tsx     |  58 +++++++
 .../nextjs/components/headerMenuLinks.tsx     |  30 ----
 .../nextjs/generated/deployedContracts.ts     | 155 +++++++++++++++++-
 4 files changed, 216 insertions(+), 62 deletions(-)
 create mode 100644 packages/nextjs/components/HeaderMenuLinks.tsx
 delete mode 100644 packages/nextjs/components/headerMenuLinks.tsx

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index a4669f5a3..cd6966a0b 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -1,38 +1,11 @@
 import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { Bars3Icon } from "@heroicons/react/24/outline";
-import { headerMenuLinks } from "~~/components/headerMenuLinks";
+import { HeaderMenuLinks } from "~~/components/HeaderMenuLinks";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
-const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
-  const router = useRouter();
-  const isActive = router.pathname === href;
-
-  return (
-    <Link
-      href={href}
-      passHref
-      className={`${
-        isActive ? "bg-secondary shadow-md" : ""
-      } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
-    >
-      {children}
-    </Link>
-  );
-};
-
-const navLinks = headerMenuLinks.map(({ label, href, icon }) => (
-  <li key={href}>
-    <NavLink href={href}>
-      <span>{icon}</span>
-      <span>{label}</span>
-    </NavLink>
-  </li>
-));
-
 /**
  * Site header
  */
@@ -65,7 +38,7 @@ export const Header = () => {
                 setIsDrawerOpen(false);
               }}
             >
-              {navLinks}
+              <HeaderMenuLinks />
             </ul>
           )}
         </div>
@@ -78,7 +51,9 @@ export const Header = () => {
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">{navLinks}</ul>
+        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+          <HeaderMenuLinks />
+        </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
diff --git a/packages/nextjs/components/HeaderMenuLinks.tsx b/packages/nextjs/components/HeaderMenuLinks.tsx
new file mode 100644
index 000000000..7a0857a8a
--- /dev/null
+++ b/packages/nextjs/components/HeaderMenuLinks.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
+
+interface HeaderMenuLink {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+}
+
+export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "Debug Contracts",
+    href: "/debug",
+    icon: <BugAntIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Example UI",
+    href: "/example-ui",
+    icon: <SparklesIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Block Explorer",
+    href: "/blockexplorer",
+    icon: <MagnifyingGlassIcon className="h-4 w-4" />,
+  },
+];
+
+export const HeaderMenuLinks = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      {menuLinks.map(({ label, href, icon }) => {
+        const isActive = router.pathname === href;
+        return (
+          <li key={href}>
+            <Link
+              href={href}
+              passHref
+              className={`${
+                isActive ? "bg-secondary shadow-md" : ""
+              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+            >
+              {icon}
+              <span>{label}</span>
+            </Link>
+          </li>
+        );
+      })}
+    </>
+  );
+};
diff --git a/packages/nextjs/components/headerMenuLinks.tsx b/packages/nextjs/components/headerMenuLinks.tsx
deleted file mode 100644
index 078337839..000000000
--- a/packages/nextjs/components/headerMenuLinks.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
-
-interface HeaderMenuLink {
-  label: string;
-  href: string;
-  icon?: React.ReactNode;
-}
-
-export const headerMenuLinks: HeaderMenuLink[] = [
-  {
-    label: "Home",
-    href: "/",
-  },
-  {
-    label: "Debug Contracts",
-    href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
-  },
-  {
-    label: "Example UI",
-    href: "/example-ui",
-    icon: <SparklesIcon className="h-4 w-4" />,
-  },
-  {
-    label: "Block Explorer",
-    href: "/blockexplorer",
-    icon: <MagnifyingGlassIcon className="h-4 w-4" />,
-  },
-];
diff --git a/packages/nextjs/generated/deployedContracts.ts b/packages/nextjs/generated/deployedContracts.ts
index 04fae511f..3d13f1887 100644
--- a/packages/nextjs/generated/deployedContracts.ts
+++ b/packages/nextjs/generated/deployedContracts.ts
@@ -1,3 +1,154 @@
-const deployedContracts = null;
+const contracts = {
+  31337: [
+    {
+      chainId: "31337",
+      name: "localhost",
+      contracts: {
+        YourContract: {
+          address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
+          abi: [
+            {
+              inputs: [
+                {
+                  internalType: "address",
+                  name: "_owner",
+                  type: "address",
+                },
+              ],
+              stateMutability: "nonpayable",
+              type: "constructor",
+            },
+            {
+              anonymous: false,
+              inputs: [
+                {
+                  indexed: true,
+                  internalType: "address",
+                  name: "greetingSetter",
+                  type: "address",
+                },
+                {
+                  indexed: false,
+                  internalType: "string",
+                  name: "newGreeting",
+                  type: "string",
+                },
+                {
+                  indexed: false,
+                  internalType: "bool",
+                  name: "premium",
+                  type: "bool",
+                },
+                {
+                  indexed: false,
+                  internalType: "uint256",
+                  name: "value",
+                  type: "uint256",
+                },
+              ],
+              name: "GreetingChange",
+              type: "event",
+            },
+            {
+              inputs: [],
+              name: "greeting",
+              outputs: [
+                {
+                  internalType: "string",
+                  name: "",
+                  type: "string",
+                },
+              ],
+              stateMutability: "view",
+              type: "function",
+            },
+            {
+              inputs: [],
+              name: "owner",
+              outputs: [
+                {
+                  internalType: "address",
+                  name: "",
+                  type: "address",
+                },
+              ],
+              stateMutability: "view",
+              type: "function",
+            },
+            {
+              inputs: [],
+              name: "premium",
+              outputs: [
+                {
+                  internalType: "bool",
+                  name: "",
+                  type: "bool",
+                },
+              ],
+              stateMutability: "view",
+              type: "function",
+            },
+            {
+              inputs: [
+                {
+                  internalType: "string",
+                  name: "_newGreeting",
+                  type: "string",
+                },
+              ],
+              name: "setGreeting",
+              outputs: [],
+              stateMutability: "payable",
+              type: "function",
+            },
+            {
+              inputs: [],
+              name: "totalCounter",
+              outputs: [
+                {
+                  internalType: "uint256",
+                  name: "",
+                  type: "uint256",
+                },
+              ],
+              stateMutability: "view",
+              type: "function",
+            },
+            {
+              inputs: [
+                {
+                  internalType: "address",
+                  name: "",
+                  type: "address",
+                },
+              ],
+              name: "userGreetingCounter",
+              outputs: [
+                {
+                  internalType: "uint256",
+                  name: "",
+                  type: "uint256",
+                },
+              ],
+              stateMutability: "view",
+              type: "function",
+            },
+            {
+              inputs: [],
+              name: "withdraw",
+              outputs: [],
+              stateMutability: "nonpayable",
+              type: "function",
+            },
+            {
+              stateMutability: "payable",
+              type: "receive",
+            },
+          ],
+        },
+      },
+    },
+  ],
+} as const;
 
-export default deployedContracts;
+export default contracts;