added

packages/nextjs/.env.example

@@ -0,0 +1,13 @@
+# Template for NextJS environment variables.
+
+# For local development, copy this file, rename it to .env.local, and fill in the values.
+# When deploying live, you'll need to store the vars in Vercel/System config.
+
+# If not set, we provide default values (check `scaffold.config.ts`) so developers can start prototyping out of the box,
+# but we recommend getting your own API Keys for Production Apps.
+
+# To access the values stored in this env file you can use: process.env.VARIABLENAME
+# You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
+# More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+NEXT_PUBLIC_ALCHEMY_API_KEY=
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

packages/nextjs/.eslintignore

@@ -0,0 +1,11 @@
+# folders
+.next
+node_modules/
+# files
+**/*.less
+**/*.css
+**/*.scss
+**/*.json
+**/*.png
+**/*.svg
+**/generated/**/*

packages/nextjs/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "@typescript-eslint/ban-ts-comment": ["off"],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

packages/nextjs/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

packages/nextjs/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

packages/nextjs/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "importOrder": ["^react$", "^next/(.*)$", "<THIRD_PARTY_MODULES>", "^@heroicons/(.*)$", "^~~/(.*)$"],
+  "importOrderSortSpecifiers": true
+}

packages/nextjs/components/Footer.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import Link from "next/link";
+import buildbearSandbox from "../sandbox.json";
+import { hardhat } from "viem/chains";
+import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { HeartIcon } from "@heroicons/react/24/outline";
+import { SwitchTheme } from "~~/components/SwitchTheme";
+import { Faucet, FaucetBuildBear } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
+
+/**
+ * Site footer
+ */
+export const Footer = () => {
+  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
+  const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork.id === hardhat.id;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const isBuildBear = targetNetwork.name! === "BuildBear";
+
+  return (
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+      <div>
+        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
+          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
+            {nativeCurrencyPrice > 0 && (
+              <div>
+                <div className="btn btn-primary btn-sm font-normal normal-case gap-1 cursor-auto">
+                  <CurrencyDollarIcon className="h-4 w-4" />
+                  <span>{nativeCurrencyPrice}</span>
+                </div>
+              </div>
+            )}
+            {isLocalNetwork && (
+              <>
+                <Faucet />
+                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal normal-case gap-1">
+                  <MagnifyingGlassIcon className="h-4 w-4" />
+                  <span>Block Explorer</span>
+                </Link>
+              </>
+            )}
+            {isBuildBear && (
+              <>
+                <FaucetBuildBear />
+                <a
+                  href={buildbearSandbox ? buildbearSandbox.explorerUrl : ""}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="btn btn-primary btn-sm font-normal normal-case gap-1"
+                >
+                  <MagnifyingGlassIcon className="h-4 w-4" />
+                  <span>Block Explorer</span>
+                </a>
+              </>
+            )}
+          </div>
+          <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
+        </div>
+      </div>
+      <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/BuildBearLabs/Scaffold-Eth-2-BuildBear"
+                target="_blank"
+                rel="noreferrer"
+                className="link"
+              >
+                Fork me
+              </a>
+            </div>
+            <span>·</span>
+            <div className="flex justify-center items-center gap-2">
+              <p className="m-0 text-center">
+                Built with <HeartIcon className="inline-block h-4 w-4" /> at
+              </p>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://www.buildbear.io/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <span className="link">BuildBear</span>
+              </a>
+            </div>
+            <span>·</span>
+            <div className="text-center">
+              <a href="https://t.me/Web3_dApp_Developers" target="_blank" rel="noreferrer" className="link">
+                Support
+              </a>
+            </div>
+          </div>
+        </ul>
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/Header.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { useOutsideClick } from "~~/hooks/scaffold-eth";
+
+type 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" />,
+  },
+];
+
+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">
+      <div className="navbar-start w-auto lg:w-1/2">
+        <div className="lg:hidden dropdown" ref={burgerMenuRef}>
+          <label
+            tabIndex={0}
+            className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
+            onClick={() => {
+              setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
+            }}
+          >
+            <Bars3Icon className="h-1/2" />
+          </label>
+          {isDrawerOpen && (
+            <ul
+              tabIndex={0}
+              className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+              onClick={() => {
+                setIsDrawerOpen(false);
+              }}
+            >
+              <HeaderMenuLinks />
+            </ul>
+          )}
+        </div>
+        <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
+          <div className="flex relative w-10 h-10">
+            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold text-xs">Scaffold-ETH x BuildBear</span>
+            <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">
+          <HeaderMenuLinks />
+        </ul>
+      </div>
+      <div className="navbar-end flex-grow mr-4">
+        <RainbowKitCustomConnectButton />
+        <FaucetButton />
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/MetaHeader.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Head from "next/head";
+
+type MetaHeaderProps = {
+  title?: string;
+  description?: string;
+  image?: string;
+  twitterCard?: string;
+  children?: React.ReactNode;
+};
+
+// Images must have an absolute path to work properly on Twitter.
+// We try to get it dynamically from Vercel, but we default to relative path.
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/` : "/";
+
+export const MetaHeader = ({
+  title = "Se-2 x Buildbear",
+  description = "Built with 🏗 Scaffold-ETH 2 & BuildBear",
+  image = "thumbnail.jpg",
+  twitterCard = "summary_large_image",
+  children,
+}: MetaHeaderProps) => {
+  const imageUrl = baseUrl + image;
+
+  return (
+    <Head>
+      {title && (
+        <>
+          <title>{title}</title>
+          <meta property="og:title" content={title} />
+          <meta name="twitter:title" content={title} />
+        </>
+      )}
+      {description && (
+        <>
+          <meta name="description" content={description} />
+          <meta property="og:description" content={description} />
+          <meta name="twitter:description" content={description} />
+        </>
+      )}
+      {image && (
+        <>
+          <meta property="og:image" content={imageUrl} />
+          <meta name="twitter:image" content={imageUrl} />
+        </>
+      )}
+      {twitterCard && <meta name="twitter:card" content={twitterCard} />}
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
+      {children}
+    </Head>
+  );
+};

packages/nextjs/components/SwitchTheme.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useDarkMode, useIsMounted } from "usehooks-ts";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+
+export const SwitchTheme = ({ className }: { className?: string }) => {
+  const { isDarkMode, toggle } = useDarkMode();
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    const body = document.body;
+    body.setAttribute("data-theme", isDarkMode ? "scaffoldEthDark" : "scaffoldEth");
+  }, [isDarkMode]);
+
+  return (
+    <div className={`flex space-x-2 text-sm ${className}`}>
+      <input
+        id="theme-toggle"
+        type="checkbox"
+        className="toggle toggle-primary bg-primary"
+        onChange={toggle}
+        checked={isDarkMode}
+      />
+      {isMounted() && (
+        <label htmlFor="theme-toggle" className={`swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}>
+          <SunIcon className="swap-on h-5 w-5" />
+          <MoonIcon className="swap-off h-5 w-5" />
+        </label>
+      )}
+    </div>
+  );
+};