Merge pull request #685 from scaffold-eth/backmerge-main

Weekly CLI backmerge

.changeset/hip-vans-sing.md

@@ -0,0 +1,8 @@
+---
+"create-eth": patch
+---
+
+- App router migration (#535)
+- Update hardhat package plugins and add hardhat-verify (#637)
+- Update homepage file route and add Viem to README tech stack (#691)
+- Ethers v6 migration in hardhat (#692)

README.md

@@ -10,7 +10,7 @@
 
 🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
 
-⚙️ Built using NextJS, RainbowKit, Hardhat, Foundry, Wagmi, and Typescript.
+⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
 
 - ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
 - 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
@@ -24,7 +24,7 @@
 
 Before you begin, you need to install the following tools:
 
-- [Node (v18 LTS)](https://nodejs.org/en/download/)
+- [Node (>= v18.17)](https://nodejs.org/en/download/)
 - Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
 - [Git](https://git-scm.com/downloads)
 

templates/base/.github/workflows/lint.yaml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16.x]
+        node: [lts/*]
 
     steps:
       - name: Checkout
@@ -25,13 +25,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache : yarn
+          cache: yarn
 
       - name: Install dependencies
         run: yarn install --immutable
 
       - name: Run hardhat node, deploy contracts (& generate contracts typescript output)
-        run: yarn chain & yarn deploy 
+        run: yarn chain & yarn deploy
 
       - name: Run nextjs lint
         run: yarn next:lint --max-warnings=0

templates/base/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged --verbose
+yarn lint-staged --verbose

templates/base/README.md

@@ -2,7 +2,7 @@
 
 🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
 
-⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, and Typescript.
+⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
 
 - ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
 - 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
@@ -114,6 +114,14 @@ You can verify your smart contract on Etherscan by running:
 yarn verify --network network_name
 ```
 
+eg: `yarn verify --network sepolia`
+
+This uses [etherscan-verify from hardhat-deploy](https://www.npmjs.com/package/hardhat-deploy#4-hardhat-etherscan-verify) to verify all the deployed contracts.
+
+You can alternatively use [hardhat-verify](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify) to verify your contracts, passing network name, contract address and constructor arguments (if any): `yarn hardhat-verify --network network_name contract_address "Constructor arg 1"`
+
+If the chain you're using is not supported by any of the verifying methods, you can add new supported chains to your chosen method, either [etherscan-verify](https://www.npmjs.com/package/hardhat-deploy#options-2) or [hardhat-verify](https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#adding-support-for-other-networks).
+
 ## Deploying your NextJS App
 
 **Hint**: We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to `main`.

templates/base/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx

@@ -0,0 +1,35 @@
+import { BackButton } from "./BackButton";
+import { ContractTabs } from "./ContractTabs";
+import { Address, Balance } from "~~/components/scaffold-eth";
+
+export const AddressComponent = ({
+  address,
+  contractData,
+}: {
+  address: string;
+  contractData: { bytecode: string; assembly: string } | null;
+}) => {
+  return (
+    <div className="m-10 mb-20">
+      <div className="flex justify-start mb-5">
+        <BackButton />
+      </div>
+      <div className="col-span-5 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10">
+        <div className="col-span-1 flex flex-col">
+          <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
+            <div className="flex">
+              <div className="flex flex-col gap-1">
+                <Address address={address} format="long" />
+                <div className="flex gap-1 items-center">
+                  <span className="font-bold text-sm">Balance:</span>
+                  <Balance address={address} className="text" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ContractTabs address={address} contractData={contractData} />
+    </div>
+  );
+};

templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx → templates/base/packages/nextjs/app/blockexplorer/_components/AddressStorageTab.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { Address, createPublicClient, http, toHex } from "viem";
 import { hardhat } from "viem/chains";

templates/base/packages/nextjs/app/blockexplorer/_components/BackButton.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export const BackButton = () => {
+  const router = useRouter();
+  return (
+    <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+      Back
+    </button>
+  );
+};

templates/base/packages/nextjs/app/blockexplorer/_components/ContractTabs.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AddressCodeTab } from "./AddressCodeTab";
+import { AddressLogsTab } from "./AddressLogsTab";
+import { AddressStorageTab } from "./AddressStorageTab";
+import { PaginationButton } from "./PaginationButton";
+import { TransactionsTable } from "./TransactionsTable";
+import { createPublicClient, http } from "viem";
+import { hardhat } from "viem/chains";
+import { useFetchBlocks } from "~~/hooks/scaffold-eth";
+
+type AddressCodeTabProps = {
+  bytecode: string;
+  assembly: string;
+};
+
+type PageProps = {
+  address: string;
+  contractData: AddressCodeTabProps | null;
+};
+
+const publicClient = createPublicClient({
+  chain: hardhat,
+  transport: http(),
+});
+
+export const ContractTabs = ({ address, contractData }: PageProps) => {
+  const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage } = useFetchBlocks();
+  const [activeTab, setActiveTab] = useState("transactions");
+  const [isContract, setIsContract] = useState(false);
+
+  useEffect(() => {
+    const checkIsContract = async () => {
+      const contractCode = await publicClient.getBytecode({ address: address });
+      setIsContract(contractCode !== undefined && contractCode !== "0x");
+    };
+
+    checkIsContract();
+  }, [address]);
+
+  const filteredBlocks = blocks.filter(block =>
+    block.transactions.some(tx => {
+      if (typeof tx === "string") {
+        return false;
+      }
+      return tx.from.toLowerCase() === address.toLowerCase() || tx.to?.toLowerCase() === address.toLowerCase();
+    }),
+  );
+
+  return (
+    <>
+      {isContract && (
+        <div className="tabs tabs-lifted w-min">
+          <button
+            className={`tab ${activeTab === "transactions" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("transactions")}
+          >
+            Transactions
+          </button>
+          <button className={`tab ${activeTab === "code" ? "tab-active" : ""}`} onClick={() => setActiveTab("code")}>
+            Code
+          </button>
+          <button
+            className={`tab  ${activeTab === "storage" ? "tab-active" : ""}`}
+            onClick={() => setActiveTab("storage")}
+          >
+            Storage
+          </button>
+          <button className={`tab  ${activeTab === "logs" ? "tab-active" : ""}`} onClick={() => setActiveTab("logs")}>
+            Logs
+          </button>
+        </div>
+      )}
+      {activeTab === "transactions" && (
+        <div className="pt-4">
+          <TransactionsTable blocks={filteredBlocks} transactionReceipts={transactionReceipts} />
+          <PaginationButton
+            currentPage={currentPage}
+            totalItems={Number(totalBlocks)}
+            setCurrentPage={setCurrentPage}
+          />
+        </div>
+      )}
+      {activeTab === "code" && contractData && (
+        <AddressCodeTab bytecode={contractData.bytecode} assembly={contractData.assembly} />
+      )}
+      {activeTab === "storage" && <AddressStorageTab address={address} />}
+      {activeTab === "logs" && <AddressLogsTab address={address} />}
+    </>
+  );
+};

templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx → templates/base/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useState } from "react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { isAddress, isHex } from "viem";
 import { hardhat } from "viem/chains";
 import { usePublicClient } from "wagmi";

templates/base/packages/nextjs/components/blockexplorer/TransactionHash.tsx → templates/base/packages/nextjs/app/blockexplorer/_components/TransactionHash.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";

templates/base/packages/nextjs/components/blockexplorer/TransactionsTable.tsx → templates/base/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx

@@ -1,5 +1,5 @@
+import { TransactionHash } from "./TransactionHash";
 import { formatEther } from "viem";
-import { TransactionHash } from "~~/components/blockexplorer/TransactionHash";
 import { Address } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { TransactionWithFunction } from "~~/utils/scaffold-eth";

templates/base/packages/nextjs/components/blockexplorer/index.tsx → templates/base/packages/nextjs/app/blockexplorer/_components/index.tsx

@@ -1,7 +1,7 @@
-export * from "./AddressCodeTab";
-export * from "./AddressLogsTab";
-export * from "./AddressStorageTab";
-export * from "./PaginationButton";
 export * from "./SearchBar";
+export * from "./BackButton";
+export * from "./AddressCodeTab";
 export * from "./TransactionHash";
+export * from "./ContractTabs";
+export * from "./PaginationButton";
 export * from "./TransactionsTable";

templates/base/packages/nextjs/app/blockexplorer/address/[address]/page.tsx.template.mjs

@@ -0,0 +1,93 @@
+import { withDefaults } from "../../../../../../../utils.js";
+
+const contents = ({ chainName, artifactsDirName }) => `
+import fs from "fs";
+import path from "path";
+import { ${chainName[0]} } from "viem/chains";
+import { AddressComponent } from "~~/app/blockexplorer/_components/AddressComponent";
+import deployedContracts from "~~/contracts/deployedContracts";
+import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
+
+type PageProps = {
+  params: { address: string };
+};
+
+async function fetchByteCodeAndAssembly(buildInfoDirectory: string, contractPath: string) {
+  const buildInfoFiles = fs.readdirSync(buildInfoDirectory);
+  let bytecode = "";
+  let assembly = "";
+
+  for (let i = 0; i < buildInfoFiles.length; i++) {
+    const filePath = path.join(buildInfoDirectory, buildInfoFiles[i]);
+
+    const buildInfo = JSON.parse(fs.readFileSync(filePath, "utf8"));
+
+    if (buildInfo.output.contracts[contractPath]) {
+      for (const contract in buildInfo.output.contracts[contractPath]) {
+        bytecode = buildInfo.output.contracts[contractPath][contract].evm.bytecode.object;
+        assembly = buildInfo.output.contracts[contractPath][contract].evm.bytecode.opcodes;
+        break;
+      }
+    }
+
+    if (bytecode && assembly) {
+      break;
+    }
+  }
+
+  return { bytecode, assembly };
+}
+
+const getContractData = async (address: string) => {
+  const contracts = deployedContracts as GenericContractsDeclaration | null;
+  const chainId = ${chainName[0]}.id;
+  let contractPath = "";
+
+  const buildInfoDirectory = path.join(
+    __dirname,
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "${chainName[0]}",
+    "${artifactsDirName[0]}",
+    "build-info",
+  );
+
+  if (!fs.existsSync(buildInfoDirectory)) {
+    throw new Error(\`Directory \${buildInfoDirectory} not found.\`);
+  }
+
+  const deployedContractsOnChain = contracts ? contracts[chainId] : {};
+  for (const [contractName, contractInfo] of Object.entries(deployedContractsOnChain)) {
+    if (contractInfo.address.toLowerCase() === address) {
+      contractPath = \`contracts/\${contractName}.sol\`;
+      break;
+    }
+  }
+
+  if (!contractPath) {
+    // No contract found at this address
+    return null;
+  }
+
+  const { bytecode, assembly } = await fetchByteCodeAndAssembly(buildInfoDirectory, contractPath);
+
+  return { bytecode, assembly };
+};
+
+const AddressPage = async ({ params }: PageProps) => {
+  const address = params?.address as string;
+  const contractData: { bytecode: string; assembly: string } | null = await getContractData(address);
+  return <AddressComponent address={address} contractData={contractData} />;
+};
+
+export default AddressPage;`;
+
+export default withDefaults(contents, {
+  chainName: "hardhat",
+  artifactsDirName: "artifacts",
+});

templates/base/packages/nextjs/app/blockexplorer/layout.tsx

@@ -0,0 +1,12 @@
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Block Explorer",
+  description: "Block Explorer created with 🏗 Scaffold-ETH 2",
+});
+
+const BlockExplorerLayout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default BlockExplorerLayout;

templates/base/packages/nextjs/pages/blockexplorer/index.tsx → templates/base/packages/nextjs/app/blockexplorer/page.tsx

@@ -1,9 +1,9 @@
+"use client";
+
 import { useEffect } from "react";
+import { PaginationButton, SearchBar, TransactionsTable } from "./_components";
 import type { NextPage } from "next";
 import { hardhat } from "viem/chains";
-import { PaginationButton } from "~~/components/blockexplorer/PaginationButton";
-import { SearchBar } from "~~/components/blockexplorer/SearchBar";
-import { TransactionsTable } from "~~/components/blockexplorer/TransactionsTable";
 import { useFetchBlocks } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { notification } from "~~/utils/scaffold-eth";