Merge pull request #796 from scaffold-eth/cli-weekly-backmerge

Cli weekly backmerge

Author: technophile-04

.changeset/pink-vans-taste.md

@@ -0,0 +1,12 @@
+---
+"create-eth": patch
+---
+
+- Extract metadata title and description (#770)
+- Remove Goerli from supported networks (#771)
+- fix: redundant error notifications on block explorer (#775)
+- chore: fix typo (#777)
+- fix: vercel deployment linking from github (#780)
+- Remove useAccountBalance (#788)
+- Templatise README in CLI (#790, #782)
+- Add .env to .gitignore in nextjs package (#798)

templates/base/package.json

@@ -17,8 +17,8 @@
     "format": "yarn next:format",
     "postinstall": "husky install",
     "precommit": "lint-staged",
-    "vercel": "vercel",
-    "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
+    "vercel": "yarn workspace @se-2/nextjs vercel",
+    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo"
   },
   "packageManager": "yarn@3.2.3",
   "devDependencies": {

templates/base/packages/nextjs/.gitignore.template.mjs

@@ -27,12 +27,14 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 # typescript
-*.tsbuildinfo`
+*.tsbuildinfo
+.vercel`
 
-export default contents
+export default contents

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

@@ -4,7 +4,9 @@ type AddressCodeTabProps = {
 };
 
 export const AddressCodeTab = ({ bytecode, assembly }: AddressCodeTabProps) => {
-  const formattedAssembly = assembly.split(" ").join("\n");
+  const formattedAssembly = Array.from(assembly.matchAll(/\w+( 0x[a-fA-F0-9]+)?/g))
+    .map(it => it[0])
+    .join("\n");
 
   return (
     <div className="flex flex-col gap-3 p-4">

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { PaginationButton, SearchBar, TransactionsTable } from "./_components";
 import type { NextPage } from "next";
 import { hardhat } from "viem/chains";
@@ -11,24 +11,23 @@ import { notification } from "~~/utils/scaffold-eth";
 const BlockExplorer: NextPage = () => {
   const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage, error } = useFetchBlocks();
   const { targetNetwork } = useTargetNetwork();
+  const [isLocalNetwork, setIsLocalNetwork] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (targetNetwork.id !== hardhat.id) {
+      setIsLocalNetwork(false);
+    }
+  }, [targetNetwork.id]);
 
   useEffect(() => {
     if (targetNetwork.id === hardhat.id && 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>
-        </>,
-      );
+      setHasError(true);
     }
+  }, [targetNetwork.id, error]);
 
-    if (targetNetwork.id !== hardhat.id) {
+  useEffect(() => {
+    if (!isLocalNetwork) {
       notification.error(
         <>
           <p className="font-bold mt-0 mb-1">
@@ -48,7 +47,29 @@ const BlockExplorer: NextPage = () => {
         </>,
       );
     }
-  }, [error, targetNetwork]);
+  }, [
+    isLocalNetwork,
+    targetNetwork.blockExplorers?.default.name,
+    targetNetwork.blockExplorers?.default.url,
+    targetNetwork.name,
+  ]);
+
+  useEffect(() => {
+    if (hasError) {
+      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>
+        </>,
+      );
+    }
+  }, [hasError]);
 
   return (
     <div className="container mx-auto my-10">

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

@@ -9,19 +9,23 @@ const baseUrl = process.env.VERCEL_URL
   : `http://localhost:${process.env.PORT || 3000}`;
 const imageUrl = `${baseUrl}/thumbnail.jpg`;
 
+const title = "Scaffold-ETH 2 App";
+const titleTemplate = "%s | Scaffold-ETH 2";
+const description = "Built with 🏗 Scaffold-ETH 2";
+
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
   title: {
-    default: "Scaffold-ETH 2 App",
-    template: "%s | Scaffold-ETH 2",
+    default: title,
+    template: titleTemplate,
   },
-  description: "Built with 🏗 Scaffold-ETH 2",
+  description,
   openGraph: {
     title: {
-      default: "Scaffold-ETH 2 App",
-      template: "%s | Scaffold-ETH 2",
+      default: title,
+      template: titleTemplate,
     },
-    description: "Built with 🏗 Scaffold-ETH 2",
+    description,
     images: [
       {
         url: imageUrl,
@@ -32,10 +36,10 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     images: [imageUrl],
     title: {
-      default: "Scaffold-ETH 2",
-      template: "%s | Scaffold-ETH 2",
+      default: title,
+      template: titleTemplate,
     },
-    description: "Built with 🏗 Scaffold-ETH 2",
+    description,
   },
   icons: {
     icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],

templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -2,8 +2,9 @@
 
 import { useState } from "react";
 import { Address } from "viem";
-import { useAccountBalance } from "~~/hooks/scaffold-eth";
+import { useBalance } from "wagmi";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
 
 type BalanceProps = {
   address?: Address;
@@ -16,7 +17,17 @@ type BalanceProps = {
  */
 export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
   const { targetNetwork } = useTargetNetwork();
-  const { balance, price, isError, isLoading } = useAccountBalance(address);
+
+  const price = useGlobalState(state => state.nativeCurrencyPrice);
+  const {
+    data: balance,
+    isError,
+    isLoading,
+  } = useBalance({
+    address,
+    watch: true,
+  });
+
   const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false);
 
   const toggleBalanceMode = () => {
@@ -44,6 +55,8 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
     );
   }
 
+  const formattedBalance = balance ? Number(balance.formatted) : 0;
+
   return (
     <button
       className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
@@ -53,11 +66,11 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
         {displayUsdMode ? (
           <>
             <span className="text-[0.8em] font-bold mr-1">$</span>
-            <span>{(balance * price).toFixed(2)}</span>
+            <span>{(formattedBalance * price).toFixed(2)}</span>
           </>
         ) : (
           <>
-            <span>{balance?.toFixed(4)}</span>
+            <span>{formattedBalance.toFixed(4)}</span>
             <span className="text-[0.8em] font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
           </>
         )}

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

@@ -4,8 +4,9 @@ import { useState } from "react";
 import { createWalletClient, http, parseEther } from "viem";
 import { hardhat } from "viem/chains";
 import { useAccount, useNetwork } from "wagmi";
+import { useBalance } from "wagmi";
 import { BanknotesIcon } from "@heroicons/react/24/outline";
-import { useAccountBalance, useTransactor } from "~~/hooks/scaffold-eth";
+import { useTransactor } from "~~/hooks/scaffold-eth";
 
 // Number of ETH faucet sends to an address
 const NUM_OF_ETH = "1";
@@ -21,7 +22,11 @@ const localWalletClient = createWalletClient({
  */
 export const FaucetButton = () => {
   const { address } = useAccount();
-  const { balance } = useAccountBalance(address);
+
+  const { data: balance } = useBalance({
+    address,
+    watch: true,
+  });
 
   const { chain: ConnectedChain } = useNetwork();
 
@@ -50,10 +55,12 @@ export const FaucetButton = () => {
     return null;
   }
 
+  const isBalanceZero = balance && balance.value === 0n;
+
   return (
     <div
       className={
-        balance
+        !isBalanceZero
           ? "ml-1"
           : "ml-1 tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
       }

templates/base/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx

@@ -35,7 +35,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
     [onChange],
   );
 
-  // Runs only when reFocus prop is passed, usefull for setting the cursor
+  // Runs only when reFocus prop is passed, useful for setting the cursor
   // at the end of the input. Example AddressInput
   const onFocus = (e: FocusEvent<HTMLInputElement, Element>) => {
     if (reFocus !== undefined) {

templates/base/packages/nextjs/hooks/scaffold-eth/index.ts

@@ -1,4 +1,3 @@
-export * from "./useAccountBalance";
 export * from "./useAnimationConfig";
 export * from "./useBurnerWallet";
 export * from "./useDeployedContractInfo";