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

Weekly CLI backmerge

Author: technophile-04

.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`.

…ponents/blockexplorer/AddressCodeTab.tsx …kexplorer/_components/AddressCodeTab.tsxtemplates/base/packages/nextjs/components/blockexplorer/AddressCodeTab.tsx renamed to templates/base/packages/nextjs/app/blockexplorer/_components/AddressCodeTab.tsx templates/base/packages/nextjs/components/blockexplorer/AddressCodeTab.tsx renamed to templates/base/packages/nextjs/app/blockexplorer/_components/AddressCodeTab.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/app/blockexplorer/_components/AddressComponent.tsx

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

…ponents/blockexplorer/AddressLogsTab.tsx …kexplorer/_components/AddressLogsTab.tsxtemplates/base/packages/nextjs/components/blockexplorer/AddressLogsTab.tsx renamed to templates/base/packages/nextjs/app/blockexplorer/_components/AddressLogsTab.tsx templates/base/packages/nextjs/components/blockexplorer/AddressLogsTab.tsx renamed to templates/base/packages/nextjs/app/blockexplorer/_components/AddressLogsTab.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>
+  );
+};