Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/components/Footer.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import Link from "next/link";
+import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
+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";
+import { Faucet } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+
+/**
+ * Site footer
+ */
+export const Footer = () => {
+  const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork.id === hardhat.id;
+  const { price: nativeCurrencyPrice } = useFetchNativeCurrencyPrice();
+
+  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 gap-1 cursor-auto">
+                  <CurrencyDollarIcon className="h-4 w-4" />
+                  <span>{nativeCurrencyPrice.toFixed(2)}</span>
+                </div>
+              </div>
+            )}
+            {isLocalNetwork && (
+              <>
+                <Faucet />
+                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
+                  <MagnifyingGlassIcon className="h-4 w-4" />
+                  <span>Block Explorer</span>
+                </Link>
+              </>
+            )}
+          </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/scaffold-eth/se-2" 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://buidlguidl.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
+                <span className="link">BuidlGuidl</span>
+              </a>
+            </div>
+            <span>·</span>
+            <div className="text-center">
+              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
+                Support
+              </a>
+            </div>
+          </div>
+        </ul>
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/Header.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import React, { useRef } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { hardhat } from "viem/chains";
+import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { CircleStackIcon, InboxStackIcon } from "@heroicons/react/24/outline";
+import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+type HeaderMenuLink = {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+};
+
+export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "Crowdfund",
+    href: "/crowdfund",
+    icon: <CircleStackIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Contributions",
+    href: "/contributions",
+    icon: <InboxStackIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Debug Contracts",
+    href: "/debug",
+    icon: <BugAntIcon className="h-4 w-4" />,
+  },
+];
+
+export const HeaderMenuLinks = () => {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {menuLinks.map(({ label, href, icon }) => {
+        const isActive = 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 { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork.id === hardhat.id;
+
+  const burgerMenuRef = useRef<HTMLDetailsElement>(null);
+  useOutsideClick(burgerMenuRef, () => {
+    burgerMenuRef?.current?.removeAttribute("open");
+  });
+
+  return (
+    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 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">
+        <details className="dropdown" ref={burgerMenuRef}>
+          <summary className="ml-1 btn btn-ghost lg:hidden hover:bg-transparent">
+            <Bars3Icon className="h-1/2" />
+          </summary>
+          <ul
+            className="menu menu-compact dropdown-content mt-3 p-2 shadow-sm bg-base-100 rounded-box w-52"
+            onClick={() => {
+              burgerMenuRef?.current?.removeAttribute("open");
+            }}
+          >
+            <HeaderMenuLinks />
+          </ul>
+        </details>
+        <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 leading-tight">SRE Challenges</span>
+            <span className="text-xs">Crowdfunding App</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 grow mr-4">
+        <RainbowKitCustomConnectButton />
+        {isLocalNetwork && <FaucetButton />}
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
+import { useTheme } from "next-themes";
+import { Toaster } from "react-hot-toast";
+import { WagmiProvider } from "wagmi";
+import { Footer } from "~~/components/Footer";
+import { Header } from "~~/components/Header";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { wagmiConfig } from "~~/services/web3/wagmiConfig";
+
+const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <div className={`flex flex-col min-h-screen `}>
+        <Header />
+        <main className="relative flex flex-col flex-1">{children}</main>
+        <Footer />
+      </div>
+      <Toaster />
+    </>
+  );
+};
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          avatar={BlockieAvatar}
+          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
+        >
+          <ProgressBar height="3px" color="#2299dd" />
+          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};

packages/nextjs/components/SwitchTheme.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+
+export const SwitchTheme = ({ className }: { className?: string }) => {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const isDarkMode = resolvedTheme === "dark";
+
+  const handleToggle = () => {
+    if (isDarkMode) {
+      setTheme("light");
+      return;
+    }
+    setTheme("dark");
+  };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className={`flex space-x-2 h-8 items-center justify-center text-sm ${className}`}>
+      <input
+        id="theme-toggle"
+        type="checkbox"
+        className="toggle bg-secondary toggle-primary hover:bg-accent transition-all"
+        onChange={handleToggle}
+        checked={isDarkMode}
+      />
+      <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>
+  );
+};

packages/nextjs/components/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+};

packages/nextjs/components/assets/BuidlGuidlLogo.tsx

@@ -0,0 +1,18 @@
+export const BuidlGuidlLogo = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="53"
+      height="72"
+      viewBox="0 0 53 72"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M25.9 17.434v15.638h3.927v9.04h9.718v-9.04h6.745v18.08l-10.607 19.88-12.11-.182-12.11.183L.856 51.152v-18.08h6.713v9.04h9.75v-9.04h4.329V2.46a2.126 2.126 0 0 1 4.047-.914c1.074.412 2.157 1.5 3.276 2.626 1.33 1.337 2.711 2.726 4.193 3.095 1.496.373 2.605-.026 3.855-.475 1.31-.47 2.776-.997 5.005-.747 1.67.197 2.557 1.289 3.548 2.509 1.317 1.623 2.82 3.473 6.599 3.752l-.024.017c-2.42 1.709-5.726 4.043-10.86 3.587-1.605-.139-2.736-.656-3.82-1.153-1.546-.707-2.997-1.37-5.59-.832-2.809.563-4.227 1.892-5.306 2.903-.236.221-.456.427-.67.606Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { AvatarComponent } from "@rainbow-me/rainbowkit";
+import { blo } from "blo";
+
+// Custom Avatar for RainbowKit
+export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+  // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    className="rounded-full"
+    src={ensImage || blo(address as `0x${string}`)}
+    width={size}
+    height={size}
+    alt={`${address} avatar`}
+  />
+);

packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Address, AddressInput, Balance, EtherInput } from "@scaffold-ui/components";
+import { Address as AddressType, createWalletClient, http, parseEther } from "viem";
+import { hardhat } from "viem/chains";
+import { useAccount } from "wagmi";
+import { BanknotesIcon } from "@heroicons/react/24/outline";
+import { useTargetNetwork, useTransactor } from "~~/hooks/scaffold-eth";
+import { notification } from "~~/utils/scaffold-eth";
+
+// Account index to use from generated hardhat accounts.
+const FAUCET_ACCOUNT_INDEX = 0;
+
+const localWalletClient = createWalletClient({
+  chain: hardhat,
+  transport: http(),
+});
+
+/**
+ * Faucet modal which lets you send ETH to any address.
+ */
+export const Faucet = () => {
+  const [loading, setLoading] = useState(false);
+  const [inputAddress, setInputAddress] = useState<AddressType>();
+  const [faucetAddress, setFaucetAddress] = useState<AddressType>();
+  const [sendValue, setSendValue] = useState("");
+  const { targetNetwork } = useTargetNetwork();
+
+  const { chain: ConnectedChain } = useAccount();
+
+  const faucetTxn = useTransactor(localWalletClient);
+
+  useEffect(() => {
+    const getFaucetAddress = async () => {
+      try {
+        const accounts = await localWalletClient.getAddresses();
+        setFaucetAddress(accounts[FAUCET_ACCOUNT_INDEX]);
+      } catch (error) {
+        notification.error(
+          <>
+            <p className="font-bold mt-0 mb-1">Cannot connect to local provider</p>
+            <p className="m-0">
+              - Did you forget to run <code className="italic bg-base-300 text-base font-bold">yarn chain</code> ?
+            </p>
+            <p className="mt-1 break-normal">
+              - Or you can change <code className="italic bg-base-300 text-base font-bold">targetNetwork</code> in{" "}
+              <code className="italic bg-base-300 text-base font-bold">scaffold.config.ts</code>
+            </p>
+          </>,
+        );
+        console.error("⚡️ ~ file: Faucet.tsx:getFaucetAddress ~ error", error);
+      }
+    };
+    getFaucetAddress();
+  }, []);
+
+  const sendETH = async () => {
+    if (!faucetAddress || !inputAddress) {
+      return;
+    }
+    try {
+      setLoading(true);
+      await faucetTxn({
+        to: inputAddress,
+        value: parseEther(sendValue as `${number}`),
+        account: faucetAddress,
+      });
+      setLoading(false);
+      setInputAddress(undefined);
+      setSendValue("");
+    } catch (error) {
+      console.error("⚡️ ~ file: Faucet.tsx:sendETH ~ error", error);
+      setLoading(false);
+    }
+  };
+
+  // Render only on local chain
+  if (ConnectedChain?.id !== hardhat.id) {
+    return null;
+  }
+
+  return (
+    <div>
+      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal gap-1">
+        <BanknotesIcon className="h-4 w-4" />
+        <span>Faucet</span>
+      </label>
+      <input type="checkbox" id="faucet-modal" className="modal-toggle" />
+      <label htmlFor="faucet-modal" className="modal cursor-pointer">
+        <label className="modal-box relative">
+          {/* dummy input to capture event onclick on modal box */}
+          <input className="h-0 w-0 absolute top-0 left-0" />
+          <h3 className="text-xl font-bold mb-3">Local Faucet</h3>
+          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            ✕
+          </label>
+          <div className="space-y-3">
+            <div className="flex space-x-4">
+              <div>
+                <span className="text-sm font-bold">From:</span>
+                <Address
+                  address={faucetAddress}
+                  onlyEnsOrAddress
+                  blockExplorerAddressLink={
+                    targetNetwork.id === hardhat.id ? `/blockexplorer/address/${faucetAddress}` : undefined
+                  }
+                />
+              </div>
+              <div>
+                <span className="text-sm font-bold pl-3">Available:</span>
+                <Balance address={faucetAddress} />
+              </div>
+            </div>
+            <div className="flex flex-col space-y-3">
+              <AddressInput
+                placeholder="Destination Address"
+                value={inputAddress ?? ""}
+                onChange={value => setInputAddress(value as AddressType)}
+              />
+              <EtherInput
+                placeholder="Amount to send"
+                onValueChange={({ valueInEth }) => setSendValue(valueInEth)}
+                style={{ width: "100%" }}
+              />
+              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+                {!loading ? (
+                  <BanknotesIcon className="h-6 w-6" />
+                ) : (
+                  <span className="loading loading-spinner loading-sm"></span>
+                )}
+                <span>Send</span>
+              </button>
+            </div>
+          </div>
+        </label>
+      </label>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import { useWatchBalance } from "@scaffold-ui/hooks";
+import { createWalletClient, http, parseEther } from "viem";
+import { hardhat } from "viem/chains";
+import { useAccount } from "wagmi";
+import { BanknotesIcon } from "@heroicons/react/24/outline";
+import { useTransactor } from "~~/hooks/scaffold-eth";
+
+// Number of ETH faucet sends to an address
+const NUM_OF_ETH = "1";
+const FAUCET_ADDRESS = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
+
+const localWalletClient = createWalletClient({
+  chain: hardhat,
+  transport: http(),
+});
+
+/**
+ * FaucetButton button which lets you grab eth.
+ */
+export const FaucetButton = () => {
+  const { address, chain: ConnectedChain } = useAccount();
+
+  const { data: balance } = useWatchBalance({ address, chain: hardhat });
+
+  const [loading, setLoading] = useState(false);
+
+  const faucetTxn = useTransactor(localWalletClient);
+
+  const sendETH = async () => {
+    if (!address) return;
+    try {
+      setLoading(true);
+      await faucetTxn({
+        account: FAUCET_ADDRESS,
+        to: address,
+        value: parseEther(NUM_OF_ETH),
+      });
+      setLoading(false);
+    } catch (error) {
+      console.error("⚡️ ~ file: FaucetButton.tsx:sendETH ~ error", error);
+      setLoading(false);
+    }
+  };
+
+  // Render only on local chain
+  if (ConnectedChain?.id !== hardhat.id) {
+    return null;
+  }
+
+  const isBalanceZero = balance && balance.value === 0n;
+
+  return (
+    <div
+      className={
+        !isBalanceZero
+          ? "ml-1"
+          : "ml-1 tooltip tooltip-bottom tooltip-primary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:-translate-x-2/5"
+      }
+      data-tip="Grab funds from faucet"
+    >
+      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+        {!loading ? (
+          <BanknotesIcon className="h-4 w-4" />
+        ) : (
+          <span className="loading loading-spinner loading-xs"></span>
+        )}
+      </button>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -0,0 +1,137 @@
+import { useRef, useState } from "react";
+import { NetworkOptions } from "./NetworkOptions";
+import { getAddress } from "viem";
+import { Address } from "viem";
+import { useAccount, useDisconnect } from "wagmi";
+import {
+  ArrowLeftOnRectangleIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowsRightLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  EyeIcon,
+  QrCodeIcon,
+} from "@heroicons/react/24/outline";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { useCopyToClipboard, useOutsideClick } from "~~/hooks/scaffold-eth";
+import { getTargetNetworks } from "~~/utils/scaffold-eth";
+import { isENS } from "~~/utils/scaffold-eth/common";
+
+const BURNER_WALLET_ID = "burnerWallet";
+
+const allowedNetworks = getTargetNetworks();
+
+type AddressInfoDropdownProps = {
+  address: Address;
+  blockExplorerAddressLink: string | undefined;
+  displayName: string;
+  ensAvatar?: string;
+};
+
+export const AddressInfoDropdown = ({
+  address,
+  ensAvatar,
+  displayName,
+  blockExplorerAddressLink,
+}: AddressInfoDropdownProps) => {
+  const { disconnect } = useDisconnect();
+  const { connector } = useAccount();
+  const checkSumAddress = getAddress(address);
+
+  const { copyToClipboard: copyAddressToClipboard, isCopiedToClipboard: isAddressCopiedToClipboard } =
+    useCopyToClipboard();
+  const [selectingNetwork, setSelectingNetwork] = useState(false);
+  const dropdownRef = useRef<HTMLDetailsElement>(null);
+
+  const closeDropdown = () => {
+    setSelectingNetwork(false);
+    dropdownRef.current?.removeAttribute("open");
+  };
+
+  useOutsideClick(dropdownRef, closeDropdown);
+
+  return (
+    <>
+      <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
+        <summary className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 h-auto!">
+          <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+          <span className="ml-2 mr-1">
+            {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
+          </span>
+          <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
+        </summary>
+        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1">
+          <NetworkOptions hidden={!selectingNetwork} />
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <div
+              className="h-8 btn-sm rounded-xl! flex gap-3 py-3 cursor-pointer"
+              onClick={() => copyAddressToClipboard(checkSumAddress)}
+            >
+              {isAddressCopiedToClipboard ? (
+                <>
+                  <CheckCircleIcon className="text-xl font-normal h-6 w-4 ml-2 sm:ml-0" aria-hidden="true" />
+                  <span className="whitespace-nowrap">Copied!</span>
+                </>
+              ) : (
+                <>
+                  <DocumentDuplicateIcon className="text-xl font-normal h-6 w-4 ml-2 sm:ml-0" aria-hidden="true" />
+                  <span className="whitespace-nowrap">Copy address</span>
+                </>
+              )}
+            </div>
+          </li>
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <label htmlFor="qrcode-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3">
+              <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <span className="whitespace-nowrap">View QR Code</span>
+            </label>
+          </li>
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <button className="h-8 btn-sm rounded-xl! flex gap-3 py-3" type="button">
+              <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <a
+                target="_blank"
+                href={blockExplorerAddressLink}
+                rel="noopener noreferrer"
+                className="whitespace-nowrap"
+              >
+                View on Block Explorer
+              </a>
+            </button>
+          </li>
+          {allowedNetworks.length > 1 ? (
+            <li className={selectingNetwork ? "hidden" : ""}>
+              <button
+                className="h-8 btn-sm rounded-xl! flex gap-3 py-3"
+                type="button"
+                onClick={() => {
+                  setSelectingNetwork(true);
+                }}
+              >
+                <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Switch Network</span>
+              </button>
+            </li>
+          ) : null}
+          {connector?.id === BURNER_WALLET_ID ? (
+            <li>
+              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3 text-error">
+                <EyeIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                <span>Reveal Private Key</span>
+              </label>
+            </li>
+          ) : null}
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <button
+              className="menu-item text-error h-8 btn-sm rounded-xl! flex gap-3 py-3"
+              type="button"
+              onClick={() => disconnect()}
+            >
+              <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
+            </button>
+          </li>
+        </ul>
+      </details>
+    </>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -0,0 +1,44 @@
+import { Address } from "@scaffold-ui/components";
+import { QRCodeSVG } from "qrcode.react";
+import { Address as AddressType } from "viem";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+type AddressQRCodeModalProps = {
+  address: AddressType;
+  modalId: string;
+};
+
+export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => {
+  const { targetNetwork } = useTargetNetwork();
+  return (
+    <>
+      <div>
+        <input type="checkbox" id={`${modalId}`} className="modal-toggle" />
+        <label htmlFor={`${modalId}`} className="modal cursor-pointer">
+          <label className="modal-box relative">
+            {/* dummy input to capture event onclick on modal box */}
+            <input className="h-0 w-0 absolute top-0 left-0" />
+            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+              ✕
+            </label>
+            <div className="space-y-3 py-6">
+              <div className="flex flex-col items-center gap-6">
+                <QRCodeSVG value={address} size={256} />
+                <Address
+                  address={address}
+                  format="long"
+                  disableAddressLink
+                  onlyEnsOrAddress
+                  blockExplorerAddressLink={
+                    targetNetwork.id === hardhat.id ? `/blockexplorer/address/${address}` : undefined
+                  }
+                />
+              </div>
+            </div>
+          </label>
+        </label>
+      </div>
+    </>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from "next-themes";
+import { useAccount, useSwitchChain } from "wagmi";
+import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
+import { getNetworkColor } from "~~/hooks/scaffold-eth";
+import { getTargetNetworks } from "~~/utils/scaffold-eth";
+
+const allowedNetworks = getTargetNetworks();
+
+type NetworkOptionsProps = {
+  hidden?: boolean;
+};
+
+export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
+  const { switchChain } = useSwitchChain();
+  const { chain } = useAccount();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+
+  return (
+    <>
+      {allowedNetworks
+        .filter(allowedNetwork => allowedNetwork.id !== chain?.id)
+        .map(allowedNetwork => (
+          <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
+            <button
+              className="menu-item btn-sm rounded-xl! flex gap-3 py-3 whitespace-nowrap"
+              type="button"
+              onClick={() => {
+                switchChain?.({ chainId: allowedNetwork.id });
+              }}
+            >
+              <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <span>
+                Switch to{" "}
+                <span
+                  style={{
+                    color: getNetworkColor(allowedNetwork, isDarkMode),
+                  }}
+                >
+                  {allowedNetwork.name}
+                </span>
+              </span>
+            </button>
+          </li>
+        ))}
+    </>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx

@@ -0,0 +1,59 @@
+import { useRef } from "react";
+import { rainbowkitBurnerWallet } from "burner-connector";
+import { ShieldExclamationIcon } from "@heroicons/react/24/outline";
+import { useCopyToClipboard } from "~~/hooks/scaffold-eth";
+import { getParsedError, notification } from "~~/utils/scaffold-eth";
+
+const BURNER_WALLET_PK_KEY = "burnerWallet.pk";
+
+export const RevealBurnerPKModal = () => {
+  const { copyToClipboard, isCopiedToClipboard } = useCopyToClipboard();
+  const modalCheckboxRef = useRef<HTMLInputElement>(null);
+
+  const handleCopyPK = async () => {
+    try {
+      const storage = rainbowkitBurnerWallet.useSessionStorage ? sessionStorage : localStorage;
+      const burnerPK = storage?.getItem(BURNER_WALLET_PK_KEY);
+      if (!burnerPK) throw new Error("Burner wallet private key not found");
+      await copyToClipboard(burnerPK);
+      notification.success("Burner wallet private key copied to clipboard");
+    } catch (e) {
+      const parsedError = getParsedError(e);
+      notification.error(parsedError);
+      if (modalCheckboxRef.current) modalCheckboxRef.current.checked = false;
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <input type="checkbox" id="reveal-burner-pk-modal" className="modal-toggle" ref={modalCheckboxRef} />
+        <label htmlFor="reveal-burner-pk-modal" className="modal cursor-pointer">
+          <label className="modal-box relative">
+            {/* dummy input to capture event onclick on modal box */}
+            <input className="h-0 w-0 absolute top-0 left-0" />
+            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+              ✕
+            </label>
+            <div>
+              <p className="text-lg font-semibold m-0 p-0">Copy Burner Wallet Private Key</p>
+              <div role="alert" className="alert alert-warning mt-4">
+                <ShieldExclamationIcon className="h-6 w-6" />
+                <span className="font-semibold">
+                  Burner wallets are intended for local development only and are not safe for storing real funds.
+                </span>
+              </div>
+              <p>
+                Your Private Key provides <strong>full access</strong> to your entire wallet and funds. This is
+                currently stored <strong>temporarily</strong> in your browser.
+              </p>
+              <button className="btn btn-outline btn-error" onClick={handleCopyPK} disabled={isCopiedToClipboard}>
+                Copy Private Key To Clipboard
+              </button>
+            </div>
+          </label>
+        </label>
+      </div>
+    </>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx

@@ -0,0 +1,32 @@
+import { NetworkOptions } from "./NetworkOptions";
+import { useDisconnect } from "wagmi";
+import { ArrowLeftOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+
+export const WrongNetworkDropdown = () => {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <div className="dropdown dropdown-end mr-2">
+      <label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1">
+        <span>Wrong network</span>
+        <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
+      </label>
+      <ul
+        tabIndex={0}
+        className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+      >
+        <NetworkOptions />
+        <li>
+          <button
+            className="menu-item text-error btn-sm rounded-xl! flex gap-3 py-3"
+            type="button"
+            onClick={() => disconnect()}
+          >
+            <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />
+            <span>Disconnect</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+// @refresh reset
+import { AddressInfoDropdown } from "./AddressInfoDropdown";
+import { AddressQRCodeModal } from "./AddressQRCodeModal";
+import { RevealBurnerPKModal } from "./RevealBurnerPKModal";
+import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { Balance } from "@scaffold-ui/components";
+import { Address } from "viem";
+import { useNetworkColor } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
+
+/**
+ * Custom Wagmi Connect Button (watch balance + custom design)
+ */
+export const RainbowKitCustomConnectButton = () => {
+  const networkColor = useNetworkColor();
+  const { targetNetwork } = useTargetNetwork();
+
+  return (
+    <ConnectButton.Custom>
+      {({ account, chain, openConnectModal, mounted }) => {
+        const connected = mounted && account && chain;
+        const blockExplorerAddressLink = account
+          ? getBlockExplorerAddressLink(targetNetwork, account.address)
+          : undefined;
+
+        return (
+          <>
+            {(() => {
+              if (!connected) {
+                return (
+                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                    Connect Wallet
+                  </button>
+                );
+              }
+
+              if (chain.unsupported || chain.id !== targetNetwork.id) {
+                return <WrongNetworkDropdown />;
+              }
+
+              return (
+                <>
+                  <div className="flex flex-col items-center mr-2">
+                    <Balance
+                      address={account.address as Address}
+                      style={{
+                        minHeight: "0",
+                        height: "auto",
+                        fontSize: "0.8em",
+                      }}
+                    />
+                    <span className="text-xs" style={{ color: networkColor }}>
+                      {chain.name}
+                    </span>
+                  </div>
+                  <AddressInfoDropdown
+                    address={account.address as Address}
+                    displayName={account.displayName}
+                    ensAvatar={account.ensAvatar}
+                    blockExplorerAddressLink={blockExplorerAddressLink}
+                  />
+                  <AddressQRCodeModal address={account.address as Address} modalId="qrcode-modal" />
+                  <RevealBurnerPKModal />
+                </>
+              );
+            })()}
+          </>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};

packages/nextjs/components/scaffold-eth/index.tsx

@@ -0,0 +1,4 @@
+export * from "./BlockieAvatar";
+export * from "./Faucet";
+export * from "./FaucetButton";
+export * from "./RainbowKitCustomConnectButton";