From 19ed829d2f81b3e1884b72315e9749dd2bd74da5 Mon Sep 17 00:00:00 2001
From: avelous <avelousujiri@gmail.com>
Date: Mon, 26 Feb 2024 19:39:21 +0100
Subject: [PATCH 1/4] load punkwallet on optimism

---
 packages/nextjs/components/dicedemo/Congrats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/dicedemo/Congrats.tsx b/packages/nextjs/components/dicedemo/Congrats.tsx
index c01a970..2975365 100644
--- a/packages/nextjs/components/dicedemo/Congrats.tsx
+++ b/packages/nextjs/components/dicedemo/Congrats.tsx
@@ -24,7 +24,7 @@ const Congrats = ({
   };
 
   const privateKey = loadBurnerSK();
-  const pwlink = "https://punkwallet.io/pk#" + privateKey;
+  const pwlink = "https://punkwallet.io/opt:pk#" + privateKey;
 
   return (
     <div className=" overflow-hidden w-fit text-lg bg-base-200 h-full">

From 24468bbe23655e51be4e1b6c37c78737c1930cf5 Mon Sep 17 00:00:00 2001
From: avelous <avelousujiri@gmail.com>
Date: Thu, 29 Feb 2024 08:16:09 +0100
Subject: [PATCH 2/4] fixed hidden menu items and repo link in footer

---
 packages/nextjs/components/Footer.tsx | 27 ++++---------
 packages/nextjs/components/Header.tsx | 55 +++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index e0f4194..aab4e77 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -11,6 +11,7 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth";
  */
 export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
+  const codeLink = "https://github.com/BuidlGuidl/private-key-dices";
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
@@ -31,15 +32,13 @@ export const Footer = () => {
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div className="text-center">
-              <a
-                href="https://github.com/scaffold-eth/se-2"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Fork me
-              </a>
+            <div>
+              <div className="flex justify-center items-center gap-2 text-sm w-full">
+                📝{" "}
+                <a href={codeLink} target="_blank" rel="noreferrer" className="underline underline-offset-2">
+                  Code/Repo
+                </a>{" "}
+              </div>
             </div>
             <span>·</span>
             <div>
@@ -56,16 +55,6 @@ export const Footer = () => {
               </p>
             </div>
             <span>·</span>
-            <div className="text-center">
-              <a
-                href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Support
-              </a>
-            </div>
           </div>
         </ul>
       </div>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index a30c33c..9405a90 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -1,27 +1,64 @@
 import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import Wallet from "./Wallet";
+import { useRouter } from "next/router";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
+interface HeaderMenuLink {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+}
+
+export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Home",
+    href: "/",
+  },
+];
+
+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>
+        );
+      })}
+    </>
+  );
+};
+
 /**
  * Site header
  */
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
+
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
   return (
-    <div
-      className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2"
-      style={{ backgroundColor: "#d6fcf8" }}
-    >
+    <div className="sticky lg:static top-0 navbar bg-white min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -40,7 +77,9 @@ export const Header = () => {
               onClick={() => {
                 setIsDrawerOpen(false);
               }}
-            ></ul>
+            >
+              <HeaderMenuLinks />
+            </ul>
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
@@ -51,11 +90,13 @@ export const Header = () => {
             <span className="font-bold leading-tight">Private Key Dice</span>
           </div>
         </Link>
+        <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 />
         <FaucetButton />
-        <Wallet />
       </div>
     </div>
   );

From ace75edee9f2754e7b345b246df3811e10595ef5 Mon Sep 17 00:00:00 2001
From: avelous <avelousujiri@gmail.com>
Date: Thu, 29 Feb 2024 08:27:20 +0100
Subject: [PATCH 3/4] corrected github link

---
 packages/nextjs/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index aab4e77..f15f646 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -11,7 +11,7 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth";
  */
 export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
-  const codeLink = "https://github.com/BuidlGuidl/private-key-dices";
+  const codeLink = "https://github.com/BuidlGuidl/private-key-dice";
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">

From 46bd7cb7b4eeb4f3500bebdc995a7dfed8c3d7e2 Mon Sep 17 00:00:00 2001
From: avelous <avelousujiri@gmail.com>
Date: Sat, 2 Mar 2024 09:47:13 +0100
Subject: [PATCH 4/4] added the wallet button

---
 packages/nextjs/components/Header.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 9405a90..765db53 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import Wallet from "./Wallet";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -97,6 +98,7 @@ export const Header = () => {
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
         <FaucetButton />
+        <Wallet />
       </div>
     </div>
   );