Initial commit with 🏗️ create-eth @ 2.0.4

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";