backmerge latest change to cli (#582)

* Tweak DaisyUI `link` (#560) * Improve ENS support (accept all TLDs) (#563) * fix: memo history events (#565) Co-authored-by: Carlos Sánchez <[email protected]> * Extract header menu links (#570) * Move Block Explorer to footer (#574) * Remove ExampleUI (pages, components, assets, content) (#578) * update wagmi, viem, rainbowkit (#580) * add zkSync, scroll & polygonZkEvm to foundry.toml * add changeset --------- Co-authored-by: Filip Harald <[email protected]> Co-authored-by: Greg <[email protected]> Co-authored-by: Rinat <[email protected]> Co-authored-by: Carlos Sánchez <[email protected]>
scaffold-eth · Oct 23, 2023 · 30d9000 · 30d9000
1 parent 76ec39b
commit 30d9000
Show file tree

Hide file tree

Showing 38 changed files with 114 additions and 498 deletions.
diff --git a/.changeset/early-actors-tease.md b/.changeset/early-actors-tease.md
@@ -0,0 +1,9 @@
+---
+"create-eth": patch
+---
+
+1. Extract header menu links (#570)
+2. Move Block Explorer to footer (#574)
+3. Remove ExampleUI (pages, components, assets, content) (#578)
+4. update wagmi, viem, rainbowkit (#580)
+5. add zkSync, scroll & polygonZkEvm to foundry.toml ([88b4218](https://github.com/scaffold-eth/scaffold-eth-2/pull/582/commits/88b421860a5260d2c8ad4877adaf07c1d667f2b6))
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ The `yarn deploy` command uses a deploy script to deploy the contract to the net
 yarn start
 ```
 
-Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the contract component or the example ui in the frontend. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
+Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
 
 Run smart contract test with `yarn hardhat:test` or `yarn foundry:test` depending of your solidity framework.
 

diff --git a/templates/base/packages/nextjs/.eslintrc.json b/templates/base/packages/nextjs/.eslintrc.json
@@ -10,7 +10,6 @@
       {
         "endOfLine": "auto"
       }
-    ],
-    "@next/next/no-page-custom-font": ["off"]
+    ]
   }
 }
diff --git a/templates/base/packages/nextjs/components/Footer.tsx b/templates/base/packages/nextjs/components/Footer.tsx
@@ -1,5 +1,7 @@
-import { hardhat } from "wagmi/chains";
-import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
+import React from "react";
+import Link from "next/link";
+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 { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
@@ -12,21 +14,32 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth";
  */
 export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
+  const isLocalNetwork = getTargetNetwork().id === hardhat.id;
 
   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 space-x-2 pointer-events-auto">
+          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
-              <div className="btn btn-primary btn-sm font-normal cursor-auto gap-0">
-                <CurrencyDollarIcon className="h-4 w-4 mr-0.5" />
-                <span>{nativeCurrencyPrice}</span>
+              <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>
             )}
-            {getTargetNetwork().id === hardhat.id && <Faucet />}
+            {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>
+              </>
+            )}
           </div>
-          <SwitchTheme className="pointer-events-auto" />
+          <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
         </div>
       </div>
       <div className="w-full">

diff --git a/templates/base/packages/nextjs/components/Header.tsx b/templates/base/packages/nextjs/components/Header.tsx
@@ -2,24 +2,51 @@ 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, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
-const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
+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" />,
+  },
+];
+
+export const HeaderMenuLinks = () => {
   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>
+    <>
+      {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>
+        );
+      })}
+    </>
   );
 };
 
@@ -34,32 +61,6 @@ export const Header = () => {
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
-  const navLinks = (
-    <>
-      <li>
-        <NavLink href="/">Home</NavLink>
-      </li>
-      <li>
-        <NavLink href="/debug">
-          <BugAntIcon className="h-4 w-4" />
-          Debug Contracts
-        </NavLink>
-      </li>
-      <li>
-        <NavLink href="/example-ui">
-          <SparklesIcon className="h-4 w-4" />
-          Example UI
-        </NavLink>
-      </li>
-      <li>
-        <NavLink href="/blockexplorer">
-          <MagnifyingGlassIcon className="h-4 w-4" />
-          Block Explorer
-        </NavLink>
-      </li>
-    </>
-  );
-
   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">
@@ -81,7 +82,7 @@ export const Header = () => {
                 setIsDrawerOpen(false);
               }}
             >
-              {navLinks}
+              <HeaderMenuLinks />
             </ul>
           )}
         </div>
@@ -94,7 +95,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/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx b/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { createPublicClient, http, toHex } from "viem";
-import { hardhat } from "wagmi/chains";
+import { hardhat } from "viem/chains";
 
 const publicClient = createPublicClient({
   chain: hardhat,

diff --git a/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx b/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { isAddress, isHex } from "viem";
+import { hardhat } from "viem/chains";
 import { usePublicClient } from "wagmi";
-import { hardhat } from "wagmi/chains";
 
 export const SearchBar = () => {
   const [searchInput, setSearchInput] = useState("");

diff --git a/templates/base/packages/nextjs/components/example-ui/ContractData.tsx b/templates/base/packages/nextjs/components/example-ui/ContractData.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,6 @@ @@
           {
             "endOfLine": "auto"
           }
-        ],
-        "@next/next/no-page-custom-font": ["off"]
+        ]
       }
     }